/* 
 * Universal 
 */

html { overflow-y: scroll; }

body { font-size: 12px; line-height: 1.7em; background: #232323; font-family: arial, helvetica; color: #eee; text-align:center; margin: 0px auto;}

#container { width: 956px; margin-left: auto; margin-right: auto; display: block; text-align: left; margin-top: 36px;  }

.textfooter { top: 20px; }
.qmediafooter { bottom: 136px; }
.videofooter { bottom: 50px; }
.under_construction_footer { margin-left: auto; margin-right: auto; top: 22px; }

#footer { position: relative; clear: both; width: 945px; color: #ddd; font-size: .8em; border-top: 1px solid #79403f; }
#footer .left, #footer .right, #footer .center { padding-top: .8em; }
#footer .left { float: left; width: 20%; }
#footer .right { width: 80%; float: right; text-align: right; }
#footer .center { }

#wrapper { position: relative; width: 100%; }

#logo { margin-bottom: 50px; }

#leftnav { position: relative; float: left; width: 125px; }

#col2 { position: relative; float: left; z-index: 1; }

/* 
 * Text Pages 
 */
#callout { position: relative; float: left; margin-left: 35px; } 
.text { width: 365px; }

/* 
 * Media Pages 
 */
/* bottom: 175px; */
.mediatopnav { width: 100px; }
#mediawrapper { position: relative; float: left; left: -90px; width: 700px; }
#media { position: relative; left: 155px;  width: 666px; top: -108px;  }
#video { width: 666px; position: relative; left: 0px; }
#spotlist { position: relative; left: 0px; }
#spotlist table { border-spacing: 0em 1.2em; }
#spotlist .keyframe { float: left; border-color: yellow; }
#spotlist .metadata { color: #eee; vertical-align: bottom; padding-left: 1em; width: 40%; font-size: .75em; }
#directorcollage { position: relative; top: 108px; } /* Top shifted by the same amount as #media->top */
#mediabottomnav { position: absolute; bottom: 108px; font-size: .9em; line-height: 1.3em; } /* Bottom shifted by the same amount as #media->top * -1 */
#videobottom { position: absolute; bottom: -27px; left: 0; width: 666px; font-size: .9em; }
#videobottom .left { float: left; }
#videobottom .right { float: right; }
#videobottom .title { font-weight: bold; }
#videobottom img { vertical-align: middle; }

/* 
 * Spots 
 */
.spot { position: relative; width: 90px; height: 90px; float: left; margin-bottom: 10px; }
.break { position: relative; clear: both; }

/*
 * Awards
 */
#awards .film .title { color: #fb6b68; clear: both; }
#awards .left { float: left; clear: both; width: 210px; }
#awards .right { position: relative; left: 65px; }
#awards .film.title, #awards .film.award {}
#awards .festival { margin-bottom: 30px; }

/* 
 * Development 
 */
#film { position: relative; left: 340px; width: 395px; }
#poster { margin-bottom: 1.3em; }
.filmtopnav { width: 305px; }
#filmwrapper { position: relative; float: left; left: -305px; width: 400px; } /* left is .projecttopnav->width * -1 */
.filmfooter { bottom: -28px; }
.review { margin-bottom: 28px; }
.social_media_icons { margin-top: 1em; font-size: .8em; } 
.social_media_icons a { color: white; }
.social_media_icons img { margin-right: 2px; vertical-align: top; }

/* 
 * Bio
 */
.bioname { qtext-transform: uppercase; }
.biotitle { padding-bottom: .8em; }
 
/* 
 * Debug 
 */
#projectwrapper { border-color: purple; }
div { border: 0px solid red; }
#wrapper { border-color: blue; }
#mediawrapper { border-color: orange; }
#videobottom { border-color: green; }
#video { border-color: red; }
#media { border-color: white; }
.spot { border-color: red; }
#spotlist { border-color: red; }

/*----------------------------------- 
 * 
 * Old CSS starts here. 
 * 
 */

p 	{
	margin-top: 0px;
	padding-top: 0px;
	}

a, a:hover, a:active, a:focus 	{ 
	outline: none;
	color: #76f0e0	; 
	text-decoration: none;
	}

img { border: 0px; }

#home-floater { height:50%; margin-bottom: -235px; } /* margin-bottom set to half the height of the tallest element. */
#home-container { height: 100%; text-align: center; margin-left: auto; margin-right: auto; }
#home-table { width: 956px; position:relative; margin-left: auto; margin-right: auto; }
#home-table img { display: block; margin-left: auto; margin-right: auto; }

#spot_metadata { margin-top: 5px; float: left; }
#spot_metadata .client, #spot_metadata .agency, #spot_metadata .title { font-size: .9em; }
#spot_metadata .title { font-weight: bold; }
#spot_metadata .left { float: left; }
#spot_metadata .right { font-size: .8em; float: right; padding-right: 0px; margin-right: 0px; }
#spot_metadata .right a { margin-left: 7px; }

#contact { margin-top: 45px; }

.sectionname,
.activesectionname {
	margin-left: .4em; 
	margin-right: .4em;
	margin-bottom: 0em;
	line-height: 1.6em;  
	}
	
.sectionname { }

.activesectionname, 
.company,
#login table { 
	color: #fb6b68; 
	}

#directors .activesectionname a {
	color: #fb6b68;
}

#login .error {
	color: #ff8800;
	font-style: italic;
}

#login { 
	margin: 0px;
	padding: 0px;
}

#login table {
		margin: 0px;
		padding: 0px;	
}

#login td {
	font-size: .85em;
}

#login input { 
	background: #aaa;
	border: 1px solid #131313;
}

.address .company { 
	text-transform: uppercase;
	}

.contact { 
	margin-top: 1.2em;
	}

.contact .name,
.address .company { 
	font-size: 1.1em;
	}