@charset "utf-8";
/* CSS Document */

/* Resets */
* { border: 0; }

/* Global background, text color and the font properties */
body {
	background: #000;
	color: #ddc096;
	/* font: 14px/20px 'UbuntuRegular', Arial, sans-serif; */
	/* font: 14px/20px GreyscaleBasicRegular, Arial, sans-serif; */
	/* font: 14px/20px LatinModernSans10Regular, Arial, sans-serif; */
	font: 13px/18px OpenSansRegular, Tahoma, Arial, sans-serif;
	/* font: 14px/20px PerspectiveSansRegular, Tahoma, Arial, sans-serif; */
}

/* Clearing top-level margins */
html, body { margin: 0 }

.article {
	min-height: 100%;
	height: 100%;
}

/* MAIN ELEMENTS */
a { text-decoration: none }
a:link { color: #ddc096 }
a:visited { color: #ddc096 }
a:hover { color: #BD8A3E }
.fontface h1, .fontface h2, .fontface h3, .fontface h4, .fontface h5, .fontface h6 { font-family: OregonLDORegular; margin-bottom: 1em; line-height: 1em }
.no-fontface h1, .no-fontface h2, .no-fontface h3, .no-fontface h4, .no-fontface h5, .no-fontface h6 { font-family: Verdana; font-weight: bold; margin-bottom: 1em; line-height: 1em }
/*h1 { font-size: 40px }
h2 { font-size: 32px }
h3 { font-size: 20px }
h4 { font-size: 16px }*/
h1 { font-size: 36px }
h2 { font-size: 24px }
h3 { font-size: 21px }
h4 { font-size: 18px }

p { margin: 24px auto }

/* FOLLOWING PAGE FLOW */
/* Centering the page */
#wrapper {
	width: 1000px;
	margin: 0 auto;
}

/* Correcting the gap that forms between the header and the nav */
#header { margin-bottom: -8px }

/* The nav wrapper. It fixes the height and sets the background */
.headnav-container {
	height: 52px;
	margin-bottom: 10px;
	padding-top: 8px;
	background: url("/images/nav-background.png") bottom center no-repeat;
}

/* The <UL> */
.headnav-list {
	margin: 0;
	list-style-type: none;
	text-align: center;
}

/* The individual <LI> items */
.headnav-item {
	width: 200px;
	height: 40px;
	background: url("/images/nav-item-small.png") top center no-repeat;
	display: inline-block;
}

/* ..and the links themselves */
.headnav-item a { display: block; padding-left: 8px; color: #372317 }
.fontface .headnav-item a { font: 28px/42px GnuolaneFree; } /* For browsers that support @font-face */
.no-fontface .headnav-item a { font: bold 18px/42px Tahoma, Verdana, sans-serif; } /* And for browsers that don't */
.headnav-item.selected a { color: #6C1313; }

/* Giving each news post some breathing room */
.news-wrapper { margin-bottom: 80px }

/* Giving the post content some too */
/*.news-header { margin-bottom: 20px }*/
/* .news-body { margin-top: 14px } */

/* The date block is an 'inline block' on the same line as the news heading (IE<7 doesn't play well with "inline-block" and this is the point at which i dropped support for it) */
.news-date {
	width: 55px;
	height: 55px;
	display: inline-block;
	background: url("/images/newsBg.png") 0px 3px no-repeat;
	text-align: center;
	vertical-align: middle;
	margin-right: 20px;
}

/* Fine-tuning the heading elements */
.news-date-day, .news-date-month, .news-date-year { margin-top: 0px } /* Clearing top margins to prevent some browsers from spacing out the elements too much on their own */
h1.news-heading { display: inline-block; margin: auto auto 0 auto; vertical-align: text-top }
.news-date-month, .news-date-day, .news-date-year { display: block }
.news-date-month { font-size: 14px; text-transform: uppercase }
.news-date-day { font-size: 28px; margin: 4px auto }
.news-date-year { font-size: 10px }

/* Floating the side nav to the left and fixing the width so the main content can go beside it */
#sidenav {
	width: 280px;
	float: left;
	margin-bottom: 50px;
	padding-left: 20px;
}

/* Spacing out the nav blocks and clearing the bullets */
.sidenav-list { margin-top: 20px; list-style-type: none; padding-left: 0; }
.sidenav-list-2 { margin: 5px auto 10px }

/* Setting the custom bullets for the chapter headings and formatting them */
.sidenav-heading {
	background: url("/images/pentagram.png") 0% 50% no-repeat;
	padding: 0 0 0 35px;
	font: 600 24px/30px OregonLDORegular, Tahoma, sans-serif;
	margin-bottom: 6px;
}

/* Margin for the sidenav items (<LI>) */ .sidenav-item { margin: 2px auto auto 36px }

/* Sidenav fonts */
.fontface .sidenav-item { 	font: normal 16px OregonLDORegular }
.no-fontface .sidenav-item { 	font: normal 15px Tahoma, Verdana, sans-serif }

/* Selected state */
.sidenav-item .selected, .sidenav-item-2 .selected { color: #BD8A3E }
a.sidenav-item-selected-stuff { color: #BD8A3E }
a.sidenav-item-selected-stuff:after { content: " >>" }


/* Floating the main section of "Secrets" to the left as well */
#main.secrets, #main.shortcuts {
	width: 700px;
	float: left;
	text-align: center;
}

#main.article {
	width: 650px;
	float: left;
	text-align: center;
	padding-left: 50px;
}

#main.about h1 { margin: 1.5em auto 0.25em }
#main.about a { font-weight: bold }

#sidenav, #main {
	margin-bottom: 50px;
}

/* The container for the actual video object. Backgrounds are set dynamically from functions.php as an inline style attribute. */
#video {
	width: 660px;
	height: 520px;
	margin: 0 auto;
	padding-top: 4px;
}

/* The container for the stuff below the video object. Its width is supposed to match the video object itself so everything aligns nicely. */
#video-footer {
	width: 660px;
	margin: 0 auto;
	padding-right: 14px;
}

