html {
	background-color: #1d3364;		

	font-family: Verdana, Arial, Helvetica, sans-serif;	
}
h1, h2, h3, h4, h4, #header p#school-name {
	font-family: "Bell MT", Georgia, Helvetica, sans-serif;	
	color: #000042;	
}
p#new-site-link {text-align: center; font-size: 22px;}
a {outline: none}
.measurement {
	color: #fa4dcf;
}
#myp_form p{margin-bottom:0}
.ff-ft{margin-bottom:40px}
h2, h1 {
	font-size: 1.8em;
	margin-bottom: .6em;
}
.col-sidebar h2 a {
	display: block;
	padding: 5px;
	text-decoration: none;
	border-bottom: 1px #dedede solid;
	background-color: #000042;
	color: #dedede;
	font-size: .8em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#main-content .col-sidebar h2 a:hover {
	color: #fff;
	background-color: #000042;	
}
.col-sidebar h2 a:hover {
	color: #fff;
}
h3, h4 {
	padding-bottom: 5px;
}
h3 {
	font-size: 1.2em;
}
.col-sub-2 h3 {
	font-size: 1.2em;
}
h4 {
	font-size: 1.2em;
	margin-bottom: 5px;
}
p {
	padding-bottom: 2px;
	margin-bottom: 15px;
	line-height: 1.4em;
}
p.image-container {
	padding: 0;
	margin: 0;
}
a {color: #006}
.col-sub-1 .col-sub-1 h4{
	font-size: 1.4em;
}
p.alphabet-links a {
	border: 1px #006 solid;
	padding: 2px;
	margin: 2px;
	line-height: 2em;
	text-decoration: none;
	font-size: 1em
}
p.alphabet-links a.current {
	background-color: #006;
	color: #fff;
}
#main-content a:hover {
	background-color: #FEFFDB;
}
.col-sub-1 .col-sub-2 h4{
	font-size: 1.3em;
	font-weight: bold;
	padding-top: 4px;
	color: #333;	
}
em  {
	font-style: italic;
}
#main-content li {
	margin-bottom: .5em;
	display: block;
}
#main-content li li {
	margin-bottom: .2em;
}
.full-wrapper {
	width: 100%;
	clear: both;
	overflow: hidden;
	position: relative;
	display: block;
	background-color: rgba(0, 0, 0, .8);
}
.wrapper {	
	width: 850px;
	position: relative;	
	margin: 0 auto;
}
#background {
	width: 750px;
	height: 750px;
	margin-left: -510px;
	padding-left: 510px;
	position: absolute;
	background: url(http://springbrookhs.org/images/slices/bg.jpg) no-repeat  0 0;
}
#container {

}
.skip-to-content {
	position: absolute;
	top: -1000px;
}


