html {overflow-y: scroll; height:100%;box-sizing: border-box;}

*, *:before, *:after {
  box-sizing: inherit;
}

* :focus { outline: 0; }

body {background-color: #e6f1fa;
margin:0 0 0 0;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 16px;
font-style: normal;
line-height:22px;
color: #000000;
height:100%;
background-image:url(../images/clouds.jpg);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
	}

A:link, A:visited {color: #0574ce; text-decoration: none;}
A:hover {color: #035292; text-decoration: underline;}

.anchor{
  display: block;
  height: 250px; /*same height as header*/
  margin-top: -250px; /*same height as header*/
  visibility: hidden;
}

#content{
position:relative;
margin:auto;
width:100%;
max-width:1000px;
background-color:#ffffff;
background-position: top center;
background-repeat:repeat-x;
overflow: auto;
border-left:1px solid #8199ac;
border-right:1px solid #8199ac;
}

#header{
background-image:url(../images/content-back.png);
position:fixed;
width:100%;
max-width:998px;
height:230px;
z-index:999;
margin:auto;
}

#shadow{
background-color:none;
position:relative;
width:100%;
background-image:url(../images/dropshadow.png);
background-repeat:repeat-x;
height:14px;
}

#topnav{
background-color:#03335a;
width:100%;
text-align:center;
border-bottom:1px solid #ffffff;
}

#toplinks{
margin:auto;
}

#toplinks ul {
margin: 0;
padding: 0;
}

#toplinks li {
list-style:none;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #ffffff;
text-decoration: none;
width:185px;
padding:10px 0;
border-left:1px solid #ffffff;
cursor:pointer;
text-transform:uppercase;
text-align:center;
display: inline-block;
background-color:#0574ce;
}

ul#mainnav li:last-child{
border-right:1px solid #ffffff;
}

#toplinks li:hover {
color:#0574ce;
background-color:#ffffff;
	}

#toplinks li.active{
color:#0574ce;
background-color:#ffffff;
}


#pgcontent{
position:relative;
float:left;
padding:210px 60px 40px 60px;
width:100%;
background-color:#ffffff;
}

#pgcontent ul{
margin-top:6px;
margin-bottom:20px;
}

#pgcontent li{
margin-left:-12px;
margin-bottom:6px;
}

#footerbar{
position:relative;
clear:both;
background-color:#0574ce;
margin-top:24px;
padding:4px;
text-align:center;
width:100%;
color:#ffffff;
font-size:14px;
}

h1 {
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: 26px;
color: #0574ce;
margin-top:24px;
	}
	
h2 {
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 26px;
color: #03335A;
margin-top:24px;
	}
	
h3{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: #03335a;
	}

#darktile{
float:left;
background-color:#00559a;
padding:10px 12px;
text-align:center;
color:#ffffff;
font-size:22px;
font-weight:400;
line-height:26px;
width:200px;
height:300px;
background-position:bottom center;
background-repeat:no-repeat;
cursor:pointer;
margin:12px 6px;
border:1px solid #00559a;
border-radius: 16px;
}

#darktile:hover{
color:#0574ce;
background-color:#ffffff;
}

#lighttile{
float:left;
background-color:#0574ce;
padding:10px 12px;
text-align:center;
color:#ffffff;
font-size:22px;
font-weight:400;
line-height:26px;
width:200px;
height:300px;
background-position:bottom center;
background-repeat:no-repeat;
cursor:pointer;
margin:12px 6px;
border:1px solid #0574ce;
border-radius: 16px;
}

#lighttile:hover{
color:#0574ce;
background-color:#ffffff;
}

#bio{
margin-bottom:20px;
}

#bio p{
margin-top:0;
margin-bottom:8px;
}

#contactform{
width:100%;
max-width:560px;
margin:0;
padding:0;
}

#contactform input{
color:#666666;
height:26px;
padding:4px;
width:90%;
max-width:500px;
border:1px solid #0574CE;
margin-bottom:16px;
font-family: 'Open Sans', Arial, sans-serif;
font-size:14px;
}

#contactform input:focus{
color:#000000;
}

#contactform textarea{
color:#666666;
border:1px solid #0574CE;
overflow:hidden;
height:106px;
width:90%;
max-width:500px;
border:none;
resize:none;
margin-bottom:16px;
font-style: normal;
font-family: 'Open Sans', Arial, sans-serif;
font-size:14px;
}

#contactform textarea:focus{
color:#000000;
}

.sendbutton{
width:220px;
padding:4px 0 20px 0;
text-align:center;
font-size:14px;
font-weight:700;
background-color:#0574ce;
border:1px solid #0574ce;
color:#ffffff;
text-decoration: none;
cursor:pointer;
height:80px;
}

.sendbutton:hover {background-color: #03335A; color:#ffffff; text-decoration: none;}



/* for 800px or less */
@media screen and (max-width: 800px) {

#pgcontent{
padding:210px 40px 20px 40px;
}

#toplinks li {
width:160px;
padding:10px 0;
border-left:1px solid #ffffff;
}

#content{
border:none;
}

}

/* for 640px or less */
@media screen and (max-width: 640px) {

#toplinks li {
width:160px;
padding:10px 0;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
}

.anchor{
  display: block;
  height: 240px; /*same height as header*/
  margin-top: -240px; /*same height as header*/
  visibility: hidden;
}

#pgcontent{
padding:210px 20px 20px 20px;
}

}

/* for 480px or less */
@media screen and (max-width: 640px) {

h1 {
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-top:24px;
	}
	
h2 {
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 22px;
margin-top:24px;
	}
	
h3{
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 20px;
	}
	
ul#mainnav li {
border-right:1px solid #ffffff;
}

.anchor{
  display: block;
  height: 210px; /*same height as header*/
  margin-top: -210px; /*same height as header*/
  visibility: hidden;
}

#darktile{
clear:both;
float:none;
margin:16px auto;
}

#lighttile{
clear:both;
float:none;
margin:16px auto;
}

}