@import compass/css3/user-interface
@import variables

.rekapi-timeline-container-view
  background: #1a1a1a
  border: solid 1px #000
  color: #fefefe
  font-family: sans-serif
  height: $DEFAULT_CONTAINER_HEGHT
  position: relative

  p,
  h1
    color: #fefefe

  p,
  h1,
  i,
  select
    +user-select(none)

  p
    font-size: $FONT_SIZE

  input
    background: #555
    border-radius: 2px
    border: none
    // box-sizing is needed for environments that do not specify a doctype:
    // https://stackoverflow.com/a/8331164
    box-sizing: content-box
    color: #ddd
    font-size: 0.8em
    height: 10px
    padding: 4px
    position: relative
    top: -1px

    &:invalid
      background-color: $INPUT_ERROR_BACKGROUND_COLOR
      color: $INPUT_ERROR_TEXT_COLOR

  .icon-button
    background: none
    border: none

  i.glyphicon
    color: #aaa
    cursor: pointer

  select
    background: #666
    border: solid 1px #333
    color: #fff
    font-size: 1em

  .fill
    bottom: 0
    left: 0
    position: absolute
    right: 0
    top: 0

    p
      line-height: 18px
      margin: 0
      padding: 2px 0

  .label-input-pair
    font-size: $FONT_SIZE

    p
      display: inline
      padding-right: $CHROME_PANEL_PADDING

  .fill.bottom-frame
    top: auto
    height: $BOTTOM_FRAME_HEIGHT