@import url("reset.css");

/* @override http://pilgrim.lab/assets/styles/pilgrim.css */

body {
	margin: auto;
	
	/* Default font settings. 
	The font-size percentage is of 16px. (0.75 * 16px = 12px) */
	font-size: 75%;
	color: #fff;
	background: #000;
	font-family: HelveticaNeue-Light, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div#container {
	width: 800px;
	margin: 100px auto 2em auto;
}

div#content {
	height: 498px;
	border-bottom: 1px solid #fff;
	margin-bottom: 1em;
	overflow: hidden;
}

h1, h2, h3 {
	font-family: HelveticaNeue-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
}

h2, h3  {
	font-size: 1.2em;
	text-transform: uppercase;
	letter-spacing: 1px;
	
	float: left;
	margin-right: 5px;
}

h3 { color: #999; }
p { clear: left; margin-bottom: 1em;}
a { text-decoration: underline; color: #fff; }

/* Film Grid
-------------------------------------------------------------- */

ul#film_grid { margin-bottom: 1em; }

ul#film_grid li {
	float: left;
	margin: 2px;
	height: 88px;
	width: 156px;
	overflow: hidden;
}

ul#film_grid li a { display: block; height: 100%; width: 100%; }
ul#film_grid li a:hover { position: relative; top: -88px; }

/* Film Title
-------------------------------------------------------------- */

div#film_title { height: 1.2em; margin-bottom: 1em; }

/* Film Viewer
-------------------------------------------------------------- */

div#film_view { width: 100%; height: 100%; overflow: hidden; }

div#film_holder {
	width: 512px;
	height: 304px;
	margin: 0 auto 1em auto;
	background-image: url(/assets/images/loader.gif);
	background-attachment: fixed;
	background-position: center 236px;
	background-repeat: no-repeat;
}

div#film_info { width: 512px; margin: auto; }

/* About
-------------------------------------------------------------- */

div#about { margin: 88px 166px; }

/* Navigation
-------------------------------------------------------------- */

ul#menu {
	padding: 0;
	margin: 0;
	
	font-weight: 300;
	font-size: 1.4em;
	text-transform: uppercase;
	letter-spacing: 1px;
	
	color: #999;
}

ul#menu li {
	list-style: none;
	display: block;
	float: left;
	padding: 0;
	margin: 0 10px 0 0;
}

ul#menu li a {
	display: block;
	height: 100%;
	width: 100%;
	
	text-decoration: none;
	color: #ccc;
}

ul#menu li a:hover { color: #fff; }

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }