/* ============> Reset Styles (from meyerweb.com)  <============= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:					0;
	padding:				0;
	border:					0;
	outline:					0;
	font-weight:			inherit;
	font-style:				inherit;
	font-size:				100%;
	font-family:			inherit;
	vertical-align:			baseline;
}

b,strong {
	font-weight:			bold;
	}

/* remember to define focus styles! */
:focus {
	outline:					0;
}

body {
	line-height:			1;
	color:					black;
	background:			white;
}

ol, ul {
	list-style:				none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse:		separate;
	border-spacing:		0;
}

caption, th, td {
	text-align:				left;
	font-weight:			normal;
}

blockquote:before, blockquote:after, q:before, q:after {
	content:					"";
}

blockquote, q {
	quotes:					"" "";
}

/* -----------------------------------------------------> DEV HELPERS STYLING
*/

.LocalHelper {
	display:					none;
	}

.StageAlert {
	display:					none;
	}

/* -----------------------------------------------------> HEATHFIELD SCHOOL STYLES
*/

body {
	font:						13px/18px trebuchet ms,sans-serif;
	background:			#F0E0CA;
	}

.wrapper {
	margin:					0 auto;
	text-align:				left;
	background:			url("../images/wrapper_back.gif") repeat-y;
	width:					992px;
	padding-left:			16px;
	}

/* -----------------------------------------------------> FULL WIDTH ELEMENTS
*/

.header,
.menu,
.homemain,
.main,
.footer
	{
	width:					960px;
	}

/* -----------------------------------------------------> HEADER
*/

.header,
.logo,
form#loginForm label,
form#loginForm input,
form#searchForm input
	{
	float:						left;
	}

.logo h1,
.logo h2,
form#loginForm label
	{
	color:					#fff;
	}

.logo h1,
.logo h2
	{
	letter-spacing:		2px;
	margin-left:			73px;
	}

.header {
	height:					100px;
	background:			url("../images/header_back.gif") repeat-x;
	}

.logo {
	display:					inline;
	width:					191px;
	height:					87px;
	background:			url("../images/hs_logo.gif") no-repeat;
	margin-top:			8px;
	margin-left:			20px;
	}

.logo h1 {
	font:						14px/17px arial black,sans-serif;
	margin-top:			16px;
	}

.logo h2 {
	font:						bold 11px/17px arial,sans-serif;
	}

.loginandsearch {
	width:					440px;
	padding-right:		20px;
	}

.loginandsearch p.logout {
	float:						right;
	width:					440px;
	height:					26px;
	font-size:				14px;
	margin-top:			13px;
	text-align:				right;
	}

.loginandsearch p.logout a {
	color:					#000;
	text-decoration:		none;
	}

.loginandsearch p.logout a:hover {
	text-decoration:		underline;
	}

.loginandsearch,
form#loginForm,
form#searchForm
	{
	float:						right;
	}

form#loginForm label {
	font-size:				12px;
	margin-right:			8px;
	margin-top:			4px;
	}

form#loginForm input, form#searchForm input {
	font-family:			trebuchet ms,sans-serif;
	font-size:				12px;
	color:					#999;
	padding:				1px 2px 0px 5px;
	border:					1px solid #D6D6D6;
	}

form#loginForm input#un {
	width:					140px;
	margin-right:			8px;
	}

form#loginForm input#pw, form#searchForm input#search {
	width:					140px;
	border-right:			0px;
	}

form#loginForm input.submitbtn, form#searchForm input.submitbtn {
	font-size:				11px;
	font-weight:			bold;
	background:			#F8D088;
	width:					29px;
	height:					21px;
	margin-left:			-2px;
	padding:				0 0 2px 4px;
	cursor:					pointer;
	color:					#814E35;
	}

form#searchForm {
	margin-top:			8px;
	}

form#searchForm input {
	background:			#DCCDAC;
	border:					1px solid #113B5F;
	color:					#113B5F;
	}

form#searchForm input.submitbtn {
	background:			#113B5F;
	color:					#fff;
	}

/* -----------------------------------------------------> MENU
*/

.menu,
.menu ul
	{
	float:						left;
	}

.menu {
	font:						16px/18px trebuchet ms,sans-serif;
	background-color:	#B99A59;
	height:					29px;
	}

.menu a {
	color:					#fff;
	text-decoration:		none;
	float:						left;
	display:					block;
	padding:				5px 10px 7px 10px;
	}

.menu a:hover, a#menuon {
	color:					#fff;
	background:			#113B5F;
	}

.menu ul {
	margin:					0px;
	padding:				0 0 0 20px;
	}

.menu li {
	display:					inline;
	}

/* -----------------------------------------------------> MAIN
*/

.homemain {
	float:						left;
	background:			#113B5F;
	}

.main {
	float:						left;
	background:			#fff;
	padding:				20px 0;
	}

/* -----------------------------------------------------> SUBMENU
*/

