/*****************************************************************|
|******************FORMATTING CONTENT*****************************|
|*****************************************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
@-ms-viewport{
  width: device-width;
}
body { font-family:"Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color: #000000;margin: 0; padding: 0; line-height:1.5; font-size:14px;
@media (min-width: 800px) {font-size: 16px;}
@media (min-width: 1200px) {font-size: 20px;}}

.header, .footer {background-color: #68aac2; width: 100%;} 
.footer {height: 70px;}
.container {padding: 0.5em;}
.container, .navbox { position: relative; margin: auto; width:1024px; max-width:95% }
.leftside { margin: .5em; }

/* MEDIA QUERIES */
@media screen and (min-width: 57.5em ) {
   .leftside { margin-right: 19.5em;}
   .rightside { position: absolute; top: 0; right: 0; width: 18.75em; }   
}


/*Banner*/
#banner {
   background-image: url('images/banner400.jpg');
   background-repeat: no-repeat;
	background-position: bottom center;
   background-size: contain;
   max-width: 100%;
   height: 102px;
   width: auto;
   background-repeat: no-repeat;
}

@media only screen and (min-width:400px) and (max-width: 600px){ 
#banner {
	height: 111px;
	background-image: url('images/banner600.jpg');
   background-repeat: no-repeat;
	background-position: bottom center;
   background-size: contain;
	max-width:100%;	
  }}

@media only screen and (min-width:600px) and (max-width: 800px){ 
#banner {
	height: 148px;
	background-image: url('images/banner800.jpg');
   background-repeat: no-repeat;
	background-position: bottom center;
   background-size: contain;
	max-width:100%;	
  }}  

@media only screen and (min-width: 800px) { 
#banner {
	height: 190px;
	background-image: url('images/banner.jpg');
   background-repeat: no-repeat;
	background-position: bottom center;
   background-size: contain;
	max-width:100%;	
  }}
  
  video { 
   width:100% !important;
   height:auto !important;
}

  
  
/*NAV*/  

.accessnav {width: 0; height: 0; overflow: hidden; margin: 0;}  

.nav {
position: relative;
background-color: #3d5f69;
font-size: 1em;
padding: 0.3em 0em;
margin: 0 0 3em;
color: #FFFFFF;
clear:both;
z-index: 100;

}

.nav a, .nav a:link, .nav a:visited {
color: #FFFFFF;
margin: 0 5px;
text-decoration: none;
}

.nav a:hover, .nav a:active {
color: #27b295;
text-decoration: none;
}

.menu {
	display: inline;
	text-align: left;
	margin: 0 ;
	list-style:none;
}

.menu li {
list-style: none;
margin: 0 0.5em;
padding-top: 0;
font-weight: normal;
float: left;
}

.menu li a {
display: block;
}

.menu li ul {
	display: none; 
	background-color: #3d5f69; 
}

.menu li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; 
	color: #27b295;
}

.menu li:hover li {
	float: none; }

.menu li:hover li a {
	background-color: #3d5f69;
	color: #ffffff; }

.menu li li a:hover {
	padding: 0 0.1em;
	text-decoration: none;
	color: #27b295;
}

.menu ul#dropdown {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform 0.5s;
}


.navdrop .search {
	font-size:1.2em;
	color: #fff;
	background-color: transparent;
	float: left;
	margin: 0 11.5em; 
}
.nix {margin: 2em;}
.menu_m li {
	list-style: none;
}
.item_m { font-style: italic;}
.nav:hover {
    display: block;
	}

.top { /*back to top button*/
   opacity: 0.4;
   position: fixed;
   bottom: 3em;
   right: 1em;
   z-index: 100;
   display: none;
 }
 .top:hover {
text-decoration:none; 
 }
 
/*Contents list at top of resources - currently empty, but you might want it...*/
.internalmenu a { font-weight: bold; color: #11A18E;}
.subbullet {margin-left: 1.5em;}

/*YET MORE CONTENT FORMATTING STUFF*/

img { 
	max-width:100%;
	margin: 0 0.5em; }



table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0.1em solid #0A6782;
    overflow-x: auto;
	 display: table;
	 width: auto;
    max-width: 80%;	 
	 margin: auto;
	 table-layout:fixed;
	 word-wrap: break-word;
}
td, th {
    border-top: 0.1em solid #0A6782;
    padding: 0.2em 0.3em;
    font-size: 0.9em;
}
th { font-weight: bold; }
.restrict-table {
   overflow-x:auto;
   max-width: 80%;
   display: table;
   margin: auto;
}

/*accordion drop downs*/
.accordion {
   cursor: pointer;
   width: 100%;
   vertical-align: middle;
   transition: 0.4s;
}

h2.accordion {
   font-variant: normal;
   font-size: 1.2em;
   font-style: normal;
   color: #0A6782;
   background-color: transparent;
   display: block;
}
h2.resource img {margin: 0 0.5em; }
h2.resource:hover {
   text-decoration: underline;
}
h3.resource {font-size: 1em;}

.resource:after {
    color: #ff3616;
    float: right;
    margin-left: 5px;
    display: inline-block;
    font-size: 150%;
    content: "+";
    /*background: url(images/plus_o.gif) no-repeat 0 0;*/
    background-size: 100%;
}

.resource.active:after {
	 color: #ff3616;
    display: inline-block;
    font-size: 150%;
    content: "−";
   /* background: url(images/minus_o.gif) no-repeat 0 0;*/
    background-size: 100%;
}
div.panel {
   padding: 0 18px;
   display: none;
}

div.panel.show {
    display: block;
}



/*BOXES*/

