HDO changes

gistfile1.txt

diff --git a/app/assets/stylesheets/_shared.less b/app/assets/stylesheets/_shared.less
index e4480b2..453f35e 100644
--- a/app/assets/stylesheets/_shared.less
+++ b/app/assets/stylesheets/_shared.less
@@ -1,3 +1,35 @@
+@import "twitter/bootstrap/bootstrap";
+@import "twitter/bootstrap/responsive";
+
+@font-face {
+  font-family: "Neo Sans";
+  src: url('/fonts/NeoSansStd-Regular.otf');
+}
+
+@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic');
+
+@hdoPrimaryColor: #009ea6;
+@hdoSecondaryColor: #e03d25;
+@hdoTertiaryColor: #332b2e;
+@hdoQuaternaryColor: #231f20;
+
+@baseFontFamily: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseLineHeight: 18px;
+@headingsFontFamily: 'NeoSansStandard', 'Ubuntu', Helvetica, Arial, sans-serif;
+
+@navbarBackground: @hdoPrimaryColor;
+@navbarBackgroundHighlight:#55bfbb;
+@navbarLinkColor: @white;
+@navbarLinkColorHover: @black;
+@navbarLinkBackgroundActive: @white;
+@navbarLinkColorActive: @black;
+
+@logoHeight: 100px;
+@logoMargin: 20px;
+
+@containerWidthTablet: 958px;
+@navbarHeightTablet: 39px;
+
 /* assets */
 @district_logo_Akershus: '/assets/district_logos/Akershus.svg';
 @district_logo_Oestfold: '/assets/district_logos/Oestfold.svg';
diff --git a/app/assets/stylesheets/application.css.less b/app/assets/stylesheets/application.css.less
index bb6bd26..d4b5536 100644
--- a/app/assets/stylesheets/application.css.less
+++ b/app/assets/stylesheets/application.css.less
@@ -14,6 +14,9 @@
  *= require_tree .
 */
 
+@import "_shared.less";
+@import "_components.less";
+
 @footerHeight: 100px;
 
 body,
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.css.less b/app/assets/stylesheets/bootstrap_and_overrides.css.less
index 27766f8..7ec7e92 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.css.less
+++ b/app/assets/stylesheets/bootstrap_and_overrides.css.less
@@ -1,6 +1,9 @@
 @import "twitter/bootstrap/bootstrap";
 @import "twitter/bootstrap/responsive";
 
+@import "_shared.less";
+@import "_components.less";
+
 // Set the correct sprite paths
 @iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
 @iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');
@@ -14,52 +17,25 @@
 // See http://twitter.github.com/bootstrap/less.html for their names and documentation
 //
 
-
-@font-face {
-    font-family: "Neo Sans";
-    src: url('/fonts/NeoSansStd-Regular.otf');
-}
-
-@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic');
-
-@hdoPrimaryColor: #009ea6;
-@hdoSecondaryColor: #e03d25;
-@hdoTertiaryColor: #332b2e;
-@hdoQuaternaryColor: #231f20;
-
-@baseFontFamily: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
-@baseLineHeight: 18px;
-@headingsFontFamily: 'NeoSansStandard', 'Ubuntu', Helvetica, Arial, sans-serif;
-
-@navbarBackground: @hdoPrimaryColor;
-@navbarBackgroundHighlight:#55bfbb;
-@navbarLinkColor: @white;
-@navbarLinkColorHover: @black;
-@navbarLinkBackgroundActive: @white;
-@navbarLinkColorActive: @black;
-
-@logoHeight: 100px;
-@logoMargin: 20px;
-
 #HeaderNavigation {
-    background-image: url('/assets/web_logo_sm.png');
-    background-position: left @logoMargin;
-    background-repeat: no-repeat;
-    min-height: @logoHeight + @logoMargin * 2;
-    .subnav {
-        margin-top: @logoHeight + @logoMargin * 2;
-        .subnav-inner {
-            .clearfix();
-        }
+  background-image: url('/assets/web_logo_sm.png');
+  background-position: left @logoMargin;
+  background-repeat: no-repeat;
+  min-height: @logoHeight + @logoMargin * 2;
+  .subnav {
+    margin-top: @logoHeight + @logoMargin * 2;
+    .subnav-inner {
+      .clearfix();
     }
+  }
 }
 
 .navbar {
-    font-family: @headingsFontFamily;
-    text-transform: uppercase;
-    .navbar-inner {
-        .border-radius(0);
-    }
+  font-family: @headingsFontFamily;
+  text-transform: uppercase;
+  .navbar-inner {
+    .border-radius(0);
+  }
 }
 
 .navbar .nav .active > a,
@@ -67,14 +43,14 @@
 .navbar .nav li.dropdown.active .dropdown-toggle,
 .navbar .nav li.dropdown.active .dropdown-toggle:hover,
 .navbar .nav li.dropdown.active.open > .dropdown-toggle {
-    .border-radius(3px 3px 0 0);
-    .box-shadow(inset 0 0 3px @grayDark);
-    background-color: @white;
-    color: @black;
-    text-decoration: none;
-    .caret {
-        border-top-color: @black;
-    }
+  .border-radius(3px 3px 0 0);
+  .box-shadow(inset 0 0 3px @grayDark);
+  background-color: @white;
+  color: @black;
+  text-decoration: none;
+  .caret {
+    border-top-color: @black;
+  }
 }
 
 // Active state
@@ -93,62 +69,33 @@ h2,
 h3,
 h4,
 h5 {
-    font-family: @headingsFontFamily;
+  font-family: @headingsFontFamily;
 }
 
 @media screen and (min-width: 768px) {
-    @containerWidth: 662px;
-    #HeaderNavigation {
-        margin: 0 auto;
-        width: @containerWidth;
-    }
+  @containerWidth: 662px;
+  #HeaderNavigation {
+    margin: 0 auto;
+    width: @containerWidth;
+  }
 }
 
 @media screen and (min-width:980px) {
-    @containerWidth: 958px;
-    @navbarHeight: 39px;
-    #HeaderNavigation {
-        position: relative;
-        margin: 0 auto;
-        width: @containerWidth;
-        .pull-up {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-        .subnav {
-            margin-top: 0;
-            padding-top: @logoHeight + @logoMargin * 2;
-            &.subnav-fixed {
-                background-color: @navbarBackground;
-                left: 0;
-                padding-top: 0;
-                position: fixed;
-                top: 0;
-                width: 100%;
-                z-index: 1;
-                .subnav-inner {
-                    margin: 0 auto;
-                    width: @containerWidth;
-                }
-            }
-        }
-        &.header-fixed {
-            margin-bottom: @navbarHeight;
-        }
-    }
+  #HeaderNavigation {
+    .headerNavigationTablet;
+  }
 }
 
 @media screen and (min-width:1200px) {
-    @containerWidth: 1070px;
-    #HeaderNavigation {
-        width: @containerWidth;
-        .subnav.subnav-fixed .subnav-inner {
-            width: @containerWidth;
-        }
+  @containerWidth: 1070px;
+  #HeaderNavigation {
+    width: @containerWidth;
+    .subnav.subnav-fixed .subnav-inner {
+      width: @containerWidth;
     }
+  }
 }
 
 #representative-short-info {
-    padding-top: 2em;
+  padding-top: 2em;
 }
\ No newline at end of file