/*

Theme Name: St Peter's Primary School Theme

Theme URI: http://www.stpeters.co.uk/

Version: 1.0.1

Author: http://www.mglworld.com

*/





/* Overal setup */



* { margin:0; padding:0; }

body { background-image:url(images/bg.jpg); background-repeat: repeat-x ; background-color: #ffffffa; color:#000; font:14px  helvetica, arial,Sans-serif; }

a   { color:#000;text-decoration:none;outline:0; font-weight: bold; }

a:hover { color:#1673d0; }

a img { border: none; }

p { line-height:1.5em; padding:0.5em 0; margin:0;}

h1  { font-size:18px; } 

h2  { font-size:20px; padding-bottom:10px; font-weight: bold; color:#1673d0;} 

h3  { font:bold 14px arial,helvatica;color:#000;text-transform:capitalize; }

h3 SPAN.slash { font:bold 10px Arial !important; text-transform: lowercase; }

h4  { font-size:14px; }

code { font: 11px  "Courier New"; color:#666; padding:5px;padding:5px 0;display:block;border-left:1px solid #903000; }

blockquote { color:#ddd; padding:5px;font: 12px Arial,Sans-serif;line-height:1.4em; }

.clear { clear: both; }



/* header */

#wrapper-push {display: block; margin: 0 auto; height: 40px;}



#header { background: url(images/header.jpg) no-repeat 0 0 transparent;width:960px;margin:0 auto; height:310px; position:relative; }

#main-wrapper { background: url("images/bggrad.gif") repeat-y scroll 0 0 transparent;display:block; margin:0 auto;width:960px;text-align:left; }

#main-content {background: url(images/bggrad.gif) repeat-y; display:block;width:960px;text-align:left; padding:0; margin:0;}



#content { width: 690px; padding: 15px 0 0; float: right;text-align: left; background:url(images/content_top.jpg) no-repeat scroll -1px 0 transparent;}

html>body #content {width: 710px;float:right;text-align: left; padding: 25px 0 0; background:url(images/content_top.jpg) no-repeat scroll -1px 0 transparent;}



/* sidebar related */

#sidebar  {background: url("images/sidebar_bg.gif") no-repeat scroll 7px 0 transparent;
    color: #46c85a;
    float: left;
    margin: 0 0 0 0px;
    padding: 0px 0px 0px 10px;
    width: 232px;
	z-index:9999;
}

#sidebar a   {color: #ffffff;
display: block;
font-size: 9pt;
padding: 10px 2px 8px 0;
}

a#eportLink {padding:0; padding-top:10px;}
 
#sidebar a:hover { color:#feb536; }

#sidebar ul { list-style:none;margin:0; padding:0; color: #000; }

/*#sidebar ul li{ 

	background:transparent url(images/button.gif) no-repeat scroll 0 0; 

	color:#FFFFFF; 

	height:55px; 

	padding:0px 0px 0; 

	width:170px;

	text-align:center;

	display: block;

}*/



#sidebar ul.catlist { list-style:none;margin:0; border-top:medium; border-color:#CC0000; padding-top:10px; padding-bottom:6px; width: 220px;}


li.cat-item a {color:#fff !important;padding:12px 0 5px !important;}
li.cat-item a:hover {color:#00539e !important;}

#sidebar ul li.page_item{

display:block;

margin:0;

text-align:center;

font-family:"Helvetica";

font-size:14px;

font-weight:bold;

background:transparent url(images/buttonBG.gif) no-repeat scroll 0 0;

width:220px;

height:47px;

}

html>body #sidebar ul li.page_item{

display:block;

margin:0;

text-align:center;

font-family:"Helvetica";

font-size:14px;

font-weight:bold;

background:transparent url(images/buttonBG.gif) no-repeat scroll 0 0;

width:220px;

height:47px;

}

#sidebar ul li.cat-item{

display:block;

margin:0;

text-align:center;

font-family:"Helvetica";

font-size:14px;

font-weight:bold;

background:transparent url(images/button2.jpg) no-repeat scroll 0 0;

width:220px;

height:42px;

}

html>body #sidebar ul li.cat-item{

display:block;

margin:0;

text-align:center;

font-family:"Helvetica";

font-size:14px;

font-weight:bold;

background:transparent url(images/button2.jpg) no-repeat scroll 0 0;

width:220px;

height:42px;

}


.menu_left ul {
	z-index:9100;
}

.menu_left ul ul {
	z-index:9200;
}

.menu_left ul ul ul {
	z-index:9300;
}





/* form */

#commentform {

	padding: 1em 0;

}



#author, #email,#url,#comment {

	font:1em arial,helvetica,verdana,sans-serif;

	padding: 5px 0;

	padding:2px;

}



.comment-warning strong {

	color: #999;

	font-weight: bold;

}



/* footer */

#footer {

	background: url("images/footer.gif") no-repeat scroll 0 30px transparent;
	color:#555;

	font-size:9px;

	line-height:1.4em;

	padding:0;

	margin:20 auto;

	height:51px;

	clear:both;

	width:960px;

	text-align:right;

}



#footerlink {

	color:#555;

	font-size:9px;

	line-height:1.4em;

	padding:0;

	margin:0 auto;

	clear:both;

	width:970px;

	padding-top: 94px;

}



h3#respond {

padding-top: 15px;

}



h3#comments {

padding-top: 15px;

padding-bottom: 15px;

}



textarea#comment {width: 660px;}



ul.footerlist {margin:0 auto; padding: 5px 0 0 5px; width:347px; float: left;}

