@charset "utf-8";

/* CSS Document */

/*
Title: 		The Tulsa Project V 1.0
Designer: 	Michael J. Champlin (http://mjchamplin.com)
Date:		October 2009
*/

/*Universal Declarations*/
body { background-color:#000000; font-family: Georgia, "Times New Roman", Times, serif; /*text-align: center;*/ margin:0; padding:0;} 
a { color: #3399ff; text-decoration: none; }
img { border: none; }
h1, h2, h3, h4 { color: #000000; padding: 0; margin: 0; text-align: left; font-weight: bold; font-family: Futura, Arial, Helvetica, sans-serif; }
h1 { font-size: 60px; line-height: 65px; padding-top: 20px; }
h2 { font-size: 40px; line-height: 45px; padding-top: 20px; margin-bottom: 10px; }
h3 { font-size: 25px; line-height: 30px; padding-top: 0; font-style: italic; }
h4 { font-size: 18px; margin-bottom: 3px; color: #3399ff; } /*Used for blurb titles on main page*/
.blue_text { color: #3b5998; }
.orange_text { color: #930; }
.green_text { color: #060; }


/*(Universal) Footer Elements*/
#footer { text-align: center; /*margin-top: 15px;*/ border-top: solid 1px #999; padding: 0; clear:both; }
#footer_copy { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #333; padding: 0; line-height: 10px; margin-top:3px; }
#footer a {text-decoration: none; border-bottom: 1px dotted #CCC; color: #333;}
#footer a:hover {  border-bottom: 1px dotted #666; }

/*(Universal) Masthead and Logo Elements*/
#logo_small { position: absolute; left: 0px; top: 2px; width: 150px; height: 20px; background:url(/images/logos/logo_small.jpg); background-repeat:no-repeat; }
#logo_medium { background-image:url(/images/logos/logo_medium.jpg); background-repeat:no-repeat; background-position: top left; width: 200px; height: 88px; border-bottom: #444444 3px solid; }
#masthead { width: 700px; border-bottom: 4px #000000 solid; margin: 0; margin-bottom: 5px; padding-bottom: 2px; float: left; }
#masthead_logo { margin:0; margin-bottom: 15px; margin-top: 15px; /*border: 3px solid #000000;*/ }
#masthead_category { font-family: Arial, Helvetica, sans-serif; /*color: #006699;*/ text-decoration: none; word-spacing: normal; text-align: left; letter-spacing: 0; line-height: 12px; font-size: 14px; text-transform:uppercase; padding: 0; margin: 0; margin-bottom: 3px; font-weight: bold; float: left; }
#masthead_date { font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; word-spacing: normal; text-align: left; letter-spacing: 0; line-height: 12px; font-size: 14px; float: left; padding: 0; margin: 0; margin-bottom: 3px; margin-left: 3px; text-transform:uppercase;}

/*Splash Page Elements*/
#splash_container { width: 755px; margin: 0 auto; margin-top: 50px; }
#splash { position: relative; margin: 0px 0px 0px 0px; float: left; }
#splash_right { background-color: #202020; width: 200px; float: left; text-align: center; height: 500px; }
#date{ font-family: Georgia, "Times New Roman", Times, serif; letter-spacing: .1em; position: relative; color: #999; font-weight: bold; font-variant: small-caps; font-size: 15px; line-height: 25px; text-align: center; margin: 0; }
#rule { width: 50px; height: 1px; border-bottom: #999 dotted 1px; margin: 0 auto; } 
#list { font-family: Georgia, "Times New Roman", Times, serif; position:relative; color: #999; font-size: 13px; line-height: 21px; margin: 0; list-style-type:none; } 

/*Main Page Elements*/
	/*Bottom Nav*/
	#main_logo { width: 200px; position: fixed; left: 0; bottom: 0; background: #fff; }
	.main_logo_copy { /*margin-top: 68px;*/ margin-right: 5px; font-size: 14px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #333; }
	#main_logo div, #main_logo p {padding: 0; float: right; }
	a#click { font-size: 10px; color: #666; float: right; }
	div#nav { float:right; width: 100%; }
	#nav p { padding: 0; margin: 2px 5px 10px 0; }
	ul#nav_list { list-style-type: none; display: block; text-align: right; padding: 0; margin: 10px 5px 10px 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; }
	ul#nav_list a {font-weight: bold;}
#main_container { width: 990px; height: 500px; background: #000; margin: 0 auto; margin-top: 50px; }
#cover_image { position: relative; width: 500px; height: 500px; /*background-image: url(/images/main/cover.jpg); background-repeat:no-repeat;*/ float: left; padding-right: 20px; } 
#cover_copy { position: absolute; left: 125px; top: 325px; width: 350px; background-image: url(/images/bg/bg.png); background-repeat:repeat; padding: 10px; color:#999; }
#cover_title{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; color: #FFFFFF; } 
#cover_subtitle { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; } 
.vertical { position: relative; float: left; width: 150px; height: 700px; margin-left: 5px; }
.spacer { height: 200px; width: 150px; }
.blurb { height: 150px; width: 150px; position: relative; float: left;/* background: url(images/1.jpg);*/ }
.blurbtitle { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #3399ff; position: absolute; bottom: 0; left: 0; width: 150px; padding-top: 5px; background-image: url(/images/bg/bg.png); background-repeat:repeat; }
.pull { width: 145px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; line-height: 17px; color: #CCCCCC; /*position: relative; float: left;*/ border-left:  #999 solid 1px; padding-left: 5px;}
.pull p{  margin-top: 10px; } 


/*Article Elements*/
#article_container { width: 700px; margin: 0 auto; padding: 30px; padding-top: 0; padding-bottom: 10px; background-color: #FFFFFF; }
#article_blurb { font-family: Georgia, "Times New Roman", Times, serif; color: #1A1A1A; font-style:italic; text-align: left; letter-spacing: 0; line-height: 19px; font-size: 13px; padding-top: 5px; padding-bottom: 10px;}
#article_blurb a { color:#1A1A1A; border-bottom: 1px dotted #999; }
#article_blurb a:hover { border-bottom: 1px dotted #333; }
#bodytext { /*width: 700px;*/ font-family: Georgia, "Times New Roman", Times, serif; background-color: #FFFFFF; color: #000; text-decoration: none; word-spacing: Normal; text-align: left; letter-spacing: 0; font-size: 15px; line-height: 20px; }
#dropcap { font-family:georgia, serif; float:left; color:#000; font-size:70px; font-weight: bolder; line-height:40px; padding-top:10px; padding-right: 4px; } 
.pullquote_left, .pullquote_right { background:#ffffff url('/images/bg/pullquote.jpg') no-repeat top left; text-align: left; font-weight:bold; font-size: 21px; line-height: 24px; padding-top: 20px; padding-bottom: 20px;}
.pullquote_left { width: 145px; float: left; padding-right:50px; padding-left: 10px; margin: 0 auto; margin-right: 1em; border-right: #000000 2px solid; }
.pullquote_right { width: 200px; float: right; padding-left:50px;  padding-right: 10px; margin-left: 1em; border-left: #000 2px solid; }
.imageright, .imageleft { width: 250px; padding: 0.5em; text-align: left; }
.imageleft p, .imageright p  {  background: #eee;  margin: 0;  line-height: 1.6em;  padding: 0.5em;  border-bottom: 1px solid #ccc;  border-top: 1px solid #ccc;  font-size: 12px;  color: #555;  } 
.imageleft{ float: left; margin: 0 1.5em 0 0; } 
.imageleft img { margin: 0;  display:  block; } 
.imageright{ float: right; margin: 0 0 0 1.5em; } 
.imageright img { margin: 0;  display:  block; } 
.interview { margin: 0; padding-left: 15px; }
.interview_us { font-weight: bold; color: #006699; margin-left: -10px; }
.interview_them { font-weight: bold; color: #930; margin-left: -10px; } 
#footnote { font-size: 12px; color: #666; width: 50%;  }
div#footnote { border: 1px dotted #999; border-left: none; margin-bottom: 15px; padding: 5px; padding-left: 0; }

/*Photo Essay Elements*/
.photo_post img { border: 3px solid #000; padding:0; margin: 0; }
.photo_post { width: 706px; margin-bottom: 30px; margin-left: -3px; padding-bottom: 5px; position: relative; background-color:#000; }
.photo_post img { margin: 0; padding: 0; } 
.photo_caption { margin: 0; margin-top: 10px; padding: 0; width: 650px; clear: both; background-color: #000; padding-left: 5px; }
.photo_caption p{ margin: 0; padding: 0; font-size: 12px; color: #CCC; font-family: Arial, Helvetica, sans-serif;}
.photo_number { position: absolute; right: 0; bottom: 0; font-family: Arial, Helvetica, sans-serif; color: #CCC; padding: 0; margin: 0; }


/*Contributor Elements*/
.bio_container{ width: 700px; padding-top: 20px; background-color: #FFFFFF; text-align: left; } 
.bio_name { font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-size: 20px; color: #333; line-height: 20px; margin-bottom: 3px; }
.bio_title_blue { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-transform:uppercase; color: #06F; font-weight: bold; margin-bottom: 3px; }
.bio_title_green { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-transform:uppercase; color: #060; font-weight: bold; margin-bottom: 3px; }
.bio_title_orange { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-transform:uppercase; color: #930; font-weight: bold; margin-bottom: 3px; }
.bio_copy { font-family: "Times New Roman", Times, serif; font-size: 13px; line-height: 18px; color: #666666; padding-bottom: 10px; }
.bio_image { float: left; margin-right: 15px;  }
div.contributor { margin-top: 25px; padding-bottom: 25px; }
div.thanks, div.thanks_last { width: 150px; float: left; padding:0; margin: 0; padding-right: 33px; }
div.thanks_last { padding: 0; }
p.thanks_name { font-weight: bold; font-size: 14px; margin:0; padding-top: 3px; padding-bottom: 3px; } 
p.thanks_title { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 0; margin: 0; letter-spacing: .25px; font-weight:bold; }
p.thanks_copy { font-family: "Times New Roman", Times, serif; font-size: 13px; color: #666666; margin:0; padding:0; }


/*Contribute Elements*/

#signup_form { width: 450px;/* height: 350px;*/ float: left; }
.follow { width: 215px; float: left; /*border: 1px solid #000;*/ border-right: 1px  #CCC solid; padding: 5px; }
.follow_title { font-family: Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; color: #930; padding: 0; margin: 0; }
.follow_title a {color: #930; }
.left_container { width: 450px; position: relative; margin: 0; padding: 0; float: left;}
.right_container { width: 215px; margin-left: 23px; padding:0; float: left;}
.contribute_content { width: 450px; padding: 0; float: left; margin-bottom: 15px; margin: 15px 0 15px 0; }
.contribute_content p { padding: 0; margin: 0; font-size: 15px; line-height: 20px; }
.contribute_content ul, .contribute_content li { font-family: Arial, Helvetica, sans-serif; }

/*Share Elements*/
.share h4 { /*display: inline;*/ float: left; margin-top: 3px; font-weight: normal; }
.share { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #006699; font-weight: bold; }
.share li, .share ul { display: inline; padding: 0; margin: 0; list-style-type: none; height: 12px;}
div.share  { /*float: right;*/ padding: 0; margin: 0; }
.share img { /*float: right;*/ padding-left: 3px; margin-top: -2px;}

/*Lightbox Styles*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/lightbox/prevlabel.gif) left 100% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/lightbox/nextlabel.gif) right 100% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }