/* CSS Document 

Riding Lights Theatre Company

Project: Salaam Bethlehem - Christmas Tour 2007
Date: 21.09.2007
Author: Benjamin Colchester
Version: 0.2

Acknowledgments to the Great Noodly Appendage aka Oliver Turner aka The Don

*/

/*-------------------------------------------------------------

Redefine Tags

-------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	border: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	}

body {
	color: #000;
	background-color: #3e3e3e;
	}
	
	body.blank { background-image: none; background-color: #FFFFFF;}

h1 {
	font-size: 24px;
	}
	
.theplay_heading { display: block;}

h2 {
	font-size: 11px;
	}
	
h3 {
	font-size: 9px;
	}	

p {
	background: inherit;
	}

a { color: #000; }

/*-------------------------------------------------------------

Utility Classes

-------------------------------------------------------------*/

.clear {
	display: block;
	clear: both;
	font-size: 0;
	}
	
/*-------------------------------------------------------------

Main Layout

-------------------------------------------------------------*/
	
#container {
	margin: 0px auto;
	width: 750px;
	height: 742px;
	background: #3e3e3e;
	}
	
	#container.blank { background-image: none; background-color: #FFFFFF;}

.blank_bg { background: url(../images/sb_body_bg.png) center no-repeat;}
.theplay_bg {background: url(../images/sb_body_bg_theplay.png) center no-repeat;}
.theproject_bg {background: url(../images/sb_body_bg_theproject.png) center no-repeat;}
.thecompany_bg {background: url(../images/sb_body_bg_thecompany.png) center no-repeat;}
.walltowall_bg {background: url(../images/sb_body_bg_walltowall.png) center no-repeat;}
	
#main { height: 100%;}

.home_bg {background: url(../images/sb_body_bg_home.png) center no-repeat;}
.company_bg {background: url(../images/company_bg.gif) center no-repeat;}
.general_bg {background: url(../images/general_bg.gif) center no-repeat;}
.project_bg {background: url(../images/sb_body_bg_theproject.png.png) center no-repeat;}
	
	#main #content {
		display: block;
		height: 610px;
		width: 610px;
		overflow: auto;
		padding: 0px 10px 0px 10px;
		margin: 0px 60px 25px 60px;
		}
		
		#main #content h3 {color: #cc0000; margin-top: 0px;}
			#main #content h3.italic_green { font-style:italic; color: #006600;}
		

#calender {float: left; width:100px; height: 100px; z-index: 3; position: absolute; top: 0; left: 0; margin-left:12px; background-color: #3e3e3e}
	
		#main #content a:hover {color: #666666;}

		#main #content a.contact {text-decoration: underline;}
		
		#main #content #left_content {float: left; width: 290px; padding-top: 100px; padding-right: 10px; text-align: left; font-size: 12px;}
		
			#main #content #left_content .italic_large { font-style:italic; font-weight:900; font-size: 14px;}
		
			#main #content #left_content a:hover { color: #666666;}
			#main #content #left_content a.underline { text-decoration: underline;}
			
			
.italic { display: inline; font-style:italic; font-weight:900;}
.italic_large { display: inline; font-style:italic; font-weight:900; font-size: 16px;}
.italic_light_small { display: inline; font-style:italic; font-weight:normal; font-size: 8px;}
.italic_light { display: inline; font-style:italic; font-weight:normal;}
.italic_coming { display: block; font-style:italic; font-weight:900; margin-top: 20px; text-align:left;}
.italic_coming_red { display: block; font-style:italic; font-weight:900; margin-top: 10px; text-align:left; color: #CC0000;}
.italic_center { display: block; font-style:italic; font-weight:900; margin-top: 10px; text-align: center;}
.italic_green {color: #006600;}
.general { display: inline;}
.general_small { display: inline; font-size:8px;}
.bold_link { font-weight:900;}
.bold_link_inactive { font-weight:900; color: #999999;}
.cc_link {font-size: 9px;}
a:hover.cc_link {color: #49AFEB;}
.underline { text-decoration: underline;}
			
/*--------------------------------------------------------------------------------------

Navbar

----------------------------------------------------------------------------------------*/

	#main #navbar {
		position: relative;
		float: none;
		width: 655px;
		height: 50px;
		margin: 0px auto;
		padding: 0 0 0 95px;
		} 
			
		#main #navbar ul {}
		#main #navbar li {
			float: left;
			list-style-type: none;
			display: inline;
			display: block;
			width: auto;
			height: 32px;
			padding-top: 18px;
			text-align: center;
			margin-right: 20px;
			}
			
		#main #navbar li a {
			text-decoration: none;
			font-size: 12px;
			font-weight: 800; 
			color: #000000;
			}
			
			#main #navbar li a.active {color: #666666;}
			
			#main #navbar li a:hover {
				color: #CCCCCC;
				border-bottom: #000000 1px dashed;
				border-top: #000000 1px dashed;
				}
							
