Changes styles for header

app/assets/stylesheets/debates.scss

@@ -96,7 +96,49 @@ header {
   .button {
     color: white;
     font-family: inherit;
-    margin-top: $line-height*2;
+    margin-top: $line-height;
+  }
+
+  .home-page {
+    .button {
+      color: white;
+      font-family: inherit;
+      margin-top: $line-height*2;
+    }
+  }
+
+  .selected {
+    position: relative;
+
+    &:before {
+      top: -14px;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    border-top-color: #fff;
+    border-width: 8px;
+    margin-left: -8px;
+    }
+  }
+
+  .language {
+    float: none;
+    text-align: center;
+
+    @media (min-width: 480px) {
+      float: left;
+    }
+  }
+
+  .external-links {
+    @extend .language;
+
+    @media (min-width: 480px) {
+      float: right;
+    }
   }
 }
 
@@ -105,13 +147,13 @@ header {
 }
 
 .top-bar {
-  background: white;
-  color: $header-color;
+  background: rgba(0,0,0,.5);
+  color: white; //$header-color;
   height: $line-height*4;
   max-width: 1170px !important;
 
   .name a {
-    color: black;
+    color: white;
     font-family: 'Lato';
     font-size: rem-calc(36);
     font-weight: lighter;
@@ -119,7 +161,7 @@ header {
     padding-left: 0;
 
     span {
-      color: $brand;
+      // color: $brand;
       font-size: rem-calc(24);
       font-weight: normal;
     }
@@ -131,14 +173,29 @@ header {
 }
 
 .top-bar-section {
+    margin-right: $line-height;
+
+  ul li > a {
+    font-size: rem-calc(14);
+  }
+
+  ul li, ul li:hover:not(.has-form) > a {
+    background: none;
+  }
 
   li:not(.has-form) a:not(.button) {
-    background: white;
-    color: $brand;
+    background: none;
+    color: white;
     line-height: $line-height*4;
+
+    &:hover {
+      background: none;
+      color: $link-hover;
+    }
   }
 
   li.active:not(.has-form) a:not(.button) {
+    background: none;
     height: $line-height*4;
     line-height: $line-height*4;
   }
@@ -147,9 +204,13 @@ header {
 .top-links {
   color: white;
   font-size: rem-calc(14);
-  height: $line-height*2;
+  height: $line-height*3;
   padding: $line-height/2 0;
 
+  @media (min-width: 480px) {
+    height: $line-height*2;
+  }
+
   a {
     color: white;
   }
@@ -179,7 +240,7 @@ header {
 
   .icon-like {
     background: white;
-    border: 2px solid white;
+    border: 2px solid $votes-border;
     border-radius: rem-calc(3);
     color: $votes-neutral;
     display: inline-block;
@@ -187,10 +248,10 @@ header {
     line-height: rem-calc(30);
     padding: rem-calc(3) rem-calc(6);
     position: relative;
-    //when active => color: $votes-like;
 
     &:hover {
       background: $votes-like;
+      border-color: white;
       color: white;
       cursor: pointer;
     }
@@ -202,7 +263,7 @@ header {
 
   .icon-unlike {
     background: white;
-    border: 2px solid white;
+    border: 2px solid $votes-border;
     border-radius: rem-calc(3);
     color: $votes-neutral;
     display: inline-block;
@@ -210,10 +271,10 @@ header {
     line-height: rem-calc(30);
     padding: rem-calc(3) rem-calc(6);
     position: relative;
-    //when active => color: $votes-unlike;
 
     &:hover {
       background: $votes-unlike;
+      border-color: white;
       color: white;
       cursor: pointer;
     }

app/assets/stylesheets/variables.scss

@@ -26,7 +26,8 @@ $comments-info:     #A5B2B9;
 $comments-text:     #3F4549;
 
 $header-color:      #292B33;
-$link:              #0077B9;
+$link:              #2895F1;
+$link-hover: 		#2178BF;
 
 $tags-bg:           #FAFAFA;
 $tags-border:       #F0F0F0;
@@ -37,8 +38,8 @@ $text-medium:       #999999;
 $text-light:        #A3A6AD;
 
 $votes:             #31708f;
-$votes-background:  #0081B3;
-$votes-border:      #005b80;
+$votes-background:  #26AEEE;//#0081B3;
+$votes-border:      #1F94CB;//#005b80;
 $votes-like:        #7BD2A8;
 $votes-like-act:    #5D9E7F;
 $votes-neutral:     #CCCCCC;