@charset "UTF-8";

body {
	background-color:#418FDE;
	bottom:-65px;
	
}


#panelTop img {
	
	display:inline-block;
	
	 
}

#panelTop div {

background-color:rgba(23,22,70,0.7);
width:100%;
left:50%;
margin-left:57px;
position:absolute;
height:56px;
bottom:0;



}

#panelTop div:last-child {

left:auto;
margin-left:auto;
right:50%;
margin-right:57px;


}


#panelTop {
	
	position:fixed;
	top:10%;
	left:0;
	right:0;
	opacity:1;
	transition: opacity 0.5s ease;
	width:70%;
	min-width:800px;
	height:92px;
	margin:0 auto 0 auto;
	overflow:hidden;
	padding:0 3em;
	overflow:hidden;
	text-align:center;
	cursor:default;
	z-index:2; /* fix flashing bug on restoration of names */

	
}


#panel {
	
	width:70%;
	min-width:800px;
	background-color:rgba(23,22,70,0.7);
	padding:0 48px;
	position:fixed;
	top:10%;
	height:190px;
	left:0;
	right:0;
	margin:92px auto 0 auto;
	z-index:2;
	text-align:center;
	opacity:1;
	transition: opacity 0.5s ease;
	cursor:default;
	
	
	
}

 #panel p {
	 
	color:#fff;
	font-size:3em;
	margin:10px 0 0 0;
	font-family:museo-slab-1, arial;
	font-weight:100;
	 
 }
 
  
 .large {
	 
	 font-family:museo-sans-1, arial;
	 font-size:1.6em;
	 font-weight:700;
	 
 }
 
 
 
#footer {
	
 	position: fixed;
    bottom: 0;
	left:0;
    width: 100%;
	height:65px;
	padding:18px 20px;
	box-sizing:border-box;
	background-color:rgba(23,22,70,1);
	text-align:center;
	opacity:1;
	transition: opacity 0.5s ease;
	cursor:default;
	
}

#footer a {
	
	display:inline-block;
	margin-top:-45px;
	
}

#footer img:first-child {
	
	float:left;

	
}

#footer img:last-child {
	
	float:right;
	
	
}

.name{
	padding-right:10px;

	
}

.nameGroup {
	
	font-size:22px;
	line-height:26px;
	color:#81BCF7;
	font-family: 'Gudea', sans-serif;
	font-weight: 400;
	display:inline;
	transition: color 0.5s ease;
	
	 
}

.nameGroup:last-child {
	
	color:#fff;
	padding-bottom:85px;

	
}



.hour {
	
	color:#932f35;
	padding:0 10px;
	display:none; /* disabling this in favor of placing hours in main panel */
	
}



.active {
	
/* not using this year */
	
}

#scrollbarContainer {

	margin:30px auto 0 auto;
	text-align:center;
	left:0%;
	cursor:move;

}

.scrollbarSegment {
	

	height:9px;
	margin:0;
	width:7.692%;   /* 11 bars - 9.09%    12 bars - 8.33% */
	box-sizing:border-box;
	padding:0;
	float:left;
	border-right: #233973 solid 2px;
	z-index:999;

	
}

 #dragContainer {
	 
	position:fixed;
	top:10%;
	height:95px;
	vertical-align:top;
	background-image:url(../images/drag_btn.png);
	background-repeat:no-repeat;
	background-position:center 39px;
	height:120px;
	width:100%;
	min-width:800px;
	left:0;
	right:0;
	margin:285px auto 0 auto;
	cursor:move;
	z-index:2;
	
}
 
 input {
	 
	position:absolute;
	border:0;
	background-color:rgba(23,22,70,1);
	background-image:url(../images/hide.png);
	background-repeat:no-repeat;
	background-position:right;
	height:95px;
	font-family: 'Gudea', sans-serif;
	font-size:2.5em;
	font-weight:400;
	color:#fff;
	left:0;
	right:0;
	width:70%;
	min-width:800px;
	margin:0 auto 0 auto;
	padding:0 71px 0 25px;
	transition: background 0.3s ease;
	transition-delay:0.5s;
	z-index:9999;
	 
 }
 

 
input:focus {
	 
	 outline:none;
	 background-image:url(../images/show.png);
	 transition: background 0.3s ease;
	 transition-delay:0.5s;
	
	 
	
 }
 
input:focus ~ #footer {
	 
	 opacity:0;
	 transition: opacity 0.5s ease;
 }
 
 input:focus ~ #panel {
	 
	 opacity:0;
	 transition: opacity 0.5s ease;
 }
 
  input:focus ~ #panelTop {
	 
	  opacity:0;
	  transition: opacity 0.5s ease;
 }
 
 
input::-webkit-input-placeholder {
   color:rgba(255,255,255,0.4)
}

input:-moz-placeholder { /* Firefox 18- */
   color:rgba(255,255,255,0.4)
}

input::-moz-placeholder {  /* Firefox 19+ */
   color:rgba(255,255,255,0.4) 
}

input:-ms-input-placeholder {  
   color:rgba(255,255,255,0.4) 
}
 




.slider {
	
	height:9px;
	border:none;
}


  .ui-slider  .ui-slider-handle {
     top:-8px;
	 cursor:move;
	 height:26px;
	 width:26px;
	 background-color:#fff;
	 border:0;
	 border-radius:13px;
	 
	  
  }
  
  #intro {
	  
	font-family: 'Gudea', sans-serif;
	font-size:1em;
	font-weight:400;
	color:rgba(255,255,255,1);
	padding:25px 0 0 0;
	display:none;
	 
	  
  }
  
    #intro span{
	  
	padding-left:5px;

	  
  }
  
    #standby {
	  
	font-family: 'Gudea', sans-serif;
	font-size:1em;
	font-weight:400;
	color:rgba(255,255,255,1);
	padding:25px 0 0 0;
	display:none;
	 
	  
  }
  
  #curvedarrow {
  display:inline-block;
  position: relative;
  top:-14px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid white;
  -webkit-transform: rotate(-110deg);
  -moz-transform: rotate(-110deg);
  -ms-transform: rotate(-110deg);
  -o-transform: rotate(-110deg);
}

#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid white;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

h5 {
	
	font-size:12px;
	font-weight:100;
	content: AM;
	margin:0;
	display:inline;
	opacity:1;
	padding-left:3px;
	
}
  
@media screen 
  and (max-device-width: 400px) 
  and (max-device-height: 800px) 
 {
	 
	  #dragContainer {
		  
		  background-image:none
	  }

}

@media only screen and (orientation: landscape) {
	 
	 body {
	
	min-height:1100px;

	
	
}
	 
 }