body {font-family:arial;  background-color: #EED6AF; #fff6e7; font-size:90%; }
 
.header {background-color: #fff6e7; border: solid 1px saddlebrown; height:165px; }

 
.main {background-color:  #EED6AF;}

.line1 { border:solid 1px #78502c; margin-left:180px; 
padding-top:0; margin-top:-4px; height:15px; width:215px; background-image:url('emboss2.jpg')}

.line2 { border:solid 1px #78502c; margin-left:197px;  
padding-top:0; margin-top:-4px; height:15px; width:200px; background-image:url('emboss2.jpg')}


red.h1 {text-align:center; color: maroon; font-family: arial; margin-bottom:0; margin-top:0; font-size:130%}
red.h2 {text-align:center; color: maroon; font-family: arial; margin-bottom:0; margin-top:0; font-size:120%}
red.h3 {text-align:center; color: maroon; font-family: arial; font-size: 110%; font-weight:bold}

div#note a span {display: none;}
 
div#note a:hover span {display: block; 
   position: absolute; top: -75px; left: 0; width: 135px;
   padding: 5px; margin: 10px; margin-left:-15px; z-index: 100;
   color: white; background: #4a2f12; border: solid 1px black;
   font: 10px  verdana, sans-serif; text-align: center;}
 
#hdr1  {height:23%; margin-left:5px; margin-top:15px; margin-bottom:3px}
#hdr2  {height:24%;padding-left:8px;}
#graphic { margin-top:10px; margin-left:10px; margin-right:30px; margin-bottom:10px}
 
 #section1 {font-size:110%}

@media screen and (min-width:1024px)
{
.box {float:left;  width:21%;   padding:6px 0px; border: double 3px maroon;}
li.box {list-style:none }
.center {width:800px; margin:auto; text-align:center}
}

@media screen and (min-width:738px) and (max-width:1023px) 
{
.box {float:left;  width:30%;   padding:6px 0px; border: double 3px maroon;}
li.box {list-style:none }
.center {width:738px; margin:auto; text-align:center}
}

@media screen and (min-width:500px) and (max-width:737px) 
{
.box {float:left;  width:48%;   padding:6px 0px; border: double 3px maroon;}
li.box {list-style:none }
.center {width:500px; margin:auto; text-align:center}
}

@media screen and (min-width:380px) and (max-width:499px) 
{
.box {float:left;  width:48%;   padding:6px 0px; border: double 3px maroon;}
li.box {list-style:none }
.center {width:380px; margin:auto; text-align:center}


}

 
@media screen and (min-width:320px) and (max-width:499px) 
{
.box {float:left;  width:90%;   padding:6px 0px; border: double 3px maroon;}
li.box {list-style:none }
.center {width:319px; margin:auto; text-align:center}
 
.header {height:100px}  
#section1 {font-size:90%; font-weight:normal}
ul {margin-left:0; padding-left:0}
#hdr1  { margin-left:0px; margin-top:20px; margin-bottom:3px}
#hdr2  { padding-left:3px;}
#graphic {height:80%; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:10px}

}
 

@media screen and (max-width:319px) 
{
#section1 {font-size:90%; font-weight:normal}
ul {margin-left:0; padding-left:0}
.box {float:left;  width:95%;   padding:6px 0px; border: double 3px maroon;}
li.box {list-style:none }
.center {width:320px; margin:auto; text-align:center}

.header {height:100px}  
#hdr1  { margin-left:0px; margin-top:20px; margin-bottom:3px}
#hdr2  { padding-left:3px;}
#graphic {height:80%; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:10px}
}