html, body {
    height:100%;
    margin:0;
    padding:0;
    font-family: 'Open Sans', 'Verdana', 'Arial', sans-serif;
}

/* ********** header and symbol bar *********** */
header{
    width: 100%;
    background: #282828;
    position: fixed;
    top: 0;
    height: 110px !important;
    text-align: right;
    z-index: 99;
}
header img {
  padding:5px;
  height:55px;
  width:auto;
}
.symbol {
  background-color:#ddd;
  height:40px;
  text-align: left;
  padding-left:75px;
  border-bottom:1px solid #282828;
}
.symbol img {
  cursor: pointer;
  width:20px;
  height: auto;
  margin-right: 5px;
  border-radius: 3px;
  position: relative;
  top:4px;


}
.symbol img:hover {
  background-color:#fff;
}
/* ********** content area *********** */
.content {
    position:relative;
    height: 100%;
    min-width:300px;

    padding:110px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
.sidebar1, .sidebar2 {
    background: #535353;
    top:110px;
    bottom:30px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
.sidebar1 {
    left:0;
    background-image: url('../img/bg-leftbar.png');
    background-repeat: repeat-y;
    width:400px;
    overflow-y:auto;
}
.toggle-bar{
  display: none;
  text-align: left;
  width:300px;
}
h3 {
  color:#ddd;
  padding:0;
  margin:0 0 10px 0;
  font-size: 1em;
  text-transform: uppercase;
}
.tb-sub-title {
  font-weight:bold;
  font-size:0.8em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  clear:both;
  color:#ddd;
  cursor:pointer;
  width:300px;
  background-color:#282828;
}
.navitem-2cols {
  float:left;
  display:inline;
  text-align: center;
  padding:0 0.2em;
}
.navitem-2cols img {
  vertical-align: bottom;
  padding-bottom: 0.2em;
}
.navitem-2cols span {
  font-size:0.7em;
  display:block;
  color:#eee;
}
.navitem {
  font-size:0.8em; width:100%;  border-bottom:1px solid #eee; margin-bottom: 0.3em;
  color:#ddd;
}

.navitem img { width:20px; height: auto; padding-right:0.8em; vertical-align: bottom; }

.navitem:hover {
  background: rgba(130,130,130, 0.3);
  border-bottom:1px solid #ddd;
  font-weight:bold;
  cursor:pointer;
}

#addSymbols img {
  width:25px;
  height:auto;
  padding-right:0.5em;
}


.sidebar2 {
    right: 0;
    width:300px;
    padding-left:10px;
    padding-top:10px;
}


.right-bar-container img { width: 20px; height: auto;}

span.info {
  font-size: 0.8em;
  background:#eee;
  border-radius: 4px;
  padding:0 2px;
}

#scrollable2 {
    background:#ccc;
    height: 100%;
    min-width: 300px;
    margin-left: 400px;
    margin-right: 300px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
canvas {
  border:1px solid #333; margin:2em 4em;
}
footer {
    width: 100%;
    background: #282828;
    position: fixed;
    bottom: 0;
    height: 30px;
    z-index: 99;
    text-align:center;
    color:#fff;
    font-size: 0.8em;

}
footer span {
  display: inline-block;
  padding-top:0.3em;
}
footer a {
  text-decoration:none;
  color:#fff;
}


/*   ******** tooltips ******** */
  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }

  .dropzone {

        width: 300px;


    }
    .clearer { clear: both;}