@font-face {
	font-family: 'DarkMatter';
	src: url('/fonts/DarkMatter.ttf') format('truetype');
}

body {
	background-color:black;
	width:100vw;
	height:100vh;
	padding:0;
	margin:0;
	overflow-y:hidden;
}

#tvcont {
	position:absolute;
	left:0;
	width:100vw;
	height:100vh;
	display: flex;
}
#tvframe {
	position:absolute;
	width:90%;
	height:86%;
	margin:4%;
}
#noise {
	background-image:url('../images/tv/noise.gif');
	position:absolute;
	width:90%;
	height:86%;
	margin:4%;
}
#tvright {
	z-index:1;
	position:relative;
	height:100%;
	float:right;
	flex:0 0 auto;
}
#tvright #tvcontrols{
	height:100%;
	right:0;
}
#tvright #tvbutton1{
	z-index:1;
	position:absolute;
	width:100%;
	top:9.5%;
	right:3%;
	cursor:pointer;
}
#tvright #tvbutton2{
	z-index:1;
	position:absolute;
	width:100%;
	top:34.2%;
	right:3%;
	cursor:pointer;
}
.clockrotate { animation: fullRotate 4s linear infinite; }
@keyframes fullRotate {
    from {
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);}
    to {
	-ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);}
}
#tvleft {
	position:relative;
	z-index: 20;
	flex:2 1 auto;
	float:left;
	height:100%;
	min-width:716px;
}
#tvleft img {
	position:absolute;
	height:100%;
	width:100%;
}
#mixcont {
	position:absolute;
	left:100vw;
	width:200vw;
	height:100vh;
	background-image: url("../images/herbe.gif");
	background-repeat: repeat-x;
	background-position: left bottom;
}
#covercont {
	position:absolute;
	overflow: hidden;
	width:15%;
	min-width:600px;
	right:5%;
	/* top:30%; */
	bottom:10%;
    -webkit-transition: 1s ease-out;
    transition: 1s ease-out;
	height: 60vh;
}
#covercont.show {
	/* top:40%; */
	bottom:40px;
}
#covercont.hide {
	/* top:100vh; */
	bottom:-150vh;
}
.cover {
	/*! width:5vw; */
	/*! height:5vw; */
	margin:15px;
	flex: 1 1 40%;
	cursor:pointer;
	box-sizing: border-box;
	width: 40%;
}
.cover:hover {
	/*! width:102px; */
	/*! height:102px; */
	/*! margin:12px; */
	transform: scale(1.1);
}
.cover.active {
	/*! width:116px; */
	/*! height:116px; */
	/*! margin:5px; */
	border: 6px solid #fff;
}
#player {
	padding:5px;
	position:absolute;
	right:5%;
	top:10%;
	width:15%;
	min-width:360px;
	background-color:pink;
    -webkit-transition: 1s ease-out;
    transition: 1s ease-out;
	opacity:0;
}
#player.show {
	top:10%;
}
#player.hide {
	top:-50%;
}
#player audio {
	opacity:0.5;
	width:100%;
	/* height:auto; */
	display:block;
}
#playertitle {
	display:block;
	padding:5px;
	font-family: 'DarkMatter';
	font-size:24px;
	color:white;
}
#pltable{
	display:-ms-flexbox;
	display:flex;
	width: 100%;
}
#dlmix img{
	margin:4px;
	height:40px;
}
#figure {
	position:absolute;
	height:70%;
	right:25%;
	bottom:0;
}
#square {
	position:absolute;
	height:45%;
	right:28%;
	top:0;
}
#home {
	position:fixed;
	z-index: 50;
	top:20px;
	left:20px;
}
#home img{
	height:100px;
}

#coverflow{
	overflow: scroll;
    display: flex;
    /*! flex-direction: row; */
	padding: 5px;
    align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
}

@media only screen and (max-height:900px){
	
	#home {
		top:6px;
		left:6px;
	}
	#home img{
		height:60px;
	}
	#tvleft {
		min-width:90vw;
	}
	
	#mixcont {
		background-size: 100% 100vh;
	}
	#figure {
		right:30%;
	}
	#covercont {
		width:50vw;
		min-width:50vw;
		right: 20px;
		bottom: 20px;
	}
	#covercont.show {
		bottom:20px;
	}
	#player {
		right:20px;
		top:20px;
		width:50vw;
		min-width:50vw;
	}
	.cover {
		flex: 1 1 96px;
		height: 140px;
		width: auto;
		margin: 10px;
	}
	.cover:hover {
		margin: 7px;
		height: 146px;
		width: 146px;
	}
	.cover.active {
		margin: 0;
		height: 160px;
		width: 160px;
		box-shadow: 0 0 2px white;
	}
}

#ls-only-background{
	background-image: linear-gradient(0,black,#333333); 
	display: none;
}
#ls-only-background.active{
	display: block;
}
#ls-only-icon{
	position: absolute;
	width:30vw;
	height: 30vh;
	border:4px solid white;
	border-radius: 10px;
	transform-origin: center;
	transform:translate(-50%,-50%);
	left:50%;top:70%;
	animation: landscape 2s ease-in-out infinite;
}
@keyframes landscape {
	0% {transform:translate(-50%,-50%) rotate(0deg);}
	100% {transform:translate(-50%,-50%) rotate(90deg);}
}
#ls-only-text{
	position: absolute;
	transform:translate(-50%,-50%);
	left:50%;top:30%;
	font-size: 5vh;
    color: white;
    text-align: center;
}