html, body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background-color: #fff;
  height: 100%;
  margin: 0; }

.bgColor_0 {
  background-color: #377eb8; }

.bgColor_1 {
  background-color: #4daf4a; }

.bgColor_2 {
  background-color: #984ea3; }

.bgColor_3 {
  background-color: #ff7f00; }

.bgColor_4 {
  background-color: #e41a1c; }

.bgColor_5 {
  background-color: #a65628; }

#topBox {
  position: relative;
  height: 35%;
  width: 100%; }

#categoryBar {
  position: absolute;
  height: 30px;
  width: auto;
  top: 35%;
  right: 0;
  margin: 0;
  padding: 0; }
  #categoryBar p {
    margin: 0; }
  #categoryBar .track {
    float: left;
    margin: 0;
    width: auto;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 1.2em; }
  #categoryBar .hideTrack {
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    margin-left: -2px;
    float: right;
    top: 0px;
    left: 0px;
    background-image: url("../img/hide.png");
    background-position: top right;
    background-color: #555; }
  #categoryBar .inactive .hideTrack {
    background-image: url("../img/reload.png"); }
  #categoryBar .inactive {
    opacity: 0.5; }
  #categoryBar input {
    margin: 3px 20px 2px 2px;
    width: 180px; }

/*#descriptionBox{ height:19px; background-color:#eee; line-height:15px; border-top: 1px solid #999;
  table{ width:100%;}
  td{ text-align:center; font-size:12px; color:#666; }
  td:nth-child(1){ width:30%}
  td:nth-child(2){ width:30%}
  td:nth-child(3){ width:40%}
}*/
#bottomBox {
  position: relative;
  height: -webkit-calc(65% - 30px);
  height: -moz-calc(65% - 30px);
  height: calc(65% - 30px);
  margin-top: 30px;
  width: 100%;
  border-top: 1px solid #999;
  box-sizing: border-box; }
  #bottomBox #leftBox {
    height: 100%;
    width: 30%;
    float: left;
    overflow-y: auto;
    border-right: 1px solid #999;
    box-sizing: border-box;
    position: relative; }
  #bottomBox #centerBox {
    height: 100%;
    width: 30%;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #999;
    box-sizing: border-box; }
  #bottomBox #rightBox {
    height: 100%;
    width: 40%;
    float: left;
    position: relative;
    overflow-y: auto; }

#topBox #tlcTitle {
  position: absolute;
  left: 0px;
  top: 0px; }
  #topBox #tlcTitle h1 {
    margin: 0 10px;
    color: #ccc;
    font-weight: lighter;
    font-size: 1.8em; }

#leftBox #tablehead {
  font-size: 0.8em;
  line-height: 25px;
  width: 100%;
  height: 25px;
  padding-left: 10px;
  position: fixed;
  background-color: #fff;
  border-bottom: 2px solid #333;
  width: 30%;
  z-index: 1;
  box-shadow: 0px 1px 2px #999; }
