@import compass
@import colors

$font_size: 13px

.dark
  color: lighten(#000, 10%) !important

// Loop to create different width sizes Ex.: ._10{ width: 9% !important }
@for $i from 1 to 21
  ._#{$i * 5}, .w#{$i * 5}
    width: #{$i * 5 - 1}% !important

  .pad#{$i}
    padding: #{$i}px

// Loop to create different margins
@for $i from 1 to 7
  .mt#{$i * 5}
    margin-top: #{$i * 5}px !important
  .mb#{$i * 5}
    margin-bottom: #{$i * 5}px !important

@each $w in (100, 150, 200, 250, 300)
  .w#{$w}p, .w#{$w}px
    width: #{$w}px



.fl
  float: left
.fr
  float: right
.clear
  clear: both

tr.true
  background: transparent
tr.false
  background: transparent

.hide
  display: none


/*Font styles*/
.b
  font-weight: bold !important
.n
  font-weight: normal !important
.i
  font-style: italic !important

.l, .left
  text-align: left !important
.c,.center
  text-align: center !important
.r
  text-align: right !important
.nw
  white-space: nowrap !important

// font sizes
@for $i from 5 to 16
  .fs#{$i * 10}
    font-size: #{$i * 10}% !important


.marked
  background-color: lighten($blue, 52%)


ul.list
  padding: 2px 0px
  margin: 4px 0 0 16px
  >li
    list-style: none
    margin: 8px 2px 5px
    padding: 0px

a.search
  font-weight: bold
  float: left
  margin: 10px
  display: inline-block
  //margin-top: 4px !important
  padding: 0px 0px 0px 20px

  background: transparent url(images/zoom.png) no-repeat


/* Moneybox */
.moneybox
  +border-radius(3px)
  border: 1px solid darken($grayLighter, 10%)
  //+box-shadow(0px 0px 5px $gray)
  background-color: #f7f7f7
  padding: 4px 8px
  display: inline-block
  margin: 3px 0px
  min-width: 120px
  white-space: nowrap
  h3, h4, h5
    margin: 4px 0px
    text-align: right
  label
    +single-text-shadow(white, 0px, 1px, 0px)
    font-weight: normal
    margin: 0px
    text-align: center

/* Especial tabs */
ul.tabs
  list-style: none
  height: 24px
  padding: 5px
  background-color: $grayLighter
  border-bottom: 1px solid darken($grayLighter, 10%)
  clear: both
  margin: 8px 0px

  li
    display: inline
    a
      display: block
      float: left
      height: 24px
      line-height: 24px
      padding: 0 10px
      color: darken($grayDark, 5%)
      //background: transparent url(images/silver.png) repeat-x 0 0
    a.active
      height: 25px
      line-height: 24px
      font-weight: bold
      color: $dark

.message
  +border-radius(4px)
  border: 2px solid $green
  color: $dark
  margin: 4px 0
  padding: 10px
  width: 50%
  position: relative
  span.close
    background-position: -96px -128px
    background-image: url("images/ui-icons_469bdd_256x240.png")
    height: 16px
    width: 16px
    display: block
    position: absolute
    top: 2px
    right: 2px
    cursor: pointer

/**********************/
/*LINKS*/

@mixin min-height
  min-height: 16px
  display: inline-block


/*********************************************/

.ajax-modal
  background-color: #FFF
  header
    h1
      font-size: 2em
    .links
      display: none
  a
    text-decoration: none
    &:hover
      text-decoration: underline
  a.btn:hover
    text-decoration: none



/*******************************
 *States
 ******************************/
.paid
  background-color: $green
  color: white

.draft
  background-color: darken($gray, 15%)
  color: white

.approved
  background-color: $dark
  color: white

.due
  background-color: $red
  color: white

.nulled
  background-color: darken($red, 20%)
  color: white


// List of banks or cashses
.accounts_list
  padding: 0px
  margin: 0px

.accounts_list li
  list-style: none
  padding: 4px
  margin-bottom: 10px
  border-bottom: 1px solid #CFEFEF


.accounts_list li h3
  font-weight: normal
  margin: 2px 4px

.accounts_list li p
  padding: 2px 5px

/*For autocomplete*/
.ui-autocomplete a
  color: $black
.ui-autocomplete a.ui-state-hover
  background-color: $green !important
  color: #FFF !important

.box
  //width: 45%
  float: left
  border-color: darken($white, 30%)
  .title
    padding: 0.5em
    margin: 4px 0px
    background-color: $grayLight
  .high
    color: lighten($dark, 5%)
    font-size: 120%
    font-weight: bold

a.link
  font-weight: bold
  padding-left: 20px
  margin: 0px 5px
  color: darken($green, 10%)
  font-size: 110%
  display: inline-block
  min-height: 16px

span.more
  background: url(images/bullet_arrow_down.png) no-repeat

span.warning
  background: url(images/warning.png) no-repeat

.ib, .inline-block
  display: inline-block

.add-new
  color: $green


hr.light
  background: #EEE

.pill
  +border-radius
  padding: 2px

.labelz
  +border-radius(3px)
  background-color: $dark
  color: white
  font-size: 80%
  padding: 1px 3px

.hide
  display: none


.has-error
  +border-radius(3px)
  background-color: $red
  color: white
  padding: 1px 4px

.allowed-errors
  +border-radius(3px)
  background-color: $red
  color: white
  padding: 10px
  a
    color: $blue

/*****************************************
 * borders
 */

.polaroid
  +box-shadow(0 0 3px $gray)

.round
  +border-radius(50%)
  background-color: $dark
  color: white
  display: inline-block
  text-align: center
  margin: 0px
  vertical-align: middle

h2.round
  width: 46px
  height: 46px
  line-height: 44px

h3.round
  width: 40px
  height: 40px
  line-height: 38px

h4.round
  width: 30px
  height: 30px
  line-height: 28px

.underline
  text-decoration: underline

.inline-cont
  .icon-pencil
    color: $muted
    &:hover
      color: inherit
