Fixed the issue with the non-draggable horizontal scrollbar

2 files changed, 83 insertions, 76 deletions

diff --git a/rest_framework/static/rest_framework/css/bootstrap-tweaks.css b/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
index 6bfb778c..e5cc65ab 100644
--- a/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
+++ b/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
@@ -6,30 +6,30 @@ a single block in the template.
 
 */
 
-
 .form-actions {
-    background: transparent;
-    border-top-color: transparent;
-    padding-top: 0;
+  background: transparent;
+  border-top-color: transparent;
+  padding-top: 0;
 }
 
 .navbar-inverse .brand a {
-    color: #999;
+  color: #999999;
 }
 .navbar-inverse .brand:hover a {
-    color: white;
-    text-decoration: none;
+  color: white;
+  text-decoration: none;
 }
 
 /* custom navigation styles */
-.wrapper .navbar{
+.navbar {
   width: 100%;
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
+  z-index: 3;
 }
 
-.navbar .navbar-inner{
+.navbar .navbar-inner {
   background: #2C2C2C;
   color: white;
   border: none;
@@ -37,7 +37,7 @@ a single block in the template.
   border-radius: 0px;
 }
 
-.navbar .navbar-inner .nav li, .navbar .navbar-inner .nav li a, .navbar .navbar-inner .brand:hover{
+.navbar .navbar-inner .nav li, .navbar .navbar-inner .nav li a, .navbar .navbar-inner .brand:hover {
   color: white;
 }
 
@@ -45,17 +45,18 @@ a single block in the template.
   background: #2c2c2c;
 }
 
-.navbar .navbar-inner .dropdown-menu li a, .navbar .navbar-inner .dropdown-menu li{
- color: #A30000;
+.navbar .navbar-inner .dropdown-menu li a, .navbar .navbar-inner .dropdown-menu li {
+  color: #A30000;
 }
-.navbar .navbar-inner .dropdown-menu li a:hover{
+
+.navbar .navbar-inner .dropdown-menu li a:hover {
   background: #eeeeee;
   color: #c20000;
 }
 
 /*=== dabapps bootstrap styles ====*/
 
-html{
+html {
   width:100%;
   background: none;
 }
@@ -65,121 +66,127 @@ body, .navbar .navbar-inner .container-fluid {
   margin: 0 auto;
 }
 
-body{
+body {
   background: url("../img/grid.png") repeat-x;
   background-attachment: fixed;
 }
 
-#content{
-    margin: 0;
+#content {
+  margin: 0;
+  padding-bottom: 60px;
 }
 
 /* sticky footer and footer */
 html, body {
   height: 100%;
 }
+
 .wrapper {
+  position: relative;
+  top: 0;
+  left: 0;
+  padding-top: 60px;
+  margin: -60px 0;
   min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -60px;
 }
 
 .form-switcher {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .well {
-    -webkit-box-shadow: none;
-       -moz-box-shadow: none;
-            box-shadow: none;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
 }
 
 .well .form-actions {
-    padding-bottom: 0;
-    margin-bottom: 0;
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
 
 .well form {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .well form .help-block {
-    color: #999;
+  color: #999999;
 }
 
 .nav-tabs {
-    border: 0;
+  border: 0;
 }
 
 .nav-tabs > li {
-    float: right;
+  float: right;
 }
 
 .nav-tabs li a {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .nav-tabs > .active > a {
-    background: #f5f5f5;
+  background: #F5F5F5;
 }
 
 .nav-tabs > .active > a:hover {
-    background: #f5f5f5;
-}
-
-.tabbable.first-tab-active .tab-content
-{
-    border-top-right-radius: 0;
+  background: #F5F5F5;
 }
 
-#footer, #push {
-  height: 60px; /* .push must be the same height as .footer */
+.tabbable.first-tab-active .tab-content {
+  border-top-right-radius: 0;
 }
 
-#footer{
-    text-align: right;
+footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  clear: both;
+  z-index: 10;
+  height: 60px;
+  width: 95%;
+  margin: 0 2.5%;
 }
 
-#footer p {
+footer p {
   text-align: center;
   color: gray;
   border-top: 1px solid #DDD;
   padding-top: 10px;
 }
 
-#footer a {
-  color: gray;
+footer a {
+  color: gray !important;
   font-weight: bold;
 }
 
-#footer a:hover {
+footer a:hover {
   color: gray;
 }
 
 .page-header {
-    border-bottom: none;
-    padding-bottom: 0px;
-    margin-bottom: 20px;
+  border-bottom: none;
+  padding-bottom: 0px;
+  margin-bottom: 20px;
 }
 
 /* custom general page styles */
-.hero-unit h2, .hero-unit h1{
+.hero-unit h1, .hero-unit h2 {
   color: #A30000;
 }
 
-body a, body a{
+body a {
   color: #A30000;
 }
 
-body a:hover{
+body a:hover {
   color: #c20000;
 }
 
-#content a span{
-    text-decoration: underline;
+#content a span {
+  text-decoration: underline;
  }
 
 .request-info {
-    clear:both;
+  clear:both;
 }
diff --git a/rest_framework/static/rest_framework/css/default.css b/rest_framework/static/rest_framework/css/default.css
index 0261a303..461cdfe5 100644
--- a/rest_framework/static/rest_framework/css/default.css
+++ b/rest_framework/static/rest_framework/css/default.css
@@ -3,20 +3,20 @@
 content running up underneath it. */
 
 h1 {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 h2, h3 {
-    font-weight: 300;
+  font-weight: 300;
 }
 
 .resource-description, .response-info {
-    margin-bottom: 2em;
+  margin-bottom: 2em;
 }
 .version:before {
-    content: "v";
-    opacity: 0.6;
-    padding-right: 0.25em;
+  content: "v";
+  opacity: 0.6;
+  padding-right: 0.25em;
 }
 
 .version {
@@ -24,16 +24,16 @@ h2, h3 {
 }
 
 .format-option {
-    font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", monospace;
+  font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", monospace;
 }
 
 .button-form {
-    float: right;
-    margin-right: 1em;
+  float: right;
+  margin-right: 1em;
 }
 
 ul.breadcrumb {
-  margin: 58px 0 0 0;
+  margin: 80px 0 0 0;
 }
 
 form select, form input, form textarea {
@@ -43,17 +43,18 @@ form select, form input, form textarea {
 form select[multiple] {
   height: 150px;
 }
+
 /* To allow tooltips to work on disabled elements */
 .disabled-tooltip-shield {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 
 .errorlist {
-    margin-top: 0.5em;
+  margin-top: 0.5em;
 }
 
 pre {
@@ -64,8 +65,7 @@ pre {
 }
 
 .page-header {
-    border-bottom: none;
-    padding-bottom: 0px;
-    margin-bottom: 20px;
+  border-bottom: none;
+  padding-bottom: 0px;
+  margin-bottom: 20px;
 }
-