agenda-libre-ruby/app/assets/stylesheets/all.css.sass

@import compass
@import font-awesome

*
  height: auto
  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
    width: 80px
    font-size: 0.7em
    margin-left: 29px
    margin-right: 11px
    list-style-type: none
    li
      text-align: left
      & a:before
        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: 0.8em
    font-style: italic
    font-weight: normal
    margin-bottom: 22px

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

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
  outline: none
  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
    @include box-shadow(1px 1px 4px gray)
  &[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)