#leftBox #listData {
  position: relative;
  height: -webkit-calc(100% - 35px);
  height: -moz-calc(100% - 35px);
  height: calc(100% - 35px);
  top: 35px;
  overflow-y: auto; }
  #leftBox #listData table {
    padding: 15px;
    width: 100%;
    border-collapse: collapse; }
    #leftBox #listData table tr {
      border-bottom: 1px solid #ccc !important; }
    #leftBox #listData table tr:hover {
      color: #851b00; }
    #leftBox #listData table .highlighted:hover {
      color: #fff; }
    #leftBox #listData table td {
      padding: 2px 5px;
      position: relative; }
    #leftBox #listData table td:nth-child(1) {
      width: 50px; }
    #leftBox #listData table td:nth-child(2) {
      min-width: 100px;
      font-weight: bold;
      font-size: 14px; }
    #leftBox #listData table td:nth-child(3) {
      line-height: 1em;
      font-size: 12px; }
    #leftBox #listData table .deleted {
      display: none; }
    #leftBox #listData table .deleted td:nth-child(1) {
      opacity: 0.2; }
    #leftBox #listData table .listEl .bgColor_-1 {
      background-color: #6f6f6f;
      border-color: transparent #6f6f6f transparent #6f6f6f; }
    #leftBox #listData table .listEl .bgColor_0 {
      background-color: #377eb8;
      border-color: transparent #377eb8 transparent #377eb8; }
    #leftBox #listData table .listEl .bgColor_1 {
      background-color: #4daf4a;
      border-color: transparent #4daf4a transparent #4daf4a; }
    #leftBox #listData table .listEl .bgColor_2 {
      background-color: #984ea3;
      border-color: transparent #984ea3 transparent #984ea3; }
    #leftBox #listData table .listEl .bgColor_3 {
      background-color: #ff7f00;
      border-color: transparent #ff7f00 transparent #ff7f00; }
    #leftBox #listData table .listEl .bgColor_4 {
      background-color: #e41a1c;
      border-color: transparent #e41a1c transparent #e41a1c; }
    #leftBox #listData table .listEl .bgColor_5 {
      background-color: #a65628;
      border-color: transparent #a65628 transparent #a65628; }
    #leftBox #listData table .listEl .symbol_date {
      width: 15px;
      height: 15px;
      border-radius: 10px;
      margin: -7px 14px;
      position: absolute; }
      #leftBox #listData table .listEl .symbol_date p {
        text-align: center;
        color: #fff;
        font-size: 12px;
        margin: 0;
        padding: 0; }
    #leftBox #listData table .listEl .symbol_duration {
      background-color: transparent;
      width: 0;
      height: 0;
      border-width: 10px 9px;
      border-style: solid;
      margin: -10px 13px;
      position: absolute; }
      #leftBox #listData table .listEl .symbol_duration p {
        margin: -9px 1px;
        color: #fff;
        font-size: 12px; }
    #leftBox #listData table .listEl .symbol_neither {
      width: 12px;
      height: 12px;
      margin: -6px 16px;
      position: absolute; }
      #leftBox #listData table .listEl .symbol_neither p {
        text-align: center;
        color: #fff;
        font-size: 12px;
        margin: -2px;
        padding: 0; }
    #leftBox #listData table .listEl .untouched {
      opacity: 0.6;
      stroke-color: #666;
      stroke-width: 3px; }

#centerBox .statusBox {
  font-size: 0.7em;
  position: fixed;
  background-color: #fff;
  bottom: 0px;
  width: 30%;
  left: 30%;
  padding: 0 5px;
  box-sizing: border-box;
  box-shadow: 0px -1px 2px #999; }
#centerBox #docSwitcher {
  overflow: hidden;
  width: 30%;
  height: 25px;
  position: fixed;
  background-color: #fff;
  border-bottom: 2px solid #333;
  z-index: 1;
  box-shadow: 0px 1px 2px #999; }
  #centerBox #docSwitcher ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0px;
    width: 100%; }
  #centerBox #docSwitcher .docBtn {
    position: relative;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    margin: 0 0 2px 0px;
    padding: 0 10px;
    overflow: hidden; }
  #centerBox #docSwitcher .docBtn:hover {
    opacity: 0.9; }
  #centerBox #docSwitcher #addDoc {
    float: left;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin: 0 2px; }
  #centerBox #docSwitcher .doctitle {
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px); }
  #centerBox #docSwitcher .doctools {
    position: absolute;
    width: 25px;
    right: 0;
    top: 0;
    height: 25px;
    text-align: right;
    font-size: 1em;
    font-weight: normal;
    padding: 6px 2px 2px 0;
    background-color: #fff;
    color: #333; }
    #centerBox #docSwitcher .doctools span {
      color: #666;
      font-size: 0.8em; }
  #centerBox #docSwitcher .inactive {
    font-size: 0.7em;
    background-color: #999 !important;
    color: #fff !important;
    font-weight: normal;
    font-style: italic; }
  #centerBox #docSwitcher .inactive .hideDoc {
    background-image: url("../img/reload.png") !important; }
  #centerBox #docSwitcher .inactive .hideDoc {
    background-image: url("../img/reload.png") !important; }
  #centerBox #docSwitcher .docBtn:active, #centerBox #docSwitcher .activeBtn {
    display: block; }
  #centerBox #docSwitcher .hideDoc {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("../img/delete.png");
    background-size: 100%; }
