style.less

@color-black: black;
@color-white: white;
@color-red: #995555;
@color-green: #559955;
@color-blue: #428bca;
@color-shadow: #555580;

@shadowwidth: 2pt;

@linewidth: 1pt;

body {
  background: @color-black;
  color: @color-white;
  text-shadow: 0 0 8px #9999ff, 0 0 8px #9999ff;
  padding: 10pt;
}

.box-shadow {
  box-shadow: 0 0 @shadowwidth @shadowwidth @color-shadow;
}

.template {
  display: none;
}

.bumperable {
  display: table;
  width: 100%;

  .main {
    display: table-cell;
  }

  .timeline-bump {
    display: table-cell;
    width: 30pt;
  }
  .even-bump {
    display: table-cell;
    width: 15pt;
  }
  .side-bump {
    display: table-cell;
    width: 50%;
  }
}

.timelines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0;

  .timeline {
    text-align: center;
    position: relative;
    width: 30pt;
    display: inline-block;
    top: 0;
    height: 100%;
    font-size: 10pt;
    .line {
      position: relative;
      height: 100%;
      margin-left: 50%;
      width: 0;
      border-right-style: solid;
      border-right-width: @linewidth;
      .box-shadow;
    }
    &.red .line { border-color: @color-red; }
    &.green .line { border-color: @color-green; }
    &.blue .line { border-color: @color-blue; }
    &.white .line { border-color: @color-white; }
  }
}

.stories {
  position: relative;
  top: 10pt;
  width: 100%;
  left: 0;

  .inner-stories {
    position: relative;
    padding-top: 10pt;
  }

  .story.left {
    .time .main {
      text-align: right;
      padding-right: 10pt;
    }
    .main {
      text-align: left;
    }
    .info-wrapper .main {
      padding-right: 10pt;
    }
  }
  .story.right {
    .time .main {
      text-align: left;
      padding-left: 10pt;
    }
    .main {
      text-align: right;
    }
    .info-wrapper .main {
      padding-left: 10pt;
    }
  }
  .story.minor {
    margin-bottom: -5pt;
    .time {
      font-size: 7pt;
    }
    .info {
      padding: 2pt;
      font-size: 7pt;
      color: @color-white;
      background: transparent;
      border: none;
      box-shadow: none;
    }
  }
  .story.left.minor .story-wrapper {
    padding-left: 30%;
  }
  .story.right.minor .story-wrapper {
    padding-right: 30%;
  }

  .story {
    margin-bottom: -5pt;

    .line {
      border-top-style: solid;
      border-top-width: @linewidth;
      .box-shadow;
    }
    .info {
      display: inline-block;
      text-shadow: none;
      .box-shadow;

      padding: 5pt;
      background: @color-white;
      color: @color-black;
      text-align: left;
      .title a {
        color: inherit;
        margin-left: 5pt;
        margin-top: 2pt;
      }
      .more {
        display: none;
      }
    }

    &.red {
      .line { border-color: @color-red; }
      .info { border-color: @color-red; }
    }
    &.green {
      .line { border-color: @color-green; }
      .info { border-color: @color-green; }
    }
    &.blue {
      .line { border-color: @color-blue; }
      .info { border-color: @color-blue; }
    }
    &.white {
      .line { border-color: @color-white; }
      .info { border-color: @color-white; }
    }
  }
}

#map {
  position: absolute;
  top: 50pt;
  bottom: 10pt;
  left: 10pt;
  right: 220pt;
}

#mapcontrols {
  position: absolute;
  top: 50pt;
  bottom: 10pt;
  width: 200pt;
  right: 10pt;
}

.tech-category .panel-body {
  text-shadow: none;
  li a {
    color: inherit;
    margin-left: 5pt;
    margin-top: 2pt;
  }
}


#about-tab, #become-pirate-tab {
  float: right;
}

.panel {
  background: none;
}

.olPopup {
  color: black;
  text-shadow: none;
}

.olPopup th,
.olPopup td {
  vertical-align: top;
  color: black;
}
.olPopup th {
  tex-align: left;
}
.olPopup td {
  tex-align: right;
}


@media (max-width: 565px) { 
  .nav-tabs > li {
    float:none !important;
  }

  .timelines {
    display: none;
  }

  .stories .story.right .info-wrapper .main {
    padding-left: 0;
    padding-right: 0;
  }
  .stories .story.right .time .main {
    text-align: right;
    padding-right: 10pt;
    padding-left: 0;
  }

  .stories .story.right .main {
    text-align: left;
  }

  .stories .story.right.minor .story-wrapper {
    padding-right: 0;
  }

  .stories .story.left.minor .story-wrapper {
    padding-left: 0;
  }

  .bumperable {
    display: block;
    .main {
      display: block;
    }

    .timeline-bump, .even-bump, .side-bump {
      display: none;
    }

  }

  #map {
    position: relative;
    top: 10pt;
    height: 400pt;
    left: 0;
    width: 100%;
  }

  #mapcontrols {
    position: relative;
    top: 10pt;
    width: 100%;
    left: 0;
  }

}