body {
	margin: 0;
	padding: 0;
   /* it's good practice to zero the margin and padding of the body 
   element to account for differing browser defaults */
	background-image: none;
	background-color:  #F7E4C6;
}

#container {
	width: 94%;
	background-color: #F7E4C6;
   padding: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 26px;
	color: #000000;
	overflow: hidden;
	margin-left: 10px;
}

/*Keep banner full size across top of page and outside of section*/
header {
   margin-top: 10px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: 0px;
   max-width: 100%;
   height: auto;
   text-align: center;
}

/*replaces old main and similar items. used to set size of section equal to container*/
section {
   margin-top: 10px; 
   margin-bottom: 10px;
	   margin-left: 10px;
   padding-right: 3px; 
	padding-left: 10px;
   width: 100	%;
   font-size: 24px;
	color: #000000;
}


/* max width 47%  used to format two columns on pages: index */
article {
   width: 48%;
   height: auto;
   min-width: 320px;
   float: left;
   margin-top: 1px;
   margin-right: 1px;
   margin-bottom: 1px;
   margin-left: 10px;
   padding-left:10px;
	/*
   border: 1px solid #162DE1;
	*/
}

/*short and desc used for crown series-idx articles*/
.artshort {
	max-width: 1.8in;
}

.arttn {
	max-width: 270px;
   margin-top: 10px;
   margin-right: 2px;
   margin-bottom: 10px;
   margin-left: 2px; 
   float: left;
}

.artdesc {
	max-width: 40px;
   margin-top: 10px;
   margin-right: 2px;
   margin-bottom: 10px;
   margin-left: 2px; 
   float: left;
}

/*
 Crown  - transportation some photos sideways - percentage accounts for rotation
of photos
*/

.art2col {
   width: 50%;
   height: auto;
   float: left;
}

/*.
.art4col   (4 column page):    max-width : 20%;     height: auto;     min-width: 320px;     float: left;
   use this class to standardize width of articles within section
   Crown  - models page                Guatay - plant list 
*/

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

/*.
.art5col   (5 column page):    max-width : 10%;     height: auto;     min-width: 320px;     float: left;
   use this class to standardize width of articles within section
   Crown  - models:    ; Friends events
   Guatay - plant list 
*/
.art5col {
   width: 18%;
   min-height: 50px;
   float: left;
   min-width: 140px;
   padding-left: 2px;
    height: 360px; 
}  

/*remove from econ photo pages*/
.size300 {
   max-width: 98%;
   height: auto;
   border: 1px solid #1D6212;
}

/*used to standardize width of articles within section on standard feature pages: econ*/
.artlarge {
   max-width: 98%;
  
}

#calendar {
      width: 100%;
}

ul  {
/*     list-style: none;   /*removes bullets*/*/
	 margin: 0;
     clear: both;
     width: 100%;
}

li {   
      display: block;
      margin-right: -1px;
      margin-bottom:  -1px
		  
}
/*li {   
      display: block;
      float: left;
      width: 19%;
      box-sizing: border-box;
	  border:1px solid #ccc;
      margin-right: -1px;
      margin-bottom:  -1px
}*/
.weekdays  {
     height: 40px;
     /*text-align: left;*/
     /*line-height: 12px;*/  /*changed from 20 Tues tested removal of ul margin -1 no change */    
}

.weekdays li {
	text-align: center;
	text-transform: uppercase;
	line-height:20px;
	border:none !important; /*using important, it overrides any other border styles*/
	padding:10px 6px;
	color:#000;
	font-size:13px;
}

.days li {
     height: 240px; 
}

.date {
	text-align:center;
	margin-bottom:5px;
	padding:5px;
	/*background:#333;*/ /*make date standout with almost black bg and white text*/
	color: #0E28F0;
	width:25px;
/*	border-radius: 50%;*/ 
/*border-raduis 50% is round*/
	float:right;
}

.event {
	clear:both;
	display:block;
	font-size: 13px;
	border-radius: 4px;
	padding: 5px;
	margin-top: 40px;
	margin-bottom: 5px;
	color: black;
	line-height: 14px;
	text-decoration:none;	
}


.event-desc {
	clear: both;
	float: left;
	width: 65%;
	margin: 2px;
	text-align: left;
	font-size: 18px;
	border-bottom: 2px solid #f8f2e7;
}

.event-time {
      float: left;
      width: 26%;
      margin-left: 2px;

}

.emptyday {
     list-style: none;   /*removes bullets*/
/*     width: 20px;*/
     border: 1px solid #ccc;
}

.boxed {
     border: 1px solid #1D6212;  
}

figure {
   float: left;
   max-width: 40%;
   height:auto;

}


   

img {
   border-style: none;
   /*max-width: 30%;
   height:auto;*/
}

/*used in Econ photo pages inside article enclosed by section*/
.imghead{
   margin-top: 10px;
   text-align: center;
   max-width: 98%;
   height: auto;
}


/*max width 98% used to format pictures into two columns within  48# figure not wrapped in article: Econ_plus.php */
.imgdetail{
   margin-top: 10px;
   text-align: center;
  max-width: 90%;
   height: auto;
}

/*used to standardize size of photo within section at top of model pages*/
.imgphoto{
   margin-top: 10px;
   text-align: center;
   max-width: 50%;
   height: auto;
}

/*use for thumbnails*/
.imgtn {
   margin-top: 10px;
   text-align: center;
 max-width: 300px;
height: auto;
}

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

.h4head2 {
   min-width: 15px;
}

/*Used to apply colors to various links within the page*/ 

.hdcolor {
     background-color: #A0D897; 
}

/*table and 3 following classes used for series-idx. Keep until table is removed.*/
table {
   text-align: left;
}

.series{
	max-width: 100%;
	border-collapse:collapse;
	border-top-width: 0px;
}

footer {
   width:100%; 
   font-size: 20px;
	color: #000000;
   align-content: center;
}

h1 {
	text-align: center;
	font-size: 24px;
}

h2 {
	text-align: center;
	font-size: 22px;
}

h3 {
	text-align: center;
	font-size: 20px;
}

h4 {
	text-align: left;
	font-size: 18px;
}

h5 {
	text-align: left;
	font-size: 16px;
}


/* 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;
}

a:visited { color:#800080; 
}
a:hover { color:#008000; 
}
a:active { 
color:blue; 
}

/* Don't underline links */
a:link {
   text-decoration: none;
    }	



nav {
}

nav a {
   text-decoration: none;
   background-color: #8AC852;
   border-radius: 5px;
   height: auto;
   font-size: 18px;
   color: #FBFBFB;
   padding-right: 10px;
   padding-left: 10px;
   display: block;
   padding-bottom: 10px;
   padding-top: 10px;
   border-bottom: thin solid #FFFFFF;
}

/*Tablet */
@media(max-width:768px){
	
	.weekdays, .emptyday {
    display: none;
}
	.days li  {
	height: auto !important;
	width: 100%;
	margin-bottom: -1px;
}
	
	.date {
		float: none;
	}
    
header {
   min-width: 330px;      
   }

a:link {
   color: blue;
   display: block;
   text-decoration: none;
    }	
	

 nav {	font-size: 30px;
    margin-left: 30px;
	}

 nav a {
   display: block;
   text-decoration: none;
	}
}

	
@media (min-width:1024px){
   
 nav {	font-size: 30px;
         margin-left: 30px;
	}
  
   
nav a {
   color: #FFFBFB;
   display: inline-block;
   }
   
a:link {
   color: blue;
   display: inline-block;
   text-decoration: none;   
   }