// Use // instead of /* */ to hide from production
@import sass/ey-theme-globals.css.sass
@import sass/ey-theme-jquery.tooltip.css.sass
@import sass/ey-theme-jquery-ui.css.sass
@import sass/ey-theme-960gs.css.sass
@import sass/ey-theme-buttons.css.sass

////////////
// Resets //
////////////
body
  font-size: 83%
  font-family: "proxima-nova-1","proxima-nova-2", Arial, "Liberation Sans", FreeSans, sans-serif
  color: #333
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  margin: 0
  background: #fff image-url("bg_sky.png") repeat-x
  background-position: 0 0
header, footer, article, section, aside, nav, div.section, div.nav
  display: block
#container
  font-size: 1em
  line-height: 1.5em
  background: transparent image-url("bg_cloudline.png") repeat-x
  background-position: 0 250px
hr
  border: 0 #DDD solid
  border-top-width: 1px
  clear: both
  height: 0
  margin: 10px 0
ol
  list-style: decimal
  li ol
    list-style: lower-alpha
ul
  list-style: disc
  &.nav
    margin: 1.95em 0 0
    list-style: none
    li
      display: inline-block
      line-height: 1em
      margin-left: 1em
      padding-left: 1em
      border-left: 1px solid #DDD
      &:first-child
        border-left: none
        padding-left: 0
        margin-left: 0
li
  margin-left: 30px

///////////////////
// HTML Elements //
///////////////////
h1, h2, h3, h4, h5, h6
  font-weight: normal
  line-height: 1.2em
  margin: 1.2em 0 1em
h1, .h1
  font-weight: 100
  font-size: 2.6em
h2, .h2
  font-size: 2.2em
  font-weight: 300
h3, .h3
  font-size: 1.6em
  color: #333
h4, .h4
  font-size: 1.2em
  line-height: 1.5em
  color: #333
  margin-top: 1.5em
h5, .h5
  font-size: 1.2em
  line-height: 1.5em
  color: #666
h6, .h6
  font-size: 1em
  line-height: 1.5em
p, .p
  font-size: 1em
.caption
  font-size: 1em
  text-transform: none
  color: #666
  margin-top: 0
.subtitle
  margin-top: -1.25em
ul, ol
  padding-left: 1.6em
li
  margin: 0 0 0.5em
dt
  font-weight: 700
dd
  margin-left: 0
  margin-bottom: 1.5em
.inline
  dt, dd
    float: left
    margin-bottom: 0.5em
  dt
    clear: left
    width: 80px
  &:after
    content: ' '
    display: block
    clear: both
  label, input
    display: inline-block
    clear: none
strong
  font-weight: 700
.light
  font-weight: 300
  color: #999
section, div.section
  clear: both
code
  font: 12px Monaco, Courier New, mono
  background: #F3F3F3
  border: 1px dotted #DDD
  padding: 0 3px
  color: #636363
blockquote
  font: italic 1.1em Georgia, Times New Roman, sans-serif
  line-height: 1.4em
  margin: 0
  color: #666
  & + cite
    margin-top: -1em
cite
  text-align: right
  font-size: 1em
  line-height: 1.2em
  display: block
  font-style: normal
  margin-top: 0
  margin-bottom: 2em
  color: #666
address
  clear: both
  font-style: normal