li.bgtext {color: #1673d0; font-size: 12px; display: inline;}

a.bgtext {color: #1673d0;padding-right: 25px;font-weight: bold;}

a:hover.bgtext {color: #feb536;}

p.bgtext {color:#1673d0;

float:right;

font-size:12px;

width:165px;padding-top:13px;padding:4px 0 0 5px;}



p.validator {float: right;padding: 6px 20px 0 0;}



/* Navigation */



ul#nav {

/*height:25px;*/

border:0 solid #CCCCCC;


width:95%;

}



ul#nav li {

list-style:none;

float:left; 

border-right:1px solid #ccc;

line-height:25px;

padding:0 10px;

font-weight:bold;

font-size:14px;

height:25px;

display:inline-block; /* This is required to fix the shifting menu item in firefox */

}



* html ul#nav li {

list-style:none;

float:left; 

border-right:1px solid #ccc;

line-height:25px;

padding:0 10px;

font-weight:bold;

font-size:14px;

height:25px;

 display:inline-table; /* This is required to fix the shifting menu item in IE */

}



.post {

clear:both;

}





/* - THIS IS USED AS A CHEAP TRICK TO REMOVE CERTAIN PAGES FROM THE MAIN NAV - LOOK TO FIX! - */



.page_item.page-item-4 {display: none !important;}

.page_item.page-item-6 {display: none !important;}

.page_item.page-item-7 {display: none !important;}



/* - AND HERE ENDS THE CHEAP TRICK, I FEEL WRONG! - */



#stylechange {
	background: url("images/btn/bg.png") no-repeat scroll 0 0 transparent;
	    height: 26px;
	    margin-left: 867px;
		    margin-top: 0px;
	    padding: 5px;
	    position: absolute;
	    top: 0;
	    width: 80px;
	    z-index: 9999;}

#stylechange img {float:right;}



#stamps {margin: 0 auto;width:253px; padding-top: 5px;}



.post {padding-bottom:1.5em;padding-left:20px;

padding-right:25px;}



/* - TICKER STYLES - */



#latestnews {

background:transparent url(images/notices.gif) no-repeat scroll 0 0;

height:24px;

padding:10px 20px 8px 101px;

position:relative;

width:575px;

margin:11px 0 0 40px;}



.ticker-div {
    background: url("images/notices.gif") no-repeat scroll 0 0 transparent;
    float: left;
    font-size: 20px;
	color:#666666;
    height: 30px !important;
    left: 0 !important;
    line-height: 18px;
    margin: 0;
    padding: 5px 0 0 240px;
    position: relative;
    top: 269px !important;
    width: 705px !important;
}




/* SEARCH BOX */



.search-wrapper {height: 50px; width: 215px; background: transparent url(images/saerch.gif);height:34px; padding:28px 0 0 71px; width:144px;}

.search-wrapper input.textfield {border: none;height:18px; width:110px;}

.search-wrapper input.button {border: 0; background: transparent url(images/page_find.gif); height:16px; width:16px; cursor: pointer;}



/* BANNER */



#bannerobject {padding-left: 10px;}



/*	Using 'class="alignright"' on an image will (who would've

	thought?!) align the image to the right. And using 'class="centered',

	will of course center the image. This is much better than using

	align="center", being much more futureproof (and valid) */



img.centered {

	display: block;

	margin-left: auto;

	margin-right: auto;

	}



img.alignright {

	padding: 4px;

	margin: 0 0 2px 7px;

	display: inline;

	}



img.alignleft {

	padding: 4px;

	margin: 0 7px 2px 0;

	display: inline;

	}



.alignright {

	float: right;

	}



.alignleft {

	float: left;

	}
	
.cRight {clear:right;}
.cLeft {clear:left;}

/* End Images */

/* #Banner { position:absolute; z-index:1;} */


.nopad {
	padding:0 !important;
}

* html #contentFooter {
    background: url("images/contentFooter.gif") no-repeat scroll 0 bottom transparent;
    height: 9px;
    width: 690px;
}

/* Z-index fixes */

* html #sidebar {z-index:9999;}
* html #sidebar .menu_left {z-index:9001;}
* html #sidebar .menu_left ul {z-index:9002;}
* html #sidebar .menu_left ul li {z-index:9003;}
* html #sidebar .menu_left ul li ul {z-index:9004;}
* html #sidebar .menu_left ul li ul li {z-index:9005;}
* html #sidebar .menu_left ul li ul li ul {z-index:9006;}
* html #sidebar .menu_left ul li ul li ul li {z-index:9007;}

* html .menu_left ul li ul li a { height: 13px !important; padding-top:7px !important; padding-bottom:7px !important;}
* html .menu_left ul li ul li ul li a { height: 13px !important; padding-top:7px !important; padding-bottom:7px !important;}
* html .menu_left ul li ul li { height: 27px !important;}
* html .menu_left ul li ul li ul li { height: 27px !important;}

#css_ddmenu-3 {padding-bottom:6px; width: 232px;}


.menu_left ul li ul li a {
	padding: 9px 0px 0px 0 !important;
    width: 200px !important;
}

.menu_left ul li ul li ul li a {
	padding: 9px 0px 0px 0 !important;
    width: 200px !important;
}

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #main-wrapper {height: 100%;}

body > #main-wrapper {height: auto; min-height: 100%;}

#main {overflow:inherit;
	padding-bottom: 70px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -70px; /* negative value of footer height */
	margin-right: auto;
	margin-left: auto;
	height: 70px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}


/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file
<!--[if  IE 8]>
	<style type="text/css">
		#wrap {display:table;}
	</style>
<![endif]-->

*/

.twitter-follow-button {
display: block;
position: relative;
top: 0;
left: 32px;
}