/*
 *    David Marquês Francisco
 *    (dfrancisc[at]gmail.com)
 *
 *    Originally based on the theme "Drastic
 *    Dark" by Juan Maria Martinez Arce
 *    (juan[at]insignia4u.com)
 *
 *    Added components that doesn't exist in
 *    other web-app-theme themes
 *    -----------------------------------------
 *
 *    #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:           #f4f4f4
$not_so_light_grey:    #e6e6e6
$grey:                 #a4a4a4
$dark_grey:            #818171
$black:                #261f1f
$black_text:           #111111
$red:                  #cc0000
$light_blue:           #e6eefc
$interactive_yellow:   #ffff88
$yellow:               #ffee79


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

body
  color: $black_text
  background: $light_grey
  font-family: helvetica, arial, sans-serif

h1, h2, h3
  color: $black_text

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

a
  -moz-outline: none

hr
  background: $light_grey
  color: $light_grey

// HEADER

#header
  background-color: $black
  background-image: url('../../images/logo.png')
  background-repeat: no-repeat
  background-position: 20px 20px

  h1
    padding: 15px 55px
    font-size: 40px
    font-style: normal
    text-transform: normal
    letter-spacing: -1px
    line-height: 1.2em
    color: #fff
    @include text-shadow(#000, 1px, 1px, 2)
    height: 50px

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


// MAIN AREA

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

  .block
    // caixa de texto principal
    padding-top: 0px
    background: #fff
    @include box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.4))
    @include rounded-corners(9px)

    .content
      padding-top: 1px
      .inner
        padding: 0 15px 15px
      h2
        margin-left: 15px
        font-size: 22px
        font-style: normal
        font-weight: bold
        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
    // versão sem cantos arredondados
    @include box-shadow(0, 0, 4px, rgba(0, 0, 0, 0.3))

#full-main
  // igual a 'main' mas ocupa toda a largura (sem sidebar)
  @extend #main
  width: 100%
  .block
    margin-bottom: 20px


// MAIN NAVIGATION

#main-navigation
  // barra de menus do topo
  ul
    li
      float: left
      padding-left: 15px
      padding-right: 5px
      margin-right: 0

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

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

  background-color: $light_grey
  background-image: url('../../images/menubar-background.png')
  background-repeat: repeat-x

  @include rounded-corner(top, left, 9px)
  @include rounded-corner(top, right, 9px)


// TOP NAVIGATION

.secondary-navigation
  background-color: #f2f1ee
  background-image: url('../../images/boxbar-background.png')
  border-bottom-width: 0px
  @include rounded-corner(top, left, 9px)
  @include rounded-corner(top, right, 9px)

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

  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: auto
  right: 25px

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

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


// SECONDARY INNER NAV

.secondary-inner-nav
  background-color: #f0eff0
  background-image: url('../../images/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


// WELCOME MESSAGE

#status
  margin-top: 20px
  padding: 15px
  float: right
  color: white
  font-size: 16px
  @include text-shadow(#000, 1px, 1px, 2)

#status a
  color: white


// FOOTER

#footer
  .block
    color: #fff
    background: $black
    @include rounded-corners(9px)
  p
    margin: 0
    padding: 0
    text-align: center
    color: #bbbbb7


// SIDEBAR

#sidebar
  width: 20%
  float: right

  .block
    // caixas da barra lateral
    padding-top: 2px
    padding-bottom: 2px
    @include rounded-corners(9px)
    h4
      // títulos das caixas de texto da barra lateral
      font-weight: bold

  .notice
    // caixas de aviso da barra lateral
    background: #fff
    @include box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.4))

  .warning
    // caixas de aviso da barra lateral
    background: $yellow
    @include box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.4))
    padding: 10px

  h3
    // título da sidebar
    padding-left: 25px
    color: $black_text
    border-bottom: 1px solid $black

  ul li
    // lista da barra lateral
    background-position: 0 11px
    background-repeat: no-repeat
    background-image: url('../../images/arrow.png')
    border-bottom: 1px solid $not_so_light_grey
    list-style-type: none
    // elementos da lista
    a
      margin-left: 10px
      text-decoration: none
    // elemento seleccionado
    &.active a
      color: $grey


// BREADCRUMB

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

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

    li
      color: #777
      display: block
      padding-top: 10px
      padding-left: 17px // distância à imagem
      margin-right: 15px // espaçamento entre os elementos
      background: url('../../images/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
    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('../../images/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
    background: $black
    color: #fff
    border: 1px solid $black

.pagination a:active
  // quando se clica
  background-image: url('../../images/button-background-active.png')
  outline: none /* hide dotted outline in Firefox */


