@import compass
@import font-awesome

*
  padding: 0
  max-width: 100%
  margin-left: auto
  margin-right: auto
  +box-sizing(border-box)

html
  color: black
  height: 100%
  text-align: center
  font-family: georgia, serif
  background-color: #9CC5EE
  // Integrating adl in another website
  &.iframe
    background-color: transparent
    body
      border: none
      background-color: transparent
      .region_selector, .lug_search, .formats, #banner
        display: none

body
  border: 1px solid #68A6E5
  margin: 0.3em
  padding: 10px
  padding-top: 0
  background-color: white
  header, main, footer
    *
      +transition-duration(0.5s)

a
  +link-colors(#258, #2E97FF, #2E97FF, #258, #2E97FF)
  &:link, &:visited
    font-weight: bold
    text-decoration: none

#flash_messages .flash
  color: white
  border: solid 1px #007ba0
  margin: 1em auto
  padding: 0.5em 1.1em
  max-width: 50em
  font-size: x-large
  text-align: justify
  background-color: #008cba
  +box-shadow(0 0 0.3em gray)
  +border-radius(3px)
  &.notice
    border-color: #3a945b
    background-color: #43ac6a
  &.alert
    border-color: #de2b0f
    background-color: #f04124

h3.warning
  color: white
  margin: 0
  padding: 1em
  text-align: center
  background-color: orange
  +box-shadow(0 0 0.3em gray)
  +inline-block()
  +border-radius(1em)

header.top
  img.logo
    float: left
    margin-left: 20px

  ul.countries
    float: right
    width: 80px
    font-size: 0.7em
    line-height: 1em
    margin-left: 29px
    margin-right: 11px
    list-style-type: none
    li
      text-align: left
      & a:before
        white-space: nowrap
        margin-right: 0.75em
      &.map_france a:before
        content: image-url('france.png')
      &.map_quebec a:before
        content: image-url('quebec.png')
      &.map_belgique a:before
        content: image-url('belgique.png')
      &.map_suisse a:before
        content: image-url('suisse.png')

  h1
    font-size: 2.1em
    letter-spacing: 2px
  h2
    font:
      size: 1.2em
      style: italic
      weight: normal
    margin-top: -0.5em

main, body.mce-content-body
  position: relative
  & > *
    max-width: 80em
  h1
    margin: 10px auto 5px auto
    letter-spacing: 2px
  h2
    margin: 50px auto 20px
  h3
    margin: 1.1em auto 1em
    font-size: 1.2em
    text-align: left
  ul, ol
    text-align: left
    li
      margin-left: 2em
  p
    text-align: justify
    &.label
      text-align: center
    span.label:after
      content: ':'
  hr
    margin: 10px 20px

  &.mce-content-body
    margin: 0
    border: solid thin transparent
    font-size: initial
    min-height: 100%
    font-family: georgia, serif

iframe
  border: none
  max-width: 100%
  margin-bottom: 1.6em
  +border-radius(1em)

fieldset
  border: none
  margin: 1em auto
  padding: 1em
  +box-shadow(1px 1px 5px gray)
  +border-radius(0.4em)
  legend
    float: left
    color: gray
    padding: 0 1em
    margin-top: -1.6em
    background-color: white
  h2
    margin-top: 0

label
  text-align: right
  padding-right: 0.4em
.mce-tinymce
  border: 1px solid darkgray
  +box-shadow(1px 1px 2px lightgray)
  +border-radius(0.4em)
input, textarea, select, a.button, button, .select2-container ul
  color: black
  margin: 3px 0
  border: 1px solid darkgray
  outline: none
  padding: 0.2em 0.4em
  font-size: inherit
  font-family: inherit
  background-color: white
  +box-shadow(1px 1px 2px lightgray)
  +border-radius(0.4em)
  &:focus
    background-color: #F0F8FF
    +box-shadow(1px 1px 4px gray)
  &[type=radio]
    +box-shadow(none)
  &[type=radio] + label
    text-align: left
  &[type=submit], &.button, button
    color: black
    border: none
    cursor: pointer
    margin: 3px 0.4em
    padding: 0.2em 0.6em
    font-size: larger
    font-weight: bolder
    background-color: #9CC5EE
    +box-shadow(2px 2px 2px gray)
select, option
  color: black
  padding: 2px 4px
  background-color: white

button.ws-popover-opener
  color: darkgray
  background-color: transparent

.field_with_errors
  display: inline
  input, textarea, select, a.button
    background-color: pink

/*
  input, textarea, select
    color: black
    margin: 3px 0
    border: 1px solid #868686
    padding: 0.2em 0.8em
    font-family: georgia, serif
    background-color: white
    +border-radius(0.7em)
    &:focus
      outline: 0
      background-color: #F0F8FF
  input[type=submit]
    border: none
    font-size: x-large
    +box-shadow(0 0 1em lightblue)
    +text-shadow(1px 1px 1px white)
    &:hover
      +box-shadow(5px 5px 5px lightblue)

footer.bottom nav
  clear: both
  a
    display: inline-block
    padding: 1.8%
    em.fa
      font-size: x-large
    &:hover
      +text-shadow(0 0 1em lightgray)

#loading
  top: 45%
  left: 45%
  color: gray
  display: none
  position: fixed
  font-size: 10vw
  vertical-align: baseline
  +text-shadow(0 0 4px gray)

.select2-container ul
  min-width: 46em
.select2-container-multi.select2-container-active .select2-choices, .select2-drop
  border: none !important
  +box-shadow(1px 1px 4px gray)
// Otherwise the cross to remove tags is centered
.select2-container *, .select2-choices *
  margin: initial
  +transition-duration(0)