Issue 2675 - Implemented responsive header for web.eyeo.com

static/css/styles.css

 /*
  * Fonts
  */
 @font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 400;
   src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.woff) format('woff');
 }
 @font-face {
@@ skipping 86 matching lines @@
 h6
 {
   font-size:12px;
 }
 
 #header
 {
   position: fixed;
   background-color: #fff;
   width: 100%;
-  top: 0;
-  left: 0;
-  box-shadow: 0 0 12px rgba(0,0,0, 0.09);
+  top: 0px;
+  left: 0px;
+  box-shadow: 0px 0px 12px rgba(0,0,0, 0.09);
   z-index: 10000;
   text-align: right;
 }
 
 #header .content-block
 {
   position: relative;
   padding: 15px 10px;
   min-height: 32px;
 }
 
 #header.top .content-block
 {
   padding: 25px 10px;
 }
 
 #logo
 {
   position: absolute;
   top: 7px;
   left: 10px;
 }
 
 #header.top #logo
 {
-  top: 17.5px;
+  top: 17px;
 }
 
 #header .menu-button
 {
-  margin: 0 0 0 25px;
+  margin: 0px 0px 0px 25px;
 }
 
 #menu
 {
   display: inline;
   vertical-align: middle;
 }
 
 .assistive-text
 {
-  position: absolute;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
-  top: -99999px;
-  left: -99999px;
 }
 
 .menu-list
 {
   display: inline;
   margin: 0px;
   font-size: 15px;
   list-style: none;
 }
 
@@ skipping 630 matching lines @@
 .why-work-here-button:focus
 {
   background-color: #333;
 }
 
 
 @media (max-width: 768px)
 {
   body
   {
-    padding-top: 64px;
+    padding-top: 50px;
   }
 
   #header .content-block,
   #header.top .content-block
   {
     padding: 9px 10px;
   }
 
   #header.top #logo
   {
@@ skipping 34 matching lines @@
   }
 
   .menu-list > li
   {
     display: block;
     border-top: 1px solid #eee;
   }
 
   .menu-list > li > a
   {
-    padding: 10px;
     display: block;
     margin: 0px;
+    padding: 10px;
     font-size: 14px
   }
 
   .menu-button
   {
     position: absolute;
     top: 9px;
     right: 50px;
     height: 32px;
+    padding: 0 10px;
     line-height: 32px;
-    padding: 0 10px;
     font-size: 14px;
   }
 
   .columns-container .column
   {
     width: 100%;
     margin-left: 0;
     clear: both;
   }
 
@@ skipping 10 matching lines @@
   .no-mobile
   {
     display: none;
   }
 }
 
 @media (min-width: 751px)
 {
   .ui-tabs-nav-vertical
   {
-    float: left;
-    width: 100%;
     padding: .2em .1em .2em .2em;
+    float: left; width: 100%;
     border-bottom: none;
   }
   .ui-tabs-nav-vertical li
   {
     clear: left;
     width: 100%;
     border-bottom-width: 1px !important;
     border-left: 1px solid #E1E1E1 !important;
     margin: 0 -1px .2em 0;
   }
   .ui-tabs-nav-vertical li.ui-tabs-active
   {
     padding-bottom: 0;
     padding-right: .1em;
     border-right-width: 1px;
     border-right-width: 1px;
   }
 
   #panels-openings
   {
     margin-top: -40px;
   }
 }