reset styles for subnav, styling new elements in column

diff --git a/styles.css b/styles.css
index 45aea69..e3014e2 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -9,6 +9,12 @@ body {
     white-space: nowrap;
     overflow: hidden;
     }
+.reset-list, .reset-list li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+    }
 /* Header */
 #logo {
     width: 347px;
@@ -99,19 +105,54 @@ body {
         }
 }
 /* columns */
-#bar, #main {
+#main {
     background: white;
     border-radius: 5px;
-    padding: 1em;
+    padding: 30px;
     }
 #barParent {
     padding-right: 0;
     }
+#column {
+    background: white;
+    border-radius: 5px;
+    }
+#bar {
+    padding: 1em;
+    }
+#sidenav {
+    background-color: #4482ad;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    }
 /* #homeImg */
 #homeImg {
     margin: 1em 0;
     }
 /* Column */
+@media only screen and (max-width: 40.063em) {
+    #sidenav {
+        display: none;
+        }
+    }
+#sidenav {
+    padding: 15px 20px;
+    }
+#sidenav h2 {
+    color: #fffb02;
+    font-size: 18px;
+    }
+#sidenav a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding: 5px;
+    border-radius: 5px;
+    }
+#sidenav a:hover {
+    color: #fffb02;
+    background: #065892;
+    }
 #brochure {
     background: url(assets/brochure.png) no-repeat center top;
     padding-top: 240px;

diff --git a/templates/template.html b/templates/template.html
index da3a3e8..bcfedae 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -89,8 +89,8 @@
                 </div>
             </div>
             <div class="row" data-equalizer>
-                <div class="medium-9 columns medium-push-3">
-                    <section id="main" data-equalizer-watch>
+                <div class="medium-9 columns medium-push-3" data-equalizer-watch>
+                    <section id="main">
                         <div id="toolbox">
                             {toolboxContent:h}
                         </div><!-- /#toolbox -->
@@ -108,20 +108,21 @@
                 </div>
 
                 <div class="medium-3 columns medium-pull-9" id="barParent">
-                <div id="sidenav" flexy:if="sideNav">
-                    {sideNav:h}
-                </div>
-
-                    <section id="bar" data-equalizer-watch>
-                        <div class="row">
-                            <div class="small-6 medium-12 columns">
-                                <a href="#" id="brochure">Download our Brochure</a>
-                            </div>
-                            <div class="small-6 medium-12 columns">
-                                <img src="{mediaBaseURL:h}assets/passport.png" id="passport">
-                            </div>
+                    <div id="column" data-equalizer-watch>
+                        <div id="sidenav" flexy:if="sideNav">
+                            {sideNav:h}
                         </div>
-                    </section>
+                        <section id="bar">
+                            <div class="row">
+                                <div class="small-6 medium-12 columns">
+                                    <a href="#" id="brochure">Download our Brochure</a>
+                                </div>
+                                <div class="small-6 medium-12 columns">
+                                    <img src="{mediaBaseURL:h}assets/passport.png" id="passport">
+                                </div>
+                            </div>
+                        </section>
+                    </div>
                 </div>
             </div>