/* 
    Document   : worldWhenChat
    Created on : Mar 1, 2014, 4:13:59 PM
    Author     : Eugene Chen
    Description:
        Purpose of the stylesheet follows.
*/

root { 
  display: block;
}

body,html {
  position: relative;
  background-color: #000; /*#000714;*/
  color: #fff;  
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
}

#imgTimeFormat{
  cursor: pointer;
}

#clockPreviewImg{
  float: left;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top:-70px;
}

#navBarLeft{
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 170px; 
  text-align:left; 
  padding-left:30px;
  padding-top:25px;
  display: none;
  z-index: 5;
}

#shareBox{
  color: rgb(230,230,230);
  cursor:pointer;
  display: none;
  display: inline-block; 
  vertical-align: top;
  margin-left: 7px;
}

.shareIcon{
  cursor: pointer;
  width:18px;
  margin-top:2px;
}

#navBar{
  position: fixed; 
  top: 0; 
  right: 0; 
  width: 230px; 
  text-align:right; 
  padding-right:30px;
  padding-top:25px;
  display: none;  
  z-index: 5;
}

#hireBox{
  color: rgb(230,230,230);
  cursor:pointer;
  display: none;
  display: inline-block; 
  vertical-align: top;
}

.navBarSlash{
  margin-left: 5px;
  margin-right: 5px;
}

#navBarFFimg{
  height: 16px;
  width: 16px;
  margin-top:4px;
  vertical-align: top;
  margin-left:2px;
  cursor: pointer;
}

#settingsIconBox, #settingsTimeFormat{
  color: rgb(230,230,230);
  display: inline-block; 
  cursor:pointer;
  vertical-align: top;
  
}

#legendBox{
  font-size: 12px;
  color: #bbb;
  /*border: 1px solid #666;*/
  /*background-color: #000;*/
  padding:12px 12px 10px 12px;
  margin-bottom: 50px;
  width:576px;
  margin-left: auto;
  margin-right: auto;
}

  .legendColumn{
    display: inline-block;
    width: 230px;
    vertical-align: top;
  }    

  #legendColumnFirst{
    margin-right: 50px;
  }    
  #legendColumnSecond{
    margin-right: 0px;
    width: 200px;
  }    

  .colorSelector{
    margin-bottom: 4px;
    cursor: pointer;
  }

  
  #switchColors{
    float:right;
    margin-top:49px;
    cursor: pointer;
  }
  
  #fastforwardClock{
    float:right;
    margin-top:7px;
    cursor: pointer;
    margin-right: -20px;
  }


#creditsButton{
  position: fixed; 
  bottom: 42px; 
  right: 0; 
  width: 150px; 
  text-align:right; 
  padding-right:30px;
  padding-top:25px;
  color: rgb(200,200,200);
  cursor:pointer;
  font-size: 12px;
  display: none;
  z-index: 10;
}

#shareButtons{
  position: fixed; 
  bottom: 42px; 
  left: 0; 
  width: 150px; 
  text-align:left; 
  padding-left:35px;
  padding-top:25px;
  color: rgb(200,200,200);
  font-size: 12px;
  z-index: 10;
}

.ignoreEvents{
  pointer-events: none;
}

.floatBox, .nonFloatingHireBox {
  width: 600px;
  height: 500px;
  background-color: #000;
  float: left;
  position: absolute;
  left: 0;
  right: 0;

  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  color: rgba(127,127,127,1);
  line-height: 38px;
}

#settingsBox{
  display: inline-block; 
  cursor:pointer;
}

#darkhorseBox, #darkhorseBottomBox {
  z-index: 1000;
  width: 900px;
  height: 450px;
  margin-top: 140px;
  margin-bottom: 200px;
  
  border: 1px solid #666;
  padding:20px;
  display: none;
  position: fixed;
}

#cheatLeft{
  display:inline-block;
  position: relative;
  margin-left: -47%;
}

#darkhorseBottomBox{
  z-index: 0;
  position: relative;
  display:inline-block;
  margin-left:20%;  
  text-align:left;
  margin-top: 30px;
}

#bitlyBox {
  z-index: 1000;
  width: 500px;
  height: 200px;
  margin-top: 250px;
  margin-bottom: 200px;
  display: none;
  border: 1px solid #666;
  padding:50px;
  position: fixed;
}

