sleepmap-theme/static/css/main.css: Adding the same menu styling for the footer as for the banner.

1 files changed, 101 insertions, 4 deletions

diff --git a/sleepmap-theme/static/css/main.css b/sleepmap-theme/static/css/main.css
index 4e86a63..3e6ed2f 100644
--- a/sleepmap-theme/static/css/main.css
+++ b/sleepmap-theme/static/css/main.css
@@ -174,9 +174,9 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
     color: #C74350;
     text-shadow: none;
   }
-  
+
   #banner h1 strong {font-size: 0.36em; font-weight: normal;}
-  
+
   /* Main Nav */
   #banner nav {
     background: #000305;
@@ -186,12 +186,11 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
     margin: 0 auto 2em auto;
     padding: 0;
     width: 90%;
-    
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
   }
-  
+
   #banner nav ul ul {
     display:none;
     list-style: none;
@@ -415,6 +414,104 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
     margin: 20px auto;
 }
 
+  #footer nav {
+    background: #000305;
+    font-size: 1.143em;
+    height: 40px;
+    line-height: 30px;
+    margin: 0 auto 2em auto;
+    padding: 0;
+    width: 90%;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+  }
+
+  #footer nav ul ul {
+    display:none;
+    list-style: none;
+    margin: 0 auto;
+  }
+
+  #footer nav ul li:hover > ul {
+    display:block;
+  }
+
+  #footer nav ul {
+    list-style: none;
+    margin: 0 auto;
+    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
+    padding: 0 6px;
+    border-radius: 10px;
+    list-style: none;
+    position: absolute;
+    display: inline-table;
+  }
+
+  #footer nav ul:after {
+    content: ""; clear: both; display: block;
+  }
+
+  #footer nav ul li {
+    float: left;
+  }
+  #footer nav ul li:hover {
+    background: #4b545f;
+    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
+    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
+    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
+  }
+
+  #footer nav ul li a {
+    display: block; 
+    padding: 25px 40px;
+    text-decoration: none;
+  }
+
+  #footer nav ul ul {
+    background: #5f6975; 
+    border-radius: 0px;
+    padding: 0;
+    position: absolute;
+    top: 100%;
+  }
+  #footer nav ul ul li {
+    float: none; 
+    border-top: 1px solid #6b727c;
+    border-bottom: 1px solid #575f6a;
+    position: relative;
+  }
+  #footer nav ul ul li a {
+    padding: 15px 40px;
+    color: #fff;
+  }
+  #footer nav ul ul li:hover {
+    background: #db2d2b;
+  }
+  #footer nav ul ul li a:hover {
+    background: #db2d2b;
+  }
+  #footer nav ul ul ul {
+    position: absolute; left: 100%; top:0;
+  }
+  #footer nav ul ul li.active {
+    background: #db2d2b;
+  }
+
+  #footer nav a:link, #footer nav a:visited {
+    color: #fff;
+    display: inline-block;
+    height: 30px;
+    padding: 5px 1.5em;
+    text-decoration: none;
+  }
+  #footer nav a:hover, #footer nav a:active, #footer nav .active li:link
+  #footer nav .active a:link, #footer nav .active a:visited {
+    background: #C74451;
+    background: #db2d2b;
+    color: #fff;
+    text-shadow: none !important;
+  }
 /***** Sections *****/
 /* Blog */
 .hentry {