@CHARSET "ISO-8859-1";

.yellow {
	color: yellow;
}

.blue {
	color: blue;
}

 /************Page layout*************/
 
html, body {
    height: 100%;
    min-height: 100%;
    }
 
body {
	background: rgb(51,153,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzOTlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjczJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(51,153,255,1) 0%, rgba(255,255,255,1) 73%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,153,255,1)), color-stop(73%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(51,153,255,1) 0%,rgba(255,255,255,1) 73%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(51,153,255,1) 0%,rgba(255,255,255,1) 73%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(51,153,255,1) 0%,rgba(255,255,255,1) 73%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(51,153,255,1) 0%,rgba(255,255,255,1) 73%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3399ff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
background-repeat: no-repeat;
}


.header{
	height:45px;
	-webkit-margin-before: 0em;
		}

 .main-border {
 	margin-top: 15px;
  	border: 6px solid orange;
  	background-color: white;
  	border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 	
 }
 
 .main-section{ /* everything under header */
background: #E8E8CE;
 }
 
  		
		.menu{
		height:45px;}

 .middle{ /*centre content */
 margin-top:22px;
  background:#ffffff; 
  margin-bottom:15px;
  }
  
  .middlegallery{
   margin-top:22px;
   margin-bottom:15px;
  }

.rightcolumn {
	margin-top:22px;	
}

#detail-section {
	margin-left: auto;
	margin-right: auto;
}

.textwrap {
		float: left;
}

 .main-border { 	
 		border: 6px solid #F4900C;  	
  	border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
margin-bottom:10px;
 }
 
 For small screen you can use this because it will only apply to screens smaller than 300px
@media screen and (max-width: 300px) {
		.main-border{
		border: 2px solid #F4900C;  	
  	border-radius: 2px; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 
margin-bottom:2px;
}}
 
 .side-navstyle1{
	       background:#E8E8CE;
	       display:inline-block;	
	}
	
li.sub-active a.button{
	  background-color: #333333; 
	  color:#ffffff;
	  }
	  
 
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
	.nav-div-area {
		min-height: 380px;
	}
	.main-div-area {
		min-height: 380px;
	}
}



/*******************Footer*************/

	footer{
background-image: url(../../images/ahsfooter.png);		
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 2px;
	margin-top:2px;
	height: 140px;
	background-position: center; 
	 background-repeat: no-repeat;
}


For small screen you can use this because it will only apply to screens smaller than 300px
@media screen and (max-width: 300px) { 
	footer {
	font-size: 16px;
	background-color:#ffff80;
	font-family: sans-serif;
	color:white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height:80px;
	}
}

/**Accordian**/

.accordian {
	margin-bottom:20px;
	}
	
	.accordian-navigation li {
	margin-bottom:20px;
	}

.no-left-padding {
	padding-left: 0;
}
 
/*************Font and Link styles*************/
h1 {	
	color: black;
	background-color: #FFCC33;
	font-size: 30px;
	font-family: sans-serif;	
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;	
	text-align: center;
	line-height:45px;
	-webkit-margin-after: 0em;
	-webkit-margin-before: 0em;
}


ul, menu, dir{
	-webkit-margin-before: 0em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 40px;
-webkit-padding-start: 40px;
margin-left: auto;
margin-right: auto;
	}

h2 {	
	color: #800040;
	font-size: 22px;
	font-family: "bpreplaybold","Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;	
		font-weight: bold;
	-webkit-margin-after: 0em;
	margin-top:0px !important;	
	margin-bottom:5px;
}

h3 {	
	color: #000000;
	font-size: 18px;
	font-family: "bpreplaybold","Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;	
	margin-top:8px;
	font-weight: bold;
	-webkit-margin-after: 0em;
}




h4 {
	color: #000000;
	font-size: 15px;
	font-family: sans-serif;
	margin-top:8px;
	margin-bottom:0;
	-webkit-margin-after: 0em;
	font-weight: bold;
}


h5 {
	color: #000000;
	font-size: 12px;
	font-family: sans-serif;  
	margin-top:8;
	margin-bottom:0;
	-webkit-margin-after: 0.2em;
	font-weight: bold;
}

h7 {	
	color: #ff0000;
	background-color: #ffff80;
	font-size: 18px;
	font-family: sans-serif;
	font-weight: bold;
	margin-top:15;	
	margin-left: auto;
	margin-right: auto;	
	text-align: center;
	-webkit-margin-after: 0em;
}


