/* 
  style.css contains a reset, font normalization and some base styles - HTML5 Boilerplate
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* HTML5 stuff */
article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block; overflow:hidden; zoom: 1;
	}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr {
	display: inline;
}

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */


/* fonts.css from the YUI Library: developer.yahoo.com/yui/
   Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages

  There are three custom edits:
   * remove arial, helvetica from explicit font stack
   * we normalize monospace styles ourselves
   * table font-size is reset in the HTML5 reset above so there is no need to repeat
*/

/*   OK, this is the code from the web font site to use webfonts  */
@font-face {
	font-family: 'Burn';
	src:url('fonts/Burn.eot');
	src:url('fonts/Burn.eot?#iefix') format('embedded-opentype'),
		url('fonts/Burn.svg#Burn') format('svg'),
		url('fonts/Burn.woff') format('woff'),
		url('fonts/Burn.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before, 
[class^="icon-"]:after, [class*=" icon-"]:after {
	font-family: 'Burn';
	font-style: normal;
	speak: none;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	position: relative;
	top: 1px;
}
.icon-arrow-right-2:after {
	content: "\28";
	margin-left: 0.15em;
}
.icon-arrow-left-2:before {
	content: "\29";
	margin-right: 0.15em;
}

/* body { font:13px/1.231 sans-serif; *font-size:small; } */ /* hack retained to preserve specificity */

select, input, textarea, button { font:99% sans-serif; }

/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
 

/* minimal base styles 
*/

body, select, input, textarea { 
  /* #444 looks better than black: #333 looks better than that  */ 
  color: #272727;
  /* set your base font here, to apply evenly */
  font-family: Georgia,"Times New Roman",serif;
  font-size: 110%;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
}

/* Headers (h1,h2,etc) have no default font-size or margin,
   you'll want to define those yourself. */ 
h1,h2,h3,h4,h5,h6 { font-weight: bold; }

/* always force a scrollbar in non-IE */ 
html { overflow-y: scroll; }

 
/* Accessible focus treatment:  */
a:hover, a:active { outline: none; }

a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align: top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}
 
textarea { overflow: auto; } 

hr.spacer 	{width: 85%; text-align: center; line-height:1px; margin: 0.1em auto 0; padding: 0; color: #BCBCBC;}

.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* align checkboxes, radios, text inputs with their label  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
 
/* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea { margin: 0; }

/* colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { 
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red; 
 -webkit-box-shadow: 0px 0px 5px red; 
         box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate.
   No text-shadow:  */
::-moz-selection{ background: #000080; color:#fff; text-shadow: none; }
::selection { background:#000080; color:#fff; text-shadow: none; } 

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #000080; } 

/* make buttons play nice in IE: */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG:  */
.ie7 img { -ms-interpolation-mode: bicubic; }



/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; } 

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position: absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

:before.clearfix, :after.clearfix {
  content: "\0020"; display: block; height: 0; visibility: hidden;	
} 
:after.clearfix { clear: both; }
.clearfix { zoom: 1; }


/* Primary Styles
Author: Corporate Medical Consulting - DJ
*/

/* Styles for all page types
*/
body		{ font-family: Georgia, serif; font-size: 1em; }
body	{
  margin:0 auto; 
  text-align: center; 
  background-color: #b3bfdf;
  color: #272727;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 110%;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
}
	#heading	{display: table; width: 971px; margin: 0 auto; padding: 15px 13px 0 14px; background-color: #cfc7ba; text-align: center; }

	#logo	{display: table-cell; width: 364px;  }

	#logo img	{margin:0; border:0; padding: 0; }
   
	#title	{display: table-cell; width:600px; text-align: center; vertical-align: middle; }
	#title h1	{font-size:6em; color: #800000; font-family:Arial Narrow; font-weight:bold; z-index:1;}
	#title h1 .burn	{display:none; }
	#title h2	{font-size: 2em; font-style: italic; margin:0; padding:0; z-index:100;}
	
#content	{margin: 0 auto; width: 971px; padding: 0 13px 0 14px; text-align: left; background-color: #cfc7ba; position:relative; 
			overflow:visible; }

/* These are the styles for the side ads - found that FF ad-block completely erased the id "sidead" doesn't fred or ethyl */
.fred, .ethyl		{
			position: absolute;
			top: 50px; 
			right: -195px; 
			width: 180px; 
			_width: 180px;
			padding: 1em 0.5em;
			background-color: #ccc; 
			border: 1px solid #333; 
			text-align:center; 
			z-index: -10; }
.fred p, .ethyl p	{
			font-family: arial, sans-serif;
			font-size: 85%;
			line-height: 1.2em;
}
.fred.lower	{top: 50%; }
.ethyl.lower	{top: 50%; }
.characters .fred img {max-width: 75%; }

.banner	{clear: both; margin: 0 auto; width: 971px; padding: 10px 13px 10px 14px; background-color: #800000; color: white; font-size: 90%; }
.banner a	{text-decoration: none; color:#b3bfdf; }

.friendlies a#friendlies,
	.single a#single,
	.main a#main,
	.clients a#clients,
	.unfriendlies a#unfriendlies,
	.cabal a#cabal,
	.recBad a#recBad,
	.prequels a#prequels,
	.one a#one,
	.two a#two,
	.three a#three,
	.four a#four,
	.five a#five,
	.six a#six,
	.seven a#seven,
	.BurnStory a#BurnStory,
	.writersIndex a#writersIndex,
	.seasonsIndex a#seasonsIndex,
	.directorsIndex a#directorsIndex,
	.voiceTag a#voiceTag,
	.voiceEpisode a#voiceEpisode,
	.quoteEpisode a#quoteEpisode
	.episode a#episode,
	.summary a.summary
		{color: #cfc7ba ;}

/* puts a current link style on all the sub-menu's based on page id and menu class */
#menU-01 a.mu-01, 
	#menU-02 a.mu-02, 
	#menU-03 a.mu-03, 
	#menU-04 a.mu-04, 
	#menU-05 a.mu-05, 
	#menU-06 a.mu-06, 
	#menU-07 a.mu-07, 
	#menU-08 a.mu-08, 
	#menU-09 a.mu-09, 
	#menU-10 a.mu-10, 
	#menU-11 a.mu-11, 
	#menU-12 a.mu-12, 
	#menU-13 a.mu-13,
	#menU-14 a.mu-14, 
	#menU-15 a.mu-15, 
	#menU-16 a.mu-16, 
	#menU-17 a.mu-17, 
	#menU-18 a.mu-18 {
		color: #000;
		font-weight: bold;
		cursor: default;
	}
	
a:hover	{color: #cfc7ba; text-decoration: underline; cursor: hand; }

#footer	{margin: 0 auto; 
	width: 971px; 
	padding: 1em 13px 1em 14px; 
	text-align: center; 
	background-color: #cfc7ba; 
	font-size: smaller;
}

/* SUB MENUS Styling
*/

#mainMenu	{margin:1em 0 0;
	}
#mainMenu a:hover,
 #friendsMenu a:hover,
 #evilMenu a:hover,
 #clientMenu a:hover,
 #unfriendlyMenu a:hover,
 #burnStoryMenu a:hover
	{color: black;
	}
.subMenu	{clear: both; }

#clientMenu	{width: 100%;
	}
b.label	{float: left; width: 50px; font-size: 24pt; margin-left: -60px; background-color: blue; color: white; text-align: center;
	}



/* Styles for Character page type
*/
.characters .episodes a:hover { color: black; }

.characters img	{width: 275px; margin-bottom: 0.5em; } /* most all images medium size */
.characters .img.right img	{float: right; margin-left: 0.5em; }
.characters .img.left img	{float: left; margin-right: 0.5em; }
.characters #aa .img img	{width: 350px; }		/* main characters biggest */
.characters #aa .img.small img,
  .characters #ab .img.small img	{width: 200px; }	/* small inline individual photos for main and friendlies characters only */
.characters #ns .img img	{width: 250px; }		/* single episode bad guys smallest */

/* From Google - font api */
.characters  #title h1 {
	margin-left: -40px; 
	font-family: 'IM Fell Great Primer SC', serif;
	font-size: 90px;
	font-style: normal;
	font-weight: 700;
	text-shadow: 4px 4px 4px #bbb; /* 501010*/
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.0;
	color: #a00000;
}
.characters #title h2	{display:block; width: 575px; font-size: 1.7em; font-style: italic; }

.characters h2	{font-size: 2em; padding-top: 1em; color: #000080; text-align: center; clear:both; }
.characters h3	{margin: 10px 0 0; font-size: 1.5em; font-weight: bold; color: #800000; }
.characters h3 span.actor {font-style: italic; font-size: 0.8em; }

span.tagline	{text-align:center; display:block; font-style: italic; color: #000000; padding-bottom: 0.5em; }
span::before.tagline	{content: "("}
span::after.tagline	{content: ")"}

.characters .more	{text-align: center;
}
.characters .more a:hover	{color: black; text-weight: bold;
}


/*  Styles for Summary page type
*/
.summary .img img	{width: 350px; margin-bottom: 0.5em; }
.summary .img.small img {width: 200px; margin-bottom: 0.5em; }
.summary .img.right img {float:right; margin-left: 0.5em; }
.summary .img.left img {float:left; margin-right: 0.5em; }
.summary .byline img.watchIt {margin-bottom: -4px; }
.summary .byline a:hover img.watchIt {border:1px solid grey; }

/* From Google - font api */
.summary  #title h1 {
	margin-left: -40px; 
	font-family: 'IM Fell Great Primer SC', serif;
	font-size: 90px;
	font-style: normal;
	font-weight: 700;
	text-shadow: 4px 4px 4px #bbb; /* 501010*/
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.0;
	color: #a00000;
}

.summary #title h2,
	.index #title h2	{display:block; width: 575px; font-size: 1.7em; font-style: italic; color: #000080;}
.summary h2	{ font-size: 1.5em; font-weight: bold; color: #800000; clear:both; }
.summary a:hover  {text-decoration: none; }

.summary .byline	{font-size: smaller; font-style: italic; margin-bottom: 5px; color: #000080; }

.summary .description	{font-style:italic; color: #0000d0; font-size:90%; line-height: 1.3em; padding-top:1em; }
.synopsis em {font-size: 1.1 em; color: #000055; }
.summary #summaryMenu	{padding: 1em 0; }
#summaryMenu a	{text-decoration: none; cursor: hand; font-weight: bold; }
#summaryMenu a:hover,
.summary #content a:hover	{color:#000000; font-weight: bold; }
.summary #content > div	{display:block; clear: both;
}


/*  Additional styles (added to summary) for the Burn Story type
*/
.summary.BurnStory h2,
  .summary.voiceEpisode h2,
  .summary.quoteEpisode h2	{font-size: 1.7em; font-style: italic; color: #000080; text-align: center; padding-top: 0.5em; }
.summary.BurnStory .img.thumb img {width: 25%; margin-bottom: 0.5em; }
.summary.BurnStory h3,
  .summary.voiceEpisode h3,
  .summary.quoteEpisode h3	{padding-top: 0.5em; font-size: 1em; font-weight: bold; color: #800000; }

/*
	Additional styles (added to summary) for the writers index type
*/

.summary.writersIndex p,
.summary.directorsIndex p	{display: block; padding: 0.5em 1em; }

p.indexRef a	{text-decoration: none; cursor: hand; font-weight: bold; }
p.indexRef a:hover	{color:#000000; font-weight: bold; }

#writersIntro,
#directorsIntro	{border: 2px solid #000080; padding: 0.25em; margin-bottom: 1em;
	font-family: Georgia, serif;
	font-size: 110%;
	font-style: normal;
	font-weight: 500;
	line-height: 1.1;
	color: #000;
	}
#writersIntro p,
  #directorsIntro p	{padding: 0.5em 1em; }

.directorsIndex h2	{margin-top: 0.5em; }

/*
	Additional styles (added to summary) for the seasons index type
*/

.summary.seasonsIndex ul,
  .summary.alphaIndex ul {list-style-type:none;
}
.summary.seasonsIndex h2,
  .summary.alphaIndex h2	{margin-top: 1em;
}
.summary.seasonsIndex .indexRef a,
  summary.alphaIndex .indexRef a	{text-decoration: none; color: #000080;
}
.summary.seasonsIndex .indexRef a:hover,
  .summary.alphaIndex .indexRef a:hover	{color: #800000;
}
.summary.seasonsIndex span.byline,
  .summary.alphaIndex span.byline	{color: #607890;
}
.summary.seasonsIndex li,
  .summary.alphaIndex li	{padding-left: 5em; 
} /* indent the second lines */
span.title	{margin-left: -5em;
}
span.iblock	{display: inline-block; 
} /* widow-orphan control */


/*
	Additional styles (added to summary) for the voice and quote index type
*/

.summary.voiceTag h2,
  .summary.voiceEpisode h3,
  .summary.quoteEpisode h3,
  .summary.quoteAuthor h2	{margin-top: 1em;
}
.summary.voiceTag #content p,
  .summary.voiceEpisode #content p,
  .summary.quoteEpisode #content p,
  .summary.quoteAuthor #content p	{
  	margin-bottom: 0.5em; 
  	font-style: italic; 
  	position: relative;
  	padding-left: 1em;
}
/* hex unicode for space, mid-dot, space */
.summary.voiceTag #content p:before,
.summary.voiceEpisode #content p:before,
.summary.quoteEpisode #content p:before,
.summary.quoteAuthor #content p:before	{
	font-weight: bold;
	content:"\00b7";     /* \00a0\00b7\00a0 */
	font-size: 2.15em;
	line-height: 0.31em;
	top: 3px;
	position: absolute;
	color: #000080;
	margin-left: -0.5em;
}
.fred p:before,
.ethyl p:before  {
	content: "" !important;
	font-weight: normal !important;
	margin-left: 0 !important;
	position: relative !important;
}
span.voiceRef,
.voiceRef a	{font-size: 80%; color: #000080; font-style: normal; text-decoration: none; 
}
.voiceRef a:after	{content: "\2002 \2002"; margin-right: 1.25em; } /* extra margin saved for hover content - prevent jumping at edge */
.voiceRef a:hover	{color: black; }
.voiceRef a:hover:after	{content: '\2002 \AB'; margin-right: 0; } /* take back the margin */

span.meta	{font-size: 70%; color: #000090; font-style: normal; padding-left: 1em; position: relative; top: -5px; }


/*
	Additional styles (added to summary) for the voiceEpisode index type
*/


/*  Styles for Index page type
*/
.index .overlay	{position: absolute; top: 10%; right: 3em; width:600px; border: 2px #000080 solid; padding:1em; background-color: #c7c7c7; }
.index .overlay h4	{text-align:center; font-variant:small-caps; color:#800000; }
.index .overlay p	{line-height: 1.25; margin:0.5em 0;}
.index ul a:hover	{color: #000080; }
.index ul a:hover:after	{content: '\20 \AB'; color: #000000; font-weight:bold; }


/* additional styles for the single episode page */

.episode #heading	{display: table; width: 971px; margin: 0 auto; padding: 15px 13px 0 14px; background-color: #cfc7ba; text-align: center; }
.episode #logo		{display: table-cell; width: 264px;  } /* 364 -> 264 */
.episode #logo img	{margin:0; border:0; padding: 0; } /*  */
.episode #title		{display: table-cell; width:700px; text-align: center; vertical-align: middle; } /* 600 -> 700 */
.episode #title h1	{font-size:5em; color: #800000; font-family:Arial Narrow; font-weight:bold; } /*  */
.episode #title h1 .burn	{display:none; } /*  */
.episode #title h2	{font-size: 1.7em; font-style: italic; margin:0; padding-top: 0.25em; display:block; width: 675px; color: #000080; padding-bottom:0.25em; } /*  */
.episode #content	{padding: 2em 13px 2em 14px; }
.episode #content nav		{text-align: center; margin: 2em auto 0 ; }
.episode #content nav a:hover	{color: #000080; font-weight:normal; }

nav.paging a	{
	text-decoration: none;
}

/*  Styles for Watch page type
*/
.watch a.videoBadge	{position:relative;	display:block; text-decoration:none;
		width:144px; height:30px;
		-webkit-box-shadow:0 0 8px #999;
		-moz-box-shadow:0 0 8px #999;
		box-shadow:0 0 8px #999;
		border:4px solid #f9f9f9;
		line-height:0;
		padding-top:80px; 
		background-repeat:no-repeat;
		background-color: #ffffff;
}
.watch a.videoBadge span	{font-family:'Helvetica',sans-serif;
		font-size:12px;line-height:15px;color:#444;
		width:136px;
		padding:0 4px;
		display:table-cell;
		position:relative;
		margin-top:30px;
		height:30px;
		overflow:hidden;
		vertical-align:middle;
}
.watch a:hover.videoBadge	{border-color:#B3BFDF; }
.watch .item	{width:152px; padding:1em 0.5em; float: left; }


/*
.characters #test	{background-color: #848283; width: 500px; height; 500px; }
.characters #test1	{background-color: #8B8B8B; width: 500px; height; 500px; }
.characters #test2	{background-color: #505050; width: 500px; height; 500px; }
.characters #test3	{background-color: #c1c1c1; width: 500px; height; 500px; }
.characters #test4	{background-color: #bfbfbf; width: 500px; height; 500px; }
.characters #test5	{background-color: #f7941d; width: 500px; height; 500px; }
.characters #test6	{background-color: #0083c7; width: 500px; height; 500px; }
.characters #test7	{background-color: #215F7F; width: 500px; height; 500px; }
.characters #test8	{background-color: #1C292D; width: 500px; height; 500px; }
.characters #test9	{background-color: #4C9CC7; width: 500px; height; 500px; }
lt bn = cfc7ba, med bn = 98897a, dk bn = 604a3c
*/


/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
   
@media screen and (max-device-width: 480px) { }