/*
 *   activo
 *   by David Francisco (dmfrancisc[at]gmail.com)
 *
 *   based on "Drastic Dark" by Juan Maria Martinez Arce (juan[at]insignia4u.com) */

.small
  font-size: 11px
  font-style: normal
  font-weight: normal
  text-transform: none
  letter-spacing: normal
  line-height: 1.4em

.gray
  color: #999999
  font-family: Georgia, serif
  font-size: 13px
  font-style: italic
  font-weight: normal
  text-transform: none
  letter-spacing: normal
  line-height: 1.6em

.hightlight
  background-color: #ffff88
  font-weight: bold
  color: #36393d

a
  &:link, &:visited, &:hover, &:active
    color: #111

h1, h2, h3
  color: #111

a
  -moz-outline: none

body
  color: #111
  background: #E5E5E5
  font-family: helvetica, arial, sans-serif

hr
  background: #e2e2e2
  color: #e2e2e2

#header
  background: #002134
  h1
    padding: 15px 0
    font-size: 32px
    font-style: normal
    font-weight: bold
    text-transform: none
    letter-spacing: -1px
    line-height: 1.2em
    color: #fff
    text-shadow: #000 1px 1px 2px
    a
      &:link, &:active, &:hover, &:visited
        color: #fff

#user-navigation
  top: auto
  bottom: 5px
  right: 25px
  a.logout
    background: #ccc
    padding: 1px 4px

#main
  width: 71%
  .block
    padding-top: 0px
    background: #fff
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    .content
      padding-top: 1px
      h2
        margin-left: 15px
        font-size: 22px
        font-style: normal
        font-weight: bold
        text-transform: none
        letter-spacing: -1px
        line-height: 1.2em
      p
        font-size: 13px
        font-style: normal
        font-weight: normal
        text-transform: none
        letter-spacing: normal
        line-height: 1.45em

#sidebar
  .block h4
    font-weight: bold
  .notice
    background: #fff
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
  h3
    color: #111
    border-bottom: 1px solid #c0c0c0

#main-navigation ul li
  padding-left: 15px
  a
    padding: 8px 0
  &.active
    padding: 0
    margin-left: 15px
    background: #E5E5E5
    margin-left: 15px
    a
      padding: 8px 15px

#sidebar ul li
  background-position: 15px 11px
  background-repeat: no-repeat
  background-image: url("/images/arrow.png")
  border-bottom: 1px solid #e2e2e2
  a
    text-decoration: none
    margin-left: 20px
    &:link, &:visited
      text-decoration: none

#main-navigation
  background-color: #f4f4f4
  background-image: url("/images/menubar-background.png")
  background-repeat: repeat-x
  ul li
    margin-right: 0
    padding-left: 15px
    padding-right: 5px
    a
      &:link, &:visited, &:hover, &:active
        text-decoration: none
        color: #111

.secondary-navigation ul li a
  &:link, &:visited, &:hover, &:active
    text-decoration: none
    color: #111

#user-navigation ul li a
  &:link, &:visited, &:hover, &:active
    text-decoration: none
    color: #111

.secondary-navigation
  background-color: #f2f1ee
  border-bottom: none
  border-bottom-width: 5px
  background-image: url("/images/boxbar-background.png")
  ul li.active
    background-color: #fff
    a:hover
      background-color: #fff

#footer .block
  text-align: center
  color: #111
  background: #fff
  -webkit-box-shadow: none
  -moz-box-shadow: none
  box-shadow: none
  p
    margin: 0
    padding: 4px

/* pagination */

.pagination
  a, span
    background-color: #f4f4f4
    background-image: url("/images/button-background.png")
    color: #111
    text-align: center
    min-width: 15px
    margin-right: 5px
    padding: 6px
    border: 1px solid #c3c4ba
  em
    background: #002134
    color: #fff
    border: 1px solid #002134
  a
    color: #1a1a1a
    &:hover
      border: 1px solid #818171
      -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
      -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
    &:active
      background-image: url("/images/button-background-active.png")
      outline: none

/* tables */

.table
  th
    background: #eaeaea
    color: #222
    font-weight: normal
  td
    border-bottom: 1px solid #eaeaea
  tr.even
    background: #f8f8f8

/* forms */

.form
  label.label
    color: #666666
  input.text_field, textarea.text_area
    width: 100%
    border: 1px solid #e2e2e2
  input:hover, textarea:hover
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
    border: 1px solid #a2a294
  input:focus, textarea:focus
    border: 1px solid #a2a294
  input.button
    background: #e2e2e2
    border: 1px solid #c1c1c1
    padding: 2px 5px
    cursor: pointer
    color: #111
    font-weight: bold
    font-size: 11px
    &:hover
      border: 1px solid #666
  .description
    font-style: italic
    color: #8C8C8C
    font-size: .9em
  .navform a
    color: #cc0000

/* buttons */

