/*Google font imports has to be first item in CSS*/
/*@import url(https://fonts.googleapis.com/css?family=Exo+2:400,500,600,700,800,400italic,500italic,600italic,700italic,800italic);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);*/

@import url(https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900,900italic);

/* Shaftesbury CSS */
html {
    height: 100%;
    width: 100%;
}
/*variables form colour (not working)*/
/*@darkblue: rgb(0,0,128);*/

/*background colour and tiled image*/
body {
    margin: 0;
    padding: 0;
    /*two images for background*/
    background-image: url("/images/bgtile.png"), url("/images/bigblublend.png");
    background-repeat: repeat, repeat-x;
    background-color: rgb(0,50,130);
    position: relative;
}

/*default font style for all elements*/
* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: left;
    margin: 0;
    border: none;
    padding: 0;
}

/*p {
    font-size: 0.8em;
    line-height: 1.5em;
    margin-bottom: 10px;
    text-align: justify;
    color: rgb(180,255,0);
}*/


/*Fancified text using Google fonts*/
.txthead, .txtsub, .striphead, .stripsub, .stripsection, .histhead, .biogtitle {
    font-family: 'Lato', sans-serif;   
    font-weight: 900;
}

/*turns off default image borders in ie*/
img {
    border: none;
    vertical-align: top;
    margin: 0;
}

a:link, a:visited {
 text-decoration: none;
 color: rgb(0,40,140);
}

a:hover {
text-decoration: underline;
 color: rgb(0,60,210);
 background-color: rgba(255,255,255, 0.5);
}

a:active {
text-decoration: underline;
color: rgb(255,160,0);
}

/*auto-centering outer container box*/
.outer {
    margin: 0 auto;
    width: 960px;
    text-align: center;
    background-color: rgba(255,0,0,0);
    position: relative;
}

.top {
    width: 960px;
    height: 150px;
    background-color: rgba(255,255,255,0);
}

.mid {
    width: 960px;
    background-color: rgba(0,0,255,0);
    float: left;
    height: 100%;
    margin-top: 35px;
    position: relative;
}

.midmain {
    width: 706px;
    background-color: rgb(210,235,255);
    border-radius: 6px;
    border: 2px solid white;
    padding: 20px 20px 30px 20px;
    margin-right: 10px;
    box-shadow: 2px 2px 3px 3px rgba(0,20,60,0.3);
    float: left;
    min-height: 1460px;
}

.clear {
clear: both;
}

