/* 775 by 363 */

body {
    background-color: #000000;
    font-family: 'Inconsolata', sans-serif;
    color: #fff;

}

div {
    /*border: 1px solid #333333;*/

}

.clear {
    clear: both;

}

#screensaver {

    /*
    width:100%;
    height:100%;
    position:fixed;
    margin: 0em;
    left: 0;
    top: 0;
    background-color:#000000;
    color: #FFFFFF;
    font-size: 59px;
    */

}

#screensaver-info {

    position: absolute;
    right: 0;
    left: 0; 
    top: 0; 
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width:600px;
    height: 200px;
    text-align: center;
    line-height: 10px;
    color: #333;
}
#screensaver-info span{
    visibility: hidden;
}

.wf-active #screensaver-info span{
    visibility: inherit;
}

/*
#container {
    width: 1900px;
    height: 700px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position:absolute;

}
*/
#boardroom {
    width: 1900px;
    height: 700px;
    position:absolute;
}


#bottom-border {
    position:absolute;
    top: 705px;
    width: 0px;
    height: 1px;
    margin: 0;
    padding: 0;
    border-top: 1px solid #333;
}

.header{
    color: #fff;
    text-transform:capitalize;
    margin-bottom: 10px;
    padding: 3px;
    border-top: 3px solid #FFCC00;
    border-bottom: 1px solid #FFCC00;
    white-space: nowrap;
    overflow: hidden;
}

.header:before{
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 25px;
    width: 100%;
    height: 3px;
    background: #FFCC00;

}

.header-other{
    border-color: #00EEEE;
}

.header-other:before{
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 25px;
    width: 100%;
    height: 3px;
    background: #00EEEE;

}

.header-other2{
    border-color: #FF9933;
}

.header-other2:before{
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 25px;
    width: 100%;
    height: 3px;
    background: #FF9933;

}

#globalization{
    position: absolute;
    top: -10px;
    left: -10px;
    width: 0px;
    overflow: hidden;
    background: hsla(0, 0%, 0%, 0.45);
    height: 700px;

}

#satbar {
    margin-bottom: 20px;
}

.location-slider {
    font-size: 8pt;
    color: #000;
    border-bottom: 2px solid #333;
    margin-bottom: 15px;
    width: 0px;
    height: 34px;
    overflow: hidden;
    white-space: nowrap;
}

.location-name {
    margin: 0;
    padding: 0;
}

.location-area {
    background-color: #ffcc00;
    padding: 0 2px;
}

.location-area.other {
    background-color: #00eeee;
}

.location-city {
    color: #fff;
    padding: 0 2px;
}

.location-line{
    margin-top: 10px;
    border-bottom: 1px solid #00eeee;

}
.location-slider ul {
    margin: 0;
    padding-left: 15px;
    position: relative;
    top: -12px;
    height: 10px;
    list-style-type:disc;
}

.location-slider li {

    color: #00eeee;
    font-size: 16px;
    margin-bottom: -6px;
    width: 5px;
    float: left;
    height:30px;
    /*display: inline-block;*/

}

.location-gap {
    margin-top: 60px;

}

#logo {
    position: absolute;
    bottom: 10px;
    width: 180px;
    height: 100px;
}

#logo-cover-up {
    position: absolute;
    top: 32px;
    height: 58px;
    left: 10px;
    width: 160px;
    background-color: #000;
}

#logo-cover-side-1 {
    position: absolute;
    top: 90px;
    height: 20px;
    left: 10px;
    width: 160px;
    background-color: #000;
}

#logo-cover-side-2 {
    position: absolute;
    top: 25px;
    height: 8px;
    left: 10px;
    width: 160px;
    background-color: #000;
}

#globe{
    position:absolute;
    width:600px;
    height:650px;
    left: 190px;
    top: 0;
}

#globe-footer{
    position:absolute;
    height:55px;
    top: 650px;
    left: 350px;
    overflow: hidden;
}

.footer-bar{
    width: 1px;
    height: 200px;
    border-left: 1px solid #333;
    float:left;
    margin-right:15px;
    margin-top:100px;
}

#globe-footer a{
    padding-top:5px;
    float:left;
    margin-right: 30px;
}

#globe-footer img{
    opacity: 0;
}

#twitter {
    width: 30px;
}

#info-image {
    width: 25px;
}

#fullscreen-image {
    width: 25px;
}

#keyboard-image {
    width: 40px;
}

