body {	
	background-color: #000;		
	margin: 0;
	padding: 0;	
}		
#staticHomeImg {			
	display: none;
	/* background: url(../images/bw_tv_static.gif) repeat 0 0; black-and-white tv static (750 x 504px) */
	background: url(../images/color_tv_static.gif) repeat 0 0; /* color tv static (360 x 270px) */
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

/* CONTROL PANEL */
.controlPanel {
	display: block;
	width: 200px;
	height: 400px;

	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;

	background-color: #000;
	opacity: 0.5;
	border-bottom-left-radius: 10px;
	border-left: 3px solid #cecece;
	border-bottom: 3px solid #cecece;
	border-top: 0 solid #cecece;
	border-right: 0 solid #cecece;

	-webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}	
	/* BUTTONS AND BUTTON-STATES */
	a:link.toggler, a:active.toggler, a:visited.toggler {
		display: inline-block;
		width: 30px;
		height: 15px;

		position: absolute;
		bottom: -21px;
		left: 6px;
		z-index: 100;

		background-color: #fff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		border-left: 3px solid #cecece;
		border-bottom: 3px solid #cecece;
		border-top: 0;
		border-right: 3px solid #cecece;	

		color: #000;
		font-size: 10px;
		text-align: center;
	}
		a:hover.toggler {
			background-color: #999;
		}
		a:link.toggler img {
			-webkit-transition: 1.0s ease-in-out;
		    transition: 1.0s ease-in-out;
		}
	a:link.button, a:active.button, a:visited.button {
		/*display: none;*/ /* uncomment this line to fade the buttons in using the whiteNoise() script function in index.html */
		display: inline-block; /* comment-out this line to fade the buttons in using the whiteNoise() script function in index.html */
		width: 180px;
		height: 25px;						
		margin: 10px;
		padding: 0;

		position: relative;
		/*left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);*/
		z-index: 120;
		float: right;
		clear: both;
				
		border-radius: 4px;
		border: 1px solid #cecece;
		text-align: center;
		text-decoration: none;
		opacity: 1;
		
		font-family: 'Russo One', sans-serif;
		color: #fff;
		font-size: 15px;
		font-weight: 100;
		line-height: 25px;
		letter-spacing: 1px;			
		
		-webkit-box-shadow: 0 0 8px 4px rgba(255,255,255,0.5);
		box-shadow: 0 0 8px 4px rgba(255,255,255,0.5);
	}
		a:hover.button {
			background-color: #fff;
			border: 1px dashed #000;
			color: #000;

	        -webkit-transition: 0.5s ease-in-out;
	        transition: 0.5s ease-in-out;
		}
		a:link.button.power {		
			background-color: #ff0000;
		}
		.powerOn {			
			background-color: #00ff00 !important;
			color: #000 !important;
		}
	a:link.button.mute {		
		background-color: #999;
	}
		.muteOn {
			background-color: #fff;
			color: #000 !important;
		}
	/* CONTROL PANEL STATE CHANGES */
	.stowed{
		top: -403px;
	}
	.flipped {
		transform: rotate(180deg);
	}
	/* CHANNEL INDICATOR */
	.channelIndicator {
		display: block; 
		width: 40px;
		height: 40px;						
		margin: 10px auto;
		padding: 0;

		position: relative;
		top: 7px;
		z-index: 120;
		float: none;
		clear: both;

		border-radius: 10px;
		border: 3px solid #cecece;
		background-color: #333;
		
		font-family: sans-serif;
		color: #00ff00;
		font-size: 30px;
		font-weight: 100;
		line-height: 40px;
		letter-spacing: 1px;
		text-align: center;
	}

/* MEDIA QUERIES */
@media (max-width: 768px){
	
}
@media (max-width: 736px){
	
}
@media (max-width: 667px){
	
}
@media (max-width: 640px){
	
}
@media (max-width: 568px){
	
}
@media (max-width: 480px){
	
}
@media (max-width: 320px){
	
}