body {
	font-family: 'Dosis', sans-serif;
	margin: 0px;
	font-size: 14pt;
	/*background: #799dd7 url(../images/landscape.jpg) repeat-x top center;*/
	background: #fff;
	color: #303247;

}

.style1 {
	color: #335781;
	font-family: 'Dosis', sans-serif;
	font-size: 16px;
}
.style2 {
	font-family: 'Dosis', sans-serif;
	display: block;
	float: left;
	padding: 10px 10px;
	color: #fff;
	margin-left: 8px;
	text-decoration: none;
	background:#4367a1;
	font-weight: bold;
	font-size: 14px;
}
.style3 {
	font-size: 16px;
	font-family: 'Dosis', sans-serif;
}
.style4 {font-size: 24px; font-family: 'Dosis', sans-serif;}
.style5 {font-family: 'Dosis', sans-serif;}



.style5a {
	display: block;
	float: left;
	padding: 15px 5px;
	color: #fff;
	margin-left: 10px;
	text-decoration: none;
	background:#122041;
	font-weight: normal;
	font-size: 110%;
	cursor: pointer;
	
}

.style5a:hover { background:#aaa; color: #fff; }

.style5aRed {
	display: block;
	float: left;
	padding: 10px 5px;
	color: #fff;
	margin-left: 8px;
	text-decoration: none;
	background:#691c14;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
	
}





.img {
	float: right;
	margin: 30px;
}



.style6 {
	font-size: 200%;
	font-weight: normal;
	font-family: 'Dosis', sans-serif;
	olor: #8fb3ed;
	color:#fff;
	padding: 5px 0 0 0;
}


.displayName{
	color: #fff; background: #172a55; padding: 5px; font-size: 200%; border-radius: 5px;
}
a:link {
	color: #335781;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	color: #335781;
	font-weight: bold;
}
a:hover {
	color: #122041;
	text-decoration: underline;
}
a:active {
color: #335781;
	text-decoration: none;
}
.style7 {color: #335781;}
.style8 {font-size: 12px; font-family: 'Dosis', sans-serif;}

#google_translate_element{

	 width: 160px;
	 background: #fff;
	 border: 1px solid #999;
	 border-radius: 5px; 
	 padding: 5px 5px;

}

div#google_translate_element div.goog-te-gadget-simple {
        padding: 5px;
    }
	
div#google_translate_element select.goog-te-combo {
        padding: 5px;
		border: 1px solid #999;
		border-radius: 5px;
    }

    div#google_translate_element div.goog-te-gadget-simple {
        background-color: #fff;
    }

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
        color: #fff;
    }

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
        color: #691c14;
    }

    div#google_translate_element div.goog-te-gadget-simple {
        border: none;
		border-radius: 5px;
    }

#mobileMenu
{	
	/*width: 1260px;*/
	 
	display: none;

	
}

.xclose{
	display: block;
	visibility: visible;

}

.mastheadimage{
	width: 15%;
	padding: 10px 0 10px 2%;
	float: left;
}

.mastheadimageHome{
	width: 45%;
	padding: 10px 0 10px 27%;
	
}

.mastheadimageHomesmall{
	width: 20%;
	margin-top: 20px;
}

.mastheadtext1{
	font-size: 340%;
	font-weight: 200;
	color:#fff;

}

.mastheadtext2{
	font-size: 200%;
	font-weight: 200;
	color:#fff;

}

.mastheadcontainer{
	width: 81%;
	float: right;
	margin: 20px 0 0 2%;
	
}

.mastheadcontainerHome{
	width: 100%;
	text-align: center;
}

.mastheadcontainersmall{
	width: 80%;
	float: right;
}

#mobileMenu a
{
	display: block;font-family: 'Dosis', sans-serif; font-size: 200%; color: #fff;
}

#mobileMenu a:hover { color: #fff;}
	
	#nav2{ width: 98%; margin-right: 2%;}
	#nav2Nocton{ width: 96%; margin-right: 2%;}
	
	img{max-width: 100% !important;
	height: auto !important;
	}
	
