/*
Theme Name: North Stafford
Theme URI: http://wordpress.org/
Description: Custom built theme for the North Stafford High School Band
Author: Ben Carr
Author URI: http://www.bencarr.net/
Tags: blue, awesome, badass

*/

/* RESET
-------------------------------------------------- */
body, p, h1, h2, h3, h4, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.nomargin { margin: 0; }

/* GENERAL
-------------------------------------------------- */
body { background: #003 url(images/bg.png) fixed no-repeat top; font: normal 12px Lucida Grande, Arial, Verdana, sans-serif; color: #222; }

/* MENU and NAVBAR
----------------------------------------------------------- */
#nav { margin: 0 10px 10px; background: #003 url(images/menubg.png) repeat-x; height: 35px; }
#nav li { float: left; position: relative; background: #003 url(images/menubg.png) repeat-x; border-right: 1px solid #CCC; }
#nav a { display: block; position: relative; line-height: 15px; padding: 10px 5px; font-weight: bold; color: #FFF; text-decoration: none; width: 77px; text-align: center; }
#nav li#last-link { border-right: 0; }
#nav li#last-link a { width: 78px; }
#nav li#first-link a, #nav #last-link a { height: 15px; }
#nav ul { position: absolute; top: -999em; width: 10em; }
#nav ul li { background: #CCC; border-bottom: 1px dotted #BBB; width: auto; }
#nav ul a { display: block; padding: 4px 5px; font-weight: normal; color: #000; text-align: left; }
#nav li:hover, #nav li.nav-hover { background-position: 0 -35px; -webkit-transition: 0.1s linear; }
#nav ul li:hover, #nav ul li.nav-hover { background: #C60; -webkit-transition: 0.1s linear; }
#nav ul ul li { background: #BBB; }
#nav li:hover ul, #nav li.nav-hover ul { left: 0; top: 36px; z-index: 99; }
#nav li:hover ul ul, #nav li.nav-hover ul ul, #nav ul li:hover li ul, #nav ul li.nav-hover li ul { top: -999em; }
#nav ul li:hover ul, #nav ul li.nav-hover ul, #nav ul ul li:hover ul, #nav ul li li.nav-hover ul { left: 10em; top: 0; }
.nav-sub-indicator { position: absolute; display: none; right: 5px; top: 1px; width: 10px; height: 10px; color: #444; }
#nav ul .nav-sub-indicator { display: block; font-size: 20px; }
.nav-shadow ul { background: url('i/shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; }
.nav-shadow ul.nav-shadow-off { background: transparent; }
	
/* TYPOGRAPHY
-------------------------------------------------- */
h2, h3, h4 { margin: 18px 0; }
h1 {
	color: #006;
	font-size: 26px;
	letter-spacing: -1px;
	margin: 9px 0 18px; }
h2 {
	font-size: 20px;
	color: #C60; }
h3 {
	font: normal 16px Georgia, Times New Roman, serif;
	color: #555;
	font-style: italic;
	font-weight: normal; }
h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	color: #000; }
p { line-height: 18px; margin: 9px 0 18px; }
hr { clear: both; border: 0; border-top: 1px dotted #888; height: 1px; background: #FFF; }
small { color: #555; font-size: 10px; }
a:link, a:active, a:visited { color: #000066; }
a:hover, a:focus { color: #0000FF; }
a img { border: 0; }

.toplink {
	display: block;
	border-top: 1px dotted #AAA;
	text-align: center;
	font-size: 11px;
	text-decoration: none; }
a.toplink:hover {
	border-color: #555;
	color: #006699; }

/* STRUCTURE
-------------------------------------------------- */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left; margin: 10px 10px 20px; }
.col1 { width: 55px; }
.col2 { width: 130px; }
.col3 { width: 205px; }
.col4 { width: 280px; }
.col5 { width: 355px; }
.col6 { width: 430px; }
.col7 { width: 505px; }
.col8 { width: 580px; }
.col9 { width: 655px; }
.col10 { width: 730px; }
.col11 { width: 805px; }
.col12 { width: 880px; }
.inner { padding: 0 50px 0 0; }
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
#container {
	width: 900px;
	background: #FFF;
	margin: 50px auto 0;
	padding: 10px 0; }
#header {
	position: relative;
	width: 100%;
	height: 120px;
	padding: 0; }
#logo {	margin: 40px; }
#clefs { position: absolute; bottom: 0px; right: 10px; }
#left {
	clear: both;
	width: 200px;
	padding: 10px;
	float: left; }
.pad {
	padding: 10px; }
.padborder {
	padding: 10px;
	margin: 0;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC; }
#right {
	display: block;
	margin-left: 220px;
	padding: 10px 0 0 10px; }
#content {
	margin: 0 10px;
	background: #FFF url('images/twocolbg.gif') repeat-y -50px 0; }
#page {	margin-top: 10px; padding: 0 10px 10px; overflow: hidden; }


/* FOOTER */

#footer {
	padding: 10px 0 20px;
	width: 900px;
	margin: 0 auto 20px;
	font-size: 11px;
	color: #888; }
#footer a {
	color: #888; }
#footer a:hover {
	color: #cc6600; }
	
#footer .cols { float: right; }
#footer .col { float: left; padding: 0 15px; margin-right: 15px; border-left: 1px solid #282828; }
#footer .col:last-child { margin-right: 0; padding-right: 0; }
#bclogo { background: url(images/bc_32.png) no-repeat top left; display: block; width: 32px; height: 32px; text-indent: -999px; overflow: hidden; }

.sectionhead {
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	background: #006 url('images/gradient2.png') repeat-x top left;
	padding: 5px 10px;
	display: block;
	border-bottom: 1px solid #CCC;
	outline: 0; }

.blocklist {
	list-style: none;
	margin: 0;
	padding: 0; }
.blocklist li {
	display: block; }
.blocklist li a {
	background: transparent;
	display: block;
	padding: 3px 5px;
	border-bottom: 1px dotted #CCC;
	border-left: 0px solid #CC6600;
	text-decoration: none; }
.blocklist li a:hover {
	background: #DDD url('images/gradient.png') repeat-x top left;
	color: #CC6600;  }

a.blocklink { display: block; font-size: 16px; color: #FFF; text-decoration: none; padding: 7px; text-align: center; background: #006 url('images/menubg.png') repeat-x 0 -35px; }
a.blocklink:hover { background-position: 0 0px; }

/* PAGES */
.toc {
	display: block;
	width: 250px;
	border: 1px solid #AAA;
	background: #EEE;
	padding: 10px;
	float: right;
	margin: 0 0 10px 10px; }
.toc span {
	display: block;
	color: #CC6600;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-bottom: 1px solid #CC6600; }
.pagetitle {
	font-family: Century Gothic, Lucida Grande, sans-serif;
	color: #000066;
	font-size: 40px;
	letter-spacing: -2px;
	line-height: 30px;
	margin-bottom: 20px; }
.pagesubtitle {
	font-family: Gill Sans, Verdana, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	line-height: 11px;
	color: #888; }
.subpages { 
	list-style: none;
	float: right;
	margin: 5px 0 0;
	padding: 0; }
.subpages li {
	float: left;
	font: bold 12px;
	text-align: center;
	border-left: 1px dashed #CCC;
	padding: 0 4px;  }
.subpages li a {
	font-family: Century Gothic, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 4px;
	text-decoration: none;
	color: #888;}
.subpages li a:hover {
	color: #CC6600; }
.subpages li.current_page_ancestor a, .subpages li.current_page_item a, .subpages li.current_page_item a table, .subpages li.current_page_ancestor a table {
	color: #FFF;
	background-color: #006; }


.clear {
	clear: both; }
	
/* NEW STYLES
----------------------------------------------------------- */
.centurygothic { font-family: 'Century Gothic', Lucida Grande, Arial, sans-serif; }
.newshead {
	font-size: 30px;
	color: #006;
	margin: 0 0 10px;
	line-height: 26px;
	border-bottom: 1px solid #006; }