$bg_color: #b9dcff
$bg_color2: #e5e7eb
$fg_color: #424345
$ot_purple: #5d308a
$body_color: white
$text_color: black
$notice_border: red
$mouseover: #FFFF69

body
  min-width: 30em
  font-family: verdana, arial, helvetica, sans-serif
  background-color: $body_color
  color: $text_color
  padding: 1em
  a
    text-decoration: none
    font-weight: bold
    color: $ot_purple
  a:hover
    color: black
  a[rel="external"]
    background: transparent url('../external.gif') center right no-repeat
    padding-right: 15px

  .headline
    .logo
      float: right

  .index
    clear: both
    ul
      margin: 0 0 2px 0
      padding: 0
      white-space: nowrap
      list-style-type: none
    li
      margin: 0
      padding: 2px
      display: inline
      border-right: 1px solid $body_color
      border-bottom: 1px solid $body_color
      background-color: $fg_color
      padding: 0.2em 0.5em
      font-weight: bold
      a
        text-decoration: none
        color: $bg_color
        &:hover
          color: $body_color
    li.selected
      font-weight: bold
      background-color: $bg_color
      border-bottom: 1px solid $bg_color
      a
        color: $text_color

  .content
    clear: both
    background-color: $bg_color
    height: 100%
    padding: 1em
    border-top: 1px solid $body_color
    h2
      margin: 20px 3px 2px 3px
    .notice
      //clear: both
      //margin-top: 1em
      padding: 0.5em 1em 
      background-color: $body_color
      border: 1px solid
      border-color: $notice_border
    .login_info
      text-align: right
      font-size: small
    .login_notice
      //clear: both
      font-size: small
      background-color: $bg_color
      padding: 1em 0em
      //font-style: italic
    .input
      //clear: both
      text-align: left
      form
        padding: 1em
        background-color: $bg_color2
        fieldset
          //margin: 0
          padding: 0
          padding-right: 1em
          border: 0
        legend
          font-weight: bold
          color: $fg_color
        label
          cursor: pointer
          //width: 28em
          //display: block
          //float: left
        br
          //clear: both
    .code
      padding: 1%
      background-color: white
      table
        display: inline-table
        border-collapse: collapse
        th
          padding: 0.5em
          border: 1px solid
          background-color: #ccd2dc
        td
          padding: 0.5em
          border: 1px solid

    .predictions
      text-align: center
      overflow: auto
      table
        border-spacing: 0
        border-collapse: collapse
        margin: 0
        th
          color: $body_color
          background-color: $fg_color
          border: 1px solid
          margin: 0.5em
        td
          border: 1px solid
          background-color: $bg_color2
          padding: 0.5em
        img
          padding: 0
          //height: 100%
          width: 150px
          height: 150px

    .lazar-predictions
      clear: both
      margin-top: 2%
      .neighbors_navigation
        font-size: x-small
        #prev
          @extend a
          display: inline
          cursor: pointer
        #next
          @extend a
          display: inline
          cursor: pointer
        
      dt
        font-weight: bold
      table
        width: 100%
        //height: 100%
        background-color: $bg_color2
        border-spacing: 0
        border-collapse: collapse
        margin: 0
        tbody
          //height: 10em
        th
          text-align: center
          border: 1px solid
          color: $body_color
          background-color: $fg_color
          margin: 0.5em
          a
            text-decoration: underline
            font-weight: bold
            color: $bg_color

          a:hover
            color: $bg_color2
        td
          border: 1px solid
          overflow: auto
          ul
            list-style-type: none
        td.image
          padding: 0
          width: 150px
          height: 150px

          table
            font-size: x-small
            td
              border: none
            td.selected
              background-color: blue
          //overflow-y: scroll;

  .model
    padding: 0.5em 1em
    background-color: $bg_color2
    border: 0
    margin-top: 0.6em
    dl
      dt
        width: 15em
        font-weight: bold
        float: left
        clear: both
      dd
        clear: right
        margin: 0.2em 0em
        dl
          clear: both
          padding: 0em
          background-color: $bg_color2
          border: 0
          dt
            white-space: nowrap
            width: 16em
            font-weight: bold
            float: left
            clear: right
          
  .footer
    margin: 0.5em
    padding: 0.5em
    font-size: small

.active
  color: red

.inactive
  color: green

.inconclusive
  color: yellow

.other
  color: black

dl
  dd
    td
      border: 1px dotted white
      text-align: right
      padding: 0.2em
      .blank
        border: 0
    th
      border-bottom: 1px dotted white
      text-align: center
      padding: 0.3em
    table
      border-collapse: collapse
.input_model_name
  margin: 20px 3px 2px 3px
  font-size: 1.2em
  font-weight: bold
  border: 0
  background-color: #FEFEFF

.edit_button
  font-size: 0.5em

.model_status
  float: left

.model_progress
  width: 200px
  height: 16px
  margin-left: 16px
  margin-right: 16px
  float: left

.models_navigation
  margin-top: 4px
  .link
    @extend a
    display: inline
    cursor: pointer
  .active
    display: inline
    color: #000
    font-weight: bold
  .thin
    font-weight: 100
  .page
    border: solid 1px #999
    background-color: #FFF
    padding: 0px 3px
    font-size: 94%
    font-weight: bold
  .page_link:hover
    border-color: #000
    color: #000
  .page_active
    background-color: #ccd2dc
    color: #000
    font-weight: bold
    border-right-color: #000
    border-bottom-color: #000

ul.endpoint
  list-style-type: none
  margin-left: 0px
  padding-left: 0px

ul.level_2
  display: none
ul.level_3
  display: none
ul.level_4
  display: none

.level_1
  margin-left: 0px
  font-weight: bold
.level_2
  margin-left: 20px
  font-weight: normal
.level_3
  margin-left: 40px
  font-weight: normal
.level_4
  margin-left: 60px
  font-weight: normal

#endpoint_label
  font-weight: bold
  margin: 0 10px

ul.endpoint
  label:hover, label:active
    background-color: $mouseover
    border-bottom: solid #999 1px
    border-top: solid #999 1px

#div_endpoint
  display: none

.ok_button
  background-color: $mouseover