/*

Contact Block

====================================================*/
#contact-block {
	color: #fff;
	width: 830px;
	padding: 0 10px;	
	height: 200px;
	position: relative;
	float: left;	
	display: none;
	background: #000;
}
#contact-block h3, 
#contact-block .col-sub-2 h3, 
#footer h3 {
	margin-top: 0;
	font-size:1.2em;
	border-bottom: 1px #c1e0fd solid;
	color: #c1e0fd;
	font-weight: bold;
}
#contact-block .col-sub-2 h3.additional, 
#footer .col-sub-2 h3.additional {
	margin-top: 20px;
}
#contact-block li {
	margin: 3px 0;
}
#contact-block a {color: #fff;}
#contact-block li a, #footer .mcps-links li a {
	background: url(http://springbrookhs.org/images/icons/bullet-arrow-white.png) left 50% no-repeat;
	padding-left: 15px;
}
#contact-block li a:hover, #footer .mcps-links li a:hover {
	background: url(http://springbrookhs.org/images/icons/bullet-big-arrow-white.png) left 50% no-repeat;
	text-decoration: none;
}
#contact-block .col-sub-1,
#contact-block .col-sub-2 {
	margin-top: 0;
	padding-top: 0;
}
input.update-button {border: none; background: #fff; border-bottom: 1px #006 solid; padding: 0; color: #006}
input.update-button:hover {background-color: #FEFFDB; cursor: pointer}
#contact-block p {
	font-size: 14px;
}
a.directions-and-contact {
	display: block;
	padding: 5px 20px 10px;
	font-size: 12px;
	text-decoration: none;
	background-color: rgba(0, 0, 0, .8);
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;	
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-left-radius: 10px;	
}
/*

Header

====================================================*/

#header {
	width: 810px;
	padding: 0 20px;
	position: relative;
	float: left;
	clear: both;
	border-bottom: 1px #ccc solid;	
	background-color: transparent;
	color: #000042;

}
#header img {
	verticle-align: top;
}
#header p#school-name {
	font-size: 2em;
	font-weight: bold;
	margin: 100px 0 0 90px;
}
#header p#school-name a {
	text-decoration: none;
	color: #e3eda3;
	font-weight: normal;
	font-size: 38px;
}
#header p#tagline {
	color: #ddd;
	margin-left: 90px;
}
#header p#tagline strong {
	color: #fff;
	font-weight: normal;
}
#header ul, ul#media-navigation {
	float: right;
	clear: right;
}
#header li, ul#media-navigation li {
	display: inline;
}
#header ul#top-navigation {
	position: absolute;
	top: 0;
	right: 0;
}
#header ul#top-navigation a {
	color: #fff;
}
#header ul#for-navigation {
	position: absolute;
	top: 78px;
	right: 0;	
}
#header ul#for-navigation li a {
	color: #222;
	background: #fff;
	padding: 8px 8px;
	float: left;
	border-right: 1px #006 solid;
	border-top: 1px #006 solid;
}
#header ul#for-navigation li > a:first-child {
	border-left: 1px #006 solid;
}
#header ul#for-navigation li a:hover{
	background: #feffdb;
}

#header ul#main-navigation {
	float: left;
	clear: left;
	background: rgb(0, 0, 66);
/*	background: url(http://springbrookhs.org/images/slices/bg-main-nav.jpg) no-repeat  0 0; */
	margin: 0 -20px;
	padding: 5px 0;
	width: 850px;
	height: 2.5em;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;	
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;	
}
#header ul#main-navigation li {
	margin-top: 10px;
	float: left;
}
#header ul#main-navigation li a {
	background: #A5D3EB;
	color: #222;
	padding: 6px 10px;
	margin: 2px 10px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-decoration: none;
}
#header ul#main-navigation li a:hover {
	color: #fff;
	background-color: #1f9fde;
}
		#header ul#main-navigation li ul
		{	
			margin: 10px 0 0 ;
			padding: 0 0 10px 0;
			z-index: 100;
			position: absolute;
			visibility: hidden;
			background: #1f9fde;			
		}
		
		#header ul#main-navigation li ul li	{	
			float: left;
			clear: both;
			display: block;
			margin: 5px 0;
			padding: 5px 0;	
		}
		
		#header ul#main-navigation li ul li a {	
			width: auto;
			text-decoration: none;			
			border: none;			
			-moz-border-radius: 0;
			-webkit-border-radius: 0;		
			background: transparent	
		}
		
		#header ul#main-navigation li ul li a:hover {	
			background: #fff; color: #006
		}


#main-content, #footer{
	width: 810px;
	padding: 0 20px;
	position: relative;
	overflow: auto;
	float: left;
	clear: both;
	background-color: #fff;
}
/*

Footer

====================================================*/