#menuGif{width: 12% !important;
height: 12% !important;
float: left;
}

#logo{width: 50%;}
	
	.schoolName .bigName{font-size: 200%;}
.schoolName .smallName{font-size: 140%;}


#outerheaderHome { width: 100%;

background: #122041;

}


#outerheader { width: 100%;

background: #172a55;

}

#outerheaderNocton { width: 100%;

background: #660000;
/*background: #025ea8 url(../images/headerback2.jpg) repeat-x left center;*/

}

.alert{font-family: 'Dosis', sans-serif; font-style: italic; width: 100%; margin-left: auto; margin-right: auto; background: #172a55; color: #fff; padding: 10px 0px; border-radius: 5px; font-size: 130%;}

.alert p{text-align: center; font-size: 120%;}

.alert a{color: #fff;}

#photobox {
height: 250px;
width: 1260px;
position: absolute; left: 0px; top: 200px;
background-image: url(photo.jpg);


}

#soundbite {
height: 250px;
width: 300px;
position: absolute; left: 50px; top: 280px;
color: #fff;
font-size: 140%; font-style:italic;
}



#outerheader1 { width: 100%;
background: #fff;

}

#outerheader1Home { width: 100%;
background: #172a55;

}

#header1 {
	position: relative; top: 0px; left: 0px;
/*background: #ffffff url(../images/landscape.jpg) center center;*/
width: 1260px;

background: #fff;
margin-left: auto;
margin-right: auto; 
text-align: right;
}

#header
{
	/*background: #ffffff url(../images/innerback.jpg) center top;*/
	

	margin-left: auto;
	margin-right: auto;
	width: 1260px;
	position: relative; top: 0px; left: 0px;
	text-align: left;
}

#headerTranslate
{
	/*background: #ffffff url(../images/innerback.jpg) center top;*/
	

	margin-left: auto;
	margin-right: auto;
	width: 1260px;
	position: relative; top: 0px; left: 0px;
	text-align: right;
}

#header img
{ /*width: 100%; height: auto;*/}

-#header h1 { margin: 0; }


#outernavigation {
	width: 100%;
	height: 57px;
	text-align: right;
	background: #122041;
	/*background: #6B0000;*/
	
}

#navigation
{
	background: #122041;
	width: 1260px;
	z-index: 101;
	1border-top: 1px solid #fff;
	margin-left: auto;
	margin-right: auto;
	height: 57px;
	position: relative; top: 0px; left: 0px;


}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: block;
	float: left;

}



.clearboth { clear: both}

#navigation li a
{
	display: block;
	float: left;
	padding: 15px 5px;
	color: #fff;
	margin-left: 10px;
	text-decoration: none;
	background:#122041;
	font-weight: normal;
	font-size: 110%;
}

#navigation li a:hover { background:#aaa; color: #fff; }

#exit{

	position: absolute; top: -1000px; left: -1000px;
	visibility: hidden;
}



#exit a{
	background: #666 !important;

}

.subexit{

	background: #666 !important;
}

.img {
	float: right;
	margin: 30px;
}


.indexBox{
	color: #fff !important;
}


.lefty{
	width: 260px;
	float: left;
}

#nav2{
	margin-left: 10px;
    olor: #335781;
	color: #fff;
	background: #172a55;
	border-radius: 10px;
}


#nav2 ul
{
	margin: 0;
	padding: 0;
}

#nav2 ul li
{
	list-style-type: none;
	display: block;
}

#nav2 li a
{
	display: block;
	
	color: #fff;
	text-decoration: none;
	
}

#nav2 li a:hover { 
					 
text-decoration: none;
color: #96e9f0;
}


#nav2Nocton
{
	margin-left: 10px;
    olor: #335781;
	color: #fff;
	background: #aba37a;
	border-radius: 10px;
}


#nav2Nocton ul
{
	margin: 0;
	padding: 0;
}

#nav2Nocton ul li
{
	list-style-type: none;
	display: block;
}

#nav2Nocton li a
{
	display: block;
	
	color: #fff;
	text-decoration: none;
	
}

