diff --git a/site/css/main.css b/site/css/main.css
index 5536646..388f244 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -1,5 +1,51 @@
 /* line 1, ../src/main.scss */
+body > header {
+  margin: 0;
+  color: #CCC;
+  background-color: #333;
+  line-height: 50px;
+  font-weight: bold;
+}
+
+/* line 8, ../src/main.scss */
+nav ul {
+  list-style-type: none;
+}
+
+/* line 11, ../src/main.scss */
+nav ul li {
+  display: inline-block;
+  height: 50px;
+  margin-right: -4px;
+  border-left: solid 1px #555;
+  border-right: solid 1px #111;
+}
+
+/* line 18, ../src/main.scss */
+nav ul li a {
+  color: #CCC;
+  text-decoration: none;
+  display: inline-block;
+  margin-right: 0px;
+  margin-left: 0px;
+  text-shadow: -1px -1px #222, 1px 1px #222;
+  padding: 0 10px;
+  height: 100%;
+}
+
+/* line 26, ../src/main.scss */
+nav ul li a:hover {
+  color: #EEE;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* line 30, ../src/main.scss */
+#main {
+  margin: 80px auto;
+}
+
+/* line 34, ../src/main.scss */
 #container {
-  margin: 0 auto;
+  margin: 80px auto;
   border: 2px solid #800;
 }
diff --git a/site/index.html b/site/index.html
index c8c153e..858f801 100644
--- a/site/index.html
+++ b/site/index.html
@@ -36,27 +36,28 @@
 </head>
 
 <body>
+  <header>
+    <nav id="mainnav">
+        <ul>
+            <li><a href="#">{item 1}</a></li>
+            <li><a href="#">{item 2}</a></li>
+            <li><a href="#">{item 3}</a></li>
+        </ul>
+    </nav>
+  </header>
   <div id="metacontainer">
     <div id="container">
-      <header>
+
+      <div id="main" role="main">
         <hgoup>
           <h1>{title}</h1>
           <h2>{subtitle}</h2>
         </hgroup>
-        <nav id="mainnav">
-            <ul>
-                <li><a href="#">{item 1}</a></li>
-                <li><a href="#">{item 2}</a></li>
-                <li><a href="#">{item 3}</a></li>
-            </ul>
-        </nav>
-      </header>
-      <div id="main" role="main">
         <article>
             <header>
                 <hgroup>
-                    <h2>{title}</h2>
-                    <h3>{subtitle}</h3>
+                    <h2>{article title}</h2>
+                    <h3>{article subtitle}</h3>
                 </hgroup>
             </header>
             <div class="intro">
@@ -75,13 +76,13 @@
             </footer>
         </article>
       </div>
-      <footer>
-        <div id="webpageinfo">
-            {copyright_infos}
-        </div>
-      </footer>
     </div> <!--! end of #container -->
   </div> <!--! end of #metacontainer -->
+  <footer>
+    <div id="webpageinfo">
+        {copyright_infos}
+    </div>
+  </footer>
 
 
   <!-- JavaScript at the bottom for fast page loading -->
diff --git a/site/src/main.scss b/site/src/main.scss
index c6d1436..9a172c0 100644
--- a/site/src/main.scss
+++ b/site/src/main.scss
@@ -1,4 +1,37 @@
+body > header {
+    margin: 0;
+    color: #CCC;
+    background-color: #333;
+    line-height: 50px;
+    font-weight: bold;
+}
+nav ul {
+    list-style-type: none;
+}
+nav ul li { 
+    display: inline-block; 
+    height: 50px;
+    margin-right: -4px;
+    border-left: solid 1px #555;
+    border-right: solid 1px #111;
+}
+nav ul li a { color: #CCC; 
+            text-decoration: none;
+            display: inline-block;
+            margin-right: 0px;
+            margin-left: 0px;
+            text-shadow: -1px -1px #222, 1px 1px #222;
+            padding: 0 10px; 
+            height: 100%; }
+nav ul li a:hover { 
+    color: #EEE;
+    background-color: rgba(255,255,255,0.1);
+}
+#main {
+    margin: 80px auto;
+}
+
 #container {
-    margin: 0 auto;
+    margin: 80px auto;
     border: 2px solid #800;
 }
