git.roojs.org Git - bootswatch/blob - css/docs.css

   1 /* Add additional stylesheets below
   2 -------------------------------------------------- */
   3 /*
   4   Bootstrap's documentation styles
   5   Special styles for presenting Bootstrap's documentation and examples
   6 */
   7
   8
   9 /* Body and structure
  10 -------------------------------------------------- */
  11 body {
  12   position: relative;
  13   padding-top: 90px;
  14 /*  background-color: #fff;
  15   background-image: url(../img/grid-18px-masked.png);*/
  16   background-repeat: repeat-x;
  17   background-position: 0 40px;
  18 }
  19
  20 /* Jumbotrons
  21 -------------------------------------------------- */
  22 .jumbotron {
  23   position: relative;
  24 }
  25 .jumbotron h1 {
  26   margin-bottom: 9px;
  27   font-size: 81px;
  28   font-weight: bold;
  29   letter-spacing: -1px;
  30   line-height: 1;
  31 }
  32 .jumbotron p {
  33   margin-bottom: 18px;
  34   font-weight: 300;
  35 }
  36 .jumbotron .btn-large {
  37   font-size: 20px;
  38   font-weight: normal;
  39   padding: 14px 24px;
  40   margin-right: 10px;
  41   -webkit-border-radius: 6px;
  42      -moz-border-radius: 6px;
  43           border-radius: 6px;
  44 }
  45 .jumbotron .btn-large small {
  46   font-size: 14px;
  47 }
  48
  49
  50 /* Specific jumbotrons
  51 ------------------------- */
  52 /* supporting docs pages */
  53 .subhead {
  54   padding-bottom: 0;
  55   margin-bottom: 9px;
  56 }
  57 .subhead h1 {
  58   font-size: 54px;
  59 }
  60
  61 /* Subnav */
  62 .subnav {
  63   width: 100%;
  64   height: 36px;
  65   background-color: #eeeeee; /* Old browsers */
  66   background-repeat: repeat-x; /* Repeat the gradient */
  67   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
  68   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
  69   background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
  70   background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
  71   background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
  72   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
  73   background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
  74   border: 1px solid #e5e5e5;
  75   -webkit-border-radius: 4px;
  76      -moz-border-radius: 4px;
  77           border-radius: 4px;
  78 }
  79 .subnav .nav {
  80   margin-bottom: 0;
  81 }
  82 .subnav .nav > li > a {
  83   margin: 0;
  84   padding-top:    11px;
  85   padding-bottom: 11px;
  86   border-left: 1px solid #f5f5f5;
  87   border-right: 1px solid #e5e5e5;
  88   -webkit-border-radius: 0;
  89      -moz-border-radius: 0;
  90           border-radius: 0;
  91 }
  92 .subnav .nav > .active > a,
  93 .subnav .nav > .active > a:hover {
  94   padding-left: 13px;
  95   color: #777;
  96   background-color: #e9e9e9;
  97   border-right-color: #ddd;
  98   border-left: 0;
  99   -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 100      -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 101           box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 102 }
 103 .subnav .nav > .active > a .caret,
 104 .subnav .nav > .active > a:hover .caret {
 105   border-top-color: #777;
 106 }
 107 .subnav .nav > li:first-child > a,
 108 .subnav .nav > li:first-child > a:hover {
 109   border-left: 0;
 110   padding-left: 12px;
 111   -webkit-border-radius: 4px 0 0 4px;
 112      -moz-border-radius: 4px 0 0 4px;
 113           border-radius: 4px 0 0 4px;
 114 }
 115 .subnav .nav > li:last-child > a {
 116   border-right: 0;
 117 }
 118 .subnav .dropdown-menu {
 119   -webkit-border-radius: 0 0 4px 4px;
 120      -moz-border-radius: 0 0 4px 4px;
 121           border-radius: 0 0 4px 4px;
 122 }
 123
 124 /* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
 125 @media (min-width: 980px) {
 126   .subnav-fixed {
 127     position: fixed;
 128     top: 40px;
 129     left: 0;
 130     right: 0;
 131     z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
 132     border-color: #d5d5d5;
 133     border-width: 0 0 1px; /* drop the border on the fixed edges */
 134     -webkit-border-radius: 0;
 135        -moz-border-radius: 0;
 136             border-radius: 0;
 137     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 138        -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 139             box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 140     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
 141   }
 142   .subnav-fixed .nav {
 143     width: 938px;
 144     margin: 0 auto;
 145     padding: 0 1px;
 146   }
 147   .subnav .nav > li:first-child > a,
 148   .subnav .nav > li:first-child > a:hover {
 149     -webkit-border-radius: 0;
 150        -moz-border-radius: 0;
 151             border-radius: 0;
 152   }
 153 }
 154
 155 .bsa {
 156   float: right;
 157   max-width: 400px;
 158   padding: 0;
 159 }
 160
 161 body .one .bsa_it_ad {
 162   margin-bottom: -10px;
 163   background: none;
 164   border: none;
 165   font-family: inherit;
 166   color: inherit;
 167 }
 168
 169 body .one .bsa_it_ad .bsa_it_t,
 170 body .one .bsa_it_ad .bsa_it_d {
 171   color: inherit;
 172   font-size: inherit;
 173 }
 174
 175 body .one .bsa_it_p {
 176   display: none;
 177 }
 178
 179 #bsap_aplink {
 180   float: right;
 181   position: relative;
 182   /*top: -25px;*/
 183   right: 10px;
 184   height: 0;
 185   font-size: 11px;
 186 }
 187
 188 @media (max-width: 768px) {
 189
 190   .bsa {
 191     float: none;
 192   }
 193
 194 }
 195
 196
 197 /* Responsive Docs
 198 -------------------------------------------------- */
 199 @media (max-width: 480px) {
 200
 201   /* Reduce padding above jumbotron */
 202   body {
 203     padding-top: 70px;
 204   }
 205
 206   /* Adjust the jumbotron */
 207   .jumbotron h1,
 208   .jumbotron p {
 209     text-align: center;
 210     margin-right: 0;
 211   }
 212   .jumbotron h1 {
 213     font-size: 45px;
 214     margin-right: 0;
 215   }
 216   .jumbotron p {
 217     margin-right: 0;
 218     margin-left: 0;
 219     font-size: 18px;
 220     line-height: 24px;
 221   }
 222   .jumbotron .btn {
 223     display: block;
 224     font-size: 18px;
 225     padding: 10px 14px;
 226     margin: 0 auto 10px;
 227   }
 228
 229 }
 230
 231
 232 @media (max-width: 768px) {
 233
 234   /* Remove any padding from the body */
 235   body {
 236     padding-top: 0;
 237   }
 238
 239   /* Jumbotron buttons */
 240   .jumbotron .btn {
 241     margin-bottom: 10px;
 242   }
 243
 244   /* Subnav */
 245   .subnav {
 246     position: static;
 247     top: auto;
 248     z-index: auto;
 249     width: auto;
 250     height: auto;
 251     background: #fff; /* whole background property since we use a background-image for gradient */
 252     -webkit-box-shadow: none;
 253        -moz-box-shadow: none;
 254             box-shadow: none;
 255   }
 256   .subnav .nav > li {
 257     float: none;
 258   }
 259   .subnav .nav > li > a {
 260     border: 0;
 261   }
 262   .subnav .nav > li + li > a {
 263     border-top: 1px solid #e5e5e5;
 264   }
 265   .subnav .nav > li:first-child > a,
 266   .subnav .nav > li:first-child > a:hover {
 267       -webkit-border-radius: 4px 4px 0 0;
 268          -moz-border-radius: 4px 4px 0 0;
 269               border-radius: 4px 4px 0 0;
 270   }
 271 }
 272
 273
 274 @media (min-width: 480px) and (max-width: 768px) {
 275
 276   /* Scale down the jumbotron content */
 277   .jumbotron h1 {
 278     font-size: 54px;
 279   }
 280   .jumbotron p {
 281     margin-right: 0;
 282     margin-left: 0;
 283   }
 284 }
 285
 286
 287 @media (min-width: 768px) and (max-width: 980px) {
 288
 289   /* Remove any padding from the body */
 290   body {
 291     padding-top: 0;
 292   }
 293
 294   /* Scale down the jumbotron content */
 295   .jumbotron h1 {
 296     font-size: 72px;
 297   }
 298 }
 299
 300
 301 @media (max-width: 980px) {
 302
 303   /* Unfloat brand */
 304   .navbar-fixed-top .brand {
 305     float: left;
 306     margin-left: 0;
 307     padding-left: 10px;
 308     padding-right: 10px;
 309   }
 310 }
 311
 312
 313 /* LARGE DESKTOP SCREENS */
 314 @media (min-width: 1210px) {
 315
 316   /* Update subnav container */
 317   .subnav-fixed .nav {
 318     width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
 319   }
 320 }