.submenu_wrapper,
.submenu,
.submenu ul,
.submenu li,
.submenu a,
.submenu ul.subsubmenu,
.submenu_wrapper .feature
	{
	float:						left;
	}

.submenu_wrapper,
.submenu,
.submenu ul,
.submenu ul.sub
	{
	width:					220px;
	}

.submenu_wrapper {
	display:					inline;
	margin-left:			20px;
	background:			url("../images/submenu_back.gif") repeat-x;
	}

.submenu {
	background:			url("../images/submenu_fleurdelys.gif") 0 260px no-repeat;
	min-height:			450px;
	padding-bottom:		10px;
	}

.submenu a {
	display:					block;
	font-size:				13px;
	text-decoration:		none;
	color:					#113B5F;
	width:					210px;
	padding:				4px 0 6px 10px;
	}

.submenu a:hover, .submenu a#submenuon {
	color:					#fff;
	background:			#113B5F;
	}

.submenu ul.subsubmenu li a {
	width:					200px;
	padding-left:			20px;
	font-style:				italic;
	}

.submenu .subsubmenu a:hover, .submenu a#subsubmenuon {
	color:					#113B5F;
	background:			url("../images/subsubmenu_on_back.gif") repeat-x;
	}

/* -----------------------------------------------------> HOMEPAGE SLIDESHOW
*/

.slideshow_box,
.slideshow
	{
	float:						left;
	width:					920px;
	height:					340px;
	}

.slideshow_box {
	padding:				20px;
	}

.slideshow {
	position:				relative;
	background:			#fff;
	}

/* -----------------------------------------------------> HOMEPAGE BLURB
*/

.blurb_box,
.blurb_box a,
.homeblurb
	{
	float:					left;
	}

.blurb_box {
	 width:					920px;
	 height:					163px;
	 background:			url("../images/blueshadow.gif") repeat-x;
	 padding:				17px 20px 20px 20px;
	}

.homeblurb {
	width:					600px;
	}

.homeblurb .article {
	width:					600px;
	margin:					25px 0 0 13px;
	display:					inline;
	}

.homeblurb .article h2 {
	color:					#fff;
	font:						normal 30px/34px georgia,serif;
	margin-bottom:		0px;
	}

.homeblurb .article h3 {
	color:					#889DAF;
	font:						normal 30px/34px georgia,serif;
	}

/* -----------------------------------------------------> CONTENT (PAGEIMAGE/ARTICLE/SIDEBAR)
*/

.content {
	float:						left;
	margin-left:			20px;
	display:					inline;
	width:					680px;
	}

/* -----------------------------------------------------> PAGEIMAGE
*/

.pageimage {
	float:						left;
	width:					680px;
	}

.pageimage table {
	border-collapse:		collapse;
	}

.pageimage table td.col1,
.pageimage table td.col2 {
	width:					230px;
	}

.pageimage table td.col12 {
	width:					460px;
	}

.pageimage table td.col1 img,
.pageimage table td.col2 img,
.pageimage table td.col3 img {
	width:					220px;
	height:					200px;
	}

.pageimage table td.col12 img,
.pageimage table td.col23 img {
	width:					450px;
	height:					200px;
	}

.pageimage table td.col123 img {
	width:					680px;
	height:					200px;
	}


/* -----------------------------------------------------> ARTICLE
*/

.article {
	float:						left;
	width:					445px;
	margin-top:			15px;
	padding-right:		15px;
	}

.article.full {
	width:					680px;
	}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5
	{
	margin-bottom:		14px;
	}

.article h1,
.article h2,
.article h4,
.article p a,
.article ul a
	{
	color:					#113B5F;
	}

.article h3, .article h4, .article h5 {
	padding-top:			8px;
	}

.article h1 {
	font:						28px/32px georgia,serif;
	}

.article h2 {
	font:						18px/22px georgia,serif;
	}

.article h3 {
	font:						18px/22px georgia,serif;
	color:					#000;
	}

.article h4 {
	font:						15px/18px trebuchet ms,sans-serif;
	}

.article h5 {
	font:						15px/18px trebuchet ms,sans-serif;
	color:					#000;
	}

.article p {
	margin-bottom:		14px;
	line-height:			16px;
	}

.article p a, .article ul a {
	padding:				0px 2px;
	}

.article p a:hover, .article ul a:hover {
	background:			#113B5F;
	text-decoration:		none;
	color:					#fff;
	}

.article ul {
	list-style:				disc;
	padding-left:			16px;
	margin-bottom:		16px;
	line-height:			18px;
	}

/* -----------------------------------------------------> ARTICLE - TABLE STYLING
*/

.article table {
	border-collapse:		collapse;
	background:			#fff;
	}

.article table th,
.article table caption
	{
	background:			#113B5F;
	padding:				4px 6px 6px 6px;
	color:					#fff;
	}

