Adjustments to the fatnav and sidenav, and other CSS updates

chrome/common/extensions/docs/static/sass/_html.scss

Index: chrome/common/extensions/docs/static/sass/_html.scss
diff --git a/chrome/common/extensions/docs/static/sass/_html.scss b/chrome/common/extensions/docs/static/sass/_html.scss
index b02259e7cda3e4030bf98e053b8c41ac9fa27587..6db560fb75507cea7e590db0ff8bae64b2252001 100644
--- a/chrome/common/extensions/docs/static/sass/_html.scss
+++ b/chrome/common/extensions/docs/static/sass/_html.scss
@@ -57,11 +57,7 @@ pre {
   }
   strike {
     text-decoration: none;
-    background-image: -webkit-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
-    background-image:    -moz-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
-    background-image:     -ms-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
-    background-image:      -o-linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
-    background-image:         linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
+    background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
   }
   &[data-filename]::after {
     visibility: hidden;
@@ -134,7 +130,7 @@ pre {
 // Big blue buttonz!
 .button {
   background: #0370ea;
-  @include background-image(linear-gradient(top, #008dfd 0%,#0370ea 100%));
+  background-image: linear-gradient(top, #008dfd 0%,#0370ea 100%);
   border: 1px solid #076bd2;
   border-radius: 3px;
   color: $white !important;
@@ -148,7 +144,7 @@ pre {
   text-shadow: 1px 1px 1px #076bd2;
 
   &:hover {
-    @include background-image(linear-gradient(top, #008dfd 30%,#0370ea 100%));
+    background-image: linear-gradient(top, #008dfd 30%,#0370ea 100%);
     cursor: pointer;
   }
 
@@ -159,7 +155,7 @@ pre {
 
 .button-alt {
   background: #eee;
-  @include background-image(linear-gradient(bottom, #DCDCDC 46%, #FAFAFA 87%));
+  background-image: linear-gradient(bottom, #DCDCDC 46%, #FAFAFA 87%);
   border: 1px solid #d6d6d6;
   border-radius: 3px;
   color: #333 !important;
@@ -173,7 +169,7 @@ pre {
   text-shadow: none;
 
   &:hover {
-    @include background-image(linear-gradient(bottom, #DCDCDC 20%, #FAFAFA 87%));
+    background-image: linear-gradient(bottom, #DCDCDC 20%, #FAFAFA 87%);
     cursor: pointer;
   }
 }
@@ -189,11 +185,11 @@ pre {
 
   &:hover {
     border-color: #c6c6c6;
-    @include box-shadow(0 -1px 1px rgba(0,0,0,0.1));
+    box-shadow: 0 -1px 1px rgba(0,0,0,0.1);
   }
   &:active {
     background-color: #f1f1f1;
-    @include box-shadow(inset 0 0px 2px rgba(0,0,0,0.2));
+    box-shadow: inset 0 0px 2px rgba(0,0,0,0.2);
   }
 }
 
@@ -202,6 +198,24 @@ pre {
   margin: 1em 0;  
 }
 
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+  margin: 0 0 20px 0;
+}
+.video-container iframe,
+.video-container object,
+.video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 p, div, aside {
   &.note,
   &.caution,
@@ -215,7 +229,6 @@ p, div, aside {
     padding: 1em;
     //border: none;
     //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15);
-    //background-image: -webkit-linear-gradient(top, rgba(51, 102, 204, 0.1), transparent, rgba(51, 102, 204, 0.1));
 
   }
   &.note {