p {
	color: black;
	font-size: 15px;
	font-weight: bold;	
	font-family: sans-serif;
	margin-top:0px;	
	
}

figcaption {
	color: #004080;
	font-size: 12px;
	line-height:16px;
	font-family: sans-serif;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 0px;	
}

li {
	color: black;
	font-size: 15px;
	font-family: sans-serif;
	font-weight: bold;	
}

p .a {
	color: #036978;
	font-size: 16px;
	font-family: sans-serif;
	float: left;
	font-weight: bold;	
}

img{	
	margin-bottom:8px;
}


gd {	
	color: #000000;
	font-size: 26px;
	font-family: "bpreplaybold","Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;	
		font-weight: bold;
	margin-top:12px;	
	margin-bottom:12px;
}

top35 {	
	color: #000000;
	font-size: 35px;
	font-family: "bpreplaybold","Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;	
	line-height:30px;
	font-weight: bold;
	-webkit-margin-after: 0em;
}



/**********button******/
.button {
		float:right;	
	font-family: "bpreplaybold","Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;	
}



/**********Galleria**************/

.galleria-theme-twelve .galleria-info {
	line-height: 14px;
}

.galleria-theme-twelve .galleria-counter{
	height: 29px;
}


/**********pop up boxes - This is styled in AHS year 5**************/





/*******Home page boxes Heather could you add info here?***************/

.homebox1 {
	background-color: #171728;
	border-radius: 2px; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 
  height:500px;
  margin-top: 0px;
  margin: 0px;
     }
     

.homebox1 h3{
	color: #000000;
	margin-top: 30px;
	margin-left:0px;	
	padding-left:30px;
	font-size: 40px;
	font-weight: bold; 
	}
	
	.homebox1 h4{
	color: #000000;
	margin-top: 20px;
	margin-left:0px;	
	padding-left:30px;
	font-size: 30px;
	font-weight: bold; 
	}
	.homebox1 h2{
	color: #000000;
	margin-top: 5px;
	margin-left:0px;
	padding-left:30px;	
	font-size: 80px;
	font-weight: bold; 
	}

.homebox1 .teacherbutton{
	position: relative;
	top: 50px;
	left: 20px;
	margin-left:10px;	
}

.homebox1 img {
	margin-bottom:0px;
}

.homebox1.button{
		margin-top:5px;
}

.homebox1 a{
	font-size: 18px;
	color: black;
}


/************page boxes**************/

.pageboxes {
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

  box-shadow: 2px 2px 2px #888888;
  float:left;
  text-align:center;
  height: auto;
  padding-left:2px;
  padding-right:2px;
 }

.pageboxes h3{
	color:#ffffff;
	margin-top:5px;
	
}

.pageboxes h2{
	color:#ffffff;

	}

.pageboxes h4{
	color:#ffffff;
	 text-align:center;

	}

.pageboxes p{
	 text-align:center;
	 margin-bottom:5px;
	 color: #fff;
}

.pageboxes img{
	margin-top:2px;
	margin-left:0px;
	height:100px;
	margin-bottom:1px;
	 text-align:center;
	
}

.pageboxes .button-home{
	padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
}

	/************Activity box***********/
	
.activityboxes {
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
width:100%;
  box-shadow: 2px 2px 2px #888888;
  float:left;
margin-top:22px !important;
  text-align:center; 
  padding-left:2px;
  padding-right:2px;
 }
 
 .activityboxes img{
 height:160px;
 }
 
 	/************Activity replace***********/
	
.activity {
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
 width:100%;
border: 1px solid #ffffff;
  text-align:center;
   font-weight: bold;
   font-size: 12px;
	font-family: sans-serif;
    color: #804040;
  line-height: 16px;
  padding-left:5px;
  padding-right:5px;
  float:left;
  margin:10px; 
 }
 
 .activity img {
 align: center;

 }


/************go to Activity: At the end of each topic***********/
	
.gotoactivity {
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  float:left;
  text-align:left;
  font: 15px;
  font-weight: bold; 
  line-height: 133%;
 color: #800000;
 padding-top:8px;
 padding-bottom:0px;
 padding-left:2px;
margin-bottom:20px;
  }
 
 .gotoactivity img{
 margin-left:2px;
 width:50px;
 
 } 
 

 
/************Right column click here INTERACTIVE ***********/
	
