@import "compass"
@import "font-awesome"

*
  margin: 0 auto
  padding: 0
  max-width: 100%
  box-sizing: border-box
  line-height: 1em

html
  color: black
  line-height: 1.3em
  font-family: georgia, serif
  padding-bottom: 6px
  background-color: #9CC5EE

body
  border: 1px solid #68A6E5
  margin: 5px 5px 0
  padding: 0 10px 10px 10px
  text-align: center
  border-bottom: 0px
  background-color: white
  header, main, footer
    *
      @include transition-duration(0.5s)

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

#flash_messages
  left: 0
  width: 100%
  z-index: 1000
  position: absolute
  margin-top: -2.5em
  .flash
    color: white
    border: solid 1px #007ba0
    margin: 1em auto
    padding: 0.5em 1.1em
    max-width: 40em
    font-size: x-large
    text-align: justify
    background-color: #008cba
    @include box-shadow(0 0 0.3em gray)
    @include border-radius(3px)
    &.notice
      border-color: #3a945b
      background-color: #43ac6a
    &.alert
      border-color: #de2b0f
      background-color: #f04124

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

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

  ul.countries
    float: right
    height: 81px
    font-size: 0.7em
    margin-top: 2px
    margin-right: 16px
    list-style-type: none
    li
      text-align: left
      line-height: 1.3em
      img
        margin-left: 2.2em
        margin-right: 0.75em
        vertical-align: middle

  h1
    margin: 10px 5px 12px
    font-size: 2.1em
    padding-top: 10px
    letter-spacing: 2px
  h2
    font-size: 0.8em
    font-style: italic
    font-weight: normal
    margin-bottom: 22px

  #banner img
    height: auto

main
  *
    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

  label
    text-align: right
    padding-right: 0.4em
  .mce-tinymce
    border: 1px solid darkgray
    @include box-shadow(1px 1px 2px lightgray)
    @include border-radius(0.4em)
  input, textarea, select, a.button
    color: black
    margin: 3px 0
    border: 1px solid darkgray
    padding: 2px 4px
    font-size: inherit
    font-family: inherit
    background-color: white
    @include box-shadow(1px 1px 2px lightgray)
    @include border-radius(0.4em)
    &:focus
      background-color: #F0F8FF
    &[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
      @include 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
    @include border-radius(0.7em)
    &:focus
      outline: 0
      background-color: #F0F8FF
  input[type=submit]
    border: none
    font-size: x-large
    @include box-shadow(0 0 1em lightblue)
    @include text-shadow(1px 1px 1px white)
    &:hover
      @include 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
  @include text-shadow(0 0 4px gray)