html {height: 100%; font-size: 100% /* IE/Win hack */}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  border:0;			      /* This removes the border around the viewport in old versions of IE */
  width: 100%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1.3em;
  color: #002868;
  background-color: #FFF;

}

/************************************************************************/
#heading {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

#heading img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}
                                      
#logo-left {
  float: left;
  margin: 0;
  padding: 10px 0 0 50px;
  max-width: 30%;
  height: auto;
}

#logo-right {
  float: right;
  margin: 0;
  padding: 0;
  max-width: 60%;
  height: auto;
}
/************************************************************************/
#nav {
  float: left;
  width: 94%;
  height: auto;
  margin: 0 auto;
  padding: 0.5em 6% 0.5em 0;
  border: 0px;
  font-size: 0.9em;
  z-index: 22;
}

#nav ul {
  float: right;
}

/************************************************************************/
#bartop {
  float: left;
  clear: both;
  width: 100%;     
  height: 16px;
  background-image: url('../images/topbar.png'); 
  background-repeat: repeat-x;
}

/************************************************************************/
#breadcrumbs {
  float: left;
  clear: both;
  width: 100%;
  margin: 0 0 1.5em 1em;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
  word-spacing: 0.7em; 
}

#breadcrumbs a, a:visited {
  text-decoration: none;
  color: #66D;
}

/************************************************************************/
#content {
  max-width: 1024px;
  overflow: auto;
  overflow-y: hidden;     
  margin: 0 auto 40px auto;
  background-color: #fff;
  padding: 0.5em 2em;
  z-index: 5;
  border-radius: 0 0 20px 20px; 
  box-shadow: 5px 10px 10px #888;
}

#content #leftPane {
  float: left;
  width: 48%;
}

#content #rightPane{
  float: left;
  width: 48%;
  margin-left: 4%;
}

#content #leftPane img {max-width: 60%;}
#content #rightPane img {max-width: 60%;}

#content .pic-left img {float: left; margin: 10px 20px; max-width: 30%; height: auto;}
#content .pic-right img {float: right; margin: 10px 20px; max-width: 30%; height: auto;}

#content #onePane {
  float: left;
  width: 100%;
  padding: 0 20px 10px 20px;
}

#content  h1, h2, h3 { padding-top: 1em }
#content .inset { padding-left: 3em; }
#content .pageheading { font-size:1.3em; font-weight: bold; color: #002868; }

#content .cartouche {
  float: left;
  margin: 0;
  padding: 1em 2em;
  border-radius: 20px; 
  box-shadow: 5px 10px 10px #888;
}

#content .pindent {padding-left: 2em;}

/************************************************************************/
#footer {
  float: left;
  clear: both;
  width: 100%;
  font-size: 0.7em;
  margin-top: 30px;
  text-align: center;
}

#menubottom {
  float: left;
  clear: both;
  width: 100%;
  font-size: 0.8em;
  margin-top: 10px;
  text-align: center;
}

#barbottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;     
  height: 20px;
  padding: 0;
  background-color: #002868;
  z-index: 10;
}
                                        
/************************************************************************/
#contactform{
  width: 100%;
  font-size: 12px; /* Primary font size of form. Contained elements' font size are all relative to this setting */
}

#contactform input, #contactform textarea{
  width: 98%;
  border-radius: 5px;
  border: 1px solid gray;
  font: normal 1.3em arial; /* 24px, or 16px x 1.5 */
  padding: 0.4166666666666667em; /* 10px, or 24px x 0.4166666666666667 */
  box-shadow: 0 0 5px #0033CC inset;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#contactform textarea{
  resize:vertical; /* allow vertical resize of textarea */
  height: 150px;
}

#contactform input:focus, #contactform textarea:focus, #contactform input.button:focus{
  box-shadow: 0 0 10px orange inset;
}

#contactform .formcolumn{ /* column div inside form */
  width: 49%;
  float: left;
}

#contactform .formcolumn label, #contactform .formcolumn fieldset{
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  margin-top: 2em;
  margin-bottom: 3px;
}

#contactform div.buttons{
  clear: both;
  text-align: center;
  padding-top: 2em;
  width: 20%; 
}

#contactform input.sendbutton{
  font: bold 1em Verdana;
  text-align: center;
  color: #002868;
  text-transform: uppercase;
  box-shadow: 0 0 8px #663333 inset;
  cursor: pointer;
}

#contactform input.sendbutton:active{
  box-shadow: 0 0 16px #663333 inset;
}

/************************************************************************/
#sideslides {
  float: right;
  overflow: hidden;
  width: 326px; 
  height: 482px;
  max-width: 90%;
  padding: 0;
  margin-left: 2em;
  border: 4px double #CCC;
  border-radius: 0 0 10px 10px; 
}

#sideslides img { max-width: 100%; height: auto;}
#sideslides ul {margin: 0;}

#slidehead {
  height: 30px;
  background-color: #002868;
  color: white;
  text-align: center;
  font-weight: bold;
  line-height: 2em;
}

/************************************************************************/
@media all {
  .navmenu, 
  .navmenu ul,
  .navmenu li {
    padding: 0;
    margin: 0;
    z-index: 60;
  }
  .navmenu > li {
    float: left;
  }
  .navmenu li {
    list-style-type: none;
    background-color: #FFF;
    padding: 5px 0;
    font-weight: bold;
  }
  .navmenu ul {
    display: none;
    position: absolute;   
    margin-left: 0px;
    margin-top: 4px;
    border: 3px outset #DDDDFF;
  }
  .navmenu li:hover > ul {
    display: block;
  }
  .navmenu a {
    color: #031B76;
    background: none;
    padding: 0 10px;
    text-decoration: none;
  }
  .navmenu ul a {
    padding: 0 10px;
  }
  .navmenu a:visited {
    color: #031B76;
  }
  
  .navmenu li:hover {
    color: black;
    background-color: #F0F0F0;
  }
  
  .navmenu ul ul {
    margin-top: -1.2em;
    left: 99%;
  }

  .navmenu { 
    max-width: 1024px;
    margin: 0 auto;
    background-color: #FFF;
  }
}

@media screen and (max-width: 768px) {
  #content #leftPane { width: 98%; }
  #content #rightPane{ width: 98%; margin: 0;}
}

@media screen and (max-width: 480px){ /* responsive form settings, when window width is 480px or less */
	#contactform{
	  font-size: 10px; /* decrease form font size */
	}
	#contactform .formcolumn{
	  width: 100%;
	  float: none;
	}
	#contactform .formcolumn:first-of-type{
	  margin-right: 0; /* remove right margin from first form column */
	}
	#contactform .formcolumn:nth-of-type(2){
	  padding-top: 2em; /* add padding to top of 2nd form column, so there is a gap between the 1st and 2nd column */
	}
  /* #sideslides img { max-width: 70%;} */
  #sideslides {height:400px; margin-bottom: 20px;}

}