Introduce new menu classes and navigation templates

public/css/default.css

@@ -19,17 +19,13 @@ body {
 	background: #aaa 0 -50% fixed;
 }
 
-#wrapper, header {
+#wrapper, header .container {
 	width: 95%;
 	min-width: 900px;
 	max-width: 1280px;
 	margin: 0 auto;
 }
 
-header {
-	overflow: auto;
-}
-
 a {
 	color: #963626;
 	text-decoration: none;
@@ -67,27 +63,10 @@ a:hover h1#logo, a:hover h1#logo:before {
 
 /* Navigation
 ---------------*/
-ul#nav {
-	margin: 55px 10px 0 0;
-	padding: 0;
-	float: right;
-	list-style: none;
-}
-ul#nav li {
-	float: left;
-}
-ul#nav li a {
-	color: #fff;
-	display: block;
-	float: left;
-	font: 200 20px 'Press Start 2P', sans-serif;
-	margin: 0 0 0 32px;
-	padding: 10px 0;
-	text-decoration: none;
-	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-}
-ul#nav li a:hover {
-	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
+.nav-divider {
+	height: 2.5rem;
+	border-left: .1rem solid rgba(255,255,255, 0.2);
+	margin: 0 0.5rem;
 }