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

*
  margin: 0
  padding: 0
  line-height: 1em
  @include transition-duration(0.5s)

[class^="fa-"], [class*=" fa-"]
  font-family: FontAwesome, georgia, serif !important
  &:before
    font-style: normal
    font-weight: normal !important

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

body
  border: 1px solid #68A6E5
  margin: 5px 5px 0
  padding: 10px
  text-align: center
  background: url("baby_gnu_adl.png") no-repeat scroll 30px 10px #FFFFFF
  border-bottom: 0px

a:link, a:visited
  color: #336699
  font-weight: bold
  text-decoration: none

header.top
  position: relative
  h1
    margin: 10px 5px 5px
    padding: 0
    font-size: 2.1em
    line-height: 1em
    letter-spacing: 2px
  h2
    font-size: 0.8em
    margin-top: 12px
    font-style: italic
    font-weight: normal
    padding-bottom: 5px

  ul.countries
    top: -8px
    right: 0.6em
    position: absolute
    font-size: 0.7em
    list-style-type: none
    li
      text-align: left
      line-height: 1.2em
      img
        margin-right: 0.6em
        vertical-align: middle

main
  h1
    margin: 10px 5px 5px 5px
    letter-spacing: 2px
  h2
    margin: 52px 0px 18px
  h3
    margin: 1.1em 0 1em
    font-size: 1.2em
    text-align: left
  ul, ol
    margin: 10px 0px 10px 35px
    text-align: left
    li
      margin-left: 2em
      line-height: 1.3em
  p
    margin: 0.9em 0
    line-height: 1.3em
    text-align: justify

footer.bottom nav
  margin: 29px auto -3px
  font-size: smaller
  a + a:before
    color: black
    content: '- '
    font-weight: normal