.clickhere {
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  float:left;
margin-top:2px;
margin-bottom:12px;
background-color: #ff8000;
  text-align:center;
  font: 22px;
  font-weight: bold; 
 color: #ffffff;
  padding-left:10px;
  padding-top:13px;
  padding-right:10px;
  padding-bottom:13px;
 }
 
  .clickhere img{
 margin-bottom:0px;
 }
  .clickhere a{
 color: #ffffff;
 }
 
 /**********click here INTERACTIVE right column HOVER tints**************/

.clickhere.light-purple:hover{
	background-color: rgba(153,51,153,0.7);
}

.clickhere.yellow:hover{
	background-color: rgba(255,204,51,0.7);
}

.clickhere.plum:hover{
	background-color: rgba(204,102,153,0.7);
}

.clickhere.plumb:hover{
	background-color: rgba(204,102,153,0.7);
}

.clickhere.dark-green:hover {
	background-color: rgba(0,153,51,0.7);
}

.clickhere.red:hover {
	background-color: rgba(204,0,51,0.7);
}
	
.clickhere.pink:hover{
	background-color:rgba(255,51,102,0.7);
	}
	
.clickhere.light-green:hover{
	background-color:rgba(153,204,0,0.7);
	}
	
.clickhere.blue:hover {
	background-color: rgba(51,153,255,0.7);
	}
	
.clickhere.gold:hover {
	background-color: rgba(204,153,0,0.7);
	}
	
.clickhere.dark-purple:hover {
background-color: rgba(102,51,153,0.7);
	}

.clickhere.purplea:hover {
	background-color: rgba(167,167,219,0.7);
}

.clickhere.purple:hover {
	background-color: rgba(153,51,153,0.7);
}

.clickhere.lyellow:hover {
	background-color: rgba(255,255,128,0.7);
}

.clickhere.greenlight:hover {
	background-color: rgba(204,155,102,0.7);
}


.clickhere.olive:hover {
	background-color: rgba(153,153,102,0.7);
}

.clickhere.olive2:hover {
	background-color: rgba(153,153,102,0.7);
}


.clickhere.orange:hover {
	background-color: rgba(255,102,51,0.7);
	}

.clickhere.orangeb:hover {
	background-color: rgba(204,51,0,0.7);	
}

.clickhere.orangec:hover {
	background-color: rgba(249,180,88,0.7);
	}
	
.clickhere.grey:hover {
	background-color: rgba(255,204,51,0.7);
	}


  .clickhere.teal:hover {
 background-color: rgba(0,169,157,0.7);
 }
 
 
 
 
/************Larger column wide click here INTERACTIVE***********/
	
.clickherew {
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  float:left;
margin-bottom:12px;
background-color: #ff8000;
  text-align:center;
  vertical-align:middle;
  vertical-align:text-middle;
  font: 22px;
  font-weight: bold; 
 color: #ffffff;
  padding-left:7px;
  padding-top:7px;
  padding-right:7px;
 }
  .clickherew a{
 color: #ffffff;
 }
 
/**********click here INTERACTIVE wide column HOVER tints**************/

.clickherew.light-purple:hover{
	background-color: rgba(153,51,153,0.7);
}

.clickherew.yellow:hover{
	background-color: rgba(255,204,51,0.7);
}

.clickherew.plum:hover{
	background-color: rgba(204,102,153,0.7);
}

.clickherew.plumb:hover{
	background-color: rgba(204,102,153,0.7);
}

.clickherew.dark-green:hover {
	background-color: rgba(0,153,51,0.7);
}

.clickherew.red:hover {
	background-color: rgba(204,0,51,0.7);
}
	
.clickherew.pink:hover{
	background-color:rgba(255,51,102,0.7);
	}
	
.clickherew.light-green:hover{
	background-color:rgba(153,204,0,0.7);
	}
	
.clickherew.blue:hover {
	background-color: rgba(51,153,255,0.7);
	}
	
.clickherew.gold:hover {
	background-color: rgba(204,153,0,0.7);
	}
	
.clickherew.dark-purple:hover {
background-color: rgba(102,51,153,0.7);
	}

.clickherew.purplea:hover {
	background-color: rgba(167,167,219,0.7);
}

.clickherew.purple:hover {
	background-color: rgba(153,51,153,0.7);
}

.clickherew.lyellow:hover {
	background-color: rgba(255,255,128,0.7);
}

.clickherew.greenlight:hover {
	background-color: rgba(204,155,102,0.7);
}


