@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
  img.logo
    left: 2%
    position: absolute
  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

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

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: 10px
  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

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
  color: black
  margin: 3px 0
  border: 1px solid darkgray
  outline: none
  padding: 0.2em 0.4em
  font-size: inherit
  box-shadow: 1px 1px 2px lightgray
  font-family: inherit
  border-radius: 0.4em
  background-color: white
  &: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
    box-shadow: 2px 2px 2px gray
    font-weight: bolder
    background-color: #9CC5EE
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: Palatino, 'URW Palladio L', 'dejavu serif', georgia, serif
    border-radius: 0.7em
    background-color: white
    &: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
    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