/********************************************

BASIC CSS
This Page is For All HTML pages
Contains layout and header/footer

********************************************/



/********************************************
BASIC LAYOUT
********************************************/

* { margin: 0; padding: 0 }
img { border:none; }
body { font: 12px Verdana, Helvetica, sans-serif; color: #333333; background:#263741 url(../images/bg_body.png) repeat-x 0 0; padding-bottom:10px; text-align: center; }
a, a:link, a:visited { color:#0E45B7; text-decoration: none; }
a:hover, a:active { color:#0E45B7; text-decoration: underline; }
a:focus { -moz-outline-style: none; }
#thePage { position: relative; width: 760px; margin:10px auto; text-align: left; }
#theBodyWrapper { width: 760px; margin: 0; padding: 0; }
#theBody { padding:0px 12px; float: left; clear: both; }
#theHeaderWrapper { width: 185px; float:left; margin-top: -5px; }
#theHeader { padding:0px; }
#primarySection { width:551px; float:right; margin-top: -5px; position:relative; }
#primarySection .content { padding:0px; }
#theFooter { /*clear:both;*/
	height:19px; }
/*
 * COPYRIGHT INFO
 */
 
#copyright { padding: 0 15px 15px 0; }
#copyright p { font-size: 10px; color: #727D83; margin-bottom: 0; }
#copyright p.left { width: 460px; padding-bottom: 0; }
#copyright p.right { text-align: right; width: 180px; padding-bottom: 0; }
#copyright p a:link, #copyright a:visited { color: #7ca7cf; text-decoration:none; margin-left: 1em; }
#copyright p a:hover, #copyright a:active { color: #7ca7cf; text-decoration:underline; }
/* general styles */
	
#theHeader .titlePic { margin-top:-2px; position:relative; padding-bottom:0px; }
#theNav { width:185px; }
#primarySection h1 { padding:0 0 10px 0; margin:0px; background-repeat: no-repeat; background-position: top left; margin-top: 0; margin-bottom: 0; }
#primarySection .content { padding:17px 25px 0 25px; margin-top: 11px; }
#primarySection .content h1 { line-height: 1; text-indent: -999em; }
/* content styles */
	p { padding-bottom:15px; font: 12px/17px Verdana, Helvetica, sans-serif; }
h2 { color:#476E9F; font:bold 14px/18px Verdana, Helvetica, sans-serif; margin:0px; padding:0px; padding-bottom:15px }
p a.thickbox:link,  p a.thickbox:visited { }
span.icon_photo { display:-moz-inline-box; display:inline-block; background: url(../images/icon_photo.gif) no-repeat; text-indent:-3000px; font:0/0 Arial; overflow:hidden; color:rgba(255, 255, 255, 0); vertical-align:bottom; width: 18px; height: 18px; margin-right:2px }
#primarySection a.glossary:link,  #primarySection a.glossary:visited { text-decoration: none; border-bottom:1px dotted; }
ol { margin-left:20px; margin-bottom:15px; }
ol li { font-size: 12px; line-height: 16px; margin: 5px 0; }
ul.bullets { list-style-type: none; padding: 0; margin-bottom: 15px; }
ul.bullets li { padding-left:20px; background: url(../images/bullet.gif) no-repeat 5px 4px; font-size: 12px; line-height: 16px; margin: 0 0 6px 0; }
ul.pdf { list-style-type: none; padding: 0; margin-bottom: 15px; line-height: 18px; }
ul.pdf li,  ul li.pdf,  ul.bullets li.pdf { padding-left:20px; background: url(../images/bullet_pdf.gif) no-repeat 0 1px; position: static; }
ul.bullets li.pdf { padding-left:20px; background: url(../images/bullet_pdf.gif) no-repeat 0 1px; position: static; }
/*
	DOWNLOADABLE VIDEOS
	links to downloadable versions of the SWF/FLV videos on the site
*/
div.videos { clear: both; float: left; width: 100%; text-align: left; margin-top: 20px; }
div.videos h2 { margin: 0; margin-bottom: 10px; padding: 0; background: url(../images/headers/downloadable_videos.gif) no-repeat; widows: 199px; height: 18px; text-indent: -999em; width: 500px; }
div.videos p { margin: 0; margin-bottom: 10px; padding: 0; color: #fff; }
div.videos ul { list-style-type: none; padding: 0; }
div.videos ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.videos li { margin: 0; padding: 0 0 5px 0; font-weight: bold; color: #fff; clear: both; }
div.videos a:link, div.videos a:visited { margin: 0 0 10px 0; _margin-bottom: 0; /* hide that 3px from ie6 */ padding: 0px; width: 238px; font-weight: normal; color: #839cc0 !important; display: block; float: left; }
div.videos a.first { margin-right: 3px; }
div.videos a:hover, div.videos a:active { color:#ffffff !important; }
div.videos p.note { font-size: 11px; margin-bottom: 15px; clear: both;  *padding-top: 5px;
}
/*
	SIDEBARS AND CALLOUTS
	Examples of floated elements are on the first Essay page:
	http://www.kapow.com/sid/www_site/astronomy-topics/light-as-a-cosmic-time-machine.html
	sidebars and other floated content elements
*/

	/* these could be a div or a blockquote! */
	.left { width:238px; float: left; clear: left; margin: 4px 20px 15px 0; }
.right { width:238px; float: right; clear: right; margin: 4px 0 15px 20px; }
.center { width:238px; margin: 0 auto; display:block; }
/* Two images side-by-side */
	.imagewrapper { }
.imagewrapper .left { width:238px; float: left; margin: 4px 10px 15px 0; clear: none; }
.imagewrapper .right { width:238px; float: left; margin: 4px 0 15px 10px; clear: none; }
/* photos */
	.caption { color:#7a7a7a; font:10px/12px Verdana, Helvetica, sans-serif; margin-top:5px; }
/*PLACEHOLDER STYLE*/
.sidebar { padding: 10px 0 0 0; width:215px; margin:3px 10px 10px 40px; border-top:2px solid #476E9F; border-bottom:2px solid #476E9F; }
.sidebar h3 { color:#476E9F; font-size:11px; line-height:14px; font-weight:bold; }
.sidebar p { font-size: 11px; line-height:14px; color:#7a7a7a; margin-bottom:0; padding-bottom:10; }
/*
		BLOCKQUOTE AND CITATION
		An example of a blockquote is used on the About The Film page:
		http://www.kapow.com/sid/www_site/about-the-film/
	*/
	blockquote { padding-top:10px; padding-bottom:10px; margin:0 0 10px 0; color:#476E9F; font: 14px/17px Verdana, Helvetica, sans-serif; }
blockquote.question { font:bold 12px/15px Verdana, Helvetica, sans-serif; background: url(../images/icon_question.gif) no-repeat left 10px; padding-left: 40px; border-top:2px solid; border-bottom:2px solid; }
blockquote.video { font:bold 12px/15px Verdana, Helvetica, sans-serif; background: url(../images/icon_video.gif) no-repeat left 10px; margin:0; padding-left: 40px; border-top:2px solid; border-bottom:2px solid; }
blockquote cite { display: block; text-align: right; font-weight: normal; font:11px/13px Verdana, Helvetica, sans-serif; color: #7a7a7a; padding-top:5px; }
.top_quote { display:block; padding-top:10px; padding-bottom:10px; margin:0px; margin-bottom:20px; }
.top_quote cite { display: block; text-align: right; font-weight: normal; color: #999; }
a.top { background: url(../images/top.gif) no-repeat left center; padding-left: 12px; font-size:11px; }
/*
	TRANSPARENT BORDERED CONTAINER
	Since the background color of the header and footer are known absolutes, those images are rendered WITH a bgcolor in place
	The "fill" in the middle lays over a graident, so that needs to be transparent. accomplished in IE6 using the Alpha Filter
*/
#theBodyWrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#thePage { padding-top:19px; background: url(../images/background/background_top.png) no-repeat top; }
#theFooter { background: url(../images/background/background_bottom.png) no-repeat bottom; }
#theBody { background: url(../images/background/background_fill.png); }
/*
 * "Dark" page
 */

div#thePage.dark { background: url(../images/background/background_top_black.png) no-repeat top; }
#thePage.dark #theFooter { background: url(../images/background/background_bottom_black.png) no-repeat bottom; }
#thePage.dark #theBody { background: url(../images/background/background_fill_black.png); }
#thePage.dark #primarySection .content { color: #fff; }
#thePage.dark #primarySection .content a { color: #839CC0; }
/*
 * "Blue" page
 */
div#thePage.blue { background-image: url(../images/background/background_top_blue.png); }
#thePage.blue #theFooter { background-image: url(../images/background/background_bottom_blue.png); }
#thePage.blue #theBody { background-image: url(../images/background/background_fill_blue.png); }
p.survey { text-align: center; font-size: 10px; color: #727D83; clear: both; margin-top: 5px; }
p.survey a:link, p.survey a:visited { color: #7ca7cf; text-decoration:none; }
p.survey a:hover, p.survey a:active { color: #7ca7cf; text-decoration:underline; }