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

/* GLOBAL STYLES */

* {border:0;margin:0;padding:0;}

body, html {
	width: 100%;
	margin: 0px; 
	padding: 0px;
}

body {
	background-color:#000;
	text-align: center;
	font-size:14px;
	color: #666666;
	font-family: museo-sans-rounded, sans-serif;
	font-weight: 500;
	font-style: normal;
}

p {
	margin: 0px 0px 2em 0px;
	
	
}

a:link {
	color: #e55812;
	text-decoration:none;
}

a:active {
	color: #e55812;
	text-decoration: underline;}

a:visited {
	color: #cf4c10;
	text-decoration:none;
}

a:hover {
	color: #e55812;
	text-decoration: underline;
}

a img {
	border: 0;
}



  iframe {
	width: 376px;
	height: 212px;
	}
	


h1 {
	font-size:26px;
	line-height: 35px;
	margin:40px auto;
	text-transform: uppercase;
	color:#fff;
	font-weight: 800;
	max-width: 376px;
}

h2 {
	font-size:22px;
	font-weight: 800;
	max-width: 340px;
	margin:auto;
	margin-bottom:20px;
}
h3 {
	font-size:18px;
	font-weight: 800;
	color:#fff;
}




/* CREATING THE STICKY FOOTER */


#sitewrap {
	height:100%;
}

body > #sitewrap {
	height: auto; 
	min-height: 100%;
}

#centerpage {
}

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */





/* CENTERING THE PAGE */

#sitewrap {
	width: 100%;
    margin: 0px;
	padding: 0px;
	/* overflow:hidden; */
	
}


#centerpage {
	max-width: 100%;
	margin: auto;
	/* overflow: hidden; */
}



/* Source Code for the navbar came from here: http://css-tricks.com/examples/SimplejQueryDropdowns/ */
/* You need some css below and some jquery */
/* Styles for your navigation */
/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #000000; list-style:none; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 0px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 234px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #333333; color: #000; 
									  border-bottom: 1px solid #111111; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

/* Main Buttons for the Nav */
/* NOTE: I renamed all of the images to make it easier to find the images. */
a.btn-more-episodes, a.btn-more-episodes:link { display:block; width:234px; height:50px; background-image:url(../images/btn_moreepisodes.jpg); background-position:left top; text-indent:-9999px; }
a.btn-more-episodes:hover { background-position:left bottom;  }

/* ok so this crazy line sets up the base styles for all of the submenu buttons for the episodes. */
a.ep1, a.ep2, a.ep3, a.ep4, a.ep5, a.ep6, a.ep7, a.ep8, a.ep1:link, a.ep2:link, a.ep3:link, a.ep4:link, a.ep5:link, a.ep6:link, a.ep7:link, a.ep8:link {
	display:block; width:234px; height:50px; background-position:left bottom; text-indent:-9999px;
}

/* And then these lines drop in the background image for each button; we write less code by setting up all of the common items above. */
a.ep1:link {
	background-image:url(../images/btn_watch1.jpg);
}

a.ep2:link {
	background-image:url(../images/btn_watch2.jpg);
}

a.ep3:link {
	background-image:url(../images/btn_watch3.jpg);
}

a.ep4:link {
	background-image:url(../images/btn_watch4.jpg);
}

a.ep5:link {
	background-image:url(../images/btn_watch5.jpg);
}

a.ep6:link {
	background-image:url(../images/btn_watch6.jpg);
}

a.ep7:link {
	background-image:url(../images/btn_watch7.jpg);
}

a.ep8:link {
	background-image:url(../images/btn_watch8.jpg);
}

/* And now the hover states */
a.ep1:hover, a.ep2:hover, a.ep3:hover, a.ep4:hover, a.ep5:hover, a.ep6:hover, a.ep7:hover, a.ep8:hover {
	background-position:left top;
}

/* Now Subscribe Button */
a.btn-subscribe, a.btn-subscribe:link { display:block; width:234px; height:50px; background-image:url(../images/btn_subscribe.jpg); background-position:left top; text-indent:-9999px; }
a.btn-subscribe:hover { background-position:left bottom; }

/* Facebook Button */
a.btn-facebook, a.btn-facebook:link { display:block; width:234px; height:50px; background-image:url(../images/btn_facebook_like.jpg); background-position:left top; text-indent:-9999px; }
a.btn-facebook:hover { background-position:left bottom; }


.navItem {
	margin-right:9px;
}


#header {
	max-width:100%;
	margin:auto;
	padding: 0px;
	border-bottom: 2px solid #e55812;
    background-color: #101112;
}

#header img{
	height:200px;
}

#movie {
	
	max-width:376px;
	margin:auto;
	margin-bottom:40px;	
	border: 1px solid #e55812;
}

#maincolumn1 {
	max-width:768px;
	font-weight:bold;
	margin:auto;
	padding: 0px 0px 0px 0px;
	margin-bottom:40px;
	
	
}


#footer {
	max-width:768px;
	margin:auto;
	padding:0px;
	text-align:center;
	overflow:hidden;
	
}


@media (width >= 767px) {
  iframe {
	width: 768px;
	height: 432px;
	}
#movie {
	
	max-width:768px;
}

h1 {
	max-width: 768px;
}
h2 {
	max-width: 768px;
}
}