// TABLES

.table
  th
    background: #eaeaea
    color: #222
    font-weight: normal
    &.last
      width: 80px
  td
    border-bottom: 1px solid #eaeaea
    &.last
      // coluna em que aparecem os ícones (maiores que o texto)
      padding-top: 0px
      padding-bottom: 0px
  tr.even
    background: #f8f8f8


// FORMS

.form
  label.label
    color: #666

  input.text_field, textarea.text_area
    width: 100%
    border: 1px solid $light_grey

  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-style: italic
    color: #8c8c8c
    font-size: .9em

  .navform a
    color: $red


// SEARCH

.search
  border: 1px solid #c1c1c1
  @include rounded-corners(2px)
  padding: 0px
  margin: 0px
  position: relative
  float: right
  width: 300px
  height: 25px
  &:hover
    border: 1px solid #a2a294
    @include box-shadow(0, 0, 4px, rgba(0, 0, 0, 0.3))
  form
    display: inline

.search_box
  font-family: helvetica, arial, sans-serif
  font-size: 13px
  border: 0px
  border-right: 1px solid #c1c1c1
  background-color: white
  position: absolute
  left: 0px
  width: 266px
  height: 25px
  padding-left: 6px

.search_submit
  border: 0px
  background: url('../../images/search-button.png') no-repeat
  position: absolute
  left: 273px
  height: 25px
  width: 27px
  cursor: pointer


// FLASH-MESSAGES

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

  .error, .error-list
    border: 1px solid #fbb
    background-color: #fdd

  .warning
    border: 1px solid $interactive_yellow
    background-color: #ffffcc

  .notice
    border: 1px solid #1fdf00
    background-color: #bbffb6

  .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
  @include rounded-corners(9px)

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


// BOX

#box
  width: 480px

  .block
    background: #fff
    @include box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.4))
    @include rounded-corners(9px)
    h2
      background: $black
      color: #fff
      @include rounded-corner(top, left, 9px)
      @include rounded-corner(top, right, 9px)


//  BUTTONS

a.button, button.button
  background-image: url('../../images/button-background.png')
  background-color: #eee
  border: 1px solid #c3c4ba
  font-family: helvetica, arial, sans-serif
  font-weight: normal
  @include rounded-corners(2px)

  &:link, &:visited, &:hover, &:active
    font-weight: normal

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

a.button:active, button.button:active
  // quando se clica no botão
  background-image: url('../../images/button-background-active.png')
  outline: none /* hide dotted outline in Firefox */


a.global_button
  // botão global do bloco
  &:link, &:visited, &:hover, &:active
    color: #222
    display: block
    font-size: 1em
    line-height: 1.3em
    cursor: pointer
    font-weight: normal
    text-decoration: none
    float: right
    padding: 8px 10px 6px 7px
    margin: 0 9px 0 0
    @include rounded-corners(2px)

  img
    margin: 0 3px -3px 0 !important
    padding: 0
    border: none
    width: 16px
    height: 16px


// FORMS

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

.login div
  // formulário para login
  &.left
    width: 21%
    float: left
  &.right
    width: 74%
    float: right

.signup div
  // formulário para signup
  @extend .login


// ICONS FILETYPES

.filetype
  background-image: url('../../../images/filetype/unknown.png')
  background-repeat: no-repeat
  padding-top: 9px
  padding-left: 11px
  font-size: 14px
  color: $grey
  width: 100px
  height: 128px


// Informação adicional para títulos

.highlighted-title-info
  display: inline
  font-size: 13px
  vertical-align: top
  padding-left: 3px
  padding-right: 5px
  margin-left: 5px
  font-weight: normal
  text-transform: lowercase
  @include rounded-corners(4px)

.highlighted-title-info-grey
  @extend .highlighted-title-info
  background-color: $grey
  color: white

.highlighted-title-info-green
  @extend .highlighted-title-info
  background-color: #1fdf00
  color: white

.highlighted-title-info-yellow
  @extend .highlighted-title-info
  background-color: $yellow
  color: black

.highlighted-title-info-red
  @extend .highlighted-title-info
  background-color: $red
  color: white