#centerBox #docText {
  padding: 40px 15px 15px;
  font-size: 0.85em;
  line-height: 1.3em; }
  #centerBox #docText .txtData {
    display: none; }
    #centerBox #docText .txtData .tx {
      color: #ff6138;
      font-weight: bold; }
  #centerBox #docText .activetab {
    display: block; }

#rightBox .display {
  text-align: center;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 0; }
  #rightBox .display h1 {
    background-color: #333;
    color: #fff;
    padding: 8px;
    margin: 0;
    font-size: 0.9em; }
  #rightBox .display h2 {
    margin: 0;
    padding: 15px;
    font-size: 1.1em;
    color: #fff; }
  #rightBox .display p {
    padding: 20px 30px;
    margin: 0;
    text-align: justify; }
  #rightBox .display #tlTitle {
    font-size: 1.1em; }
  #rightBox .display #tlDescr {
    font-size: 0.8em;
    font-weight: lighter;
    color: #333;
    padding: 15px 30px; }
  #rightBox .display .credit {
    padding-left: 15px;
    color: #666; }
  #rightBox .display .caption {
    text-align: left;
    color: #333; }
  #rightBox .display #dateContent {
    overflow-y: auto; }
    #rightBox .display #dateContent #mediaBox {
      margin: 0 30px 30px 30px;
      height: 120%; }
      #rightBox .display #dateContent #mediaBox img {
        max-width: 100%; }
      #rightBox .display #dateContent #mediaBox p {
        padding: 0;
        margin: 0; }
      #rightBox .display #dateContent #mediaBox .videoWrapper {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 */
        padding-top: 25px;
        height: 0; }
      #rightBox .display #dateContent #mediaBox .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
  #rightBox .display #prevDate, #rightBox .display #nextDate {
    margin-top: -27px;
    position: absolute;
    background-image: url(../img/arrows.png);
    cursor: pointer;
    width: 30px;
    height: 30px; }
  #rightBox .display #prevDate {
    background-position: left;
    left: 0px; }
  #rightBox .display #nextDate {
    background-position: right;
    right: 0px; }
#rightBox #tlcCredit {
  position: absolute;
  bottom: 10px;
  right: 10px;
  margin: 0; }
  #rightBox #tlcCredit a {
    text-decoration: none;
    color: #999; }

.ctl {
  padding: 5px 10px;
  background-color: #fff;
  cursor: pointer;
  -moz-box-shadow: 2px 2px 0px #ccc;
  -webkit-box-shadow: 2px 2px 0px #ccc;
  box-shadow: 2px 2px 0px #ccc; }

.ctlBtns {
  width: 25px;
  height: 25px;
  margin: 4px 8px 0 0;
  border: 1px solid #efefef;
  background-repeat: no-repeat;
  background-color: #fff;
  background-position: center;
  cursor: pointer;
  -moz-box-shadow: 2px 2px 0px #ccc;
  -webkit-box-shadow: 2px 2px 0px #ccc;
  box-shadow: 2px 2px 0px #ccc; }

.ctlBtns:active, .ctl:active {
  -moz-box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px #ccc;
  box-shadow: 0px 0px 0px #ccc;
  margin: 2px 0px 0px 2px; }

#addDoc, #addDate {
  background-image: url(../img/add.png); }

#view_switch {
  width: 100%;
  height: 20px;
  position: absolute;
  z-index: 10;
  text-align: center; }