/* Index navlinks are now below the video. They share a line with the alt-link (where applicable) and are stuck to the left edge of the container by "float" */
#videonav {
	display: inline;
	float: left;
}

/* The video nav <UL>, formatted as usual */
.videonav-list {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}

/* Those are the <LI> elements, spaced out a bit */
.videonav-video {
	display: inline;
	margin: 0 8px;
}

/* The elusive alt link will stick to the right edge of its container when it appears, on the same line as the nav */
.video-altlink {
	display: inline;
	float: right;
	text-align: right;
	text-transform: uppercase;
	font-size: 12px;
}

.video-altlink a { font-size: 30px }
.video-altlink p { margin: 0; font-size: 10px }

/* Making sure the footer clears everything */
#footer {
	clear: both;
	margin: 0 auto;
	text-align: center;
}

/*#footer-sticky {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}*/


/* Setting the footer nav height and background as usual */
.footnav-container { background: url("/images/footer-nav-bg.png") top left repeat-x; height: 77px; }

/* <UL> */
.footnav-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

/* Since these <LI>s are simple text and not graphics, they're simply inline. This helps maximize the clicking area as well since we can now use "line-height" to make them nice and big */
.footnav-item {
	display: inline;
	line-height: 68px;
	margin: 0 15px;
}

/* The anchors inherit the "line-height" property from their <LI> parents so we just style them up a bit */
.fontface .footnav-item a { text-transform: uppercase; font: 18px GnuolaneFree; } /* @font-face SUPPORTED */
.no-fontface .footnav-item a { text-transform: uppercase; font: bold 12px Tahoma; } /* @font-face NOT supported */

/* Copyright block */
.legal { font-size: 9px; line-height: 1.75em }