.button {
  min-width: 130px;
  padding: 4px 5px;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  border: 1px solid #e0e0e0;
  text-decoration: none;
  font-family: 'Open Sans';    
}

.button.active {
  background: #000;
  color: #fff;
}


#vis {
  width: 940px;
  height: 600px;
  clear: both;
  margin-bottom: 10px;
}

#toolbar {
  margin-top: 10px;
}

.year {
  font-size: 21px;
  fill: #aaa;
  cursor: default;
}

.tooltip {
  z-index:9999;
	position: absolute;
	top: 100px;
	left: 100px;
  -moz-border-radius:5px;
	border-radius: 5px;
  border: 2px solid #000;
  background: #fff;
	opacity: .9;
  color: black;
	padding: 10px;
	width: 300px;
	font-size: 12px;
	z-index: 10;
}

.tooltip .title {
	font-size: 13px;
}

.tooltip .name {
  font-weight:bold;
}

.YouTubePopUp-Content {
    max-width: 820;
}
</style>

<style>
table.dataTable tbody tr {
    background-color: transparent;
}
.dataTables_wrapper .dataTables_filter {
    position:relative;
    top:-5px;
}
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    margin-left: 0.5em;
    background:rgba(0,0,0,.1);
    border:0px solid rgba(80,80,80,.08);
    position:relative;
    top:-2px;
}
.dataTables_wrapper .dataTables_length{
    display:none;
}

.dataTables_wrapper .dataTables_length select{
    background:transparent;
    border:0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: rgba(0,0,0,.25) !important;
        border: 1px solid rgba(0,0,0,.1);
        background-color: white;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0)));
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
        background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
        background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}



a {
    color: gray;
    text-decoration: none;
}

a:hover {
    color: orange;
    text-decoration: none;
}

div.html5charts {
    border:1px solid rgb(200,200,200);
    padding:20px 10px 0px 10px;
    margin: 0;
    width:200px;
    height: 100px;
}

#dropHere {
}

.dragImg img{
    z-index:999;
    float:left;
}

/* These create the flashes */
@-webkit-keyframes hover {
    0% { background: #000000 }
    100% { background: orange }
}
@-moz-keyframes hover {
    0% { background: #000000 }
    100% { background: orange }
}
@-ms-keyframes hover {
    0% { background: #000000 }
    100% { background: orange }
}
@-o-keyframes hover {
    0% { background: #000000 }
    100% { background: orange }
}
@keyframes hover {
    0% { background: #000000 }
    100% { background: orange }
}

ul#darkmenu {
    margin-top: 3%;
    display: inline-block;
    list-style: none;
    font-family: 'Gudea', sans-serif;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
ul#darkmenu li {
    -webkit-transition: -webkit-box-shadow, background 0.2s linear;
    -moz-transition: -moz-box-shadow, background 0.2s linear;
    -ms-transition: -moz-box-shadow, background 0.2s linear;
    -o-transition: -o-box-shadow, background 0.2s linear;
    transition: box-shadow, background 0.2s linear;
    background: #787878;
    float: left;
    font-size: 13px;
    text-transform: uppercase;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);
}
ul#darkmenu li:first-child {
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}
ul#darkmenu li:last-child {
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
}
ul#darkmenu li:hover {
    -webkit-animation: hover 0.5s 1;
    -moz-animation: hover 0.5s 1;
    -ms-animation: hover 0.5s 1;
    -o-animation: hover 0.5s 1;
    animation: hover 0.5s 1;
    background: orange;
}
ul#darkmenu li:active {
    background: #05303c;
    -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);
    box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);
}
ul#darkmenu li a {
    padding: 10px;
    display: block;
    color: white;
    text-decoration: none;
}
ul#darkmenu li:active a { padding: 11px 10px 9px 10px }



.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 4;
  font-size:11px;
  text-decoration: none;
  font-family:'Open Sans';
}
.ui-widget-header {
  border: 0;
  background: transparent;
  font-family:'Open Sans';
}
.ui-tabs .ui-tabs-panel {
  padding: 0;
  font-family:'Open Sans';
}
p {
  margin:0;
  padding:0;
  font-size:11px;
  font-family:'Open Sans';
}
table {
  font-family:'Open Sans';
}


.draggable
{
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;

    cursor: hand;
    cursor: pointer;
}

.resizable
{
    width: 100px;
    border: 1px solid #bb0000;
}
.resizable img
{
    width: 100%;
}

.ui-resizable-handle
{
    background: orange;
    border: 0;
    width: 9px;
    height: 9px;

    z-index: 2;
}
.ui-resizable-handle-blue
{
    background: orange;
    border: 0;
    width: 9px;
    height: 9px;

    z-index: 2;
}
.ui-resizable-se
{
    right: -5px;
    bottom: -5px;
}

.ui-rotatable-handle
{
    background: orange;
    border: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;

    height:        10px;
    left:          50%;
    margin:        0 0 0 -5px;
    position:      absolute;
    top:           -5px;
    width:         10px;
}

.ui-rotatable-handle.ui-draggable-dragging
{
    visibility:  hidden;
}


#panel {
    position:absolute;
    top:0;
    right:0;
    width: 500px;
    height: 100%;
    display: none;
    background: rgba(255,165,0,.90);
    border-left:1px solid orange;
    z-index:2999;
}


.colpick {
    z-index:3000;
    background:rgba(255,255,255,.8);
    padding-bottom:10px;
}

.prettyprint ol.linenums > li { list-style-type: decimal; color:#cccccc; font-size:12px;padding:3px;}

pre.prettyprint {
    border: 1px solid #eeeeee;
}

@media screen {
  .str {
    color: #718c00;
  }

  .kwd {
    color: #8959a8;
  }

  .com {
    color: #8e908c;
  }

  .typ {
    color: #4271ae;
  }

  .lit {
    color: #f5871f;
  }

  .pun {
    color: #f5871f;
  }

  .opn {
    color: #4d4d4c;
  }

  .clo {
    color: #4d4d4c;
  }

  .tag {
    color: #f5871f;
  }

  .atn {
    color: #f5871f;
  }

  .atv {
    color: #78b3ec;
  }

  .dec {
    color: #f5871f;
  }

  .var {
    color: #c82829;
  }

  .fun {
    color: #4271ae;
  }
}

::-webkit-scrollbar
{
    width: 6px;  /* for vertical scrollbars */
    height: 6px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
    background: rgba(150, 150, 150, 0.1);
}

::-webkit-scrollbar-thumb
{
    background: rgba(150, 150, 150, 0.3);
}

#panel::-webkit-scrollbar
{
    width: 10px;  /* for vertical scrollbars */
    height: 10px; /* for horizontal scrollbars */
}

#panel::-webkit-scrollbar-track
{
    padding-top:5px;
    padding-right:5px;
    background: rgba(0, 0, 0, 0.1);
}

#panel::-webkit-scrollbar-thumb
{
    background: rgba(179, 122, 18, 1);
    border:1px solid rgb(229,155,22);
    border-radius:50px;
    width:100px;
}

#dataPanel::-webkit-scrollbar
{
    width: 5px;  /* for vertical scrollbars */
    height: 5px; /* for horizontal scrollbars */
}

#dataPanel::-webkit-scrollbar-track
{
    padding-top:5px;
    padding-right:5px;
    background: rgba(0, 0, 0, 0.1);
}

#dataPanel::-webkit-scrollbar-thumb
{
    background: rgba(179, 122, 18, 1);
    border:1px solid rgb(229,155,22);
    border-radius:50px;
    width:100px;
}

.myButton {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
  background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
  background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
  background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
  background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
  background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
  background-color:#ffffff;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:'Open Sans';
  font-size:12px;
  font-weight:normal;
  padding:5px 15px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
  background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
  background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
  background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
  background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
  background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
  background-color:#f6f6f6;
}
.myButton:active {
  position:relative;
  top:1px;
}

#topmenu-collaborators::-webkit-scrollbar
{
  width: 2px;  /* for vertical scrollbars */
  height: 2px; /* for horizontal scrollbars */
}

#topmenu-collaborators::-webkit-scrollbar-track
{
  background: rgba(150, 150, 150, 0.1);
}

#topmenu-collaborators::-webkit-scrollbar-thumb
{
  background: rgba(150, 150, 150, 0.3);
}

.zcpnode {
  cursor: pointer;
}

.zcpnode:hover {
  stroke: #000;
  stroke-width: 1.5px;
}

.zcpnode--leaf {
  fill: white;
}

.zcplabel {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.zcplabel,
.zcpnode--root,
.zcpnode--leaf {
  pointer-events: none;
}

ul#darkmenu li a {
    padding: 10px 10px 10px 10px;
}    
ul#darkmenu li {
    font-size: 11px;
}     

.ui-widget-overlay {
    background: rgba(0,0,0,.8);
    opacity: 1;
}
.ui-dialog { 
    z-index: 99999 !important ;
}    

#dataTabs .ui-state-default {
        border:1px solid white;
        border-bottom:0;
}
#dataTabs .ui-state-default a {
    color:white;
    font-size:10px;
}    
#dataTabs .ui-tabs-active {
    border:3px solid white;
    border-bottom:0;
    height:21px;
}
#dataTabs .ui-tabs-active a {
    font-weight:bold;
    font-size:10px;

}
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}