/* -------------------------------------------
project:  Better Than Fiction Productions
date:    2008/12/12
------------------------------------------- */

/* Reset
------------------------------------------- */
* {margin: 0; padding: 0; color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em;}
a, span, strong {font-size: 1em;}
span {color: inherit;}
a, a:visited {text-decoration: underline;}
a:hover {text-decoration: none;}
img {border: none;}
html {height: 101%;}

/* basic text elements */
h1 {margin-bottom: 1em; font-size: 1.8em;}
h2 {margin: 1em 0 0.8em 0; font-size: 1.5em;}
h3 {margin: 1em 0 0.8em 0; color: #519551; font-size: 1em;}
h4 {margin: 1em 0 0.8em 0; font-size: 1.2em;}
p {margin: 1em 0 1em 0;}
ul, ol {margin: 1em 0 1em 0;}
ul li {margin: 0 0 0 20px;}
ol li {margin: 0 0 0 20px;}

/* basic form elements */
fieldset {border: none;}
legend {border: none; font-weight: bold;}
label {display: block; float: left; clear: left; width: 150px; margin: 5px 0 5px 0;}
input {width: 275px; margin: 5px 0 5px 0; padding: 2px; border: 1px solid #000; background: #fff;}
	input.chk, input.radio {width: auto; border: none;}
textarea {width: 275px; height: 50px; margin: 5px 0 5px 0; padding: 2px; border: 1px solid #000; background: #fff;}
select {width: 275px; margin: 5px 0 5px 0; padding: 2px; border: 1px solid #000; background: #fff;}

/* layout
------------------------------------------- */
body {background: #436A43;}
#root {width: 1011px; margin: 0 auto; background: url(../images/background.jpg) center top repeat-y;}
	#top {width: 910px; height: 33px; margin: 0 0 0 40px; background: url(../images/stripes.gif) left bottom repeat-x;}
	#content {overflow: hidden; width: 920px; margin: 0 auto; padding-bottom: 50px;}
		#lcol {width: 455px; float: left;}
			#logo {display: block; overflow: hidden; width: 314px; height: 76px; margin-top: 15px; background: url(../images/logo.jpg) left top no-repeat; text-indent: -10001px;}
			.copy {width: 310px; margin-left: 50px;}
				.copy p {line-height: 2em;}
		#rcol {width: 455px; float: right;}
			#mainemnu {height: 25px; margin: 0; padding: 0;}
				#mainmenu li {float: left; list-style: none; margin: 0; padding: 0; line-height: 1em;}
					#mainmenu a, #mainmenu a:visited {display: block; overflow: hidden; height: 25px; background: url(../images/mainmenu.gif) no-repeat; text-indent: -10001px;}
					#mainmenu a#mm1 {width: 105px; background-position: 0 0;}
					#mainmenu a#mm1:hover, #mainmenu a#mm1.current, #mainmenu a#mm1.current:visited {background-position: 0 -25px;}
					#mainmenu a#mm2 {width: 106px; background-position: -105px 0;}
					#mainmenu a#mm2:hover, #mainmenu a#mm2.current, #mainmenu a#mm2.current:visited {background-position: -105px -25px;}
					#mainmenu a#mm3 {width: 115px; background-position: -211px 0;}
					#mainmenu a#mm3:hover, #mainmenu a#mm3.current, #mainmenu a#mm3.current:visited {background-position: -211px -25px;}
					#mainmenu a#mm4 {width: 127px; background-position: -326px 0;}
					#mainmenu a#mm4:hover, #mainmenu a#mm4.current, #mainmenu a#mm4.current:visited {background-position: -326px -25px;}
			#submenu {margin-left: 10px; margin-top: 50px; color: #999; line-height:36px;}
				#submenu a, #submenu a:visited {color: #999; text-decoration: underline;}
				#submenu a:hover, #submenu a.current, #submenu a.current:visited {color: #9c9; font-weight: bold; text-decoration: none;}
			
	#footer {height: 26px; background: #000;}
		#footer p {width: 950px; margin: 0 auto; background: url(../images/footer.jpg) right top no-repeat; color: #999; font-size: 0.8em; line-height: 26px;}
	
/* repetitive stuff
------------------------------------------- */
.clear {overflow: hidden; clear: both; height: 0;}
.secret {display: none;}
.pdf {padding: 6px 0 6px 25px; background: url(../images/icons/pdf.gif) left center no-repeat; line-height: 17px;}

a.back, a.back:visited {display: block; float: left; overflow: hidden; width: 197px; height: 18px; margin-left: 45px; background: url(../images/back-to-videos.gif) left top no-repeat; text-indent: -10001px;}
a.back:hover {background-position: left bottom;}

a.prev, a.prev:visited {display: block; float: left; overflow: hidden; width: 123px; height: 20px; margin: 20px 0 0 0; background: url(../images/prev.gif) left top no-repeat; text-indent: -10001px;}
a.next, a.next:visited {display: block; float: right; overflow: hidden; width: 86px; height: 20px; margin: 20px 0 0 0; background: url(../images/next.gif) left top no-repeat; text-indent: -10001px;}
a.prev:hover, a.next:hover {background-position: left bottom;}

/* special sections and elements
------------------------------------------- */
#shows {clear: both; margin: 80px 0 30px 0; text-align: center;}
	#shows li {float: left; list-style: none; margin: 3px;}

#logos {width: 230px; margin-left: 50px; margin-top:20px;}
	.logol {margin-right:10px; margin-bottom:15px; vertical-align:top; float:left; width:75px;}
	.logor {margin-bottom:10px; vertical-align:top; float:right; width:125px;}	
		
#people {
	overflow: hidden;
	margin-top: 30px;
}
	#people ul {float: right; width: 185px; margin: 0 30px 0 0; }
		#people li {list-style: none; margin-bottom: 20px; margin-left: 0; line-height: 1.2em;}		
		#people li a, #people li a:visited {color: #999; text-decoration: none;}
		#people li a:hover {color: #000;}
	#people #portrait {float: left;}
	
#pictures {overflow: hidden; margin-top: 100px;}
	#pictures ul {float: right; width: 185px; margin: 0 30px 0 0;}
		#pictures li {list-style: none; margin-bottom: 10px; margin-left: 0; line-height: 1em;}		
	#pictures #main-picture {float: left;}
	
.press {clear: both; overflow: hidden; margin: 0 110px 10px 250px;}
	.press-content {float: right; width: 325px; border-top: 1px solid #436A43;}
	.press h2 {float: left; width: 220px; margin: 15px 0; text-align: right; }
	.press h3 {margin-bottom: 0; line-height: 1.3em;}
		.press h3 a, .press h3 a:visited {color: #519551;}
	.press p {font-size: 0.9em;}
	.press p.press-date {color: #519551; margin: 0 0 20px 0; line-height: 1.3em;}
	.press p a, .press p a:visited {color: #000;}
	
.vcard {margin-top: 50px;}
.vcard p {margin: 20px 0;}

#videos {margin-top: 80px; padding: 0;}
	#videos li {position: relative; list-style: none; width: 325px; height: 102px; margin: 0 0 20px 20px; border-top: 1px solid #436A43;}
		#videos img {float: right;}
		#videos p {font-size: 0.9em; line-height: 1.2em;}
		#videos img.tv-logo {
	position: absolute;
	right: 145px;
	bottom: 0px;
}
		#videos img.accolades {position: absolute; left: 0px; bottom: 0px;}		
		#videos img.emmy {position: absolute; left: 135px; bottom: 85px;}
		#videos img.statue-gracie {position: absolute; left: 44px; bottom: 0px;}		
		
#video {width: 360px; margin: 0 auto; text-align: center;}
	#video p {margin: 5px 10px; font-size: 0.9em; text-align: left;}
	#video p.video-title {margin: 5px 20px;}