/*
Title: Shelf Life - A Film by Michael Lahey 
Copyright: (c) 2009
Author: Dennis J. Fesemyer
Company: Fezlab
Description: Main Site Controls

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

@import url("/css/debugging.css");


/* ---------------------------------------------------
=Reset
Takes browser-specific styling and resets it to a
common behavioural standard. Based heavily upon the
Yahoo! User Interface Library Reset:
http://developer.yahoo.com/yui/reset/
--------------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
   }

table {
	border-collapse:collapse;
	border-spacing:0;
   }

fieldset,
img { 
	border:0;
   }

address,caption,cite,code,dfn,th,var,strong{
	font-style:normal;
	font-weight:normal;
   }

ol,ul {
	list-style:none;
   }

caption,th {
	text-align:left;
   }

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
   }

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

abbr,acronym {
   border:0;
   }

html {
   font-size: 100.01%; /* Corrects default font sizing in IE/WIN, and font resizing in Opera. */
   }
   


/* Body - 
structure of the containers and body classes
-------------------------------------------------------- */

html {
height: 100%; /* fix height to 100% for IE */
max-height: 100%; /* fix height for other browsers */
padding: 0; /*remove padding */
margin: 0; /* remove margins */
border: 0; /* remove borders */
background: #fff; /*color background - only works in IE */
font-size: 80%; /*set default font size */
font-family: georgian, serif; /* set default font */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}

body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background: #70311d url(/images/body-bg.jpg) 50% 0 no-repeat;
}

#content {
display:block; /* set up as a block */
height:100%; /* set height to full page */
max-height:100%;
overflow:auto; /* add scroll bars as required */
padding:0; /* pad left to avoid navigation div if required */
position:relative; /* set up relative positioning so that z-index will work */
z-index:3; /* allocate a suitable z-index */
background: transparent url(/images/content-bg.png) 50% 0 repeat-y;
}

.content-body {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
	}
	
	#synopsis-title {
		background: transparent url(/images/synopsis-title.png) 50% -15px no-repeat;
		}
		
	#aboutthefilm-title {
		background: transparent url(/images/aboutthefilm-title.png) 50% -15px  no-repeat;
		}
	
	#gallery-title {
		background: transparent url(/images/gallery-title.png) 50% -15px  no-repeat;
		}
		
	#trailer-title {
		background: transparent url(/images/trailer-title.png) 50% -15px  no-repeat;
		}
		
	#donate-title {
		background: transparent url(/images/donate-title.png) 50% -15px  no-repeat;
		}
	
	.pad-top {
		display:block;
		height:110px; /* height to miss footer */
		}
		
	.pad-bottom {
		display:block;
		height:218px; /* height to miss footer */
		}
		
	
.content-copy {
	margin: 0 220px;
	padding-top: 50px;
	font: normal 14px/20px georgia, serif; color: #220804;
	letter-spacing: .02em;
	background-color: transparent;
	}
	
	.content-copy form {
		border-top: 1px dotted #220804;
		border-bottom: 1px dotted #220804;
		margin: 20px 0;
		padding: 20px 0;
		}
	
	#guy-player {
		float: right;
		margin: -130px -200px 0px 0px;
		position: relative;
		padding: 0;
		display:inline;
		width: 343px;
		height: 300px;
		background: transparent url(/images/guy-player.png) top left no-repeat;
		}
		
	#guy-player a {
		position: absolute;
		width: 343px;
		height: 300px;
		outline: none;
		text-indent: -99999px;
		}
		
	#elmo {
		float: left;
		margin: -10px 25px 0px -240px;
		position: relative;
		padding: 0;
		display:inline;
		width: 254px;
		height: 329px;
		background: transparent url(/images/elmo.png) top left no-repeat;
		}
		
	#elmo span {
		position: absolute;
		width: 254px;
		height: 329px;
		outline: none;
		text-indent: -99999px;
		}
		
	#etching a,
	#etching a:hover{
		float: right;
		margin: 0px -30px 0px 30px;
		position: relative;
		padding: 0;
		display:inline;
		text-indent: -99999px;
		width: 197px;
		height: 400px;
		background: transparent url(/images/etching.png) top left no-repeat;
		}
		
		
	#blueprint {
		float: right;
		margin: -75px 0px 0px 0px;
		position: relative;
		padding: 0;
		display:inline;
		width:  400px;
		height: 188px;
		background: transparent url(/images/blueprint.png) top left no-repeat;
		}
		
	#blueprint span {
		position: absolute;
		width: 400px;
		height: 188px;
		outline: none;
		text-indent: -99999px;
		}
		
	#taste-me {
		float: right;
		margin: -20px -30px 10px 20px;
		position: relative;
		padding: 0;
		display:inline;
		width: 250px;
		height: 181px;
		background: transparent url(/images/taste-me.gif) top left no-repeat;
		}
		
	#taste-me span {
		position: absolute;
		width: 250px;
		height: 181px;
		outline: none;
		text-indent: -99999px;
		}
		
		
	#cashewnut {
		float: right;
		margin: -20px -100px 10px 20px;
		position: relative;
		padding: 0;
		display:inline;
		width: 250px;
		height: 283px;
		background: transparent url(/images/cashewnut.png) top left no-repeat;
		}
		
	#cashewnut span {
		position: absolute;
		width: 250px;
		height: 283px;
		outline: none;
		text-indent: -99999px;
		}
		
	#lanzi-box {
		float: right;
		margin: 75px -200px 10px 20px;
		position: relative;
		padding: 0;
		display:inline;
		width: 300px;
		height: 236px;
		background: transparent url(/images/lanzi-box.png) top left no-repeat;
		}
		
	#lanzi-box span {
		position: absolute;
		width: 300px;
		height: 236px;
		outline: none;
		text-indent: -99999px;
		}
		
		
	#televised {
		float: right;
		margin: -95px -210px 0px 0px;
		position: relative;
		padding: 0;
		display:inline;
		width: 344px;
		height: 268px;
		background: transparent url(/images/televised.png) top left no-repeat;
		}
		
	#televised span {
		position: absolute;
		width: 344px;
		height: 268px;
		outline: none;
		text-indent: -99999px;
		}
				
	#airlines {
		float: left;
		margin: 0px 10px 0px -100px;
		position: relative;
		padding: 0;
		display:inline;
		width: 304px;
		height: 376px;
		background: transparent url(/images/american-airlines.png) top left no-repeat;
		}
		
	#airlines span {
		position: absolute;
		width: 304px;
		height: 376px;
		outline: none;
		text-indent: -99999px;
		}
		
	#lose-weight {
		float: left;
		margin: 20px 10px 0px -50px;
		position: relative;
		padding: 0;
		display:inline;
		width: 225px;
		height: 310px;
		background: transparent url(/images/lose-weight.gif) top left no-repeat;
		}
		
	#lose-weight span {
		position: absolute;
		width: 225px;
		height: 310px;
		outline: none;
		text-indent: -99999px;
		}
		
	#candyisdeliciousfood {
		float: right;
		margin: 10px 0px 10px 10px;
		position: relative;
		padding: 0;
		display:inline;
		width: 94px;
		height: 76px;
		background: transparent url(/images/candyisdeliciousfood.png) top left no-repeat;
		}
		
	#candyisdeliciousfood span {
		position: absolute;
		width: 94px;
		height: 76px;
		outline: none;
		text-indent: -99999px;
		}

