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