/* Activo 2 by David Francisco (dmfrancisc[at]gmail.com) */


/////////////////////// INCLUDE ///////////////////////

@import mixins.sass
@import fonts.sass

// Remove this line if you don't use the FORMTASTIC plugin
@import formtastic_changes.sass

// Remove this line if you don't use the ATTRTASTIC plugin
@import attrtastic_changes.sass


//////////////////////// USAGE ////////////////////////

// Convert this file to CSS using the following command:
// sass --watch style.sass:style.css -t compressed



/////////////////////// NOTICE ////////////////////////

//  #full-main (ocupa os 100% de width para
//    páginas que não têm barra lateral)
//  .flash .error-list
//  #sidebar .warning
//  .breadcrumb
//  .searchform
//  a.global_button (não está a ser utilizado
//    mas pode ser útil. São botões que ficam
//    na barra de separadores)
//  .block-norounded (blocos sem as pontas
//    arredondadas)
//  .secondary-inner-nav (navegação sem as
//    pontas arredondadas para blocos
//    interiores)
//  div.tooltip (reimplementa o aspecto das
//    tooltips que mostram o 'title' das
//    imagens)
//  .highlighted-title-info (informação
//    adicional para títulos)


/////////////////////// COLORS ////////////////////////

$light_grey: #dddddd
$grey:       #a4a4a4
$dark_grey:  #818171
$black:      #261f1f
$black_text: #111111
$red:        #cc0000
$yellow:     #ffee79

///////////////////////////////////////////////////////

body
  color: $black_text
  background: #C4C4C4 url('/assets/activo/bgd.jpg')
  +font-normal-weight

h1, h2, h3
  color: $black_text
  font-weight: normal
  +font-bold-weight

a:link, a:visited, a:hover, a:active
  color: $black_text

a
  -moz-outline: none

hr
  background: $light_grey
  color: $light_grey

// HEADER

#header
  height: 80px

  .logo
    height: 80px
    width: 160px
    margin-top: 20px
    float: left
    background-image: url('/assets/activo/logo.png')
    background-repeat: no-repeat

  h1
    padding: 15px 5px
    float: left
    font-size: 40px
    font-style: normal
    text-transform: normal
    letter-spacing: -1px
    line-height: 1.2em
    color: #fff

    a:link, a:active, a:hover, a:visited
      color: #fff

  background-color: #333

  text-shadow: 0 1px 1px rgba(0,0,0,.25)

  box-shadow: inset 0 -5px 10px rgba(0,0,0,.25), 0 1px 1px rgba(255,255,255,.3)
  -moz-box-shadow: inset 0 -5px 10px rgba(0,0,0,.25), 0 1px 1px rgba(255,255,255,.3)
  -webkit-box-shadow: inset 0 -5px 10px rgba(0,0,0,.25), 0 1px 1px rgba(255,255,255,.3)


// MAIN AREA

#main
  // se for para utilizar a sidebar
  width: 77%
  float: left

  .block
    // caixa de texto principal
    padding-top: 0px

    background-color: #fff

    text-shadow: 0 1px 0 #fff
    @include rounded-corners(6px)

    box-shadow:         0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)
    -moz-box-shadow:    0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)

    .content
      padding-top: 1px
      .inner
        padding: 0 15px 15px
      h2
        margin-left: 15px
        font-size: 22px
        text-transform: normal
        letter-spacing: -1px
        line-height: 1.2em
      p
        font-size: 13px
        font-style: normal
        font-weight: normal
        text-transform: normal
        letter-spacing: normal
        line-height: 1.45em

  .block-norounded
    // without rounded corners
    box-shadow:         0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)
    -moz-box-shadow:    0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)

#full-main
  // same as main but with full width
  @extend #main
  width: 100%
  .block
    margin-bottom: 20px


// MAIN NAVIGATION

#main-navigation
  // top menu bar
  padding-top: 30px
  width: auto
  ul
    li
      padding-left: 20px
      margin-right: 0

      a:link, a:visited, a:hover, a:active
        padding: 8px 0
        text-decoration: none
        color: #eee

      &.active
        a:link, a:visited, a:hover, a:active
          color: $grey


// TOP NAVIGATION

.secondary-navigation
  background: #e0e0e0 url('/assets/activo/boxbar-background.png') top
  border-bottom-width: 0px
  @include rounded-corner(top, left, 6px)
  @include rounded-corner(top, right, 6px)

  li.first a, ul li.first
    @include rounded-corner(top, left, 6px)

  ul li a
    &:link, &:visited, &:hover, &:active
      text-decoration: none
      color: $black_text

  ul li.text
    padding: 10px 15px
    color: #818171

  ul li.active
    background-color: #fff
    a:hover
      background-color: #fff


