HTML/boxes.html

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body {
				font-size: 80%;
				font-family: "Courier New", Courier, monospace;
				letter-spacing: 0.15em;
				background-color: #efefef;
			}
			#page {
				max-width: 940px;
				min-width: 720px;
				margin: 10px auto 10px auto;
				padding: 20px;
				border: 4px double #000;
				background-color: #ffffff;
			}
			#logo {
				width: 150px;
				margin: 10px auto 25px auto;
			}
			ul {
				width: 570px;
				padding: 15px;
				margin: 0px auto 0px auto;
				border-top: 2px solid #000;
				border-bottom: 1px solid #000;
				text-align: center;
			}
			li {
				display: inline;
				margin: 0px 3px;
			}
			p {
				text-align: center;
				width: 600px;
				margin: 20px auto 20px auto;
				font-weight: normal;
			}
			a {
				color: #000000;
				text-transform: uppercase;
				text-decoration: none;
				padding: 6px 18px 5 px 18px;
			}
			a:hover, a.on {
				color: #cc3333;
				background-color: #ffffff
			}

		</style>
	</head>
	<body>
		<div id="page">
			<div id="logo">
				<img src="images/logo.gif" alt="The Analog Specialist" />
			</div>
			<ul id="navigation">
				<li><a href="#" class="on">Home</a></li>
				<li><a href="#"></a>For Sale</li>
				<li><a href="#"></a>Repairs</li>
				<li><a href="#"></a>About</li>
				<li><a href="#"></a>Contact</li>
			</ul>
			<p>We specialise in state and repair of classic keyboard, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.</p>
		</div>

	</body>
</html>