// Sass doesn't really like variables to be in a partial, so they're here..
$main_color_light: #89BF04
$main_color_dark: #547F00
$http_get_color: #0F6AB4
$http_post_color: #10A54A
$http_put_color: #C5862B
$http_delete_color: #A41E22
$code_bg_color: #FCF6DB
$code_border_color: #E5E0C6
$form_color: #0F6AB4
$error_color: #CC0000
$notice_color: #007F00

$body_width: 960px
$main_column_width: 630px
$main_column_margin_right: 30px

@import "compass/reset"
@import "compass/css3"
@import "zass"
@import "fonts"
@import "global"
@import "custom_mixins"

body
  font-family: "Droid Sans", sans-serif

  #content_message
    margin: 10px 15px
    font-style: italic
    color: #999
  
  #header
    background-color: $main_color_light
    padding: 14px

    a#logo
      font-size: 1.5em
      font-weight: bold
      text-decoration: none
      background: transparent image_url('http://swagger.wordnik.com/images/logo_small.png') no-repeat left center
      padding: 20px 0 20px 40px
      color: white
  
    form#api_selector
      @include float_right
      .input
        @include float_left
        margin: 0 10px 0 0
        input
          font-size: .9em
          padding: 3px
          margin: 0
        input#input_baseUrl
          width: 400px
        input#input_apiKey
          width: 200px
        a#explore
          display: block
          text-decoration: none
          font-weight: bold
          padding: 6px 8px
          font-size: .9em
          color: white
          background-color: $main_color_dark
          @include border-radius(4px)
          &:hover
            background-color: $main_color_dark
  
  p#colophon
    margin: 0 15px 40px 15px
    padding: 10px 0
    font-size: .8em
    border-top: 1px solid #DDD
    @include droid_sans
    color: #999
    font-style: italic
    a
      text-decoration: none
      color: $main_color_dark      

  ul#resources
    padding: 0 15px
    font-family: "Droid Sans", sans-serif
    font-size: .9em
    
    li.resource
      border-bottom: 1px solid #DDD
      &:last-child
        border-bottom: none
      div.heading
        border: 1px solid transparent
        @include no_float
        h2
          color: #999
          padding-left: 0px
          @include float_left
          @include droid_sans_bold
          a
            color: #999
            &:hover
              color: black
        ul.options
          @include horizontal_list
          @include float_right
          margin: 14px 10px 0 0
          li
            color: #666
            font-size: .9em
            a
              color: #AAA
              text-decoration: none
              &:hover
                text-decoration: underline
                color: black
      &:hover, &.active
        div.heading
          h2
            a
              color: black
          ul.options
            li
              a
                color: #555

      ul.endpoints
        li.endpoint
          ul.operations
            li.operation
              &.get
                @include li_colored_operation($http_get_color)
              &.post
                @include li_colored_operation($http_post_color)
              &.put
                @include li_colored_operation($http_put_color)
              &.delete
                @include li_colored_operation($http_delete_color)