/*
Author:     Sander Tiekstra
Company:    Tiekstramedia, http://tiekstramedia.nl
*/

/*	Reset styles
	= based onHTML 5 Boilerplate (http://html5boilerplate.com)
-------------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block;
}
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

html { overflow-y: scroll; }

a:hover, a:active, a:focus { outline: none; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

nav ul { list-style: none; }
nav ul, nav li { margin: 0; }

small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }


/*	Master styles
-------------------------------------------------------------------- */
html {
	overflow-y: scroll;
	font-size: 1.25em;
}

body {
	color: #333;
	font-family: Helvetica, Arial, sans-serif;
	font-size: .5em;
}

p, ul, ol {
	font-size: 1.3em;
	line-height: 1.5385em;
	margin-bottom: 1.5385em;
}

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


/*	Layout basics
-------------------------------------------------------------------- */
header {
	background-color: #f9f9f9;
	background-position: 0 100%;
	background-repeat: repeat-x;
	border-style: solid;
	border-top-width: .3em;
	border-bottom-width: .1em;
	-webkit-box-shadow: 0 0 5em rgba(0, 0, 0, .15);
	   -moz-box-shadow: 0 0 5em rgba(0, 0, 0, .15);
	        box-shadow: 0 0 5em rgba(0, 0, 0, .15);
	border-bottom-color: #d3d3d3;
	height: 12.2em;
	width: 100%;
	position: fixed;
}
	.ie6 header, .ie7 header {
		position: static;
		background: url('img/bg.header.png') 0 100% repeat-x;
	}

header hgroup {
	margin: 0 auto;
	padding: 2.4em 25em 0 1em;
	position: relative;
	width: 46em;
	height: 6.8em;
}

header hgroup h1 {
	font-size: 3.6em;
	height: 3em;
	position: absolute;
	right: .2778em;
	top: 0;
}

header hgroup h1.hidden {
	display: none;
}

header hgroup h1 img {
	display: block;
}	

header hgroup h2 {
	display: inline;
	font-size: 2.8em;
	margin: 0;
}

header hgroup h3 {
	font-size: 2.2em;
	font-weight: normal;
}

nav {
	padding-top: 12.5em;
	position: fixed;
	text-align: center;
	width: 100%;
}
	.ie6 nav, .ie7 nav {
		padding-top: 0;
		position: static;
	}

nav ul {
	font-size: 1em;
	margin: -1.5em auto;
	position: relative;
	width: 72em;
}
	.flexbox nav ul {
		-webkit-box-orient: horizontal;
		   -moz-box-orient: horizontal;
		display: -webkit-box;
	    display: -moz-box;
	}

nav ul li {
	float: left;
	margin: 0 1em;
	width: 16em;
}
	.flexbox nav ul li {
		-webkit-box-flex: 1;
		   -moz-box-flex: 1;
		float: none;
	}
	.ie6 nav ul li, .ie7 nav ul li {
		display: inline;
	}
	
nav ul li a {
	background-color: #ccc;
	background-image: url('img/bg.gradient-nav.png');
	background-repeat: repeat-x;
	border: .0714em solid #ccc;
	-webkit-border-radius: 1.1em;
	   -moz-border-radius: 1.1em;
	   -pie-border-radius: 15px;
	        border-radius: 1.1em;
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	   -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	        box-shadow: 0 0 1em rgba(0, 0, 0, .1);
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	padding: .5em 0;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
	.ie6 nav ul li a {
		background-image: url('img/bg.gradient-nav.gif');
	}

nav ul li.active a,
nav ul li.active a:focus,
nav ul li.active a:hover {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

nav ul li a:hover,
nav ul li a:focus {
	color: #000;
}

#content {
	margin: 0 auto;
	width: 70em;
	padding: 12.5em 1em 0 1em;
	overflow: hidden;
}
	.ie6 #content, .ie7 #content {
		padding-top: 0;
	}

#content h1 {
	font-size: 2em;
	font-weight: 100;
	line-height: 1em;
	margin: 2.75em 0 .75em 0;
}

#content section {
	float: left;
	width: 46em;
}

#content section span.video,
#content section span.audio,
#content section span.doc {
	background-repeat: no-repeat;
	height: 15px;
	width: 15px;
	margin-right: 10px;
	margin-top: 2px;
	float: left;
	display: block;
}

#content section span.video {
	background-image: url('img/icn.video.png');
}
	.ie6 #content section span.video {
		background-image: none;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/icn.video.png', sizingMethod='image');
	}

#content section span.audio {
	background-image: url('img/icn.audio.png');
}
	.ie6 #content section span.audio {
		background-image: none;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/icn.audio.png', sizingMethod='image');
	}

#content section span.doc {
	background-image: url('img/icn.doc.png');
}
	.ie6 #content section span.doc {
		background-image: none;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/icn.doc.png', sizingMethod='image');
	}
	