///////////
// Links //
///////////
a
  &:link
  text-decoration: none
  color: #369
  img
    border: none
  &:hover, &:active
    text-decoration: none
    color: darken(#369, 20%)
    img
      text-decoration: none
  &:focus
    outline: none
  h3, h4, h5, h6
    color: #369
    &:hover
      text-decoration: none

////////////
// Tables //
////////////
table
  width: 100%
  border-collapse: collapse
  border-bottom: 1px solid #999
  p
    margin: 0
    & + p
      margin-top: 1.5em
  &.wide
    margin-bottom: 1.5em
caption
  font-size: 1.2em
  font-weight: 700
  color: #333
  padding-bottom: 0.5em
  border-bottom: 2px solid #999
td, th
  text-align: left
  border-top: 1px dotted #DDD
  padding: 4px 5px
  vertical-align: top
  max-width: 410px
tr
  &.subhead th, &.subhead td, th.subhead, td.subhead
    padding-top: 14px
    border-bottom: 2px solid #EEE
  &:nth-child(even)
    td, th
      background: #F9F9F9
thead
  th, td
    border-top: none
    border-bottom: 2px solid #999
    vertical-align: bottom
  .sortable
    color: #333
    padding-right: 13px
    &:hover
      text-decoration: none
      color: #000
  .active
    color: #000
  .asc
    background: image-url("icn-asc.png") no-repeat right 6px
  .desc
    background: image-url("icn-dsc.png") no-repeat right 6px
tbody
  font-size: 95%
table.layout
  border: none
  td, th, tr
    background: none
    border: none
    padding: 0

///////////
// Forms //
///////////
form
  ul
    list-style: none
    padding: 0
    margin: 10px 0
    label
      margin-bottom: 10px
      margin-left: 5px
      display: inline
label
  display: block
  clear: both
input[type="text"], input[type="password"]
  font-size: 12px
  font-weight: 300
  font-family: "proxima-nova-1","proxima-nova-2", Arial, "Liberation Sans", FreeSans, sans-serif
  width: 200px
  border: 2px solid $color-border
  padding: 3px
  color: $color-text-alt
  @include tight-rounded-box
  &:focus 
    color: #000
fieldset
  border: none
  padding: 0
textarea
  font-family: "proxima-nova-1","proxima-nova-2", Arial, "Liberation Sans", FreeSans, sans-serif
  width: 380px
  height: 100px

/////////////////
// Base Layout //
/////////////////
header, div.header
  @include grey_gradient
  @include shadow
  display: block
  position: relative
  -moz-border-radius-bottomleft: 6px
  -moz-border-radius-bottomright: 6px
  -webkit-border-bottom-left-radius: 6px
  -webkit-border-bottom-right-radius: 6px
  border: solid #a6a39f
  border-width: 0 0 1px 0
  min-height: 72px
  color: #444656
  h1
    margin: 0
    overflow: hidden
    background: image-url("logo.png") no-repeat left top
    height: 81px
    width: 50px
    position: absolute
    top: 8px
    left: 20px
    text-indent: -10000px
    a
      display: block
      float: right
      overflow: hidden
      text-indent: -10000px
      height: 81px
      width: 50px
  a
    color: #FFF
    text-decoration: none
  ul
    margin: 0
    li
      display: inline-block
      margin-left: 10px
  #search_form
    position: absolute
    cursor: default
    right: 175px

    #searchbox
      width: 140px
      background: white
      height: 17px
      border-width: 1px
      -moz-border-radius: 0pt 0pt 2px 2px
      -webkit-border-radius: 0pt 0pt 2px 2px
      border-radius: 0pt 0pt 2px 2px

    #searchsubmit
      vertical-align: top
      width: 28px
      height: 25px
      margin-left: -6px
      background: image-url("header_sprite.png") no-repeat 0 -17px transparent
      border: none
      cursor: pointer
  #utility
    @include blue_gradient
    @include shadow
    position: absolute
    cursor: default
    right: 45px
    color: #fff 
    text-shadow: 0 1px 0 #000
    padding: 2px 20px
    border: solid #3b5a75
    -moz-border-radius: 0pt 0pt 2px 2px
    -webkit-border-radius: 0pt 0pt 2px 2px
    border-radius: 0pt 0pt 2px 2px
    border-width: 0pt 1px 1px
    div
      margin: 0
      float: none
      display: none
      font-size: 13px
      z-index: 100
      position: absolute
      background: transparent
      right: 0
      ul
        @include shadow
        background: #eee
        @include diagonal_gradient_light_grey
        margin: 4px 0 0
        border-top: 1px solid #dbdbdb
        padding: 0
        hr
          border-color: #cec9c4
          margin: 10px 20px
        li
          float: none
          clear: both
          margin: 0px 12px
          white-space: nowrap
          @include shadow-clear
          a:link, a:visited
            padding: 0 5px
            clear: both
            display: block
            color: $font-nav-color-light
            text-shadow: none
          a:hover
            color: darken($font-nav-color-light, 20%) !important
        li:first-child 
          padding-top: 8px
          border: none
        li:last-child 
          padding-bottom: 12px
        a, a:visited
          color: $font-nav-color-dark
    &:hover
      div
        display: block
    &:before
      content: ''
      display: inline-block
      background: image-url("header_sprite.png") transparent
      background-position: 19px -98px
      height: 11px
      width: 11px
  nav, div.nav
    position: absolute
    left: 100px
    top: 40px
    color: #000
    font-size: 16px
    ul  
      padding: 0  
      li
        float: left
        display: block
        position: relative
        margin: 0
        padding: 0
        list-style-type: none
        font-size: 16px
        span
          color: $font-nav-color-dark
          padding: 6px 8px 6px 0
          text-shadow: 0 1px 0 #fff
          font-weight: normal
          margin: 1px
          &:hover
            color: darken($font-nav-color-dark, 20%)
        span:after
          content: ""
          float: right
          height: 8px
          width: 10px
          margin: 8px 32px 0 0
        span.drop:after
          background: image-url("header_sprite.png") transparent
          background-position: 0 0
        span.drop:hover:after
          background-position: 0 -8px
        &.selected span
          color: $font-nav-color-highlight  
        div
          margin: 0
          float: none
          display: none
          font-size: 13px
          z-index: 100
          position: absolute
          background: transparent
          min-width: 180px
          left: 0
          ul
            @include shadow
            background: #eee
            @include diagonal_gradient_light_grey
            margin: 14px 0 0
            border-top: 1px solid #dbdbdb
            li
              float: none
              clear: both
              margin: 4px 12px
              white-space: nowrap
              @include shadow-clear
              a:link, a:visited
                padding: 0 5px
                clear: both
                display: block
                color: $font-nav-color-light
              a:hover
                color: darken($font-nav-color-light, 20%) !important
            li:first-child 
              padding-top: 8px
              border: none
            li:last-child 
              padding-bottom: 12px
            a, a:visited
              color: $font-nav-color-dark
        &:hover
          div
            display: block
     
.search
  @include box_med_grey
  padding: 8px 10px
  .search_form
    form 
      position: relative
    input[type=text]
      @include med-shadow
      line-height: 12px
      font-size: 12px
      border: 1px solid #7e7e7f
      background: image-url("header_sprite.png") white no-repeat
      background-position: -3px -18px
      padding-left: 20px
      
.subnav
  .search
    .search_form
      form
        margin: 0
        border-radius: 0
      input[type=text] 
        width: 170px

#footer
  @include grey_gradient
  @include shadow
  @include box
  font-size: $font-size-small
  line-height: 1.25
  margin-bottom: 14px
  color: $font-color-dark
  padding: 10px 0
  div.newsletter
    background: image-url("icn_newsletter.png") no-repeat top left
    padding-left: 65px
    p
      margin-bottom: 5px
    fieldset
      margin: 0
    input[type="text"]
      @include light-shadow
      width: 150px
      margin-bottom: 5px
      border: 1px solid #b5aea8
  h2 
    color: $font-color-med-dark
    text-shadow: 0 1px 0 #fff
    margin-top: 0
    font-size: $font-size-h4
    font-weight: bold
  ul
    list-style: none
    margin: 0
    padding: 0
  li
    margin: 0 0 6px 0
  a
    color: $font-color-dark
  .icon
    display: block
    line-height: 20px
    vertical-align: top
    display: inline-block
    width: 16px
    height: 16px
    background: image-url("header_sprite.png") transparent
    text-indent: -10000px
    &.facebook
      background-position: 0 -42px
    &.twitter
      background-position: 0 -58px
    &.linkedin
      background-position: 0 -74px
    

.copyright
  text-align: right
  padding-top: 0
  padding-bottom: 20px
  color: $font-color-light
  font-size: $font-size-main
  p
    text-align: right

////////////////////
// Featured Icons //
////////////////////

.content
  clear: both
  & + .content
    border: none
.sidebar
  clear: none
  float: right
  width: 320px
  border-top: 0
  padding-top: 0
  .section
    margin-bottom: 0
    padding: 0
    list-style: none
    border-bottom: 1px solid #DDD
  ul.section
    text-align: center
  h4
    margin-top: 1.5em
    margin-bottom: 1.55em
  .links
    ul
      margin-top: -1em
    li
      margin-top: -0.5em
  .logo 
    margin-top: 1.3em

.note
  font-size: 1.2em
  line-height: 1.4em
  color: #999
  border-top: 1px solid #DDD
  border-bottom: 1px solid #DDD
  padding: 1em 0
  margin: 2em 0
.warning, .message
  background: #FFF2BF
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF2BF), to(#FFF8DE))
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fff2bf, endColorstr=#fff8de)"
  background: -moz-linear-gradient(top,  #FFF2BF,  #FFF8DE)
  border: 1px solid #EEE
  border-left: none
  border-right: none
  font-size: 1.1em
  padding: 10px
.message
  border: none
  margin: 1.5em 0 
section.features.nullborder.message, div.section.features.nullborder.message
  @include rounded-box  
  @include shadow
  background: #d9d9d9
  background: -moz-linear-gradient(top, #e6e6e6, #d9d9d9)
  background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#d9d9d9))
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#e6e6e6, endColorstr=#d9d9d9)"
  padding: 5px
  h4
    margin-top: 10px  
.errors
  text-align: left
  color: #900
.footnote
  display: block
  line-height: 1.4em
  font-size: 0.8em
  color: #666
.clear
  clear: both
  height: 1px
  margin-top: -1px
.hidden
  display: none !important
.center
  text-align: center
.right
  float: right
.left
  float: left
img, .wide img
  &.right
    float: right
    margin-left: 15px
  &.left
    float: left
    margin-top: 10px
    margin-right: 15px
    margin-bottom: 20px
  &.gravatar
    width: 40px
    height: 40px
  &.framed
    background: #FFF
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#F9F9F9))
    background: -moz-linear-gradient(top,  #FFF,  #F9F9F9)
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f9f9f9)"
    padding: 6px
    -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.15)
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.15)

.grid_3
  &.divide
    @include vertical_divide
    width: 219px
.grid_6
  &.divide
    @include vertical_divide
    width: 459px