//@import compass/reset, compass/css3, compass/utilities, compass/layout
@import compass/css3

$bg-color: #CCCCFF
$bg-color-div: #C5C1E4
//$ist-blue: #B9DCFF
$ist-blue: #C8AB37

body
  background-image: url("/images/gray_jean.png")
  background-color: $bg-color
  overflow: scroll
  font-family: sans-serif
  margin: 1em
  min-width: 800px
  min-heigth: 600px
  
  a
    text-decoration: none
    font-weight: bold
    color: black

.logo
  img
    float: left
  h1
    margin-bottom: 3em

  
.content

  background-image: url("/images/gray_jean.png")
      
  h1
    margin: 0.3em
    text-shadow: #FFF 0 1px 0
    font-size: x-large
    font-family: Verdana
    
  h2
    text-shadow: #FFF 0 1px 0
    font-size: x-large
    font-family: monospace   
    
  .arrow
    margin: 5px 0px 5px 20px
    
  .back
    display: inline
 
  .close
    text-align: right
    
  fieldset#top
    border: 0
    margin-top: 5em
    padding: 10px
    background-color: $ist-blue
    +border-top-left-radius(25px)
    +border-top-right-radius(25px)
    +background-clip(border-box)
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
    draw
      display: block
    
  fieldset#middle
    border: 0
    padding: 10px
    background-color: $ist-blue
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
    
    #model a
      font-weight: normal
    
  fieldset#bottom
    border: 0
    background-color: $ist-blue
    padding: 10px
    margin-bottom: 5em   
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
    +border-bottom-left-radius(25px)
    +border-bottom-right-radius(25px)
    +background-clip(border-box)
  
  .predictions
    margin-top: 5em
    background-color: $ist-blue
    padding: 10px
    text-align: justify
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
    +border-left-radius(25px)
    +border-right-radius(25px)
    +background-clip(border-box)

  .overview
    background-image: url("/images/gray_jean.png")
    padding: 12px
    margin-top: 1em
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
    +border-top-left-radius(25px)
    +border-top-right-radius(25px)
    +background-clip(border-box)
    
    caption
      text-align: left
    
    #overview tr td
      background-color: white
      border: 1px solid #dad9c7
      padding-left: 1em
    #overview tr td#compound
      width: 150px
    
  .results
    margin-top: 2em
    padding: 1em
    background-image: url("/images/gray_jean.png")
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba(black, 0.3) inset)
    +border-bottom-left-radius(25px)
    +border-bottom-right-radius(25px)
    +background-clip(border-box)    
    
    .tablesorter
      width: 60%
      thead
        background-color: adjust-lightness($ist-blue, 30%)
        tr
          th.header
            background-image: url("/images/bg.gif")
            background-repeat: no-repeat
            background-position: center left
            cursor: pointer
            padding-left: 20px
            border: 1px solid #dad9c7
            margin-left: -1px
          th.headerSortDown 
            background-image: url("/images/desc.gif") 
            background-color: adjust-lightness($ist-blue, 7%)
          th.headerSortUp 
            background-image: url("/images/asc.gif") 
            background-color: adjust-lightness($ist-blue, 7%)
      tbody
        tr.odd
          td
            background-color: #F0F0F0
        tr.even
          td
            background-color: #FFFFF0
    .result
      width: 100%
      thead
        padding-left: 20px
        border: 1px solid #dad9c7
        margin-left: -1px
      
      
        
.footer
  margin: 20px 0 20px 0