#content section ul {
	background-color: #f9f9f9;
	font-size: 1em;
	border-top: .1em solid #e6e6e6;
	border-bottom: .1em solid #e6e6e6;
	list-style: none;
	margin: 0 0 2em 0;
	padding: 1em 0;
}

#content section dl {
	background-color: #f9f9f9;
	border-top: .1em solid #e6e6e6;
	border-bottom: .1em solid #e6e6e6;
	margin: 0 0 2em 0;
	padding: 0 1em 1em 5em;
}

#content section ul li,
#content section dl dd,
#content section dl dt {
	font-size: 1.3em;
	line-height: 1.5385em;
}

#content section ul li {
	margin: 0 .7692em;
}

#content section dl dt {
	float: left;
	font-weight: bold;
	display: block;
	margin-left: -3.0769em;
	width: 2.6923em;
	padding-top: 10px;
}
	.ie6 #content section dl dt {
		display: inline;
	}

#content section dl dt + dd {
	padding-top: 10px;
}
	.ie6 #content section dl dd.after-dt {
		padding-top: 10px;		
	}


#content section ul.chapters {
	background-color: transparent;
	padding: 0;
	border-bottom: 0;
}

#content section ul.chapters dl,
#content section ul.chapters ul {
	border: 0;
}

#content section ul.chapters ul {
	border: 0;
	margin: 0;
	padding: .4em 0 1em 0;
}

#content section ul.chapters dl {
	margin: 0;
	padding: -.6em 1em 1em 5em;
}


#content section ul.chapters li {
	border-bottom: .1em solid #e6e6e6;
	font-size: 1em;
	margin: 0;
}

#content section ul.chapters li a {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 2.333em;
	padding: 0 .6667em 0 3.3333em;
}

#content section ul.chapters li a:hover,
#content section ul.chapters li.animate.open a:hover {
	background-image: url('img/btn.chapter-toggle.png');
	background-position: 97% 13px;
	background-repeat: no-repeat;
}

#content section ul.chapters li.open a:hover,
#content section ul.chapters li.animate a:hover {
	background-position: 97% -87px;
}

#content section ul.chapters li * a {
	color: #333;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.5385em;
	padding: 0;
}

#content section ul.chapters li * a:hover {
	background-image: none;
}

#content section ul.chapters li a:hover,
#content section ul.chapters li.animate,
#content section ul.chapters li.open {
	background-color: #f9f9f9;
}

#content section ul.chapters ul li {
	border: 0;
	font-size: 1.3em;
	padding: 0 .7692em 0 3.8462em;
}

#content aside {
	float: right;
	width: 22em;
}

footer {
	bottom: 0;
	clear: both;
	overflow: hidden;
	padding: 4em 1em 0 1em;
	text-align: right;
	width: 70em;
}

footer p {
	color: #999;
	font-size: 1.1em;
	line-height: 1.8182em;
}

footer a {
	color: #999;
	text-decoration: underline;
}

#overlay {
	background-color: #333;
	display: none;
	height: 100%; width: 100%;
	top: 0; right: 0; bottom: 0; left: 0;
	opacity: .8;
	-moz-opacity: .8;
	filter:alpha(opacity=80);
	position: absolute;
}

#player {
	color: #fff;
	display: none;
	height: 240px; width: 320px;
	top: 50%; left: 50%;
	position: absolute;
}

#player .wrapper {
	background: #000 url('img/bg.gradient-nav-active.png') repeat-x 0 0;
	-webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 1);
	   -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 1);
	        box-shadow: 0 0 2em rgba(0, 0, 0, 1);
}
	.ie6 #player .wrapper {
		background-image: none;
	}

#player #audio-player,
#player #video-player {
	display: none;
}

#player.audio #audio-player,
#player.video #video-player {
	display: block;
}

#player #player-close {
	background-image: url('img/btn.close-player.gif');
	background-color: #333;
	border: 0;
	cursor: pointer;
	float: right;
	height: 18px;
	right: 10px;
	top: -18px;
	width: 20px;
	overflow: hidden;
	position: absolute;
	text-indent: -777em;
}
	.rgba #player #player-close {
		background-color: rgba(0, 0, 0, .3);
	}
	
#player #player-close:hover,
#player #player-close:focus {
	background-color: #333;
	height: 20px;
	top: -20px;
}

#player h1 {
	display: none;
}

#player.audio h1 {
	font-size: 1.3em;
	font-weight: normal;
	display: block;
	line-height: 40px;
	margin: 0 10px;
	padding: 0 10px;
}
	.rgba #player.audio h1 {
		border-bottom: 1px solid rgba(255, 255, 255, .2);
		line-height: 39px;
	}
	
#player p {
	color: #fff;
	font-size: 1.3em;
	font-style: italic;
	font-weight: normal;
	display: block;
	line-height: 40px;
	padding: 0 10px;
}

#player a {
	color: #fff;
	text-decoration: underline;
}