/*
 ################################
 #			  	#
 #          BASE CSS     	#
 #				#
 ################################
 */
 @import url('https://fonts.googleapis.com/css?family=Roboto:100,300');

 @media all {

 * { margin:0; padding:0; }

 /* untag next line for debugging only */
 /*  div { border: 1px solid #f2e; } */

 .clear-all { clear:both; display:block; margin:0; padding:0; height:0; line-height:0px; font-size:0px; }

 html,body { height:100%; padding:0; margin:0; }

 body { font:74%/1.6 Arial, Helvetica, sans-serif; background-color:#fafafa; color:#222; }

 #page { margin:0 auto; }
 #page .wrap { padding:0; position:relative; }

 #header, #content, #footer { padding:0; margin:0; }

 #header .wrap, #content .wrap, #footer .wrap { position:relative; }

 #header { margin:50px 0; }
 #header .wrap { padding:0; }
 #content .wrap { padding:50px 0 0 0; }
 #footer .wrap { padding:0; }

 #content .col { float:left; }
 #content p { margin:0 0 8px 0; }

 h1 { color:#628488; font-size:4.5em; font-family: 'Roboto', sans-serif; font-weight:100; margin:0 0 8px 0; line-height:1em; }
 h2 { color:#999; font-size:1.2em; font-family: 'Roboto', sans-serif; font-weight:300; margin:0 0 40px 5px; line-height:1em; letter-spacing:5px;}
 h3 { color:#444; font-size:2.2em; font-family: 'Roboto', sans-serif; font-weight:100; margin:0 0 0 0;  line-height:1em; }

 img { border:0; }

 .project { margin-bottom:80px; position:relative; padding:0;  
 	-webkit-box-shadow: 12px 10px 40px -15px rgba(0,0,0,0.2);
	-moz-box-shadow: 12px 10px 40px -15px rgba(0,0,0,0.2);
	box-shadow: 12px 10px 40px -15px rgba(0,0,0,0.2);
width:100%; height:360px;
	}

 iframe { display:inline-block; width:640px; margin:0; padding:0; height:360px; position:absolute; }
 .info { display:inline-block; width:270px; padding:20px 30px 0 670px; height:340px; vertical-align:top; background-color:#fff; }

 .aka { color:#888; font-size:0.6em; }
 .cat { border:1px solid #aaa;position:absolute;top:20px;right:20px;color:#888; padding:2px 5px; }
 .properties { color:#aaa; margin:-2px 0 15px 0; font-size:1.3em; font-family: 'Roboto', sans-serif; font-weight:300; }

 .credits, .awards, .plot { color:#666; font-size:1em; font-family: 'Roboto', sans-serif; font-weight:300; }
 .credits p, .awards p, .plot p { margin:0 0 8px 0; }

 .no-display { display:none; }

 .placeholder {position:absolute; top:0; left:0; }
 ul.more { position:absolute; bottom:20px; left:670px; font-family: 'Roboto'; list-style:none; text-transform:uppercase; font-size:0.85em; }
 ul.more li { display:inline-block; margin-right:4px; }
 ul.more li a { color:#888; padding:3px 8px; text-decoration:none; }
 ul.more li a:hover {  border-bottom:1px solid #aaa; color:#222;  }
 ul.more li a.selected { border-bottom:1px solid #aaa;  color:#222; }



 }