Use more semantic elements in header and footer.

Also, put the page title in the header.

1 files changed, 12 insertions, 12 deletions

diff --git a/main.css b/main.css
index 9c095e3..b3f7359 100644
--- a/main.css
+++ b/main.css
@@ -70,67 +70,67 @@ header>p {
 	margin: 0px 0px 0px 0px;
 }
 
-div.menu {
+nav {
 	margin: 0px 0px 0px 0px;
 	padding: 0px 72px 0px 72px;
 	background-color: #CC4433;
 	text-align: center;
 }
-div.menu ul {
+nav>ul {
 	list-style-type: none;
 	margin: 0px;
 	padding: 12px 0px 12px 0px;
 }
-div.menu ul li {
+nav>ul>li {
 	display: inline;
 	font-family: sans-serif;
 	font-size: 12pt;
 }
-div.menu ul li a {
+nav>ul>li>a, nav>ul>li>a:visited {
 	color: #FFFFFF;
 	font-weight: bold;
 	font-size: 12pt;
 	text-decoration: none;
 	padding: 12px;
 }
-div.menu ul li a:hover {
+nav>ul>li>a:hover {
 	color: #FFFFAA;
 	background-color: #BB3311;
 	font-weight: bold;
 	text-decoration: none;
 }
 
-div.body {
+body>section {
 	margin: 24px 64px 8px 64px;
 	font-family: serif;
 }
 
-div.footer {
+footer {
 	margin: 32px 8px 8px 8px;
 	padding-top: 8px;
 	font-family: sans-serif;
 	border-top: 1px solid #666666;
 }
-div.footer p.copyright {
+footer p.copyright {
 	margin-top: 0px;
 }
-div.footer p.dates {
+footer p.dates {
 	margin-bottom: 0px;
 }
-div.footer p.web-site {
+footer p.web-site {
 	float: right;
 	margin-top: 0px;
 	margin-bottom: 0px;
 	text-align: right;
 }
-div.footer p.license img {
+footer p.license img {
 	float: left;
 	/*vertical-align: middle;*/
 	margin: 0px 8px 8px 0px;
 }
 
 /* Homepage */
-div.body img.photo {
+body>section img.photo {
 	float: right;
 	margin: 0px 0px 16px 16px;
 	width: 240px;