body {	
	margin: 0; /* it's good practice to zero the margin and padding of the body element to 
	account for differing browser defaults */
	padding: 0;
	/*text-align: center; /* this centers the container in IE 5* browsers. 
	The text is then set to the left aligned default in the #container selector */	
   background-color: #FFE8D4;
}

.container {
   font: 100% Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: #000;
   margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
   text-align: left;
   background-color: #FFE8D4;
   padding-left: 40px;
   max-width: 1024px;	
}

header {
   margin-top: 10px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: 0px;
   min-height: 270px;
}

/*used to format banner inside header*/
.banname{
   width: 30%;
}

section {
   background-color: #FFE8D4;
	margin-top:10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	padding-left: 20px;
   max-width: 100%;
}


article {
   min-width: 18%;   
   margin-top: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   margin-left: 20px;
   float: left;
 
}

/*.art1col   (single column page):    max-width: 98%;     height: auto;
                use this class to standardize wide of  articles within section on 
               Crown  - standard feature and  photo  pages
               Guatay - about, map */

.art1col {
   width: 100%;
    height: auto;
   
}

/*2 column page:    Guatay Index, About contact us, header        Crown Index, 
    use this class to standardize width of articles within section
*/

.art2col {
   width: 45%;
    height: auto;
   
}

/*
.art3col   (3 column page):    max-width :  28%;     height: auto;     min-width: 320px;     float: left;
   use this class to standardize width of articles within section
*/



/*(4 column page): Guatay, Plant List
    use this class to standardize width of articles within section
                Crown  - 
               Guatay - plant list */

.art4col {
   width: 22%;
   height: 350px;
   float: left;
}   

/*.
.art5col   (5 column page):    max-width : 18%;     height: auto;     min-width: 320px;     float: left;
   use this class to standardize width of articles within section*/
*/
.art5col {
   width: 18%;
   height: auto;
}   


img {
   border-style: none;
   align-text: center;
   
}

.imghead{
   margin-top: 10px;
   width: 50%;
   height: auto;
   float: left;
}


.imgcol2{
   margin-top: 10px;
   max-width: 100%;
}

.h4head {
   float: left;
   margin-top: 6px;
   margin-right: 6px;
   margin-bottom: 6px;
   margin-left: 6px;
   font-size: 18px;
   max-width: 100%;
}

.h4head2 {
   min-width: 15px;
}

.hdcolor {
     background-color: #1D6212; 
}

.boxed {
   border: thick  #473F3F;  
}

figure {
   width: 300px;  
   margin: 30px;
   float: left;
   }
   

nav a {
   display: block;
   text-decoration: none;
   background-color: #1D6212;
   border-radius: 5px;
   margin-right: 10px;
   margin-top: 5px;
   margin-bottom: 5px;
   height: auto;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   font-size: 18px;
   color: #FBFBFB;
}

nav {

}




a:link {
   color: #FBFBFB;
   background-color: #1D6212;
}
a:hover {
   color: #78D50A;
}

a:visited {
   color: #FBFBFB;
}

a:active {
   color: #FBFBFB;
}


footer {
   width:100%; 
   align-content: center;
}

/* Miscellaneous classes for reuse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*Mobile*/
@media (min-width:320px){	
   nav {
	font-size: 20px;
	text-decoration: none;
	}

   nav a {
   display: block;
   text-decoration: none;
   margin-top: 8px;
	}
a:link {
   color: #FFFBFB;
   display: block;
   text-decoration: none;
   }
   header {
   min-width: 330px;
    
      
   }
  

}	

/*Tablet*/
@media (min-width:425px){
   nav a {
   display: inline-block;
   text-decoration: none;
	}
a:link {
   color: #FFFBFB;
   display: inline;
   text-decoration: none;
    }	
header {

}

}
	
@media (min-width:1020px){
	 nav a {
   color: #FFFBFB;
   display: inline-block;
   text-decoration: none;
	}
   header {

}

}
.class {
}

@media screen{
}