/* Style Sheet for Crossflatts School Website */

/*
General Properties of website are :

Fixed width 800px, centred page (defined via allcontent div)
Five main areas in each page:

1. top (for headers, navbars etc)
2. content01 (
...
*/

body
{
	background-color: #f0f0f0;
	color: #164b97;
	font-family: "Comic Sans MS", sans-serif;
	font-size: 15px;
	padding: 0px;
	margin: 0px;
}

h1
{
	font-size: 100%;
	padding: 0;
	margin: 0;
}

div
{ 
	padding: 0px;
	margin: 0px;
}

div#content02 p a img
{
	float: right;
	width: 50%;
}

div#content02 li
{
	font-size: 80%;
}

div#content02 ul li a
{
	color: #0d5a95;
}

div#allcontent
{
	/* width: 800px; */
	margin-left: auto;
	margin-right: auto;
	background: white url("../images/Background.jpg");
}

div#top
{
	border: none;
	/* width: 800px; */
	height: 174px;
	background: url("../images/hRepeat.gif") repeat-x;
	background-position: 290px 0px;
}

div#wrapper
{
	position: relative;
	background: url("../images/cflogov02-250.gif") no-repeat;
	height: 174px;
}

div#content
{

	background: url("../images/vRepeat.gif") repeat-y;
}

div#pageHeader
{
	position: absolute;
	top: 150px;
	left: 155px;
}

div#pageHeader h1
{
	white-space: nowrap;
	font-size: 1.5em;
	overflow: hidden;
}

div#content01
{
	padding-top: 10px; /* to avoid gap between divs.  Should be temporary */
	background-color: transparent;
	width: 150px;
	float: left;
}

div#leftNavBar ul
{
	background: transparent;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div#leftNavBar li
{
	padding: 0;
	margin: 0;
	background: transparent;
	display: block;
}

div#leftNavBar ul a
{
	font-size: 80%;
	color: black;
	display: block;
	width: 150px;
	height: 23px;
	margin: 0;
	padding: 0;
	padding-top: 12px;
	line-height: 10px;
	background: url('../images/CFpixyRollover01.gif') no-repeat left center;
	text-decoration: none;
	text-indent: 5px;
	text-align: center;
	vertical-align: middle;
}

xdiv#leftNavBar li.first a

{
	height: 35px;
	line-height: 26px;
}

div#leftNavBar ul a:hover,
div#leftNavBar .selected a
{
	color: #164b97;
	background-position: right center;
}

div#content02
{
	padding-top: 10px; /* to avoid gap between divs.  Should be temporary */
	/* width: 480px; */
	background-color: transparent;
	margin-left: 160px;
	margin-right: 160px;
}

div#content03
{
	background-color: transparent;
	border-left: solid 1px #dd223f;
	width: 150px;
	float: right;
}

div#content03 div.inner
{
	margin-left: 10px;
}

div#content03 h1, h2
{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 80%
}

div#newsHeadlines-01 ol
{
	padding: 0;
	margin: 0;
	padding-left: 0px;
	font-size: 70%;
	color: #164b97;
}

div#newsHeadlines-01 ol li
{
	width: 118px;
	/*height: 45px;*/
	background: #e8e340;
	border: solid 1px #164b97;
	border-left: solid 5px #164b97;
	border-right: solid 5px #164b97;
	padding: 0;
	padding-left: 5px;
	margin: 0;
	margin-bottom: 3px;
	list-style: none;
}

div#newsHeadlines-01 ol li a
{
	font-size: 100%;
	color: #164b97;
	text-decoration: none;
}

div#newsHeadlines-01 ol li a:hover, div#newsHeadlines ol li a:focus
{
	color: #dd223f;
}

div.address
{
	padding: 0;
	margin: 0;
	line-height: 80%;
	position: absolute;
	left: 430px;
	top: 32px;
	background: transparent;
	width: 100px;
}

div.address p
{
	margin: 0;
	padding: 0;
	font-size: 70%;
	color: #e8e340;
}

div.headTeacher
{
	padding: 0;
	margin: 0;
	line-height: 130%;
	position: relative;
	left: 525px;
	top: 80px;
	background: transparent;
	width: 200px;
}

div.headTeacher p
{
	margin: 0;
	padding: 0;
	font-size: 90%;
	color: #0d5a95;
}

div.contact
{
	padding: 0;
	margin: 0;
	line-height: 75%;
	position: absolute;
	left: 539px;
	top: 24px;
	background: transparent;
	width: 200px;
}

div.contact p
{
	margin: 0;
	padding: 0;
	font-size: 65%;
	color: #e8e340;
}

div.contact a
{
	color: #e8e340;
}

div.contact a:hover, div.contact a:focus
{
	color: #dd223f;
}

div#textFixed02 ul
{
	padding: 0;
	margin: 0;
}

div#textFixed02 ul li
{
	width: 120px;
	height: 18px;
	border: solid 1px #e8e340;
	/*border-left: solid 5px #e8e340;*/
	/* border-right: solid 5px #e8e340;*/
	background: #164b97;
	padding: 0;
	padding-left: 10px;
	margin: 0;
	margin-bottom: 3px;
	list-style: none;
	line-height: 90%;
}

div#textFixed02 ul li a
{
	padding: 0;
	margin: 0;
	font-size: 70%;
	text-decoration: none;
	color: #e8e340;
}

div#textFixed02 ul li a:hover, div#textFixed02 ul li a:focus
{
	color: #dd223f;
}

div#textFixed03
{
	margin-top: 5px;
}

div#textFixed03 img
{
	margin: 0;
	padding: 0;
	width: 127px;
	border: solid 3px #164b97;
}

div#bottom
{
	background-color: silver;
	/* width: 800px; */
	height: 20px;
	clear: both;
}

div#text1 h1
{
	
}

div#text3 h1
{
}

div#content02 img.birdCam
{
	width: 96%;
	margin: 0;
	padding: 0;
}

div.activeMap
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background:   url("../../content/Images/CrossflattsFloorPlanv01.gif") top left no-repeat;
	width: 400px;
	height: 268px;
}