.listview {
  overflow-y: auto;
  position: absolute;
  background-color: #fff;
  height: 100%;
  width: 100%;
  padding: 50px 20px 20px;
  border-right: 1px solid #333;
  box-sizing: border-box; }

.highlighted {
  background-color: #333;
  color: #fff; }

.docColor_-1 {
  color: #6f6f6f; }

.docColor_0 {
  color: #377eb8; }

.docColor_1 {
  color: #4daf4a; }

.docColor_2 {
  color: #984ea3; }

.docColor_3 {
  color: #ff7f00; }

.docColor_4 {
  color: #e41a1c; }

.docColor_5 {
  color: #a65628; }

#listData .listEl {
  cursor: pointer; }
#listData ul > li > span {
  color: #000; }

#selectBox {
  position: absolute;
  top: 40px;
  left: 11px;
  z-index: 1; }

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  cursor: pointer; }

li {
  background-color: #fff;
  margin: 2px 0;
  padding: 2px 10px; }

li:hover {
  background-color: #efefef; }

li:active {
  margin: 4px 0 0 2px; }

h1, .datetitle {
  font-size: 18px; }

h2 {
  font-size: 15px;
  color: #333; }

.hltx {
  color: #fff;
  background-color: #333;
  font-weight: bold; }

p, .content {
  font-size: 12px;
  font-weight: normal; }

.label {
  font-size: 0.8em;
  color: #999;
  font-weight: bold; }

input {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }

.addDimension {
  padding: 7px 0 0;
  cursor: pointer;
  color: #999;
  background-position: center top;
  vertical-align: bottom;
  background-image: url(../img/editAdd.png);
  background-repeat: no-repeat;
  font-size: 8px; }

#displayDate input {
  font-size: 18px; }

.changeUnit {
  background-image: url(../img/dateToDur.png);
  margin: 2px 5px;
  padding: 1px 13px; }

.durtodate {
  background-image: url(../img/durToDate.png);
  margin: 2px 5px;
  padding: 1px 13px; }

#check {
  background-image: url(../img/check.png);
  margin: 2px 5px;
  padding: 1px 13px; }

#displaySubtitle input {
  font-size: 14px;
  margin: 15px 0; }
#displaySubtitle div, #displaySubtitle textarea {
  font-size: 18px;
  margin: 15px 0;
  width: -webkit-calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  width: calc(100% - 100px); }

#recoverElement {
  position: absolute;
  text-align: left;
  bottom: 10px;
  left: 10px;
  font-size: 10px; }

.todaytag {
  font-size: 10px;
  fill: #aaa;
  font-style: italic; }

.refline {
  shape-rendering: crispEdges;
  stroke: #ccc;
  stroke-width: 1px; }

.timelineItem {
  -moz-transition: all 300ms ease-in;
  -webkit-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
  cursor: pointer; }

.selected {
  stroke: #333;
  stroke-width: 3px; }

.selectedSec {
  stroke: #666;
  stroke-width: 2px; }

.datelabel {
  display: none;
  text-align: center; }

.visible {
  display: block; }

.chooseTrack, .changeTrack {
  float: left;
  margin: 0 5px 2px 3px;
  padding: 2px 9px;
  font-size: 0.8em;
  font-weight: bold;
  color: #fff;
  -moz-box-shadow: 2px 2px 0px #ccc;
  -webkit-box-shadow: 2px 2px 0px #ccc;
  box-shadow: 2px 2px 0px #ccc; }

.chosen, .changeTrack:active, .chooseTrack:active {
  margin: 2px 3px 0 5px;
  outline: 2px solid #efefef;
  -moz-box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px #ccc;
  box-shadow: 0px 0px 0px #ccc;
  border: 2px inset #333;
  padding: 0px 7px; }

#fileinfo {
  position: absolute;
  right: 10px;
  top: 10px; }

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges; }

.axis text {
  font-family: sans-serif;
  font-size: 10px;
  fill: #000; }

#timeline {
  overflow-x: auto;
  height: 100%; }
  #timeline .timeline-label {
    font-family: sans-serif;
    font-size: 32px; }
  #timeline .extent {
    fill: none;
    stroke: #999;
    stroke-width: 1px;
    stroke-dasharray: 5; }

