From 36adddad534c334a8f9ec87e2669417e4aa1a378 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sbx.pm>
Date: Tue, 24 Mar 2020 18:17:26 +0100
Subject: [PATCH] Syntax improvements in scss files

---
 CHANGELOG.md                                  |    1 +
 app/assets/stylesheets/app.base.scss          |  149 ++-
 app/assets/stylesheets/app.buttons.scss       |   80 +-
 app/assets/stylesheets/app.colors.scss        |  171 ++-
 app/assets/stylesheets/app.components.scss    |  251 ++--
 app/assets/stylesheets/app.functions.scss     |   22 +-
 app/assets/stylesheets/app.layout.scss        |  620 ++++-----
 app/assets/stylesheets/app.nav.scss           |  932 +++++++-------
 app/assets/stylesheets/app.plugins.scss       |   94 +-
 app/assets/stylesheets/app.printer.scss       |    2 +-
 app/assets/stylesheets/app.responsive.scss    |   57 +-
 app/assets/stylesheets/app.utilities.scss     | 1115 +++++++++++++----
 .../stylesheets/bootstrap_and_overrides.scss  | 1041 ++++++++-------
 app/assets/stylesheets/modules/abuses.scss    |    1 -
 app/assets/stylesheets/modules/cookies.scss   |    9 +-
 app/assets/stylesheets/modules/icalendar.scss |    4 +-
 app/assets/stylesheets/modules/invoice.scss   |   60 +-
 app/assets/stylesheets/modules/settings.scss  |    7 +
 app/assets/stylesheets/modules/signup.scss    |    5 +
 app/assets/stylesheets/modules/tour.scss      |   23 +-
 20 files changed, 2907 insertions(+), 1737 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94ed32207..7587c44f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Updated angular-translate
 - Updated eslint
 - Renamed production documentation