#footer {
	color: #fff;
	background-color: #000042;	
}
#footer ul#footer-navigation li {
	float: left;
	clear: none;
	margin-right: 5px;
	font-size: .9em;
}
#footer a {color: #fff;}
#footer a:hover {text-decoration: none}
#footer a span.mcps {border-bottom: 1px #fff solid}
/* h3 information in #contact-block section */
#footer h3.mcps-links-title {
	margin-top:10px;
}
#footer .mcps-links {
	font-size: 1.1em;
}
#footer p {
	font-size: .9em;
}
#footer .col-sidebar {
	margin-top: 50px;
}
#footer fieldset {
	display: none;
	margin-top: 10px;
}
#footer fieldset input, #footer fieldset select  {
	width: 100%;
}
#footer fieldset input#submit {
	width: auto;
}
#footer fieldset textarea {
	width: 100%;
	height: 6em;
}

.wide {
	width: 810px;
}
.col,
.col-main,
.col-main-wide,
.col-sub-1,
.col-sub-2,
.col-sidebar {
	margin: 20px 0;
}
.col {
	width: 200px;
	float: left;
	clear: none;
	margin: 0 10px;
}
.col-main {
	width: 610px;
	float: left;
	clear: none;
}
.col-main-wide {
	width: 810px;
	float: left;
	clear: none;	
}
.col-sub-1 {
	width: 410px;
	margin-right: 20px;
	float: left;
	clear: none;
}
.col-sub-1 .col-sub-1,
.col-sub-1 .col-sub-2 {
	margin-top: 0;
}
.col-sub-1 .col-sub-1 {
	width: 190px;
	font-size: .8em;
	padding-right: 10px;
	border-right: 1px #ccc solid;	
	margin-right: 10px;
}
.col-sub-2 {
	width: 180px;
	float: left;
	clear: none;
	padding: 10px 0;
}
.col-sub-1 .col-sub-2 {
	width: 170px;
	font-size: .8em;	
	padding: 0;
	color: #666;
}

.col-sidebar {
	width: 180px;
	margin-left: 20px;
	float: left;
	clear: none;
}
#main-content ol.breadcrumbs {
	margin-bottom: 10px;
}
#main-content ol.breadcrumbs li {
	display: inline;
	text-transform: capitalize
}
ul#media-navigation li {
	margin: 0;
}
#media-container {
	width: 610px;
	height: 300px;
}
#feature-article-container h3{
	font-size: 160%;
	padding-bottom: 20px;
}
#feature-article-container .feature-image,
img.feature-image,
.info .class-links-listing img {
	float: left;
	margin: 0px 10px 10px 0;
}
img.feature-image-right {
	float: right;
	margin: 0px 0px 10px 10px;
}
.info h3 {
	margin: 30px 0 5px;
	border-bottom: 1px #999 solid;
	width: 95%;
}
.info h4 {
	font-size: 1.1em;	
	font-style: italic;
}
.info .class-links-listing h4 {
	font-size: 1.1em;	
	font-style: normal;
	color: #333;
	margin: 20px 0 0;
}
.info .class-links-listing p,
.info .class-links-listing img {
	padding-left: 10px;
}
.col-main ul li,
.col-sidebar ul li,
#main-content ol.breadcrumbs li
 {
	background: url(http://springbrookhs.org/images/icons/bullet-arrow-blue.png) no-repeat 0 6px;
	padding: 2px 0 2px 15px;
	list-style-type: none;
}
.col-main ul li ul {margin-top: 10px;}
.col-main ul li ul li {padding-bottom: 0px;padding-top: 0px;}
#main-content ol.breadcrumbs li.home {
	background-image: none;
	padding: 2px 0;
}
#media-container ul li,
#feature-article-container ul li,
#footer ul li
 {
	background-image: none;
	padding: 0;
	margin: 0;
}
#feature-article-container .author, #feature-article-container p {
	font-size: 110%;
}
#feature-article-container p.read-more {
	float: right;
}
#containers {
	float: left; 
	clear: both;
	width: 100%;	
	height: auto;
	margin-bottom: 10px
}
p.video-info {
	font-size: .9em;
}
.post-meta {
	font-size: .9em;
	color: #666;
	font-style: italic;
}
a.author-link {
	color: #666;
}
a:hover.author-link {
	color: #006;
}
a.print {
	background: url(http://springbrookhs.org/images/icons/printer.png) no-repeat left 50%;
	padding-left: 24px;
}
#main-content form fieldset a,
#main-content form fieldset a:hover {
	color: #fff;
	background: transparent;
}
#main-content form fieldset a.close {
	float: right;
	clear: none;
}
.thank-you {
	font-size: 1.6em;
}
.section-article {
	border-bottom: 1px #006 dotted;
}
.section-article h3 {
	font-size: 1.4em;
	margin-top: 15px;
}
.author-info-container {
	border: 1px #006 solid;
	padding: 10px;
	overflow: auto;
	margin: 10px 0 20px;
}
.author-info-container img {
	float: left;
	clear: none;
	margin: 0px 10px 5px 0;
}
.author-info
fieldset#contact-webteam {
	border: 1px #ccc solid;
	padding: 10px;
	margin: 10px 0;
}
fieldset#contact-webteam a {
	float: right;
	clear: both;
}

