/* IE 6 does not support max-width so default to width 100% */
.ie6 img {width:100%;}


/* Basic Desktop styles  ------------------------------------------- */
body			
	{
	background-color:  #66AAEE;
	font-family: arial, verdana, sans-serif;
	}
	
img, iframe, object, embed, video 
	{
	max-width: 100%;
	}
	

/* Container  1000px/16 = 62.58em */
	
section 
	{
	max-width: 50em; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 1%;
	margin-bottom: 2%;
	background-color: #fff;
	border-radius: 15px;
	-moz-box-shadow: 10px 10px 5px #006699;
	-webkit-box-shadow: 10px 10px 5px #006699;
	box-shadow: 10px 10px 5px #006699;
	padding: 1% 1% 1% 1%;
	}	
	

/* Heading styles -- do not go to h4 */
h1	
	{
	font-size: 1.5em;
	}
	
h2	
	{
	font-size: 1.3em;
	}
	
h3	{
	font-size: 1.2em;
	border-top: 2px dotted #000;
	padding-top: 10px;
	padding-bottom: 10px;
	}



/* Link styles -- note: use the .contentlink class for creating an underlined link */
			
a:hover			
	{
	background-color: #9CF;
	}
				

/* Header styles */
header
	{
	padding: 0 0 0 0;
	}
	
header img		{float: left;
				margin-right: 10px;
				border: none}
				
header h1
	{
	font-size: 1.3em;
	font-family: arial, verdana, sans-serif;
	}
header h2
	{
	font-size: 1.1em;
	font-family: arial, verdana, sans-serif;
	}	
	

.medallion	
	{
	float: left;
	padding-right: .5%;
	margin-bottom: 10px;
	}
				
				
/* MISC styles */		
.underline		
	{
	text-decoration: underline;
	}
			
.center	
	{text-align: center;
	}

.clear
	{
	clear: both;
	}			

hr 
	{
	clear: both;
	}


/* Sidebar styles */

.sidebar
	{
	border: 1px solid #006699;
	border-radius: 15px;
	padding: 10px;
	}
	
.sidebar p, .sidebar ul li, 
	{
	font-size: .5em;
	}	
				
.sidebar h1, .sidebar h2		
	{
	text-align: center;
	font-size: 1.1em;
	}



/* Float, border, and misc styles for images */
.imgleft
	{
	float: left;
	margin-right: 1em;
	}
				
.imgright
	{
	float: right;
	margin-left: 1em;
	}
				
.imgborder
	{
	padding: .3em;
	border: 1px solid #ccc;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	}
				
figcaption
	{
	font-size: .8em;
	/*text-align: center;*/
	}
	
.middle				/* For small icons to align with text */
	{
	vertical-align: middle;	
	}			


.smallimgleft		/* For small images to float left on home page and in galleries. This style does NOT get turned off on lower widths */
	{
	float: left; 
	margin-right: .6em; 
	margin-bottom: .6em;
	}
	
.smallimgright		/* For small images to float right on home page and in galleries. This style does NOT get turned off on lower widths */
	{
	float: right; 
	margin-right: .6em; 
	margin-bottom: .6em;
	}
/* FORM STYLES*/


.blocklabel		{width: 13em;
			float: left;
			text-align: right;
			margin-right: 0.5em;
			display: block}

.blocklabel2		{width: 7em;
			float: left;
			text-align: right;
			margin-right: 0.5em;
			display: block}


.blocklabel3		{width: 10em;
			float: left;
			text-align: right;
			margin-right: 0.5em;
			display: block}


.blocklabel4		{width: 10em;
			float: left;
			text-align: left;
			margin-right: 0.5em;
			display: block}


.blocklabel5		{width: 4em;
			float: left;
			text-align: left;
			margin-right: 0.5em;
			display: block}




.submit 		{margin-left: 20em; 
			margin-bottom: 5px}


fieldset		{border: 1px solid #788693}



#formdivs		{margin-left: 10em}



#formdivs div		{margin-top: 20px}
		
							

/* Columns  -- each page is made up of a number of columns using any combination that = 100 */
.col_25
	{
	float: left;	
	width: 21%;
	margin: 0 2% 3% 2%;
	}

.col_33
	{
	float: left;
	width: 29%;
	margin:0 2% 3% 2%;
	}
		
		
.col_40
	{
	float: left;
	width: 36%;
	margin:0 2% 3% 2%;
	}		
		
		
.col_50
	{
	float: left;
	width: 46%;
	margin:0 2% 3% 2%;
	}
		
.col_60
	{
	float: left;
	width: 56%;
	margin:0 2% 3% 2%;
	}		
		
		
.col_75
	{
	width:71%;
  	margin:0 2% 3% 2%;
  	float:left;
	}
		
.col_100
	{
	width:96%;
  	margin:0 2% 3% 2%;
	}		
		
		
/* Footer styles */
footer
	{
	clear: both;
	font-size:.8em;
	text-align: center;
	padding: .5em 0 .5em 0;
	}

/* Basic Desktop styles  ------------------------------------------- */

	
figcaption
	{
	font-size: .8em;
	}


.middle
	{
	vertical-align: middle;
	}
	
	
.floatleft
	{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	}

.floatright
	{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	}
	
	
audio
	{
	clear: left;
	}
	
footer
	{
	clear: both;
	}
	
.clear
	{
	clear: both;
	}
	
.centerline
	{
	clear: both;
	padding-top: 1em;
	text-align: center;
	border-top: 1px solid #66AAEE;
	}
	
li
	{
	padding-bottom: .8em;
	}
								

/* XXXXXXXXXXXXXXXXXXXXXXXX 1st BREAKPOINT set to make ALL widths look good for the elements in the header  */								
								
@media screen and (max-width: 860px) {
	
				
figure
	{
	clear: left;
	}	
	
}

			
			
/* XXXXXXXXXXXXXXXXXXXXXXXX 2nd BREAKPOINT   */	
/* Styles for screen 768 px and lower -- tablet   768px/16 = 48em  */
@media screen and (max-width: 48em) {
	
section
	{
	width: 90%; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 1%;
	margin-bottom: 2%;
	background-color: #fff;
	border-radius: 15px;
	}	

.col_25, .col_33, .col_40, .col_50, .col_60, .col_75, .col_100		/* All columns return at this width and lower to full container width and stop floating  */
	{
	width:95%;
	float: none;
	}	

}




/* XXXXXXXXXXXXXXXXXXXXXXXX 3rd BREAKPOINT   */	
/* Styles for screens 480px and lower -- smartphone   480px/16 = 30em */
@media only screen and (max-width : 30em) {
	
header h1
	{
	font-size: 1em;
	}
		
	
}



/* XXXXXXXXXXXXXXXXXXXXXXXX 4th BREAKPOINT  */	
/* Styles for screens 320px and lower -- smartphone portrait    320px/16 = 20em */
@media only screen and (max-width : 20em) {

/* The navigation bar links now stack into one column */
		


}