@charset "UTF-8";
/* Global Reset */
html, body, 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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
img,object,embed {max-width: 100%;}
ul {list-style-type: none;}

/* Clearfix */
.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; overflow: hidden;}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Globals */
body {font-size: 62.5%; background: url(background.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
a {color: #000; text-decoration: underline;}
.article-anchor {display: block; height: 0;}

/* Section */
section {font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Helvetica, sans-serif; font-size: 2.4em;}
header h2 {font-weight: bold; color: #fff;}

/* Title */
#title {position: fixed; left: -50px; right: -50px; top: 0; display: block; z-index: 1000; background: -webkit-linear-gradient(top, #000000 0%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */ background: -ms-linear-gradient(top, #000000 0%,#2b2b2b 100%); /* IE10+ */ background: linear-gradient(to bottom, #000000 0%,#2b2b2b 100%); /* W3C */ border-bottom: 2px solid #ddd; -webkit-box-shadow: 0px 4px 25px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 4px 25px rgba(50, 50, 50, 0.5); box-shadow: 0px 4px 25px rgba(50, 50, 50, 0.5);}
	#title > h1 {text-align: center; color: #fff; font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", "Droid Sans", Arial, Helvetica, sans-serif;}
	#title > a {position: absolute; left: 60px; top: 0; width: 50px; height: 50px; background: transparent url(toc.png) no-repeat top left;}

.header-spacer {display: block; width: 100%; height: 50px;}

/* Logo */
#logo {display: block; width: 75%; margin: 0 auto; text-align: center;}
	#logo img {margin: 30px 0 0 0;}

/* Navigation */
#navigation {position: relative; display: block;}
	#navigation > .article-anchor {position: absolute; top: -60px;}
	#navigation > ul {display: block;}
	#navigation > ul > li {}
	#navigation > ul > li > a {padding: 15px; background: transparent url(white-60.png) repeat; border-left: 8px solid #fff; font-weight: bold; color: #333; text-decoration: none; box-sizing: border-box; -webkit-box-sizing: border-box;}
	#navigation > ul > li > a:hover {background: #fff;}
	
#content {display: block; margin: 20px 0 10px 0;}
	#content > article {position: relative; display: block; margin: 15px 0 0 0; padding: 15px; background: transparent url(white-60.png) repeat;}
	#content > article > .article-anchor {position: absolute; top: -50px;}
	#content > article > h3 {}
	#content > article > p {margin: 15px 0 0 0; font-weight: 200;}
	#content > article > p.copyright {font-size: 60%;}
	#content > article > p > b {margin: 0 10px 0 0;}
	
/* Controls */
table {width: 100%; margin: 15px 0 0 0; border: 1px solid #000;}
	table > tbody > tr {width: 100%; border: 1px solid #000;}
	table > tbody > tr > td {padding: 10px; border: 1px solid #000; font-size: 80%;}
	td.bold {font-weight: bold;}

/* Media Queries */
/* Snap View */
@media screen and (min-width: 352px) {
	#all {margin: 0 10px 0 10px;}
	#title {height: 50px;}
		#title > h1 {font-size: 18px; line-height: 50px;}
	#navigation {margin: 20px 0 0 0;}	
	#navigation > ul > li > a {display: block; font-size: 80%; margin: 10px 0 0 0;}
	
	#content > article > h3 {font-size: 100%;}
}
/* Mid View */
@media screen and (min-width: 353px) and (max-width: 750px) {
	#all {margin: 0 10px 0 10px;}
	#navigation {margin: 20px 0 0 0;}
	#navigation > ul > li > a {display: block; margin: 10px 0 0 0;}
	
	#content > article > h3 {font-size: 110%;}
}
/* Full View */
@media screen and (min-width: 751px) {
	#navigation > ul > li > a {display: block; margin: 10px 1% 0 0; height: 80px; font-size: 100%; line-height: 50px; float: left; width: 49.5%;}
	#navigation > ul > li:nth-child(2n) > a {margin: 10px 0 0 0;}
	
	#content > article > h3 {font-size: 130%;}
}
@media screen and (min-width: 1000px) {
	#navigation > ul > li > a {font-size: 140%;}
}