/* Navigation classes */
#logonav    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px;}
#logonavs1    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg1.jpg'); background-position:left center;}
#logonavs2    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg2.jpg'); background-position:left center;}
#logonavs3    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg3.jpg'); background-position:left center;}
#logonavs4    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg4.jpg'); background-position:left center;}
#logonavs5    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg5.jpg'); background-position:left center;}
#logonavs6    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg6.jpg'); background-position:left 350px;}
#logonavs7    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg7.jpg'); background-position:left center;}
#logonavs8    {position:relative; width: 100%; max-width: 1200px; min-height:50px; overflow:hidden;
             z-index: 100; padding:30px 20px 20px 10px; background-image:url('images/hmpg8.jpg'); background-position:left center;}
             
#logo { position: relative; float:left; font-family: 'Roboto', sans-serif; font-size: 32px;
      color: #ffffff; margin: 0px 20px 15px 20px; line-height: 0.85;
      padding: 5px 10px; border-radius: 10px;}
#logo a {color: #ffffff; }
.nav        { position: relative; float:left; font-family: 'Roboto', sans-serif; font-size: 18px;
            color: #ffffff; margin: 15px 0px 5px 15px; min-width: 50px; background-color:rgba(117,188,214,.75);
            padding: 5px 7px 5px 7px; border-radius: 10px; box-shadow: 5px 5px 3px grey;}
.navS        { position: relative; float:left; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight:normal;
            color: #024082; margin: 15px 10px 15px 10px; min-width: 50px; background-color:rgba(117,188,214,.75);
            padding: 5px 7px 5px 7px; border-radius: 10px; box-shadow: 5px 5px 3px grey;}
                        
.pressed { background-color:rgba(220,220,220,.75); }         
            
.nav a	   { color: #ffffff; font-weight: normal; text-decoration: none; font-size: 17px; 
             font-family: Verdana, Arial, Helvetica, sans-serif; font-style:normal; }
.nav:hover { color: #d32a5f; }
.tag {font-style:italic; font-size: 23px;}

/* Main body classes */
body { margin: 0px; padding: 0px; background-color:#b8d5ea; 
	font-family: 'Roboto Slab', serif; font-size: 15px; color: #000000;
	font-style: normal;	font-weight: normal; }

#outer {position:relative; max-width: 1200px; margin: 0px auto; overflow:hidden; background-color:#eeeeee; min-height: 600px; }

#content h1 { margin: 25px 10px 5px 30px;  }
#contentHL { position:relative; float: left; width: 50%; z-index: 1000; margin: 10px 0px 80px 30px; padding-left: 20px;
           background-color:rgba(255,255,255,.75); border-radius: 10px; box-shadow: 5px 5px 3px grey;}

#contentSL { position:relative; float:left; margin: 20px 0px 60px 13%; overflow:hidden;
           width: 60%;  }
           
#contentSL img { width: 100%; margin: 10px 0px;}

#contentSR { position:relative; float:right; width: 45%; text-align:center; margin-bottom: 20px; }
#contentSR img {  width:70%; max-width: 380px; }

.concern { position:relative; float:left; margin: 20px 0px 20px 25px; padding: 10px 0px 10px 10px;
         font-family: 'Roboto', sans-serif; font-size: 19px; color: #1f5549; color:#ffffff;
         width: 88%; background-color: rgba(119,147,60); border-radius: 10px; box-shadow: 5px 5px 3px grey; }
.concern ul {margin: 0px 10px 15px 10px; padding-left: 20px;}
         
#AnimCon { position:absolute; max-width: 1200px; min-width: 1200px; top: 0px; left:0px;}
#AnimDef { position:absolute; width: 100%; }
           
#cpy {position:absolute; bottom: -15px; min-height: 20px; width: 100%; background-color:#779ab2; 
     font-family: Verdana, Arial, Helvetica, sans-serif; color: #27333b; font-size: 13px;
     padding: 12px 0px 10px 0px; text-align:center; margin: -24px 0px 15px 0px; z-index: 100;}        

a {	color: #a15029; font-weight: bold; text-decoration: none;}
a:hover { color: #d32a5f; text-decoration: none;}

img {border:0px none; margin:0px; padding:0px; }
.imgright {float: right; margin: 10px 0px 10px 10px; }
.imgleft {float: left; margin: 5px 15px 15px 0px; }
.ltimage { position:relative; float: left; margin: 20px 0px 0px 60px; display:block; }
.sqbut {display: inline-block; font-size: 18px; text-align:center;  min-width: 165px;
    background-color: #7fb3c1; border-radius: 8px; box-shadow: 0 0 0 2px rgba(0,0,0,.1) inset;
    color:#eeeeee; padding:5px 0px; }

table { border-spacing: 0px; border: 0px; border-collapse:collapse; }
td {   vertical-align:top; }
p  {   margin: 5px 15px 15px 0px; }
ul {   margin: 0px 10px 15px 20px; padding-left: 20px;}
ol {   margin: 0px 10px 15px 20px; padding-left: 20px;}
li {   margin: 3px 0px 3px 0px; }
h1 { font-family: 'Roboto', sans-serif; font-size: 20px; color: #1f5549;
	margin: 25px 10px 5px 0px;	font-weight: bold; }
h2 { font-family: 'Roboto', sans-serif; font-size: 18px; color: #1f5549;
	margin: 15px 10px 5px 0px; font-weight: bold; }
h3 { font-family: 'Roboto', sans-serif; font-size: 16px; color: #1f5549;
	margin: 5px 10px 5px 0px; font-weight: bold; }
h4 { font-family: 'Roboto', sans-serif; font-size: 14px; color: #1f5549;
	margin: 5px 10px 5px 0px; text-align:right; font-weight: bold; }
h5 { font-family: 'Roboto', sans-serif; font-size: 12px; color: #1f5549;
    margin: 5px 10px 0px 0px; text-align:right; font-weight: bold; }
h6 { font-family: 'Roboto', sans-serif; font-size: 12px; color: #1f5549;
    margin: 10px 30px 10px 0px; text-align:right; font-weight: bold; }
hr { background-color:#791e18; color: #791e18; height: 3px; width: 75%; margin: 25px 60px 25px 0px; border:none; }

.indent { padding-left:30px;: }    
.quote { font-style:italic; color:#1f5549; margin: 40px 10px 20px 60px;  }
.line {	border-top-color: #791e18; border-right-color: #791e18;
	border-bottom-color: #791e18; border-left-color: #791e18; }
.next {	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
    font-style: normal;	font-weight: bold; text-align: right; color: #791e18; }
.prev { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
    font-style: normal;	font-weight: bold; text-align: left; color: #791e18; }
.ftnote {font-size:11px; color }

@media only screen and (max-width: 900px) {
       #contentHL {  width: 85%; }
       #contentSL {  width: 85%; }
       #outer { min-height: 800px; }
       #AnimCon { position:fixed; }
       #AnimDef { position:fixed; }

}