1 files changed, 39 insertions, 53 deletions

diff --git a/assets/main.css b/assets/main.css
index 4c286da..6a0be98 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -7,6 +7,7 @@
   --color-green: #9FD2A5;
   --color-blue: #6CA2A4;
   --color-gray: #EEEEEE;
+  --color-gray-light: #F8F8F8;
   --color-yellow: #FFF09E;
 
   /* Sizes */
@@ -25,9 +26,9 @@
 
 /* Reset */
 
-html { box-sizing: border-box; }
+html { box-sizing: border-box; height: 100%; }
 *, *:before, *:after { box-sizing: inherit; }
-body { margin: 0; }
+body { margin: 0; height: 100%; }
 p { margin: 0; }
 a { color: inherit; text-decoration: none; }
 h1 { font-size: inherit; font-weight: normal; margin: 0; }
@@ -62,9 +63,6 @@ body {
 
 .g-Header {
     width: 100%;
-}
-
-.g-Header__Primary {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -92,37 +90,52 @@ body {
     text-decoration: underline;
 }
 
-.g-Header__Secondary {
+.g-Nav {
+    width: 100%;
     display: flex;
     background-color: var(--color-red);
     color: white;
     overflow-y: auto;
 }
 
-.g-Header__Link {
+.g-Nav__Link {
     padding: var(--size-mouse) var(--size-dog);
 }
 
-.g-Header__Link:hover {
+.g-Nav__Link:hover {
     background-color: var(--color-brown);
 }
 
-.g-Header__Link:focus {
+.g-Nav__Link:focus {
     background-color: var(--color-brown);
 }
 
-.g-Header__Link--Current {
+.g-Nav__Link--Current {
     background-color: var(--color-brown);
 }
 
 .g-Main {
     display: flex;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+}
+
+.g-Aside {
+    height: 100%;
+    display: flex;
     flex-direction: column;
-    align-items: center;
+    background-color: var(--color-gray-light);
+    border-right: 2px solid #DDDDDD;
+    padding: var(--size-horse) var(--size-bear);
+}
+
+.g-Section {
+    display: flex;
     width: 100%;
-    padding: 0 var(--size-bear);
+    flex-direction: column;
+    align-items: center;
     margin: var(--size-horse) 0;
-    overflow-x: hidden;
 }
 
 .g-Title {
@@ -229,10 +242,11 @@ body {
 
 .g-Form__Label {
     margin-bottom: var(--size-mouse);
+    position: relative;
 }
 
 .g-Form__Input {
-    margin-bottom: var(--size-lion);
+    margin: var(--size-mouse) 0 var(--size-lion);
     background-color: white;
     border: 1px solid black;
     height: var(--size-camel);
@@ -245,7 +259,7 @@ body {
 }
 
 .g-Form__Select {
-    margin-bottom: var(--size-lion);
+    margin: var(--size-mouse) 0 var(--size-lion);
     background-color: white;
     border: 1px solid black;
     height: var(--size-camel);
@@ -253,6 +267,13 @@ body {
     width: 100%;
 }
 
+.g-Form__ResetSelect {
+    cursor: pointer;
+    position: absolute;
+    top: -3px;
+    right: 0;
+}
+
 .g-Form__Error {
     color: var(--color-red);
     text-align: center;
@@ -261,18 +282,6 @@ body {
 
 /* Buttons */
 
-.g-Button__Search {
-    cursor: pointer;
-    background-color: var(--color-gray);
-    color: white;
-    border: none;
-    height: var(--size-camel);
-    padding: 0 var(--size-dog);
-    border-top: 1px solid black;
-    border-right: 1px solid black;
-    border-bottom: 1px solid black;
-}
-
 .g-Button__Validate {
     display: flex;
     align-items: center;
@@ -338,33 +347,9 @@ body {
     }
 }
 
-.g-Payments__FrequenciesAndSearch {
-    display: flex;
-    align-items: center;
-}
-
-.g-Payments__Search {
-    display: flex;
-    margin: 0 var(--size-bear) 0 0;
-}
-
-.g-Payments__SearchInput {
-    margin-bottom: 0;
-    width: 150px;
-}
-
-.g-Payments__Frequencies {
+.g-Payments__Filters {
     display: flex;
-    margin: 0 var(--size-dog);
-}
-
-.g-Payments__Frequency {
-    margin: 0 var(--size-mouse);
-}
-
-.g-Payments__Frequency--Selected {
-    color: var(--color-red);
-    font-weight: bold;
+    flex-direction: column;
 }
 
 @media screen and (max-width: 500px) {
@@ -383,6 +368,7 @@ body {
     background-color: var(--color-green);
     border-radius: var(--size-bee);
     color: white;
+    padding: var(--size-bee);
     margin-bottom: var(--size-bear);
     text-align: center;
 }