/* SPS Style Sheet - District 4 */
/* USPS approved colors: 	*/
/* Red: #ea132f 	*/
/* DkBlue: #012169 	*/
/* Menu bar: #1c3464	*/
/* Menu hover: #d5e8f6	*/
/* Menu text: #ffffff 	*/
/*  	*/
/* page background: #c8e1f5	*/
/* sidepanel:  #b0bfd4			*/
/* main text:  #000000      */

*{margin:0;padding:0;}

html, body, .containercenter {
    height: 10%;
}
.containercenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

html, body, .containercenter80 {
    height: 60%;
}
.containercenter80 {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

 #wrapper {
	/*  text-align:center; */
	clear: both;
}

#info {
	*display:inline-block;
	width: 350px;
  height: 75px;
   vertical-align:top; 
   text-align:left;
}

#inner {
  display: table;
  margin: 0 auto;
}

body {
  background: #c8e1f5; 
  font-family: 'Open Sans', sans-serif;    
  color: #000;   
  overflow-x: hidden;    
}
header{
  position: absolute;
  z-index: 9999;
  width: 100%;    
  background: rgba(0,0,0,.5);    
}

.acol {
    position:relative;
}

p.clear {
    clear: both;
}

/* #### Mobile Phones Portrait or Landscape ####  1024px */
@media screen and (max-width: 1024px){
.columnleft {
/* position:absolute; left:0px; top:350px; */
   float: left;
   width: 95%;
}   

.colbox {
   float: left;
   margin: 10px;
   padding: 20px;
   width: 85%;
   background-color: #ffffff;
   border-radius: 20px; 
   border: 5px solid #e8e8d3; 
   border-bottom-width: 10px; 
   box-shadow: 8px 8px 5px rgba(0,0,0,0.5);
   clear: left;
}   

.colboxl {
/* position:absolute; left:0px; top:350px;   float: left; */
   margin: 10px;
   padding: 10px;
   width: 95%;
   background-color: #ffffff;
   border-radius: 20px; 
   border: 5px solid #e8e8d3; 
   border-bottom-width: 10px; 
   box-shadow: 8px 8px 5px rgba(0,0,0,0.5);
   clear: left;
}   
img.spacer {	
	height: 350px;
	style="width:100%;
	padding: 0px;
}
}

/* #### Desktops #### */
@media screen and (min-width: 767px){
.columnleft {
   float: left;
   width: 29%;
}  

  .colbox {
   float: left;
   margin: 10px;
   padding: 10px;
   width: 29%;
   background-color: #ffffff;
   border-radius: 20px; 
   border: 5px solid #e8e8d3; 
   border-bottom-width: 10px; 
   box-shadow: 8px 8px 5px rgba(0,0,0,0.5);
}   


.colboxl {
   float: left;
   margin: 10px;
   padding: 10px;
   width: 85%;
   background-color: #ffffff;
   border-radius: 20px; 
   border: 5px solid #e8e8d3; 
   border-bottom-width: 10px; 
   box-shadow: 8px 8px 5px rgba(0,0,0,0.5);
}   
}



.bigbox {
   float: left;
   margin: 10px;
   padding: 10px;
   width: 94%;
   background-color: #ffffff;
   border-radius: 20px; 
   border: 5px solid #e8e8d3; 
   border-bottom-width: 10px; 
   box-shadow: 8px 8px 5px rgba(0,0,0,0.5);
}   

.bigboxr {
   float: right;
   margin: 10px;
   padding: 10px;
   width: 94%;
   background-color: #ffffff;
   border-radius: 20px; 
   border: 5px solid #e8e8d3; 
   border-bottom-width: 10px; 
   box-shadow: 8px 8px 5px rgba(0,0,0,0.5);
}   

.headingbox {
   float: left;
   margin: 10px;
   padding: 10px;
   width: 94%;
   background-color: #c8e1f5;
}   

img {	
	padding: 10px;
}

#img a, #img a:visited {
   background-color: #ffffff;

}

img.banner {	
	padding: 0px;
}

ul {
	list-style-position:inside;
	padding: 5px;
}

td {
    padding: 5px;
}

.table2 {
    border-bottom: 1px solid #ddd;
}
td.table2 {
	border-bottom: 1px solid #ddd;
}


.maincenter{font-family: arial, verdana, helvetica, sans;
	font-size: 14px;
	background-color: #FFFFFF;
	color: #1c2a4d;
}


#maincenter a:link {
color: #FFFFFF;
text-decoration: none;
}

#maincenter a:active {
color: #FFFFFF;
text-decoration: none;
}

#maincenter a:visited{
color: #FFFFFF;
text-decoration: none;
}

#maincenter a:hover{
color: #FFFFFF;
text-decoration: underline;
}


.leftcolumn{font-family: arial, verdana, helvetica, sans;
   float: left;
   margin: 10px;
   padding: 10px;
   width: 20%;
	font-size: 14px;
	background-color: #FFFFFF;
	color: #1c2a4d;
}
.rightcolumn{font-family: arial, verdana, helvetica, sans;
   float: left;
   margin: 10px;
   padding: 10px;
   width: 50%;
	font-size: 14px;
	background-color: #FFFFFF;
	color: #1c2a4d;
}

.pagetext{font-family: arial, verdana, helvetica, sans;
 	margin: auto; 
	font-size: 14px;
	background-color: #c8e1f5;
	color: #1c2a4d;
}

.clearfix {
    overflow: auto;
}

.nsfooter {
   float: left;
   margin: 10px;
   padding: 10px;
   width: 94%;
 }


h1 {
	font-family: arial, verdana, helvetica, sans; 
	color: #1c2a4d;
	font-size: 32px;
	font-weight: normal;
 	line-height: 34px; 
}

