@import compass/css3

$ist-color: rgba(200, 194, 200, 0.4)
$black: #2b2b2b
$orange: #f76700
body
  background-image: url("/images/gray_jean.png")
  //background-color: $bg-color
  overflow: scroll
  font-family: sans-serif
  a
    text-decoration: none
    font-weight: bold
    color: $black
  //for IE
  img
    border: 0
  h1
    color: $black
  h2
    padding-top: 12px
    //text-shadow: #FFF 1px 1px 0
    font-size: x-large
    color: $orange 

.logo
  top: 0
  position: fixed
  background-color: #efefef
  width: 100%
  z-index: 40
  img
    float: left
    display: inline
    margin-right: 1em
    padding: 1em
  h1
    //display: inline
    width: 80%
  img.ote
    width: 100px
    height: 50px
    display: inline
    float: right

.content
  background-image: url("/images/gray_jean.png")
  margin-top: 6em
  h1
    //margin: 0.3em
    text-shadow: #FFF 1px 1px 0
    font-size: x-large
    display: inline
  .arrow
    margin: 8px 0px 5px 20px
  .back
    display: inline
  
  fieldset#top
    a#linkInsert
      display: block
      width: 100%
      height: 2em
    border: 0
    padding: 10px
    background-color: $ist-color
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset)
    #appletContainer
      padding: 10px
  fieldset#middle
    a#linkModels
      display: block
      width: 100%
      height: 2em
    border: 0
    padding: 10px
    background-color: $ist-color
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset)
    #models
      padding-left: 1em
    #model a
      display: inline
      font-weight: normal
  fieldset#bottom
    border: 0
    background-color: $ist-color
    padding: 10px
    margin-bottom: 5em   
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset)
    input#predict
      margin-left: 1em


  .predictions
    background-color: $ist-color
    padding: 10px
    text-align: justify
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset)
  .overview
    a:hover
      color: $orange 
    background-image: url("/images/gray_jean.png")
    padding: 12px
    margin-top: 1em
    margin-bottom: 1em
    text-align: left
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset)
    caption
      text-align: left
    #overview tr td
      background-color: white
      border: 1px solid #dad9c7
      padding-left: 1em
      padding-top: 0.5em
      #compound
        width: 200px
      b.c
        color: #D42200
      b.n
        color: #5C8533
      .confidence
        display: inline
  .error
    background-color: $ist-color
    padding: 15px
    +box-shadow(1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset)
    .message
      margin: 2em
      padding: 1em
      border: 2px solid $orange
      background-color: #FFFFFF
      color: $black
  // close button for iframe also in content class
  #closebutton
    color: $orange
    margin-left: 98%
    //padding: 0
    
.details
  //height: 100%
  width: 98%
  background-color: $ist-color
  +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba($black, 0.3) inset)
  a:hover
    color: $orange
  img
    display: inline
    float: left
    margin: 0.5em

.significant_fragments
  //height: 100%
  width: 98%
  margin-bottom: 2em
  background-color: $ist-color
  +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba($black, 0.3) inset)
  img
    display: inline
    float: left
    margin: 0.5em
  table#sf1
    text-align: left
    td
      padding: 0.2em

.descriptors
  //height: 100%
  width: 98%
  margin-bottom: 2em
  background-color: $ist-color
  +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba($black, 0.3) inset)
  img
    display: inline
    float: left
    margin: 0.5em
  table#sf2
    text-align: left
    td
      padding: 0.2em

.results
  background-image: url("/images/gray_jean.png")
  overflow-x: auto
  overflow-y: hidden
  margin-top: 2em
  margin-bottom: 2em
  a:hover
    color: $orange
  +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba($black, 0.3) inset)
  .tablesorter
    width: 100%
    text-align: left
    thead
      background-color: adjust-lightness($ist-color, 10%)
      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: $ist-color
        th.headerSortUp 
          background-image: url("/images/asc.gif") 
          background-color: $ist-color
    tbody
      tr td
        padding-left: 1em
        +box-shadow(1px 1px 1px rgba(white, 1) inset, 0px -1px 2px rgba($black, 0.3) inset)
      .compound
        width: 200px
        padding: 0.2em
      .n
        color: #5C8533
      .c
        color: #D42200
        
input#predict
  border: 0px
  background-color: $ist-color
  margin: 0
  padding: 0
  
.tooltip
  background-color: #fff
  border: 2px solid $orange
  font-size: 0.5em
  padding: 1em
  display: none
  z-index: 50
  
.footer
  margin: 20px 0 20px 0
  a
    text-decoration: none
    color: black
    &:hover
      color: $orange