@import compass
@import font-awesome

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

html
  color: black
  height: 100%
  line-height: 1.3em
  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: 0 10px 10px 10px
  text-align: center
  border-bottom: 0px
  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
  border-color: #de2b0f
  background-color: #f04124
  +box-shadow(0 0 0.3em gray)
  +inline-block()
  +border-radius(1em)

.fa:before
  font-style: normal
  font-weight: normal !important

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

  ul.countries
    float: right
    width: 80px
    font-size: 0.7em
    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
    margin: 10px 5px 12px
    font-size: 2.1em
    padding-top: 10px
    letter-spacing: 2px
  h2
    font-size: 1.2em
    font-style: italic
    font-weight: normal
    margin-bottom: 21px

main
  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
      line-height: 1.3em
  p
    margin: 0.95em auto
    text-align: justify
    line-height: 1.3em
    &.label
      text-align: center
    span.label:after
      content: ':'
  hr
    margin: 10px 20px

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, .select2-container ul
  color: black
  margin: 3px 0
  border: 1px solid darkgray
  outline: none
  padding: 2px 4px
  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
    color: black
    border: none
    cursor: pointer
    padding: 0.2em 0.6em
    font-size: larger
    line-height: 1.1em
    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
  margin: 26px auto -3px
  font-size: smaller
  a + a:before
    color: black
    content: '- '
    font-weight: normal

#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: 6em
.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)