styling for various layouts/pages

css/styles.scss

@@ -22,10 +22,15 @@ html {
 }
 
 body {
-    margin-bottom: 60px;
+    margin-bottom: 160px;
     padding-top: 51px;
     font-family: $font-family-sans-serif;
     font-size: 15px;
+    background-color: #fafafa;
+    
+    @media(min-width:768px) {
+        margin-bottom: 101px;
+    }
 }
 
 h1, h2, h3, h4, h5 {
@@ -55,15 +60,17 @@ a {
 
     .navbar-brand {
         font-family: $headings-font-family;
-
-        .navbar-nav > li > a {
-            color: white;
-        }
     }
 
     .navbar-brand, .navbar-nav > li > a {
         color: white;
     }
+
+    .navbar-nav > li > a {
+        &:hover, &:focus {
+            text-decoration: underline;
+        }
+    }
 }
 
 .search-header {
@@ -77,8 +84,67 @@ footer {
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: 60px;
+    height: 160px;
     background-color: $brand-dark-accent;
     color: white;
-    padding: 8px 0;
+    padding: 30px 0;
+
+    @media(min-width:768px) {
+        height: 101px;
+
+        .container {
+            position: relative;
+
+            .social-buttons {
+                position: absolute;
+                right: 0;
+                top: -7px;
+            }
+        }
+    }
+}
+
+.container-content {
+    margin-top: 20px;
+}
+
+.btn-social {
+    display: inline-block;
+    height: 50px;
+    width: 50px;
+    border: 2px solid white;
+    border-radius: 100%;
+    text-align: center;
+    font-size: 20px;
+    line-height: 45px;
+}
+
+.btn-outline {
+    color: white;
+    font-size: 20px;
+    border: solid 2px white;
+    background: transparent;
+    transition: all 0.3s ease-in-out;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+        color: $brand-primary;
+        background: white;
+        border: solid 2px white;
+    }
+}
+
+
+.panel-articles {
+    ul, ol {
+        margin-bottom: 0;
+        margin-left: 0;
+        padding-left: 20px;
+    }
+}
+
+.breadcrumb {
+    border: 1px solid #ddd;
 }