.clickherew.olive:hover {
	background-color: rgba(153,153,102,0.7);
}

.clickherew.olive2:hover {
	background-color: rgba(153,153,102,0.7);
}


.clickherew.orange:hover {
	background-color: rgba(255,102,51,0.7);
	}

.clickherew.orangeb:hover {
	background-color: rgba(204,51,0,0.7);	
}

.clickherew.orangec:hover {
	background-color: rgba(249,180,88,0.7);
	}
	
.clickherew.grey:hover {
	background-color: rgba(255,204,51,0.7);
	}


  .clickherew.teal:hover {
 background-color: rgba(0,169,157,0.7);
 }
 
 

/************click here INTERACTIVE right margin 12px ***********/
	
.clickherer {
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  float:left;
margin-bottom:12px;
margin-right:12px;
background-color: #ff8000;
  text-align:center;
  font: 22px;
  font-weight: bold; 
 color: #ffffff;
  padding-left:7px;
  padding-top:7px;
  padding-right:7px;
 }
  .clickherer a{
 color: #ffffff;
 }
 
 

/**********click here INTERACTIVE right margin 12px HOVER tints**************/

.clickherer.light-purple:hover{
	background-color: rgba(153,51,153,0.7);
}

.clickherer.yellow:hover{
	background-color: rgba(255,204,51,0.7);
}

.clickherer.plum:hover{
	background-color: rgba(204,102,153,0.7);
}

.clickherer.plumb:hover{
	background-color: rgba(204,102,153,0.7);
}

.clickherer.dark-green:hover {
	background-color: rgba(0,153,51,0.7);
}

.clickherer.red:hover {
	background-color: rgba(204,0,51,0.7);
}
	
.clickherer.pink:hover{
	background-color:rgba(255,51,102,0.7);
	}
	
.clickherer.light-green:hover{
	background-color:rgba(153,204,0,0.7);
	}
	
.clickherer.blue:hover {
	background-color: rgba(51,153,255,0.7);
	}
	
.clickherer.gold:hover {
	background-color: rgba(204,153,0,0.7);
	}
	
.clickherer.dark-purple:hover {
background-color: rgba(102,51,153,0.7);
	}

.clickherer.purplea:hover {
	background-color: rgba(167,167,219,0.7);
}

.clickherer.purple:hover {
	background-color: rgba(153,51,153,0.7);
}

.clickherer.lyellow:hover {
	background-color: rgba(255,255,128,0.7);
}

.clickherer.greenlight:hover {
	background-color: rgba(204,155,102,0.7);
}


.clickherer.olive:hover {
	background-color: rgba(153,153,102,0.7);
}

.clickherer.olive2:hover {
	background-color: rgba(153,153,102,0.7);
}


.clickherer.orange:hover {
	background-color: rgba(255,102,51,0.7);
	}

.clickherer.orangeb:hover {
	background-color: rgba(204,51,0,0.7);	
}

.clickherer.orangec:hover {
	background-color: rgba(249,180,88,0.7);
	}
	
.clickherer.grey:hover {
	background-color: rgba(255,204,51,0.7);
	}


  .clickherer.teal:hover {
 background-color: rgba(0,169,157,0.7);
 }
 
 
/************See more pics box. Pop Up Picture Gallery***********/
	
.seemorepics {
width:100%;
 }
 
 .seemorepics:hover {
opacity: 0.8
 }
 

 

 
	/***********Tables***********************/
	
table table, th, td{	
border:1px solid black; 
padding:0px;
border-spacing: 0px;
}

table {
	border:1px solid black; 
    border-collapse: collapse;
    padding:0px;
    border-spacing: 0px;
}

table th {
    background-color: #3399FF;
    border:1px solid black;
    color: white;
    padding:0px;
    border-spacing: 0px;
}

table tr:nth-child(odd){ 
background: #b8d1f3;
}


table tr:nth-child(even){
background: #dae5f4;
}


table, th, td .timeline {
   border: 1px solid  #f3f3f3;
} 



/***********Button styles**************/
.button {
	border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
background-color: #3399FF;
border: 1px solid white;
color: #ffffff;
font-size: 14px;
font-weight: bold;
	font-family: "bpreplaybold","Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;		
}

li .button {
	border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
background-color: #e8e8ce;
border: 1px solid white;
color: #6b6b47;
font-size: 14px;
font-weight: bold;
	font-family: "bpreplaybold","Helvetica Neue",Helvetica,Helvetica,Arial,sans-serif;		
}	


