Issue 5634 - Replaced logo and refactored navbar width and colors

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -86,18 +86,19 @@
   .two-thirds {
     width: 66.666667%; }
   .one-fourth {
     width: 25%; }
   .three-fourths {
     width: 75%; } }
 
 *
+>>>>>>> destination
 {
-  font-family: Arial, sans;
+  font-family: 'Source Sans Pro', sans-serif;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
 }
@@ -140,74 +141,290 @@
 
 nav ul
 {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-nav a:link, nav a:visited
+nav a:link,
+nav a:visited
 {
   color: #7d7d7d;
   text-decoration: none;
 }
 
 nav a:hover
 {
   text-decoration: underline;
 }
 
-header
+.container
+{
+  max-width: 1170px;
+}
+
+@media (min-width: 1170px)
+{
+  .container
+  {
+    margin: 0 auto;
+  }
+}
+
+#navbar-primary
 {
-  display: block;
-  position: relative;
-  background: white;
-  border: 1px solid #d9d9d9;
-  border-top: none;
-  box-shadow: 1px 1px 0 0 #d9d9d9;
-  z-index: 1;
+  background-color: #c70d2c;
+}
+
+#navbar-logo
+{
+  padding: 0px 15px;
+  color: #fff;
+}
+
+#navbar-logo:hover,
+#navbar-logo:active,
+#navbar-logo:focus
+{
+  background-color: #AE0013;
+  text-decoration: none;
 }
 
-header nav li
+#navbar-logo,
+#navbar-logo > *
 {
-  padding: 0px 5px;
+  display: block;
+  float: left;
+}
+
+[dir="rtl"] #navbar-logo,
+[dir="rtl"] #navbar-logo > *
+{
+  float: right;
+}
+
+#navbar-logo > img
+{
+  height: 48px;
+  padding: 11px 0px;
+  margin: 0px 15px 0px 0px;
 }
 
-header nav li.selected
+[dir="rtl"] #navbar-logo > img
+{
+  margin: 0px 0px 0px 15px;
+}
+
+#navbar-logo > span
 {
-  color: #db1313;
-  text-shadow: 1px 1px 1px #eee;
-  cursor: default;
+  line-height: 70px;
+  font-size: 22px;
+}
+
+#navbar-nav li
+{
+  list-style-type: none;
+}
+
+#navbar-nav a
+{
+  color: #fff;
+  text-decoration: none;
 }
 
-header nav li.install-link a
+@media(max-width: 999px)
 {
-  color: #048e48;
+  #navbar-primary
+  {
+    min-height: 70px;
+  }
+
+  #navbar-menu
+  {
+    display: block;
+  }
+
+  #navbar-menu,
+  #navbar-menu > img
+  {
+    float: right;
+  }
+
+  [dir="rtl"] #navbar-menu,
+  [dir="rtl"] #navbar-menu > img
+  {
+    float: left;
+  }
+
+  #navbar-menu > img
+  {
+    display: inline-block;
+    height: 25px;
+    padding: 22.5px 15px;
+  }
+
+  #navbar-menu:hover,
+  #navbar-menu:active,
+  #navbar-menu:focus
+  {
+    background-color: #AE0013;
+  }
+
+  #navbar-nav
+  {
+    display: none;
+    float: left;
+    background-color: #292929;
+  }
+
+  #navbar-nav.visible
+  {
+    display: block;
+  }
+
+  #navbar-nav li,
+  #navbar-nav li a
+  {
+    display: block;
+  }
+
+  #navbar-nav li a
+  {
+    font-size: 20px;
+    line-height: 60px;
+    padding: 0px 20px;
+  }
+
+  #navbar-nav li a:hover,
+  #navbar-nav li a:active,
+  #navbar-nav li a:focus
+  {
+    background-color: #434343;
+  }
+
+  #locales li,
+  #locales  a
+  {
+    display: inline-block;
+  }
+
+  #navbar-nav #selected-locale
+  {
+    display: none;
+  }
 }
 
-header nav li.install-link .install-link-icon
-{
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background-position: -167px -13px;
-}
-
-.language-entry a
+@media(min-width: 1000px)
 {
-  display: block;
-}
+  #navbar-primary
+  {
+    height: 70px;
+  }
+
+  #navbar-nav
+  {
+    float: right;
+  }
+
+  [dir="rtl"] #navbar-nav
+  {
+    float: left;
+  }
+
+  #navbar-nav > li,
+  #navbar-nav > li > a
+  {
+    display: inline-block;
+  }
+
+  #navbar-nav > li > a
+  {
+    padding: 0px 15px;
+    font-size: 18px;
+    line-height: 70px;
+  }
+
+  #navbar-nav > li > a:hover,
+  #navbar-nav > li > a:active,
+  #navbar-nav > li > a:focus
+  {
+    background-color: #AE0013;
+  }
+
+  #locale
+  {
+    position: relative;
+  }
 
-#logo
-{
-  position: absolute;
-  width: 128px;
-  height: 128px;
-  background-position: -83px -83px;
+  #locales
+  {
+    position: absolute;
+    display: none;
+    min-width: 160px;
+    max-height: 384px;
+    max-height: 50vh;
+    top: 100%;
+    right: 0px;
+    overflow: auto;
+    z-index: 1000;
+  }
+
+  [dir="rtl"] #locales
+  {
+    right: auto;
+    left: 0px;
+  }
+
+  #locales.visible
+  {
+    display: block;
+  }
+
+  #locales > li,
+  #locales > li > a
+  {
+    display: block;
+    white-space: nowrap;
+  }
+
+  #locales > li > a
+  {
+    padding: 0px 15px;
+    font-size: 16px;
+    line-height: 50px;
+    background-color: #292929;
+    text-decoration: none;
+  }
+
+  #locales > li > a:hover,
+  #locales > li > a:active,
+  #locales > li > a:focus
+  {
+    background-color: #434343;
+  }
+
+  #selected-locale::after
+  {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid;
+    border-right: .3em solid transparent;
+    border-left: .3em solid transparent;
+  }
+
+  #navbar-menu
+  {
+    display: none;
+  }
 }
 
 #content h1
 {
   font-size: 30px;
 }
 
 #content h2