#nav2Nocton li a:hover { 
					 
text-decoration: none;
color: #000;
}

.homeintro{
padding: 10px; background: #fff; border-radius: 10px; margin-left: auto; margin-right: auto;
}

#homenav2
{
	margin: 10px 1% 10px 1%;
	float: left;
	width: 31.2%;
    olor: #335781;
	color: #fff;
	background: #172a55;
	border-radius: 10px;
}

#homenav2 a{color: #fff;
}

#homenav2 h2
{
	text-align: center;
}

#homenav2 h5
{
	color: #fff;
}

#homenav2 ul
{
	margin: 0;
	padding: 0;
}

#homenav2 ul li
{
	list-style-type: none;
	display: block;
}

#homenav2 li a
{
	display: block;
	
	color: #fff;
	text-decoration: none;
	
}

#homenav2 li a:hover { 
					 
text-decoration: none;
color: #96e9f0;
}




#homenav2a
{
	margin: 10px 30px 10px 30px;
	float: left;
	width: 420px;
    olor: #335781;
	color: #fff;
	background: #36a9e0;
	border-radius: 10px;
}

#homenav2a h2
{
	text-align: center;
}

#homenav2a ul
{
	margin: 0;
	padding: 0;
}

#homenav2a ul li
{
	list-style-type: none;
	display: block;
}

#homenav2a li a
{
	display: block;
	
	color: #fff;
	text-decoration: none;
	
}

#homenav2a li a:hover { 
					 
text-decoration: none;
color: #96e9f0;
}



.outercontent-container { width: 100%; z-index: 9;
background: #fff;
}


.content-container
{
	width: 1260px;
	background:  #fff;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	position: relative; top: 0px; left: 0px;
	 z-index: 10;
	
	
}

.content-container-home
{
	width: 1260px;
	
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	
	 z-index: 10;
	
	
}

#featureImg{
	 width:100%; height:auto;
}

.content
{

	
	float: right;
	width: 685px;
	margin-right: 0px;
	background: #fff;
	min-height: 500px;
	z-index: 11;
	

}

.contentHome
{

	width: 100%;
	margin-right: 0px;
	/*background: #fff;*/
	/*min-height: 500px;*/
	z-index: 11;
	

}

#content h2 { margin: 0; }

#containercycle{
	position: relative; top: 0px; left: 0px;
	width: 100%;
	}
	
#containercycleHome{
	position: relative; top: 0px; left: 0px;
	width: 60%;
	float: right;
	}
	
.homeName{
	position: relative; top: 0px; left: 0px;
	width: 40%;
	float: left;
	background: #172a55;
	}
	
.homeNamesmall{
	position: relative; top: 0px; left: 0px;
	width: 80%;
	float: left;
	background: #172a55;
	display: none;
	height: 12% !important;
	}
	
	.cycle-slideshow composite-example{
	width: 100%; background: #fff; position: relative; top: 0px; left: 0px; margin-bottom: 20px; margin-top: 0px;
}

.composite-example > a { background: #fff; display: block; width: 100%; }
.composite-example > a > img { background: #fff; display: block; width: 100%; height: auto;}


#ppp { margin: 10px;


}



#outer-footer { width: 100%;
 background: #172a55;
}

#outer-footer2 { width: 100%;
 margin-top: 20px;
 background:#172a55;
}


#footer
{
	clear: both;
	background: #172a55;
	text-align: right;
	padding: 20px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

#footer2
{
	clear: both;
	text-align: center;
	width:1260px;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
}

#footer2 a:link {
	color: #fff;
	text-decoration: none;
	font-weight: normal;
}
#footer2 a:visited {
	color: #fff;
	font-weight: normal;
}
#footer2 a:hover {
	color: #fff;
	text-decoration: underline;
	font-weight: normal;
}
#footer2 a:active {
color: #fff;
	text-decoration: none;
	font-weight: normal;
}

