Style header and footer

Author: ThomasFarstrike

src/index.css

@@ -13,7 +13,7 @@ header {
 }
 
 footer {
-    background-color: #0060a0;
+    background-color: #18222E;
     color: #fff;
     text-align: center;
     padding: 10px;
@@ -37,6 +37,7 @@ footer a:hover {
 }
 
 header .logo {
+    margin: 1em;
     width: 25%;
 }
 
@@ -68,42 +69,23 @@ header h1 {
 }
 
 .menu {
-    background-color: #e6e6e6;
-    float: left;
-    height: 21em;
-    width: 10em;
+    display: inline-block;
+    position: relative;
+    top: -1em;
 }
 
 .menuitem {
-    padding: 0.1em;
-    margin: 0.1em;
+    display: inline;
+    text-align: center;
 }
 
-.menuitem button {
-    background-color: #44aaff;
-    display: inline-block;
-    padding: 10px 20px;
-    color: #fff;
-    text-align: left;
+.menuitem a {
+    color: #CAE2E9;
+    font-weight: bold;
     text-decoration: none;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 4px;
-    width: 100%;
+    padding: 1em 2em 1em 2em;
 }
 
-.menubutton:hover {
-  background-color: #0060a0;
-  color: white;
-}
-
-/* this needs 2 classes, otherwise the .menubutton:hover above will win */
-.menubutton.menubuttonselected {
-  background-color: #0400b0;
-}
-
-
 #column1, #column2 {
     flex: 3;
 }

src/index.html

@@ -23,15 +23,14 @@
     <div class="container">
         <header>
 	   <img src="../images/logo_and_name.png" class="logo"/>
+           <div class="menu">
+               <div class="menuitem"><a href="#" class="menubutton menubuttonselected" onclick="menuChange(event,0)">Connect</a></div>
+               <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,1)">Features</a></div>
+               <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,5)">About</a></div>
+               <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,4)">Donate</a></div>
+               <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,2)">Contact</a></div>
+           </div>
         </header>
-        <div class="menu">
-            <div class="menuitem"><button class="menubutton menubuttonselected" onclick="menuChange(event,0)">Remote</button></div>
-            <div class="menuitem"><button class="menubutton" onclick="menuChange(event,1)">More Features</button></div>
-            <div class="menuitem"><button class="menubutton" onclick="menuChange(event,2)">Contact</button></div>
-            <!-- <div class="menuitem"><button class="menubutton" onclick="menuChange(event,3)">Tip Jar</button></div> -->
-            <div class="menuitem"><button class="menubutton" onclick="menuChange(event,4)">Donate</button></div>
-            <div class="menuitem"><button class="menubutton" onclick="menuChange(event,5)">About</button></div>
-        </div>
         <div class="main-content" id="content0">
             <div class="coverremotecontrol">
                 <a href="https://github.com/PeerViewer/codebase/releases/" class="bluebutton downloadbutton"><div>Download PeerViewer to get started</div></a>