#github-image {
    width: 25px;
}

#about {

    display: inline-block;
    font-size: 18pt;
}
#logout {

    display: inline-block;
    font-size: 18pt;
}

#infect {

    display: inline-block;
    font-size: 18pt;
}


#user-interaction{
    position: absolute;
    top: 0px;
    left: 820px;
    width: 0px;
    height: 495px;
    overflow: hidden;
    background: hsla(0, 0%, 0%, 0.45);
}
#user-interaction-container{
    width: 600px;
    height: 100%;
}
#user-interaction h3{
    padding: 4px;
    font-size: 3pt;
    margin: 0px;
}

#interaction {
    padding: 2px 8px;
    margin-top:6px;
    float: left;
    border-right: 1px solid #333;
    width: 286px;
    height: 445px;
    font-size: 10px;
    overflow: hidden;
}

.interaction-data {
    padding: 1px 5px;
    white-space: nowrap;
    color: #00eeee;
    padding: 0px;
    margin: 5px;
}

.interaction-data li {
    display: inline-block;
    padding: 0px;
    padding-right: 10px;
    font-size: 10px;
    line-height: 1em;
}

.interaction-username {
    color: #fff;
}

.interaction-title {
    color: #00eeee;
}

.interaction-type {
    color: #ffcc00;
}

.interaction-size {
    color: #fff;
}

.interaction-popularity {
    color: #00eeee;
}

.interaction-popular {
    color: #00eeee;
    margin-left: -15px;
    padding: 0;
    margin-right: 0;
}


#interaction-overlay {
    position:absolute;
    width: 296px;
    height: 200px;
    bottom: 0px;
    background: -webkit-linear-gradient(transparent, #000); /* For Safari */
    background: -o-linear-gradient(transparent, #000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(transparent, #000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(transparent, #000); /* Standard syntax */
}
#cube {
    position: absolute;
    left: 302px;
    width: 290px;
    height: 225px;
    border-bottom: 1px solid #333;
    padding:4px;
}
#cube-labels {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 4pt;
    padding: 0;
    margin: 0;
}

#cube-labels div {
    margin: 3px 0 0 0;
    padding:0 0 0 3px;
}

#cube-label-1{
    border-left: 42px solid #00eeee;
}
#cube-label-2{
    border-left: 10px solid #ffcc00;
}
#cube-label-3{
    border-left: 25px solid #aaa;
}

#swirls {
    position: absolute;
    bottom: 0;
    height: 225px;
    width: 290px;
    left: 305px;
}

#growth{
    position: absolute;
    top: 500px;
    left: 820px;
    width: 0px;
    height: 195px;
    overflow: hidden;
    background: hsla(0, 0%, 0%, 0.45);
}
#growth-container{
    width: 600px;
    height: 100%;
}

#ticker {
    float: left;
    width: 90px;
    height: 105px;
    margin-top: 10px;
    margin-left: 10px;
    color: #fff;
}

#ticker-text{
    margin: 0px;
    padding: 0px;
    font-weight:bold;
    font-size: 18pt;
    line-height: 17pt;
    margin-top: 8px;
}
#ticker-subtext{
    margin: 0px;
    vertical-align: top;
    padding: 0px;
    font-size: 10pt;
    display: inline-block;
    width: 34px;
}

#ticker-lines{
    display: inline-block;
    vertical-align: top;
    width: 34px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    margin-top: 2px;
    margin-left: -5px;
}
.ticker-line{
    margin: 0;
    padding: 0;
    font-size: 3px;
    border-left: 20px solid #00eeee;
    background-color: #666;
}

#ticker-value{
    font-size: 18pt;
    font-weight: bold;
    margin-top: 10px;
}
#ticker-ytd{
    font-size: 8pt;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-right: 18px;
    margin-bottom: 5px;
}

#ticker-line-1{
    border-left: 8px solid #00eeee;
    margin-bottom: 2px;
    
}

#stock-chart
{
    position: absolute;
    top: 50px;
    left: 105px;
    width: 496px;
    height:105px; 
    overflow: hidden;
}
#stock-chart canvas {

}

#stock-chart div {
    position: absolute;
    top: 0px;
    left: -2px;
    width: 0px;
    overflow: hidden;
    height: 105px;
    border-right: 1px solid #ffcc00;
}

#stock-chart div canvas{
    margin-left: 2px;

}