/**********background colours**************/

.light-purple{
	background-color: #993399;
}

.white{
	background-color: white;
}

.yellow{
	background-color: #FFCC33;
}

.plum{
	background-color: #CC6699;
}

.plumb{
	background-color: #9e005d;
}

.dark-green {
	background-color: #009933;
}

.red {
	background-color: #CC0033;
}
	
.pink{
	background-color:#FF3366;
	}
	
	.light-green{
	background-color:#99CC00;
	}
	
	.blue {
	background-color: #3399FF;
	}
	
	.gold {
	background-color: #cc9900;
	}
	
	.dark-purple {
background-color: #663399;
	}

.purplea {
	background-color: #a7a7db;
}

.lyellow {
	background-color: #ffff80;
}

.greenlight {
	background-color: #CCFF66;
}


.olive {
	background-color: #999966;
}

.olive2 {
	background-color: #dedeb8;
}

.orange {
	background-color: #ff6633;
	}

.orangeb {
	background-color: #CC3300; 	
}

.orangec {
	background-color: #f9b458;
	}
	
	.grey {
	background-color: #c0c0c0;
	}



.liteolive {
	background-color: #dedeb8;
	border: 2px solid white;  
	color: #6b6b47;
}

.liteolive a{
	color:pink;
}


.teal {
	background-color: #00a99d;
}

.teal-light {
	background-color: #7fd3cb;
}




.teacher {
	border: 1px solid white;
	margin-top: 10px;
	color: #ffffff;
}


/**********font colours**************/
	
a.light-blue-font{
	color: #FFCC33;	
}

a.light-purple-font{
	color: #9966CC;	
}

a.yellow-font{
	color: #FFCC33;
}

a.plum-font{
	color: #CC6699;	
}

a.dark-green-font {
	color: #009966;	
}

a.red-font {
	color: #CC0033;	
}
	
	a.pink-font{
	color:#FF3399;	
	}
	
	a.light-green-font{
	color:#99CC00;
	}

	
	a.blue-font {
	color: #3399FF;	
	}
	
	a.dark-purple-font {
color: #663399;
	}
	
	a.white-font{
	color:#ffffff;	
	}	

/********foundation css overwrites**********/
button, .button {
	margin: 0 0 0.5rem;
	margin-top:10px;
	background-color: #038a9d;
}

button:hover, button:focus, .button:hover, .button:focus {
    background-color: #333333;
    }
    
    button.disabled, button[disabled], .button.disabled, .button[disabled] {
    background-color: #038a9d;
    }
    
.top-bar {
	text-align: center;
	margin-right: auto;
	margin-left:auto;
}

top-bar-section{
	margin-right: auto;
	margin-left:auto;
	text-align: center;
}

.top-bar-section ul li > a.button {
	background-color: #038a9d;
	font-weight:bold;
	margin-right: auto;
	margin-left:auto;
	}
	
	.top-bar-section ul li > button {
	background-color: #038a9d;
	font-weight:bold;
	}
	
	.top-bar-section ul li.active > a {
	background: #038a9d;
	font-weight:bold;
	}
	
	.top-bar-section li.active:not(.has-form) a:not(.button)  {
	font-weight:bold;  
	}
	
	
	.top-bar-section ul li > a {
	font-weight:bold; 
	}
	
	
