@charset "utf-8";

#cursor:hover > .zt {opacity: 1; visibility: visible;}
#cursor:hover > #select {opacity: 1; visibility: visible;}
#cursor:hover > #select2 {opacity: 1; visibility: visible;}
#cursor:hover > .tz  {opacity: 0; visibility: hidden;}

#zones {transition: all 0.2s linear; -webkit-transition: all 0.2s linear;
opacity: 0;
z-index: 2;
visibility: hidden;
position: fixed;
left: 0; right: 0; bottom: 0; top: 0;
width: 100%;
height: 100%;}

html, body, #cursor {margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
html {background-color: #000;}

#episodes {overflow-y: auto;}

#slidebg {background: url(../images/main/starfield.jpg) 0 0 / auto repeat; 
	animation: slider 8s linear infinite; -webkit-animation: slider 8s linear infinite;
	height: 100%; width: 100%;
	left: 0; top: 0;
	position: fixed;
	z-index: -2;}

@keyframes slider {from {background-position: 0 0;}
	to {background-position: 0 250px;}}

@-webkit-keyframes slider {from {background-position: 0 0;}
	to {background-position: 0 250px;}}	
	
#slidebg2 {background: url(../images/main/starsblink.gif) 0 0 / auto repeat;
	animation: slider 14s linear infinite; -webkit-animation: slider 14s linear infinite;
	height: 100%; width: 100%;
	left: 0; top: 0;
	position: fixed;
	z-index: -1;}

body {background: none;}

h1 {text-align: center; font: 18px impact, arial narrow, "Trebuchet MS"; text-transform: uppercase;}

#glow {color: #ff0;
background-color: #000; 
border: double #fff; border-width: 3px 0 3px 0;
padding: 5px 0;
font: bold 20px "Trebuchet MS", arial narrow, impact;
-webkit-box-shadow: 0 0 5px 3px #FFF; box-shadow: 0 0 5px 3px #FFF;
text-shadow: 0 0 20px #ff0;
text-transform: uppercase;}

.tz, .zt {margin: auto;
position: fixed; 
top: 0; bottom: 0; left: 0; right: 0;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear;}

.float {-webkit-animation: float 2s ease-in-out infinite; animation: float 3s ease-in-out infinite;}

.rotate, #tzonespiral {background: #fff url(../images/main/spiralfinal.png) center / cover no-repeat;
position: fixed;
height: 150px; width: 150px;
border-radius: 100%; -webkit-border-radius: 100%;
-webkit-box-shadow: 0 0 18px 10px #fff;
box-shadow: 0 0 18px 10px #fff;
opacity: 0.2;
-webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite;
transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
z-index: -1;}

#tzonespiral {background: #f00 url(../images/main/spiralfinal-r.png) center / cover no-repeat;
-webkit-box-shadow: 0 0 18px 10px #f00;
box-shadow: 0 0 18px 10px #f00;
z-index: -1;}

#dallasspiral {animation-delay: 0.3s; -webkit-animation-delay: 0.3s;}
#wtrspiral {animation-delay: 1.3s; -webkit-animation-delay: 1.3s;}
#cfspiral {animation-delay: 1.6s; -webkit-animation-delay: 1.6s;}
#bhspiral {animation-delay: 2.0s; -webkit-animation-delay: 2.0s;}
#dfspiral {animation-delay: 2.4s; -webkit-animation-delay: 2.4s;}
#jsbspiral {animation-delay: 2.8s; -webkit-animation-delay: 2.8s;}
#adderspiral {animation-delay: 1.9s; -webkit-animation-delay: 1.9s;}
#tzonespiral {animation-delay: 0.8s; -webkit-animation-delay: 0.8s;}

#tzspiral {top: 0; bottom: 0; left: 0; right: 0;
height: 500px; width: 500px;
margin: auto;
z-index: 1;
opacity: 0.2;
-webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite;}

.zt {height: 150px; width: 150px;
position: absolute;
visibility: hidden;
opacity: 0;}

.zt:hover > .rotate {opacity: 0.4; filter: grayscale(0);}
.zt:hover > #tzonespiral {opacity: 0.4; filter: grayscale(0);}
.zt:hover > .zoneimage {opacity: 1; filter: grayscale(0);}
.zt:hover > .zonetext {opacity: 1; visibility: visible;}

.zonetext {opacity: 0; visibility: hidden;
transition: all 0.4s linear; -webkit-transition: all 0.4s linear;
text-align: center;
font: bold 15px "Trebuchet MS", arial narrow, impact;
color: #fff;
padding: 2px; 
position: absolute;
margin: auto;}