.midside {
    width: 200px;
    height: 100%;
    background-color: rgba(0,50,130,0.8);
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 1px 3px 3px rgba(0,20,60,0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0; 
}

/*Text rules for midside*/
.nav {
width: 180px;
margin: 0;
padding: 20px 8px 5px 8px;
background-color: rgb(255,225,90);
border-left: solid 2px white;
border-right: solid 2px white;
border-top: 2px white;
}

.nav a, nav a:link{
 display: block;
 width: 178px;
 height: 30px;
 background-color: black;
 background: url("/images/nav.png");
 background-repeat: repeat-x;
 border: 1px solid rgb(0,20,100);
 border-left: 4px sol id rgb(255, 180, 0);
 padding: 10px 0 0 0;
 margin-top: 0;
 margin-bottom: 10px;
 border-radius: 6px;
 text-align: center;
 text-transform: uppercase;
 font-weight: bold;
 color: white;
 text-decoration: none;
}

.nav a:hover {
background: url("/images/nav.png") 0 -40px;
color: black;
border: 1px solid rgb(128,0,0);
margin-top: -2px;
margin-bottom: 12px;
}

/*Staff and board biog sections*/
.strip {
    width: 706px;
    border-radius: 12px;
    margin-bottom: 25px;
    margin-top: 20px;
    padding: 0.01em;
    clear: both;
    display: block;
    min-height: 150px;
    background-color: rgba(255,255,255,0.01);
}

.strippic {
    width: 136px;
    height: 146px;
    background-color: rgba(128,150,200,0.8);
    border-radius: 20px;
    margin-right: 20px;
    border: 2px solid white;
    box-shadow: 0 1px 3px 3px rgba(0,20,60,0.3);
    float: left;
    overflow: hidden;
}
/*orange and blue section rule heads*/
.striphead, .stripsection {
    height: 25px;
    font-size: 1.2em;
    font-weight: 700;
    font-style: oblique;
    color: rgb(0,0,120);
    background-color: rgb(255, 213, 65);
    background: url("/images/orgblend.png");
    background-repeat: repeat-x;
    margin: 15px 0 15px 125px;
    border-radius: 15px;
    padding: 0 0 0 40px;
    box-shadow: 0 0 2px 2px rgba(0,20,60,0.2);
}
/*specific changes for blue section rule head only*/
.stripsection {
   background: url("/images/blublend.png");
   color: white;
   background-color: rgb(31, 65, 145);
   margin: 30px 0 30px 0px;
   font-weight: normal;
}

.stripsub {
   font-size: 0.7em;
   text-transform: uppercase;
   font-weight: 500;
}

.striptxt {
    margin: 20px 10px 0 165px;
    font-size: 0.8em;
    line-height: 1.4em; 
    text-align: justify;
}

/*max width for pic in main area 706px*/
.picouter, .picouter2, .picright {
  display: inline-block;
  border-radius: 10px;
  box-shadow: 0 1px 3px 3px rgba(0,40,120,0.3);
  margin: 10px 16px 10px 0;
  background-color: transparent;
  overflow: auto;
}

/*added as an outer 'shell' around picouter2 to attain inline float positioning*/
.picinline {
display: inline;
float: left;
margin: 0 20px 10px 0;
box-shadow: none;
}

/*inner style for picinline. Matches picouter but with no margins*/
.picouter2 {
    margin: 0;
}

.picright {
    margin-right: -1px;
}

.picbox {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  background-color: transparent;
}

.pictxt{
    font-size: 0.7em;
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0.8em 1.2em 0.8em 0.8em;
    clear: both;
    border-left: 6px solid rgb(255,200,0);
    background-color: white;
    max-width: 100%;
    overflow: hidden;
}

/*special styling for caption text in individual paras*/
.pictxt p {
      margin-bottom: 5px;
}

.pictxt p:last-child {
      margin-bottom: 0;
}

.logo {
    width: 310px;
    height: 180px;
    z-index: 2;
    position: relative;
    top: 0;
    left: -50px;
    display: block;
}

.logo a, .logo a:link, .logo a:active, .logo a:visited {
    width: 310px;
    height: 180px;
    background: url("/images/logobig.png") 0 0;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
}

.logo a:hover {
   background: url("/images/logobig.png") 0 -180px;
}

.topbox {
    width: 760px;
    height: 150px;
    background-color: rgba(255,255,255,0.8);
    position: relative;
    top: -180px;
    left: 200px;
    z-index: 1;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 30px;
    box-shadow: 0 1px 3px 3px rgba(0,20,60,0.3);
    overflow:hidden;
}

.bot {
    width: 960px;
    float: left;
    background-color: rgba(0,50,130,0.8);
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px 3px rgba(0,20,60,0.3);
    padding: 10px 0;
    clear: both;
}

/*Space under bottom box*/
.botmargin {
    text-align: center;
    width: 960px;
    float: left;
    margin-top: 8px;
    clear: both;
}

/*page title graphical text*/
.title {
    margin-top: 30px;
    margin-bottom: 20px;
}

/*Text sizes in ems for accessibility*/
.txtbody, .txtbold, .expand p {
    font-size: 0.8em;
    line-height: 1.5em;
    margin-bottom: 10px;
    text-align: justify;
}

.txtbold {
    font-size: 0.9em;
    line-height: 1.3em;
    margin-bottom: 15px;
    font-weight: bold;
}

.txthead, .biogtitle {
    
    padding: 15px 0 0 0;
    border-top: 1px solid rgb(150,180,210);
    font-size: 1.7em;   
    color: rgb(0,30,80);
    clear: both;
}

.txthead {
margin: 30px 0 15px 0px;
}

/*spacing between head and subhead tightened*/
.txthead > .txtsub {
  padding-top: 0;
}

.txthead:first-child {
    margin-top: 0;
    padding-top: 0;
}

.txtsub {
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: 900;
    color: rgb(0,30,80);
    margin: 15px 0 15px 0;
}

.txtsub:first-child {
    padding-top: 0;
    }

.txtsml {
    font-size: 0.7em;
}

.txtxsml {
    font-size: 0.5em;
    color: rgb(0,128,0);
}

.txtbig {
    font-size: 1em;
    font-weight: bold;
}


.paraspc {
  height: 2em;
}
/*button style for ASP component*/
.button {
    background-color: rgb(200,200,200);
    text-transform: uppercase;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    box-shadow: 0 1px 3px 3px rgba(0,0,0,0.2);
    border-radius: 20px;
    border: solid 2px rgb(150,150,150);
    margin-top: 20px;
}
.button:link {
    
}
.button:visited {
    
}
.button:hover {
     background-color: rgb(255,200,0);
}
.button:active {
     background-color: rgb(255,128,255);
}

ul {
font-weight: bold;
font-size: 1em;
}

li {
font-style: oblique;
background-image: url("/images/bul.png");
background-repeat: no-repeat;
background-position: 0 0;
list-style: none;
padding-left: 25px;
margin-bottom: 0.5em;
}

/*history page*/
.histblock {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    margin-top: 10px;
    border: 2px solid rgb(140,190,255);
    border: 2px solid rgb(255,255,255);
    box-shadow: 0 1px 3px 3px rgba(0,40,120,0.1);
    overflow: hidden;
    padding: 0 0 10px 0;
}

/*spacing for photo inside history block*/
.histblock .picouter {
  margin: 5px 10px 5px 20px;
}

.histhead{
 height: 24px;
 font-size: 1em;
 font-weight: bold;
 color: rgb(0,0,128);
 text-align: left;
 padding: 0 20px 0 20px;
 background-color: rgb(255, 202, 47);
 border-bottom: 1px solid rgb(255,152,0);
 overflow: hidden;
 background-image: url("/images/histblend.png");
 background-repeat: repeat-x;
 margin-bottom: 20px;
}

.histbody{
  font-size: 0.8em;
  line-height: 1.5em;
  margin-bottom: 10px;
  font-style: italic;
  margin-top: 10px;
  text-align: justify;
  padding: 0 20px 0 20px;
}

.footyouter {
    background-color: rgb(0,30,80);
    display: inline-block;
    margin: 0;
    width: 700px;
    border-radius: 10px;
    padding: 0 4px 4px 1px;
}

.footyouter table {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}

.footyhead {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    color: white;
    width: 700px;
    padding: 10px 0;
    display: block;
}

.footytop, footybot { 
    width: 700px;
    margin: 0;
    padding: 0;
    border: 0;
}

.footytop td {
    width: 140px;
    min-height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
}

.footybox tr {
   background-color: white;
}

.footybox td {
    width: 129px;
    border-left: 3px solid rgb(0,30,80);
    border-top: 1px solid rgb(0,30,80); 
    padding: 8px 4px;
    min-height: 45px;
    text-align: left;
    vertical-align: top;
}

.footybox tr:last-child td { 
    padding-bottom: 2px;
}

.footytopshape, .footybotshape {
    margin: 0 0 0 3px;
    width: 137px; 
}

.footytopshape {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
    padding: 8px 0;
    font-size: 0.9em;
    font-weight: bold;
    background-color: rgb(255,225,0);
}

.footybotshape {
    height: 8px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: white;
}

.footybox h1, .footybox h2, .footybox h3 {
    font-size: 0.9em;
    font-weight: bold;
    text-align: left;
    color: black;
    padding: 0;
    margin: 0;
}

.footybox h2 {
        font-size: 0.75em;  
    }

.footybox h3 {
        font-size: 0.7em;
        font-style: italic;
        font-weight: normal;  
    }

.footyblank {
        background-color: rgb(205,235,215);
    }




.date {
padding: 3px 5px;
border-radius: 6px;
background-color: rgb(0,40,120);
float: right;
margin: 0 0 15px 15px;
 font-size: 0.5em;
 font-weight: bold;
 color: white;
}

.donate {
padding: 20px 0;
width: 188px;
background-color: #fff;
border-radius: 6px;
margin: 4px;
margin-bottom: 0;
z-index: 99;
}

.donate a:link, .donate a:hover, .donate a:active, .donate a:visited {
   display: block;
   height: 130px;  
   background: url("/images/gganiroll.gif");
   background-repeat: no-repeat;
}

.donate a:hover, .donate:hover {

background-position-y: -130px;
}

.donate:hover {
    z-index: 99;
    background-color: rgb(230,0,50);
}

.icons {
width: 119px;
height: 30px;
position: absolute;
right: 5px;
bottom: 35px;
background-color: #fff;
border-radius: 5px;
padding: 2px;
}

.icons a, icons a:active, .icons a:link, .icons a:visited {
display: block;
float: left;
overflow: hidden; 
height: 30px;
width: 30px;
background: url("/images/face.png") no-repeat;
} 

.icons a:hover {
background-position-y: -30px;
cursor: pointer;
}

.transad {
  display: block;
margin: 20px 0;
}

.transad a, .transad a:link, .transad a:active, .transad a:visited, .transad a:hover {
  background-color: none;
display: block;
padding: 15px 2px 25px;
border-radius: 25px;
}

.transad a:hover {
    background-color: rgba(255, 225, 255, 0.2);
}

.newsletter {
    margin-right: 20px;
    display: block;
    float: left;
    width: 140px;
    height: 200px;
    border-radius: 4px;
    box-shadow: 0 1px 3px 3px rgba(0,40,120,0.3);
    clear: both;
    overflow: hidden;
    background-color: white;
}




.prosp a:link, .prosp a:hover, .prosp a:active, .prosp a:visited {
   display: block;
   background-image: url("/images/eduprospectus.png");
   height: 180px;
   width: 238px;
   background-repeat: no-repeat;
   background-color: none;
}

.prosp a:hover {
	background-position-y: -180px;
	background-color: transparent;
}


.prosp {
    margin-right: 20px;
    display: block;
    float: left;
    width: 238px;
    height: 180px;
    clear: both;
    overflow: hidden;
}




.newsletter a:link, .newsletter a:hover, .newsletter a:active, .newsletter a:visited {
   display: block;
   background-image: url("/images/newsthm1.jpg");
   height: 200px;
   width: 140px;
   background-repeat: no-repeat;
}

.newsletter a:hover {
background-position-y: -200px;
}



.biog, .biogtitle, .biogexpand, .jobtitle, .jobdetail {
	width: 686px;
	display: block;
}

.biogtitle {
margin: 30px 0 15px 0;
padding-left: 20px;
background: url("../images/trigry_r.png") 0 25px no-repeat;
}

.biogtitle:hover {
	background: url("../images/trigrn_r.png") 0 25px no-repeat;
	color: rgb(255,225,0);
}

.biogtitle:first-child {
	margin-top: 0;
}

.max {
	background: url("../images/trigry_d.png") 0 25px no-repeat;
}
.max:hover {
	background: url("../images/trigrn_d.png") 0 25px no-repeat;
}

/* Expandable section set to default to collapsed*/
.biogsection {
	display: none;
}	


.biogexpand {	
	clear: both;
	margin: 10px 0 0 20px;
	border-bottom: 1px solid rgb(230,230,230);
	padding: 3px 0;
}

.biogexpand:first-child {
	border-top: none;
	margin: 0 0 0 20px;
}

.expand {
    font-size: 12px;  
    font-weight: 400; 
    color: rgba(0,0,0,0.3);
    height: 20px;
}


/* modal panel css*/
/* modal background panel  covers entire screen and is parent element to modal box*/
/* display mode set to block/none controls visibility of modal*/
.modalbg {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 777; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden;
    background-color: rgb(0,0,90); /* Fallback color */
    background-color: rgba(0,10,105,0.7); /* Black w/ opacity */
}

/* Modal Content/Box */
.modalbox {
    background-color: red;
    margin: 50px auto; /* 50px from the top and centered */
    padding: 0;
   border-radius: 4px;
    box-shadow: 0 1px 3px 3px rgba(0,40,120,0.5);
    /* width: 80%; Could be more or less, depending on screen size */
}

/* The Close Button */
.modalclose {
    color: black;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background-color: yellow;
    width: 24px;
    height: 24px;
    margin: -5px -5px 0 0;
    border-radius: 100%;
    background: url("/images/modalx.png") 0 0;
    box-shadow: 0 1px 3px 3px rgba(0,40,120,0.5);
}

/* Hover styles for Close Button */
.modalclose:hover,
.modalclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    background-color: blue;
    background: url("/images/modalx.png");
    background-position-y: -24px;
}