// USER NAVIGATION

#user-navigation
  top: 27px
  right: 10px
  color: #eee
  font-size: 14px

#user-navigation ul li a
  &:link, &:visited, &:hover, &:active
    text-decoration: none
    color: #eee
  &:active img
    margin-top: 1px

#user-navigation ul li, .secondary-navigation ul li
  float: left


// SECONDARY INNER NAV

.secondary-inner-nav
  background-color: #f0eff0
  background-image: url('/assets/activo/boxbar-background.png')
  font-size: 13px

  border-bottom-color: #fff
  border-bottom-width: 10px
  border-bottom-style: solid

  ul
    margin: 0
    padding: 0
    list-style-type: none

    li
      float: left
      &.active
        background-color: #fff
        a:hover
          background-color: #fff
      a
        display: block
        padding: 10px 15px
        &:link, &:visited, &:hover, &:active
          text-decoration: none
          color: $black


// FOOTER

#footer
  color: $black
  text-shadow: none
  .block
    @include box-shadow(none)
    background: none
  p
    margin: 0
    padding: 0
    text-align: center



// SIDEBAR

#sidebar
  width: 20%
  float: right

  .block
    // sidebar boxes
    padding-top: 2px
    padding-bottom: 2px
    @include rounded-corners(6px)
    text-shadow: 0 1px 0 rgba(255,255,255,.6)
    h4
      // sidebar boxes titles
      font-weight: normal

      +font-bold-weight

  .notice
    // sidebar notice boxes
    color: #fff
    text-shadow: 0 1px 1px rgba(0,0,0,.25)

    background-color: rgba(0,0,0,.3)
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,.15)), to(rgba(0,0,0,0)))
    background-image: -moz-linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,0))

    @include rounded-corners(6px)
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 1px rgba(255,255,255,.3)
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 1px rgba(255,255,255,.3)
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 1px rgba(255,255,255,.3)


  .warning
    // sidebar warning boxes
    padding-left: 10px
    padding-right: 10px
    color: #222
    background: #FFEF4E

    @include rounded-corners(6px)
    box-shadow:         0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.1)
    -moz-box-shadow:    0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.1)
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.1)

    border: 1px solid rgba(0,0,0,.3)

  h3
    // sidebar title
    padding-left: 25px
    color: $black_text
    border-bottom: 1px solid $black

  ul li
    // sidebar list
    background-position: 0 11px
    background-repeat: no-repeat
    background-image: url('/assets/activo/arrow.png')
    border-bottom: 1px dashed #777
    list-style-type: none
    a
      margin-left: 10px
      text-decoration: none
      text-shadow: 0 1px 0 #fff
    &.active a
      color: $grey


// BREADCRUMB

.breadcrumb
  background-color: #f4f4f4
  @include rounded-corner(bottom, left, 6px)
  @include rounded-corner(bottom, right, 6px)

  ul
    height: 20px
    padding-bottom: 15px
    padding-top: 0px
    list-style-type: none

    li
      color: #777
      display: block
      padding-top: 10px
      padding-left: 17px // distance to the image
      margin-right: 15px // space between elements
      background: url('/assets/activo/breadcrumb.png') no-repeat 0px 12px
      float: left

      a
        text-decoration: none
        color: #777
      &.first
        padding-left: 15px
        background: none
      &.active
        color: $grey


// CONTROLS

.control
  float: right
  margin-right: 9px
  margin-top: 11px


// PAGINATION

.pagination
  a, span, em
    border: 1px solid #c3c4ba
    @include rounded-corners(2px)
    margin-right: 5px
    padding: 6px
    min-width: 15px
    text-align: center
    background: $light_grey
    background-image: url('/assets/activo/button-background.png')
    color: $black_text

  a:hover
    border: 1px solid $dark_grey
    @include box-shadow(0 0 4px rgba(0, 0, 0, 0.3))

  span.current, em
    background: $black
    color: #fff
    border: 1px solid $black

.pagination a:active
  background-image: url('/assets/activo/button-background-active.png')
  outline: none /* hide dotted outline in Firefox */


// TABLES

.table
  th
    background: #eaeaea
    color: #222
    font-weight: normal
    &.last
      min-width: 90px
  td
    border-bottom: 1px solid #eaeaea
    &.last
      // column where icons are shown (bigger than the text)
      padding-top: 0px
      padding-bottom: 0px
  tr.even
    background: #f8f8f8


// FORMS