#main-contact-form input.text,
#main-contact-form select.text,
#main-contact-form textarea {
	width: 320px;
}
#main-contact-form textarea {
	height: 6em;
}
.article h2 {
	margin-bottom: 20px;
}
.article p {
	margin: 10px 0 ;
	word-spacing: .2em;
}
.article p img {
	border: 1px #ccc solid;
	margin: 10px 0;
}
.article .design-team-image {
	float: left;
	clear: both;
	margin-bottom: 30px
}
.meta-date {
	font-style: italic;
	color: #333;
	margin-bottom: 20px;
}
.meta-author {
	float: right;
	clear: right;
	border: 1px #ccc solid;
	padding: 10px;
	width: 200px;
	font-size: .9em;
	margin: 0 0 10px 10px;
}
.meta-author img {float: right; clear: none;}
.meta-author p.position {font-size: .8em; color: #333; margin-top: -8px; padding: 0; font-style:italic}

.comment-form,
.comment-submit {
	background-color: #000042;	
	color: #fff;
	padding: 10px;	
	margin: 40px 0; 
	float: left;
	clear: left;
}
.comment-form {
	margin: 0;
	padding: 0;
}
.comment-form fieldset {
	width: 380px;
	padding: 0 10px;
	float: left;
	clear: none;	
	border: 1px #006 solid;
}
.comment-submit .name-email {
	width: 250px;
	float: left;
	clear: none;
	margin-right: 20px;
}
.comment-submit .comment {
	width: 310px;
	float: left;
	clear: none;
	margin-right: 5px;
}
.comment-submit .submit-info {
	width: 100%;
	clear: both;
	text-align: right;
	padding-top: 20px;
}
.comment-submit .notice {
	font-size: .8em;
	color: #999;
	background: #131313;
	padding: 15px;
	border: 1px #555 solid;
}
.comment-submit .notice .link {
	color: #ccc;
	text-decoration: underline;
}
.comment-submit .notice pre {
	font-size: 1em; 
}
.comment-form input {width: 60%}
.comment-form textarea {
	width: 100%;
}
.comment-submit input,
.comment-submit textarea {
	width: 100%;
}
.comment-submit textarea,
.comment-form textarea {
	height: 250px;
}
.comment-submit input.submit,
.comment-form input.submit,
.comment-submit input.checkbox {
	width: auto;
}
.comment-submit input.preview {
	border: none;
	background: transparent;
	color: #999;
	border-bottom: 1px #999 solid;
}
.comment-submit input#captcha {
	width: 140px;
	padding: 4px;
	margin-right: 5px;
	display: block;
	float: left;
}
#main-content .comment-submit li {
	margin-left: 0; 
	padding-left: 0; 
	background-image: none;
}
h3.comments-title {
	font-size: 1.4em;
	margin: 20px 0 20px;
	border-bottom: 4px #006 double;
        clear: both;
}
.comment-container {
	margin-bottom: 40px;
	float: left;
	clear: both;
	width: 100%;
}
.comment-count {
	position: absolute;
	left: -25px;
	margin-top: -34px;
	width: 48px;
	height: 48px;
	background: url(http://springbrookhs.org/images/icons/comment_48.png) no-repeat;
	padding-top: 10px;
	text-align: center;
	color: #666;
}
.comment-count span {
	font-size: 1.2em;
	color: #222;
}
.comment-container h4 {
	font-weight: normal;
	font-size: 1.1em;
	float: left;
	clear: left;
}
.comment-container img.gravatar {
	float: left; 
	clear: left;
}
.comment-container .comment-body {
	width: 460px;
	float: right;
	clear: none;
}
.comment-container .comment-meta {
	width: 460px;
	float: right;
	clear: right;
	border-top: 1px #006 dotted;
	border-bottom: 1px #006 dotted;	
}
.class-link-container {
	width: 150px;
	padding: 20px 10px 0;
	margin: 5px;
	float: left;
	clear: none;
	overflow: auto;
	border: 1px #006 solid;
	height: 60px;
	text-align: center;
	font-size: 1.1em;
}

.hidden {
	position: absolute;
	left: -999px;
}
strong {
	font-weight: bold
}



/**	

	Table
	
==========================================================**/

table {
	width: 600px; 
	border-collapse: collapse; 
	margin-bottom: 20px;
}
th {
	background-color: #000066;
	color: #ffffff;
	padding: 5px;
	font-weight: bold;
	font-size: 1em
}
td {
	padding: 10px 5px;
	vertical-align: top;
}
.odd {
	background-color: #edf3fe;
}
tfoot {
	border: 1px #ccc solid;
	padding-top: 5px;
	background-color: #efefef;
}

table.roster {
	margin-top: 10px;
}
table.roster td {
	font-size: 12px
}
/**	

	Calendar
	
==========================================================**/


.calendarBG {
	border: 1px #ccc solid;
	width: 98%; 
	float: left; 
	clear: left; 
	margin: 15px 0 15px 1px;
	border-collapse: collapse;	
}
.calendarBG td {
	width: 100px;
	padding: 2px;
}
.calendarBG td.calendarBGdayBox {
	height: 6em; 
	position: relative; 
	border: 1px #ccc solid; 
	vertical-align: top;
}
.calendarBlank {
	background-color:#efefef;
	border: 1px #999 solid; 	 
}	
.calendarCell li {
	font-size: 12px;
	padding-left: 2px;
}
.calendarHeader th 	{
	padding: 12px 1px; 
	text-align: center; 
	font-size: 14px;
	background-color: #fff;
	color: #006;
}	
.calendarMonthLinks {color:#fff;}
.calendarDayHeading {
	padding: 10px 0; 
	text-align: center; 
	background: #006
}
.calendarDayHeading td {
	background: #006; 
	padding: 10px 0; 
	color: #ededed;
	font-size: 14px;	
}
.calendarToday {
	background-color: #DDE8FF;
	border-bottom: 1px #ccc solid;
}
.calendarToday li {
	font-size: 11px;
}
.calendarDayNumber 	{
	vertical-align: top;
	display: block;
	padding-bottom: 5px;
	font-size: 11px;
}


/**	
==========================================================
**/

.ui-tabs-nav {
	float: left;
	position: relative;
	z-index: 1;
	bottom: -1px;
}
.ui-tabs-nav li {
	float: left;
	border: 1px solid #d3d3d3;
}
.ui-tabs-nav li a {
	/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
	float: left;
	text-decoration: none;
	padding: 2px 5px;
	color: #555555;
	background: #e6e6e6;
}
.ui-tabs-nav li a:hover {
	background: #dadada;
	color: #212121;
}
.ui-tabs-nav li.ui-tabs-selected {
	border-bottom-color: #fff;
}
.ui-tabs-nav li.ui-tabs-selected a, .ui-tabs-nav li.ui-tabs-selected a:hover {
	background: #fff;
	color: #222;
}
.ui-tabs-panel {
	/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
	clear:left;
	border: 1px solid #d3d3d3;
	background: #fff;
	color: #222;
	padding: 1.5em 1em;	
	margin-top:0;
	height: auto;
}
#media-container .ui-tabs-panel {
	height: 330px;
	padding-top: 5px;
}
.ui-tabs-hide {
	display: none;/* for accessible hiding: position: absolute; left: -99999999px*/;
}
/**	
==========================================================
**/


/**
	Pikachoose jquery slideshow plugin	
==========================================================
**/


/* This is the ul you have all your images in */
.pikachoose ul{padding-left:0;width:200px;height:margin:0;overflow:hidden;}
.pikachoose ul li{float: left;padding:2px;background:#fff;position:relative;overflow:hidden;}
.pikachoose ul li div img{position:relative;cursor:pointer;float:left; clear: none}

/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{width:200px;height: 200px;display:block;position:relative;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:2px;left:2px;}
.pika_back_img{position:relative;top:0px;}
.pika_subdiv{position:relative;}
.pika_subdiv img, .pika_subdiv a img{border:none;}
.pika_caption{width:200px;padding-top:4px;text-align:center;position:absolute;bottom:7px;left:3px;background:url('black.png') top left;}
.pika_caption a{color:white;}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat;}

.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('fastf.png') top right no-repeat;}

