From 9b6ab1dcbaded9a6a71d2f46a021f7101ea51878 Mon Sep 17 00:00:00 2001
From: ian <ian@gaslightmedia.com>
Date: Fri, 17 Apr 2015 14:58:30 -0400
Subject: [PATCH] Updating theme

---
 root/scss/_structure.scss | 1069 +++++++++++++++++++++++++------------
 1 file changed, 741 insertions(+), 328 deletions(-)

diff --git a/root/scss/_structure.scss b/root/scss/_structure.scss
index d366264..163febb 100644
--- a/root/scss/_structure.scss
+++ b/root/scss/_structure.scss
@@ -1,381 +1,794 @@
+//1. Body
+//2. Header
+//3. Fonts
+//4. Top Bar
+//5. Off-Canvas
+//6. Main
+//7. Slideshow
+//8. Blog 
+//9. Sidebar
+//10. Links
+//11. Footer
+//12. Copyright
+
+//1. Body
 body {
-    background: #e6e7e9;
-    #page-wrapper {
-        .shadow-wrapper {
-            margin: 0 auto;
-            background: $white;
-            box-shadow: 0 5px 10px 0 grey;
-            max-width: 1000px;
-            padding-top: rem-calc(20);
-            header {
-                a {
-                    position: relative;
-                    margin: 0 .643rem;
-                    img {
-                        padding-bottom: rem-calc(20);
-                    }
-                    &#contact {
-                        color: $green;
-                        text-decoration: underline;
-                        font-size: rem-calc(15);
-                    }
-                    &#staff {
-                        color: $white;
-                        background: #eeab2c;
-                        padding: 0 rem-calc(10);
-                        font-size: rem-calc(15);
-                    }
+    background: url(../assets/bkgrd.jpg) no-repeat fixed;
+    background-size: cover;
+    .shadow-wrapper {
+        margin: 0 auto;
+        background: $white;
+        box-shadow: 0 0 15px -6px $black;
+        -ms-box-shadow: 0 0 15px -6px $black;
+        -moz-box-shadow: 0 0 15px -6px $black;
+        -webkit-box-shadow: 0 0 15px -6px $black;
+        
+        max-width: 1000px;
+        padding-top: rem-calc(20);
+    }
+}
+//End of Body
 
+//2. Header
+header {
+    height: auto;
+    & #logo {
+        img {
+            margin-bottom: 15px;
+        }
+    }
+    & .search {
+        input {
+            height: 20px;
+            width: 167px;
+            padding: 0 8px;
+            margin: 13px 0px 0px 18px;
+            border-radius: 3px;
+            font-size: 10px;
+            color: $black;
+            display: inline-block;
+        }
+        a {
+            &.magnifying-glass {
+                font-size: 10em; /* This controls the size. */ 
+                display: inline-block; 
+                width: rem-calc(10); 
+                height: rem-calc(10);
+                border: rem-calc(2) solid $dark-blue; 
+                position: relative; 
+                border-radius: 0.35em;
+                margin: 0 0 0 -25px;
+                &:before {
+                    content: ""; 
+                    display: inline-block; 
+                    position: absolute; 
+                    right: rem-calc(-7); 
+                    bottom: rem-calc(-4); 
+                    border-width: 0; 
+                    background: $dark-blue; 
+                    width: rem-calc(8); 
+                    height: rem-calc(2); 
+                    -webkit-transform: rotate(45deg); 
+                    -moz-transform: rotate(45deg);
+                    -ms-transform: rotate(45deg);
+                    transform: rotate(45deg);
                 }
-                #logo_wrapper {
-                    @media #{$small-only} {
-                        text-align: center;
-                    }
-                }
-                #top_search {
-                    position: relative;
-                    float: right;
-                    width: 100%;
-                    max-width: 12rem;
-                    #searchform {
-                        position: relative;
-                    }
-                    a {
-                        margin: 0;
-                        position: absolute;
-                        right: rem-calc(2);
-                        top: rem-calc(12);
-                        width: rem-calc(20);
-                        height: rem-calc(20);
-                        padding: 1px;
-                    }
-                    .search-button {
-                        width: 17px;
-                        height: 17px;
-                        background-image: url("../assets/search_button.png");
-                        background-size: cover;
-                        background-repeat: no-repeat;
-                        display: block;
-                        position: absolute;
-                        right: 3px;
-                        top: 3px;
-                    }
+            }
+        }
+    }
+    #sec-nav {
+        position: relative;
+        text-align: left;
+        padding: 10px 0;
+        margin: 0 0 15px 45px;
+        ul {
+            margin: 0;
+            li {
+                display: inline;
+                a {
+                    font-size: 12px;
+                    color: $dark-blue;
+                    padding: 0 5px;
+                    font-weight: bold;
                 }
+            }
+        }
+        & > ul > li {
+            position: relative;
+            &:before {
+                color: $grey;
+                content: "|";
+                position: absolute;
+                top: 2px;
+                left: -15px;
+                font-size: 14px;
+                font-weight: bold;
+                display:block;
+                padding: 0 10px;
+            }
+            &:first-child:before {
+                content: none;
+            }
+        }
+    }
+    img {
+        margin-left: 5px;
+    }
+    .social {
+        margin-top: -25px;
+        padding-right: 0;
+        a {
+            float: right;
+            margin: 0 5px;
+            img {
+                margin: 0;
+            }
+        }
+    }
+}
+//End of Header
 
