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

body {
	background-color: #000000;
	background-image: url(/images/banner/background.jpg);
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:link {
	color: #99CCFF;
	text-decoration: none;
}
a:visited {
	color: #99CCFF;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
a:active {
	color: #FF0000;
	text-decoration: none;
}
a img {
	border:none;
}
.headings {
	font-size: 14px;
	font-weight: bold;
}
.subheadings {
	font-weight: bold;
	font-size: 12px;
}
.smalltext {
	font-size: 9px;
}

/*BANNERS*/

.banner {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-bottom: 4px;
	height: 96px;
}
#webserialsbanner {
	background-image: url(/images/banner/webserialsbg.jpg);
	background-repeat: no-repeat;
}
#webserialsbanner .logo {
	position: absolute;
	left: 0px;
	top: 0px;
}
#webserialsbanner .navigation {
	font-size: 1px;
	position: absolute;
	height: 24px;
	left: 0px;
	top: 72px;
}
#webserialsbanner .shows {
	position: absolute;
	top: 0px;
	right: 0px;
}
#showsbanner {
	background-image: url(/images/banner/showsbg.jpg);
	background-repeat: no-repeat;
}
#showsbanner .showtitle {
	position: absolute;
	height: 72px;
	left: 216px;
	top: 0px;
}
#showsbanner .logo {
	position: absolute;
	left: 0px;
	top: 0px;
}
#showsbanner .navigation {
	font-size: 1px;
	position: absolute;
	height: 24px;
	left: 216px;
	top: 72px;
	text-align: center;
	width: 528px;
}
#showsbanner .shows {
	position: absolute;
	top: 0px;
	right: 0px;
}
#showsbanner #webserialsmenu {
	background-color: #330000;
	border: 1px solid #666666;
	position: absolute;
	left: 16px;
	top: 28px;
	font-weight: bold;
	width: 56px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 4px;
	padding-left: 12px;
	visibility: hidden;
}
#showsbanner #showsmenu {
	background-color: #330000;
	border: 1px solid #666666;
	position: absolute;
	top: 28px;
	font-weight: bold;
	width: 128px;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	text-align: center;
	right: 8px;
	visibility: hidden;
}

/* MAIN LAYOUT */

.main {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-bottom: 24px;
	min-height: 600px;
}
.leftsidebar {
	width: 144px;
	left: 0px;
	padding-top: 6px;
	padding-right: 6px;
	position: absolute;
}
.rightsidebar {
	width: 144px;
	right: 0px;
	padding-top: 6px;
	position: absolute;
}
.content {
	position: relative;
	left: 200px;
	width: 520px;
	right: 240px;
}

/* LEFT SIDEBAR */

.episodes img {
	border: 1px solid #333333;
}
.episodes a:link img {
	border: 1px solid #CCCCCC;
}
.episodes a:visited img {
	border: 1px solid #CCCCCC;
}
.episodes a:hover img {
	border: 1px solid #AA0000;
}
.episodes a:active img {
	border: 1px solid #AA0000;
}

.startwithepisode1 {
	padding-top: 2px;
}

.supplemental {
	width: 198px;
	height: 198px;
	top: 416px;
	left: 0px;
	border: 1px solid #333333;
	background-color:#111111;
	position: absolute;
}
.supplementalthumbnails img {
	border: 1px solid #222222;
}
.supplementalthumbnails a:link img {
	border: 1px solid #BBBBBB;
}
.supplementalthumbnails a:visited img {
	border: 1px solid #BBBBBB;
}
.supplementalthumbnails a:hover img {
	border: 1px solid #AA0000;
}
.supplementalthumbnails a:active img {
	border: 1px solid #AA0000;
}

/* CHAPTER MENU */

/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
	overflow: hidden;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab {
	border: 1px solid #CCCCCC;
	height: 22px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: hidden;
	height: 144px;
	margin-top: 3px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 1px;
}
.AccordionPanelContent .download {
	padding-top: 1px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	border: 1px solid #CC0000;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	border: 1px solid #AA0000;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	border: 1px solid #CC0000;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
	background-color: #000000;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #000000;
}
.inactiveTab {
	margin-bottom: 4px;
	border: 1px solid #444444;
}

/* RIGHT SIDEBAR */