/********hover colour for top nav added 23rd MARCH **********/
	
	.top-bar ul li.active > a:hover { 
  color: #ffffff !important; 
  background:#038a9d !important; 
  }
  
  .top-bar li a:not(.button):hover {
   color: white; 
   background:#038a9d !important; 
   }
   
   .top-bar li a:not(.button):active {
   color: white; 
   background:#038a9d !important; 
   }
   
   .top-bar-section li.active:not(.has-form) a:not(.button) {
      
      color: white;
      background: #038a9d !Important; }
	
	
	
	
@media only screen and (min-width: 40.063em) {
  .top-bar {
  display:inline-block;
  }
}

.reveal-modal, dialog {
  top: 1.25rem;
  width: 80%;
  max-width: 62.5rem;
}

.reveal-modal {
	  padding: 1.175rem;
}

.reveal-modal, dialog  {
width: 60%;	
}


section.top-bar-section {
 display: inline-block; 
 }
 
.popupgallery{
	width: 95%;	
}


/************coloured box (not interactive)***********/
	
.colouredbox {
	
  float:left;
margin-bottom:8px;
  text-align:centre;
  font-family: sans-serif;
  font-size: 15px;
   line-height: 136%;
  font-weight: bold; 
 color: #000000;
  padding:10px;
 }
 
  .colouredbox p{
   font-family: sans-serif;
  font-size: 15px;
  font-weight: bold; 
 color: #000000;
 margin-bottom: 0;
 }
 
 .colouredbox img{
 margin-bottom:0px;
 }
 
 	/************coloured box right margin 12px (not interactive)***********/
	
.colouredboxr {
float:left;
margin-bottom:8px;
margin-right:12px;
  text-align:centre;
  font-family: sans-serif;
  font-size: 15px;
   line-height: 136%;
  font-weight: bold; 
 color: #000000;
  padding:10px;
 }
 
  .colouredboxr p{
   font-family: sans-serif;
  font-size: 15px;
  font-weight: bold; 
 color: #000000;
 margin-bottom: 0;
 }
 
 	/************coloured point box  (not interactive)***********/
	
.colouredpointbox {
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  float:left;
margin-bottom:8px;
  text-align:centre;
  font-family: sans-serif;
  font-size: 15px;
   line-height: 136%;
  font-weight: bold; 
 color: #000000;
  padding:10px;
 }
 
  .colouredpointbox p{
   font-family: sans-serif;
  font-size: 15px;
  font-weight: bold; 
 color: #000000;
 margin-left:40px;
 margin-bottom: 0;
 }
 
 .colouredpointbox img{
 margin-bottom:0px;
 padding-right:10px;
 }
 
/************border box: Burgunday Border with drop shadow/White Fill***********/
	
.borderbox {
	 border: 5px solid #800000;
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
 margin-bottom:8px;
  padding:10px; 
  display:inline-block;
 }
 
  .borderbox p{
   font-family: sans-serif;
  font-size: 16px;
  font-weight: bold; 
 color: #000000;
 margin-bottom: 0;
 }
 
 .borderbox img{
 margin-bottom:0px;
 
 }
 
 .borderbox li {
	color: black;
	 font-weight: bold; 
	font-size: 16px;
	font-family: sans-serif;
	margin-left:30px;
}
 
   .borderboxlarge{
  margin:15px;
   border: 5px solid #800000;
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  padding:10px;
  display:inline-block;
  }
  
  .borderboxhp {
	 border: 3px solid #ff8000;
		border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
  box-shadow: 1px 1px 1px #888888;
  margin-top:6px;
 margin-bottom:2px;
  padding:10px; 
  display:inline-block;
 }
 
   .borderboxr {
	 border: 5px solid #800000;
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
 margin-bottom:8px;
  margin-right:12px;
  padding:10px; 
 }
 
 

/************moreinfob ADD more info here***********/
	
.moreinfob {
	 border: 5px solid #800000;
		border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  background-color: #FFCC33;
  float:left;
margin-bottom:8px;
margin-right:40px;
  text-align:centre;
  font-family: sans-serif;
  font-size: 18px;
   line-height: 136%;
  font-weight: bold; 
    padding-left:10px;
  padding-top:13px;
  padding-right:10px;
  padding-bottom:13px; 
   display:inline-block;
   width:95%;

 }
 
  .moreinfob p{
   font-family: sans-serif;
  font-size: 18px;
  font-weight: bold; 
 color: #000000;
 margin-bottom: 0;
 }
 
.moreinfob li {
	color: black;
	font-weight: bold; 
	font-size: 18px;
	font-family: sans-serif;
	margin-left:30px;
}
 .moreinfob img{
 margin-left:10px;
 margin-right:30px;
 margin-bottom:15px;
 }

/********blockquotes**********/


blockquote {
background:#ffff00;
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
margin: 0.25em 0;
margin-left:40px;
margin-right:15px;
padding: 0.25em 40px;


line-height: 1.45;
position: relative;
color: #383838;
border: none;
}


blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}


blockquote:after{
display: block;
content: "\201D";
font-size: 80px;
position: absolute;
color: #7a7a7a;


        bottom: -40px;
        right: 0;
}


blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}



