@charset "UTF-8";

body{
font-family:sans-serif;
color:#252525;
font-size:16px;
background-color: #fff;
line-height: 1.8;
}

#wrapper{
	width:830px;
	margin:0 auto;
	overflow:hidden;
}

.container{
	width:840px;
	margin: 0 auto;
	padding: 30px;
}

header{
background-color: #eee;
padding: 20px;
margin-bottom: 40px;
border-bottom: 2px solid #4682b4;
}

h1{
color:navy;
font-size:3em;
font-weight:bold;
text-align:center;
}

h2 {
padding: 5px 20px;
background-color: navy;
color: #ffffff;
border-radius: 15px;
margin: 20px 0;
}

footer{
background-color: navy;
color: #ffffff;
text-align: center;
padding: 5px;
margin-top:50px;
}

#wrapper div{
	border:2px solid #b0c4de;
}

#thumb{
	width:400px;
	height:400px;
	float:left;
}

#thumb img{
	width:100%;
}

span{
	width:40px;
	height:40px;
	position:absolute;
	display:none;
	border:1px solid #83828A;
	background:rgba(131, 130, 138, .5);
}

#zoom{
	width:400px;
	height:400px;
	overflow:hidden;
	float:right;
	position:relative;
}

#zoom img{
	position:absolute;
	top:0;
	left:0;
}