@import font-awesome-sprockets
@import font-awesome
@import leaflet.awesome-markers

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

html
  color: black
  height: 100%
  text-align: center
  font-family: sans-serif
  background-color: #9CC5EE
  // Integrating adl in another website
  &.iframe
    background-color: transparent
    body
      border: none
      margin: 0
      padding: 0
      background-color: transparent
      & > header, & > footer,
      h2, nav, .region_selector, .orga_search, .formats, #banner
        display: none
      ul
        margin: 0

body
  border: 1px solid #68A6E5
  margin: 0.3em
  padding: 2%
  position: relative
  background-color: white
  header, main, footer
    *
      transition-duration: 0.5s

a
  &:link, &:visited
    color: #258
    text-decoration: none
  &:hover, &:active, &:focus
    color: #2E97FF

#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
  box-shadow: 0 0 0.3em gray
  border-radius: 3px
  background-color: #008cba
  &.notice
    border-color: #3a945b
    background-color: #43ac6a
  &.alert
    border-color: #de2b0f
    background-color: #f04124

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

header.top
  text-align: left
  img.logo
    float: left
    margin-right: 2%
  h1
    margin: 0
    font-size: 2.1em
  h2
    font:
      size: 1.2em
      style: italic
      weight: normal
    margin-top: 0

main, body.mce-content-body
  position: relative
  & > *
    max-width: 80em
  h1
    margin: 10px auto 5px auto
    letter-spacing: 2px
  h3
    text-align: left
  ul, ol
    text-align: left
    padding-left: 1em
    list-style-position: inside
  p
    text-align: left
    line-height: 1.5
    &.label
      text-align: center
    span.label:after
      content: ':'
  hr
    margin: 10px 20px

aside
  float: right
  width: 16em
  border: 1px solid #96CFFF
  margin: 0 1.2em
  z-index: 10
  padding: 5px
  position: relative
  font-size: 0.7em
  box-shadow: 4px 4px 1em gray
  margin-right: -4em
  border-radius: 1em
  background-color: #D6ECFF
  h1
    font-weight: normal
    border-bottom: 1px black solid
    padding-bottom: 0.3em
  h2
    margin: 0
    font-size: larger
    a
      padding: 0.5em 0
      display: block

fieldset
  border: none
  margin: 1em auto
  padding: 2%
  box-shadow: 1px 1px 5px gray
  border-radius: 0.4em
  legend
    color: gray
    padding: 0 1em
    background-color: white
  h2
    margin-top: 0

footer.bottom nav
  clear: both
  a
    padding: 1.8%
    display: inline-block
    font-weight: bolder
    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
  text-shadow: 0 0 4px gray
  vertical-align: baseline

.pagination
  span
    display: none
  span.next
    display: block