body {
background-image: url("../images/backgroundimage.jpg"); 
margin: 0; padding: 0; 
}

#title {
position: absolute; top: 10px; left: 50%; 
}

#books {
position: absolute; top: 0%; left: 20%; 
padding: 0,5,0 10; z-index: 1; 
}

#navigation li {
display: inline; 
list-style-type: none; 
margin: 0;
}

#navigation ul {
list-style-type: none; 
padding: 0 60px 6px 0; 
margin: 0; 
width: auto; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 150%; }

#navigation a {
text-decoration: none; 
font-weight: bold;
margin-right: 60px;
margin-left: 90px;
padding: 5px 12px 3px 10px; 
background-color: #666666; 
color: #ffffff; 
border-top: 4px solid #dddddd; 
border-right: 4px solid #333333; 
border-bottom: 4px solid #333333; 
border-left: 4px solid #dddddd; 
height: 23px; 
width: 155px; 
}

#navigation a:hover {
background-color: #888888; 
}

#navigation a:active {
padding: 4px 13px 4px 9px; 
background-color: #444444; 
color: #eeeeee; 
border-top: 1px solid #333333; 
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333; 
}

.photo {
float: left; 
margin: 0 24px 0 0; 
}

.photo ul {
list-style-type: none; 
}

.photo li {
display: inline; 
}

#content {
position: absolute; top: 263px; left: 20%;
width: 950px; background-color: #ffffff; 
padding: 10px; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #000000; 
}

#copyright {
 
font: 15px "Verdana", "Arial", sans-serif; 
color: #000000;
}


@media only screen and (max-device-width: 960px) {
		body {
		background-image: none;
		}
		
		div #books {
		position: absolute; top: 0%; left: 2px;
		}

		div #content {
		position: absolute; top: 263px; left: 2px;
background-color: #ffffff; padding: 10px; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #000000; font-size: 3em;
		}

		div #content {
			float: none;
			width: 100%;
		}

		div #navigation {
			width: 100px; 
			padding: 10px; float: none;
		}
	}