#timeline2 .axis {
  transform: translate(0px, 30px);
  -ms-transform: translate(0px, 30px);
  /* IE 9 */
  -webkit-transform: translate(0px, 30px);
  /* Safari and Chrome */
  -o-transform: translate(0px, 30px);
  /* Opera */
  -moz-transform: translate(0px, 30px);
  /* Firefox */ }

.coloredDiv {
  height: 20px;
  width: 20px;
  float: left; }

.nouserselect {
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.nodisplay {
  display: none; }

.notSelectable {
  color: #ccc; }

.notSelectable:hover {
  background-color: #fff !important; }

#inputOverlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 11;
  padding: 20px; }
  #inputOverlay #closeInput {
    position: absolute;
    top: 0px;
    right: 0;
    height: 50px;
    width: 50px;
    background-image: url(../img/closeInput.png);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer; }
  #inputOverlay #inputContainer {
    width: 100%;
    margin: 0 auto;
    height: 100%; }
    #inputOverlay #inputContainer #insertText {
      background-color: #efefef;
      padding: 20px;
      margin: 0 0 30px 0;
      height: -webkit-calc(100% - 140px);
      height: -moz-calc(100% - 140px);
      height: calc(100% - 140px); }
    #inputOverlay #inputContainer #insertFile {
      background-color: #efefef;
      text-align: center;
      height: 55px;
      padding: 5px; }
    #inputOverlay #inputContainer textarea {
      width: 100%;
      min-height: 100px;
      height: -webkit-calc(100% - 190px);
      height: -moz-calc(100% - 190px);
      height: calc(100% - 190px);
      resize: none; }
  #inputOverlay h1 {
    font-size: 20px;
    margin: 0 0 15px 0; }
  #inputOverlay .optional {
    color: #666;
    font-style: italic;
    font-size: 0.8em; }
  #inputOverlay .loading {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 12; }
    #inputOverlay .loading img {
      width: 80px;
      height: 85px;
      position: absolute;
      top: 50%;
      margin-top: -42px;
      left: 50%;
      margin-left: -40px; }
  #inputOverlay .btn {
    margin: 0 auto;
    border: 1px solid #efefef;
    background-color: #fff;
    cursor: pointer;
    width: 50px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    -moz-box-shadow: 2px 2px 0px #ccc;
    -webkit-box-shadow: 2px 2px 0px #ccc;
    box-shadow: 2px 2px 0px #ccc; }
  #inputOverlay .btn:active {
    -moz-box-shadow: 0px 0px 0px #ccc;
    -webkit-box-shadow: 0px 0px 0px #ccc;
    box-shadow: 0px 0px 0px #ccc;
    margin: 2px 0px 0px 2px; }

#saved {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 0;
  color: #999;
  font-size: 10px;
  padding: 3px 5px 3px 25px;
  font-style: italic;
  background-image: url(../img/check.png);
  background-repeat: no-repeat;
  background-position: left; }

#guide {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 5px; }

#guide a {
  text-decoration: none;
  font-weight: bold;
  color: #666;
  font-size: 0.8em; }

.help {
  cursor: pointer;
  border: 1px solid #999;
  color: #999;
  font-size: 10px;
  font-weight: bold;
  margin: 0px;
  border-radius: 50%;
  padding: 1px 7px;
  -moz-box-shadow: 2px 2px 0px #ccc;
  -webkit-box-shadow: 2px 2px 0px #ccc;
  box-shadow: 2px 2px 0px #ccc;
  text-align: center; }

.help:active {
  -moz-box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px #ccc;
  box-shadow: 0px 0px 0px #ccc;
  margin: 2px; }

/*# sourceMappingURL=style.css.map */