#stock-subcharts
{
    position: absolute;
    top: 161px;
    left: 110px;
    border: 0px;
    color: #fff;
    width: 500px;
    height: 28px;


}

.stock-subchart{
    display: block;
    float: left;
    width: 100px;
    height: 25px;
    overflow: hidden;
}

.stock-subchart-label{
    display: inline-block;
    font-size: 5pt;

}

.stock-subchart-chart{
    display: inline-block;
    width: 60px;
    height: 25px;
    opacity: .3;

}

.stock-subchart-chart:hover{
    opacity: 1;

}

.stock-subchart-bar{

    float: left;
    background-color: #000;
    width: 3px;
    margin-left: 1px;
    height: 20px;
    border-bottom: 10px solid #00eeee;
}

.stock-subchart-bar.subchart-5{
    height: 20px;
    border-bottom: 5px solid #00eeee;


}
.stock-subchart-bar.subchart-10{
    height: 15px;
    border-bottom: 10px solid #00eeee;
}
.stock-subchart-bar.subchart-15{
    height: 10px;
    border-bottom: 15px solid #00eeee;
}
.stock-subchart-bar.subchart-20{
    height: 5px;
    border-bottom: 20px solid #00eeee;
}

.stock-subchart-bar.subchart-yellow{
    border-color: #ffcc00;
}
.stock-subchart-bar.subchart-white{
    border-color: #aaa;
}

#media{
    position: absolute;
    top: 0px;
    left: 1440px;
    width: 0px;
    height: 495px;
    overflow: hidden;
}
#media-container{
    width: 450px;
    height: 100%;
}


.media-box{
    float: left;
    width: 380px;
    height: 190px;
    padding: 3px;
    margin: 5px;
    border: 1px solid #00eeee;
}

.user-pic{
    position: relative;
    margin: 3px;
    height: 89px;
    width: 89px;
    float: left;
    cursor: pointer;

}
#media-bottom .user-pic{
    float: right;
}
 

.user-pic.larger{
    height: 184px;
    width: 184px;
}
.user-pic span{
    display: box;
    position: absolute;
    bottom: 0px;
    background: hsla(0, 0%, 100%, 0.45);
    color: #000;
    width: 100%;
    font-size: 10px;
    text-align: center;
}

.user-pic.larger span{
    font-size: 13px;
    text-align: center;
}


.media-blinkies{
    float: left;
    height: 200px;
    width: 50px;
    color: #fff;
    font-size: 4px;
    overflow:hidden;
}

.media-blinkies h3{
    margin-top: 5px;
    padding: 0px;
    font-size: 4px;
}

.media-blinkies .bar{
    border-left: 20px solid #fff;
    margin-top: 2px;
    padding-left: 3px;

}

.blinkies-big-number{
    display: inline-block;
    width: 35px;
    font-size: 50px;
    text-align: center;
    line-height: 40px;
}
.blinkies-big-label{
    display: inline-block;
    width: 35px;
    font-size: 6px;
    text-align: center;
}
.blinkies-small-number{
    display: inline-block;
    width: 10px;
    font-size: 20px;
    text-align: center;
    line-height: 20px;
}
.blinkies-small-label{
    display: inline-block;
    width: 10px;
    font-size: 6px;
    text-align: center;
}

.blinky{
    display: inline-block;
    width: 2px;
    height: 3px;
    background-color: #fff;
    margin: 3px;
}

.blinky.blue{
    background-color: #00eeee;
}
.blinky.blank{
    background-color: #000;
}
.blinky.yellow{
    background-color: #ffcc00;

}
.bar.border-10{
    border-left: 20px solid #fff;
}
.bar.border-20{
    border-left: 20px solid #fff;
}
.bar.border-25{
    border-left: 25px solid #fff;
}
.bar.border-30{
    border-left: 30px solid #fff;
}
.bar.border-35{
    border-left: 35px solid #fff;
}
.bar.border-40{
    border-left: 40px solid #fff;
}
.bar.border-blue{
    border-color: #00eeee;
}
.bar.border-yellow{
    border-color: #ffcc00;
}
.bar.border-white{
    border-color: #fff;
}
.bar.last{
    margin-bottom: 10px;

}

.media-info{
    padding-top: 3px;
    margin:0 5px;
    font-size: 6px;
    color: #fff;
    float: left;
    width: 500px;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
    opacity: .4;
}

.media-info span{

    padding-right: 30px;

}

