body{background:#FFF; margin:0;}
.top{
    font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center; 
    animation: fadein .5s; -moz-animation: fadein .5s; -webkit-animation: fadein .5s; -o-animation: fadein .5s;
}
.top, .top a{color:#ed207f; text-decoration: none;}
.vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);}


.innbox, .innbox a{
	width:90%; height: 50px; border-radius:7px; border:none; font-family: 'Open Sans', sans-serif; font-size: 25px; margin-bottom: 20px;
	color:#f15; text-align: center;-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s; transition:background 1s;
}
.success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;}
.error{animation: fadewrong 1.5s; -moz-animation: fadewrong 1.5s; -webkit-animation: fadewrong 1.5s; -o-animation: fadewrong 1.5s;}
.small{font-size: 5vw; color:#E2E2E2; display:block !important; text-decoration: none; }
/*.small:hover{color: #CCC;}*/
.big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
.footer a{color:#696969; text-decoration: none;}.footer a:hover {color:#ed207f;} 
.footer{font-size: 15px; position:absolute; width:99%;color:#c0c0c0 !important; margin-top: 0; word-spacing: 2px;}
.bottom{bottom:10px;}
#channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;}
.channel{padding: 7px; display: inline-block; font-weight: bold; color: #646464 !important;font-size: 18px;}
.channel:hover{color:#ed207f !important;}


.anim{transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -webkit-transition: all .20s ease-in-out;}
.chan{color:#CCC; cursor:pointer; display: inline;}
.bigchan{color: #ed207f; font-size: 10vw; padding-top: 25%;}

#buttons{cursor: default; text-align: right;}
.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0;}
.skip:hover{ -webkit-filter: brightness(0.6);}

#results{position:absolute; background-color: white; font-size: 14px; width:90%; margin-left: 5%; margin-top:-5px; z-index: 2; font-family: sans-serif;}
.result{border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 55px; cursor: pointer;}
.result:hover{background-color: #DDD;}
#title{ padding-left: 20%; padding-top:10px; max-width: 76%; color:#ed207f; height: 36px;}
.result_info{color:#888; font-size: 12px; float:right;}
.thumb{height: 40px; width:80px; float: left;}

.main{width:90%; margin: 0 auto 0 auto;}
.playlist{background-color: #DADADA; width:20%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; /*overflow: hidden;*/ height: calc(87% - 183px); border-bottom:solid #c9c9c9 4px;}
.lresult{padding:0; height: 60px; border-top: none; cursor: default;  background-color: #DADADA;}
.lthumb{height: 60px; margin-right: 10px; display: inline;}
.ltitle{ color:#ed207f; overflow: hidden; height: 60px; }
#result:nth-child(odd){background-color: #EEE;}

.votes{float: right; position: relative; margin-top: -1.4em; padding:0 3 0 4; background-color: rgba(50,50,50,0.45); color:#000; border-radius: 1px;}
#plus, #minus {text-decoration: none; color:white; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
#plus:hover,#minus:hover{background-color: #111;}

#player{height: 68%; height: calc(87% - 183px); width: 78%; border-radius: 3px; border-bottom:solid #c9c9c9 4px;}
#adminForm{text-align:left;}
.adminBox{float:right;}
#adminPanel{color:black;background-color:#EEE;position:absolute;z-index:1;width:18%; margin-top: -1px; padding-top: 15px; display: none;}
.lowOpacity{opacity:0.5; -webkit-filter: blur(5px);}
#playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.nomargin{padding: 0;margin:0;}

@media (max-width: 1000px) {
    #player{width: 100%; height:45%; margin-bottom: 20px;}
    .playlist{width: 100%;}
    .lresult{font-size: 40px; height: 90px; font-size: 50px;}
    .votes{font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
    .lthumb{height: 90px;}
    #plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
    #plus{border-right:solid 3px rgb(172, 172, 172);}
    #search{text-align: left; height: 100px; font-size: 40px; border: solid 2px #ccc;}
    #buttons{text-align: center; height: 80px;}
    .skip{height: 50px;}
    .vcent{
   	 	top: inherit; 
   	 	-webkit-transform: translateY(0%);
	}
	#title{
		font-size: 30px;
		font-weight: bold;
		overflow: hidden;
		padding-left: 2%;
		padding-top: 0;
	}
	.footer{font-size: 40px; margin-top: 150px;}
}

@-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadecol{from {background-color:#00FF00;}to{background-color: #FFF;}}@keyframes fadecol{background-color: #00FF00;}to{background-color: #FFF;}}@-moz-keyframes fadecol{from{background-color: #00FF00;}to{background-color: #FFF;}}@-o-keyframes fadecol{background-color: #00FF00;}to{background-color: #FFF;}}
@-webkit-keyframes fadewrong{from {background-color:#FF0000;}to{background-color: #FFF;}}@keyframes fadewrong{background-color: #FF0000;}to{background-color: #FFF;}}@-moz-keyframes fadewrong{from{background-color: #FF0000;}to{background-color: #FFF;}}@-o-keyframes fadewrong{background-color: #FF0000;}to{background-color: #FFF;}}