*{
	margin:0px;padding:0px;
}
			
body{
	background-image: url(images/background2.png);
	background-color: ;
}
				
#container{
	height: auto;
	max-width: 750px;
	margin: 20px auto;
	border: 1px solid #336600;
	padding: 20px;
	background-image: url(images/background2.jpg);
	overflow: hidden;
}
			
#imagecontainer {     /* contains image logo and thumbs */
	width:90%;
	min-width: ;
	border: 0px solid white;
	background-image: (images/background2.jpg);
	background-color:;
	text-align:center;
	margin: 0 auto;
}

#myimage {             /* main image displayed */                                 
	width: 75%;
	height:auto;
	/* border: 2px solid black; */
	box-shadow: 2px 2px 2px #888888;
}
				
#menu {

	width:.7em;
	color: #62A39F;
	display: none;
	font-size:3.2em;
	text-align: center;
}

#name{
	margin: 4px auto 0 auto;
	width: 100%;
	border: 0px solid black;
	overflow: hidden; 
}

#name p{
	color:#456366;
	font-variant:small-caps;
	letter-spacing: 1.2pt;
	font-family:impact, sans-serif;
	margin: -12% 0 34px 23%;
	font-size: 1.7em;
}
				
#name img{
	width: 95%;
	height: auto;
	border: 0px solid yellow;
}		
				
#nav.js   {
	border: 0px solid red;
	background:#C48F92;
	margin: -13px auto 6px auto;
	width: 100%;
	position: relative;
	z-index:1;
}
			

ul#navigation {                /**this styles the bottom bar**/
	padding: 0px 0 0px 0;
	margin: 0 auto;
	text-align: center;
	}

ul#navigation li{ 
	font-family:impact, sans-serif;
	letter-spacing: 1.2pt; 
	color: #FFF8DC;
	display: inline;
	font-size: 1.em;
	}
	
ul#navigation li a{
				
	margin: .6em;
	color: #fff;
	text-decoration: none;
	float: 0;
	border: style size color;
}
		
ul#navigation li a:hover{
	color:#E9967A;
}                              /**end of bottom bar style**/
			
			
#logo{
	width: 122px;
	height: 122px;
	background-image: url(images/sm_logo.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	margin: 10px 15% 0 15%;
	opacity: .4;
	filter: alpha(opacity = 0.5);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
	border-right: 3px solid white;
	border-bottom: 3px solid white;
	border-top: 2px solid #888888;
	border-left: 2px solid #888888;
}

#thumbscontainer{
	width: 315px;
	padding:1px 0 1px 1px;
	margin: 10px 15% 0 0;
	border: 2px solid #70944D;
	overflow: hidden;
	float: right;
}
				
#thumbscontainer img{    /* styles thumbnail images... */
	width:70px;
	height:53px;
	border-left:1px solid #CDAF95;
	border-top:1px solid #CDAF95;
	border-right:1px solid white;
	border-bottom:1px solid white;
	opacity: 1;
	filter: alpha(opacity = 0.5);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}
				
#thumbscontainer a{
	border: 0px solid red;
	display:block;
	float:left;
	height:55px;
	width: 72px;
	padding:3px;
	margin:0px;
	text-decoration:none;
	opacity: 1.10;
	filter: alpha(opacity = 0.5);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

#thumbscontainer a:hover{
	background-color:brown;
}
			
#thumbscontainer a:active, #thumbscontainer a:focus{
	opacity: .6;
	filter: alpha(opacity = 0.5);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
	background-color:gray;
}

footer {
	background-color: ;
	width: 100%;
	border: 0px solid red;
	margin: 15px 10% 0 59px;
	clear: both;
}
				
footer p{
	font-size: 0.7em;
	font-family: "Comic Sans MS", cursive, sans-serif;
	text-align: ;
	margin-top: 10px;
}
@media screen and (max-width: 690px) {



#logo{
	margin-left: 6%;
}

#thumbscontainer{
	margin-right: 6%;
}

}

@media screen and (max-width: 590px) {
#logo{
	margin-left: 2%;
}

#name p{
margin: -3% 0 24px 7%;
color:#456366;
}

#thumbscontainer{
	margin-right:2%;
}

}


@media screen and (max-width: 520px) {

#logo{
	margin: 8px auto 8px auto;
}

#thumbscontainer{
	width: 314px;
	margin: 2px auto 0 auto;
	padding:0 ;
	float: none;
	clear: both;
}

#name p{
}

#imagecontainer {     /* contains image logo and thumbs */
	width:100%;
	background-image: (images/background2.jpg);
}

}

@media screen and (max-width: 510px) {

#myimage {             /* main image displayed */                                 
	width: 95%;
} 

#name{
	width: 85%;
	border: none;
	float: right;
	margin:15px 0 -23px 0;
}

#menu {
	display: block;
	width: 30px;
	margin: 0 0 16px 0;
}

#nav.js {
	font-size: 2.1em;
	display: none;
	width: 50%;
	overflow: hidden;
}

#name p{

}

#imagecontainer {     /* contains image logo and thumbs */
	width: 100%;
	border: black;
	}
	


#thumbscontainer{
	width: 300px;
	height: 405px;
}

#thumbscontainer img{    /* styles thumbnail images... */
	width:143px;
	height:95px;
	
}

#thumbscontainer a{
	border: 0px solid red;
	display:block;
	float:left;
	height:97px;
	width: 145px;
	padding:2px;
	margin:0px;

}

#container{
	padding: 0;
}

ul#navigation {                /**this styles the bottom bar**/

}

ul#navigation li{ 
display: block;
}
footer p{
	font-size: .6em;
	
}	

}