#select, #select2 {transition: all 0.4s linear; -webkit-transition: all 0.4s linear;
text-align: center;
font: bold 25px "Trebuchet MS", arial narrow, impact;
color: #fff;
padding: 2px; 
position: absolute;
margin: auto; 
top: 10px; left: 0; right: 0;
text-shadow: 0 0 20px #FFF;
text-transform: uppercase;
opacity: 0;
visibility: hidden;}

#select2 {animation-delay: 0.3s; -webkit-animation-delay: 0.3s;
top: 50px; left: 0; right: 0;
font: bold 10px "Trebuchet MS", arial narrow, impact;}

.up {top: 0; left: 0; right: 0; text-transform: uppercase; text-shadow: 0 0 20px #FFF;}
.down {font: 10px Tahoma, Geneva, sans-serif; width: 100%; top: 130px; left: 0; right: 0; text-align: center;}
.lowercase {text-transform: lowercase;}

#spiral {width: inherit; height: inherit;
position: absolute;
cursor: pointer;
opacity: 0.1;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;}

.zoneimage {z-index: -1; 
position: absolute; 
opacity: 0.5; 
top: 0; left: 0; bottom: 0; right: 0; 
margin: auto; 
filter: grayscale(1);
transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;}

#cf {animation: none; -webkit-animation: none;}
#dallas {animation: none; -webkit-animation: none;}
#wtr {animation: none; -webkit-animation: none;}
#bh {animation: none; -webkit-animation: none;}
#df {animation: none; -webkit-animation: none;}
#jsb {animation: none; -webkit-animation: none;}
#adder {animation: none; -webkit-animation: none;}
#tzdoor {animation: none; -webkit-animation: none;}

#dallaszone {margin-top: 3%; margin-left: 1.5%; animation-delay: 0s; -webkit-animation-delay: 0s;}
#cfzone {margin-bottom: 6%; margin-left: 3%; animation-delay: 1.4s; -webkit-animation-delay: 1.4s;}
#wtrzone {left: -55%; right: 0; bottom: 0; margin-top: 0.5%; animation-delay: 0.7s; -webkit-animation-delay: 0.7s;}
#bhzone {margin-right: 1.5%; left: 0; bottom: 6%; top: 0; animation-delay: 1.0s; -webkit-animation-delay: 1.0s;}
#dfzone {right: 0; left: 33%; bottom: 0; margin-top: 4%; animation-delay: 1.8s; -webkit-animation-delay: 1.8s;}
#jsbzone {right: 0; left: -28%; bottom: 0; margin-top: 2%; animation-delay: 2.3s; -webkit-animation-delay: 2.3s;}
#adderzone {right: 0; left: -42%; bottom: 0; margin-bottom: 5%; animation-delay: 2.0s; -webkit-animation-delay: 2.0s;}
#laughzone {right: 0; left: 60%; bottom: 0; margin-bottom: 5%; animation-delay: 1.1s; -webkit-animation-delay: 1.1s;}
#tzzone {right: 0; left: 5%; margin-bottom: 120px; top: 0; animation-delay: 0.8s; -webkit-animation-delay: 0.8s;}

.flex {display: -webkit-flex;  display: flex; 
-webkit-flex-wrap: wrap;  flex-wrap: wrap;
-webkit-justify-content: center; justify-content: center; 
-webkit-align-items: center; align-items: center;}

#toptxt {margin-top: 0; animation-delay: 1.0s; -webkit-animation-delay: 1.0s;}
#bottomtxt {margin-bottom: 0; animation-delay: 0.5s; -webkit-animation-delay: 0.5s;}

#logotop {top: -223px; -webkit-animation-delay: 0.2s; animation-delay: 0.3s;}
#logobottom {bottom: -228px; -webkit-animation-delay: 0.8s; animation-delay: 0.8s;}

#window1 {bottom: -130px; left: -410px; -webkit-animation-delay: 0s; animation-delay: 0s;}
#window2 {bottom: -230px; left: -440px; -webkit-animation-delay: 0.8s; animation-delay: 0.8s;}
#window3 {bottom: -168px; left: -338px; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
#emc2 {top: -320px; left: -390px; -webkit-animation-delay: 2.3s; animation-delay: 2.3s;}
#fall {top: -128px; left: 387px; -webkit-animation-delay: 2.8s; animation-delay: 2.8s;}
#eyeleft {top: -474px; left: -27px; -webkit-animation-delay: 1s; animation-delay: 1s;}
#eyeright {top: -474px; left: 87px; -webkit-animation-delay: 2s; animation-delay: 2s;}
#clock {bottom: -346px; left: 335px; -webkit-animation-delay: 1.6s; animation-delay: 1.6s;}
#cube {bottom: -460px; left: -97px; -webkit-animation-delay: 2.5s; animation-delay: 2.5s;}