h2 {
	font-family: arial, verdana, helvetica, sans; 
	color: #1c2a4d;
	font-size: 18px;
	font-weight: normal;
 	line-height: 22px; 
}

h3 {
	font-family: arial, verdana, helvetica, sans; 
	color: #1c2a4d;
	font-size: 14px;
 	line-height: 16px; 
}

h4 {
	font-family: arial, verdana, helvetica, sans; 
	color: #1c2a4d;
	font-size: 12px;
	font-weight: normal;
 	line-height: 12px; 
}

h5 {
	font-family: arial, verdana, helvetica, sans; 
	color: #1c2a4d;
	font-size: 10px;
	font-weight: bold;
}

/* ---------- Menus ------------ */
.menubar {width:100%; height:55px; padding-top:1px; margin:auto; background: #1c3464;}

.container {width:90%; height:55px; padding-top:1px; margin:auto;}
/* ================================================================ 
http://www.cssplay.co.uk/menus/cssplay-responsive-droplist-touch-screen.html
21st March 2013
21-03-2013
23-04-2013
Also: http://responsiveslides.com/

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/ul-multi-nine.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* calculate the overall width/height of the top level list items and center them */
.menu {width:100%; height:50px; margin:auto;}

/* set up defaults */
.nav,
.nav ul {margin:auto; padding:0;list-style:none;}
.nav a {text-decoration:none;}
.nav {width:100px; float:left; margin-right:-1px;}

/* set up the widths */
.nav .drop {width:100px;}
.nav a {width:100px; margin-right:-99px; margin-bottom:-1px;} /* margin is 1px less than the width */
.nav ul li {max-width:100px;}

/* style the links using the b elements */
.nav b {display:block; font:bold 12px Arial, sans-serif; padding:6px 8px; border:1px solid #ffffff; cursor:pointer;}
.nav b.top {height:40px; line-height:20px;}
.nav a.sub-link b {background:url('images/arrow.gif') no-repeat right bottom;}

/* style the list colors */
.nav a {color:#ffffff; background:#1c3464;}
.nav ul a {background:#1c3464;}
.nav ul ul a {background:#1c3464;}
.nav ul ul ul a {background:#1c3464;}

/* style the hover, active and focus colors */
.nav a:hover,
.nav a:focus,
.nav a:active {background:#d5e8f6; color:#3b2d1e;}

/* style the path on hover in all browsers except IE5.5 and 6 */
.nav li:hover > a {background:#d5e8f6; color:#3b2d1e;}

/* style the positions of the ul and also when the text spans two and three lines */
.nav {height:50px;}
.nav .drop {height:30px;}

.nav ul {position:relative; left:0; top:0; z-index:100;} /* the dropdown */
.nav ul ul {left:95px; top:-26px;} /* the right flyouts */
.nav ul ul.two {top:-39px;}
.nav ul ul.three {top:-52px;}
.nav li.left ul ul {left:auto; right:95px;} /* and the left flyouts */

/* do not change anything below this line */
/* ------------------------------------------------------------ */
.nav li,
.nav ul {float:left;}
.nav ul li {clear:left;}
.nav a {position:relative; display:block; z-index:10;}
.nav a.sub-link {float:left; margin-top:10000px;}
.nav .drop,
.nav .fly {margin-top:-10000px;}
.nav ul {margin-bottom:-5000px;}

/* the bit that does all the work */
.nav a:hover,
.nav a:focus,
.nav a:active {margin-right:0;}

/*IE5-7 fixes*/
.nav .fly {width:100%;}
a:active {}

/*OPERA fix*/
.nav ul:hover {clear:left;}

/* ------------------------------------------------------------ */
#menu {margin:5px auto 10px auto;}
#menu a, #menu a:visited {
  position:relative;
  text-decoration:none; 
  text-align:center; 
  background-color:#1c3464; 
  color:#fff; 
  display:block; 
  width:12em; 
  border:2px solid #fff;
  border-color:#def #678 #345 #cde;
  padding:0.25em;
  margin:0.5em auto;
  }

#menu a:hover {
  top:2px;
  left:2px;
  background-color:#d5e8f6; 
  color:#3b2d1e;
  border-color:#345 #cde #def #678;
  }


/* --- maincenter buttons --- */
.container2 {width:40%; height:25px; padding-top:1px; margin:auto; background: #1c3464;}
.menu2 {width:100%; height:30px; margin:auto;}

#menu2 {margin:5px auto 10px auto;}
#menu2 a, #menu2 a:visited {
	position:static;
  text-decoration:none; 
  text-align:center; 
  background-color:#9ab; 
  color:#fff; 
  display:block; 
  width:12em; 
  border:4px solid #fff;
  border-color:#def #678 #345 #cde;
  padding:0.25em;
  margin:0.5em auto;
  }

#menu2 a:hover {
  top:2px;
  left:2px;
  color:#000;
  border-color:#345 #cde #def #678;
  }

/* --- maincenter 2 buttons --- */

.menu3		{ font-family: Gill Sans MT, arial, verdana, helvetica, sans;
		  font-size: 14px;
		  height: 33px;
		  width: 194px;
		  cursor:hand;
		  font-weight: bold;
		  text-indent: 1px;
		  line-height: 27pt;
		  text-align: center;
		  display: block;
		  }

a.menu3:link 	{ background-image: url("images/menu2off.gif");
		  color: #ffffff; }

a.menu3:visited 	{ background-image: url("images/menu2off.gif");
		  color: #ffffff; }

a.menu3:active 	{  background-image: url("images/menu2off.gif");
		   color: #ffffff; }

a.menu3:hover 	{ background-image: url("images/menu2on.gif");
			text-decoration:none;
		  color: #000000; }