/**	
==========================================================
**/

#main-search-container {
	position: absolute;
	top: 30px;
	right: 0;
}
.feature-article {
	padding: 10px;
	background-color: #fff;
	float: left;
	clear: none;
	width: 380px;
}
.bordered-content {
	border: 1px #006 solid;
}
.shaded-content {
	background: #f4f4f4;
}
.feature-article h4{
	color: #006;
	font-size: 1.6em;
}
.feature-article p img {
	float: left; 
	clear: none;
	margin: 0 10px 2px 0;
}
.feature-article p {
	font-size: .85em;
}
.upcoming-events, .mcps-links {
	float: left;
	padding: 10px;
}
.upcoming-events {
	margin-top: 20px;
	background-color: #F4F4F4; 
	border: 1px #F4F4F4 solid;
}
.more-articles {
	margin-top: 10px;
}
.go-to-full {
	float: left; 
	clear: both;
	width: 348px;
	padding: 5px 10px;
	margin-bottom: 10px;
	background-color: #ededed;
	border: 1px #333 solid;
	font-size:  .8em;
}
.col-sub-2 .go-to-full {
	width: 148px;
}
.team-member {
	width: 200px; 
	float: left; 
	clear: none; 
	margin: 20px; 
	text-align:center;
}
p.point {
	font-size: 10em; 
	color:#202A5D; 
	line-height: .5em; 
	margin: 0; 
	border: 12px #2A53C1  solid; 
	padding: 10px 10px 60px; 
	background-color: #F5F6FA   
}
.staff-member {clear: both; border-bottom: 1px #666 solid; overflow: auto; margin: 20px 0;}

.no-show,
.event-id, 
#contact-webteam {
	display: none;
}
.fine-print,
#footer p.fine-print {
	font-size: .7em;
}
.accent {color: #1F9FDE;}
.caps {text-transform: uppercase}
.result {padding: 0 4px;}
.win {color:#006; background-color: #D9FCFF; border: 1px #006 dotted;}
.lose {color:#666; background-color: #ededed; border: 1px #666 dotted;}
.tie {color:#156315; background-color: #E5FAE7; border: 1px #156315 dotted;}