.article table th {
	border-bottom:		1px solid #fff;
	}

.article table tr {
	background:			#DCCCAB;
	}

.article table td {
	padding:				4px 6px;
	}

.article table caption {
	border:					1px solid #fff;
	font:						18px/22px georgia,serif;
	}

/* -----------------------------------------------------> SPORTS FIXTURES / SCHOOL CALENDAR TABLES STYLING
*/

.monthLinks ul {
	padding-left:			0px;
	}

.monthLinks li {
	display:					inline;
	}

.monthLinks li a {
	float:						left;
	display:					block;
	padding:				5px 8px;
	text-decoration:		none;
	color:					#000;
	font-weight:			bold;
	}

.monthLinks li a:hover, .monthLinks li a.on {
	color:					#000;
	background:			#CDCCD4;
	}

td.notes b {
	font-weight:			normal;
	color:					#f00;
	}

table.sports, table.school {
	clear:					left;
	}

/* -----------------------------------------------------> SIDEBAR
*/

.sidebar {
	float:						left;
	width:					220px;
	margin-top:			20px;
	}

.sidebarcopy {
	padding-bottom:		20px;
	}

/* -----------------------------------------------------> CALENDAR
*/

.calendar {
	float:						left;
	width:					218px;
	border:					1px solid #B99A58;
	margin-bottom:		15px;
	padding-top:			1px;
	}

.calendar table {
	float:						right;
	border-collapse:		collapse;
	font-size:				11px;
	width:					214px;
	margin-right:			1px;
	}

table tr.calNav {
	width:					214px;
	background:			#113B5F;
	border-left:			1px solid #fff;
	}

table tr.calNav td {
	}

table td.navL, table td.navR {
	padding:				8px;
	}

table td.navL {
	border-left:			1px solid #fff;
	}

table td.navL img, table td.navR img {
	float:						left;
	}

table td.monthName,
table tr.daysHead td,
table tr.days td
	{
	text-align:				center;
	vertical-align:			middle;
	}

table td.monthName p,
table tr.daysHead,
table tr.days td a
	{
	color:					#fff;
	}

table td.monthName p {
	width:					156px;
	font-size:				13px;
	}

table tr.daysHead {
	background:			#B99A58;
	}

table tr.daysHead td {
	height:					30px;
	width:					30px;
	border-top:			1px solid #fff;
	}

table tr.daysHead td.first {
	border-left:			1px solid #fff;
	}

table tr.days td {
	border:					1px solid #fff;
	background:			#E2E2E2;
	}

table tr.days td.blank {
	background:			#fff;
	}

table tr.days td.event {
	background:			#B99A58;
	}

table tr.days td.eventToday {
	background:			#907442;
	}

table tr.days td.eventOn {
	background:			#113B5F;
	}

table tr.days td.today {
	background:			#c2c2c2;
	}

table tr.days td a {
	display:					block;
	height:					16px;
	text-decoration:		none;
	overflow:				hidden;
	padding-top:			8px;
	padding-bottom:		2px;
	line-height:			1;
	}

/* -----------------------------------------------------> EVENTS BOARD
*/

.eventsBoard,
.eventsBoard p.head,
.eventsBoard a
	{
	float:						left;
	}

.eventsBoard {
	width:					218px;
	border:					1px solid #B99A58;
	padding-bottom:		15px;
	}

.eventsBoard p.head {
	width:					216px;
	height:					24px;
	background:			#113B5F;
	margin:					1px 0 0 1px;
	padding-top:			6px;
	color:					#fff;
	text-align:				center;
	}

.eventsBoard a {
	display:					block;
	width:					208px;
	font-size:				12px;
	margin:					4px 5px 0px 9px;
	color:					#B99A58;
	}




/* -----------------------------------------------------> FOOTER
*/

.footer {
	position:				relative;
	clear:					both;
	color:					#fff;
	font-size:				11px;
	line-height:			16px;
	height:					90px;
	background:			#113B5F url("../images/blueshadow.gif") repeat-x;
}

.footer .leftSide,
.footer .rightSide,
.footer p,
.footer ul,
.footer ul li a,
.footer ul li b
	{
	float:						left;
	}

.footer .leftSide, .footer .rightSide {
	width:					480px;
	padding-top:			17px;
	}

.footer .rightSide p {
	float:						right;
	padding-right:		20px;
	text-align:				right;
	}

.footer p,
.footer p a,
.footer ul li a,
.footer ul li b
	{
	color:					#fff;
	}

.footer p {
	clear:					left;
	display:					inline;
	width:					400px;
	margin-left:			20px;
	}

.footer ul {
	position:				absolute;
	left:						172px;
	top:						33px;
	clear:					left;
	width:					400px;
	}

.footer ul li {
	display:					inline;
	}

.footer ul li a {
	display:					block;
	height:					10px;
	text-decoration:		none;
	}

.footer ul li b {
	padding:				0 10px;
	}