a.button, button.button
  background-color: #f4f4f4
  background-image: url("/images/button-background.png")
  border: 1px solid #c3c4ba
  font-family: helvetica, arial, sans-serif
  font-weight: normal

a.button
  &:link, &:visited, &:hover, &:active
    font-weight: normal
    background-color: #f4f4f4

button.button
  &:link, &:visited, &:hover, &:active
    font-weight: normal
    background-color: #f4f4f4

a.button:hover, button.button:hover
  background-color: #eee
  border: 1px solid #818171
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)

a.button:active, button.button:active
  outline: none
  background-color: #ddd
  background-image: url("/images/button-background-active.png")

/* flash-messages */

.flash
  .message
    text-align: center
    margin: 0 auto 15px
    p
      margin: 8px
  .error
    border: 1px solid #ffbbbb
    background-color: #ffdddd
  .warning
    border: 1px solid #ffff88
    background-color: #ffffcc
  .notice
    border: 1px solid #1fdf00
    background-color: #bbffb6

/* lists */

ul.list li
  border-bottom-color: #e2e2e2
  border-bottom-width: 1px
  border-bottom-style: solid
  .item .avatar
    border-color: #e2e2e2
    border-width: 1px
    border-style: solid
    padding: 2px

/* box */

#box .block
  background: #fff
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
  h2
    background: #002134
    color: #fff

/* rounded borders */

#main
  -moz-border-radius-topleft: 9px
  -webkit-border-top-left-radius: 9px
  -moz-border-radius-topright: 9px
  -webkit-border-top-right-radius: 9px

#main-navigation
  -moz-border-radius-topleft: 9px
  -webkit-border-top-left-radius: 9px
  -moz-border-radius-topright: 9px
  -webkit-border-top-right-radius: 9px
  li
    -moz-border-radius-topleft: 9px
    -webkit-border-top-left-radius: 9px
    -moz-border-radius-topright: 9px
    -webkit-border-top-right-radius: 9px

.secondary-navigation, #main .block
  -moz-border-radius-topleft: 9px
  -webkit-border-top-left-radius: 9px
  -moz-border-radius-topright: 9px
  -webkit-border-top-right-radius: 9px

#sidebar
  .block, h3
    -moz-border-radius-topleft: 9px
    -webkit-border-top-left-radius: 9px
    -moz-border-radius-topright: 9px
    -webkit-border-top-right-radius: 9px

ul.list li, #footer .block, .form input.button
  -moz-border-radius-topleft: 9px
  -webkit-border-top-left-radius: 9px
  -moz-border-radius-topright: 9px
  -webkit-border-top-right-radius: 9px

#box .block
  -moz-border-radius-topleft: 9px
  -webkit-border-top-left-radius: 9px
  -moz-border-radius-topright: 9px
  -webkit-border-top-right-radius: 9px
  h2
    -moz-border-radius-topleft: 9px
    -webkit-border-top-left-radius: 9px
    -moz-border-radius-topright: 9px
    -webkit-border-top-right-radius: 9px

.secondary-navigation
  li.first a
    -moz-border-radius-topleft: 9px
    -webkit-border-top-left-radius: 9px
  ul li.first
    -moz-border-radius-topleft: 9px
    -webkit-border-top-left-radius: 9px
    -moz-border-radius-topleft: 9px
    -webkit-border-top-left-radius: 9px

#sidebar
  -moz-border-radius-bottomleft: 9px
  -webkit-border-bottom-left-radius: 9px
  -moz-border-radius-bottomright: 9px
  -webkit-border-bottom-right-radius: 9px
  .block
    -moz-border-radius-bottomleft: 9px
    -webkit-border-bottom-left-radius: 9px
    -moz-border-radius-bottomright: 9px
    -webkit-border-bottom-right-radius: 9px

#main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block
  -moz-border-radius-bottomleft: 9px
  -webkit-border-bottom-left-radius: 9px
  -moz-border-radius-bottomright: 9px
  -webkit-border-bottom-right-radius: 9px

#main .block
  -moz-border-radius: 9px
  -webkit-border-radius: 9px
  border-radius: 9px

#main-navigation, .secondary-navigation
  -moz-border-radius-topleft: 9px
  -webkit-border-top-left-radius: 9px
  border-top-left-radius: 9px
  -moz-border-radius-topright: 9px
  -webkit-border-top-right-radius: 9px
  border-top-right-radius: 9px

a.button, button.button
  -moz-border-radius: 2px
  -webkit-border-radius: 2px
  border-radius: 2px

.pagination
  a, span
    -moz-border-radius: 2px
    -webkit-border-radius: 2px
    border-radius: 2px

.flash .message
  -moz-border-radius: 6px
  -webkit-border-radius: 6px
  border-radius: 6px

.form input.button
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

#user-navigation a.logout
  -moz-border-radius: 4px
  -webkit-border-radius: 4px
  border-radius: 4px