@charset "utf-8";
/* CSS Document */


body
{
	background: #f3f0df url(../images/whiteboxbg.jpg) repeat;
	/*font-family: Raleway;*/
	font-family: 'Roboto Slab', serif;
	/*color: #ffffff;*/
}

/*a
{
	color: #584602;
}

a:hover
{
	color: #342900;
	text-decoration: none;
}*/

h1
{
	font-size: 2.5em;
	color: #888888;
	text-transform: uppercase;
}

table
{
	font-size: 0.9em;
}

.nav li a
{
	font-weight: bold;
}

.nopadding
{
	margin: 0;
	padding: 0;
}

.flashbox
{
}

.whitebox
{
	background: #f3f0df url(../images/whiteboxbg.jpg) repeat;
	padding: 10px;
	position: fixed;
	width: 26%;
	text-align: left;
}

.whitebox h2
{
	font-size: 2em;
	text-align: center;
}

.whitebox h4
{
	font-size: 1em;
	text-align: center;
}

.box1
{
	background-color: #ffc31a;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box1:hover
{
	background-color: #80610d;	
	
}

.box2
{
	background-color: #ff7c10;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box2:hover
{
	background-color: #803e08;
}

.box3
{
	background-color: #ea4235;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box3:hover
{
	background-color: #80241d;
}

.box4
{
	background-color: #b3cb39;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box4:hover
{
	background-color: #708024;
}

.box5
{
	background-color: #0092ff;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box5:hover
{
	background-color: #004880;
}

.box6
{
	background-color: #7e4397;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box6:hover
{
	background-color: #40224d;
}

.box7
{
	background-color: #f56954;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box7:hover
{
	background-color: #80372b;
}

.box8
{
	background-color: #0cc4af;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box8:hover
{
	background-color: #06665b;
}

.box9
{
	background-color: #ec3b83;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box9:hover
{
	background-color: #802046;
}

.box10
{
	background-color: #e0d803;
	padding: 10px;
	color: #ffffff;
	-o-transition:.8s;
  	-ms-transition:.8s;
  	-moz-transition:.8s;
  	-webkit-transition:.8s;
  	transition:.8s;
}
.box10:hover
{
	background-color: #802046;
}

.imagebox
{
	border: 1px solid #f1f1f1;
	padding: 5px;
	cursor: pointer;
}

blockquote
{
	font-size: 1em;
	font-style: italic;
}

.content
{
	/*background: url('../images/contentbg.png') repeat;*/
	background: #fdfdfd;
	padding: 15px;
	margin: 15px;
}

.content h1
{
	font-weight: bold;
	color: #ffffff;
}

.academicsbox
{
	background-color: #ffc31a;
}
.academicsbox h4
{
	color: #ffc31a;
	font-size: 1.5em;
}

.interschoolactivities
{
	background-color: #b3cb39;
}
.interschoolactivities h4
{
	color: #b3cb39;
}

.achievers
{
	background-color: #f56954;
}
.achievers h4
{
	color: #c61a00;
}

.interhouseactivities
{
	background-color: #ff7c10;
}
.interhouseactivities h4
{
	color: #a44a00;
}

.celebrations
{
	background-color: #0092ff;
}
.celebrations h4
{
	color: #005391;
}

.newinitiatives
{
	background-color: #0cc4af;
}
.newinitiatives h2
{
	font-size: 2.5em;
	font-weight: bold;
	color: #005d52;
	text-align: center;
}
.newinitiatives h4
{
	color: #005d52;
}

.megaeventsnresources
{
	background-color: #ea4235;
}
.megaeventsnresources h4
{
	color: #9f0e03;
}

.communitynservices
{
	background-color: #7e4397;
}
.communitynservices h4
{
	color: #7e4397;
}

.exchangeprogrammes
{
	background-color: #ec3b83;
}
.exchangeprogrammes h4
{
	color: #ec3b83;
}

.messagefromcounselor
{
	background-color: #e0d803;
}
.messagefromcounselor h4
{
	color: #e0d803;
}

#toTop{
	background: url(../images/totop.png) center center no-repeat;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 30px;
	right: 10px;
	cursor: pointer;
	display: none;
}
#toTop .fa {margin-right: 5px;}



@media only screen and (max-width: 1100px)
{
	h4
	{
		font-size: 0.8em;
	}
	
	.nav li a
	{
		font-size: 0.8em;
	}
}

@media only screen and (max-width: 850px)
{
	
	h1
	{
		font-size: 1em;
	}
	
	.whitebox
	{
		position: relative;
		background: #f3f0df url(../images/whiteboxbg.jpg) repeat;
		padding: 10px;
		width: 100%;
	}
}