* {box-sizing: border-box;}
header, nav, main, footer {display: block;}
body 	{background-color: #003366;      							/* color 003366 federal blue 	wrapper background color */
		 color: #003366;
		 font-family: Arial, Verdana, sans-serif;}
header	{background-color: #CCFFFF;									/* color ccffff light blue 		header background color */
		 background-image: url(images/yorkrivergrasssmall.jpg); 
		 background-repeat: no-repeat;
		 background-size: 1350px 155px;
		 background-position: right;
		 padding-bottom: 2em;
}
header span {font-size: 0.9em;
			 float: left;
			 padding: 0.5em 2em;}
header h1 {text-indent: 4.05em;
		   font-size: 2.5em;}
.skip {font-size: 0.9em;}
h1		{padding-top: 50px;
		 padding-left: 2em;}
h4		{margin-top: 0;
		 text-align: center;}

nav		{font-weight: bold;
		 width: 100%;
/*		 padding: 1em; */
/*		 margin: 1em; */
/*		 padding-bottom: 1em;    only if catch phrase is in nav */
		 text-align: center;
		 background-color: #d0cc95; /* #6699cc*/						/* color d0cc95	dark yellow/tan		nav area background color */
}
nav p   {font-size: 0.8em;
	     text-align: center;}
nav a	{text-decoration: none;
		 display: inline-block;
		 text-align: center;
		 font-weight: bold;
/*		 border: 3px outset #CCCCCC;   */						/* color cccccc gray 				nav button border */
		 border: 3px solid #d0cc95 ; /* ##6699cc*/				/* color ffffcc light yellow		nav button border same as background */
/*		 background-color:  #D0CC95; 	*/						/* color d0cc95	dark yellow/tan		nav button background color */
		 padding: 0.5em 1em;      
/*		 margin-bottom: 1em;  */
		 }
nav a:link 	  {color: #000000; /*#FFFFCC;*/}					/* color ffffcc light yellow	nav button text color (without visit or hover) */

nav a:visited {color: #000000;}									/* color 000000 black			nav button visited text color*/
nav a:hover   {color: #6699CC;									/* color 6699cc medium blue		nav button hover text color*/
/*			   border: 3px inset #333333; */					/* color 333333 lighter black	nav button hover border color */
			   border: 3px solid #ffffcc;
			   background-color: #ffffcc; 						/* color ffffcc	light yellow	nav button hover background color */
}
nav ul {list-style-type: none;
		padding-left: 0px;}
#message {background-color: #FFFFFF; /* #d0cc95; */				/* color ffffff white 			comment box background color */
}
#message a:hover {color: #000000;}		
#message a:link  {color: #000000;}
		
main	{padding: 1em 6em;
/*		 padding-left: 6em;
		 padding-right: 4em; */
/*		 margin-left: 75px; */
/*		 padding-top: 1em; */
		 }
main dl{padding: 0 2em;
}
main dl dt{font-weight: bold;}
main ol li{margin: 1em;}
#map {width: 800px;
	  height: 600px;
}
#map iframe {position: absolute;
	   width: 920px; 
	   height: 510px;
	   top: 320px; 
	   left: 290px; 
}
table {margin: auto;
	   border: 1px solid #003366;
	   width: 100%;						
	   border-collapse: collapse;
	   margin-bottom: 1em;
}
td, th {border: 1px solid #003366;
	    padding: 0.5em;
}
tr:nth-of-type(even) {background-color: #F5F5F5;}	/* alternate table line colors with white and light yellow for better legibility across table */
tr:nth-of-type(odd) {background-color: #FFFFCC;}
#locations {width: 85%;
			margin: 0 0;
		    font-size: 90%;
}
caption {margin: 1em;
		 font-weight: bold;
		 font-size: 120%;
}
form { font-family: Arial, sans-serif;
       padding: 10px;
	   width: 350px;}
label { width: 150px;
	    text-align: right; 
	    padding-right: 10px;
	    margin-top: 10px; }
input, textarea { margin-top: 10px; 
                  display: block; } 
#iss	{display:inline-block; 
		 border: 1px solid #CCC; 
		 border-radius: 6px; 
		 -webkit-border-radius: 6px; 
		 -o-border-radius: 6px;
		 position: relative; 
		 overflow: hidden; 
		 width: 310px; 
		 left: 100px; 
		 height: 450px;}
