html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, strong, samp,
small, var, i, ul, li, tr, th, table, td,thead, tbody,
fieldset, form, label, legend,
caption, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

span.errors {
	color : white;
	font-weight : bold ;
	margin-top : 4px;
	display: block;
}


section, header, footer, figure, figcaption, canvas, nav {
	display : block ;
}

body {
	background-color : #539b3f ;
	color : #fff ;
}

.inner {
	max-width : 1000px ;
	margin : auto ;
	width : 95% ;
	overflow : hidden ;
}

/* ===================
Defaults
================== */
a {text-decoration : none ; color : #fff ;}
ul, li {list-style : none ;}
h1,h2,h3, p, li, a, tr,th {font-family: Helvetica, Times, sans-serif; font-weight : lighter ;}
p {line-height : 28px ;}
h1 {font-size : 1.7em ;}
h2 {font-size : 1.3em ;}

.button {
	width : 200px ;
	display : block ;
	padding : 7px 5px ;
	text-align : center ;
	background: rgb(240,249,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */
	color : #000 ;
	border : 1px solid #fff;
	margin-right : 20px ;
	margin-top : 10px ;
	border-radius : 5px ;
	cursor : pointer ;
}

@-webkit-keyframes cloud {from {left : 5% ;}to {left : 80% ; }}
@-webkit-keyframes cloud_one {from {right : 5% ;}to {right : 80% ; }}
@-moz-keyframes cloud {from {left: 5% ;} to {left : 80% ;}}
@-moz-keyframes cloud_one {from {right: 5% ;} to {right : 80% ;}}
@keyframes cloud {from {left : 5% ;} to {left : 80% ;}}
@keyframes cloud_one {from {right : 5% ;} to {right : 80% ;}}
@-o-keyframes cloud {from {left : 5% ;} to {left : 80% ;}}
@-o-keyframes cloud_one {from {right : 5% ;} to {right : 80% ;}}
.cloud1 {
	position : absolute ;
	width : 110px ;
	height : 100px ;
	top : 150px ;
	background : url(../images/cloud.png) no-repeat ;
	-webkit-animation : cloud ;
	-webkit-animation-duration: 100s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function : linear ;
	-webkit-animation-direction: alternate;
	-moz-animation : cloud ;
	-moz-animation-duration : 100s ;
	-moz-animation-iteration-count : infinte ;
	-moz-animation-timing-function : linear ;
	-moz-animation-direction: alternate;
	-o-animation : cloud ;
	-o-animation-duration : 100s ;
	-o-animation-iteration-count : infinte ;
	-o-animation-timing-function : linear ;
	-o-animation-direction: alternate;	
	-ms-animation : cloud ;
	-ms-animation-duration : 100s ;
	-ms-animation-iteration-count : infinte ;
	-ms-animation-timing-function : linear ;
	-ms-animation-direction: alternate;	
	animation : cloud ;
	animation-duration: 100s;
	animation-iteration-count: infinite;
	animation-timing-function : linear ;
	animation-direction: alternate;	
}

.cloud2 {
	position : absolute ;
	width : 110px ;
	top : 100px ;
	height : 100px ;
	background : url(../images/cloud.png) no-repeat ;
	-webkit-animation : cloud_one ;
	-webkit-animation-duration: 100s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function : linear ;
	-webkit-animation-direction: alternate;
	-moz-animation : cloud_one ;
	-moz-animation-duration : 100s ;
	-moz-animation-iteration-count : infinte ;
	-moz-animation-timing-function : linear ;
	-moz-animation-direction: alternate;
	-o-animation : cloud_one ;
	-o-animation-duration : 100s ;
	-o-animation-iteration-count : infinte ;
	-o-animation-timing-function : linear ;
	-o-animation-direction: alternate;
	-ms-animation : cloud_one ;
	-ms-animation-duration : 100s ;
	-ms-animation-iteration-count : infinte ;
	-ms-animation-timing-function : linear ;
	-ms-animation-direction: alternate;		
	animation : cloud_one ;
	animation-duration : 100s ;
	animation-iteration-count : infinte ;
	animation-timing-function : linear ;
	animation-direction: alternate;	
}

/*==== open day ===== */

.openday {
	position: absolute;
	top: 100px;
	left: 20%;
	text-align: center;
}

.openday:hover h2{
	margin-bottom: 20px;
}

.openday h1 {
	font-size: 3em;
}

.openday h2 {
	font-size: 2em;
	-webkit-transition: all 1s;
}

/* ===================
HTML STYLING
================== */

.left {float : left ;}
.right {float: right ;}
.clear {clear : both ;}

/* ===================
HEADER
================== */
#page_header {
	position: relative;
	padding-top : 10px ;
}

#page_header h1 {
	float : left ;
	text-align : center ;
	font-size : 1.2em ;
	width : 160px ;
}

#page_header nav {
	float : right ;
}

#page_header li {
	float : left ;
	padding-left : 50px ;
}
#page_header li:first-child {
	padding-left : 0px ;
}

.hills {
	background : url(../images/scene.png) no-repeat center bottom;
	height : 600px ;
}

.main_container {
	margin-top : -180px ;

}
/* ===== Tags ===== */

#tags a {
	position: fixed;
	left: -20px;
	background: #245a83;
	display: block;
	padding: 10px 20px;
	height: 50px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	-webkit-transition: all 1s; 
	overflow: hidden;
}

.welcome_pack {
	top: 100px;
	margin-left: -55px;
}
.year_plan {
	top: 250px;
	margin-left: -36px;
}

#tags a:hover {
	box-shadow: 0 0 10px #ffffff;
	left: 0;
}
#tags a.facebook {
	top: 360px;
	padding:5px 0;
}