div.bluebox {
margin: 2em auto;	
border: 0.1em solid #7ea8c0;

padding:0.5em;
width: 80%;
}

div.bluebox h2 {
margin: 0;
   font-variant: normal;
   font-size: 1em;
   font-style: normal;
   background-color: transparent;
   color: #7ea8c0;
   display: block;
}

div.blueboxright {
margin:2em;
padding:0.5em;
border:0.1em solid #7ea8c0;
float: right;
}

div.blueboxleft{
margin:2em;
padding:0.5em;
border:0.1em solid #7ea8c0;
float: left;
}

div.blueboxleft ul li { font-family:  Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color:#7ea8c0; list-style-type: circle; }

#socialmedia {
	float: right;
	padding-top: 0.7em;
}

/*input fields*/

#signup {
	float: left;
	margin: 0.7em 0.3em;
}

#signup_m {
	float: none;
	padding-left: 0.3em;
}

.pingpong { display: none;}

input[type=text] {
	background-color: #dcdcdc;
   color: #000;
   border: 0.1em; 	
	height: 32px;
	vertical-align: text-bottom;
   

}

input[type=submit] {
	cursor: pointer;
	background-image: url(images/submit.gif);
	background-size: auto; 
	border: 0.1em;
	height: 32px;
	width: 32px;
	background-repeat: no-repeat;
	vertical-align: text-bottom;
	background-size: contain; 

}
/*Horizontal Rules*/

hr {/*standard is pink*/
	margin-left: auto; 
	margin-right: auto; 
	height: 0.2em;
	border: 0 none;
	margin-top: 2em;
	color:#ec7674;
	width: 100%;}
hr.green {background-color: #29b298; }
hr.blue {background-color: #7ea8c0; }

/*Round Buttons
.roundbuttons {
   max-width:238px;
   height: auto;
   float: left;
  display:table-cell;
   text-align: center;
}
.roundbuttons a   {
   color: #000;
   margin: 0.7em;
   max-width:24%;
   text-align: center;
}*/
.centerdiv {
   margin-top: 0.7em;
	width: 100%;
	text-align: center;
}

.centerdivblock {
margin-left: auto;
    margin-right: auto;
    display: block
}

#roundbuttons {
  text-align: justify;
   color: #000;
   margin-top: 0.7em;
   
}
#roundbuttons li {
  display: inline-block;
}
#roundbuttons:after {
  content: '';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}


/*****************************************************************|
|******************TEXT STUFF*************************************|
|*****************************************************************/

/*HEADERS*/
h1 { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; font-weight: bold; color: #ffffff; background-color: #7ea8c0; text-align: left; font-size: 1.4em; padding: 0.3em 0.4em; display:inline-block; }

h2 { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; font-weight: bold; 	color: #ffffff; background-color: #7ea8c0; text-align: left; font-size: 1.2em; margin: 1em 0; padding: 0.2em 0.4em; display:inline-block;}

h3 {font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; font-weight: bold; color: #0A6782; text-align: left; font-size: 1.3em; margin: 0.7em 0 0; }

h4 {font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; font-weight: bold; color: #0A6782; text-align: left; font-size: 1.15em; margin: 0.7em 0 0;}

h5 {  font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color: #0A6782;  font-size: 1em; margin: 0.7em 0 0;}


h3 .rightside { margin-left: 0px; text-align: center; width: 10em; }
.rightside {text-align: center;  }

/*PARAS AND GENERAL TEXT*/
p { font-size:1em; font-family:"Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color: #000000; margin-top: 0}
p.large {color: #000; font-size: 1.2em;}
p.dropcap { float: left; font-size: 3em;}

a { font-family:"Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color:  #11A18E; text-decoration: none; font-weight: bold; }

a:hover { color: #7ea8c0; }

.smallcentre { color:#0A6782; font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; font-size: 75%; font-style: italic; text-align: center; }

.small { color: #0A6782; font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; font-size: 75%; }
.small img {margin: 0}

b strong { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color: #000000; font-weight: bold; }

em i { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color: #0A6782; text-align: left; }

a.tip {border: 0.1em solid #0A6782;text-decoration: none; font-weight:normal; padding: 0 0.1em;  }

blockquote {margin: 0.5em 4em; font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color: #29B298; text-align: center; }


/*Standard LISTS*/
/**Enclose text in list-items in a <span> otherwise they'll be red**/
.pseudobullet {color: #ff2c0b; margin-left: -1em; text-indent: 2em; vertical-align: text-bottom;}
ul li span {font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color: #000000; font-size: 1em; }

li { padding-top: 0.3em;}

td { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color:#0A6782; font-size: 1em;}

ul { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; list-style-type: circle; color: #ff2c0b; margin-top: 0; padding-top: 0; }

ul.tick, li.tick { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color:#0A6782; list-style-image: url(images/bullet-tick.gif);  margin-top: 0.3em; }

ul.cross, li.cross { font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color:#0A6782;  list-style-image: url(images/bullet-cross.gif);  margin-top: 0.3em;}

ul.star, li.star {font-family: "Open Sans",Quodana,Verdana,DejaVu Sans,"Bitstream Vera Sans",Helvetica,sans-serif; color:#0A6782; list-style-image: url(images/bullet-star.gif); margin-top: 0.3em;}

/*****************************************************************|
|******************Fonts******************************************|
|*****************************************************************/

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans'), local('OpenSans'),
       url('fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v13-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('fonts/open-sans-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v13-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/open-sans-v13-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('fonts/open-sans-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v13-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v13-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: bold;
  src: url('fonts/open-sans-v13-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('fonts/open-sans-v13-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v13-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v13-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v13-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v13-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}