-/*                #magnifying-glass {
-                        font-size: 10em;  This controls the size.
-                        display: inline-block;
-                        width: rem-calc(10);
-                        height: rem-calc(10);
-                        border: rem-calc(2) solid $black;
-                        position: absolute;
-                        border-radius: 0.35em;
-                        top: rem-calc(2);
-                        right: rem-calc(8);
-                        &:before {
-                            content: "";
-                            display: inline-block;
-                            position: absolute;
-                            right: rem-calc(-7);
-                            bottom: rem-calc(-4);
-                            border-width: 0;
-                            background: $black;
-                            width: rem-calc(8);
-                            height: rem-calc(2);
-                            -webkit-transform: rotate(45deg);
-                            -moz-transform: rotate(45deg);
-                            -ms-transform: rotate(45deg);
-                            transform: rotate(45deg);
-                        }
-                    }*/
-                .search-input {
-                    width: 100%;
-                    border: 2px solid #b2b3b6;
-                    border-radius: 3px;
-                    padding: 0 5px;
-                    height: auto;
-                    color: #b2b3b6;
-                    margin: rem-calc(10) 0 1rem;
+//3. Fonts
+h1, h3 {
+    color: $green;
+    text-transform: uppercase;
+}
+h2, h4 {
+    color: $dark-blue;
+}
+//End of Fonts
+
+//4. Top Bar
+.contain-to-grid {
+    box-shadow: 0 5px 10px -1px $grey;
+    .top-bar {
+        height: 73px;
+        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5);
+        margin-bottom: 10px;
+    }
+}
+.tab-bar {
+    .tab-bar-section.middle {
+//        left: 0;
+//        right: 2.8125rem;
+        text-align: right;
+    }
+}
+.top-bar-section {
+    background: transparent;
+    float: none;
+    margin-left: auto;
+    margin-right: auto;
+    display: inline-block;
+    height: auto;
+    line-height: 1;
+    ul{
+        li {
+            background: none;
+            padding: 12px 0;
+            border-left: 2px solid $white;
+            max-width: 166.5px;
+            line-height: 1.25;
+            &:first-child {
+                border: none;
+            }
+            &:hover {
+                background: $white;
+            }
+            a {
+                text-align: center;
+                padding: 0 20px;
+                font-size: 20px;
+                font-weight: bold;
+                color: $white;
+                &:hover {
+                    color: $dark-blue;
+                    text-shadow: 0 0 1px $dark-blue;
+                    text-shadow: 1 0 1px $dark-blue;
+                    text-shadow: 0 1 1px $dark-blue;
+                    text-shadow: -1 0 1px $dark-blue;
+                    text-shadow: 0 -1 1px $dark-blue;
                 }
-                .top-bar {
-                    @include gradient(blue, red);
-                    margin-top: rem-calc(10);
-                    .top-bar-section {
-                        background: transparent;
-                        float: none;
-                        margin-left: auto;
-                        margin-right: auto;
-                        display: inline-block;
-                        ul {
-                            li {
-                                background: transparent;
-                                &:hover {
-                                    background: $d-blue;
-                                }
-                                a {
-                                    background: transparent;
-                                    margin: 0;
-                                }
-                                &#logo {
-                                    &:hover {
-                                        background: transparent;
-                                    }
-                                    a {
-                                        margin-top: -49px;
-                                        background: transparent;
-                                    }
-                                }
-                            }
-                        }
-                        & .has-dropdown > a {
-                            padding-right: 0.65rem;
-                            padding-left: 0.65rem;
-                        }
-                        & > ul > li {
-                            position: relative;
-                            &:before {
-                                color: #fff;
-                                content: "|";
+            }
+            &:not(.has-form):not(.active) {
+                & > a:not(.button) {
+                    background: transparent;
+                }
+            }
+            &.drop-left {
+                ul.dropdown {
+                    padding-left: 21px;
+                    padding-right: 250px;
+                    top: 74px;
+                    background: $white;
+                    border-bottom-left-radius: 10px;
+                    border-bottom-right-radius: 10px;
+                    min-width: 500px;
+                    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+                    -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+                    -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+                    -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+                    li {
+                        white-space: nowrap;
+                        border-bottom: 1px solid #e7e7e8;
+                        padding: 5px 0;
+                        &.nav-img-container {
+                            img {
                                 position: absolute;
-                                top: 12px;
-                                left: -16px;
-                                font-size: 20px;
-                                display:block;
-                                padding: 0 10px;
-                            }
-                            &:nth-child(1):before {
-                                content: none;
+                                right: 20px;
+                                top: 23px;
+                                border: 6px solid #fdefd4;
                             }
+                            border: none;
                         }
-                        .dropdown {
-                            background: $white;
-                            li {
-                                &:hover {
-                                    background: $white;
-                                }
+                        a {
+                            padding-left: 0;
+                            text-align: left;
+                            font-size: 18px;
+                            &:hover {
+                                color: $dark-blue;
+                                text-shadow: 0 0 1px $green;
+                                text-shadow: 1 0 1px $green;
+                                text-shadow: 0 1 1px $green;
+                                text-shadow: -1 0 1px $green;
+                                text-shadow: 0 -1 1px $green;
                             }
                         }
                     }
                 }
-                .left-off-canvas-list {
-                    list-style: none;
+            }
+            &.drop-right {
+                ul.dropdown {
+                    padding-left: 250px;
+                    padding-right: 21px;
+                    right: -1%;
+                    left: auto;
+                    top: 74px;
+                    background: $white;
+                    border-bottom-left-radius: 10px;
+                    border-bottom-right-radius: 10px;
+                    min-width: 500px;
+                    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+                    -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+                    -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+                    -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
                     li {
-                        a {
-                            color: $white;
-                            font-size: rem-calc(20);
-                            line-height: 150%;
+                        white-space: nowrap;
+                        background: $white;
+                        text-align: right;
+                        border-bottom: 1px solid #e7e7e8;
+                        padding: 5px 0;
+                        &.nav-img-container {
+                            img {
+                                position: absolute;
+                                left: 20px;
+                                top: 23px;
+                                border: 6px solid #fdefd4;
+                            }
+                            border: none;
                         }
-                        .dropdown {
-                            list-style: none;
+                        a {
+                            padding-left: 0;
+                            text-align: left;
+                            font-size: 18px;
+                            &:hover {
+                                color: $dark-blue;
+                                text-shadow: 0 0 1px $green;
+                                text-shadow: 1 0 1px $green;
+                                text-shadow: 0 1 1px $green;
+                                text-shadow: -1 0 1px $green;
+                                text-shadow: 0 -1 1px $green;
+                            }
                         }
                     }
                 }
             }
-            .main {
-                #slideshow {
-                    border-bottom: 3px solid #0e688d;
-                    .nivo-caption {
-                        float: right;
-                        font-size: rem-calc(12);
-                        @include gradient2 ($white, transparent);
-                        margin-top: -60px;
-                        padding: 10px 0;
-                        p {
-                            float: right;
-                            margin-bottom: 0;
-                            padding: 0 15px;
-                        }
-                    }
-                }
-                #content-wrapper {
-                    padding: 25px;
-                    h1#Emer {
-                        color: $red;
-                        font-family: Times, sans-serif;
-                        font-style: italic;
-                        font-size: rem-calc(36);
-                    }
-                    .blocks {
-                        margin-bottom: rem-calc(45);
-                        img {
-                            border: 5px solid $green;
-                            margin-bottom: 14px;
-                            box-shadow: 0 3px 4px 0 grey;
-                        }
-                        p {
-                            margin-bottom: 14px;
-                        }
-                        a {
-                            color: $l-blue;
-                            text-decoration: underline;
-                            font-size: rem-calc(14);
-                        }
-                    }
-                    li.widget {
-                        list-style: none;
-                        h2.widgettitle {
-                            font-size: rem-calc(28);
-                        }
-                    }
+        }
+    }
+}
+//End of Top Bar
+
+//5. Off-Canvas
+.left-off-canvas-menu {
+    ul {
+        &.search {
+            input[type="text"] {
+                width: 85%;
+            }
+            .magnifying-glass {
+                font-size: 10em; /* This controls the size. */ 
+                display: inline-block; 
+                width: rem-calc(15); 
+                height: rem-calc(15);
+                border: rem-calc(2) solid $dark-blue; 
+                position: relative; 
+                border-radius: 0.35em;
+                float: right;
+                margin: -45px 45px 0 0;
+                &:before {
+                    content: ""; 
+                    display: inline-block; 
+                    position: absolute; 
+                    right: rem-calc(-7); 
+                    bottom: rem-calc(-4); 
+                    border-width: 0; 
+                    background: $dark-blue; 
+                    width: rem-calc(10); 
+                    height: rem-calc(3); 
+                    -webkit-transform: rotate(45deg); 
+                    -moz-transform: rotate(45deg);
+                    -ms-transform: rotate(45deg);
+                    transform: rotate(45deg);
                 }
             }
-            /* Blog & Search */
-            #blog-posts-container {
-                margin: 30px 0 30px;
-                embed, iframe, object, video {
-                    max-width: 100%;
+        }
+        &#address {
+            li {
+                margin: 0;
+                a#email {
+                    font-size: rem-calc(14);
+                    
                 }
+            }
+        }
+        &#off-nav {
+            position: relative;
+            text-align: center;
+            padding: 10px 0;
+            margin-left: 0;
+            li {
+                display: inline;
                 a {
-                    text-decoration: none;
-                }
-                header.entry-header {
-                    h2.entry-title {
-                        a {
-                            color: #222;
-                        }
+                    font-size: 14px;
+                    color: $white;
+                    font-weight: bold;
+                    padding: 0 3px;
+                    &:hover {
+                        color: $dark-blue;
                     }
                 }
-                .wp-caption .wp-caption-text, .gallery-caption, .entry-caption {
-                    overflow: hidden;
-                    color: #757575;
-                    font-size: 0.857143rem;
-                    font-style: italic;
-                    line-height: 2;
+            }
+            & > li {
+                position: relative;
+                &:before {
+                    color: $white;
+                    content: "|";
+                    position: absolute;
+                    top: -2px;
+                    left: -16px;
+                    font-size: 17px;
+                    font-weight: bold;
+                    display:block;
+                    padding: 0 10px;
                 }
-                .date {
-                    font-size: 12px;
+                &:first-child:before {
+                    content: none;
                 }
-                footer.entry-meta {
-                    color: #757575;
-                    font-size: 0.928571rem;
-                    line-height: 1.84615;
-                    margin-top: 1.71429rem;
-                    clear: both;
-                    float: none;
-                    margin-right: auto;
+            }
+        }
+    }
+}
+.right-off-canvas-menu {
+    ul {
+        list-style: none;
+        margin: 10px;
+        li {
+            color: $white;
+            &.title {
+                margin: 10px 0 0;
+            }
+            &#off-message {
+                text-transform: uppercase;
+                color: $light-blue;
+                margin: 15px 0 5px;
+            }
+            h3 {
+                text-transform: none;
+                &.county-news {
+                    font-weight: bold;
                 }
-                footer {
-                    background: none;
-                    clear: both;
-                    padding: 15px 0 0;
-                    position: relative;
-                    text-align: center;
+            }
+        }
+        input[type="text"], input[type="email"] {
+            width: 85%;
+        }
+        button {
+            border-radius: 2px;
+            padding: 0 10px;
+        }
+    }
+}
+//End of Off-Canvas
+
+//6. Main
+.breadcrumbs {
+    margin-top: 10px;
+}
+#content-bulk {
+    #con {
+        margin: 0;
+    }
+    h2 {
+        text-transform: uppercase;
+        font-size: 25px;
+    }
+    footer {
+        margin: 35px 0;
+        #address {
+            margin-top: 25px;
+            p {
+                font-size: 12px;
+                margin-top: 5px;
+            }
+            img {
+                margin: 0;
+                padding-right: 5px;
+            }
+            a {
+                font-size: 12px;
+            }
+        }
+        img {
+            box-shadow: none;
+        }
+    }
+}
+//End of Main
 
+//7. Slideshow
+#slideshow {
+    border-bottom: 5px solid $dark-blue;
+    margin-top: -10px;
+    #caption {
+        background: rgba(0, 0, 0, 0.75);
+        color: $white;
+        margin-top: -51px;
+        p {
+            padding: 10px 5px;
+            font-size: 12px;
+            margin: 0;
+            text-align: right;
+        }
+    }
+}
+//End of Slideshow
+
+//8. Blog
+#front {
+    padding: 10px;
+    .row.collapse {
+        h1 {
+            border-bottom: 1px solid #d1d2d4;
+        }
+        .row {
+            margin-bottom: 20px;
+            .detail {
+                padding-left: 25px;
+                margin: 0 auto;
+                h2 {
+                    margin: 0;
+                }
+                img {
+                    margin-top: 5px;
+                    border: 3px solid $white;
+                    -webkit-box-shadow: 0px 0px 5px 0px #ababab;
+                    -moz-box-shadow: 0px 0px 5px 0px #ababab;
+                    -ms-box-shadow: 0px 0px 5px 0px #ababab;
+                    box-shadow: 0px 0px 5px 0px #ababab;
+                }
+                p {
+                    font-size: rem-calc(12);
+                    margin: 0;
+                }
+                a {
+                    font-size: rem-calc(12);
                 }
             }
-            #searchform_container {
-                margin-top: 20px;
+        }
+        .row.collapse {
+            img {
+                margin-left: 15px;
+                margin-top: 5px;
+                border: 3px solid $white;
+                -webkit-box-shadow: 0px 0px 5px 0px #ababab;
+                -moz-box-shadow: 0px 0px 5px 0px #ababab;
+                -ms-box-shadow: 0px 0px 5px 0px #ababab;
+                box-shadow: 0px 0px 5px 0px #ababab;
             }
-            #searchform {
-                max-width: 100%;
-                text-align: center;
-                div {
-                    input.blogbutton {
-                        @include gradient(#1999ce, #107098);
+        }
+        h4 {
+            line-height: 1.3;
+        }
+        ul {
+            list-style: none;
+            margin: 10px 0;
+            li {
+                font-size: rem-calc(10);
+                color: $grey;
+                padding: 0 0 5px;
+                a {
+                    font-size: rem-calc(11);
+                    &.more {
+                        color: $dark-blue;
+                        font-weight: bold;
+                        text-transform: uppercase;
                     }
                 }
             }
-            #blog-side-info {
-                border-left: 1px solid grey;
-                margin-top: 30px;
-                padding-left: 20px;
+        }
+        #video {
+            padding: 0;
+            margin-top: 30px;
+            float: left;
+            h2 {
+                margin-top: 20px;
+                font-size: rem-calc(18);
+                @media #{$medium-only} {
+                    margin-top: 15px
+                }
                 @media #{$small-only} {
-                    text-align: center;
+                    margin: 0;
                 }
             }
-
-            /* End Blog & Search */
-
-            footer {
-                background: url(../assets/wave.png) no-repeat;
-                width: 100%;
-                min-height: auto;
-                margin-top: 80px;
-                padding-bottom: 20px;
-                text-align: center;
-                div {
-                    #address {
-                        margin-top: rem-calc(145);
-                        h2 {
-                            text-align: center;
-                        }
-                        span {
-                            text-align: center;
-                            line-height: 1.4;
-                            @media #{$small-only} {
-                                display: block;
-                            }
-                        }
-                    }
-                    .sym {
-                        img {
-                            margin: 0 0 40px 40px;
-                        }
-                    }
+            a {
+                font-size: 12px;
+            }
+            img {
+                margin-left: 25px;
+                @media #{$small-only} {
+                    margin: 0;
                 }
-                #connect {
-                    background: #4C4D4F;
-                    #emmet {
-                        h1 {
-                            font-size: rem-calc(48);
-                            font-family: "Rage Italic";
-                            color: $white;
-                            margin: 0;
-                        }
-                        h2 {
-                            font-size: rem-calc(48);
-                            color: $white;
-                            font-family: 'Crimson Text';
-                            font-style: italic;
-                            margin: 0;
-                        }
-                    }
-                    .multi {
-                        padding: rem-calc(18) rem-calc(10);
-                        font-size: rem-calc(12);
-                        a {
-                            color: $white;
-                        }
-                    }
-                    #current {
-                        background: #0099cc;
-                    }
-                    .medium-1 {
-                        width: 10%;
-                    }
-                    ul.multi-link {
-                        margin: 0;
-                        li  {
-                            padding: rem-calc(18) rem-calc(10);
-                            a {
-                                font-size: rem-calc(12);
-                                color: $white;
-                            }
-                        }
-                    }
+            }
+        }
+        footer {
+            img {
+                margin: 35px 0 0;
+            }
+            #address {
+                margin: 25px 0;
+                p {
+                    font-size: 12px;
+                    margin-top: 5px;
+                }
+                img {
+                    margin: 0;
+                    padding-right: 5px;
+                }
+                a {
+                    font-size: 12px;
                 }
             }
+            img {
+                box-shadow: none;
+            }
         }
-        #copyright {
-            padding: 20px 0;
-            margin: 0 auto;
-            float: none;
-            span {
-                font-size: rem-calc(12);
+    }
+}
+
+.blogbutton {
+    background: $green;
+    border: 2px solid $white;
+    font-weight: bold;
+    font-size: 13px;
+    padding: 0 3px;
+    margin-top: -10px;
+    text-transform: uppercase;
+    &:hover {
+        background: $white;
+        border: 2px solid $green;
+        color: $green;
+    }
+}
+article {
+    padding: 0 15px 10px;
+    margin-bottom: 15px;
+    display: inline-block;
+    width: 100%;
+    .entry-header {
+        background: transparent;
+    }
+    p {
+        padding-bottom: 15px;
+    }
+    a.read-more {
+        background: $green;
+        border: 2px solid $white;
+        font-weight: bold;
+        font-size: 13px;
+        padding: 0 3px;
+        text-transform: uppercase;
+        &:hover {
+            background: $white;
+            border: 2px solid $green;
+            color: $green;
+        }
+    }
+}
+#searchform {
+    div {
+        input {
+            &[type="text"] {
+                width: 95%;
+            }
+        }
+    }
+}
+//End of Blog
+
+//9. Sidebar
+#sidebar {
+    padding-top: 25px;
+    background: #f2f9fc;
+    .row.collapse {
+        margin-left: 14px;
+    }
+    a {
+        font-size: 12px;
+    }
+    form {
+        margin: 0 12px 0 14px;
+        select {
+            padding: 0 rem-calc(8);
+            border-radius: 5px;
+            height: 25px;
+            option {
+                font-size: 10px;
+            }
+        }
+    }
+    .small-block-grid-2 {
+        margin-top: 10px;
+        li {
+            padding: 0 rem-calc(10) rem-calc(10);
+            img {
+                border: 2px solid $light-blue;
+            }
+        }
+        & > li:nth-of-type(2), & > li:nth-of-type(4) {
+            padding-left: 0;
+        }
+    }
+    h3 {
+        margin: 20px 0 0;
+    }
+    h1 {
+        margin: 0;
+        font-size: rem-calc(25);
+        text-transform: none;
+    }
+    input {
+        padding: 5px 0 5px 8px;
+        height: auto;
+        margin: 10px 0;
+    }
+    button {
+        border-radius: 2px;
+        padding: 0 10px;
+    }
+}
+#side-nav {
+    padding-top: 10px;
+    background: #f2f9fc;
+    h1 {
+        font-size: rem-calc(22);
+        margin: 5px 0 25px;
+    }
+    h4 {
+        font-weight: bold;
+        margin-left: 10px;
+    }
+    ul {
+        list-style: none;
+        margin: 0 0 20px;
+        li {
+            margin: 0 -15px;
+            padding: 5px 10px 5px 25px;
+            &:hover {
+                background: #81adc1;
             }
             a {
-                color: $black;
+                color: $dark-blue;
+                &:hover {
+                    color: $white;
+                }
             }
         }
-        #footer_address span.bullet,
-        #copyright span.bullet {
-            margin: 0 5px;
-            @media #{$small-only} {
-                display: none !important;
+    }
+    h3 {
+        text-transform: none;
+        margin: 0;
+    }
+    input {
+        padding: 5px 0 5px 8px;
+        height: auto;
+        margin-bottom: 10px;
+    }
+    button {
+        border-radius: 2px;
+        padding: 0 10px;
+    }
+}
+#extra {
+    margin-top: 15px;
+    p {
+        line-height: 1.3;
+        &.title {
+            margin: 0;
+            &#last {
+                padding-top: 10px;
             }
         }