#timer{
    position: absolute;
    top: 500px;
    left: 1440px;
    width: 0px;
    height: 195px;
    overflow: hidden;
}

#clock {
    float: left;
    font-size: 66px;
    color: #AAA;
    overflow: hidden;
    margin-top:8px;
}

/*
#globe-footer-reveal{
position:absolute;
width:600px;
height:35px;
top: 665px;
left: 190px;
}
 */


#fps {
    position: absolute;
    left: 0;
    bottom: 0px;
    padding:0 0 3px 3px;
    text-align:left;
    background-color:#000;
    /*width: 180px;*/
    width: 0px;
    height: 0px;
    overflow:hidden;

    border-left: 1px solid #aaa;
}

#fpsDescription {

    position: absolute;
    top: 0px;
    left: 10px;
    width:100px;

    color:#fff;
    font-family:Helvetica,Arial,sans-serif;
    font-size:7px;
    font-weight:bold;
    line-height:15px;

}
#fpsText {
    position: absolute;
    top: 12px;
    left: 10px;
    width:100px;

    color:#FFCC00;
    font-family:Helvetica,Arial,sans-serif;
    font-size:7px;
    font-weight:bold;
    line-height:15px;

}
#fpsGraph {
    position: absolute;
    bottom: 4px;
    left: 90px;

    width:74px;
    height:26px;
    background-color:#aaa;
    border-bottom: 1px solid #666;

}
#fpsGraph span {

    width:1px;
    height:26px;
    float:right;
    background-color:#000;
}

#ms {
    position: absolute;
    left: 200px;
    bottom: 0px;

    padding:0 0 3px 3px;
    text-align:left;
    background-color:#000;
    /*width: 200px;*/
    /*height: 31px;*/
    width: 0px;
    height: 0px;
    overflow:hidden;

    border-left: 1px solid #aaa;
}
#msDescription {
    position: absolute;
    top: 0px;
    left: 10px;
    width:100px;

    color:#fff;
    font-family:Helvetica,Arial,sans-serif;
    font-size:7px;
    font-weight:bold;
    line-height:15px;
}

#msText {
    position: absolute;
    top: 12px;
    left: 10px;
    width:100px;

    color:#00EEEE;
    font-family:Helvetica,Arial,sans-serif;
    font-size:7px;
    font-weight:bold;
    line-height:15px;
}

#msGraph {
    position: absolute;
    bottom: 4px;
    left: 80px;

    width:74px;
    height:26px;
    background-color:#aaa;
    order: 1px solid #666;
    border-bottom: 1px solid #666;

}

#msGraph span {

    width:1px;
    height:26px;
    float:right;
    background-color:#000; 
}

#clockbar {
    overflow: hidden;
    height: 80px;
}
#simpleclock {
    float: left;
    margin-top: 5px;
    margin-left: 5px;
}

#timerbar {
    clear: both;
    margin:10px 0;
    overflow: hidden;
    height: 28px;
    width: 500px;
}

.section-timerbar{
    width: 65px;
    border: 1px solid #00EEEE; 
    float:left;
    color: #FFFFFF;
    font-size: 8px;
    padding:4px;
    margin-bottom: 10px;
    text-align: center;
}

.buffer-timerbar{
    margin-left: -5px;
    background-color: #000;
    padding-left:5px;
    width: 110%;
    height: 17px;
    overflow: hidden;
}

.buffer-timerbar > small {
    font-size: 8px;
    display: block;
    color: #aaa;
}

.boardroom-readme {

    border: 2px solid #6fc0ba;
    border-radius: 2px;
    /* box-shadow: 0 0 6px #005b8e, inset 0 0 6px #005b8e; */
    padding: 3px;
    visibility: hidden;
    background-color: #000;
    position: absolute;
    width: 500px;
    top: 50px;
    left: 600px;
    z-index:250;
}

.boardroom-readme .content{
    padding: 0;
    margin: 0;
}

.boardroom-readme h2 {
    color: #fff;
    margin: 0;
    border-bottom: 1px solid #1b2f2d;
    padding: 2px 4px;
    font-weight: bold;
}

.boardroom-readme h2 em{
    font-style: normal;
    float: right;
    font-size: .8em;
    padding-top: 1px;
    color: #00eeee;
    cursor: pointer;

}

.boardroom-readme p {
    font-size: 10pt;
    margin: 4px 4px 0;
    padding: 4px 6px;
    line-height: 1.8em;

}