#tags a.facebook:hover:after {
	display: block;
}
#tags a.facebook:after {
	content: 'Like Us';
	display: block;
	position: absolute;
	width: 100px;
	right:-25px;
	top: -65px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);	
	display: none;
}
.facebook span{
	background: url(../images/facebook.png) no-repeat;
	width: 50px;
	height: 50px;
	display: block;
	padding:0;
}


/* ===================
Content
================== */

.slider {
	border : 7px solid #fff;
	height : 294px ;
	width : 482px ;
	overflow: hidden ;
	margin-right : 4% ;
}

.slider ul {width : 10000px ;}
.slider li {
	float : left ;
}

#welcome {
	margin-top : 10px ;
}

.short {
	width : 600px ;
}

.shadow {
	float : left ;
	padding-top : 30px;
	width: 500px ;
	height : 50px;
	margin-right :40px;
	background : url(/images/shadow.png) no-repeat  bottom;
}

.title {
	text-align : center ;
	font-size : 2.5em ;
	padding-top : 50px ;
	padding-bottom : 50px ;
}

/* == Columns == */

.three > li {
	float : left ;
	width : 28% ;
	margin-right : 7.5% ;
	padding-top : 20px ;
	
}

.three li:nth-of-type(3n+3) {
	margin-right : 0% ;
}

.three img {
	width : 98% ;
	border : 7px solid #fff ;
}


.gallery {
	margin-top : 80px ;
	float : left ;
	padding : 20px ;
}

#meet_the_team li {
	position :relative;
	clear : left ;
	margin-top : 20px ;
}

#meet_the_team li div {
	float : left ;
	margin-right : 20px ;
	background-color : #fff ;
	height : 163px ;
	border : 5px solid #fff ;
}

.profile_info {
	position : absolute ;
	z-index : 1000;
	width : 60%  ;
	padding : 10px ;
	background-color : #fff ;
	left : 205px;
	top : 0;
	box-shadow : 2px 2px 10px #d4d4d4 ;
	color : #000 ;
}
.profile_info p {
	padding-top : 10px ;
}

.close {
	float : right ;
	font-size : 1.5em ;
	margin-top : -5px ;
	font-weight : bold ;
	cursor: pointer ;
}

.read_more {
	float: left;
	margin-top: 60px;
	width: 80px;
}
/* == Testimonials == */

#testimonials {
	position: relative ;
	z-index : 0;
	float : right ;
	width : 340px ;
	height : 380px ;
	overflow : hidden ;
	background : url(/images/sign.png) no-repeat ;
}
#testimonials ul {
	position : relative ;
	top : 40px ;
	left : 40px ;
}

#testimonials li {
	position : absolute ;
	width : 280px ;
	min-height : 170px ;
	z-index : 0;
	display : block ;
	margin-right : 20px ;
	background-color: #d6a985;
}

#testimonials li.current {
	z-index : 2;
}

#testimonials li.previous {
	z-index : 1;
}

.contact {
	margin-top : 25px ;
	margin-bottom : 50px ;
	margin-right : 5% ;
}

.contact p {
	line-height : 40px ;
}
.contact_form li {
	width : 400px ;
	margin-top : 30px ;
	font-size : 1.3em ;
}

.contact_form label {
	width : 150px ;
	float : left ;
	line-height : 25px ; 
	padding-bottom : 5px ;
	padding-right : 2% ;
}

.contact_form li input {
	width : 225px ;
	height : 25px ;
	font-size : .7em ;
}

.contact_form textarea {
	resize : none ;
	min-height : 200px ;
	font-size : .7em ;
	width : 225px ;
}
.contact_form button {
	float : right ;
}

/* 
=======================
Online Application
=======================
*/
.online_application {
	margin-top : 50px ;
	font-family: Helvetica, Times, sans-serif; font-weight : lighter ;
}

.form-columns {
	display: flex;
	gap: 40px;
	width: 100%;
}

.form-column {
	flex: 1 1 0;
	min-width: 250px;
	display: flex;
	flex-direction: column;
}

.form-group {
	margin-bottom: 30px;
	width: 100%;
}

.form-group label {
	display: block;
	margin-bottom: 4px;
}

.required:after {
	content: " *";
	color: red;
	font-weight: bold;
}

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=date],
.form-group textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px; /* Added padding for form fields */
	resize: vertical;
}

.radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.radio-group .radio-option {
	display: flex;
	align-items: start;
	gap: 0;
}

.radio-option input[type="radio"] {
	margin-right: 10px;
}

.radio-option label {
	margin-top : 3px
}

.radio-description {
	display: block;
	margin-top: 6px;
	font-size: 0.95em;
	color: #eee;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.checkbox-group div {
    display: flex;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
}

.online_application h2 {
	font-size : 1.5em ;
	padding : 20px 0 20px 0;
}

@media (max-width: 700px) {
    .form-columns {
        flex-direction: column;
        gap: 0;
    }
    .form-column {
        min-width: 0;
    }
}

/* ===================
Footer 
================== */

#grass {
	margin-top : -170px ;
	position: relative ;
	z-index : 1 ;
	background : url(/images/grass.png) repeat-x center top;
	height : 200px ;
}

#page_footer {
	background-color : #8b5e3b ;
	padding-bottom : 20px ;
}

#footer_links li {
	padding-top : 10px ;
}

/*====== Sessions ====== */

#sessions {
	width: 100%;
	background: #ffffff;
	color: #000000;	
	margin: 20px 0;
}

#sessions tbody th { 
	padding-bottom: 10px;
}

#sessions thead {
	background: #eeeeee;
}

#sessions td {
	line-height: 50px;
	text-align: center;
}

.ofsted {
	text-align:center;
	color: #c9a181;
	text-shadow: 0 1px 2px #000;
}

p {
	margin-bottom : 20px;
}

p.next-para {
	clear : both;
}