update the subnav on all pages

2 files changed, 30 insertions, 14 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index dd723800b..776ca58b9 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -125,7 +125,9 @@ section {
 }
 
 /* Subnav */
-.subhead .nav {
+.subnav {
+  width: 100%;
+  height: 36px;
   background-color: #eeeeee; /* Old browsers */
   background-repeat: repeat-x; /* Repeat the gradient */
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
@@ -138,23 +140,30 @@ section {
   border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
-          border-radius: 4px;
+          border-radius: 4px;  
+}
+.subhead .nav {
 }
 .subhead .nav a {
   margin: 0;
   padding-top: 11px;
   padding-bottom: 11px;
   font-size: 13px;
+  color: #777;
   border-left: 1px solid #f5f5f5;
   border-right: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
+.subhead .nav a:hover,
 .subhead .nav .active a {
-  background-color: #fff;
+  background-color: transparent;
   color: #333;
 }
+.subhead .nav .active a {
+  background-color: #eee;
+}
 .subhead .nav li:first-child a {
   border-left: 0;
   -webkit-border-radius: 4px 0 0 4px;
@@ -165,17 +174,24 @@ section {
   border-right: 0;
 }
 
-.subhead .subnav-fixed {
+.subnav-fixed {
   position: fixed;
   top: 40px;
+  left: 0;
+  right: 0;
   z-index: 1030;
-  width: 938px;
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.05);
-     -moz-box-shadow: 0 1px 5px rgba(0,0,0,.05);
-          box-shadow: 0 1px 5px rgba(0,0,0,.05);
+  border-color: #d5d5d5;
+  border-width: 0 0 1px; /* drop the border on the fixed edges */
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+          box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+}
+.subnav-fixed .nav {
+  width: 940px;
+  margin: 0 auto;
 }
 
 
@@ -438,7 +454,7 @@ h2 + .row {
 
 /* Example sites showcase */
 .example-sites img {
-  max-width: 290px;
+  max-width: 100%;
 }
 .marketing-byline {
   margin: -18px 0 27px;
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 4b7efe53f..0252d75e9 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -118,8 +118,8 @@ $(function(){
 
   // fix sub nav playa
   var $win = $(window)
-    , $nav = $('.subhead .nav')
-    , navTop = $('.subhead .nav').offset().top - 40
+    , $nav = $('.subnav')
+    , navTop = $('.subnav').offset().top - 40
     , isFixed = 0
 
   processScroll()