// Use this file for reusable styles.
// Define more specific styles in screen.sass

h1,h2,h3,h4,h5,h6
  a
    text-decoration: none
    &:hover
      text-decoration: underline
  span.divider
    color: #AAA

h1
  color: $main_color_dark
  color: black  
  font-size: 1.5em
  line-height: 1.3em
  padding: 10px 0 10px 0
  @include droid_sans_bold
  
h2
  color: $main_color_light
  color: black
  font-size: 1.3em
  padding: 10px 0 10px 0
  a
    color: black
  span.sub
    font-size: .7em
    color: #999
    font-style: italic
    a
      color: #777
  
h3
  color: black
  font-size: 1.1em
  padding: 10px 0 10px 0

div.heading_with_menu
  @include no_float
  
  h1,h2,h3,h4,h5,h6
    @include float_left
    @include box-sizing(border-box)
    width: 60%
  ul
    @include float_right
    @include box-sizing(border-box)
    margin-top: 10px

p
  line-height: 1.4em
  padding: 0 0 10px 0
  color: #333
  
ol
  margin: 0px 0 10px 0
  padding: 0 0 0 18px
  list-style-type: decimal
  li
    padding: 5px 0px
    font-size: .9em
    color: #333
    

.markdown

  h3
    color: $main_color_dark

  h4
    color: #666

  pre
    @include code_font
    background-color: $code_bg_color
    border: 1px solid black
    border-color: $code_border_color
    padding: 10px
    margin: 0 0 10px 0
    code
      line-height: 1.6em

  p, li
    code
      @include code_font
      //border-bottom: 1px dashed #999
      background-color: #F0F0F0
      color: black
      padding: 1px 3px

  ol,ul
    @include droid_sans
    margin: 5px 0 10px 0
    padding: 0 0 0 18px
    list-style-type: disc
    li
      padding: 3px 0px
      line-height: 1.4em
      color: #333

  
div.gist
  margin: 20px 0 25px 0 !important

// div.big is used in cases where <p> tags are generated by a markup
// processor and can't easily have the 'big' class attached to them..
p.big, div.big p
  font-size: 1 em
  margin-bottom: 10px
  
span
  &.weak
    color: #666
  &.blank, &.empty
    color: #888
    font-style: italic
    
a
  color: $main_color_dark
      
strong
  @include droid_sans_bold
  font-weight: bold

    
.code
  @include code_font

pre
  @include code_font
  background-color: $code_bg_color
  border: 1px solid black
  border-color: $code_border_color
  padding: 10px
  /* white-space: pre-line */
  code
    line-height: 1.6em


.required
  font-weight: bold
  
table
  &.fullwidth
    width: 100%
  thead
    tr
      th
        padding: 5px
        font-size: .9em
        color: #666
        border-bottom: 1px solid #999
  tbody
    tr
      &.offset
        background-color: #F5F5F5
      td
        padding: 6px
        font-size: .9em
        border-bottom: 1px solid #CCC
        vertical-align: top
        line-height: 1.3em
      &:last-child
        td
          border-bottom: none
      &.offset
        background-color: #F0F0F0
        
form
  &.form_box
    background-color: mix($form_color, #FFF, 8%)
    border: 1px solid black
    border-color: mix($form_color, #FFF, 25%)
    padding: 10px
    label
      color: $form_color !important
    input[type=submit]
      display: block
      padding: 10px
    p
      font-size: .9em
      padding: 0 0 15px 0
      color: mix($code_bg_color, #000, 50%)
      a
        color: mix($code_bg_color, #000, 40%)
      strong
        color: black
      &.weak
        font-size: .8em

  &.formtastic
    fieldset.inputs
      ol
        li
          p.inline-hints
            margin-left: 0
            font-style: italic
            font-size: .9em
            margin: 0
          label
            display: block          
            clear: both
            width: auto
            padding: 0 0 3px 0
            color: #666
            abbr
              padding-left: 3px
              color: #888
          &.required
            label
              color: black
          &.string, &.url, &.numeric
            input
              display: block
              padding: 4px
              width: auto
              clear: both
              &.title
                font-size: 1.3em
          &.text
            textarea
              @include droid_sans
              height: 250px
              padding: 4px
              display: block
              clear: both
          &.select
            label
            select
              display: block
              clear: both
            
          &.boolean
            @include no_float
            input
              display: block
              float: left
              clear: none
              margin: 0 5px 0 0
            label
              display: block
              float: left
              clear: none
              margin: 0
              padding: 0
            
    fieldset.buttons
      margin: 0
      padding: 0
    
  &.fullwidth
    ol
      li
        &.string input, &.url input, &.text textarea, &.numeric input
          width: 500px !important