/*--------------------------------------------------------------------------------------

Page Content

----------------------------------------------------------------------------------------*/

		#main #content #contact_bg {	
			display: block;
			width: 400px;
			height: 300px;
			margin: 20px auto;
			text-align: center;
			} 
			
			#main #content #contact_bg p {margin-left: 30px; padding-bottom: 20px;}
	
		#main #content #actor_container {
			display: block;
			height: auto;
			text-align: left;
			padding-left: 110px;
			margin-bottom: 20px;
			border-bottom: #000000 dashed 2px;
			padding-bottom: 20px;
			}
			
			#main #content #actor_container p.general_small em {font-size: 9px;}
			#main #content #actor_container p.general_small {display: inline; font-size:9px; background: none; padding-bottom: 20px; line-height: 12pt;}
			#main #content #actor_container	p.italic_light_small { display: inline; font-style:italic; font-weight:normal; font-size: 9px; background: none;}
			
.sharron {background: #fff url(../images/actors_sharron.gif) top left no-repeat;}
.fred {background: #fff url(../images/actors_fred.gif) top left  no-repeat;} 
.sam {background: #fff url(../images/actors_sam.gif) top left  no-repeat;} 
.rhian {background: #fff url(../images/actors_rhian.gif) top left no-repeat;} 
.suzanna {background: #fff url(../images/actors_suzanna.gif) top left  no-repeat;} 
.paul {background: #fff url(../images/creative_paul.gif) top left  no-repeat;} 
.sean {background: #fff url(../images/creative_sean.gif) top left  no-repeat;} 
.bridget {background: #fff url(../images/creative_bridget.gif) top left  no-repeat;} 
	
	#main #content h2 {
		font-size: 20px;
		color: #000;
		text-align: center;
		margin-top: 20px;
		margin-bottom: 20px;
		border-bottom: 2px dashed #000;
		padding-bottom: 10px;
		}

	#main #content h3 {
		font-size: 12px;
		margin: 0 0 5px 0;
		}
		
	#main #content h4 {
		font-size: 9px;
		}
		
	#main #content p {
		font-size: 11px;
		} 
			
/*--------------------------------------------------------------------------------------

Tour Location - Table Layout

----------------------------------------------------------------------------------------*/

table.locations { 
	table-layout: fixed;
	width: 600px;
	height: auto;
	}

th.locations { 
	width: auto;
	color: #ffffff;
	text-align:center;
	font-size: 1.2em;
	background-color: #000;
	padding-top: 5px;
	padding-bottom: 5px;
	}
	
th.leaflet {
	width: 50px;
	color: #ffffff;
	text-align:center;
	font-size: 1.2em;
	background-color: #000;
	padding-top: 5px;
	padding-bottom: 5px;
	}

	
th.locations_sub { 
	width: auto;
	color: #ffffff;
	text-align:center;
	font-size: 1.2em;
	background-color: #333333;
	padding-top: 5px;
	padding-bottom: 5px;
	}

tr { 
	font-size: 0.8em; 
	text-align:center;
	color: #000000;
	}
	
tr.normal {background-color: #ffffff;}
	
td {
	height: 30px;
	}
	
	td.column1 {background: #666666; color: #FFFFFF;}
	td.leaflet {background-color: #333333; color: #FFFFFF; width: 50px;}
	td.column1_red {background: #336600; color: #FFFFFF;}
		td.column1 a {text-decoration: underline; background: #666666; color: #FFFFFF;}
		#main #content td.column1 a:hover {color: #EFCA4C;}
	
	td a {color: #FFFFFF;}
	td a:hover {color: #a10e06;}


/*--------------------------------------------------------------------------------------

Footer

----------------------------------------------------------------------------------------*/

#footer {
	clear: both;
	text-align: center;
	font-size: 9px;
	}
	
/*-------------------------------------------------------------

Lightbox 2.0 

-------------------------------------------------------------*/

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#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: transparent url(../images/blank.gif) no-repeat; /* 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/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


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

#imageData{	padding:0 10px; color: #000; }
#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;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}