#bitlyBox input{

  width: 330px;
  border: 1px solid rgba(127,127,127,1);
  color: rgba(127,127,127,1);
  background-color: #000;
  font-size:20px;
  
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */    
    
    margin-left: 20px;
      margin-bottom: 30px;
}


#splashBox {
  z-index: 1000;
  width: 900px;
  height: 450px;
  margin-top: 140px;
  
  border: 1px solid #666;
  padding:20px;
}

    #splashBox .floatTitle{
      text-align: center;
      line-height: 30px;
    }

    #splashButton{
      color: #888;
      cursor:pointer;
    }

    .floatButton{
      height: 30px;
      border: 1px solid #333;
      width: 350px;
      text-align: center;
      vertical-align: middle;
      padding-bottom: 8px;

      position: absolute;
      left: 0;
      right: 0;

      margin-left: auto;  
      margin-right: auto;  
      margin-top: 40px;

    }

    
    
#svgDivContainer{
  height: 900px;
}


.floatBox p.floatTitle {
  font-size: 24px;
  color: rgba(91,155,213,1);
  margin-top: 35px;
}

.floatTitle{
  line-height: 30px;
}


#cityBox {
  z-index: 500;
  width: 900px;
  height: 450px;
  margin-top: 140px;
  
  border: 1px solid #666;
  padding:20px;
  display: none;
}

#cityBoxContentContainer{
  margin-left: 150px;
}

#darkhorseBoxContentContainer{
  margin-left: 30px;
  font-size: 16px;
  line-height: 19px;
}

.hireImages div{
  margin-right: 20px;
  margin-top: 10px;
}

#darkhorseBoxContentContainer a:visited img{
border: 1px solid #666;
}
#cityBoxCitiesSection{
  margin-left: 60px;
}


.cityBoxCitiesCitySection{
  display: block;
  vertical-align: middle;
  margin-top: 10px;
  
}

.cityBoxCitiesCitySection span{
  vertical-align: top;
}

.cityBoxCityInputHolder{
  position: absolute;
  float:left;
  margin-left: 150px;
  margin-top: -38px;
}

#floatTitleButton{
  margin: 20px 0px 0px 500px;
  color: #ccc;
  cursor: pointer;
}


#articleBox{
  width: 880px;
  margin-top: -100px;
  background-color: transparent;
  display:none;
}


    #articleBox h1{
      font-size: 42px;
      color: rgba(91,155,213,1);
      margin-bottom: 40px;
    }


    #articleBox h2{
      font-size: 34px;
      color: rgba(71,135,193,1);
      margin-top: 45px;
    }


    #articleBox h3{
      font-size: 22px;
      color: rgba(160,160,160,1);
    }
    
    #articleBox h4{
      font-size: 30px;
      color: rgba(91,155,213,1);
      margin-top: -10px;
    }

    #articleMoreButton {
      font-style: italic;
      text-align: center;
      cursor: pointer;
      margin-bottom: 100px;
      margin-top: 70px;
      color: #888;
    }
    
    
    #summaryHeader{
      margin-top:60px;
    }

.onTopBox{
  z-index: 20;
  
}

.overlay
{
   background-color: #FFF;
   opacity: .2;
   filter: alpha(opacity=70);
   position: fixed; top: 0; left: 0;
   width: 100%; height: 100%;
   z-index: 10;
   display: none;
}   
    
.articleGifContent{
  width:100%;
  margin-bottom: 70px;
/*  margin-top: 70px;*/
  
}

.interestingCombinations{
  cursor: pointer;
  color: #eee;
  width: 200px;
  display: inline-block;
  margin-right: 55px;
  margin-bottom: 15px;
}

.interestingCombinations p {
  font-size: 15px;
  color: #eee;
  width: 200px;
  margin: 5px auto 0px auto;
}

.interestingCombinations:hover{
  color: #ddd;
}
.interestingCombinationLinkText{
  margin-top: -50px;
}

.lastOnRow{
  margin-right: 0px;
  margin-bottom: 80px;
}

.subheaderText{
  color: #999;
  font-size: 15px;
  margin-top: -30px;
  margin-bottom: 25px;
  line-height: 20px;
}

