@charset "UTF-8";
/* CSS Document */

* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
* {
margin:0;
padding:0;
}

/* GENERAL STRUCTURE */
html, body {margin:0; padding:0; background:#000}
body {overflow:auto}

#wrapper {position:absolute; display:block; top:0px; left:50%; width:1314px; margin-left:-660px; background: url(../imgs/bg.jpg) top no-repeat #000}
#wrapper2 {position:absolute; display:block; top:0px; left:50%; width:1314px; margin-left:-660px; background: url(../imgs/bg2.jpg) top no-repeat #000}

#content {position:relative; display:block; width:663px; height:auto; margin:0 auto; padding:0}
.middle {position:relative; display:block; float:left; width:643px; height:auto; margin:15px auto 0; padding:15px 20px; background:url(../imgs/shade1x1.png) repeat}

/* FONTS */
h1, h2, h3, p, span {font-family:helvetica, arial, sans-serif; color:#fff }
h2 {font-family:helvetica, arial, sans-serif; font-size:1.25em; color:#99ccff; letter-spacing:2px; font-weight:bold; text-transform:uppercase}
h3 {font-size:1.15em; font-family:helvetica, arial, sans-serif; margin-bottom:8px; letter-spacing:1px }
.entry h3 span {font-family:helvetica, arial, sans-serif; font-size:.75em; font-weight:normal; letter-spacing:normal; display:block}

p { font-size:.85em; line-height:160%; color:#999; margin-bottom:1em }
ul {padding:0; margin:0}
li { font-size:.85em; font-family:helvetica, arial, sans-serif; color:#999}
em {font-style:italic}
strong {font-weight:bold; font-size:1.15em}
a {color: #cccc99; text-decoration:none}

/* HEADER */

#header {position:relative; width:663px; height:295px; display:block}

#logo {position:relative; top:40px; left:95px; width:438px; height:184px; display:block}

/* NAVIGATION */

#nav {position:absolute; bottom:5px; left:10px; width:670px; margin:0; padding:0: background:none}

#nav li {float:left; list-style-type:none; display:inline}
#nav li a {display:block; height:29px; top:0; text-decoration:none; text-indent:-9999px; text-decoration:none; outline:none; border:0}

li#episodes a, li#about a, li#characters a, li#follow a, li#extras a, li#press a {background:url(../imgs/nav.png) repeat scroll 0 0; -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding;}

li#episodes a { background-position:0 0; left:0; width:123px;}
li#about a {background-position:-125px 0; left:125px ; width:88px;}
li#characters a {background-position:-213px 0; left:250px ; width:155px}
li#extras a {background-position:-368px 0; left:406px ; width:102px}
li#press a {background-position:-470px 0; left:491px ; width:84px}
li#follow a {background-position:-554px 0; left:554px ; width:112px}

li#episodes a:hover, li#episodes a:active {background-position:0px -30px}
body#Episodes li#episodes a {background-position:0px -30px}

li#about a:hover, li#about a:active {background-position:-123px -30px}
body#About li#about a {background-position:-123px -30px}

li#characters a:hover, li#characters a:active {background-position:-213px -30px}
body#Characters li#characters a {background-position:-213px -30px}

li#extras a:hover, li#extras a:active {background-position:-368px -30px}
body#Extras li#extras a {background-position:-368px -30px}

li#press a:hover, li#press a:active {background-position:-470px -30px}
body#Press li#press a {background-position:-470px -30px}

li#follow a:hover, li#follow a:active {background-position:-554px -30px}
body#Follow li#follow a {background-position:-554px -30px}

/* SUBNAV */

#subnav { position:relative; width:640px; font-size:1.05em; letter-spacing:normal; list-style:none; display: inline-block; margin:10px 0 15px 10px; padding:0}
#subnav li {float:left; display:block; margin:0 30px 0 0}
#subnav li a { color: #cccc99 }
#subnav li a:hover, #subnav li a:active { color: #CCCC99 }
.selected {font-weight:bold; color: #CCCC99; outline:none; letter-spacing:.025em; font-size:1.25em}


/* VIDEO EMBED */

#video {position:relative; float:left; width:640px; height:auto; margin:0 auto; background:none; display:block}
#movie {position:relative; float:left; width:640px; height:480px; margin:0 auto; background:none; display:block}
#video embed {position:absolute; z-index:200}
#movie embed {position:absolute; z-index:200}

#player {position:relative; float:left; width:640px; height:480px; margin:0 auto; background:none; display:block}

.info {position:relative; color:#fff}

/* FOOTER */
#footer {position:relative; float:left; width:640px; height:auto; margin:15px 0 50px 0; overflow:hidden; text-align:center; vertical-align:middle; clear:both}
#footer p {display:block; text-decoration:none; outline:none; border:0px; color:#999}
#footer p a {text-decoration:none; color:#CCC}
#footer p a:hover, #footer p a:active {color:#666}

#sjrlogo a {display:block; background:url(../imgs/sjrLogo.jpg); background-position:0 0; width:35px; height:35px}
#sjrlogo a:hover, #sjrlogo a:active { }

/* LIGHTS OUT */

#dimmer {position:absolute; top:-10px; right:-20px; width:150px; height:4px; z-index:300; margin:0 auto; text-align:right}
.lightSwitcher { font-family:helvetica, arial, sans-serif; font-size:8px; letter-spacing:1px; z-index:101; background-repeat:no-repeat; outline:none; text-decoration:none; color:#fff; background:transparent; padding:5px}
.lightSwitcher:hover {text-decoration:underline;}
#shadow {background: url(../imgs/shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}
.turnedOff {color:#999}

/* CHARACTER GALLERY */

.entry { display:block; position:relative; width:640px; height:auto; clear:both; margin-bottom:25px }
.quote {font-size:1em; font-family:goudy old style, georgia, serif; color:#CCC; font-style:italic; background:#333}

.mug { display:block; float:right; margin:0 0 10px 20px; border:#fff 3px solid }

/* ABOUT */

.photo {float:right; width:375px; height:auto; margin:5px 0 5px 15px; width:auto; text-align:center; display:block; clear:both}
.photo img, .fltright img, .fltleft img {margin-bottom:8px; border:#fff 3px solid}
.caption {font-size:10px; text-align:left; width:375px}

/* FOLLOW */

form {width:225px; margin:0 }
form p {width:225px; font-size:.75em; text-align:left}

input:hover {border-color:#999}

.button input {font-size:.85em}


/* PRESS */

#articles {margin-left:50px}
#articles li {position:relative; display:block; height:65px; padding:15px 0; width:auto; clear:right; font-size:1.25em; font-style:italic; font-family: goudy old style, georgia, garamond, serif; font-weight:lighter}
#articles li a {display:block; padding-top:20px}
#articles li img {border:4px solid #fff}
.pressLogos {display:block; float:left; margin-right:30px }


/* EXTRAS */

.fltright {display:block; position:relative; float:right; margin:0 0 10px 10px}
.fltleft {display:block; position:relative; float:left; margin:5px 15px 10px 0 }

#credits {text-align:center}
#cast li {line-height:2em}
#cast em {font-size:1.1em}

/* CLEARING DIV */

.clear {clear:both; height:1px}

/* BLIP RSS FEED PLAYER */
#displayArea {
	width: 640px;
	height: 575px; 
	padding: 0;
	background: transparent;
}


.load {
  background: transparent url('../imgs/ajax-loader.gif') bottom left no-repeat;
  height: 15px;
  width: 45px;
  margin: 20px auto;
}

#show {
  float: left; position:relative; 
  width: 640px; height:480px;
  margin-right: 15px;
  border: 1px solid black;
}

#showTitle {
text-transform:none;
font-weight:normal;
}

#notesArea { 
	float: left; position:relative;
	width: 640px;
	height: 75px;
	background: transparent;
	padding: 10px;
}
#notes {
	position:relative;
	padding: 1em;
	height: auto;
	width: 600px;
	overflow: auto;
	font-size: 0.75em;
	line-height:1.75em
}

#otherShowsWrapper {
	float:left;
	position:relative;
  	width: 640px; 
	height: 100px;
	padding: 10px; 
	margin-bottom: 1em;
	background: transparent;
}
#otherShowsArea {
	position:relative;
  	width: 640px;
	height: 100px;	
	overflow: auto;
}

#otherShows {
	width: 640px;
	height: 100px;
	overflow:hidden;
}

#otherShows a {
  border: 0;
  margin-bottom: 0;
  text-decoration: none;
}

#otherShows img {
  border: 1px solid black;
  height: 66px;
}

.oldShow {
  margin-left: 8px;
  margin-right: 8px;
}

.thumbnail {
  border: 0;
}

.error {
  text-align: center;
  color: #9F2727;
  height: 260px;
}

#devInfo {
  width: 100%;
  padding: 1em;
  border: 2px solid black;
}

/* Infinite Carousel */

input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; } 

.infiniteCarousel {
  position: relative; display:block; float:left;
  width: 625px;
  height:160px;
  margin:0 0 0 15px;
}

.infiniteCarousel .wrapper {
  width: 525px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul a img {
  border: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display:block;
  float:left; position:relative;
  padding: 0 10px;
  height: 141px;
  width: 250px;
}

#comingSoon {
position:absolute; text-align:right; 
bottom: 7px; right:25px; color:#fff;
font-weight:bold; z-index:250; font-size:1.35em}

.infiniteCarousel ul li a img {
  display:block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: url(../imgs/arrow.png) no-repeat 0 0;
  text-indent: -9999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;