.form
  label.label
    +font-normal-weight
    color: #666

  input.text_field, textarea.text_area
    width: 100%
    border: 1px solid $light_grey
    @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1))

  input.button
    background: $light_grey
    @include rounded-corners(5px)
    border: 1px solid #c1c1c1
    padding: 2px 5px
    cursor: pointer
    color: $black_text
    font-weight: bold
    font-size: 11px
    &:hover
      border: 1px solid #666

  .description
    +font-normal-weight-italic
    color: #8c8c8c
    font-size: .9em

  .navform a
    color: $red


// SEARCH

.search
  border: 1px solid #c1c1c1

  @include box-shadow(inset 0 1px 3px rgba(0,0,0,.25))
  @include rounded-corners(13px)

  padding: 0px
  margin: 0px
  position: relative
  float: right
  width: 300px
  height: 25px
  form
    display: inline

.search_box
  +font-normal-weight
  font-size: 13px
  border: 0px

  background-color: transparent
  position: absolute
  left: 0px
  width: 266px
  height: 25px
  padding-left: 10px
  @include rounded-corner(top, left, 13px)
  @include rounded-corner(bottom, left, 13px)
  outline: none // Remove safari / chrome glow around input field

.search_submit
  border: 0px
  background: transparent url('/assets/activo/search-button.png') no-repeat center left
  position: absolute
  left: 273px
  height: 25px
  width: 27px
  cursor: pointer
  @include rounded-corner(top, right, 13px)
  @include rounded-corner(bottom, right, 13px)


// FLASH-MESSAGES

.flash
  .message
    @include rounded-corners(3px)
    text-align: center
    margin: 0 auto 15px

    color: white
    text-shadow: 0 1px 0 rgba(0,0,0,.3)
    p
      margin: 8px

  .error, .error-list
    border: 1px solid #993624 // rgba(0,0,0,.25)
    background: #CC4831 url('/assets/activo/messages/error.png') no-repeat 10px center

  .warning
    border: 1px solid #BB9004 // rgba(0,0,0,.25)
    background: #F9C006 url('/assets/activo/messages/warning.png') no-repeat 10px center

  .notice
    color: #28485E
    text-shadow: 0 1px 0 rgba(255,255,255,.7)
    border: 1px solid #8A9DAA // rgba(0,0,0,.25)
    background: #B8D1E2 url('/assets/activo/messages/notice.png') no-repeat 10px center

  .error-list
    text-align: left
    h2
      font-size: 16px
      text-align: center
    ul
      padding-left: 22px
      line-height: 18px
      list-style-type: square
      margin-bottom: 15px


// LISTS

ul.list li
  border-bottom-color: $light_grey
  border-bottom-width: 1px
  border-bottom-style: solid

  .item .avatar
    border-color: $light_grey
    border-width: 1px
    border-style: solid
    padding: 2px


// BOX

#box
  width: 480px

  .block
    background: #fff
    text-shadow: 0 1px 0 #fff

    box-shadow:         0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)
    -moz-box-shadow:    0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.3)

    @include rounded-corners(6px)
    h2
      background: $black
      color: #fff
      text-shadow: none
      @include rounded-corner(top, left, 6px)
      @include rounded-corner(top, right, 6px)


//  BUTTONS

a.button, button.button
  background: #EDEEED url('/assets/activo/button-background.png') top
  border: 1px solid #c3c4ba
  +font-normal-weight
  @include rounded-corners(3px)
  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1))

  &:link, &:visited, &:hover, &:active
    font-weight: normal
    background: #EDEEED url('/assets/activo/button-background.png') top

a.button:active, button.button:active
  background: #EAEAEA url('/assets/activo/button-background-active.png') top
  outline: none /* hide dotted outline in Firefox */
  margin-top: 1px
  margin-bottom: -1px


// FORMS

.form div
  &.left
    width: 10%
    float: left
  &.right
    width: 85%
    float: right

.login div
  // login form
  &.left
    width: 21%
    float: left
  &.right
    width: 74%
    float: right

.signup div
  // signup form
  @extend .login


// Additional info for titles

.badge
  display: inline
  font-size: 13px
  vertical-align: top
  padding-left: 3px
  padding-right: 5px
  margin-left: 5px
  font-weight: normal
  text-transform: lowercase
  text-shadow: 0 1px 0 rgba(0,0,0,.25)
  +font-normal-weight

  @include box-shadow(inset 0 1px 3px rgba(0,0,0,.25))
  @include rounded-corners(6px)

.badge-grey
  @extend .badge
  background-color: $grey
  color: white

.badge-green
  @extend .badge
  background-color: #1fdf00
  color: white

.badge-yellow
  @extend .badge
  background-color: $yellow
  color: black

.badge-red
  @extend .badge
  background-color: $red
  color: white