.menulist {
padding: 0px;
margin: 0px;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.menulist a{
display: block;
font-size: 13px;
width: 100%;
color:#fff;
text-align: left;
border-bottom: 1px solid #aaa;
padding: 8px 5px 8px 5px;
text-decoration: none;


}

.menulist a:link{color:#ffffff; background: #aaa;}

.menulist a:visited{color:#ffffff; background: #aaa;}

.menulist a:active{color:#ffffff; background: #aaa;}

.menulist a:hover {

text-decoration: none;
background:#172a55; color:  #fff;
}


#keyInformation {position: absolute; display: none; left: 163px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99995;}
#newsTab {position: absolute; display: none; left: 277px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99995;}
#index {position: absolute; display: none; right: 549px; top: 30px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#Learning {position: absolute; display: none; left: 643px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#aboutus {position: absolute; display: none; left: 73px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#contact {position: absolute; display: none; right: 0px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#Community {position: absolute; display: none; left: 432px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#Pupils {position: absolute; display: none; left: 365px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}




@media screen and (max-width: 1260px){

.img {
	float: right;
	margin: 30px;
}



.mastheadtext1{
	font-size: 300%;

}

.mastheadtext2{
	font-size: 170%;


}




#header
{
	/*background: #ffffff url(../images/innerback.jpg) center top;*/
	

	width: 100%;

}

-#header h1 { margin: 0; }




#navigation
{

	width: 100%;

}


#homenav2
{
	margin: 1% 1% 1% 1%;

	width: 31%;

}


#homenav2a
{
	margin: 1% 3% 1% 3%;

	width: 40%;

}


.content-container
{
	width: 100%;
	
	
}

.content-container-home
{
	width: 100%;	
}

.homeintro{
padding: 2%; background: #fff; border-radius: 1%;
}

.content
{
	width: 65%;
}

.contentHome
{
	width: 100%;
}

.cycle-slideshow composite-example
	{

	height: 100%;	
	}

#footer2
{
	width:100%;
}


}

@media screen and (max-width: 975px){
	
#keyInformation {position: absolute; display: none; left: 163px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99995;}
#newsTab {position: absolute; display: none; left: 277px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99995;}
#index {position: absolute; display: none; right: 549px; top: 30px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#Learning {position: absolute; display: none; left: 643px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#aboutus {position: absolute; display: none; left: 73px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#contact {position: absolute; display: none; right: 0px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#Community {position: absolute; display: none; left: 432px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
#Pupils {position: absolute; display: none; left: 365px; top: 50px; width: 200px; border: 4px solid  transparent; z-index: 99994;}
	
	#navigation li a
	{
		/*padding: 10px 2px;
		font-size: 14px;*/
	}



	.style5a {
		/*padding: 10px 2px;
		font-size: 14px;*/
		cursor: pointer;
		
	}

}


@media screen and (max-width: 955px){
	


.menulist a{
display: block;
font-size: 13px;
width: 100%;
color:#fff;
text-align: left;
border-bottom: 1px solid #ccccaa;
padding: 8px 5px 8px 5px;
text-decoration: none;


}

#homenav2 h2{
	font-size: 120%;
}
}

@media screen and (max-width: 810px){
	
	.homeNamesmall{
	display: block;
	}
	
	#outerheader1Home
	{
	display: none;
	}
	
	.style7{
		
		padding-bottom: 2%;
		padding-top: 1%;
		text-align: center;
	}
	
	.style5 {
	display: block;
	float: left;
	padding: 8% 0;
	color: #fff;
	margin-left: 0px;
	text-decoration: none;
	background:#172a55;
	font-weight: bold;
	font-size: 140%;
	border-bottom: 1px solid #fff;
	}
	
	.style5a {
	display: block;
	float: left;
	padding: 4% 0;
	color: #fff;
	margin-left: 0px;
	text-decoration: none;
	background:#172a55;
	font-weight: bold;
	font-size: 120%;
	border-bottom: 1px solid #fff;
	}
	
	.mastheadimage{
		width: 20%;
	}
	
	.mastheadimageHome{
	width: 45%;
	padding: 10px 0 10px 27%;
	
	}

	.mastheadimageHomesmall{
	width: 20%;
	margin: 10px 1%;

	}

	.mastheadtext1{
		font-size: 240%;
	}

	.mastheadtext2{
		font-size: 150%;
	}

	.mastheadcontainer{
		width: 62%;
	}


.mastheadcontainerHome{
	width: 100%;
	text-align: center;
}

.mastheadcontainersmall{
	width: 72%;
	float: right;
	margin: 10px 0 0 0;
}

	
#outerheaderHome { width: 100%;

background: #172a55;

}

#outernavigation
{	
	/*width: 1260px;*/
	height: 1px;
	background: none;
		
}

#navigation
{	
	/*width: 1260px;*/
	display: none;
	z-index: 101;
	margin: 0;
	position: absolute; top: 0px; left: 0px;
	width: 100%;
	padding: 0px;
	height: auto;
	 z-index: 99990;
	 animation-name: example;
    animation-duration: 1s;
	
}

td img{max-width: 100% !important;
	height: auto !important;
	}

#navigation ul
{
	margin: 0;
	padding: 0;
	clear: both;
	text-align: center;
}

#navigation ul li
{
	list-style-type: none;
	display: block;
	width: 100%;
	
	/*float: left;*/

}

#navigation li a
{
	display: block;
	float: left;
	width: 100%;
	padding: 4% 0;
	color: #fff;
	margin-left: 0;
	text-decoration: none;
	background:#172a55;
	font-weight: bold;
	font-size: 120%;
	border-bottom: 1px solid #fff;
}

#logo{width: 75%;}

.lefty{
	width: 100%;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

#homenav2{
	width: 100%;
	border-radius: 0;
	background: #172a55;
	margin: 1% 0;
}

#homenav2a{
	width: 100%;
	border-radius: 0;
	margin: 0;
}

.homeintro{
	width: 96%;
	border-radius: 0;
	margin: 0;
}

.contentHome
{

	width: 100%;
	margin: 0;

	

}

.indexBox{
	color: #fff !important;
}


#nav2
{
margin: 0;	
width: 100%;
border-radius: 0;
}

#nav2Nocton
{
margin: 0;	
width: 100%;
border-radius: 0;
}

.content{
	width: 100%;
	border-radius: 0;
}

#mobileMenu
{	
	/*width: 1260px;*/
	 
	display: block;
	width: 100%;
	text-align: left;
	
}

.xclose{
	display: block;
	visibility: visible;

}

#exit{

	position: relative; top: 0px; left: 0px;
	visibility:visible;
}

#subexit{

	visibility:visible;
}

