body {
font-family: "Verdana";    
color: #602020;    
background: #B6DAD8; 
}
.preamble {
font-size: 80%;
text-align: justify;}

/* Ever what to know how to put a box around a page ... here it is
Padding == the space between the line border and the content
Margin == the space between the line border and the outside
Display  = specifies how the element will be seen */

.mainbox {
padding: 20px;         
margin: 10pt;     
display: block;       
width: 95%;       
background: #B6DAD8;     
border: 2pt solid #80AF94;}

/* 3 Headings at the page top 
Float = sets the direction of the element to end up - other things go beside it not below it */
.logo {
float: left;         
font-size: 300%;      
font-style: italic bold;   
font-family: "Times New Roman"; 
float: left;   
font-size: 3em;   
font-style: italic;   
margin: auto auto auto 15px;}

/* margin = setting the length of the line in this case the left margin starts at 50% of the screen */
.OurName {
border-bottom: thin solid #80AF94;      
color: #602020;      
font-size: 180%;      
margin: 0pt 0pt 0pt 60%;      
text-align: right;}

.OurGame {
color:  #602020;      
font-size: 90%;      
font-style: italic;     
text-align: right;}

/* Basically all this does is set the blue box on the screen 
margin = setting the yellow space around the blue box top; right; bottom; left;
padding = setting the blue space inside the blue box  top; right; bottom; left; */
.headmenu {
background: #80AF94;
border: solid 2px rgb(165,207,165);         
margin: 5pt 0pt 5pt 0pt;              
padding: 3pt 0pt 5pt 0pt;              
width: 100%;
align: middle;}

/* links at the page top 
makes a solid border around the link 2px wide
margin = setting the blue space around the  boxs */
a.hls:link,     a.hls:visited,     a.hls:active {
background: rgb(91,131,104);      
border: solid 2px rgb(165,207,165);      
color: white;      
display: block;                 
float: left;      
font-size: 80%;      
margin: 5px;      
padding: 2px;      
text-align: center;      
text-decoration: none;      
vertical-align: middle;      
width: 15%;}

a.hlst:link,     a.hlst:visited,     a.hlst:active {
background: rgb(91,131,104);      
border: solid 2px rgb(165,207,165);      
color: white;      
display: block;                 
float: left;      
font-size: 80%;      
margin: 5px;      
padding: 2px;      
text-align: center;      
text-decoration: none;      
vertical-align: middle;      
width: 18.75%;}



/*what happens when you mouse hovers over the link*/
a.hls:hover {
background: #80AF94;      
color: white;      
font-style: italic;}

a.hlst:hover {
background: #80AF94;      
color: white;      
font-style: italic;}

.heading {
background: #80AF94;               
font-weight: bold;     
color: white;   
margin: 5pt 0pt 5pt 0pt;      
padding: 3pt 0pt 3pt 5pt;}

.sub {
background: #80AF94; 
color: white;     
font-size: 85%;   
font-weight: bold;
text-align: center;   
margin: 5pt 90% 5pt 5pt;  
padding: 3pt 0pt 2pt 0pt;}


.sub1 {
background: #80AF94; 
color: white;     
font-size: 83%;   
font-weight: bold;
margin: 5pt 50% 5pt 5pt;  
padding: 3pt 0pt 2pt 20pt;}

/* Using the product class I added a blue background and changed the name  this gives me a subtly different class to use*/
.box {
background:  rgb(165,207,165); 
color: rgb(91,131,104); 
font-size: 75%;}
/*These set the style for the table, changing the defaults for the Table, the row and the cell*/
table {margin-left: 2em;}
th {border: solid 2px #80AF94;   border-collapse:collapse;}
td {  font-size: 90%;; text-align: left;}


/*For finer tuning of the table a class .table. was created to set specific feature, these could have been included in the table style above if you wanted every table to be the same*/ 
.table {
border: solid 2px #80AF94;   
border-collapse:collapse;   
width: 95%;}

/*This sets those little X's so they are aligned in the middle of the cell*/
.x {  font-size: 90%; text-align: center;}

.crest{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 13%;   
height: 1.5em;   
padding:3px 0 3px .5em;
vertical-align: top;
text-align: center;}

.header { 
border: solid 2px #80AF94;   
font-size: 70%;    
width: 10%;   
height: 1.5em;   
padding:3px 0 3px .5em;
vertical-align: top;}

.info{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 23%;   
height: 1.5em;   
padding:3px 0 3px .5em;
vertical-align: top;}

.lname{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 20%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.fname { 
border: solid 2px #80AF94;   
font-size: 70%;    
width: 15%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.service { 
border: solid 2px #80AF94;   
font-size: 70%;    
width: 10%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.trade { 
border: solid 2px #80AF94;   
font-size: 70%;    
width: 15%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.tourdate { 
border: solid 2px #80AF94;   
font-size: 70%;    
width: 10%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.dob{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 10%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.dod{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 10%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.age{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 10%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;
}

.info{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 20%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.locate{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 20%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.email{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 25%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.phone{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 11%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.photo{
border: solid 2px #80AF94;    
font-size: 70%;   
width: 7%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

.posting{
border: solid 2px #80AF94;    
font-size: 60%;   
width: 30%;   
height: 1.50em;   
padding:3px 0 3px .5em;
vertical-align: middle;}

div.bottomstyle {
clear: both;   
border-top: 1px solid #80AF94;
font-variant: normal;   
font-size:55%;   
margin: 0px;   
padding: 5px 1em;}


div.udtg {
font-size: 55%; text-align: center;}
padding: 5px 1em;}

input.greenbtn {
		font-family: Lucida Grande, Bernhard Fasion BT, Comic Sans MS,;
		color: #DDEBDE;
		font-weight: bold; 
		font-size: 10px; 
		text-align: center;
		background-image:url('../images/shortfade.jpg');
		background-color: #80AF94; 
		cursor: hand;}

input.topbtn {
		font-family: Lucida Grande, Bernhard Fasion BT, Comic Sans MS,;
		color: white;
		font-weight: bold; 
		font-size: 14px; 
		text-align: center;
		background-image:url('../images/top.jpg');
		background-color: #80AF94; 
		cursor: hand;}
     
/* End of style section.*/

/* Temp stuff.*/

.floatright
{
float: right;
width: 169px;
margin: 0 0 10px 10px;
background-color: #fff;
padding: 10px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}

div.floatright img
{
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
}

p { margin-top: 0; }

/* Floating Buttons */

ul#navigation
{
list-style-type: none;
margin: 0;
padding: .5em 0;
}

ul#navigation li a
{
display: block;
width: 5em;
color: #FFF;
background-color: #80AF94;
margin: 5pt 5pt 5pt 5pt;  
padding: 3pt 0pt 2pt 0pt;
font-size: 80%;   
font-weight: bold;
  
/*padding: .2em 0;*/
text-align: center;
text-decoration: none;
}

ul#navigation li a:hover
{
color: #FFF;
background-color: rgb(91,131,104);
}

ul#navigation .left { float: left; }
ul#navigation .right { float: right; }