/*#creditsBox{
  position: relative;
  width: 900px;
  height: 85px;
  color:#ccc;
  background-color: #222;
  text-align: center;
  font-size: 17px;  originally 17 
  line-height: 29px;
  margin-top: 150px;
  margin-left:-150px;
  padding:30px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  width:540px;
}    

    .creditsColumn{
     display: inline-block;
     width: 260px;
     vertical-align: top;
    }

*/    a{
     text-decoration: none;
     color: #ddd;
    }    /*


    #creditsBox img{
      margin-top: 10px;
      margin-bottom: 7px;
      margin-left: 20px;
      width: 250px;
    }    
    
    #creditsSecondLineText{
      display: none;
      font-size: 10px;
      margin-top: 2px;
      margin-right:3px;
    }*/
    
 
/* --------- Arc colours ----------- */    
    
    .statusArcOverlapNone{
      fill: rgba(90,90,90,1);
    }
    
    .statusArcOverlapOkay{
      /*fill: rgba(56,87,35,1);*/
      fill: rgba(255,166,0,1);
    }
    
    .statusArcOverlapGreat{
      /*fill: rgba(112,173,71,1);*/
      fill: rgba(255,255,255,1);
    }
    
    

    .cityArcHoursNone{
      fill: rgba(45,45,45,1);
    }
    
    .cityArcHoursStretch{
      /*fill: rgba(31,78,121,1);*/
      fill: rgba(0,79,79,1);
    }
    
    .cityArcHoursIdeal{
      /*fill: rgba(91,155,213,1);*/
      fill: rgba(0,150,160,1);
    }
    
    
.color-box {
	float:left;
	width:20px;
	height:20px;
	margin:5px;
	/*border: 1px solid white;*/
  margin-right: 20px;
  margin-top: 9px;
}
    
    
    
    

.typeahead{
  width: 330px;
  border: 1px solid rgba(127,127,127,1);
  color: rgba(127,127,127,1);
  background-color: #000;
  font-size:20px;
  
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */  
  
}


.tt-dropdown-menu{
  background-color: #111;
  width:310px;
  padding:10px;
}

tt-dataset-cities{
  line-height: 23px;
  margin-top:-15px;
}

.tt-suggestion{
  font-size:20px;
}

.tt-cursor{
  background-color: #222;
  color: #ccc;
  cursor: pointer;
}

#lhHireImages{
  display: none;
}

#rhHireImages{
  display: inline-block;
}

#featuresDiv img{
  display: inline-block;
  margin-left: 80px;
}

#featuresDiv{
  font-size: 15px;
  line-height: 17px;
  margin-top: 45px;
}


#featuresDiv ul, #featuresDiv ol{
margin-top: 5px;
margin-bottom:15px;
margin-left: 5px;
margin-left: -10px;
}

#featuresDiv li{
}

.rhsDiv{
  display: inline-block;
  vertical-align: top;
  margin-left: 70px;
  color:#aaa;
  margin-top: 10px;
  margin-bottom: 60px;
}

.rhsDiv div.title{
  font-weight: 800;
  margin-top: 14px;
}


@media only screen and (max-width: 1000px) {

  #articleBox{
    width: 84%;
    margin-left:7%;
    margin-right: 7%;
  }
  
  #cheatLeft{
    margin-left: auto;
    margin-right: auto;
  }
  #darkhorseBoxContentContainer{
    /*margin-left:0px;*/
  }
  #darkhorseBottomBox{
    width: 540px;
    margin-left: 0px;
    height: 780px;
  }
  
  #rhHireImages{
    display: none;
  }
  #lhHireImages{
    display: block;
  }
  
.hireImages{
  width:500px;
}
  
@media only screen and (max-width: 879px) {

  #articleBox{
    width: 84%;
    margin-left:7%;
    margin-right: 7%;
  }
  #cheatLeft{
    margin-left: auto;
    margin-right: auto;
  }
  #darkhorseBoxContentContainer{
    /*margin-left:0px;*/
  }
  #darkhorseBottomBox{
    width: 540px;
    margin-left: 0px;
    height: 780px;

  }
  .interestingCombinations{
    margin-right: 20px;
  }
  
  #rhHireImages{
    display: none;
  }
  #lhHireImages{
    display: block;
  }
  
.hireImages{
  width:500px;
}


}