@import 'nib'

// Dimensions
margin_small = 10px
margin_mid = 20px
thumbnail_size = 200px
header_height = 45px

// Colours
light_grey = #E9E9E9
mid_grey = #505050
dark_grey = #252525
shadow_black = rgba(0, 0, 0, 0.4)
highlight = rgb(70, 179, 19)

gallery_inactive = mid_grey
gallery_active = #2C84CA

// Borders
black_border = 1px solid black

html, body
  height: 100%

header
  border-bottom: 1px solid #BDBDBD
  background: light_grey
  height: header_height
  margin-top: -10px

header > ul > li
  font-size: 18px
  line-height: header_height
  margin: 0 10px
  float: left

  a
    color: #333

  a:hover
    color: #333

header ul, footer ul
  list-style-type: none

footer a
  cursor: pointer

#switcher
  ul
    margin: 0
    padding: 0
    width: 400px

    li
      float: none

#namewrap
  display: none

.left
  float: left

.right
  float: right

.avatar
  border-radius: 3px

.closer
  position: absolute
  top: 10px
  right: 10px

#logo
  display: block

.overlay
  width: 100%
  height: 100%
  background: shadow_black

.inset
  box-shadow: 0 5px 7px shadow_black inset

.pad50
  padding: 20px 50px

.details
  margin-top: 50px

.details > .row > div
  border-right: 1px solid #eee
  min-height: 210px

.details > .row > div:last-child
  border-right: none

.annotator_row
  display: none

.metadata
  padding: 10px
  font-size: 30px
  border: 1px solid #ccc
  border-radius: 3px
  background: whitesmoke

.dropzone
  margin-bottom: margin_mid

.tracer-wrap
  margin-bottom: margin_mid

#gallery
  padding: margin_mid

.gallery-item
  width: thumbnail_size
  float: left
  margin: 0 margin_mid margin_mid 0

  img
    width: thumbnail_size
    height: thumbnail_size
    border: 3px solid gallery_inactive
    -webkit-filter: grayscale(1)
    transition: all 0.2s

  input
    margin: margin_small 5px

  div
    background: gallery_inactive

.button-wrap
  padding: margin_mid

table
  img
    max-height: 150px