#gallery-content {
	clear: both;
	width: 520px;
	float: left;
	margin: 10px 0 0 0;
	display: inline;
	padding: 0;
	}

ul#gallery {
	padding: 0;
	margin-bottom: 250px;
	}
	
ul#gallery li {
	float: left;
	margin: 0 11px 11px 0;
	width: 93px;
	padding: 2px;
	border: 1px solid #d75838;
	height: 87px;
	vertical-align: middle;
	text-align: center;
	width/**/:/**/ 87px;
	background-color: #ebd2a9;
	position:relative;
	}
	

	
ul#gallery li img{
	position:absolute;
	clip:rect(0px 87px 87px 0px);
	top: 2px; left: 2px;
	}
	
	
			
#head {
	position:absolute; 
	margin: 0; 
	right:18px;
	top: 0; 
	display: block; 
	width: 100%; 
	height: 98px; 
	background: transparent url(/images/head-bg.png) 0 0 repeat-x; 
	z-index: 15; 
	}
	
#head-content {
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
	width: 960px;
	text-align: center;
	}
	
#foot {
	position:absolute; 
	margin: 0; 
	bottom: 0; 
	right:18px;
	display: block; 
	text-align: center; 
	width: 100%; 
	height: 218px; 
	background: transparent url(/images/footer-bg.png) 0 0 repeat-x; 
	z-index: 14; 
	}

#foot-logo {
	margin: 0 auto;
	padding: 0;
	text-indent: -99999px;
	width: 960px;
	height: 186px;
	background: transparent url(/images/foot-logo.png) top left no-repeat;
	}
	
/* Universal - 
styles on basic XHTML elements
-------------------------------------------------------- */

a  {
   color: #990000;
   text-decoration: none;
   }

a:hover,
 a:visited {
   color: #993333;
   text-decoration: underline;
   }

p {
   margin: 0 0 10px 0;
   }

strong {
   font-weight: bold;
   }

em, i {
   font-style: italic;
   }

img {
   display: block;
   }

hr {
   border: 0; border-top: 1px dotted #ccc;
   display: block;
   height: 1px;
	width: 100%;
	margin: 1.6em 0 0 0;
   }
      
h1 {
   margin: 0 0 10px 0;
   padding: 0;
   font: normal 2.4em/1em Georgia, serif; color: #333;
   }
   
h2 {
   margin: 1.5em 0 .2em 0;
   padding: 0;
   font: bold 1.9em/1.2em arial, helvetica, sans-serif; color: #333;
   }
   
h3 {
   margin: 1.5em 0 .9em 0;
   padding: 0;
   font: normal 1.6em/1em Georgia, serif; color: #333;
   font-style: italic;
   }
  
   
h4 {
   margin: 1.5em 0 .4em 0;
   padding: 0;
   font: bold 1.1em/1.3em arial, helvetica, sans-serif; color: #369;
   }
   
h5 {
   margin: 1.5em 0 0em 0;
   padding: 0;
   font: bold 1.1em/1.3em arial, helvetica, sans-serif; color: #333;
   }
   
h6 {
   margin: .5 0 0em 0;
   padding: 0;
   font: bold 1.1em/1.3em arial, helvetica, sans-serif; color: #333;
   }
   
.dropcap {
		float:left;
		color: #760101;
		font-size: 60px;
		line-height: 44px;
		font-weight: normal;
		padding-top: 5px;
		margin-right: 4px;
		font-family: georgia, "Times new roman", serif;
		}
		

   

/* Clearfix - 
fixes floats
-------------------------------------------------------- */

.clearfix:after {
   content: ".";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
   }