+- Syntax improvements in scss files
 - Fix a bug: invalid translation keys in closing accounting period interface
 - Fix a bug: since PostgreSQL release 9.6.17, the new installations will fail to start complaining for missing password (#194)
 - Fix a bug: missing translations for some error messages
diff --git a/app/assets/stylesheets/app.base.scss b/app/assets/stylesheets/app.base.scss
index b2ea363f4..5964121b2 100644
--- a/app/assets/stylesheets/app.base.scss
+++ b/app/assets/stylesheets/app.base.scss
@@ -2,41 +2,54 @@
 html {
   overflow-x: hidden;
 }
+
 body {
   -webkit-font-smoothing: antialiased;
 }
 
-.h1, .h2, .h3, .h4, .h5, .h6{
+.h1, .h2, .h3, .h4, .h5, .h6 {
   margin: 0;
 }
 
 h1, .page-title {
-   line-height: rem-calc(24);
-   text-transform: uppercase;
-   font-weight: 900;
+  line-height: rem-calc(24);
+  text-transform: uppercase;
+  font-weight: 900;
 }
+
 h2 {
-   //color: $red;
-   line-height: rem-calc(24);
-   font-weight: 900;
+  //color: $red;
+  line-height: rem-calc(24);
+  font-weight: 900;
 }
-h3 { font-weight: 600; }
-h4 { font-weight: bold; }
+
+h3 {
+  font-weight: 600;
+}
+
+h4 {
+  font-weight: bold;
+}
+
 h5 {
-   display: inline-block;
-   position: relative;
-   line-height: rem-calc(18);
-   //color: $red;
-   font-size: rem-calc(16);
-   &:after {
-      position: absolute;
-      top: 18px;
-      left: 0;
-      content: '';
-      width: 35%;
-      height: 1px;
-      //background-color: $red;
-   }
+  display: inline-block;
+  position: relative;
+  line-height: rem-calc(18);
+
+  //color: $red;
+  font-size: rem-calc(16);
+
+  &:after {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    content: '';
+    width: 35%;
+    height: 1px;
+
+    //background-color: $red;
+ 
+  }
 }
 
 // Links
@@ -46,78 +59,97 @@ a {
   //color: $link-color;
   text-decoration: none;
 }
+
 a:hover,
 a:focus {
   //color: $link-hover-color;
   text-decoration: none;
 }
 
-label{ font-weight: 600; }
-small, .small{font-size: $font-size-sm;}
+label {
+  font-weight: 600;
+}
 
-pre { padding: 0; }
+small, .small {
+  font-size: $font-size-sm;
+}
+
+pre {
+  padding: 0;
+}
 
 p {
-   font-size: rem-calc($font-size-base);
-   line-height: rem-calc(24);
+  font-size: rem-calc($font-size-base);
+  line-height: rem-calc(24);
 
-   &.intro, .intro {
-      font-size: rem-calc(16);
-      line-height: rem-calc(24);
-      margin: 1.038em 0 30px 0;
-   }
+  &.intro, .intro {
+    font-size: rem-calc(16);
+    line-height: rem-calc(24);
+    margin: 1.038em 0 30px 0;
+  }
 }
 
 dt {
   color: $black-light;
 }
+
 dd {
   color: $black-light;
   margin-bottom: 20px;
 }
 
-
 //
 // -------------------------
 
-.col-0{clear:left;}
+.col-0 {
+  clear: left;
+}
 
-.row.no-gutter{
+.row.no-gutter {
   margin-left: 0;
   margin-right: 0;
 }
 
-.no-gutter > [class*="col"]{
+.no-gutter > [class*="col"] {
   padding: 0;
 }
 
 /* centered columns styles */
 .row-centered {
-    text-align:center;
+  text-align: center;
 }
+
 .col-centered {
-    display:inline-block;
-    float:none;
-    /* reset the text-align */
-    text-align:left;
-    /* inline-block space fix */
-    margin-right:-4px;
+  display: inline-block;
+  float: none;
+
+  /* reset the text-align */
+  text-align: left;
+
+  /* inline-block space fix */
+  margin-right: -4px;
 }
 
+::-webkit-input-placeholder {
+  /* WebKit browsers */
+  color: black;
+}
 
-::-webkit-input-placeholder { /* WebKit browsers */
-    color:    black;
+:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: black;
+  opacity: 1;
 }
-:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-    color:    black;
-    opacity:  1;
+
+::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: black;
+  opacity: 1;
 }
-::-moz-placeholder { /* Mozilla Firefox 19+ */
-    color:    black;
-    opacity:  1;
-}
-:-ms-input-placeholder { /* Internet Explorer 10+ */
-    color:    black;
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  color: black;
 }
 
 // .ng-hide-remove-active {
@@ -130,11 +162,13 @@ dd {
   position: absolute;
   left: 0;
   right: 0;
-  @include transition(all .7s ease-in-out);
+
+  @include transition(all 0.7s ease-in-out);
 }
 
 [ui-view].ng-enter {
   opacity: 0;
+
   // -webkit-transform:scale3d(0.5, 0.5, 0.5);
   // -moz-transform:scale3d(0.5, 0.5, 0.5);
   // transform:scale3d(0.5, 0.5, 0.5);
@@ -142,6 +176,7 @@ dd {
 
 [ui-view].ng-enter-active {
   opacity: 1;
+
   // -webkit-transform:scale3d(1, 1, 1);
   // -moz-transform:scale3d(1, 1, 1);
   // transform:scale3d(1, 1, 1);
@@ -149,6 +184,7 @@ dd {
 
 [ui-view].ng-leave {
   opacity: 1;
+
   /*padding-left: 0px;*/
   // -webkit-transform:translate3d(0, 0, 0);
   // -moz-transform:translate3d(0, 0, 0);
@@ -157,6 +193,7 @@ dd {
 
 [ui-view].ng-leave-active {
   opacity: 0;
+
   /*padding-left: 100px;*/
   // -webkit-transform:translate3d(100px, 0, 0);
   // -moz-transform:translate3d(100px, 0, 0);
diff --git a/app/assets/stylesheets/app.buttons.scss b/app/assets/stylesheets/app.buttons.scss
index 76fd2cf50..12c13c56c 100644
--- a/app/assets/stylesheets/app.buttons.scss
+++ b/app/assets/stylesheets/app.buttons.scss
@@ -1,27 +1,25 @@
-
 .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
-
-	background-color: #f2f2f2;
-
+  background-color: #f2f2f2;
 }
 
-.btn{
-	> i{
-		&.pull-left,
-		&.pull-right{
-			line-height: 1.428571429;
-		}
-	}
+.btn {
+  > i {
+    &.pull-left,
+    &.pull-right {
+      line-height: 1.428571429;
+    }
+  }
 }
 
 .btn-warning-full {
-	outline: 0;
-	text-transform: uppercase;
-	//border: 3px solid $yellow;
-	//background-color: $yellow;
-	&:hover {
-		background-color: white;
-	}
+  outline: 0;
+  text-transform: uppercase;
+
+  //border: 3px solid $yellow;
+  //background-color: $yellow;
+  &:hover {
+    background-color: white;
+  }
 }
 
 .btn-facebook {
@@ -48,23 +46,22 @@
   }
 }
 
-
 .btn-block {
-	padding-left: 12px;
-	padding-right: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.btn-group-vertical > .btn:first-child:not(:last-child){
-	border-top-right-radius: $border-radius-base;
+.btn-group-vertical > .btn:first-child:not(:last-child) {
+  border-top-right-radius: $border-radius-base;
 }
 
-.btn-group-vertical > .btn:last-child:not(:first-child){
-	border-bottom-left-radius: $border-radius-base;
+.btn-group-vertical > .btn:last-child:not(:first-child) {
+  border-bottom-left-radius: $border-radius-base;
 }
 
-.btn-inactive{
-	-webkit-box-shadow: none !important;
-	box-shadow: none !important;
+.btn-inactive {
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .btn-loading:after {
@@ -72,9 +69,9 @@
   display: inline-block;
   content: "\f110";
   font-family: FontAwesome;
-  -webkit-animation:spin 4s linear infinite;
-  -moz-animation:spin 4s linear infinite;
-  animation:spin 4s linear infinite;
+  -webkit-animation: spin 4s linear infinite;
+  -moz-animation: spin 4s linear infinite;
+  animation: spin 4s linear infinite;
 }
 
 .btn-no-overflow {
@@ -84,6 +81,21 @@
   text-overflow: ellipsis;
 }
 
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+@-moz-keyframes spin {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/app/assets/stylesheets/app.colors.scss b/app/assets/stylesheets/app.colors.scss
index e011b84b7..b5cd0baf6 100644
--- a/app/assets/stylesheets/app.colors.scss
+++ b/app/assets/stylesheets/app.colors.scss
@@ -1,49 +1,140 @@
+.bg-light {
+  background-color: $brand-light;
+}
 
-.bg-light { background-color: $brand-light; }
 //.bg-red { background-color: $red; color: white; }
 //.bg-red-dark { background-color: $red-dark; }
 //.bg-yellow { background-color: $yellow !important; }
-.bg-token { background-color: rgba(230, 208, 137, 0.49); }
-.bg-machine { background-color: $beige; }
-.bg-space { background-color: $cyan }
-.bg-formation { background-color: $violet; }
-.bg-event { background-color: $japonica; }
-.bg-atelier { background-color: $blue; }
-.bg-stage { background-color: $violet; }
-.bg-success { background-color: $brand-success; }
-.bg-info { background-color: $brand-info; }
-.border-machine { border-color: $beige !important; }
-.border-space { border-color: $cyan !important; }
-.border-formation { border-color: $violet !important; }
-.border-event { border-color: $japonica !important; }
+.bg-token {
+  background-color: rgba(230, 208, 137, 0.49);
+}
 
-.bg-black-light { background-color: #424242 !important; }
+.bg-machine {
+  background-color: $beige;
+}
+
+.bg-space {
+  background-color: $cyan;
+}
+
+.bg-formation {
+  background-color: $violet;
+}
+
+.bg-event {
+  background-color: $japonica;
+}
+
+.bg-atelier {
+  background-color: $blue;
+}
+
+.bg-stage {
+  background-color: $violet;
+}
+
+.bg-success {
+  background-color: $brand-success;
+}
+
+.bg-info {
+  background-color: $brand-info;
+}
+
+.border-machine {
+  border-color: $beige !important;
+}
+
+.border-space {
+  border-color: $cyan !important;
+}
+
+.border-formation {
+  border-color: $violet !important;
+}
+
+.border-event {
+  border-color: $japonica !important;
+}
+
+.bg-black-light {
+  background-color: #424242 !important;
+}
 
 .bg-white {
-	background-color: #fff;
-	color: $text-color;
-	a {
-		color: $link-color;
-		&:hover{
-			color: darken($link-color, 10%);
-		}
-	}
-	.text-muted{color: $text-muted !important;}
-}
-.bg-white-only{background-color:#fff;}
-.bg-empty{background-color: transparent;}
+  background-color: #fff;
+  color: $text-color;
+
+  a {
+    color: $link-color;
+
+    &:hover {
+      color: darken($link-color, 10%);
+    }
+  }
+
+  .text-muted {
+    color: $text-muted !important;
+  }
+}
+
+.bg-white-only {
+  background-color: #fff;
+}
+
+.bg-empty {
+  background-color: transparent;
+}
+
+.text-black {
+  color: #000 !important;
+}
+
+.text-black-light {
+  color: #424242 !important;
+}
+
+.text-gray {
+  color: #5a5a5a !important;
+}
+
+.text-white {
+  color: #fff !important;
+}
 
-.text-black{ color: #000 !important; };
-.text-black-light { color: #424242 !important; }
-.text-gray { color: #5a5a5a !important; }
-.text-white { color: #fff !important; }
 //.text-yellow { color: $yellow !important; }
-.text-blue { color: $blue; }
-.text-muted { color: $text-muted; }
-.text-danger, .red { color: $red !important; }
-.text-red-only { color: $red !important; }
-.text-purple { color: $violet !important; }
-.text-japonica { color: $japonica !important; }
-.text-beige { color: $beige !important; }
-.text-cyan { color: $cyan !important; }
-.text-green, .green { color: #79C84A !important; }
+.text-blue {
+  color: $blue;
+}
+
+.text-muted {
+  color: $text-muted;
+}
+
+.text-danger, .red {
+  color: $red !important;
+}
+
+.text-red-only {
+  color: $red !important;
+}
+
+.text-purple {
+  color: $violet !important;
+}
+
+.text-japonica {
+  color: $japonica !important;
+}
+
+.text-beige {
+  color: $beige !important;
+}
+
+.text-cyan {
+  color: $cyan !important;
+}
+
+.text-green, .green {
+  color: #79C84A !important;
+}
diff --git a/app/assets/stylesheets/app.components.scss b/app/assets/stylesheets/app.components.scss
index e58909ed6..1959242d2 100644
--- a/app/assets/stylesheets/app.components.scss
+++ b/app/assets/stylesheets/app.components.scss
@@ -1,47 +1,60 @@
 .widget {
-
-	h1, h2, h3 {
-		margin: 0;
-		line-height: rem-calc(18);
-		font-size: rem-calc(14);
-		font-weight: 600;
-		color: black;
-	}
-	h1 {
-    font-size: rem-calc(16); text-transform: uppercase;
+  h1, h2, h3 {
+    margin: 0;
+    line-height: rem-calc(18);
+    font-size: rem-calc(14);
+    font-weight: 600;
+    color: black;
   }
-	h2 { font-weight: bold; }
-	//h3 { color: $red; }
+
+  h1 {
+    font-size: rem-calc(16);
+    text-transform: uppercase;
+  }
+
+  h2 {
+    font-weight: bold;
+  }
+
+  //h3 { color: $red; }
   h4 {
     font-size: rem-calc(12);
     margin: 8px 0;
   }
 
+  p {
+    font-size: rem-calc(14);
+    margin-top: 15px;
+  }
 
-  p { font-size: rem-calc(14); margin-top: 15px; }
+  a {
+    color: $black-light;
 
-	a {
-		color: $black-light;
-		&:hover { color: $red; }
-	}
-	.fa {
-		// color: $red;
-	}
+    &:hover {
+      color: $red;
+    }
+  }
 
-	.widget-content {
-		font-size: rem-calc(14);
-	}
+  .fa {
+    // color: $red;
+ 
+  }
 
-	.list-group-item {
-		&.no-b {
-			padding: 10px 15px;
-		}
-	}
+  .widget-content {
+    font-size: rem-calc(14);
+  }
+
+  .list-group-item {
+    &.no-b {
+      padding: 10px 15px;
+    }
+  }
 }
 
-
 //modal
-.modal-dialog { top: 90px; }
+.modal-dialog {
+  top: 90px;
+}
 
 .modal-header {
   .modal-logo {
@@ -52,12 +65,15 @@
     margin: 0 auto;
     max-height: 44px;
   }
+
   h1 {
     margin: 25px 0 20px 0;
     font-weight: bold;
     text-transform: uppercase;
     text-align: center;
+
     //color: $red;
+ 
   }
 }
 
@@ -90,16 +106,20 @@
     top: 0;
     left: 0;
     right: 0;
-    background-color: rgba(43,46,56,0.8);
+    background-color: rgba(43, 46, 56, 0.8);
     text-align: center;
     opacity: 0;
     -webkit-transition: all 0.1s ease-out;
     transition: all 0.1s ease-out;
     height: 180px;
     cursor: pointer;
-    .btn-group { margin-top: 70px;}
+
+    .btn-group {
+      margin-top: 70px;
+    }
+
     .btn {
-      background: rgba(255,255,255,0.1);
+      background: rgba(255, 255, 255, 0.1);
       border: 1px solid #fff;
       color: #fff;
     }
@@ -115,6 +135,7 @@
     width: 100%;
     display: block;
     padding: 1.25rem;
+
     .card-header-bg {
       background-size: cover;
       background-repeat: no-repeat;
@@ -122,8 +143,10 @@
       height: 180px;
     }
   }
+
   .card-block {
     padding: 0 1.25rem 1.25rem 1.25rem;
+
     .card-title {
       font-size: 1.5rem;
       line-height: 2rem;
@@ -131,10 +154,11 @@
       text-align: center;
       margin-top: 5px;
     }
+
     .card-meta {
       font-size: 1.2rem;
       margin: 0;
-      text-align: center
+      text-align: center;
     }
   }
 }
@@ -143,14 +167,20 @@
   max-width: $screen-md-min;
   margin: 0 auto;
 
-  h2, h3, h4, h5 { margin: 1.8em 0 1em 0; }
+  h2, h3, h4, h5 {
+    margin: 1.8em 0 1em 0;
+  }
 
   h2, h3 {
     color: $red;
     font-size: rem-calc(18);
     font-weight: bold;
   }
-  h2 { text-transform: uppercase; }
+
+  h2 {
+    text-transform: uppercase;
+  }
+
   h4 {
     font-weight: 600;
     font-size: rem-calc(16);
@@ -164,6 +194,7 @@
       max-height: 400px;
     }
   }
+
   img {
     display: block;
     max-width: 100%;
@@ -172,47 +203,63 @@
 }
 
 .label-staging {
-	position: absolute;
-	top: 50px;
+  position: absolute;
+  top: 50px;
 }
 
 .notification-open {
   a {
     position: relative;
+
     .badge {
       position: absolute;
-      top: 18px; right: 18px;
+      top: 18px;
+      right: 18px;
       padding: 3px 6px 1px 6px;
     }
+
     .menu-badge {
       position: absolute;
-      top: 0; right: 0;
+      top: 0;
+      right: 0;
       padding: 2px 4px 1px 3px;
       border: 2px solid white;
     }
   }
-  .fa { color: black; font-size: rem-calc(24); }
-}
 
+  .fa {
+    color: black;
+    font-size: rem-calc(24);
+  }
+}
 
 .panel {
   margin-bottom: 30px;
+
   .panel-heading {
     &.small {
       padding: 15px 15px;
     }
+
     &.picture {
       height: 250px;
       background-size: cover;
       background-position: center;
-      @include transition(opacity .5s ease);
+
+      @include transition(opacity 0.5s ease);
+
       cursor: pointer;
-      padding:0;
-      img { @include border-radius(6px 6px 0 0); }
+      padding: 0;
+
+      img {
+        @include border-radius(6px 6px 0 0);
+      }
+
       &:hover {
         opacity: 0.8;
       }
     }
+
     .align {
       position: relative;
       top: -7px;
@@ -225,32 +272,47 @@
 
   &:first-child {
     border-right: none;
+
     @include border-radius(3px 0 0 3px);
   }
+
   &:last-child {
     @include border-radius(0 3px 3px 0);
   }
+
   .title {
     margin: 10px 0;
     font-size: rem-calc(16);
     text-transform: uppercase;
     color: black;
   }
+
   .content {
     padding: 15px 0;
     background-color: $bg-gray;
+
     .wrap {
-      width: 100px; height: 100px;
+      width: 100px;
+      height: 100px;
       display: inline-block;
       background: white;
+
       @include border-radius(50%);
-      border: 3px solid;// $yellow;
+
+      border: 3px solid;
+
+      // $yellow;
+   
     }
+
     .price {
       position: relative;
-      top: 5px; left: 5px;
-      height: 84px; width: 84px;
+      top: 5px;
+      left: 5px;
+      height: 84px;
+      width: 84px;
       background-color: black;
+
       @include border-radius(50%);
 
       .amount {
@@ -261,6 +323,7 @@
         font-size: rem-calc(18);
         color: white;
       }
+
       .period {
         position: relative;
         top: -6px;
@@ -269,8 +332,10 @@
       }
     }
   }
+
   .cta-button {
     margin: 20px 0;
+
     .btn {
       outline: 0;
       font-weight: 600;
@@ -278,7 +343,9 @@
       background-color: white;
       padding-left: 30px;
       padding-right: 30px;
+
       //&:hover { background-color: $yellow; }
+   
     }
   }
 }
@@ -288,8 +355,10 @@
     //border-color: #ffdc4e;
     //background-color: #ffdc4e;
     @include border-radius(3px);
+
     padding: 5px 10px;
   }
+
   &.well-disabled {
     border-color: $gray-lighter;
     background-color: $gray-lighter;
@@ -310,25 +379,29 @@
   }
 }
 
-.avatar{
+.avatar {
   position: relative;
   display: block;
   border-radius: 500px;
   white-space: nowrap;
+
   &.avatar-block {
     white-space: inherit;
     height: 76px;
+
     .user-name {
       display: block;
       font-size: rem-calc(14);
       line-height: rem-calc(14);
     }
   }
-  img{
+
+  img {
     border-radius: 500px;
     width: 100%;
   }
-  i{
+
+  i {
     position: absolute;
     left: 0;
     top: 0;
@@ -337,31 +410,38 @@
     border-width: 2px;
     border-style: solid;
     border-radius: 100%;
-    &.md{
+
+    &.md {
       width: 12px;
       height: 12px;
       margin: 1px;
     }
-    &.right{
+
+    &.right {
       left: auto;
       right: 0;
     }
-    &.bottom{
+
+    &.bottom {
       left: auto;
       top: auto;
       bottom: 0;
       right: 0;
     }
-    &.on{
+
+    &.on {
       background-color: $brand-success;
     }
-    &.off{
+
+    &.off {
       background-color: $text-muted;
     }
-    &.busy{
+
+    &.busy {
       background-color: $brand-danger;
     }
-    &.away{
+
+    &.away {
       background-color: $brand-warning;
     }
   }
@@ -369,6 +449,7 @@
 
 .block-link {
   cursor: pointer;
+
   //&:hover { background-color: $yellow; }
 }
 
@@ -381,7 +462,11 @@
     font-size: rem-calc(26);
     padding: 0px 10px 0px 11px;
     vertical-align: bottom;
-    &.label-icon { font-size: rem-calc(22); padding: 4px 9px 1px 10px; }
+
+    &.label-icon {
+      font-size: rem-calc(22);
+      padding: 4px 9px 1px 10px;
+    }
   }
 }
 
@@ -390,8 +475,10 @@
   z-index: 101;
   height: 93%;
   background-color: white;
-  @include transition(.5s linear all);
-  opacity:1;
+
+  @include transition(0.5s linear all);
+
+  opacity: 1;
 
   .about-picture {
     padding: 70px 0;
@@ -399,18 +486,23 @@
     background-size: cover;
     margin-bottom: 30px;
   }
+
   .about-title, .about-title p {
     margin: 0;
     font-size: rem-calc(50);
     line-height: rem-calc(48);
     color: #fff;
-    font-weight: 900; //black
+    font-weight: 900;
+
+    //black
+ 
   }
 
   .about-title-aside {
     margin-top: 0;
     font-size: rem-calc(18);
   }
+
   p {
     font-size: rem-calc(18);
     line-height: rem-calc(30);
@@ -420,20 +512,19 @@
 
   &.ng-hide {
     opacity: 0;
-    @include transition(.5s linear all);
+
+    @include transition(0.5s linear all);
   }
 
   &.ng-hide-add,
   &.ng-hide-remove {
-    display:block!important;
+    display: block !important;
   }
 
-
   .last-update {
     text-align: right;
     margin-bottom: 2em;
   }
-
 }
 
 .event {
@@ -446,7 +537,6 @@
   color: white;
 }
 
-
 .event:hover * {
   color: #eee !important;
   border-color: #eee;
@@ -460,12 +550,13 @@
 .half-w {
   width: 50%;
 }
+
 .b-light-dark {
-border-color: #d0d0d0;
+  border-color: #d0d0d0;
 }
 
 .p-sm {
-padding: 10px;
+  padding: 10px;
 }
 
 .crop-155 {
@@ -496,24 +587,26 @@ padding: 10px;
   }
 }
 
-
 // angular-bootstrap accordions (enlightened version)
 .light-accordion > .panel-heading {
   padding-top: 0.2em;
   padding-bottom: 0.2em;
 }
+
 .light-accordion > .panel-heading > .panel-title {
   font-size: 12pt;
 }
 
 .app-generator {
   position: absolute;
-  bottom: 0; right: 10px;
+  bottom: 0;
+  right: 10px;
   z-index: 100;
   padding: 3px 15px;
   border: 1px solid $border-color;
   border-top-left-radius: 8px;
   background: $bg-gray;
+
   @media only screen and (max-width: 768px) {
     display: none;
   }
@@ -533,7 +626,7 @@ padding: 10px;
     right: 0;
     background: rgba(230, 230, 230, 0.7);
     position: absolute;
-    z-index:10;
+    z-index: 10;
     border-radius: 3px;
   }
 }
@@ -573,6 +666,7 @@ padding: 10px;
     font-size: 1.2em;
     line-height: 0;
   }
+
   .afterAmount {
     margin-left: -35px;
     font-weight: bold;
@@ -592,10 +686,13 @@ padding: 10px;
   }
 }
 
-
 .link-icon {
   color: #1c94c4;
-  i { margin: 0 5px 0 10px; }
+
+  i {
+    margin: 0 5px 0 10px;
+  }
+
   span {
     border-bottom: 1px dashed #00b3ee;
     text-decoration: none;
@@ -603,7 +700,6 @@ padding: 10px;
   }
 }
 
-
 .description-hover {
   span {
     display: inline-block;
@@ -651,6 +747,7 @@ padding: 10px;
     text-transform: uppercase;
   }
 }
+
 .calendar-legend-block {
   text-align: right;
   padding-right: 2em;
@@ -659,10 +756,12 @@ padding: 10px;
     font-size: 12px;
     font-style: italic;
   }
+
   .legends {
     display: flex;
     flex-direction: row-reverse;
   }
+
   .calendar-legend {
     border: 1px solid;
     border-left: 3px solid;
diff --git a/app/assets/stylesheets/app.functions.scss b/app/assets/stylesheets/app.functions.scss
index 85119fe8e..44bc93ce1 100644
--- a/app/assets/stylesheets/app.functions.scss
+++ b/app/assets/stylesheets/app.functions.scss
@@ -1,13 +1,14 @@
 // This is the default html and body font-size for the base rem value.
 $rem-base: 10px !default;
 
-
 // IMPORT ONCE
 // We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
 $modules: () !default;
+
 @mixin exports($name) {
-  @if (index($modules, $name) == false) {
+  @if index($modules, $name) == false {
     $modules: append($modules, $name);
+
     @content;
   }
 }
@@ -16,7 +17,6 @@ $modules: () !default;
 // @functions
 //
 
-
 // STRIP UNIT
 // It strips the unit of measure and returns it
 @function strip-unit($num) {
@@ -24,13 +24,17 @@ $modules: () !default;
 }
 
 // CONVERT TO REM
-@function convert-to-rem($value, $base-value: $rem-base)  {
+@function convert-to-rem($value, $base-value: $rem-base) {
   $value: strip-unit($value) / strip-unit($base-value) * 1rem;
-  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
+
+  @if $value == 0rem {
+    $value: 0;
+  }
+
+  // Turn 0rem into 0
   @return $value;
 }
 
-
 // REM CALC
 
 // New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
@@ -53,11 +57,15 @@ $modules: () !default;
 @function rem-calc($values, $base-value: $rem-base) {
   $max: length($values);
 
-  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
+  @if $max == 1 {
+    @return convert-to-rem(nth($values, 1), $base-value);
+  }
 
   $remValues: ();
+
   @for $i from 1 through $max {
     $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
   }
+
   @return $remValues;
 }
diff --git a/app/assets/stylesheets/app.layout.scss b/app/assets/stylesheets/app.layout.scss
index 1c257746b..eb84fdb79 100644
--- a/app/assets/stylesheets/app.layout.scss
+++ b/app/assets/stylesheets/app.layout.scss
@@ -1,321 +1,364 @@
 /*layout*/
 .header,
-.footer{
-	min-height: 50px;
-	padding: 0 15px;
-	> p{
-		margin-top: 15px;
-		display: inline-block;
-	}
-	> .btn,
-	> .btn-group,
-	> .btn-toolbar
-	{
-		margin-top: 14px;
-	}
-	> .btn-lg{
-		margin-top: 0;
-	}
-	.nav-tabs {
-		border: none;
-		margin-left: -15px;
-		margin-right: -15px;
-		> li {
-			a{
-				border: none !important;
-				border-radius: 0;
-				padding-top: 15px;
-				padding-bottom: 15px;
-				line-height: 20px;
-				&:hover,
-				&:focus
-				{
-					background-color: transparent;
-				}
-			}
-			&.active a{
-				color: $text-color;
-				&,
-				&:hover{
-					background-color: $body-bg;
-				}
-			}
-		}
-		&.nav-white{
-			> li.active a{
-				&,
-				&:hover{
-					background-color: #fff;
-				}
-			}
-		}
-	}
-	&.navbar{
-		border-radius: 0;
-		border: none;
-		margin-bottom: 0;
-		padding:0;
-		position: relative !important;
-		z-index: 1000;
-	}
+.footer {
+  min-height: 50px;
+  padding: 0 15px;
+
+  > p {
+    margin-top: 15px;
+    display: inline-block;
+  }
+
+  > .btn,
+  > .btn-group,
+  > .btn-toolbar {
+    margin-top: 14px;
+  }
+
+  > .btn-lg {
+    margin-top: 0;
+  }
+
+  .nav-tabs {
+    border: none;
+    margin-left: -15px;
+    margin-right: -15px;
+
+    > li {
+      a {
+        border: none !important;
+        border-radius: 0;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        line-height: 20px;
+
+        &:hover,
+        &:focus {
+          background-color: transparent;
+        }
+      }
+
+      &.active a {
+        color: $text-color;
+
+        &,
+        &:hover {
+          background-color: $body-bg;
+        }
+      }
+    }
+
+    &.nav-white {
+      > li.active a {
+        &,
+        &:hover {
+          background-color: #fff;
+        }
+      }
+    }
+  }
+
+  &.navbar {
+    border-radius: 0;
+    border: none;
+    margin-bottom: 0;
+    padding: 0;
+    position: relative !important;
+    z-index: 1000;
+  }
 }
 
 .header {
-	background-color: $header-bg;
-	@include box-shadow(0 1px 0px #cfcfcf);
+  background-color: $header-bg;
+
+  @include box-shadow(0 1px 0px #cfcfcf);
 }
 
-
 .heading {
+  .heading-btn {
+    a {
+      width: 100%;
+      padding: 35px 40%;
+      display: inline-block;
+      cursor: pointer;
+      color: black;
+
+      &:hover {
+        //background-color: $yellow;
+     
+      }
+
+      i:before {
+        content: "\f177";
+      }
+    }
+  }
 
-	.heading-btn {
-		a {
-			width: 100%;
-			padding: 35px 40%;
-			display: inline-block;
-			cursor: pointer;
-			color: black;
-			&:hover {
-				//background-color: $yellow;
-			}
-			i:before { content: "\f177"; }
-		}
-	}
   .heading-icon {
     width: 100%;
     padding: 35px 40%;
     display: inline-block;
     color: black;
   }
-	.heading-title {
-		//overflow: hidden;
-		height: 94px;
-		h1 {
-		  margin: 0 0 0 15px;
-		  padding: 36px 15px;
-		}
-	}
-	.heading-actions {
-		height: 94px;
-		text-align: center;
-	}
+
+  .heading-title {
+    //overflow: hidden;
+    height: 94px;
+
+    h1 {
+      margin: 0 0 0 15px;
+      padding: 36px 15px;
+    }
+  }
+
+  .heading-actions {
+    height: 94px;
+    text-align: center;
+  }
 }
 
-body.container{
-	padding: 0;
+body.container {
+  padding: 0;
 }
 
-.aside-md{
-	width: 250px;
+.aside-md {
+  width: 250px;
 }
 
 @media (min-width: 768px) {
-	body.container{
-		@include box-shadow(0 3px 60px rgba(0,0,0,0.3));
-		border-left: 1px solid darken($border-color, 10%);
-		border-right: 1px solid darken($border-color, 10%);
-	}
-	.app{
-		&,
-		body{
-			height:100%;
-			overflow: hidden;
-		}
-		.hbox{
-			&.stretch{
-				height:100%;
-			}
-		}
-		.vbox{
-			> section,
-			> footer{
-				position: absolute;
-			}
-			&.flex{
-				> section{
-					> section{
-						overflow: auto;
-					}
-				}
-			}
-		}
-	}
+  body.container {
+    @include box-shadow(0 3px 60px rgba(0, 0, 0, 0.3));
 
-	.hbox{
-		display: table;
-		table-layout: fixed;
-		border-spacing: 0;
-		width: 100%;
-		> aside,
-		> section{
-			display: table-cell;
-			vertical-align: top;
-			height: 100%;
-			float: none;
-			&.show,
-			&.hidden-sm	{
-				display: table-cell !important;
-			}
-		}
-	}
+    border-left: 1px solid darken($border-color, 10%);
+    border-right: 1px solid darken($border-color, 10%);
+  }
 
-	.vbox{
-		display: table;
-		border-spacing:0;
-		position: relative;
-		height: 100%;
-		width: 100%;
-		> section,
-		> footer {
-			top: 0;
-			bottom: 0;
-			width: 100%;
-		}
-		> header{
-			~ section {
-				top: 50px;
-			}
-			&.header-md{
-				~ section {
-					top: $header-md-height+2;
-				}
-			}
-		}
-		> section{
-			&.w-f{
-				bottom: 50px;
-			}
-		}
-		> footer {
-			top: auto;
-			z-index: 100;
-			~ section {
-				bottom: 50px;
-			}
-		}
-		&.flex{
-			> header,
-			> section,
-			> footer {
-				position: inherit;
-			}
-			> section{
-				display: table-row;
-				height: 100%;
-				> section {
-					position: relative;
-					height: 100%;
-					-webkit-overflow-scrolling:touch;
-					.ie & {
-						display: table-cell;
-					}
-					> section {
-						position: absolute;
-						top: 0;
-						bottom: 0;
-						left: 0;
-						right: 0;
-					}
-				}
-			}
-		}
-	}
+  .app {
+    &,
+    body {
+      height: 100%;
+      overflow: hidden;
+    }
 
-	.aside-xs{
-		width: 60px;
-	}
-	.aside-sm{
-		width: 150px;
-	}
-	.aside{
-		width: 200px;
-	}
-	.aside-md{
-		width: 250px;
-	}
-	.aside-lg{
-		width: 300px;
-	}
-	.aside-xl{
-		width: 360px;
-	}
-	.aside-xxl{
-		width: 480px;
-	}
+    .hbox {
+      &.stretch {
+        height: 100%;
+      }
+    }
 
-	.header-md{
-		height: $header-md-height;
-		.navbar-form{
-			margin-top: floor( ($header-md-height - 30)/2 );
-			margin-bottom: floor( ($header-md-height - 30)/2 );
-		}
-	}
+    .vbox {
+      > section,
+      > footer {
+        position: absolute;
+      }
 
-	.scrollable{
-		-webkit-overflow-scrolling:touch;
-	}
+      &.flex {
+        > section {
+          > section {
+            overflow: auto;
+          }
+        }
+      }
+    }
+  }
 
-	::-webkit-scrollbar {
-		width: 10px;
-		height: 10px;
-	}
-	::-webkit-scrollbar-thumb {
-		background-color:rgba(50,50,50,0.25);
-		border: 2px solid transparent;
-		border-radius: 10px;
-		background-clip: padding-box;
-	}
-	::-webkit-scrollbar-thumb:hover{
-		background-color:rgba(50,50,50,0.5);
-	}
-	::-webkit-scrollbar-track {
-		background-color:rgba(50,50,50,0.05);
-	}
+  .hbox {
+    display: table;
+    table-layout: fixed;
+    border-spacing: 0;
+    width: 100%;
+
+    > aside,
+    > section {
+      display: table-cell;
+      vertical-align: top;
+      height: 100%;
+      float: none;
+
+      &.show,
+      &.hidden-sm {
+        display: table-cell !important;
+      }
+    }
+  }
+
+  .vbox {
+    display: table;
+    border-spacing: 0;
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    > section,
+    > footer {
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+
+    > header {
+      ~ section {
+        top: 50px;
+      }
+
+      &.header-md {
+        ~ section {
+          top: $header-md-height + 2;
+        }
+      }
+    }
+
+    > section {
+      &.w-f {
+        bottom: 50px;
+      }
+    }
+
+    > footer {
+      top: auto;
+      z-index: 100;
+
+      ~ section {
+        bottom: 50px;
+      }
+    }
+
+    &.flex {
+      > header,
+      > section,
+      > footer {
+        position: inherit;
+      }
+
+      > section {
+        display: table-row;
+        height: 100%;
+
+        > section {
+          position: relative;
+          height: 100%;
+          -webkit-overflow-scrolling: touch;
+
+          .ie & {
+            display: table-cell;
+          }
+
+          > section {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .aside-xs {
+    width: 60px;
+  }
+
+  .aside-sm {
+    width: 150px;
+  }
+
+  .aside {
+    width: 200px;
+  }
+
+  .aside-md {
+    width: 250px;
+  }
+
+  .aside-lg {
+    width: 300px;
+  }
+
+  .aside-xl {
+    width: 360px;
+  }
+
+  .aside-xxl {
+    width: 480px;
+  }
+
+  .header-md {
+    height: $header-md-height;
+
+    .navbar-form {
+      margin-top: floor(($header-md-height - 30) / 2);
+      margin-bottom: floor(($header-md-height - 30) / 2);
+    }
+  }
+
+  .scrollable {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(50, 50, 50, 0.25);
+    border: 2px solid transparent;
+    border-radius: 10px;
+    background-clip: padding-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(50, 50, 50, 0.5);
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: rgba(50, 50, 50, 0.05);
+  }
 }
 
-.scrollable{
-	overflow-x: hidden;
-	overflow-y: auto;
+.scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .no-touch {
-	.scrollable.hover {
-		overflow-y: hidden;
-		&:hover
-		{
-			overflow: visible;
-			overflow-y: auto;
-		}
-	}
-	::-webkit-scrollbar-button {
-		width: 10px;
-		height: 6px;
-		background-color:rgba(50,50,50,0.05);
-	}
+  .scrollable.hover {
+    overflow-y: hidden;
+
+    &:hover {
+      overflow: visible;
+      overflow-y: auto;
+    }
+  }
+
+  ::-webkit-scrollbar-button {
+    width: 10px;
+    height: 6px;
+    background-color: rgba(50, 50, 50, 0.05);
+  }
 }
 
-.slimScrollBar{
-	border-radius: 5px;
-	border: 2px solid transparent;
-	border-radius: 10px;
-	background-clip: padding-box !important;
+.slimScrollBar {
+  border-radius: 5px;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  background-clip: padding-box !important;
 }
 
-
 @media print {
-  html, body, .hbox, .vbox{
+  html, body, .hbox, .vbox {
     height: auto;
   }
-  .vbox{
-		> section,
-		> footer{
-			position: relative;
-		}
-	}
+
+  .vbox {
+    > section,
+    > footer {
+      position: relative;
+    }
+  }
 }
 
-
-
 .datepicker-container {
   position: relative;
   z-index: 100;
@@ -327,7 +370,7 @@ body.container{
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   position: absolute;
-  right:0;
+  right: 0;
   left: 0;
   background-color: #ffffff;
 
@@ -339,7 +382,7 @@ body.container{
     vertical-align: middle;
 
     div.input-group {
-      float:right;
+      float: right;
 
       ul.dropdown-menu {
         left: -5em !important;
@@ -355,10 +398,9 @@ body.container{
 }
 
 .customMenuInput {
-  width:100% !important;
+  width: 100% !important;
 }
 
-
 .reservations-locked {
   background-color: #f5f5f5;
 }
@@ -369,8 +411,8 @@ body.container{
   background-color: #e4e4e4;
   padding: 0.7em 0.7em;
   font-size: 90%;
-  display:inline-block;
-  vertical-align:middle;
+  display: inline-block;
+  vertical-align: middle;
 
   .reservation-time {
     color: #606060;
@@ -387,7 +429,6 @@ body.container{
     float: left;
     margin-right: 1em;
   }
-
 }
 
 .custom-logo-container {
@@ -410,7 +451,7 @@ body.container{
       width: auto;
       max-height: 44px;
       max-width: 100%;
-      margin:auto;
+      margin: auto;
     }
 
     &:hover .tools-box {
@@ -453,7 +494,7 @@ body.container{
       width: auto;
       max-height: 16px;
       max-width: 16px;
-      margin:auto;
+      margin: auto;
     }
 
     &:hover .tools-box {
@@ -491,7 +532,7 @@ body.container{
       width: auto;
       max-height: 185px;
       max-width: 100%;
-      margin:auto;
+      margin: auto;
     }
 
     &:hover .tools-box {
@@ -546,7 +587,6 @@ body.container{
   .profile-top-infos {
     padding: 30px 15px 30px 15px;
 
-
     .private-profile {
       color: #000;
       border: 1px solid $border-color;
@@ -565,10 +605,10 @@ body.container{
     padding: 43px 15px 15px 15px;
     text-align: center;
 
-
     .avatar {
       display: inline-block;
       width: 140px;
+
       img {
         border: 9px solid #fff;
         background-color: #fff;
@@ -593,7 +633,9 @@ body.container{
         color: $input-color;
         margin-bottom: 5px;
 
-        i { vertical-align: middle; }
+        i {
+          vertical-align: middle;
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/app.nav.scss b/app/assets/stylesheets/app.nav.scss
index aa831b9ab..c6e4ab790 100644
--- a/app/assets/stylesheets/app.nav.scss
+++ b/app/assets/stylesheets/app.nav.scss
@@ -1,452 +1,529 @@
 /*primary nav*/
-.navbar-header{
-	position: relative;
-	> .btn{
-		position: absolute;
-		font-size: 1.3em;
-		padding: 9px 16px;
-		line-height: 30px;
-		right: 0;
-	}
-	.navbar-brand + .btn{
-		right: 0;
-		top:0;
-		left: auto;
-	}
+.navbar-header {
+  position: relative;
+
+  > .btn {
+    position: absolute;
+    font-size: 1.3em;
+    padding: 9px 16px;
+    line-height: 30px;
+    right: 0;
+  }
+
+  .navbar-brand + .btn {
+    right: 0;
+    top: 0;
+    left: auto;
+  }
 }
 
-.navbar-brand{
-	float: none;
-	text-align: center;
-	font-size: 20px;
-	font-weight: 700;
-	height: auto;
-	line-height: 50px;
-	display: inline-block;
-	padding: 0 15px;
-	&:hover{
-		text-decoration: none;
-	}
-	img{
-		max-height: 20px;
-		margin-top: -4px;
-		vertical-align: middle;
-		display: initial;
-	}
+.navbar-brand {
+  float: none;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 700;
+  height: auto;
+  line-height: 50px;
+  display: inline-block;
+  padding: 0 15px;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  img {
+    max-height: 20px;
+    margin-top: -4px;
+    vertical-align: middle;
+    display: initial;
+  }
 }
 
 .nav-primary {
-	li {
-		> a > i{
-			margin: floor(-($nav-primary-height - $line-height-computed)/2) -10px;
-			line-height: $nav-primary-height;
-			width: $nav-primary-height;
-			float: left;
-			margin-right: 5px;
-			text-align: center;
-			position: relative;
-			overflow: hidden;
-			&:before{
-				position: relative;
-				z-index: 2;
-			}
-		}
-	}
-	ul.nav {
-		> li {
-			> a{
-				padding: floor(($nav-primary-height - $line-height-computed)/2) 15px;
-				position: relative;
-				font-size: 14px;
-				@include transition(background-color .2s ease-in-out 0s);
-				.no-borders & {
-					border-width: 0 !important;
-				}
-				> .badge{
-					font-size: 11px;
-					padding: 2px 5px 2px 4px;
-					margin-top: 2px;
-				}
-				> .text-muted{
-					margin: 0 3px;
-				}
-				&.active{
-					.text{
-						display: none;
-					}
-					.text-active{
-						display: inline-block !important;
-					}
-				}
-			}
-			li a{
-				font-weight: normal;
-				text-transform: none;
-			}
-			&.active{
-				> ul{
-					display: block;
-				}
-			}
-		}
-        > li.menu-spacer {
-          height: 1px;
-          margin: 6px 80% 6px 5px;
-          background: linear-gradient(45deg, black, transparent);
-        }
-		ul{
-			display: none;
-		}
-	}
+  li {
+    > a > i {
+      margin: floor(-($nav-primary-height - $line-height-computed) / 2) -10px;
+      line-height: $nav-primary-height;
+      width: $nav-primary-height;
+      float: left;
+      margin-right: 5px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
 
-	.bg-black &{
-		> ul.nav-main{
-			> li{
-				&:hover,
+      &:before {
+        position: relative;
+        z-index: 2;
+      }
+    }
+  }
+
+  ul.nav {
+    > li {
+      > a {
+        padding: floor(($nav-primary-height - $line-height-computed) / 2) 15px;
+        position: relative;
+        font-size: 14px;
+
+        @include transition(background-color 0.2s ease-in-out 0s);
+
+        .no-borders & {
+          border-width: 0 !important;
+        }
+
+        > .badge {
+          font-size: 11px;
+          padding: 2px 5px 2px 4px;
+          margin-top: 2px;
+        }
+
+        > .text-muted {
+          margin: 0 3px;
+        }
+
+        &.active {
+          .text {
+            display: none;
+          }
+
+          .text-active {
+            display: inline-block !important;
+          }
+        }
+      }
+
+      li a {
+        font-weight: normal;
+        text-transform: none;
+      }
+
+      &.active {
+        > ul {
+          display: block;
+        }
+      }
+    }
+
+    > li.menu-spacer {
+      height: 1px;
+      margin: 6px 80% 6px 5px;
+      background: linear-gradient(45deg, black, transparent);
+    }
+
+    ul {
+      display: none;
+    }
+  }
+
+  .bg-black & {
+    > ul.nav-main {
+      > li {
+        &:hover,
         &:focus,
         &:active,
-        &.active{
-        	> a{
-        		background-color: $brand-success;
-        	}
+        &.active {
+          > a {
+            background-color: $brand-success;
+          }
         }
-			}
-		}
-	}
+      }
+    }
+  }
 }
 
 @media (min-width: 768px) {
-	.visible-nav-xs{display: none;}
-	.nav-xs {
-		width: $nav-xs-width;
-		> .nav-container { width: $nav-xs-width; }
-		.slimScrollDiv,
-		.slim-scroll {
-			overflow: visible !important;
-		}
-		.slimScrollBar,
-		.slimScrollRail {
-			display: none !important;
-		}
-		.scrollable{
-			overflow: visible;
-		}
-		.nav-primary{
-			> ul {
-				> li {
-					> a {
-						position: relative;
-						padding: 0 !important;
-						font-size: 11px;
-						text-align: center;
-						height: $nav-xs-height;
-						overflow-y: hidden;
-						border: none !important;
-						span {
-							display: table-cell;
-							vertical-align: middle;
-							height: $nav-xs-height;
-							width: $nav-xs-width;
-							&.pull-right{
-								display: none !important;
-							}
-						}
-						i{
-							width: auto;
-							float: none;
-							display: block;
-							font-size: 16px;
-							margin: 0;
-							line-height: $nav-xs-height;
-							border: none !important;
-							@include transition(margin-top 0.2s);
-							b{
-								left: 0 !important;
-							}
-						}
-						.badge{
-							position: absolute;
-							right: 10px;
-							top: 4px;
-							z-index: 3;
-						}
-					}
-					&:hover,
-					&:focus,
-					&:active,
-					&.active
-					{
-						> a{
-							i{
-								margin-top: -$nav-xs-height;
-							}
-						}
-					}
-				}
-				ul{
-					display: none !important;
-					position: absolute;
-					left: 100%;
-					top: 0;
-					z-index: 1050;
-					width: 220px;
-					-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-					box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-				}
-			}
-			li:hover,
-			li:focus,
-			li:active
-			{
-				> ul{
-					display: block !important;
-				}
-			}
-		}
-		&.nav-xs-right{
-			.nav-primary > ul ul{
-				left: auto;
-				right: 100%;
-			}
-		}
-		> .vbox > .header,
-		> .vbox > .footer {
-			padding:0 floor(($nav-xs-width - 30px)/2);
-		}
-		.hidden-nav-xs{
-			display: none;
-		}
-		.visible-nav-xs{
-			display: inherit;
-		}
-		.text-center-nav-xs{
-			text-align: center;
-		}
+  .visible-nav-xs {
+    display: none;
+  }
 
-		.nav-user{
-			padding-left: 0;
-			padding-right: 0;
-			.avatar{
-				float: none !important;
-				margin-right: 0;
-			}
-			.dropdown{
-				> a{
-					display: block;
-					text-align: center;
-				}
-			}
-		}
-		.navbar-header{
-			float: none;
-		}
-		.navbar-brand{
-			display: block;
-			padding: 0;
-			img{
-				margin-right:0;
-			}
-		}
-		.navbar{
-			padding: 0
-		}
-	}
-	.navbar-brand{
-		.header-md &{
-			line-height: $header-md-height;
-			img{
-				max-height: 44px;
-			}
-		}
-	}
-	.navbar-nav{
-		> li{
-			> a{
-				.header-md &{
-					padding: floor(($header-md-height - $line-height-computed)/2 - 1);
-				}
-			}
-		}
-	}
+  .nav-xs {
+    width: $nav-xs-width;
+
+    > .nav-container {
+      width: $nav-xs-width;
+    }
+
+    .slimScrollDiv,
+    .slim-scroll {
+      overflow: visible !important;
+    }
+
+    .slimScrollBar,
+    .slimScrollRail {
+      display: none !important;
+    }
+
+    .scrollable {
+      overflow: visible;
+    }
+
+    .nav-primary {
+      > ul {
+        > li {
+          > a {
+            position: relative;
+            padding: 0 !important;
+            font-size: 11px;
+            text-align: center;
+            height: $nav-xs-height;
+            overflow-y: hidden;
+            border: none !important;
+
+            span {
+              display: table-cell;
+              vertical-align: middle;
+              height: $nav-xs-height;
+              width: $nav-xs-width;
+
+              &.pull-right {
+                display: none !important;
+              }
+            }
+
+            i {
+              width: auto;
+              float: none;
+              display: block;
+              font-size: 16px;
+              margin: 0;
+              line-height: $nav-xs-height;
+              border: none !important;
+
+              @include transition(margin-top 0.2s);
+
+              b {
+                left: 0 !important;
+              }
+            }
+
+            .badge {
+              position: absolute;
+              right: 10px;
+              top: 4px;
+              z-index: 3;
+            }
+          }
+
+          &:hover,
+          &:focus,
+          &:active,
+          &.active {
+            > a {
+              i {
+                margin-top: -$nav-xs-height;
+              }
+            }
+          }
+        }
+
+        ul {
+          display: none !important;
+          position: absolute;
+          left: 100%;
+          top: 0;
+          z-index: 1050;
+          width: 220px;
+          -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        }
+      }
+
+      li:hover,
+      li:focus,
+      li:active {
+        > ul {
+          display: block !important;
+        }
+      }
+    }
+
+    &.nav-xs-right {
+      .nav-primary > ul ul {
+        left: auto;
+        right: 100%;
+      }
+    }
+
+    > .vbox > .header,
+    > .vbox > .footer {
+      padding: 0 floor(($nav-xs-width - 30px) / 2);
+    }
+
+    .hidden-nav-xs {
+      display: none;
+    }
+
+    .visible-nav-xs {
+      display: inherit;
+    }
+
+    .text-center-nav-xs {
+      text-align: center;
+    }
+
+    .nav-user {
+      padding-left: 0;
+      padding-right: 0;
+
+      .avatar {
+        float: none !important;
+        margin-right: 0;
+      }
+
+      .dropdown {
+        > a {
+          display: block;
+          text-align: center;
+        }
+      }
+    }
+
+    .navbar-header {
+      float: none;
+    }
+
+    .navbar-brand {
+      display: block;
+      padding: 0;
+
+      img {
+        margin-right: 0;
+      }
+    }
+
+    .navbar {
+      padding: 0;
+    }
+  }
+
+  .navbar-brand {
+    .header-md & {
+      line-height: $header-md-height;
+
+      img {
+        max-height: 44px;
+      }
+    }
+  }
+
+  .navbar-nav {
+    > li {
+      > a {
+        .header-md & {
+          padding: floor(($header-md-height - $line-height-computed) / 2 - 1);
+        }
+      }
+    }
+  }
 }
 
 @media (max-width: 767px) {
-	.navbar-fixed-top-xs{
-		position: fixed !important;
-		left: 0;
-		width: 100%;
-		z-index: 1100;
-		// + *{
-		// 	padding-top: 50px !important;
-		// }
-	}
-	.nav-bar-fixed-bottom{
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		width: 100%;
-		z-index: 1100;
-	}
-	/* .off screen nav from left or right*/
-	html, body{
-		overflow-x: hidden;
-		min-height: 100%;
-	}
-	.nav-primary{
-		.dropdown-menu{
-			position: relative;
-			float:none;
-			left: 0;
-			margin-left: 0;
-			padding: 0;
-			a{
-				padding: 15px;
-				border-bottom: 1px solid #eee;
-			}
-			li:last-child{
-				a{
-					border-bottom: none;
-				}
-			}
-		}
-	}
-	.navbar-header{
-		text-align: center;
-	}
-	.nav-user{
-		margin: 0;
-		padding: 15px;
-		&.open{
-			display: inherit !important;
-		}
-		.dropdown-menu{
-			display: block;
-			position: static;
-			float: none;
-		}
-		.dropdown > a{
-			display: block;
-			text-align: center;
-			font-size: 18px;
-			padding-bottom: 10px;
-		}
-		.avatar{
-			width: 160px !important;
-			float: none !important;
-			display: block;
-			margin: 20px auto;
-			padding: 5px;
-			background-color: rgba(255, 255, 255, 0.1);
-			position: relative;
-			&:before {
-				content: "";
-				position: absolute;
-				left: 5px;
-				right: 5px;
-				bottom: 5px;
-				top: 5px;
-				border: 4px solid #fff;
-				border-radius: 500px;
-			}
-		}
-	}
-	.nav-off-screen {
-		display: block !important;
-		position: absolute;
-		left: 0;
-		top: 0;
-		bottom: 0;
-		width: $off-screen-nav-width;
-		visibility: visible;
-		overflow-x: hidden;
-		overflow-y: auto;
-		-webkit-overflow-scrolling: touch;
-		.nav-primary{
-			display: block !important;
-		}
-		.navbar-fixed-top-xs{
-			width: $off-screen-nav-width;
-		}
-		&.push-right{
-			.navbar-fixed-top-xs{
-				left: 100% - $off-screen-nav-width;
-			}
-		}
-		&.push-right{
-			left: auto;
-			right: 0;
-			+ *{
-				@include translate3d(-$off-screen-nav-width, 0px, 0px);
-			}
-		}
-		+ *{
-			background-color: $body-bg;
-			@include transition-transform(0.2s ease-in-out);
-			@include transition-delay(0s);
-			@include translate3d(0px, 0px, 0px);
-			@include backface-visibility(hidden);
-			@include translate3d($off-screen-nav-width, 0px, 0px);
-			overflow: hidden;
-			position: absolute;
-			width: 100%;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			z-index: 2;
-			.nav-off-screen-block {
-				display:block !important;
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				z-index: 1950;
-			}
-		}
-	}
+  .navbar-fixed-top-xs {
+    position: fixed !important;
+    left: 0;
+    width: 100%;
+    z-index: 1100;
 
-	.navbar + section{
-		.nav-off-screen{
-			top: 50px;
-			+ *{
-				top: 50px;
-			}
-		}
-	}
+    // + *{
+    // 	padding-top: 50px !important;
+    // }
+ 
+  }
 
-	.slimScrollDiv,
-	.slim-scroll {
-		overflow: visible !important;
-		height: auto !important;
-	}
-	.slimScrollBar,
-	.slimScrollRail {
-		display: none !important;
-	}
+  .nav-bar-fixed-bottom {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    z-index: 1100;
+  }
+
+  /* .off screen nav from left or right*/
+  html, body {
+    overflow-x: hidden;
+    min-height: 100%;
+  }
+
+  .nav-primary {
+    .dropdown-menu {
+      position: relative;
+      float: none;
+      left: 0;
+      margin-left: 0;
+      padding: 0;
+
+      a {
+        padding: 15px;
+        border-bottom: 1px solid #eee;
+      }
+
+      li:last-child {
+        a {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+
+  .navbar-header {
+    text-align: center;
+  }
+
+  .nav-user {
+    margin: 0;
+    padding: 15px;
+
+    &.open {
+      display: inherit !important;
+    }
+
+    .dropdown-menu {
+      display: block;
+      position: static;
+      float: none;
+    }
+
+    .dropdown > a {
+      display: block;
+      text-align: center;
+      font-size: 18px;
+      padding-bottom: 10px;
+    }
+
+    .avatar {
+      width: 160px !important;
+      float: none !important;
+      display: block;
+      margin: 20px auto;
+      padding: 5px;
+      background-color: rgba(255, 255, 255, 0.1);
+      position: relative;
+
+      &:before {
+        content: "";
+        position: absolute;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        top: 5px;
+        border: 4px solid #fff;
+        border-radius: 500px;
+      }
+    }
+  }
+
+  .nav-off-screen {
+    display: block !important;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: $off-screen-nav-width;
+    visibility: visible;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .nav-primary {
+      display: block !important;
+    }
+
+    .navbar-fixed-top-xs {
+      width: $off-screen-nav-width;
+    }
+
+    &.push-right {
+      .navbar-fixed-top-xs {
+        left: 100% - $off-screen-nav-width;
+      }
+    }
+
+    &.push-right {
+      left: auto;
+      right: 0;
+
+      + * {
+        @include translate3d(-$off-screen-nav-width, 0px, 0px);
+      }
+    }
+
+    + * {
+      background-color: $body-bg;
+
+      @include transition-transform(0.2s ease-in-out);
+      @include transition-delay(0s);
+      @include translate3d(0px, 0px, 0px);
+      @include backface-visibility(hidden);
+      @include translate3d($off-screen-nav-width, 0px, 0px);
+
+      overflow: hidden;
+      position: absolute;
+      width: 100%;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 2;
+
+      .nav-off-screen-block {
+        display: block !important;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1950;
+      }
+    }
+  }
+
+  .navbar + section {
+    .nav-off-screen {
+      top: 50px;
+
+      + * {
+        top: 50px;
+      }
+    }
+  }
+
+  .slimScrollDiv,
+  .slim-scroll {
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  .slimScrollBar,
+  .slimScrollRail {
+    display: none !important;
+  }
 }
 
-
 #nav {
-	// border-right: 1px solid $red-dark;
-	.nav {
-		//background-color: $red;
-		> li {
-			> a {
-				padding: 13px 17px;
-				font-weight: 600;
-				color: white;
-				&:hover,
-				&:focus, &.active {
-					//background-color: $red-light;
-					color: white;
-				}
-				&.active {
-					border-left: 3px solid;// #870003;
-				}
-			}
-		}
-	}
+  // border-right: 1px solid $red-dark;
+  .nav {
+    //background-color: $red;
+    > li {
+      > a {
+        padding: 13px 17px;
+        font-weight: 600;
+        color: white;
+
+        &:hover,
+        &:focus, &.active {
+          //background-color: $red-light;
+          color: white;
+        }
+
+        &.active {
+          border-left: 3px solid;
+
+          // #870003;
+       
+        }
+      }
+    }
+  }
 }
 
 // overrides bootstrap
@@ -454,7 +531,6 @@
   cursor: pointer;
 }
 
-
 .user-profile-nav > a {
   display: inline-block !important;
   padding: 11px 44px !important;
diff --git a/app/assets/stylesheets/app.plugins.scss b/app/assets/stylesheets/app.plugins.scss
index 8145371a0..e83f96a01 100644
--- a/app/assets/stylesheets/app.plugins.scss
+++ b/app/assets/stylesheets/app.plugins.scss
@@ -1,23 +1,25 @@
 // medium editor placeholder
 .medium-editor-placeholder {
-    min-height: 30px; // fix for firefox
+  min-height: 30px;
+
+  // fix for firefox
 }
 
 //xeditable
-.editable-buttons{
-  button[type=submit].btn-primary{
+.editable-buttons {
+  button[type=submit].btn-primary {
     @extend .btn-warning;
   }
 }
 
-
 //summernote
 .note-editor .note-editable {
   background-color: white;
 }
+
 .note-editor {
   .form-group {
-    margin-left:  0px;
+    margin-left: 0px;
     margin-right: 0px;
   }
 
@@ -30,7 +32,6 @@
   }
 }
 
-
 // Growl
 .growl {
   top: 90px;
@@ -57,6 +58,7 @@
   height: 40px;
   line-height: 18px;
   padding: 10px;
+
   //&:hover, &:active, &.fc-state-active { background-color: $yellow; }
 }
 
@@ -105,7 +107,10 @@
   cursor: pointer;
   z-index: 9999;
   text-align: right;
-  .training-reserve &, .machine-reserve &, .public-calendar & { display: none; }
+
+  .training-reserve &, .machine-reserve &, .public-calendar & {
+    display: none;
+  }
 }
 
 .fc-v-event.fc-end {
@@ -127,18 +132,13 @@
 }
 
 .fc-selected {
-  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2);
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
 }
 
-
-
-
 .editable-input label {
   display: block;
 }
 
-
-
 /* ==========================================================================
    Slider
    ========================================================================== */
@@ -158,29 +158,37 @@
     color: white;
     font-weight: 800;
     text-align: center;
+
     a {
       color: white;
-      &:hover { color: $yellow; }
+
+      &:hover {
+        color: $yellow;
+      }
     }
   }
+
   .description {
     font-size: rem-calc(18);
     line-height: rem-calc(18);
     color: white;
   }
-
 }
 
 .carousel-control {
   cursor: pointer;
   background: none;
+
   @include border-radius($border-radius-base);
+
   &:hover, &:focus {
     //color: $yellow;
+ 
   }
 
   .glyphicon-chevron-left {
     font-family: 'fontawesome' !important;
+
     &:before {
       content: "\f053" !important;
     }
@@ -188,12 +196,13 @@
 
   .glyphicon-chevron-right {
     font-family: 'fontawesome' !important;
+
     &:before {
       content: "\f054" !important;
     }
   }
-
 }
+
 .carousel-indicators {
   display: none;
 }
@@ -222,47 +231,55 @@
 //    }
 // }
 
-
-
-.banner { }
+.banner {}
 
 .slider {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
+
   &.slider-min {
     .slider-arrows {
       bottom: 40%;
       position: relative;
     }
+
     .slider-arrow {
       margin-bottom: 0;
       color: black;
       border: none;
+
       &.slider-arrow--left {
         left: -16px;
       }
+
       &.slider-arrow--right {
         right: -16px;
       }
 
       .icon {
         font-size: 24px;
+
         &.icon-angle-left {
           width: 18px;
         }
-        &:hover { color: $yellow; }
-      }
 
+        &:hover {
+          color: $yellow;
+        }
+      }
     }
   }
+
   &.slider-actu {
     .slider-arrows {
-      .slider-arrow--left { display: none; }
+      .slider-arrow--left {
+        display: none;
+      }
+
       .slider-arrow--right {
         bottom: 41px;
-
       }
     }
   }
@@ -271,9 +288,11 @@
 .slides {
   width: 100%;
   height: 100%;
+
   /* Clear fix */
   overflow: hidden;
   *zoom: 1;
+
   /**
    * Prevent blinking issue
    * Not tested. Experimental.
@@ -286,6 +305,7 @@
   height: 100%;
   float: left;
   clear: none;
+
   &.content_article {
     height: 620px;
     -webkit-background-size: cover;
@@ -296,6 +316,7 @@
     text-align: center;
     position: relative;
   }
+
   .content_article-wrapper {
     position: absolute;
     bottom: 0;
@@ -304,6 +325,7 @@
     margin: 0 auto;
     left: 0;
     right: 0;
+
     .content_article-h {
       font-weight: 900;
       color: white;
@@ -314,6 +336,7 @@
       margin-bottom: 20px;
       line-height: 50px;
     }
+
     .content_article-c {
       color: $red;
       font-size: 20px;
@@ -321,6 +344,7 @@
       margin-top: 0;
       margin-bottom: 10px;
     }
+
     .content_article-p {
       // font-family: $font-proxima-condensed;
       font-size: 20px;
@@ -328,13 +352,16 @@
       margin: 0;
       line-height: 30px;
     }
+
     .content_article-btns {
       margin-top: 40px;
       clear: both;
+
       .header_nav-item-a {
         color: #fff;
         text-decoration: none;
       }
+
       .header_nav-item-a--btn {
         padding: 12px 20px;
         border-radius: 5px;
@@ -343,6 +370,7 @@
         text-transform: uppercase;
         font-family: $font-proxima-condensed;
         font-weight: 600;
+
         &:hover {
           background-color: $yellow;
           color: black;
@@ -358,11 +386,16 @@
   margin-bottom: -20px;
   padding: 20px;
   color: white;
-
-  width: 58px; height: 58px;
+  width: 58px;
+  height: 58px;
   border: 3px solid white;
   border-radius: 50%;
-  &:hover { border-color: $yellow; color: $yellow; }
+
+  &:hover {
+    border-color: $yellow;
+    color: $yellow;
+  }
+
   .icon {
     text-decoration: none;
     display: inline-block;
@@ -373,12 +406,15 @@
     right: 0;
     margin: 0 auto;
     width: 12px;
+
     &.icon-angle-left {
       width: 18px;
     }
-    &:hover { color: $yellow; }
-  }
 
+    &:hover {
+      color: $yellow;
+    }
+  }
 }
 
 .home {
@@ -420,12 +456,12 @@
   background: #ccc;
 }
 
-
 // Twitter
 #twitter {
   ul {
     margin: 0px 15px;
     padding-left: 0;
+
     li {
       display: block;
     }
diff --git a/app/assets/stylesheets/app.printer.scss b/app/assets/stylesheets/app.printer.scss
index 5a7e2c1db..b178df287 100644
--- a/app/assets/stylesheets/app.printer.scss
+++ b/app/assets/stylesheets/app.printer.scss
@@ -1,3 +1,3 @@
 /*
  *= require fullcalendar/dist/fullcalendar.print
- */
\ No newline at end of file
+ */
diff --git a/app/assets/stylesheets/app.responsive.scss b/app/assets/stylesheets/app.responsive.scss
index 1f447de78..7c2a30417 100644
--- a/app/assets/stylesheets/app.responsive.scss
+++ b/app/assets/stylesheets/app.responsive.scss
@@ -1,6 +1,8 @@
-
 @media screen and (max-width: $screen-sm-min) {
-  .modal-dialog { top: 0; }
+  .modal-dialog {
+    top: 0;
+  }
+
   .modal-header {
     .modal-logo {
       display: none;
@@ -8,38 +10,43 @@
   }
 
   .about-fablab {
-  	.about-title {
-    	font-size: rem-calc(30);
-    	line-height: rem-calc(28);
-    	text-align: center;
-	}
-	.about-picture {
-	  padding: 70px 0;
-	  height: 226px;
-	}
+    .about-title {
+      font-size: rem-calc(30);
+      line-height: rem-calc(28);
+      text-align: center;
+    }
+
+    .about-picture {
+      padding: 70px 0;
+      height: 226px;
+    }
   }
 
   // fix for full-calendar display on small devices
   .fc-toolbar {
     margin-bottom: 2.5em !important;
   }
-
 }
 
 @media screen and (max-width: $screen-md-min) {
+  .heading {
+    .heading-title {
+      h1 {
+        font-size: rem-calc(16);
+        padding: 26px 15px;
+      }
+    }
+  }
 
-	.heading {
-		.heading-title {
-			h1 {
-			  font-size: rem-calc(16);
-			  padding: 26px 15px;
-			}
-		}
-	}
+  .m-t-xxl-on-md {
+    margin-top: 60px;
+  }
 
-  .m-t-xxl-on-md { margin-top: 60px; }
-  .m-t-3xl-on-md { margin-top: 80px; }
-  .m-t-4xl-on-md { margin-top: 100px; }
+  .m-t-3xl-on-md {
+    margin-top: 80px;
+  }
+
+  .m-t-4xl-on-md {
+    margin-top: 100px;
+  }
 }
-
-
diff --git a/app/assets/stylesheets/app.utilities.scss b/app/assets/stylesheets/app.utilities.scss
index ad1d4241c..a4d5e85f6 100644
--- a/app/assets/stylesheets/app.utilities.scss
+++ b/app/assets/stylesheets/app.utilities.scss
@@ -1,67 +1,142 @@
 .nopadding {
-   padding: 0 !important;
-   margin: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
 .no-upper {
   text-transform: none;
 }
 
-.font-felt { font-family: $font-felt; }
-
-p.font-felt {
-
+.font-felt {
+  font-family: $font-felt;
 }
+
+p.font-felt {}
+
 p, .widget p {
-  &.font-felt, .font-felt { font-size: rem-calc(18) !important; }
+  &.font-felt, .font-felt {
+    font-size: rem-calc(18) !important;
+  }
+
   &.fleche-left {
     position: relative;
     padding-left: 5px;
+
     span.or {
       border: 2px solid $yellow;
       border-radius: 50%;
       padding: 10px 17px 10px 17px;
     }
   }
+
   img.fleche-left {
     position: absolute;
     left: -35px;
     top: 15px;
   }
+
   img.fleche-right {
     position: absolute;
     right: -35px;
     top: 15px;
   }
+
   img.fleche-left-from-top {
     transform: rotate(90deg) scaleX(-1);
   }
+
   img.fleche-right-from-top {
-    transform: rotate(270deg)
+    transform: rotate(270deg);
   }
 }
 
-.pos-rlt{position: relative;}
-.pos-stc{position: static;}
-.pos-abt{position: absolute;}
-.line {*width: 100%;height: 2px;margin: 10px 0;font-size:0;overflow: hidden;}
-.line-s{height: 1px;}
-.line-xs{margin: 0}
-.line-lg{margin-top:15px;margin-bottom: 15px}
-.line-dashed{border-style: dashed !important;background-color: transparent;border-width:0;}
-.no-line{border-width: 0}
-.no-border, .no-borders{border-color:transparent;border-width:0}
-.no-radius{border-radius: 0}
-.block{display:block;}
-.block.hide{display: none;}
-.inline{display:inline-block !important;}
-.none{display: none;}
-.pull-left{float: left;}
-.pull-right-lg{float: right;}
-.pull-none{float: none;}
-.rounded{border-radius: 500px;}
+.pos-rlt {
+  position: relative;
+}
 
-.h480 { height: 480px; }
+.pos-stc {
+  position: static;
+}
+
+.pos-abt {
+  position: absolute;
+}
+
+.line {
+  *width: 100%;
+  height: 2px;
+  margin: 10px 0;
+  font-size: 0;
+  overflow: hidden;
+}
+
+.line-s {
+  height: 1px;
+}
+
+.line-xs {
+  margin: 0;
+}
+
+.line-lg {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.line-dashed {
+  border-style: dashed !important;
+  background-color: transparent;
+  border-width: 0;
+}
+
+.no-line {
+  border-width: 0;
+}
+
+.no-border, .no-borders {
+  border-color: transparent;
+  border-width: 0;
+}
+
+.no-radius {
+  border-radius: 0;
+}
+
+.block {
+  display: block;
+}
+
+.block.hide {
+  display: none;
+}
+
+.inline {
+  display: inline-block !important;
+}
+
+.none {
+  display: none;
+}
+
+.pull-left {
+  float: left;
+}
+
+.pull-right-lg {
+  float: right;
+}
+
+.pull-none {
+  float: none;
+}
+
+.rounded {
+  border-radius: 500px;
+}
+
+.h480 {
+  height: 480px;
+}
 
 // .btn-s-xs{min-width: 90px}
 // .btn-s-sm{min-width: 100px}
@@ -69,251 +144,747 @@ p, .widget p {
 // .btn-s-lg{min-width: 150px}
 // .btn-s-xl{min-width: 200px}
 
-.l-h-2x{line-height: rem-calc(18);}
+.l-h-2x {
+  line-height: rem-calc(18);
+}
+
 // .l-h-1x{line-height: 1.2;}
 // .l-h{line-height: 1.5;}
-.l-n { line-height: 1em; }
-.v-middle{vertical-align: middle !important;}
-.v-top{vertical-align: top !important;}
-.v-bottom{vertical-align: bottom !important;}
+.l-n {
+  line-height: 1em;
+}
 
-.font-normal{font-weight: normal;}
-.font-thin{font-weight: 300;}
-.font-sbold{font-weight: 600;}
-.font-bold{font-weight: 700;}
-.font-ebold{font-weight: 900;}
+.v-middle {
+  vertical-align: middle !important;
+}
 
-.text-xl{font-size: $font-size-xl;}
-.text-lg{font-size: $font-size-lg;}
-.text-md{font-size: $font-size-md;}
-.text-sm{font-size: $font-size-sm;}
-.text-xs{font-size: $font-size-xs;}
-.text-base{font-size: $font-size-base;}
-.text-ellipsis{
+.v-top {
+  vertical-align: top !important;
+}
+
+.v-bottom {
+  vertical-align: bottom !important;
+}
+
+.font-normal {
+  font-weight: normal;
+}
+
+.font-thin {
+  font-weight: 300;
+}
+
+.font-sbold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-ebold {
+  font-weight: 900;
+}
+
+.text-xl {
+  font-size: $font-size-xl;
+}
+
+.text-lg {
+  font-size: $font-size-lg;
+}
+
+.text-md {
+  font-size: $font-size-md;
+}
+
+.text-sm {
+  font-size: $font-size-sm;
+}
+
+.text-xs {
+  font-size: $font-size-xs;
+}
+
+.text-base {
+  font-size: $font-size-base;
+}
+
+.text-ellipsis {
   display: block;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow:ellipsis;
+  text-overflow: ellipsis;
 }
-.text-u-c, .upper{text-transform: uppercase;}
-.text-l-t{text-decoration: line-through;}
-.text-u-l, .underline {text-decoration: underline;}
-.text-c { text-transform: capitalize; }
 
-.text-italic { font-style: italic; }
+.text-u-c, .upper {
+  text-transform: uppercase;
+}
 
-.text-left { text-align: left !important; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
+.text-l-t {
+  text-decoration: line-through;
+}
 
-.text-active, .active > .text, .active > .auto .text{display: none !important;}
-.active > .text-active, .active > .auto .text-active{display: inline-block !important;}
-.box-shadow{
+.text-u-l, .underline {
+  text-decoration: underline;
+}
+
+.text-c {
+  text-transform: capitalize;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-active, .active > .text, .active > .auto .text {
+  display: none !important;
+}
+
+.active > .text-active, .active > .auto .text-active {
+  display: inline-block !important;
+}
+
+.box-shadow {
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
 }
 
-.cover { background-size:cover; }
-.break-word { word-wrap: break-word; }
+.cover {
+  background-size: cover;
+}
 
-.wrapper-xxs{padding: 4px 6px;}
-.wrapper-sm{padding: 5px 10px;}
-.wrapper{padding: 15px;}
-.wrapper-md{padding: 20px;}
-.wrapper-lg{padding: 30px;}
-.wrapper-xl{padding: 50px;}
-.padder{padding-left:15px;padding-right: 15px}
-.padder-icon{padding-left:30px;padding-right: 0px; padding-top: 3px; height: 21px}
-.padder-v{padding-top:15px;padding-bottom: 15px}
-.no-padder{padding: 0 !important;}
-.pull-in{margin-left: -15px;margin-right: -15px;}
-.pull-out{margin:-10px -15px;}
+.break-word {
+  word-wrap: break-word;
+}
 
-.width-35 { width: 35% !important; }
-.width-70 { width: 70%; }
-.width-90 { width: 90%; }
+.wrapper-xxs {
+  padding: 4px 6px;
+}
 
-.b{border: 1px solid rgba(0, 0, 0, 0.05)}
-.b-a{border: 1px solid $border-color}
-.b-t{border-top: 1px solid $border-color}
-.b-r{border-right: 1px solid $border-color !important;}
-.b-b{border-bottom: 1px solid $border-color}
-.b-l{border-left: 1px solid $border-color}
-.b-light{border-color: darken($brand-light, 5%)}
-.b-dark{border-color: lighten($brand-dark, 5%)}
-.b-primary{border-color: lighten($brand-primary, 5%)}
-.b-success{border-color: lighten($brand-success, 5%)}
-.b-info{border-color: lighten($brand-info, 5%)}
-.b-warning{border-color: lighten($brand-warning, 5%)}
-.b-danger{border-color: lighten($brand-danger, 5%)}
-.b-black{border-color: lighten($brand-black, 5%)}
-.b-white{border-color: #fff}
-.b-dashed{border-style: dashed !important;}
+.wrapper-sm {
+  padding: 5px 10px;
+}
 
-.b-2x{border-width: 2px}
-.b-3x{border-width: 3px}
-.b-4x{border-width: 4px}
-.b-5x{border-width: 5px}
+.wrapper {
+  padding: 15px;
+}
 
-.no-b { border: none !important; }
+.wrapper-md {
+  padding: 20px;
+}
 
-.r{
+.wrapper-lg {
+  padding: 30px;
+}
+
+.wrapper-xl {
+  padding: 50px;
+}
+
+.padder {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.padder-icon {
+  padding-left: 30px;
+  padding-right: 0px;
+  padding-top: 3px;
+  height: 21px;
+}
+
+.padder-v {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.no-padder {
+  padding: 0 !important;
+}
+
+.pull-in {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
+.pull-out {
+  margin: -10px -15px;
+}
+
+.width-35 {
+  width: 35% !important;
+}
+
+.width-70 {
+  width: 70%;
+}
+
+.width-90 {
+  width: 90%;
+}
+
+.b {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.b-a {
+  border: 1px solid $border-color;
+}
+
+.b-t {
+  border-top: 1px solid $border-color;
+}
+
+.b-r {
+  border-right: 1px solid $border-color !important;
+}
+
+.b-b {
+  border-bottom: 1px solid $border-color;
+}
+
+.b-l {
+  border-left: 1px solid $border-color;
+}
+
+.b-light {
+  border-color: darken($brand-light, 5%);
+}
+
+.b-dark {
+  border-color: lighten($brand-dark, 5%);
+}
+
+.b-primary {
+  border-color: lighten($brand-primary, 5%);
+}
+
+.b-success {
+  border-color: lighten($brand-success, 5%);
+}
+
+.b-info {
+  border-color: lighten($brand-info, 5%);
+}
+
+.b-warning {
+  border-color: lighten($brand-warning, 5%);
+}
+
+.b-danger {
+  border-color: lighten($brand-danger, 5%);
+}
+
+.b-black {
+  border-color: lighten($brand-black, 5%);
+}
+
+.b-white {
+  border-color: #fff;
+}
+
+.b-dashed {
+  border-style: dashed !important;
+}
+
+.b-2x {
+  border-width: 2px;
+}
+
+.b-3x {
+  border-width: 3px;
+}
+
+.b-4x {
+  border-width: 4px;
+}
+
+.b-5x {
+  border-width: 5px;
+}
+
+.no-b {
+  border: none !important;
+}
+
+.r {
   border-radius: $border-radius-base $border-radius-base $border-radius-base $border-radius-base;
 }
-.r-l{
+
+.r-l {
   border-radius: $border-radius-base 0 0 $border-radius-base;
 }
 
-.r-r{
+.r-r {
   border-radius: 0 $border-radius-base $border-radius-base 0;
 }
 
-.r-t{
+.r-t {
   border-radius: $border-radius-base $border-radius-base 0 0;
 }
 
-.r-b{
+.r-b {
   border-radius: 0 0 $border-radius-base $border-radius-base;
 }
-.r-n { border-radius: 0 0 0 0; }
 
-.p-xs { padding: 5px;}
-.p-s { padding: 10px;}
-.p-lg { padding: 30px; }
-.p-l { padding: 16px; }
+.r-n {
+  border-radius: 0 0 0 0;
+}
 
-.p-h-xs { padding-left: 5px; padding-right: 5px; }
-.p-h-s { padding-left: 10px; padding-right: 10px; }
-.p-h-l { padding-left: 16px; padding-right: 16px; }
-.p-h-lg { padding-left: 30px; padding-right: 30px; }
+.p-xs {
+  padding: 5px;
+}
 
-.m-xxs{margin: 2px 4px}
-.m-xs{margin: 5px;}
-.m-sm{margin: 10px;}
-.m{margin: 15px;}
-.m-md{margin: 20px;}
-.m-lg{margin: 30px;}
-.m-xl{margin: 50px;}
-.m-n{margin: 0 !important}
+.p-s {
+  padding: 10px;
+}
 
-.m-l-none{margin-left: 0}
-.m-l-xs{margin-left: 5px;}
-.m-l-sm{margin-left: 10px;}
-.m-l{margin-left: 15px}
-.m-l-md{margin-left: 20px;}
-.m-l-lg{margin-left: 30px;}
-.m-l-xl{margin-left: 40px;}
+.p-lg {
+  padding: 30px;
+}
 
-.m-l-n-xxs{margin-left: -1px}
-.m-l-n-xs{margin-left: -5px}
-.m-l-n-sm{margin-left: -10px}
-.m-l-n{margin-left: -15px}
-.m-l-n-md{margin-left: -20px}
-.m-l-n-lg{margin-left: -30px}
-.m-l-n-xl{margin-left: -40px}
+.p-l {
+  padding: 16px;
+}
 
-.m-t-none{margin-top:0}
-.m-t-xxs{margin-top: 1px;}
-.m-t-xs{margin-top: 5px;}
-.m-t-sm{margin-top: 10px;}
-.m-t{margin-top: 15px}
-.m-t-md{margin-top: 20px;}
-.m-t-lg{margin-top: 30px;}
-.m-t-xl{margin-top: 40px;}
+.p-h-xs {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 
-.m-t-n-xxs{margin-top: -1px}
-.m-t-n-xs{margin-top: -5px}
-.m-t-n-sm{margin-top: -10px}
-.m-t-n{margin-top: -15px}
-.m-t-n-md{margin-top: -20px}
-.m-t-n-lg{margin-top: -30px}
-.m-t-n-xl{margin-top: -40px}
+.p-h-s {
+  padding-left: 10px;
+  padding-right: 10px;
+}
 
-.m-r-none{margin-right: 0}
-.m-r-xxs{margin-right: 1px}
-.m-r-xs{margin-right: 5px}
-.m-r-sm{margin-right: 10px}
-.m-r{margin-right: 15px}
-.m-r-md{margin-right: 20px}
-.m-r-lg{margin-right: 30px}
-.m-r-xl{margin-right: 40px}
+.p-h-l {
+  padding-left: 16px;
+  padding-right: 16px;
+}
 
-.m-r-n-xxs{margin-right: -1px}
-.m-r-n-xs{margin-right: -5px}
-.m-r-n-sm{margin-right: -10px}
-.m-r-n{margin-right: -15px}
-.m-r-n-md{margin-right: -20px}
-.m-r-n-lg{margin-right: -30px}
-.m-r-n-xl{margin-right: -40px}
+.p-h-lg {
+  padding-left: 30px;
+  padding-right: 30px;
+}
 
-.m-b-none{margin-bottom: 0}
-.m-b-xxs{margin-bottom: 1px;}
-.m-b-xs{margin-bottom: 5px;}
-.m-b-sm{margin-bottom: 10px;}
-.m-b{margin-bottom: 15px;}
-.m-b-md{margin-bottom: 20px;}
-.m-b-lg{margin-bottom: 30px;}
-.m-b-xl{margin-bottom: 40px;}
+.m-xxs {
+  margin: 2px 4px;
+}
 
-.m-b-n-xxs{margin-bottom: -1px}
-.m-b-n-xs{margin-bottom: -5px}
-.m-b-n-sm{margin-bottom: -10px}
-.m-b-n{margin-bottom: -15px}
-.m-b-n-md{margin-bottom: -20px}
-.m-b-n-lg{margin-bottom: -30px}
-.m-b-n-xl{margin-bottom: -40px}
+.m-xs {
+  margin: 5px;
+}
 
-.m-h-none{margin-left: 0; margin-right: 0;}
-.m-h-xs{margin-left: 5px; margin-right: 5px;}
-.m-h-sm{margin-left: 10px; margin-right: 10px;}
-.m-h{margin-left: 15px; margin-right: 15px;}
-.m-h-md{margin-left: 20px; margin-right: 20px;}
-.m-h-lg{margin-left: 30px; margin-right: 30px;}
-.m-h-xl{margin-left: 40px; margin-right: 40px;}
+.m-sm {
+  margin: 10px;
+}
 
-.media-xs{min-width: 50px}
-.media-sm{min-width: 80px}
-.media-md{min-width: 90px}
-.media-lg{min-width: 120px}
+.m {
+  margin: 15px;
+}
+
+.m-md {
+  margin: 20px;
+}
+
+.m-lg {
+  margin: 30px;
+}
+
+.m-xl {
+  margin: 50px;
+}
+
+.m-n {
+  margin: 0 !important;
+}
+
+.m-l-none {
+  margin-left: 0;
+}
+
+.m-l-xs {
+  margin-left: 5px;
+}
+
+.m-l-sm {
+  margin-left: 10px;
+}
+
+.m-l {
+  margin-left: 15px;
+}
+
+.m-l-md {
+  margin-left: 20px;
+}
+
+.m-l-lg {
+  margin-left: 30px;
+}
+
+.m-l-xl {
+  margin-left: 40px;
+}
+
+.m-l-n-xxs {
+  margin-left: -1px;
+}
+
+.m-l-n-xs {
+  margin-left: -5px;
+}
+
+.m-l-n-sm {
+  margin-left: -10px;
+}
+
+.m-l-n {
+  margin-left: -15px;
+}
+
+.m-l-n-md {
+  margin-left: -20px;
+}
+
+.m-l-n-lg {
+  margin-left: -30px;
+}
+
+.m-l-n-xl {
+  margin-left: -40px;
+}
+
+.m-t-none {
+  margin-top: 0;
+}
+
+.m-t-xxs {
+  margin-top: 1px;
+}
+
+.m-t-xs {
+  margin-top: 5px;
+}
+
+.m-t-sm {
+  margin-top: 10px;
+}
+
+.m-t {
+  margin-top: 15px;
+}
+
+.m-t-md {
+  margin-top: 20px;
+}
+
+.m-t-lg {
+  margin-top: 30px;
+}
+
+.m-t-xl {
+  margin-top: 40px;
+}
+
+.m-t-n-xxs {
+  margin-top: -1px;
+}
+
+.m-t-n-xs {
+  margin-top: -5px;
+}
+
+.m-t-n-sm {
+  margin-top: -10px;
+}
+
+.m-t-n {
+  margin-top: -15px;
+}
+
+.m-t-n-md {
+  margin-top: -20px;
+}
+
+.m-t-n-lg {
+  margin-top: -30px;
+}
+
+.m-t-n-xl {
+  margin-top: -40px;
+}
+
+.m-r-none {
+  margin-right: 0;
+}
+
+.m-r-xxs {
+  margin-right: 1px;
+}
+
+.m-r-xs {
+  margin-right: 5px;
+}
+
+.m-r-sm {
+  margin-right: 10px;
+}
+
+.m-r {
+  margin-right: 15px;
+}
+
+.m-r-md {
+  margin-right: 20px;
+}
+
+.m-r-lg {
+  margin-right: 30px;
+}
+
+.m-r-xl {
+  margin-right: 40px;
+}
+
+.m-r-n-xxs {
+  margin-right: -1px;
+}
+
+.m-r-n-xs {
+  margin-right: -5px;
+}
+
+.m-r-n-sm {
+  margin-right: -10px;
+}
+
+.m-r-n {
+  margin-right: -15px;
+}
+
+.m-r-n-md {
+  margin-right: -20px;
+}
+
+.m-r-n-lg {
+  margin-right: -30px;
+}
+
+.m-r-n-xl {
+  margin-right: -40px;
+}
+
+.m-b-none {
+  margin-bottom: 0;
+}
+
+.m-b-xxs {
+  margin-bottom: 1px;
+}
+
+.m-b-xs {
+  margin-bottom: 5px;
+}
+
+.m-b-sm {
+  margin-bottom: 10px;
+}
+
+.m-b {
+  margin-bottom: 15px;
+}
+
+.m-b-md {
+  margin-bottom: 20px;
+}
+
+.m-b-lg {
+  margin-bottom: 30px;
+}
+
+.m-b-xl {
+  margin-bottom: 40px;
+}
+
+.m-b-n-xxs {
+  margin-bottom: -1px;
+}
+
+.m-b-n-xs {
+  margin-bottom: -5px;
+}
+
+.m-b-n-sm {
+  margin-bottom: -10px;
+}
+
+.m-b-n {
+  margin-bottom: -15px;
+}
+
+.m-b-n-md {
+  margin-bottom: -20px;
+}
+
+.m-b-n-lg {
+  margin-bottom: -30px;
+}
+
+.m-b-n-xl {
+  margin-bottom: -40px;
+}
+
+.m-h-none {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.m-h-xs {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.m-h-sm {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.m-h {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.m-h-md {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.m-h-lg {
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+.m-h-xl {
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+.media-xs {
+  min-width: 50px;
+}
+
+.media-sm {
+  min-width: 80px;
+}
+
+.media-md {
+  min-width: 90px;
+}
+
+.media-lg {
+  min-width: 120px;
+}
+
+.thumb-38 {
+  width: 38px !important;
+  height: 38px;
+}
+
+.thumb-50 {
+  width: 50px !important;
+  height: 50px;
+}
+
+.thumb-128 {
+  width: 128px !important;
+  height: 128px;
+}
+
+.thumb-140 {
+  width: 140px !important;
+  height: 140px;
+}
 
-.thumb-38 { width: 38px !important; height: 38px; }
-.thumb-50 { width: 50px !important; height: 50px; }
-.thumb-128 { width: 128px !important; height: 128px; }
-.thumb-140 { width: 140px !important; height: 140px; }
 .thumb-128-wrapper {
   img {
-    width: 128px !important; height: 128px;
-    @extend .img-circle;
-  }
-}
-.thumb-140-wrapper {
-  img {
-    width: 140px !important; height: 140px;
+    width: 128px !important;
+    height: 128px;
+
     @extend .img-circle;
   }
 }
 
-.thumb-lg{width: 128px;display: inline-block}
-.thumb-md{width: 64px;display: inline-block}
-.thumb{width: 50px;display: inline-block}
-.thumb-sm{width: 34px;display: inline-block}
-.thumb-xs{width: 24px;display: inline-block}
-.thumb-wrapper{padding: 2px; border: 1px solid #ddd}
+.thumb-140-wrapper {
+  img {
+    width: 140px !important;
+    height: 140px;
+
+    @extend .img-circle;
+  }
+}
+
+.thumb-lg {
+  width: 128px;
+  display: inline-block;
+}
+
+.thumb-md {
+  width: 64px;
+  display: inline-block;
+}
+
+.thumb {
+  width: 50px;
+  display: inline-block;
+}
+
+.thumb-sm {
+  width: 34px;
+  display: inline-block;
+}
+
+.thumb-xs {
+  width: 24px;
+  display: inline-block;
+}
+
+.thumb-wrapper {
+  padding: 2px;
+  border: 1px solid #ddd;
+}
+
 .thumb img,
 .thumb-xs img,
 .thumb-sm img,
 .thumb-md img,
 .thumb-lg img,
-.thumb-btn img{
+.thumb-btn img {
   // height: auto;
   // max-width: 100%;
   vertical-align: middle;
 }
-.img-full{
+
+.img-full {
   max-width: 100%;
-  > img{
+
+  > img {
     max-width: 100%;
   }
 }
+
 .fa-img {
   display: inline-block;
   height: 0.9em;
@@ -331,36 +902,57 @@ p, .widget p {
   line-height: 1.7em !important;
 }
 
-.contrast-250 { -webkit-filter: contrast(250%); filter: contrast(250%); }
-.clear{display:block;overflow: hidden;}
+.contrast-250 {
+  -webkit-filter: contrast(250%);
+  filter: contrast(250%);
+}
+
+.clear {
+  display: block;
+  overflow: hidden;
+}
+
+.scroll-x, .scroll-y {
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scroll-y {
+  overflow-y: auto;
+}
+
+.scroll-x {
+  overflow-x: auto;
+}
 
-.scroll-x, .scroll-y{overflow:hidden;-webkit-overflow-scrolling:touch;}
-.scroll-y{overflow-y:auto;}
-.scroll-x{overflow-x:auto;}
 .no-touch {
   .scroll-x,
-  .scroll-y{
+  .scroll-y {
     overflow: hidden;
   }
-  .scroll-x{
+
+  .scroll-x {
     &:hover,
     &:focus,
-    &:active{
+    &:active {
       overflow-x: auto;
     }
   }
-  .scroll-y{
+
+  .scroll-y {
     &:hover,
     &:focus,
-    &:active{
+    &:active {
       overflow-y: auto;
     }
   }
-  .hover-action{
+
+  .hover-action {
     display: none;
   }
+
   .hover:hover {
-    .hover-action{
+    .hover-action {
       display: inherit;
     }
   }
@@ -368,7 +960,7 @@ p, .widget p {
 
 .exponent {
   font-size: 0.7em;
-  vertical-align: super
+  vertical-align: super;
 }
 
 .help-cursor {
@@ -385,33 +977,76 @@ p, .widget p {
 }
 
 @media screen and (min-width: $screen-lg-min) {
-  .b-r-lg {border-right: 1px solid $border-color; }
-  .hide-b-r-lg { border: none !important; }
+  .b-r-lg {
+    border-right: 1px solid $border-color;
+  }
+
+  .hide-b-r-lg {
+    border: none !important;
+  }
 }
 
-
-
 /*desktop*/
 @media screen and (min-width: $screen-md-min) {
-  .b-r-md {border-right: 1px solid $border-color; }
-  .col-lg-2-4{width: 20.000%;float: left;}
+  .b-r-md {
+    border-right: 1px solid $border-color;
+  }
 
-  .hide-b-md { border: none; }
+  .col-lg-2-4 {
+    width: 20.000%;
+    float: left;
+  }
+
+  .hide-b-md {
+    border: none;
+  }
 }
 
 /*phone*/
 @media (max-width: 767px) {
-  .shift{display: none !important;}
-  .shift.in{display: block !important;}
-  .row-2 [class*="col"]{width: 50%;float: left}
-  .row-2 .col-0{clear: none}
-  .row-2 li:nth-child(odd) { clear: left;margin-left: 0}
-  .text-center-xs{text-align: center;}
-  .text-left-xs{text-align: left;}
-  .pull-none-xs{float: none !important;}
-  .dropdown-menu.pull-none-xs{left: 0;}
-  .hidden-xs.show{display: inherit !important;}
-  .wrapper-lg{padding: 15px;}
+  .shift {
+    display: none !important;
+  }
+
+  .shift.in {
+    display: block !important;
+  }
+
+  .row-2 [class*="col"] {
+    width: 50%;
+    float: left;
+  }
+
+  .row-2 .col-0 {
+    clear: none;
+  }
+
+  .row-2 li:nth-child(odd) {
+    clear: left;
+    margin-left: 0;
+  }
+
+  .text-center-xs {
+    text-align: center;
+  }
+
+  .text-left-xs {
+    text-align: left;
+  }
+
+  .pull-none-xs {
+    float: none !important;
+  }
+
+  .dropdown-menu.pull-none-xs {
+    left: 0;
+  }
+
+  .hidden-xs.show {
+    display: inherit !important;
+  }
+
+  .wrapper-lg {
+    padding: 15px;
+  }
 }
-
-
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.scss b/app/assets/stylesheets/bootstrap_and_overrides.scss
index f9a115dd2..a356d9073 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.scss
+++ b/app/assets/stylesheets/bootstrap_and_overrides.scss
@@ -1,60 +1,70 @@
 // a flag to toggle asset pipeline / compass integration
 // defaults to true if twbs-font-path function is present (no function => twbs-font-path('') parsed as string == right side)
 // in Sass 3.3 this can be improved with: function-exists(twbs-font-path)
-$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default;
+$bootstrap-sass-asset-helper: twbs-font-path("") != unquote('twbs-font-path("")') !default;
+
 //
 // Variables
 // --------------------------------------------------
 
-
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.
 
-$gray-darker:            lighten(#000, 13.5%) !default; // #222
-$gray-dark:              lighten(#000, 20%) !default;   // #333
-$gray:                   lighten(#000, 33.5%) !default; // #555
-$gray-light:             lighten(#000, 60%) !default;   // #999
-$gray-lighter:           lighten(#000, 93.5%) !default; // #eee
+$gray-darker: lighten(#000, 13.5%) !default;
 
-$brand-primary:         #d92227 !default;
-$brand-success:         #7bca38 !default;
-$brand-info:            #1d98ec !default;
-$brand-warning:         #fdde3f !default;
-$brand-danger:          $brand-primary !default;
+// #222
+$gray-dark: lighten(#000, 20%) !default;
 
+// #333
+$gray: lighten(#000, 33.5%) !default;
+
+// #555
+$gray-light: lighten(#000, 60%) !default;
+
+// #999
+$gray-lighter: lighten(#000, 93.5%) !default;
+
+// #eee
+
+$brand-primary: #d92227 !default;
+$brand-success: #7bca38 !default;
+$brand-info: #1d98ec !default;
+$brand-warning: #fdde3f !default;
+$brand-danger: $brand-primary !default;
 
 // ADD by sleede ------------------
-$brand-black:           #12131a;
-$brand-dark:            #222733;
-$brand-light:           #f4f3f3; //#f1f3f7
-$brand-inverse:			#433599;
+$brand-black: #12131a;
+$brand-dark: #222733;
+$brand-light: #f4f3f3;
 
-$black-light: 			#444444;
+//#f1f3f7
+$brand-inverse: #433599;
 
-$bg-gray: 				#f5f5f5;
+$black-light: #444444;
 
-$red-dark:              #cb1117;
-$red:                   $red-dark;
-$red-light:             #e13f45;
+$bg-gray: #f5f5f5;
 
-$yellow:                #fd0;
-$blue: 					$brand-info;
-$green: 				$brand-success;
-$beige:					#e4cd78;
-$violet: 				#bd7ae9;
-$cyan:                  #3fc7ff;
+$red-dark: #cb1117;
+$red: $red-dark;
+$red-light: #e13f45;
+
+$yellow: #fd0;
+$blue: $brand-info;
+$green: $brand-success;
+$beige: #e4cd78;
+$violet: #bd7ae9;
+$cyan: #3fc7ff;
 $japonica: #dd7e6b;
 
-$border-color:		  	#dddddd;
-$header-bg: 			$bg-gray;
-
-$off-screen-nav-width:        	75%;
-$nav-primary-height:          	36px;
-$nav-xs-width:                	90px;
-$nav-xs-height:               	50px;
-$header-md-height:			  	73px;
+$border-color: #dddddd;
+$header-bg: $bg-gray;
 
+$off-screen-nav-width: 75%;
+$nav-primary-height: 36px;
+$nav-xs-width: 90px;
+$nav-xs-height: 50px;
+$header-md-height: 73px;
 
 //------------------------------------------
 
@@ -63,14 +73,17 @@ $header-md-height:			  	73px;
 //## Settings for some of the most global styles.
 
 //** Background color for `<body>`.
-$body-bg:               #fff !default;
+$body-bg: #fff !default;
+
 //** Global text color on `<body>`.
-$text-color:            black !default;
+$text-color: black !default;
 
 //** Global textual link color.
-$link-color:            #cb1117 !default;
+$link-color: #cb1117 !default;
+
 //** Link hover color set via `darken()` function.
-$link-hover-color:      #840b0f !default;
+$link-hover-color: #840b0f !default;
+
 //** Link hover decoration.
 $link-hover-decoration: underline;
 
@@ -80,52 +93,75 @@ $link-hover-decoration: underline;
 
 // Semibold = 600, Bold = 700, ExtraB = 800
 
-$font-family-sans-serif:  'proxima-nova', 'Open Sans', Helvetica, Arial, sans-serif !default;
-$font-proxima-condensed:  'proxima-nova-condensed', 'Open Sans Condensed', Helvetica, Arial, sans-serif !default;
-$font-family-serif:       Georgia, 'Times New Roman', Times, serif !default;
-$font-felt:                'felt-tip-roman', 'Loved by the King', cursive, sans-serif;
+$font-family-sans-serif: "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif !default;
+$font-proxima-condensed: "proxima-nova-condensed", "Open Sans Condensed", Helvetica, Arial, sans-serif !default;
+$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
+$font-felt: "felt-tip-roman", "Loved by the King", cursive, sans-serif;
 
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 // $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 
-$font-family-base:        $font-family-sans-serif !default;
-$font-family-monospace:   $font-family-base;
+$font-family-base: $font-family-sans-serif !default;
+$font-family-monospace: $font-family-base;
 
-$font-size-base:          16px !default;
-$font-size-large:         ceil(($font-size-base * 1.125)) !default; // ~18px
-$font-size-medium:        ceil(($font-size-base * 0.875)) !default; // ~14px
-$font-size-small:         ceil(($font-size-base * 0.75)) !default; // ~12px
+$font-size-base: 16px !default;
+$font-size-large: ceil($font-size-base * 1.125) !default;
+
+// ~18px
+$font-size-medium: ceil($font-size-base * 0.875) !default;
+
+// ~14px
+$font-size-small: ceil($font-size-base * 0.75) !default;
+
+// ~12px
 
 //add sleede
-$font-size-xl:            rem-calc(32);
-$font-size-lg:            rem-calc(20);
-$font-size-md:            rem-calc(18);
-$font-size-sm:            rem-calc(14);
-$font-size-xs:            rem-calc(12); // ~11px
+$font-size-xl: rem-calc(32);
+$font-size-lg: rem-calc(20);
+$font-size-md: rem-calc(18);
+$font-size-sm: rem-calc(14);
+$font-size-xs: rem-calc(12);
 
-$font-size-h1:            rem-calc(24) !default; // ~24px
-$font-size-h2:            rem-calc(20) !default; // ~20px
-$font-size-h3:            rem-calc(18) !default; // ~18px
-$font-size-h4:            rem-calc(16) !default; // ~16px
-$font-size-h5:            rem-calc(14) !default; // ~14px
-$font-size-h6:            rem-calc(12) !default; // ~12px
+// ~11px
 
+$font-size-h1: rem-calc(24) !default;
 
+// ~24px
+$font-size-h2: rem-calc(20) !default;
+
+// ~20px
+$font-size-h3: rem-calc(18) !default;
+
+// ~18px
+$font-size-h4: rem-calc(16) !default;
+
+// ~16px
+$font-size-h5: rem-calc(14) !default;
+
+// ~14px
+$font-size-h6: rem-calc(12) !default;
+
+// ~12px
 
 //** Unit-less `line-height` for use in components like buttons.
-$line-height-base:        1.5 !default; // 24/16
+$line-height-base: 1.5 !default;
+
+// 24/16
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+$line-height-computed: floor($font-size-base * $line-height-base) !default;
+
+// ~20px
 
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+$line-height-computed: floor($font-size-base * $line-height-base) !default;
+
+// ~20px
 
 //** By default, this inherits from the `<body>`.
-$headings-font-family:    $font-family-base !default;
-$headings-font-weight:    400 !default;
-$headings-line-height:    1.5 !default;
-$headings-color:          black !default;
-
+$headings-font-family: $font-family-base !default;
+$headings-font-weight: 400 !default;
+$headings-line-height: 1.5 !default;
+$headings-color: black !default;
 
 //== Iconography
 //
@@ -133,148 +169,161 @@ $headings-color:          black !default;
 
 //** Load fonts from this directory.
 $icon-font-path: "bootstrap/" !default;
+
 //** File name for all font files.
-$icon-font-name:          "glyphicons-halflings-regular" !default;
+$icon-font-name: "glyphicons-halflings-regular" !default;
+
 //** Element ID within SVG icon file.
-$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
-
-$icon-css-prefix:		  fa;
+$icon-font-svg-id: "glyphicons_halflingsregular" !default;
 
+$icon-css-prefix: fa;
 
 //== Components
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-$padding-base-vertical:     6px !default;
-$padding-base-horizontal:   12px !default;
+$padding-base-vertical: 6px !default;
+$padding-base-horizontal: 12px !default;
 
-$padding-large-vertical:    10px !default;
-$padding-large-horizontal:  16px !default;
+$padding-large-vertical: 10px !default;
+$padding-large-horizontal: 16px !default;
 
-$padding-small-vertical:    5px !default;
-$padding-small-horizontal:  10px !default;
+$padding-small-vertical: 5px !default;
+$padding-small-horizontal: 10px !default;
 
-$padding-xs-vertical:       1px !default;
-$padding-xs-horizontal:     5px !default;
+$padding-xs-vertical: 1px !default;
+$padding-xs-horizontal: 5px !default;
 
-$line-height-large:         1.33 !default;
-$line-height-small:         1.5 !default;
+$line-height-large: 1.33 !default;
+$line-height-small: 1.5 !default;
 
-$border-radius-base:        4px !default;
-$border-radius-large:       6px !default;
-$border-radius-small:       3px !default;
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-small: 3px !default;
 
 //** Global color for active items (e.g., navs or dropdowns).
-$component-active-color:    #fff !default;
+$component-active-color: #fff !default;
+
 //** Global background color for active items (e.g., navs or dropdowns).
-$component-active-bg:       $gray-lighter !default;
+$component-active-bg: $gray-lighter !default;
 
 //** Width of the `border` for generating carets that indicator dropdowns.
-$caret-width-base:          4px !default;
-//** Carets increase slightly in size for larger components.
-$caret-width-large:         5px !default;
+$caret-width-base: 4px !default;
 
+//** Carets increase slightly in size for larger components.
+$caret-width-large: 5px !default;
 
 //== Tables
 //
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
 //** Padding for `<th>`s and `<td>`s.
-$table-cell-padding:            8px !default;
+$table-cell-padding: 8px !default;
+
 //** Padding for cells in `.table-condensed`.
-$table-condensed-cell-padding:  5px !default;
+$table-condensed-cell-padding: 5px !default;
 
 //** Default background color used for all tables.
-$table-bg:                      transparent !default;
+$table-bg: transparent !default;
+
 //** Background color used for `.table-striped`.
-$table-bg-accent:               #f9f9f9 !default;
+$table-bg-accent: #f9f9f9 !default;
+
 //** Background color used for `.table-hover`.
-$table-bg-hover:                $bg-gray !default;
-$table-bg-active:               $table-bg-hover !default;
+$table-bg-hover: $bg-gray !default;
+$table-bg-active: $table-bg-hover !default;
 
 //** Border color for table and cell borders.
-$table-border-color:            #ddd !default;
-
+$table-border-color: #ddd !default;
 
 //== Buttons
 //
 //## For each of Bootstrap's buttons, define text, background and border color.
 
-$btn-font-weight:                normal !default;
+$btn-font-weight: normal !default;
 
-$btn-default-color:              $text-color !default;
-$btn-default-bg:                 lighten($brand-light, 3%) !default;
-$btn-default-border:             darken($border-color, 8%) !default;
+$btn-default-color: $text-color !default;
+$btn-default-bg: lighten($brand-light, 3%) !default;
+$btn-default-border: darken($border-color, 8%) !default;
 
-$btn-primary-color:              #fff !default;;
-$btn-primary-bg:                 $brand-primary !default;;
-$btn-primary-border:             $btn-primary-bg !default;;
+$btn-primary-color: #fff !default;
+$btn-primary-bg: $brand-primary !default;
+$btn-primary-border: $btn-primary-bg !default;
 
-$btn-success-color:              #fff  !default;
-$btn-success-bg:                 $brand-success !default;
-$btn-success-border:             $btn-success-bg !default;
+$btn-success-color: #fff !default;
+$btn-success-bg: $brand-success !default;
+$btn-success-border: $btn-success-bg !default;
 
-$btn-info-color:                 #fff !default;
-$btn-info-bg:                    $brand-info !default;
-$btn-info-border:                $btn-info-bg !default;
+$btn-info-color: #fff !default;
+$btn-info-bg: $brand-info !default;
+$btn-info-border: $btn-info-bg !default;
 
-$btn-warning-color:              #000 !default;
-$btn-warning-bg:                 $brand-warning !default;
-$btn-warning-border:             $btn-warning-bg !default;
+$btn-warning-color: #000 !default;
+$btn-warning-bg: $brand-warning !default;
+$btn-warning-border: $btn-warning-bg !default;
 
-$btn-danger-color:               #fff !default;
-$btn-danger-bg:                  $red !default;
-$btn-danger-border:              $btn-default-border !default;
+$btn-danger-color: #fff !default;
+$btn-danger-bg: $red !default;
+$btn-danger-border: $btn-default-border !default;
 
-$btn-link-disabled-color:        $gray-light !default;
+$btn-link-disabled-color: $gray-light !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius-base:         $border-radius-base;
-$btn-border-radius-large:        $border-radius-large;
-$btn-border-radius-small:        $border-radius-small;
-
+$btn-border-radius-base: $border-radius-base;
+$btn-border-radius-large: $border-radius-large;
+$btn-border-radius-small: $border-radius-small;
 
 //== Forms
 //
 //##
 
 //** `<input>` background color
-$input-bg:                       #fff !default;
+$input-bg: #fff !default;
+
 //** `<input disabled>` background color
-$input-bg-disabled:              $gray-lighter !default;
+$input-bg-disabled: $gray-lighter !default;
 
 //** Text color for `<input>`s
-$input-color:                    $gray !default;
+$input-color: $gray !default;
+
 //** `<input>` border color
-$input-border:                   darken($border-color, 10%) !default;
+$input-border: darken($border-color, 10%) !default;
+
 //** `<input>` border radius
-$input-border-radius:            $border-radius-base !default;
+$input-border-radius: $border-radius-base !default;
+
 //** Border color for inputs on focus
-$input-border-focus:             $brand-warning !default;
+$input-border-focus: $brand-warning !default;
+
 //** Large `.form-control` border radius
-$input-border-radius-large:      $border-radius-large;
+$input-border-radius-large: $border-radius-large;
+
 //** Small `.form-control` border radius
-$input-border-radius-small:      $border-radius-small;
+$input-border-radius-small: $border-radius-small;
 
 //** Placeholder text color
-$input-color-placeholder:        $gray-light !default;
+$input-color-placeholder: $gray-light !default;
 
 //** Default `.form-control` height
-$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
-//** Large `.form-control` height
-$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
-//** Small `.form-control` height
-$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+$input-height-base: $line-height-computed + $padding-base-vertical * 2 + 2 !default;
 
-$legend-color:                   $gray-dark !default;
-$legend-border-color:            #e5e5e5 !default;
+//** Large `.form-control` height
+$input-height-large: ceil($font-size-large * $line-height-large) + $padding-large-vertical * 2 + 2 !default;
+
+//** Small `.form-control` height
+$input-height-small: floor($font-size-small * $line-height-small) + $padding-small-vertical * 2 + 2 !default;
+
+$legend-color: $gray-dark !default;
+$legend-border-color: #e5e5e5 !default;
 
 //** Background color for textual input addons
-$input-group-addon-bg:           $gray-lighter !default;
+$input-group-addon-bg: $gray-lighter !default;
+
 //** Border color for textual input addons
 $input-group-addon-border-color: $input-border !default;
+
 //** Disabled cursor for form controls and buttons.
-$cursor-disabled:                not-allowed;
+$cursor-disabled: not-allowed;
 $form-group-margin-bottom: 15px !default;
 
 //== Dropdowns
@@ -282,35 +331,40 @@ $form-group-margin-bottom: 15px !default;
 //## Dropdown menu container and contents.
 
 //** Background for the dropdown menu.
-$dropdown-bg:                    #fff !default;
+$dropdown-bg: #fff !default;
+
 //** Dropdown menu `border-color`.
-$dropdown-border:                rgba(0,0,0,.15) !default;
+$dropdown-border: rgba(0, 0, 0, 0.15) !default;
+
 //** Dropdown menu `border-color` **for IE8**.
-$dropdown-fallback-border:       #ccc !default;
+$dropdown-fallback-border: #ccc !default;
+
 //** Divider color for between dropdown items.
-$dropdown-divider-bg:            #e5e5e5 !default;
+$dropdown-divider-bg: #e5e5e5 !default;
 
 //** Dropdown link text color.
-$dropdown-link-color:            $gray-dark !default;
+$dropdown-link-color: $gray-dark !default;
+
 //** Hover color for dropdown links.
-$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
+
 //** Hover background for dropdown links.
-$dropdown-link-hover-bg:         $bg-gray !default;
+$dropdown-link-hover-bg: $bg-gray !default;
 
 //** Active dropdown menu item text color.
-$dropdown-link-active-color:     $component-active-color !default;
+$dropdown-link-active-color: $component-active-color !default;
+
 //** Active dropdown menu item background color.
-$dropdown-link-active-bg:        $component-active-bg !default;
+$dropdown-link-active-bg: $component-active-bg !default;
 
 //** Disabled dropdown menu item background color.
-$dropdown-link-disabled-color:   $gray-light !default;
+$dropdown-link-disabled-color: $gray-light !default;
 
 //** Text color for headers within dropdown menus.
-$dropdown-header-color:          $gray-light !default;
+$dropdown-header-color: $gray-light !default;
 
 //** Deprecated `$dropdown-caret-color` as of v3.1.0
-$dropdown-caret-color:           #000 !default;
-
+$dropdown-caret-color: #000 !default;
 
 //-- Z-index master list
 //
@@ -319,14 +373,13 @@ $dropdown-caret-color:           #000 !default;
 //
 // Note: These variables are not generated into the Customizer.
 
-$zindex-navbar:            1000 !default;
-$zindex-dropdown:          1000 !default;
-$zindex-popover:           1060 !default;
-$zindex-tooltip:           1070 !default;
-$zindex-navbar-fixed:      1030 !default;
-$zindex-modal-background:  1040 !default;
-$zindex-modal:             1050 !default;
-
+$zindex-navbar: 1000 !default;
+$zindex-dropdown: 1000 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+$zindex-navbar-fixed: 1030 !default;
+$zindex-modal-background: 1040 !default;
+$zindex-modal: 1050 !default;
 
 //== Media queries breakpoints
 //
@@ -334,608 +387,648 @@ $zindex-modal:             1050 !default;
 
 // Extra small screen / phone
 //** Deprecated `$screen-xs` as of v3.0.1
-$screen-xs:                  480px !default;
+$screen-xs: 480px !default;
+
 //** Deprecated `$screen-xs-min` as of v3.2.0
-$screen-xs-min:              $screen-xs !default;
+$screen-xs-min: $screen-xs !default;
+
 //** Deprecated `$screen-phone` as of v3.0.1
-$screen-phone:               $screen-xs-min !default;
+$screen-phone: $screen-xs-min !default;
 
 // Small screen / tablet
 //** Deprecated `$screen-sm` as of v3.0.1
-$screen-sm:                  768px !default;
-$screen-sm-min:              $screen-sm !default;
+$screen-sm: 768px !default;
+$screen-sm-min: $screen-sm !default;
+
 //** Deprecated `$screen-tablet` as of v3.0.1
-$screen-tablet:              $screen-sm-min !default;
+$screen-tablet: $screen-sm-min !default;
 
 // Medium screen / desktop
 //** Deprecated `$screen-md` as of v3.0.1
-$screen-md:                  992px !default;
-$screen-md-min:              $screen-md !default;
+$screen-md: 992px !default;
+$screen-md-min: $screen-md !default;
+
 //** Deprecated `$screen-desktop` as of v3.0.1
-$screen-desktop:             $screen-md-min !default;
+$screen-desktop: $screen-md-min !default;
 
 // Large screen / wide desktop
 //** Deprecated `$screen-lg` as of v3.0.1
-$screen-lg:                  1200px !default;
-$screen-lg-min:              $screen-lg !default;
+$screen-lg: 1200px !default;
+$screen-lg-min: $screen-lg !default;
+
 //** Deprecated `$screen-lg-desktop` as of v3.0.1
-$screen-lg-desktop:          $screen-lg-min !default;
+$screen-lg-desktop: $screen-lg-min !default;
 
 // So media queries don't overlap when required, provide a maximum
-$screen-xs-max:              ($screen-sm-min - 1) !default;
-$screen-sm-max:              ($screen-md-min - 1) !default;
-$screen-md-max:              ($screen-lg-min - 1) !default;
-
+$screen-xs-max: $screen-sm-min - 1 !default;
+$screen-sm-max: $screen-md-min - 1 !default;
+$screen-md-max: $screen-lg-min - 1 !default;
 
 //== Grid system
 //
 //## Define your custom responsive grid.
 
 //** Number of columns in the grid.
-$grid-columns:              12 !default;
+$grid-columns: 12 !default;
+
 //** Padding between columns. Gets divided in half for the left and right.
-$grid-gutter-width:         30px !default;
+$grid-gutter-width: 30px !default;
+
 // Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
-$grid-float-breakpoint:     $screen-sm-min !default;
-//** Point at which the navbar begins collapsing.
-$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+$grid-float-breakpoint: $screen-sm-min !default;
 
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: $grid-float-breakpoint - 1 !default;
 
 //== Container sizes
 //
 //## Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / tablet
-$container-tablet:             ((720px + $grid-gutter-width)) !default;
+$container-tablet: 720px + $grid-gutter-width !default;
+
 //** For `$screen-sm-min` and up.
-$container-sm:                 $container-tablet !default;
+$container-sm: $container-tablet !default;
 
 // Medium screen / desktop
-$container-desktop:            ((940px + $grid-gutter-width)) !default;
+$container-desktop: 940px + $grid-gutter-width !default;
+
 //** For `$screen-md-min` and up.
-$container-md:                 $container-desktop !default;
+$container-md: $container-desktop !default;
 
 // Large screen / wide desktop
-$container-large-desktop:      ((1140px + $grid-gutter-width)) !default;
-//** For `$screen-lg-min` and up.
-$container-lg:                 $container-large-desktop !default;
+$container-large-desktop: 1140px + $grid-gutter-width !default;
 
+//** For `$screen-lg-min` and up.
+$container-lg: $container-large-desktop !default;
 
 //== Navbar
 //
 //##
 
 // Basics of a navbar
-$navbar-height:                    50px !default;
-$navbar-margin-bottom:             $line-height-computed !default;
-$navbar-border-radius:             $border-radius-base !default;
-$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
-$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
-$navbar-collapse-max-height:       340px !default;
+$navbar-height: 50px !default;
+$navbar-margin-bottom: $line-height-computed !default;
+$navbar-border-radius: $border-radius-base !default;
+$navbar-padding-horizontal: floor($grid-gutter-width / 2) !default;
+$navbar-padding-vertical: ($navbar-height - $line-height-computed) / 2 !default;
+$navbar-collapse-max-height: 340px !default;
 
-$navbar-default-color:             #777 !default;
-$navbar-default-bg:                #f8f8f8 !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-color: #777 !default;
+$navbar-default-bg: #f8f8f8 !default;
+$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
 
 // Navbar links
-$navbar-default-link-color:                #777 !default;
-$navbar-default-link-hover-color:          #333 !default;
-$navbar-default-link-hover-bg:             transparent !default;
-$navbar-default-link-active-color:         #555 !default;
-$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
-$navbar-default-link-disabled-color:       #ccc !default;
-$navbar-default-link-disabled-bg:          transparent !default;
+$navbar-default-link-color: #777 !default;
+$navbar-default-link-hover-color: #333 !default;
+$navbar-default-link-hover-bg: transparent !default;
+$navbar-default-link-active-color: #555 !default;
+$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color: #ccc !default;
+$navbar-default-link-disabled-bg: transparent !default;
 
 // Navbar brand label
-$navbar-default-brand-color:               $navbar-default-link-color !default;
-$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
-$navbar-default-brand-hover-bg:            transparent !default;
+$navbar-default-brand-color: $navbar-default-link-color !default;
+$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg: transparent !default;
 
 // Navbar toggle
-$navbar-default-toggle-hover-bg:           #ddd !default;
-$navbar-default-toggle-icon-bar-bg:        #888 !default;
-$navbar-default-toggle-border-color:       #ddd !default;
-
+$navbar-default-toggle-hover-bg: #ddd !default;
+$navbar-default-toggle-icon-bar-bg: #888 !default;
+$navbar-default-toggle-border-color: #ddd !default;
 
 // Inverted navbar
 // Reset inverted navbar basics
-$navbar-inverse-color:                      $gray-light !default;
-$navbar-inverse-bg:                         #222 !default;
-$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-color: $gray-light !default;
+$navbar-inverse-bg: #222 !default;
+$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
 
 // Inverted navbar links
-$navbar-inverse-link-color:                 $gray-light !default;
-$navbar-inverse-link-hover-color:           #fff !default;
-$navbar-inverse-link-hover-bg:              transparent !default;
-$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
-$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
-$navbar-inverse-link-disabled-color:        #444 !default;
-$navbar-inverse-link-disabled-bg:           transparent !default;
+$navbar-inverse-link-color: $gray-light !default;
+$navbar-inverse-link-hover-color: #fff !default;
+$navbar-inverse-link-hover-bg: transparent !default;
+$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color: #444 !default;
+$navbar-inverse-link-disabled-bg: transparent !default;
 
 // Inverted navbar brand label
-$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
-$navbar-inverse-brand-hover-color:          #fff !default;
-$navbar-inverse-brand-hover-bg:             transparent !default;
+$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color: #fff !default;
+$navbar-inverse-brand-hover-bg: transparent !default;
 
 // Inverted navbar toggle
-$navbar-inverse-toggle-hover-bg:            #333 !default;
-$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
-$navbar-inverse-toggle-border-color:        #333 !default;
-
+$navbar-inverse-toggle-hover-bg: #333 !default;
+$navbar-inverse-toggle-icon-bar-bg: #fff !default;
+$navbar-inverse-toggle-border-color: #333 !default;
 
 //== Navs
 //
 //##
 
 //=== Shared nav styles
-$nav-link-padding:                          10px 15px !default;
-$nav-link-hover-bg:                         $gray-lighter !default;
+$nav-link-padding: 10px 15px !default;
+$nav-link-hover-bg: $gray-lighter !default;
 
-$nav-disabled-link-color:                   $gray-light !default;
-$nav-disabled-link-hover-color:             $gray-light !default;
+$nav-disabled-link-color: $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
 
-$nav-open-link-hover-color:                 #fff !default;
+$nav-open-link-hover-color: #fff !default;
 
 //== Tabs
-$nav-tabs-border-color:                     #ddd !default;
+$nav-tabs-border-color: #ddd !default;
 
-$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+$nav-tabs-link-hover-border-color: $gray-lighter !default;
 
-$nav-tabs-active-link-hover-bg:             $body-bg !default;
-$nav-tabs-active-link-hover-color:          $gray !default;
-$nav-tabs-active-link-hover-border-color:   #ddd !default;
+$nav-tabs-active-link-hover-bg: $body-bg !default;
+$nav-tabs-active-link-hover-color: $gray !default;
+$nav-tabs-active-link-hover-border-color: #ddd !default;
 
-$nav-tabs-justified-link-border-color:            #ddd !default;
-$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+$nav-tabs-justified-link-border-color: #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
 
 //== Pills
-$nav-pills-border-radius:                   $border-radius-base !default;
-$nav-pills-active-link-hover-bg:            $component-active-bg !default;
-$nav-pills-active-link-hover-color:         $component-active-color !default;
-
+$nav-pills-border-radius: $border-radius-base !default;
+$nav-pills-active-link-hover-bg: $component-active-bg !default;
+$nav-pills-active-link-hover-color: $component-active-color !default;
 
 //== Pagination
 //
 //##
 
-$pagination-color:                     $link-color !default;
-$pagination-bg:                        #fff !default;
-$pagination-border:                    #ddd !default;
+$pagination-color: $link-color !default;
+$pagination-bg: #fff !default;
+$pagination-border: #ddd !default;
 
-$pagination-hover-color:               $link-hover-color !default;
-$pagination-hover-bg:                  $gray-lighter !default;
-$pagination-hover-border:              #ddd !default;
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-lighter !default;
+$pagination-hover-border: #ddd !default;
 
-$pagination-active-color:              #fff !default;
-$pagination-active-bg:                 $brand-primary !default;
-$pagination-active-border:             $brand-primary !default;
-
-$pagination-disabled-color:            $gray-light !default;
-$pagination-disabled-bg:               #fff !default;
-$pagination-disabled-border:           #ddd !default;
+$pagination-active-color: #fff !default;
+$pagination-active-bg: $brand-primary !default;
+$pagination-active-border: $brand-primary !default;
 
+$pagination-disabled-color: $gray-light !default;
+$pagination-disabled-bg: #fff !default;
+$pagination-disabled-border: #ddd !default;
 
 //== Pager
 //
 //##
 
-$pager-bg:                             $pagination-bg !default;
-$pager-border:                         $pagination-border !default;
-$pager-border-radius:                  15px !default;
+$pager-bg: $pagination-bg !default;
+$pager-border: $pagination-border !default;
+$pager-border-radius: 15px !default;
 
-$pager-hover-bg:                       $pagination-hover-bg !default;
+$pager-hover-bg: $pagination-hover-bg !default;
 
-$pager-active-bg:                      $pagination-active-bg !default;
-$pager-active-color:                   $pagination-active-color !default;
-
-$pager-disabled-color:                 $pagination-disabled-color !default;
+$pager-active-bg: $pagination-active-bg !default;
+$pager-active-color: $pagination-active-color !default;
 
+$pager-disabled-color: $pagination-disabled-color !default;
 
 //== Jumbotron
 //
 //##
 
-$jumbotron-padding:              30px !default;
-$jumbotron-color:                inherit !default;
-$jumbotron-bg:                   $gray-lighter !default;
-$jumbotron-heading-color:        inherit !default;
-$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
-$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5));
-
+$jumbotron-padding: 30px !default;
+$jumbotron-color: inherit !default;
+$jumbotron-bg: $gray-lighter !default;
+$jumbotron-heading-color: inherit !default;
+$jumbotron-font-size: ceil($font-size-base * 1.5) !default;
+$jumbotron-heading-font-size: ceil($font-size-base * 4.5);
 
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-$state-success-text:             #3c763d !default;
-$state-success-bg:               #dff0d8 !default;
-$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+$state-success-text: #3c763d !default;
+$state-success-bg: #dff0d8 !default;
+$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
 
-$state-info-text:                #31708f !default;
-$state-info-bg:                  #d9edf7 !default;
-$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+$state-info-text: #31708f !default;
+$state-info-bg: #d9edf7 !default;
+$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
 
-$state-warning-text:             #8a6d3b !default;
-$state-warning-bg:               #fcf8e3 !default;
-$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
-
-$state-danger-text:              #a94442 !default;
-$state-danger-bg:                #f2dede !default;
-$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+$state-warning-text: #8a6d3b !default;
+$state-warning-bg: #fcf8e3 !default;
+$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
 
+$state-danger-text: #a94442 !default;
+$state-danger-bg: #f2dede !default;
+$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
 
 //== Tooltips
 //
 //##
 
 //** Tooltip max width
-$tooltip-max-width:           200px !default;
+$tooltip-max-width: 200px !default;
+
 //** Tooltip text color
-$tooltip-color:               white !default;
+$tooltip-color: white !default;
+
 //** Tooltip background color
-$tooltip-bg:                  #424242 !default;
-$tooltip-opacity:             .9 !default;
+$tooltip-bg: #424242 !default;
+$tooltip-opacity: 0.9 !default;
 
 //** Tooltip arrow width
-$tooltip-arrow-width:         5px !default;
+$tooltip-arrow-width: 5px !default;
+
 //** Tooltip arrow color
-$tooltip-arrow-color:         $tooltip-bg !default;
+$tooltip-arrow-color: $tooltip-bg !default;
 
 //add sleede
-$tooltip-fallback-color:	  rgba(0,0,0,.9) !default;
+$tooltip-fallback-color: rgba(0, 0, 0, 0.9) !default;
 
 //== Arrow
 // add by sleede
 //##
-$arrow-width:         			 7px;
-$arrow-color:         			 #fff;
-$arrow-outer-width:   			 ($arrow-width + 1);
-$arrow-outer-color:   			 rgba(0,0,0,.1);
-$arrow-outer-fallback-color:  	 #eee;
-
+$arrow-width: 7px;
+$arrow-color: #fff;
+$arrow-outer-width: $arrow-width + 1;
+$arrow-outer-color: rgba(0, 0, 0, 0.1);
+$arrow-outer-fallback-color: #eee;
 
 //== Popovers
 //
 //##
 
 //** Popover body background color
-$popover-bg:                          #fff !default;
+$popover-bg: #fff !default;
+
 //** Popover maximum width
-$popover-max-width:                   276px !default;
+$popover-max-width: 276px !default;
+
 //** Popover border color
-$popover-border-color:                rgba(0,0,0,.2) !default;
+$popover-border-color: rgba(0, 0, 0, 0.2) !default;
+
 //** Popover fallback border color
-$popover-fallback-border-color:       #ccc !default;
+$popover-fallback-border-color: #ccc !default;
 
 //** Popover title background color
-$popover-title-bg:                    darken($popover-bg, 3%) !default;
+$popover-title-bg: darken($popover-bg, 3%) !default;
 
 //** Popover arrow width
-$popover-arrow-width:                 10px !default;
+$popover-arrow-width: 10px !default;
+
 //** Popover arrow color
-$popover-arrow-color:                 #fff !default;
+$popover-arrow-color: #fff !default;
 
 //** Popover outer arrow width
-$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
-//** Popover outer arrow color
-$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
-//** Popover outer arrow fallback color
-$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+$popover-arrow-outer-width: $popover-arrow-width + 1 !default;
 
+//** Popover outer arrow color
+$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default;
+
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
 
 //== Labels
 //
 //##
 
 //** Default label background color
-$label-default-bg:            $gray-light !default;
+$label-default-bg: $gray-light !default;
+
 //** Primary label background color
-$label-primary-bg:            $brand-primary !default;
+$label-primary-bg: $brand-primary !default;
+
 //** Success label background color
-$label-success-bg:            $brand-success !default;
+$label-success-bg: $brand-success !default;
+
 //** Info label background color
-$label-info-bg:               $brand-info !default;
+$label-info-bg: $brand-info !default;
+
 //** Warning label background color
-$label-warning-bg:            $brand-warning !default;
+$label-warning-bg: $brand-warning !default;
+
 //** Danger label background color
-$label-danger-bg:             $brand-danger !default;
+$label-danger-bg: $brand-danger !default;
 
 //** Default label text color
-$label-color:                 #424242 !default;
-//** Default text color of a linked label
-$label-link-hover-color:      $red !default;
+$label-color: #424242 !default;
 
+//** Default text color of a linked label
+$label-link-hover-color: $red !default;
 
 //== Modals
 //
 //##
 
 //** Padding applied to the modal body
-$modal-inner-padding:         15px !default;
+$modal-inner-padding: 15px !default;
 
 //** Padding applied to the modal title
-$modal-title-padding:         8px !default;
+$modal-title-padding: 8px !default;
+
 //** Modal title line-height
-$modal-title-line-height:     $line-height-base !default;
+$modal-title-line-height: $line-height-base !default;
 
 //** Background color of modal content area
-$modal-content-bg:                             #fff !default;
+$modal-content-bg: #fff !default;
+
 //** Modal content border color
-$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+$modal-content-border-color: rgba(0, 0, 0, 0.2) !default;
+
 //** Modal content border color **for IE8**
-$modal-content-fallback-border-color:          #999 !default;
+$modal-content-fallback-border-color: #999 !default;
 
 //** Modal backdrop background color
-$modal-backdrop-bg:           #000 !default;
+$modal-backdrop-bg: #000 !default;
+
 //** Modal backdrop opacity
-$modal-backdrop-opacity:      .9 !default;
+$modal-backdrop-opacity: 0.9 !default;
+
 //** Modal header border color
-$modal-header-border-color:   #e5e5e5 !default;
+$modal-header-border-color: #e5e5e5 !default;
+
 //** Modal footer border color
-$modal-footer-border-color:   $modal-header-border-color !default;
-
-$modal-lg:                    600px !default;
-$modal-md:                    440px !default;
-$modal-sm:                    340px !default;
+$modal-footer-border-color: $modal-header-border-color !default;
 
+$modal-lg: 600px !default;
+$modal-md: 440px !default;
+$modal-sm: 340px !default;
 
 //== Alerts
 //
 //## Define alert colors, border radius, and padding.
 
-$alert-padding:               15px !default;
-$alert-border-radius:         $border-radius-base !default;
-$alert-link-font-weight:      bold !default;
+$alert-padding: 15px !default;
+$alert-border-radius: $border-radius-base !default;
+$alert-link-font-weight: bold !default;
 
-$alert-success-bg:            $state-success-bg !default;
-$alert-success-text:          $state-success-text !default;
-$alert-success-border:        $state-success-border !default;
+$alert-success-bg: $state-success-bg !default;
+$alert-success-text: $state-success-text !default;
+$alert-success-border: $state-success-border !default;
 
-$alert-info-bg:               $state-info-bg !default;
-$alert-info-text:             $state-info-text !default;
-$alert-info-border:           $state-info-border !default;
+$alert-info-bg: $state-info-bg !default;
+$alert-info-text: $state-info-text !default;
+$alert-info-border: $state-info-border !default;
 
-$alert-warning-bg:            $state-warning-bg !default;
-$alert-warning-text:          $state-warning-text !default;
-$alert-warning-border:        $state-warning-border !default;
-
-$alert-danger-bg:             $state-danger-bg !default;
-$alert-danger-text:           $state-danger-text !default;
-$alert-danger-border:         $state-danger-border !default;
+$alert-warning-bg: $state-warning-bg !default;
+$alert-warning-text: $state-warning-text !default;
+$alert-warning-border: $state-warning-border !default;
 
+$alert-danger-bg: $state-danger-bg !default;
+$alert-danger-text: $state-danger-text !default;
+$alert-danger-border: $state-danger-border !default;
 
 //== Progress bars
 //
 //##
 
 //** Background color of the whole progress component
-$progress-bg:                 $bg-gray !default;
+$progress-bg: $bg-gray !default;
+
 //** Progress bar text color
-$progress-bar-color:          #fff !default;
+$progress-bar-color: #fff !default;
+
 //** Variable for setting rounded corners on progress bar.
-$progress-border-radius:      $border-radius-base;
+$progress-border-radius: $border-radius-base;
 
 //** Default progress bar color
-$progress-bar-bg:             $brand-primary !default;
-//** Success progress bar color
-$progress-bar-success-bg:     $brand-success !default;
-//** Warning progress bar color
-$progress-bar-warning-bg:     $brand-warning !default;
-//** Danger progress bar color
-$progress-bar-danger-bg:      $brand-danger !default;
-//** Info progress bar color
-$progress-bar-info-bg:        $brand-info !default;
+$progress-bar-bg: $brand-primary !default;
 
+//** Success progress bar color
+$progress-bar-success-bg: $brand-success !default;
+
+//** Warning progress bar color
+$progress-bar-warning-bg: $brand-warning !default;
+
+//** Danger progress bar color
+$progress-bar-danger-bg: $brand-danger !default;
+
+//** Info progress bar color
+$progress-bar-info-bg: $brand-info !default;
 
 //== List group
 //
 //##
 
 //** Background color on `.list-group-item`
-$list-group-bg:                 #fff !default;
+$list-group-bg: #fff !default;
+
 //** `.list-group-item` border color
-$list-group-border:             #ddd !default;
+$list-group-border: #ddd !default;
+
 //** List group border radius
-$list-group-border-radius:      $border-radius-base !default;
+$list-group-border-radius: $border-radius-base !default;
 
 //** Background color of single list items on hover
-$list-group-hover-bg:           $bg-gray !default;
+$list-group-hover-bg: $bg-gray !default;
+
 //** Text color of active list items
-$list-group-active-color:       $brand-info !default;
+$list-group-active-color: $brand-info !default;
+
 //** Background color of active list items
-$list-group-active-bg:          $component-active-bg !default;
+$list-group-active-bg: $component-active-bg !default;
+
 //** Border color of active list elements
-$list-group-active-border:      $list-group-active-bg !default;
+$list-group-active-border: $list-group-active-bg !default;
+
 //** Text color for content within active list items
-$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
 
 //** Text color of disabled list items
-$list-group-disabled-color:      $gray-light !default;
+$list-group-disabled-color: $gray-light !default;
+
 //** Background color of disabled list items
-$list-group-disabled-bg:         $gray-lighter !default;
+$list-group-disabled-bg: $gray-lighter !default;
+
 //** Text color for content within disabled list items
 $list-group-disabled-text-color: $list-group-disabled-color !default;
 
-$list-group-link-color:         #555 !default;
-$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-color: #555 !default;
+$list-group-link-hover-color: $list-group-link-color !default;
 $list-group-link-heading-color: #333 !default;
 
-
 //== Panels
 //
 //##
 
-$panel-bg:                    #fff !default;
-$panel-body-padding:          15px !default;
-$panel-heading-padding:       18px 15px !default;
-$panel-footer-padding:        $panel-heading-padding !default;
-$panel-border-radius:         $border-radius-large !default;
+$panel-bg: #fff !default;
+$panel-body-padding: 15px !default;
+$panel-heading-padding: 18px 15px !default;
+$panel-footer-padding: $panel-heading-padding !default;
+$panel-border-radius: $border-radius-large !default;
 
 // add sleede
-$panel-border:                $border-color !default;
-$panel-heading-bg:            #fff !default;
-$panel-footer-bg:             #fff !default;
+$panel-border: $border-color !default;
+$panel-heading-bg: #fff !default;
+$panel-footer-bg: #fff !default;
 
 //** Border color for elements within panels
-$panel-inner-border:          #ddd !default;
-$panel-footer-bg:             $bg-gray !default;
+$panel-inner-border: #ddd !default;
+$panel-footer-bg: $bg-gray !default;
 
-$panel-default-text:          $gray-dark !default;
-$panel-default-border:        #ddd !default;
-$panel-default-heading-bg:    $bg-gray !default;
+$panel-default-text: $gray-dark !default;
+$panel-default-border: #ddd !default;
+$panel-default-heading-bg: $bg-gray !default;
 
-$panel-primary-text:          #fff !default;
-$panel-primary-border:        #cbcbcb !default;
-$panel-primary-heading-bg:    #fff !default;
+$panel-primary-text: #fff !default;
+$panel-primary-border: #cbcbcb !default;
+$panel-primary-heading-bg: #fff !default;
 
-$panel-success-text:          $state-success-text !default;
-$panel-success-border:        $state-success-border !default;
-$panel-success-heading-bg:    $state-success-bg !default;
+$panel-success-text: $state-success-text !default;
+$panel-success-border: $state-success-border !default;
+$panel-success-heading-bg: $state-success-bg !default;
 
-$panel-info-text:             $state-info-text !default;
-$panel-info-border:           $state-info-border !default;
-$panel-info-heading-bg:       $state-info-bg !default;
+$panel-info-text: $state-info-text !default;
+$panel-info-border: $state-info-border !default;
+$panel-info-heading-bg: $state-info-bg !default;
 
-$panel-warning-text:          $state-warning-text !default;
-$panel-warning-border:        $state-warning-border !default;
-$panel-warning-heading-bg:    $state-warning-bg !default;
-
-$panel-danger-text:           $state-danger-text !default;
-$panel-danger-border:         $state-danger-border !default;
-$panel-danger-heading-bg:     $state-danger-bg !default;
+$panel-warning-text: $state-warning-text !default;
+$panel-warning-border: $state-warning-border !default;
+$panel-warning-heading-bg: $state-warning-bg !default;
 
+$panel-danger-text: $state-danger-text !default;
+$panel-danger-border: $state-danger-border !default;
+$panel-danger-heading-bg: $state-danger-bg !default;
 
 //== Thumbnails
 //
 //##
 
 //** Padding around the thumbnail image
-$thumbnail-padding:           4px !default;
+$thumbnail-padding: 4px !default;
+
 //** Thumbnail background color
-$thumbnail-bg:                $body-bg !default;
+$thumbnail-bg: $body-bg !default;
+
 //** Thumbnail border color
-$thumbnail-border:            #ddd !default;
+$thumbnail-border: #ddd !default;
+
 //** Thumbnail border radius
-$thumbnail-border-radius:     $border-radius-base !default;
+$thumbnail-border-radius: $border-radius-base !default;
 
 //** Custom text color for thumbnail captions
-$thumbnail-caption-color:     $text-color !default;
-//** Padding around the thumbnail caption
-$thumbnail-caption-padding:   9px !default;
+$thumbnail-caption-color: $text-color !default;
 
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding: 9px !default;
 
 //== Wells
 //
 //##
 
-$well-bg:                     #fff !default;
-$well-border:                 darken($well-bg, 7%) !default;
-
+$well-bg: #fff !default;
+$well-border: darken($well-bg, 7%) !default;
 
 //== Badges
 //
 //##
 
-$badge-color:                 #fff !default;
+$badge-color: #fff !default;
+
 //** Linked badge text color on hover
-$badge-link-hover-color:      #fff !default;
-$badge-bg:                    $gray-light !default;
+$badge-link-hover-color: #fff !default;
+$badge-bg: $gray-light !default;
 
 //** Badge text color in active nav link
-$badge-active-color:          $link-color !default;
+$badge-active-color: $link-color !default;
+
 //** Badge background color in active nav link
-$badge-active-bg:             #fff !default;
-
-$badge-font-weight:           bold !default;
-$badge-line-height:           1 !default;
-$badge-border-radius:         10px !default;
+$badge-active-bg: #fff !default;
 
+$badge-font-weight: bold !default;
+$badge-line-height: 1 !default;
+$badge-border-radius: 10px !default;
 
 //== Breadcrumbs
 //
 //##
 
-$breadcrumb-padding-vertical:   8px !default;
+$breadcrumb-padding-vertical: 8px !default;
 $breadcrumb-padding-horizontal: 15px !default;
-//** Breadcrumb background color
-$breadcrumb-bg:                 $bg-gray !default;
-//** Breadcrumb text color
-$breadcrumb-color:              #ccc !default;
-//** Text color of current page in the breadcrumb
-$breadcrumb-active-color:       $gray-light !default;
-//** Textual separator for between breadcrumb elements
-$breadcrumb-separator:          "/" !default;
 
+//** Breadcrumb background color
+$breadcrumb-bg: $bg-gray !default;
+
+//** Breadcrumb text color
+$breadcrumb-color: #ccc !default;
+
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color: $gray-light !default;
+
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator: "/" !default;
 
 //== Carousel
 //
 //##
 
-$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+$carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !default;
 
-$carousel-control-color:                      #fff !default;
-$carousel-control-width:                      15% !default;
-$carousel-control-opacity:                    .5 !default;
-$carousel-control-font-size:                  20px !default;
+$carousel-control-color: #fff !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: 0.5 !default;
+$carousel-control-font-size: 20px !default;
 
-$carousel-indicator-active-bg:                #fff !default;
-$carousel-indicator-border-color:             #fff !default;
-
-$carousel-caption-color:                      #fff !default;
+$carousel-indicator-active-bg: #fff !default;
+$carousel-indicator-border-color: #fff !default;
 
+$carousel-caption-color: #fff !default;
 
 //== Close
 //
 //##
 
-$close-font-weight:           bold !default;
-$close-color:                 #000 !default;
-$close-text-shadow:           0 1px 0 #fff !default;
-
+$close-font-weight: bold !default;
+$close-color: #000 !default;
+$close-text-shadow: 0 1px 0 #fff !default;
 
 //== Code
 //
 //##
 
-$code-color:                  #c7254e !default;
-$code-bg:                     #f9f2f4 !default;
+$code-color: #c7254e !default;
+$code-bg: #f9f2f4 !default;
 
-$kbd-color:                   #fff !default;
-$kbd-bg:                      #333 !default;
-
-$pre-bg:                      transparent !default;
-$pre-color:                   $gray-dark !default;
-$pre-border-color:            transparent !default;
-$pre-scrollable-max-height:   340px !default;
+$kbd-color: #fff !default;
+$kbd-bg: #333 !default;
 
+$pre-bg: transparent !default;
+$pre-color: $gray-dark !default;
+$pre-border-color: transparent !default;
+$pre-scrollable-max-height: 340px !default;
 
 //== Type
 //
 //##
 //** Horizontal offset for forms and lists.
 $component-offset-horizontal: 180px !default;
-//** Text muted color
-$text-muted:                  $gray-light !default;
-//** Abbreviations and acronyms border color
-$abbr-border-color:           $gray-light !default;
-//** Headings small color
-$headings-small-color:        $gray-light !default;
-//** Blockquote small color
-$blockquote-small-color:      $gray-light !default;
-//** Blockquote font size
-$blockquote-font-size:        ($font-size-base * 1.25) !default;
-//** Blockquote border color
-$blockquote-border-color:     $gray-lighter !default;
-//** Page header border color
-$page-header-border-color:    $gray-lighter !default;
-//** Width of horizontal description list titles
-$dl-horizontal-offset:        $component-offset-horizontal !default;
-//** Point at which .dl-horizontal becomes horizontal
-$dl-horizontal-breakpoint:    $grid-float-breakpoint;
-//** Horizontal line color.
-$hr-border:                   $gray-lighter !default;
 
+//** Text muted color
+$text-muted: $gray-light !default;
+
+//** Abbreviations and acronyms border color
+$abbr-border-color: $gray-light !default;
+
+//** Headings small color
+$headings-small-color: $gray-light !default;
+
+//** Blockquote small color
+$blockquote-small-color: $gray-light !default;
+
+//** Blockquote font size
+$blockquote-font-size: $font-size-base * 1.25 !default;
+
+//** Blockquote border color
+$blockquote-border-color: $gray-lighter !default;
+
+//** Page header border color
+$page-header-border-color: $gray-lighter !default;
+
+//** Width of horizontal description list titles
+$dl-horizontal-offset: $component-offset-horizontal !default;
+
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint: $grid-float-breakpoint;
+
+//** Horizontal line color.
+$hr-border: $gray-lighter !default;
 
 // Core variables and mixins
 // @import "bootstrap/variables";  //overrides
diff --git a/app/assets/stylesheets/modules/abuses.scss b/app/assets/stylesheets/modules/abuses.scss
index fbd61f222..61f2c0411 100644
--- a/app/assets/stylesheets/modules/abuses.scss
+++ b/app/assets/stylesheets/modules/abuses.scss
@@ -1,5 +1,4 @@
 li.abuse {
-
   list-style: none;
   border: 1px solid #ddd;
   border-radius: 2px;
diff --git a/app/assets/stylesheets/modules/cookies.scss b/app/assets/stylesheets/modules/cookies.scss
index 77afd4977..f33282a79 100644
--- a/app/assets/stylesheets/modules/cookies.scss
+++ b/app/assets/stylesheets/modules/cookies.scss
@@ -8,19 +8,22 @@
   padding: 3rem;
   flex-direction: column;
   z-index: 100;
-  -webkit-box-shadow: 0 4px 10px 2px rgba(224,224,224,0.43);
-  -moz-box-shadow: 0 4px 10px 2px rgba(224,224,224,0.43);
-  box-shadow: 0 4px 10px 2px rgba(224,224,224,0.43);
+  -webkit-box-shadow: 0 4px 10px 2px rgba(224, 224, 224, 0.43);
+  -moz-box-shadow: 0 4px 10px 2px rgba(224, 224, 224, 0.43);
+  box-shadow: 0 4px 10px 2px rgba(224, 224, 224, 0.43);
 
   .cookies-actions {
     display: flex;
+
     button {
       flex-basis: 50%;
     }
+
     button.decline {
       background-color: transparent;
       border: 0;
     }
+
     button.accept {
       background-color: red;
       border: 0;
diff --git a/app/assets/stylesheets/modules/icalendar.scss b/app/assets/stylesheets/modules/icalendar.scss
index d97ed60f7..fb0c0d0b2 100644
--- a/app/assets/stylesheets/modules/icalendar.scss
+++ b/app/assets/stylesheets/modules/icalendar.scss
@@ -1,5 +1,5 @@
 .calendar-form {
-  margin : 2em;
+  margin: 2em;
   border: 1px solid #ddd;
   border-radius: 3px;
   padding: 1em;
@@ -21,4 +21,4 @@
 .external-calendar-legend {
   border-left: 3px solid;
   border-radius: 3px;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/modules/invoice.scss b/app/assets/stylesheets/modules/invoice.scss
index fb524d20e..06e77339d 100644
--- a/app/assets/stylesheets/modules/invoice.scss
+++ b/app/assets/stylesheets/modules/invoice.scss
@@ -1,4 +1,3 @@
-
 // admin invoices
 
 .chained {
@@ -18,8 +17,7 @@
   border-width: 1px;
   border-style: solid;
   border-color: #aeaeae #979797 #7b7b7b;
-  box-shadow: 2px 3px 6px 0 #898989,
-              -2px 3px 6px 0 #898989;
+  box-shadow: 2px 3px 6px 0 #898989, -2px 3px 6px 0 #898989;
   padding: 2em;
 
   .invoice-buyer-infos {
@@ -61,7 +59,7 @@
   }
 
   .invoice-data table {
-    width: 100%
+    width: 100%;
   }
 
   .invoice-data tr, .invoice-data th, .invoice-data td {
@@ -93,11 +91,10 @@
     border: 1px dashed #c4c4c4;
   }
 
-
   &:after {
-    content:"";
-    display:block;
-    margin-top:30%;
+    content: "";
+    display: block;
+    margin-top: 30%;
   }
 
   .vat-line {
@@ -116,26 +113,27 @@
   .right {
     text-align: right;
   }
-
 }
 
 .custom-invoice {
   .modal-header {
     @extend .modal-header;
+
     // padding-left: 4em;
     text-align: center;
     background-color: #e6e6e6;
   }
 
   .modal-body {
-
     .elements ul {
       @extend .list-unstyled;
     }
 
     .elements li {
       @extend .btn;
+
       @extend .btn-default;
+
       width: 100%;
     }
 
@@ -151,18 +149,23 @@
     .bottom-notes {
       font-style: italic;
     }
-
   }
-
 }
 
-
 .partial-avoir-table tr {
-  float:left;
+  float: left;
 
-  .input-col { min-width: 2em; }
-  .label-col { min-width: 18em; }
-  .amount-col { min-width: 6em; }
+  .input-col {
+    min-width: 2em;
+  }
+
+  .label-col {
+    min-width: 18em;
+  }
+
+  .amount-col {
+    min-width: 6em;
+  }
 }
 
 .partial-avoir-selected-item {
@@ -171,8 +174,8 @@
   position: relative;
 
   &:after {
-    content:"Rembourser";
-    display:inline-block;
+    content: "Rembourser";
+    display: inline-block;
     position: absolute;
     right: 0.8em;
     top: 1.8em;
@@ -193,7 +196,6 @@
   color: #5a5a5a;
 }
 
-
 table.closings-table {
   @extend table.scrollable-3-cols;
 
@@ -223,6 +225,7 @@ table.closings-table {
     i {
       display: none;
     }
+
     &:after {
       content: '\f019';
       font-family: 'fontawesome';
@@ -234,22 +237,26 @@ table.scrollable-3-cols {
   width: 100%;
   border-spacing: 0;
 
-  thead, tbody, tr, th, td { display: block; }
+  thead, tbody, tr, th, td {
+    display: block;
+  }
 
   thead tr {
     /* fallback */
     width: 97%;
+
     /* minus scroll bar width */
     width: -webkit-calc(100% - 16px);
-    width:    -moz-calc(100% - 16px);
-    width:         calc(100% - 16px);
+    width: -moz-calc(100% - 16px);
+    width: calc(100% - 16px);
   }
 
   thead tr th {
     border-bottom: 0;
   }
 
-  tr:after {  /* clearing float */
+  tr:after {
+    /* clearing float */
     content: ' ';
     display: block;
     visibility: hidden;
@@ -263,12 +270,13 @@ table.scrollable-3-cols {
   }
 
   tbody td, thead th {
-    width: 32%;  /* 32% is less than (100% / 3 cols) = 33.33% */
+    width: 32%;
+
+    /* 32% is less than (100% / 3 cols) = 33.33% */
     float: left;
   }
 }
 
-
 .period-info-title {
   font-weight: bold;
 }
diff --git a/app/assets/stylesheets/modules/settings.scss b/app/assets/stylesheets/modules/settings.scss
index 2536f61d2..7414033a5 100644
--- a/app/assets/stylesheets/modules/settings.scss
+++ b/app/assets/stylesheets/modules/settings.scss
@@ -5,6 +5,7 @@
         .note-toolbar .note-btn-group .note-btn .nugget {
           font-family: "FontAwesome";
         }
+
         .note-editing-area .note-editable {
           #news {
             width: 100%;
@@ -20,29 +21,35 @@
 
           #projects {
             @extend #news;
+
             line-height: 523px;
           }
 
           #twitter {
             @extend #news;
+
             line-height: 162px;
           }
 
           #members {
             @extend #news;
+
             line-height: 320px;
           }
 
           #events {
             @extend #news;
+
             line-height: 621px;
           }
         }
       }
     }
+
     .home-page-style {
       .panel {
         border: 0;
+
         .panel-heading {
           background: none;
 
diff --git a/app/assets/stylesheets/modules/signup.scss b/app/assets/stylesheets/modules/signup.scss
index 986bb11e4..712d28d35 100644
--- a/app/assets/stylesheets/modules/signup.scss
+++ b/app/assets/stylesheets/modules/signup.scss
@@ -5,24 +5,29 @@
       display: inline-block;
     }
   }
+
   .required-row {
     div.input-group {
       width: 95%;
       display: inline-table;
     }
+
     select.form-control {
       width: 95%;
       display: inline-block;
     }
+
     .exponent {
       position: relative;
       top: -14px;
       right: -4px;
     }
+
     .exponent-select {
       top: -1px;
     }
   }
+
   .info-required {
     color: #5a5a5a;
     font-size: 8pt;
diff --git a/app/assets/stylesheets/modules/tour.scss b/app/assets/stylesheets/modules/tour.scss
index 8e0fdb8fe..49f7baba4 100644
--- a/app/assets/stylesheets/modules/tour.scss
+++ b/app/assets/stylesheets/modules/tour.scss
@@ -4,7 +4,6 @@
   z-index: 10000;
 }
 
-
 .ui-tour-popup.popover {
   max-width: 414px;
 }
@@ -22,10 +21,22 @@
   }
 }
 
-.shift-right-40 { margin-left: 40px; }
+.shift-right-40 {
+  margin-left: 40px;
+}
 
-.shift-left-40 { margin-left: -40px; }
-.shift-left-50 { margin-left: -50px; }
-.shift-left-80 { margin-left: -80px; }
+.shift-left-40 {
+  margin-left: -40px;
+}
 
-.width-350 { width: 350px; }
+.shift-left-50 {
+  margin-left: -50px;
+}
+
+.shift-left-80 {
+  margin-left: -80px;
+}
+
+.width-350 {
+  width: 350px;
+}