#logo {-webkit-animation: none; animation: none;}

@keyframes float {from {transform:translate(0, 0);}
    50% {transform:translate(0, 25px);}
    to {transform:translate(0, -0);}}

@-webkit-keyframes float {from {-webkit-transform:translate(0, 0);}
    50% {-webkit-transform:translate(0, 25px);}
    to {-webkit-transform:translate(0, -0);}}

@keyframes rotate {100% {transform:rotate(360deg);}}
@-webkit-keyframes rotate {100% {-webkit-transform:rotate(360deg);}}

.regheader {color: #fff; padding: 5px; position: relative; clear: both; margin: 0 auto; width: 30%; font: bold 16px sans-serif, arial, helvetica; text-align: center; text-decoration: none; text-transform: uppercase; background: #333; border: none;}

label {display: block; width: 500px; overflow: hidden;
margin: 12px auto;
text-shadow: 0 0 20px #FFF;
border: 3px double #fff;
background-color: #000;
-webkit-box-shadow: 0 0 5px 3px #FFF; box-shadow: 0 0 5px 3px #FFF;}

label input {display: none;}

.sample {height: 25px;
  width: 100%;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s linear; -webkit-transition: all 0.2s linear;}
  
.section {margin: 0 auto;
  position: relative;
  height: 25px;
  width: 100%;
  font: bold 20px "Trebuchet MS", arial narrow, impact;
  text-align: center;
  background: none;
  transition: all 0.3s linear; -webkit-transition: all 0.3s linear;}
  
.sample:hover > .section {color: #f00; text-shadow: 0 0 20px #F00;}  

input:checked ~ .sample {height: auto;}
input:checked ~ .sample > .section {color: #f00; text-shadow: 0 0 20px #F00;}

#rs {display: block; margin: 0 auto; position: relative;}

blockquote {margin: 0 auto 10px;
font: 10px tahoma, geneva, sans-serif;
background-color: #000; 
text-align: center;
width: 500px;
border-radius: 10px; -webkit-border-radius: 10px;
padding: 3px 0;
-webkit-box-shadow: 0 0 5px 3px #FFF; box-shadow: 0 0 5px 3px #FFF;}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  line-height: 1.42857143;
  color: #fff;
  font-style: italic;}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: '\2014 \00A0';
}

blockquote:before,
blockquote:after {
  content: "";
}

header {font-weight: bold; color: red; text-decoration: underline;}

#ooclist {margin: 0; padding: 5px 10px 5px 25px;}
.point {padding: 0 5px;}
.reg-txt {font: 10px tahoma, geneva, sans-serif; padding: 0 5px; color: #FFF; text-align: justify;}

.red {font-weight: bold; color: #F00; text-shadow: 0 0 20px #F00;}
.green {font-weight: bold; color: #0F0; text-shadow: 0 0 20px #0F0;}
.center {text-align: center;}

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:3px solid #fff;overflow:hidden;height:100px; border-radius: 20px; -webkit-border-radius: 20px; -webkit-box-shadow: 0 0 20px 6px #FFF; box-shadow: 0 0 20px 6px #FFF;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#000;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:auto; line-height:26px; text-align: center;}
#sb-title-inner{font: 20px impact, sans-serif, arial; text-transform: uppercase; color: #FFa800; text-shadow: #000 -1px 0, #000 0 1px, #000 1px 0, #000 0 -1px, #000 0 0 7px; filter: dropshadow(color=#000000, offx=1, offy=1);}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png); margin-top: 5px;}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
/*.sb-counter-current{text-decoration:underline;}*/
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
#sb-info,#sb-info-inner{height: 56px; background: transparent; width: auto; margin-top: -5px;}
#sb-caption {clear: both; font: bold 12px sans-serif, veranda, arial; height:auto;line-height:12px; text-align: left; color:#fff; text-shadow: #000 -1px 0, #000 0 1, #000 1px 0, #000 0 -1px, #000 0 0 7px; filter: dropshadow(color=#000000, offx=1, offy=1);}

#sb-title, #sb-title-inner {display: none;}