@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400);

body {
	background: #111;
	font-family: 'Roboto Condensed', sans-serif;
	cursor: default;
	overflow: hidden;
	font-size: 100%;
}

::selection {
	color: #f0f;
  background: rgba(0,0,0,0);
	opacity: 0;
}

::-moz-selection {
	color: #f0f;
  background: rgba(0,0,0,0);
	opacity: 0;
}

#masking {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
}

/************* menu */
#menu {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 130px;
	background: rgba(255,255,255,0.6);
	z-index: 10;
	opacity: 0;

	transition: opacity .6s ease-in-out;
	-webkit-transition: opacity .6s ease-in-out;
}

#menu:hover, #menu.visible {
	opacity: 1;
	transition: opacity .6s ease-in-out;
	-webkit-transition: opacity .6s ease-in-out;
}

#menu ul, #menu li {
	display: block;
	list-style: none none;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
#menu li {
	float: left;
}


#playercontrols {
	height: 130px;
}

/*************  */
#zero {
	background: rgba(255,255,255,0.6) url(../svg/logo_zero_off.svg) center no-repeat;
	opacity: .7;
}

#zero:hover {
	background: rgba(255,255,255,0.6) url(../svg/logo_zero_on.svg) center no-repeat;
	opacity: .7;
}

#zero, #zero:hover {
	transition: background .6s ease-in-out;
	-webkit-transition: background .6s ease-in-out;
}

#zero, #zero:hover {
	display: block;
	width: 130px;
	height: 130px;
	float: left;
	background-size: 96% auto;
}

#nowplaying {
	height: 70px;
	width: 100%;
	font-size: 3.5em;
	font-weight: bold;
	overflow: hidden;
	color: #111;
}
#nowplaying a:link, #nowplaying a:visited {
	color: #111;
	opacity: .7;
}

#nowplaying a:link {
	background: url(../svg/icon_youtube_off.svg);

}

#nowplaying a:hover {
	background: url(../svg/icon_youtube_on.svg);
	color: #e62d27;
	opacity: 1;

}

#nowplaying a:link, #nowplaying a:hover {
	margin: 0 0 0 .2em;
	padding: 0 0 0 1.2em;
	text-decoration: none;
	background-size: 1em 1em;
	background-position: left;
	background-repeat: no-repeat;
	/* https://bugzilla.mozilla.org/show_bug.cgi?id=546052 */
	transition: color .4s ease-in-out, background .4s ease-in-out;
	-webkit-transition: color .4s ease-in-out, background .4s ease-in-out;
}

/************* tv|screen */

#bezel {
	z-index: 3;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #222 url(../svg/logo_zero_dark.svg) no-repeat center/60%;

	transition: left 0.5s ease;
	-webkit-transition: left 0.5s ease;
}

#bezel .screen {
	opacity: 0;
	transition: opacity .5s ease;
	-webkit-transition: opacity .5s ease;
}
#bezel, .screen {
	position: absolute;
	top: 0;
	left: 0;

	transition: left 0.5s ease;
	-webkit-transition: left 0.5s ease;
}
#bezel .screen.active {
	opacity: 1;
}
#bezel .screen.inactive {
	opacity: .5;
}