+        &#message {
+            text-transform: uppercase;
+            color: $light-blue;
+            font-size: rem-calc(15);
+            margin: 40px 0;
+        }
+    }
+}
+.county-news {
+    font-weight: bold;
+}
+//End of Sidebar
+
+//10. Links
+a {
+    color: $light-blue;
+    &:hover {
+        color: $light-blue;
+    }
+}
+//End of Links
+
+//11. Footer
+#connect {
+    padding-top: 20px;
+    background: #4c4d4f;
+    ul{
+        margin: 0;
+        list-style: none;
+        li {
+            background: none;
+            padding: 0 5px;
+            display: inline-block;
+            & > a {
+                display: block;
+                font-family: Open Sans, sans-serif;
+                font-size: 12px;
+                color: #fff;
+                padding: 20px 18px;
+                line-height: 1.2;
+            }
+            a {
+                &#current {
+                    background: $light-blue;
+                }
+            }
+        }
+    }
+}
+//End of Footer
+
+//12. Copyright
+#copyright {
+    padding: 20px 0;
+    margin: 0 auto;
+    float: none;
+    p {
+        font-size: rem-calc(10);
+    }
+    a {
+        color: $black;
+    }
+}
+#footer_address span.bullet,
+#copyright span.bullet {
+    margin: 0 5px;
+    @media #{$small-only} {
+        display: none !important;
     }
 }
+//End of Copyright
 
 /* Google Map */
 #map_container {
-- 
2.17.1