#mobileMenu a
{
	display: block;font-family: 'Dosis', sans-serif; font-size: 200%; color: #fff;
}

#mobileMenu a:hover { color: #fff;}

#outerheader1{display: none;}

.menulist {

animation-name: example;
    animation-duration: 1s;
}

.menulist a{
display: block;
font-size: 120%;
width: 100%;
color:#fff;
text-align: left;
border-bottom: 1px solid #fff;
padding: 3% 0;
text-decoration: none;
font-weight: normal;
text-align: center;
}


#contactForm input[type="text"]{
   background: #fff;
   padding: 2%;
   font-size: 120%;
   border: 1px solid #ccc;
   width: 94%;
}

#contactForm select{
   background: #fff;
   padding: 2%;
   font-size: 120%;
   border: 1px solid #ccc;
   
}

#contactForm textarea{
   background: #fff;
   padding: 2%;
   font-size: 120%;
   border: 1px solid #ccc;
   width: 94%;
}


	
	
	
	
	

#keyInformation {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#Pupils {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#ParentsInformation {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#index {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#classpages {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#Community {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#Learning {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#contact {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#newsTab {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}
#aboutus {position: absolute; display: none; left: 0; top: 0; width: 90%; border: 0px solid  transparent; z-index: 99999;}

@keyframes example {
    from {left: -100%; top: 0%;}
    to {left: 0%; top: 0%;}
}

@keyframes example2 {
    from {left: 100%; top: 0%;}
    to {left: 0%; top: 0%;}
}
	
}