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
@@ -1,11 +1,43 @@
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-style: normal;
+
+  src: url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot");
+  src: url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot?#iefix") format("embedded-opentype"),
+  local("Source Sans Pro"),
+  local("Source-Sans-Pro-regular"),
+  url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff2") format("woff2"),
+  url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff") format("woff"),
+  url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.ttf") format("truetype"),
+  url("/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.svg#SourceSansPro") format("svg");
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-weight: 700;
+  font-style: bold;
+
+  src: url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot");
+  src: url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot?#iefix") format("embedded-opentype"),
+  local("Source Sans Pro Bold"),
+  local("Source-Sans-Pro-700"),
+  url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff2") format("woff2"),
+  url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff") format("woff"),
+  url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.ttf") format("truetype"),
+  url("/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.svg#SourceSansPro") format("svg");
+}
+
 *
 {
-  font-family: Arial, sans;
+  font-family: 'Source Sans Pro', sans-serif;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
 }
@@ -48,66 +80,185 @@
 
 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
+{
+  margin: 0 15px;
+  max-width: 1170px;
+}
+
+@media (min-width: 1200px)
+{
+  .container
+  {
+    margin: 0 auto;
+  }
+}
+
+.accent
 {
-  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;
+  color: #fff;
+}
+
+.accent a,
+.accent a:link,
+.accent a:visited
+{
+  color: #fff;
+}
+
+.secondary
+{
+  background-color: #292929;
+  color: #fff;
 }
 
-header nav li
+.secondary a,
+.secondary a:link,
+.secondary a:visited
+{
+  color: #fff;
+}
+
+.navbar
+{
+  height: 70px;
+}
+
+.navbar a:hover,
+.navbar a:active,
+.navbar a:focus
+{
+  text-decoration: none;
+}
+
+.navbar-brand img
 {
-  padding: 0px 5px;
+  display: inline;
+  height: 48px;
+  padding: 11px 0px;
+  line-height: 48px;
+}
+
+.navbar-brand,
+.navbar-nav li
+{
+  float: left;
+}
+
+.navbar-nav
+{
+  float: right;
+}
+
+.navbar-nav a
+{
+  display: inline-block;
+  padding: 26px 15px;
+  font-size: 18px;
+  line-height: 1;
 }
 
-header nav li.selected
+.navbar-nav a:hover,
+.navbar-nav a:active,
+.navbar-nav a:focus
 {
-  color: #db1313;
-  text-shadow: 1px 1px 1px #eee;
-  cursor: default;
+  background-color: #AE0013;
+}
+
+.navbar-nav,
+.navbar-nav li
+{
+  display: inline-block;
+  list-style-type: none;
 }
 
-header nav li.install-link a
+.dropdown
+{
+  position: relative;
+}
+
+.dropdown-menu
 {
-  color: #048e48;
+  position: absolute;
+  display: none;
+  min-width: 160px;
+  max-height: 384px;
+  max-height: 50vh;
+  top: 100%;
+  right: 0;
+  overflow: auto;
+  z-index: 1000;
+}
+
+.dropdown-menu.visible
+{
+  display: block;
 }
 
-header nav li.install-link .install-link-icon
+.dropdown-menu li,
+.dropdown-menu a
+{
+  display: block;
+  float: none;
+  white-space: nowrap;
+}
+
+.dropdown-menu a
+{
+  font-size: 16px;
+  line-height: 50px;
+  padding: 0px 15px;
+}
+
+.dropdown-menu a:hover,
+.dropdown-menu a:active,
+.dropdown-menu a:focus
+{
+  background-color: #434343;
+}
+
+.dropdown-toggle::after
 {
   display: inline-block;
-  width: 12px;
-  height: 12px;
-  background-position: -167px -13px;
+  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;
 }
 
-.language-entry a
+.navbar .install-link a,
+.navbar .install-link a:hover,
+.navbar .install-link a:active,
+.navbar .install-link a:focus
 {
-  display: block;
+  background-color: #000;
 }
 
 #flag-ar
 {
   background-position: 0px 0px;
 }
 
 #flag-bg