@charset "utf-8";

@media all
{
	body { font-family: "Comic Sans MS", cursive; color: #58585A; font-size: 0.96em; }
	textarea, select, input { color: #58585A; }
	input, textarea { font-family: "Comic Sans MS", cursive; }
	h1 { color: #168041; font-size: 2em; font-weight: normal; margin-bottom: 0.4em; }
	h2 { color: #168041; font-size: 1.6em; font-weight: normal; margin-bottom: 0.5em; }
	h3 { color: #D2232B; font-size: 1.3em; font-weight: normal; margin-bottom: 0.5em; }
	h4 { color: #D2232B; font-size: 1em; font-weight: normal; margin-bottom: 0.5em; }
	h5 { color: #D2232B; font-size: 0.8em; font-weight: normal; margin-bottom: 0.5em; }
	h6 { color: #D2232B; font-size: 0.6em; font-weight: normal; margin-bottom: 0.5em; }
	a { color: #168041; }
	a:hover { color: #D2232B; }
	p, ul, ol, form, table { margin-bottom: 1em; }
	p { line-height: 1.3em; }
	li { margin: 0 0 0.5em 2em;}
	ul li { list-style: disc; }
	ul ul { margin: 0.5em 0 0 0; }
	blockquote { margin: 0 0 2em 1em; }
	a img { border: none; }
}

@media print
{
}

@media screen
{
	/****************************************************************************************************************************
	 * Global
	 ****************************************************************************************************************************/
		* { margin: 0; padding: 0; }
		a, button, input { outline: none; }


	/****************************************************************************************************************************
	 * Classes
	 ****************************************************************************************************************************/

		/* Friendly form */
		.friendlyForm { border: 1px solid #ccc; }
			.friendlyForm fieldset { border: none; margin: 0 0 1em 0; padding: 1em; }
			.friendlyForm fieldset fieldset { border: 1px solid #ccc; }
			.friendlyForm legend { font-weight: bold; color: #333; margin-bottom: 10px; }
			.friendlyForm ul, .friendlyForm ol { margin: 0; padding: 0; }
			.friendlyForm li { width: 99%; margin: 0; padding: 0 0 5px 0; list-style: none; clear: left; }
			.friendlyForm li div { position: relative; width: 250px; float: left; }
			.friendlyForm label { display: block; float: left; width: 230px; margin-right: 20px; }
			.friendlyForm input { width: 250px; }
			.friendlyForm select { width: 250px; }
			.friendlyForm select { width: 250px; }
			.friendlyForm textarea { width: 250px; height: 100px; }
			.friendlyForm .checkbox { width: auto; }
			.friendlyForm .radio { width: auto; }
			.friendlyForm .helper { font-size: 0.75em; color: #666; padding: 5px 0 5px 0; margin: 0 0 0 250px; display: none; clear: both; }
			.friendlyForm label.focus { font-weight: bold; color: #168041; border: none;}
			.friendlyForm label.hidden { visibility: hidden; }
			.friendlyForm label.disabled { color: #aaa; }
			.friendlyForm .inputField { border: 1px solid #bbb; }
			.friendlyForm .inputField.focus { border: 1px solid #168041; }
			.friendlyForm .inputField.required { background-color: #eee; }
			.friendlyForm .errorMsg { color: #D2232B; font-weight: bold; }
			.friendlyForm .showHide { clear: both; margin: 0; font-size: 0.8em; text-decoration: none; }
			.friendlyForm .multiCol li { width: 220px; clear: none; float: left; padding: 0; margin: 0 20px 0 0; }
			.friendlyForm .multiCol label { width: 180px; font-size: 0.9em; }

			.friendlyForm .button, .button { width: auto; }

		/* Pods */
		.pod { position: relative; background: url(/images/pod-shadow.png) top center no-repeat; margin: 0 0 2em 0; padding: 16px 0 0 0; }
			.pod p, .pod ul, .pod ol { margin: 0 0.5em 0 0.5em; }
			.pod .header { height: 58px; line-height: 58px; font-size: 20px; color: #168041; background-position: 160px 0; background-repeat: no-repeat; margin: 0 0 20px 5px; }
			.pod .header a { display: block; text-decoration: none; }

		/* Static buttons */
		.staticButton { position: relative; width: 230px; height: 60px; background: url(/images/static-buttons.png) no-repeat; line-height: 60px; text-indent: 55px; font-size: 17px; margin-bottom: 1em; display: block; text-decoration: none; }
			.staticButton.schoolUniform { color: #D2232B; background-position: 0 -60px; }
			.staticButton.schoolUniform:hover { background-position: -230px -60px; }
			.staticButton.schoolMeals:hover { color: #168041; background-position: -230px 0; }

		/* Post-it note */
		.postIt { width: 172px; height: 210px; background-image: url(/images/post-it.png); background-repeat: no-repeat; overflow: hidden; cursor: default; }
			.postIt .content { position: relative; width: 135px; height: 100px; margin: 75px 18px 35px 15px; font-size: 11px; overflow: hidden; text-align: center; }
			.postIt .moreInfo { color: #ED1C24; font-size: 14px; text-decoration: none; font-weight: bold; }
			.postIt .close { position: absolute; top: 23px; right: 20px; text-decoration: none; color: #ED1C24; border: 1px solid #ED1C24; font-size: 10px; padding: 1px; line-height: 9px; font-weight: bold; }	

		/* Large photo canvas */
		.largeCanvas { position: relative; width: 189px; height: 189px; float: left; margin: 0 12px 6px 0; background: url(/images/canvas-large.png) no-repeat; color: #58585A; text-decoration: none; overflow: hidden; }
			.largeCanvas .imageWrapper { position: absolute; display: block; top: 16px; left: 16px; width: 150px; height: 110px; overflow: hidden; }
			.largeCanvas .title { position: absolute; text-align: center; display: block; top: 133px; font-size: 12px; left: 16px; width: 150px; height: 33px; overflow: hidden; }
			.largeCanvas .title:hover { color: #D2232B; }

		/* Small photo canvas */
		.smallCanvas { position: relative; width: 68px; height: 54px; background: url(/images/canvas-small.png) no-repeat; }
			.smallCanvas a { position: absolute; display: block; top: 2px; left: 2px; width: 55px; height: 41px; overflow: hidden; }

		/* Inline news image */
		.newsImage { float: left; margin: 0 1em 1em 0; }

		/* List of articles */
		.articleList { margin: 1em 0 0 0; padding: 0; }
			.articleList li { margin: 0 0 0.5em 0; padding: 0.6em; border: 1px solid #eee; list-style: none;  }
			.articleList .title { font-weight: bold; margin: 0; }
			.articleList .date { font-weight: bold; }
			.articleList .description { margin: 0; line-height: 1.2em; }		

		/* Clearer */
		.clearme { position: relative; width: 0; height: 0; line-height: 0; font-size: 0; clear: both; }

		/* Separator */
		.separator { height: 1px; border-bottom: 1px dashed #014FD7; margin-bottom: 10px; }

		/* Additional Events */
		.otherEvents { background-color: #F5F5F5; padding: 4px; }

		/* File list */
		.fileList { margin: 1em 0 1em 0; padding: 1em 0 0 0; border-top: 1px dotted #ddd; }
			.fileList li { list-style: none; margin: 0 0 0 1em; padding: 0; }

		/* File link icons */
		.fileLink { background: url(/images/fileicons/file.gif) 0 50% no-repeat; padding-left: 25px; }
			.fileLink.pdf { background-image: url(/images/fileicons/pdf.gif) }
			.fileLink.doc { background-image: url(/images/fileicons/doc.gif) }
			.fileLink.docx { background-image: url(/images/fileicons/docx.gif) }
			.fileLink.zip { background-image: url(/images/fileicons/zip.gif) }
			.fileLink.xls { background-image: url(/images/fileicons/xls.gif) }
			.fileLink.xlsx { background-image: url(/images/fileicons/xlsx.gif) }
			.fileLink.url { background-image: url(/images/fileicons/ie.jpg) }
	 
	 /* Left/right align */
		 .leftAlign { float: left; margin: 0 1em 1em 0; }
		 .rightAlign { float: right; margin: 0 0 1em 1em; }
	
	/* Jplayer */
	.jPlayer { text-indent: 1000px; overflow: hidden; white-space: nowrap; background: url(/images/play-stop.png) no-repeat; } 
		.jPlayer.stop { background-position: 0 -110px; } 
		
	/****************************************************************************************************************************
	 * Layout
	 ****************************************************************************************************************************/

		body { background: url(/images/circle-bg.png) fixed #f3f3f4; margin: 80px 0 0 0; }

		#header { position: relative; width: 1030px; height: 243px; margin: 0 auto 0 auto; background: url(/images/green-header.png) no-repeat; z-index: 999; }
		
		#mainMenu { position: absolute; z-index: 999; bottom: -72px; left: 3px; margin: 0; padding: 24px 200px 0 50px; width: 781px; height: 65px; background: url(/images/yellow-band.png) no-repeat; overflow: hidden; }
			#mainMenu li { margin: 0 4px 40px 4px; height: 31px; padding: 0; display: block; float: left; overflow: hidden; list-style: none; }
			#mainMenu li a { display: block; font-size: 18px; color: #168041; text-decoration: none; height: 31px; padding: 0 8px 0 8px; line-height: 31px; }
			#mainMenu li:hover, #mainMenu li.on { background: url(/images/pushed-button-l.png) no-repeat; }
			#mainMenu li:hover a, #mainMenu li.on a { background: url(/images/pushed-button-r.png) 100% 0 no-repeat ; color: #D2232B; }
		
		#search { position: absolute; right: 40px; bottom: -37px; z-index: 1001; width: 179px; height: 30px; background: url(/images/search-bar.png) no-repeat; margin: 0; }
			#search .field { position: absolute; top: 7px; left: 15px; color: #999; width: 130px; background-color: #F3F3F4; border: none; }
			#search .submit { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; outline: none; }
			#search fieldset { margin: 0; padding: 0; border: none; }
			
		#mainArea { position: relative; width: 1030px; margin: 0 auto 0 auto; background: url(/images/white-area-gradient.png) repeat-y; }
		
		#col1 { position: relative; float: left; width: 230px; margin-right: 25px; min-height: 600px; }
		#content { position: relative; float: left; width: 390px; margin: 0 25px 0 0; min-height: 600px; }
		#col2 { position: relative; float: left; width: 230px; min-height: 600px; }
		
		#innerWrapper { position: relative; width: 900px; min-height: 300px; padding: 70px 25px 0 25px; margin: 0 auto 0 auto; }
		
		#homeLink { position: absolute; width: 140px; height: 159px; top: 58px; left: 88px; background: url(/images/st-matts-logo.png) no-repeat; text-indent: -1000px; overflow: hidden; }
		
		#circles { position: absolute; width: 764px; height: 307px; top: -67px; right: -10px;  background: url(/images/circles.png) no-repeat; z-index: 1000; }

		#sideMenu { margin: 0 0 20px 0; padding: 0; background: url(/images/tall-grey-grad.png) repeat-x top #E7E8E9;}
			#sideMenu li { margin: 0 0 5px 0; padding: 0; list-style: none; }
			#sideMenu a { position: relative; display: block; text-indent: 10px; width: 230px; line-height: 30px; background: url(/images/tabs.png) no-repeat; color: #fff; text-decoration: none; font-size: 16px; }
			#sideMenu ol { margin: 0 0 0 0; padding: 20px 0 8px 0; }
			#sideMenu a:hover,
			#sideMenu li.on a { background-position: 0 -30px; }
			#sideMenu li li { margin: 0 0 5px 10px; }
			#sideMenu li li a { width: 220px; color: #58585A; text-indent: 0; line-height: normal; background: none; font-weight: normal; }
			#sideMenu li li a:hover,
			#sideMenu li li.on a { color: #D2232B;  }

		#footer { position: relative; width: 900px; padding: 20px 25px 20px 25px; margin: 40px auto 0 auto; border-top: 10px solid #208C3E; }
		
		#copyright { float: left; margin-top: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 0.65em; color: #999; }
			#copyright a { color: #aaa; }
		
		#footerLogos { float: right; font-size: 0; }
			#footerLogos img { margin-left: 15px; vertical-align: middle; }
		
		#prospectusPod .header { background-image: url(/images/prospectus.jpg); }
		#newsPod .header { background-image: url(/images/newsletter.jpg); }
			#newsPod li { list-style: none; margin: 0 0 1em 0; padding: 0 0 1em 0; border-bottom: 1px dashed #888; }
			#newsPod a { color: #D2232B; text-decoration: none; display: block; }
		#galleryPod .header { background-image: url(/images/gallery.jpg); }
		#galleryPod .smallCanvas { margin: 0 0 2px 7px; float: left; }
		#alertNote { position: absolute; top: 60px; right: 20px; z-index: 2000; }
	
		#yearSelector { padding-bottom: 1em; }
			#yearSelector li { margin: 0 0.5em 0.4em 0; padding: 0 0.5em 0 0; list-style: none; border-right: 1px solid #ddd; float: left; }
			#yearSelector a { text-decoration: none; }
			#yearSelector a:hover { text-decoration: underline; }
			#yearSelector a.on { font-weight: bold; }
}