zoff/static/style.css

body{background:#000; 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%);}
.nochanvcent{position: relative; top: 46%; -webkit-transform: translateY(-54%);}
/*#change{ display: table-cell; vertical-align: middle;}*/
::-webkit-input-placeholder{color: #FEFEFE;}
::-moz-input-placeholder{color: #FEFEFE;}
::input-placeholder{color: #FEFEFE;}
.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;
    background-color: rgba(255, 255, 255, 0.22); 
}
.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; 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:rgba(254, 254, 254, 0.42); text-decoration: none;}.footer a:hover {color:#ed207f;} 
.footer{font-size: 15px;  position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; margin-top: 0px; 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: #C4C4C4 !important;font-size: 18px;}
.channel:hover{color:#ed207f !important;}
.bgimage{ 
    background-size: 180%; background-repeat: no-repeat; background-position: center center; background-color: #000; background-image: url(bg.jpg);
    -webkit-filter: blur(50px) brightness(0.8); -moz-filter:blur(50px) brightness(0.8); -ms-filter:blur(50px) brightness(0.8); -o-filter: blur(50px) brightness(0.8); filter: blur(50px) brightness(0.8);
    position: absolute; top: 0px; left: 0; width: 100%; height: 100%;
}


.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; -webkit-filter: brightness(1.6);margin-top: -65px; margin-bottom: 28px; pointer-events:none;}
#buttons:hover{background-color: none !important;}
.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0; -webkit-filter: brightness(0.6); pointer-events:auto;}
.skip:hover{ -webkit-filter: brightness(0.3);}

#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; border-radius: 3px;}
.result:hover{background-color: rgba(0,0,0,0.2);}
#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{width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top;  height: calc(87% - 183px);}
.lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2);}
.lthumb{height: 70px; margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
.ltitle{ color:#FFF; overflow: hidden; height: 40px; }

.votes{position: relative; margin-top: -0-5em; font-size: 18px; color:#fff;}
#plus, #minus {text-decoration: none; color:#eee; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
#plus:hover,#minus:hover{color:#000;}
#del{float: right; font-weight: bold; margin-right: 20px; margin-top:0px; border-radius: 2px; display:none;}
#del:hover{color:red;}

#player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
#playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.nomargin{padding: 0;margin:0;}

#adminForm{text-align:left;}
#adminForm label{display: block; cursor: pointer;}
.adminBox{float:right;}
#adminPanel{color:white; height:180px; padding: 10px; overflow:hidden; background-color: rgba(0,0,0,0.2);}
.hiddenAdmin{padding:0 !important; margin:0 !important; height: 0 !important;}
.button{background-color: rgba(255,255,255,0.2); border-radius: 4px; border: none;color: white;padding: 5px 15px; margin-top: 15px; transition: all 0.1s ease-in-out;}
.button:hover{background-color: rgba(255,255,255,0.4); }



@-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:rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadecol{from{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}
@-webkit-keyframes fadewrong{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadewrong{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}


/* imports */
@import url("mobile.css");
/*@import url("toggler.css");*/