/********timeline**********/

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #eeeeee;
        left: 50%;
        margin-left: -1.5px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            width: 46%;
            float: left;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            padding: 10px;
            position: relative;
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
        }

            .timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #ccc;
                border-right: 0 solid #ccc;
                border-bottom: 15px solid transparent;
                content: " ";
            }

            .timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #fff;
                border-right: 0 solid #fff;
                border-bottom: 14px solid transparent;
                content: " ";
            }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 25px;
            height: 25px;
            line-height: 50px;
            font-size: 1.4em;
            text-align: center;
            position: absolute;
            top: 28px;
            left: 52%;
            margin-left: -40px;
            background-color: #cc3300;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }

.timeline-badge.orange {
    background-color: #ff6633 !important;
}

.timeline-badge.purple {
    background-color: #663399 !important;
}

.timeline-badge.light-green {
    background-color: #99CC00 !important;
}

.timeline-badge.red {
    background-color: #CC0033 !important;
}

.timeline-badge.teal {
    background-color: #00a99d !important;
}

.timeline-badge.blue {
    background-color: #3399FF !important;
}


.timeline-title {
    margin-top: 0;
    font-size: 20px;
	font-weight: bold;
	color: orangeb;
	background-color: #ffffff;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
    }

@media (max-width: 767px) {
    ul.timeline:before {
        left: 30px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 10px;
        margin-left: 0;
        top: 10px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 10px;
            left: -10px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
}

.timelinebackground {
	background-color: #999966;
	margin-left:30px;
	margin-right:50px;
	padding-top:20px;
}

/********bullet fix**********/


li .thirdmodal
{
padding:none; 
}

/********IE right column image width fix*****/
  
  .large-4.rightcolumn img {
  width:100%;
  }
  

   /***********reveal hide  What is this?********/
 .revealhide{
 border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px #888888;
  float:left;
margin-top:2px;
margin-bottom:12px;
 text-align:center;
  font: 22px;
  font-weight: bold; 
 color: #ffffff;
 height:150px;
  padding-left:10px;
  padding-top:13px;
  padding-right:10px;
  padding-bottom:13px;
  margin: 10px;
 }
 

 
  /*******Page numbers***********/


.pagenumbers li{
list-style-type: none;
display:inline;
background-color: #E8E8CE;
border: 1px solid #d5d5bd;
  padding-left: 3px;
  padding-right: 1px;
  margin:3px;
  width:10px;
}


.pagenumbers li.active{
background-color: #F4900C;
color: #000;
}


.pagenumbers li.active a{
color: #000;
}


.pagenumbers li a{
color: #F4900C;
}


.pagenumbers ul{
webkit-padding-start: 10px;
}


.pagenumbertext {
background-color: white;
border: none;
padding-left:5px;
}
 
  
  
  /*******Tablet specific styles***********/  

@media screen and (min-width:60em) and (max-width:89.9999em) {
  
.reveal-modal, dialog {
top: 4.25rem;
}

.reveal-modal, dialog {
width: 80%;
}

}


/***masonry 2 and 3 has been set up for the contents page ****/
/***Masonry 3 column Layouts ****/

.item img, iframe {
  max-width: 100%;
    display: block;
height:auto;
}

.masonry3 {
margin-bottom: 10px;
column-count: 3;
column-gap: 1.5em;
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;    
    font-size: .85em;    
}

.item3 {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;   
    background: #fff;
    padding: 0.5em;
    margin: 0 0 1.2em;
       box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;

}

.item3 img {
width:30%;
float:left;
}

@media only screen and (min-width: 400px) {
    .masonry3 {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry3 {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 900px) {
    .masonry3 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry3 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
} 


/****Masonry 2 column***/
.item img, iframe {
  max-width: 100%;
    display: block;
height:auto;
}

.masonry2 {
margin-bottom: 5px;
column-count: 2;
column-gap: 1.5em;
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;       
}

.item2 {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;   
       padding: 1em;
           box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.item2 img {
width:30%;
float:left;
}

.item2 img{
margin-top: 8px;
}

@media only screen and (min-width: 500px) {
    .masonry2 {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry2 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry2 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry2 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
} 
 
.contents{
	background-color:white;
	padding-top:22px;
	padding-right:40px;
	padding-left:40px;
}


  /*IE fixes*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .borderbox{
	display:block;
}
}

/******Login box style*****/
.loginbox{
background-color:white;
padding:20px;
text-align:center;
}

.loginbox h2{
margin-bottom:15px;
text-align:center;
}

.loginbox input{
width:300px;
margin:auto;
margin-bottom:20px;
}

.loginbox h3{
text-align:center;
}