div.activeMap div
{
	position: absolute;
	height: 31px;
	width: 62px;
	background: transparent;
}

div.activeMap div.class01 { top: 0; left: 2px; }
div.activeMap div.class02 { top: 0; left: 64px; }
div.activeMap div.class03 { top: 30px; left: 167px; }
div.activeMap div.class04 { top: 0; left: 304px; }
div.activeMap div.class06 { top: 31px; left: 2px; }
div.activeMap div.class07 { top: 25px; left: 274px; }
div.activeMap div.class08 { top: 25px; left: 336px; }
div.activeMap div.class09 { top: 62px; left: 2px; }
div.activeMap div.class10 { top: 62px; left: 336px; }
div.activeMap div.class11 { top: 85px; left: 336px; }
div.activeMap div.class12 { top: 135px; left: 167px; }
div.activeMap div.class13 { top: 173px; left: 2px; }
div.activeMap div.class14 { top: 173px; left: 337px; }
div.activeMap div.class15 { top: 203px; left: 0; }
div.activeMap div.class16 { top: 203px; left: 336px; }
div.activeMap div.class17 { top: 233px; left: 0; }
div.activeMap div.class18 { top: 233px; left: 64px; }
div.activeMap div.class19 { top: 233px; left: 274px; }
div.activeMap div.class20 { top: 233px; left: 336px; }

div.activeMap div a, div.activeMap div p
{
	height: 20px;
	width: 60px;
	margin-top: 5px;
	display: block;
	text-align: center;
	font-size: 60%;
	line-height: 85%;
	background: transparent;
	text-decoration: none;
}

div.activeMap div p { color: black; }
div.activeMap div a:hover, div.activeMap div a:focus { color: red; }

div.gallery
{
	float: left;
}

div.gallery-image
{
	border: solid white 1px;
	background: #164b97;
	margin: 0;
	padding: 0;
	margin-left: 5px;
	margin-bottom: 5px;
	height: 100px; /* at the moment, this allows the fixed size images to be nicely spaced, but ultimately needs to be more flexible than this */
	width: 100px; /* at the moment, this allows the fixed size images to be nicely spaced, but ultimately needs to be more flexible than this */
	float:left;
}

div.gallery-image a
{
	padding: 0;
	margin: 5px 5px;
        background: black;
        display: block;
        height: 90px;
        width: 90px;
	overflow: hidden;
}

div.gallery-image img
{
	height: 90px;
	width: auto;
        border: none;
	display: block;
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;

}

div.gallery-image.landscape img
{
	height: auto;
	width: 90px;
}
	
div#gallery div.gallery-image p
{
	font-family:Eurostile,Sans-serif;
	font-size:0.8em;
	background-color: white;
        color: black;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
        overflow: hidden;
        height: 48px;
}