#mySubmit { margin-left: 260px; }
#gallery {position: relative;
		  left: -50px;}
#gallery ul {width: 450px;
			 list-style-type: none;}
#gallery li {display: inline-block;
			 padding: 8px;}
#gallery img {border-style: none;}
#gallery a {text-decoration: none;
			color: #003366;
			font-weight: bold;}
#gallery span {display:none}
#gallery a:hover span{display: block; 
					  position: absolute;
					  top: 100px; 
					  left: 500px; 
					  text-align:center;}
footer	{background-color: #99CCCC;		/* footer background color */
		 color: #003366;				/* footer text color */
		 padding: 1em;
		 font-size: .90em;
		 font-style: italic;
		 text-align: center;
		 clear: both;
}
footer a {color: #003366;}
.studio {font-style: italic;}
.floatright {float: right;
			margin: 0 1em 2em 4em;
			max-width: 300px;
			height: auto;}
#issfloatright {float: right;
			margin: 1em;
			max-width: 500px;
			height: auto;}
figcaption {text-align: center;}
.floatleft {float: left;
			margin: 3em 0 3em 2em;}
.clear {clear: both;}
#wrapper {width: 80%;
		  background-color: #FFFFCC;
		  min-width: 1200px;
		  max-width: 1480px;
		  margin-right: auto;
		  margin-left: auto;}
#mobile {display: none;}
#desktop {display: inline;}
@media only screen and (max-width: 1024px){
	body {margin: 0;
		  padding: 0;}
	#wrapper {width: 100%;
			  min-width: 0;
			  margin: 0;
			  padding: 0;}
	header {padding-top: 1px;
			background-image: url(images/yorkrivergrasstablet.jpg); }
	header h1 {text-indent: 0.5em; }
	nav {float: none;
		 width: auto;
		 padding-left: 2em;
		 background-color: #d0cc95;
		 }
	nav a {padding: 0.2em;
		   margin-left: 0.3em;
/*		   float: left; */
		   width: 23%;}
	main {padding: 2.5em 1em;
		  margin: 0;
		  font-size: 90%;
		  clear: both;}	   
	main ul {margin-left: 2em;}
	main ol li{margin: 0;}
	h2, h3, p, dl {padding:0 2em;}
	#map iframe {position: absolute;
				width: 700px; 
				height: 400px;
				top: 350px; 
				left: 50px; 
}	
/*	.floatleft {display: none;}*/
	.floatright {margin: 0 2em 1em 2em;}
	.clear {padding-left: 2em;}
}
@media only all and (max-width: 768px){
	header {background-image: url(images/yorkrivergrasstablet.jpg); 
			background-repeat: no-repeat;
			background-size: 450px 155px;
			background-position: right;
			padding-bottom: 1em;}
	header h1 {text-indent: 0.5em;
		       font-size: 1.5em;
			   padding-left: 1em;}
	h1 {font-size: 1em;
		padding: 0.25em;
		width: 85%;
		text-align: left;}
	nav, nav ul, nav li {padding: 0;}       /* might need this back in with hamburger menu? */
	nav a {display: inline-block;
		   font-size: 85%;
		   margin-left: 0.5em;}
	nav p {display: none;}	   
	main {padding-top: 0;}
	.floatleft {display: none;}
	.floatright {float: none;
				max-width: 260px;
				height: auto;
				margin: 0 0.5em 1em 0.5em;}  /*   don't need margin if display: none is chosen  */
/*				display: none;}         allow image with hotspot to display on all screen sizes */
	#issfloatright {display: none;}
	#map iframe {position: absolute;
	   width: 300px; 
	   height: 400px;
	   top: 230px; 
	   left: 25px; 
}	
	#iss {display:inline-block; 
		 border: 1px solid #CCC; 
		 border-radius: 6px; 
		 -webkit-border-radius: 6px; 
		 -o-border-radius: 6px;
		 position: relative; 
		 overflow: hidden; 
		 width: 310px; 
		 left: 0px; 
		 height: 450px;}
		
	#gallery ul {width: 350px;
				list-style-type: none;}
	#gallery a:hover span{display: none;}
	.hover {display:none;}
	footer {padding: 0.5em;
			margin: 0;}
	#mobile {display: inline;}		
	#desktop {display: none;}
}