.latestupdates {
	width: 144px;
	height: 305px;
	top: 96px;
	right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	position: absolute;
}
.latestupdates .titles img {
	padding-bottom: 2px;
}
.featured a:link img {
	border: 1px solid #444444;
	margin-bottom: 4px;
}
.featured a:visited img {
	border: 1px solid #444444;
	margin-bottom: 4px;
}
.featured a:hover img {
	border: 1px solid #AA0000;
	margin-bottom: 4px;
}
.featured a:active img {
	border: 1px solid #AA0000;
	margin-bottom: 4px;
}
.latestupdates table {
	margin-top: 2px;
	border-top: 1px solid #444444;
}
.advertisement {
	width: 200px;
	height: 200px;
	top: 416px;
	right: 0px;
	background-color: #333333;
	position: absolute;
}

/* EPISODES & VIDEOS */

.video {
	background-image: url(/images/universal/videobackground.png);
	background-repeat: no-repeat;
	width: 640px;
	height: 404px;
	margin-left: 150px;
	margin-right: 150px;
	padding: 10px;
	position: absolute;
	z-index: 50;
}
.controls-left {
	position: absolute;
	top: 400px;
	left: 51px;
	width: 100px;
}
.controls-center {
	position: absolute;
	top: 400px;
	right: 121px;
}
.controls-right {
	position: absolute;
	top: 400px;
	right: 51px;
	width: 70px;
}
.video-hd {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-bottom: 24px;
	z-index: 50;
}
.controls-hd {
	position: absolute;
	top: 570px;
	right: 0px;
	font-size: 11px;
	text-align: right;
}
.hd-footer {
	padding-left: 6px;
	padding-right: 6px;
	font-size: 9px;
	color: #333333;
}
#lights {
	background-color: #000000;
	position: absolute;
	height: 760px;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 25;
	visibility: hidden;
}
.lightsbanner {
	width: 960px;
	height: 96px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	top: -7600px;
}

/* CENTER ELEMENTS */

.comments {
	width: 526px;
	margin-right: 216px;
	margin-left: 216px;
	border: 1px solid #333333;
	position: absolute;
	top: 434px;
	height: 180px;
}
.comments-controls {
	background-image: url(/images/universal/gradientbackground.jpg);
	height: 16px;
	text-align: right;
	position: absolute;
	width: 446px;
	top: 0px;
	right: 0px;
}
.lowernav {
	position: relative;
	text-align: center;
	padding: 8px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #333333;
	height: 24px;
}

/* EPISODE INDEX */

.episodeindex {
	position: relative;
	left: 0px;
	width: 720px;
	right: 240px;
	color: #999999;
}
.episodeindex table {
	margin-left: 64px;
}
.episodeindex td {
	padding: 6px;
}
.episodeindex .headings {
	color: #FFFFFF;
	position: relative;
}
.episodeindex .subheadings {
	color: #FFFFFF;
}
.episodeindex a:link {
	color:#EEEEEE;
	text-decoration: none;
}
.episodeindex a:visited {
	color:#EEEEEE;
	text-decoration: none;
}
.episodeindex a:hover {
	color:#FF0000;
	text-decoration: none;
}
.episodeindex a:active {
	color:#FF0000;
	text-decoration: none;
}
.episodeindex a:link .subheadings {
	color:#99CCFF;
}
.episodeindex a:visited .subheadings {
	color:#99CCFF;
}
.episodeindex a:hover .subheadings {
	color:#FF0000;
}
.episodeindex a:active .subheadings {
	color:#FF0000;
}
.episodeindex img {
	border: 1px solid #333333;
}
.episodeindex a:link img {
	border: 1px solid #CCCCCC;
}
.episodeindex a:visited img {
	border: 1px solid #CCCCCC;
}
.episodeindex a:hover img {
	border: 1px solid #AA0000;
}
.episodeindex a:active img {
	border: 1px solid #AA0000;
}

/* COMIC */

.comic {
	position: relative;
	left: 128px;
	width: 640px;
	color: #999999;
}
.comic-controls {
	position: relative;
	left: 56px;
	margin-top: 8px;
	width: 528px;
}
.comic-comments {
	width: 526px;
	margin-left: 56px;
	border: 1px solid #333333;
	position: relative;
	height: 180px;
}
.comic-advertisement {
	width: 200px;
	height: 200px;
	left: 568px;
	background-color: #333333;
	position: absolute;
	top: -16px;
}