git.roojs.org Git - bootswatch/blob - assets/css/bootstrap-responsive.css

   1 /*!
   2  * Bootstrap Responsive v2.0.0
   3  *
   4  * Copyright 2012 Twitter, Inc
   5  * Licensed under the Apache License v2.0
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  * Designed and built with all the love in the world @twitter by @mdo and @fat.
   9  */
  10 .hidden {
  11   display: none;
  12   visibility: hidden;
  13 }
  14 @media (max-width: 480px) {
  15   .nav-collapse {
  16     -webkit-transform: translate3d(0, 0, 0);
  17   }
  18   .page-header h1 small {
  19     display: block;
  20     line-height: 18px;
  21   }
  22   input[class*="span"],
  23   select[class*="span"],
  24   textarea[class*="span"],
  25   .uneditable-input {
  26     display: block;
  27     width: 100%;
  28     height: 28px;
  29     /* Make inputs at least the height of their button counterpart */
  30
  31     /* Makes inputs behave like true block-level elements */
  32
  33     -webkit-box-sizing: border-box;
  34     /* Older Webkit */
  35
  36     -moz-box-sizing: border-box;
  37     /* Older FF */
  38
  39     -ms-box-sizing: border-box;
  40     /* IE8 */
  41
  42     box-sizing: border-box;
  43     /* CSS3 spec*/
  44
  45   }
  46   .input-prepend input[class*="span"], .input-append input[class*="span"] {
  47     width: auto;
  48   }
  49   input[type="checkbox"], input[type="radio"] {
  50     border: 1px solid #ccc;
  51   }
  52   .form-horizontal .control-group > label {
  53     float: none;
  54     width: auto;
  55     padding-top: 0;
  56     text-align: left;
  57   }
  58   .form-horizontal .controls {
  59     margin-left: 0;
  60   }
  61   .form-horizontal .control-list {
  62     padding-top: 0;
  63   }
  64   .form-horizontal .form-actions {
  65     padding-left: 10px;
  66     padding-right: 10px;
  67   }
  68   .modal {
  69     position: absolute;
  70     top: 10px;
  71     left: 10px;
  72     right: 10px;
  73     width: auto;
  74     margin: 0;
  75   }
  76   .modal.fade.in {
  77     top: auto;
  78   }
  79   .modal-header .close {
  80     padding: 10px;
  81     margin: -10px;
  82   }
  83   .carousel-caption {
  84     position: static;
  85   }
  86 }
  87 @media (max-width: 768px) {
  88   .container {
  89     width: auto;
  90     padding: 0 20px;
  91   }
  92   .row-fluid {
  93     width: 100%;
  94   }
  95   .row {
  96     margin-left: 0;
  97   }
  98   .row > [class*="span"], .row-fluid > [class*="span"] {
  99     float: none;
 100     display: block;
 101     width: auto;
 102     margin: 0;
 103   }
 104 }
 105 @media (min-width: 768px) and (max-width: 980px) {
 106   .row {
 107     margin-left: -20px;
 108     *zoom: 1;
 109   }
 110   .row:before, .row:after {
 111     display: table;
 112     content: "";
 113   }
 114   .row:after {
 115     clear: both;
 116   }
 117   [class*="span"] {
 118     float: left;
 119     margin-left: 20px;
 120   }
 121   .span1 {
 122     width: 42px;
 123   }
 124   .span2 {
 125     width: 104px;
 126   }
 127   .span3 {
 128     width: 166px;
 129   }
 130   .span4 {
 131     width: 228px;
 132   }
 133   .span5 {
 134     width: 290px;
 135   }
 136   .span6 {
 137     width: 352px;
 138   }
 139   .span7 {
 140     width: 414px;
 141   }
 142   .span8 {
 143     width: 476px;
 144   }
 145   .span9 {
 146     width: 538px;
 147   }
 148   .span10 {
 149     width: 600px;
 150   }
 151   .span11 {
 152     width: 662px;
 153   }
 154   .span12, .container {
 155     width: 724px;
 156   }
 157   .offset1 {
 158     margin-left: 82px;
 159   }
 160   .offset2 {
 161     margin-left: 144px;
 162   }
 163   .offset3 {
 164     margin-left: 206px;
 165   }
 166   .offset4 {
 167     margin-left: 268px;
 168   }
 169   .offset5 {
 170     margin-left: 330px;
 171   }
 172   .offset6 {
 173     margin-left: 392px;
 174   }
 175   .offset7 {
 176     margin-left: 454px;
 177   }
 178   .offset8 {
 179     margin-left: 516px;
 180   }
 181   .offset9 {
 182     margin-left: 578px;
 183   }
 184   .offset10 {
 185     margin-left: 640px;
 186   }
 187   .offset11 {
 188     margin-left: 702px;
 189   }
 190   .row-fluid {
 191     width: 100%;
 192     *zoom: 1;
 193   }
 194   .row-fluid:before, .row-fluid:after {
 195     display: table;
 196     content: "";
 197   }
 198   .row-fluid:after {
 199     clear: both;
 200   }
 201   .row-fluid > [class*="span"] {
 202     float: left;
 203     margin-left: 2.762430939%;
 204   }
 205   .row-fluid > [class*="span"]:first-child {
 206     margin-left: 0;
 207   }
 208   .row-fluid .span1 {
 209     width: 5.801104972%;
 210   }
 211   .row-fluid .span2 {
 212     width: 14.364640883%;
 213   }
 214   .row-fluid .span3 {
 215     width: 22.928176794%;
 216   }
 217   .row-fluid .span4 {
 218     width: 31.491712705%;
 219   }
 220   .row-fluid .span5 {
 221     width: 40.055248616%;
 222   }
 223   .row-fluid .span6 {
 224     width: 48.618784527%;
 225   }
 226   .row-fluid .span7 {
 227     width: 57.182320438000005%;
 228   }
 229   .row-fluid .span8 {
 230     width: 65.74585634900001%;
 231   }
 232   .row-fluid .span9 {
 233     width: 74.30939226%;
 234   }
 235   .row-fluid .span10 {
 236     width: 82.87292817100001%;
 237   }
 238   .row-fluid .span11 {
 239     width: 91.436464082%;
 240   }
 241   .row-fluid .span12 {
 242     width: 99.999999993%;
 243   }
 244   input.span1, textarea.span1, .uneditable-input.span1 {
 245     width: 32px;
 246   }
 247   input.span2, textarea.span2, .uneditable-input.span2 {
 248     width: 94px;
 249   }
 250   input.span3, textarea.span3, .uneditable-input.span3 {
 251     width: 156px;
 252   }
 253   input.span4, textarea.span4, .uneditable-input.span4 {
 254     width: 218px;
 255   }
 256   input.span5, textarea.span5, .uneditable-input.span5 {
 257     width: 280px;
 258   }
 259   input.span6, textarea.span6, .uneditable-input.span6 {
 260     width: 342px;
 261   }
 262   input.span7, textarea.span7, .uneditable-input.span7 {
 263     width: 404px;
 264   }
 265   input.span8, textarea.span8, .uneditable-input.span8 {
 266     width: 466px;
 267   }
 268   input.span9, textarea.span9, .uneditable-input.span9 {
 269     width: 528px;
 270   }
 271   input.span10, textarea.span10, .uneditable-input.span10 {
 272     width: 590px;
 273   }
 274   input.span11, textarea.span11, .uneditable-input.span11 {
 275     width: 652px;
 276   }
 277   input.span12, textarea.span12, .uneditable-input.span12 {
 278     width: 714px;
 279   }
 280 }
 281 @media (max-width: 980px) {
 282   body {
 283     padding-top: 0;
 284   }
 285   .navbar-fixed-top {
 286     position: static;
 287     margin-bottom: 18px;
 288   }
 289   .navbar-fixed-top .navbar-inner {
 290     padding: 5px;
 291   }
 292   .navbar .container {
 293     width: auto;
 294     padding: 0;
 295   }
 296   .navbar .brand {
 297     padding-left: 10px;
 298     padding-right: 10px;
 299     margin: 0 0 0 -5px;
 300   }
 301   .navbar .nav-collapse {
 302     clear: left;
 303   }
 304   .navbar .nav {
 305     float: none;
 306     margin: 0 0 9px;
 307   }
 308   .navbar .nav > li {
 309     float: none;
 310   }
 311   .navbar .nav > li > a {
 312     margin-bottom: 2px;
 313   }
 314   .navbar .nav > .divider-vertical {
 315     display: none;
 316   }
 317   .navbar .nav > li > a, .navbar .dropdown-menu a {
 318     padding: 6px 15px;
 319     font-weight: bold;
 320     color: #999999;
 321     -webkit-border-radius: 3px;
 322     -moz-border-radius: 3px;
 323     border-radius: 3px;
 324   }
 325   .navbar .dropdown-menu li + li a {
 326     margin-bottom: 2px;
 327   }
 328   .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
 329     background-color: #222222;
 330   }
 331   .navbar .dropdown-menu {
 332     position: static;
 333     top: auto;
 334     left: auto;
 335     float: none;
 336     display: block;
 337     max-width: none;
 338     margin: 0 15px;
 339     padding: 0;
 340     background-color: transparent;
 341     border: none;
 342     -webkit-border-radius: 0;
 343     -moz-border-radius: 0;
 344     border-radius: 0;
 345     -webkit-box-shadow: none;
 346     -moz-box-shadow: none;
 347     box-shadow: none;
 348   }
 349   .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
 350     display: none;
 351   }
 352   .navbar .dropdown-menu .divider {
 353     display: none;
 354   }
 355   .navbar-form, .navbar-search {
 356     float: none;
 357     padding: 9px 15px;
 358     margin: 9px 0;
 359     border-top: 1px solid #222222;
 360     border-bottom: 1px solid #222222;
 361     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
 362     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
 363     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
 364   }
 365   .navbar .nav.pull-right {
 366     float: none;
 367     margin-left: 0;
 368   }
 369   .navbar-static .navbar-inner {
 370     padding-left: 10px;
 371     padding-right: 10px;
 372   }
 373   .btn-navbar {
 374     display: block;
 375   }
 376   .nav-collapse {
 377     overflow: hidden;
 378     height: 0;
 379   }
 380 }
 381 @media (min-width: 980px) {
 382   .nav-collapse.collapse {
 383     height: auto !important;
 384   }
 385 }
 386 @media (min-width: 1200px) {
 387   .row {
 388     margin-left: -30px;
 389     *zoom: 1;
 390   }
 391   .row:before, .row:after {
 392     display: table;
 393     content: "";
 394   }
 395   .row:after {
 396     clear: both;
 397   }
 398   [class*="span"] {
 399     float: left;
 400     margin-left: 30px;
 401   }
 402   .span1 {
 403     width: 70px;
 404   }
 405   .span2 {
 406     width: 170px;
 407   }
 408   .span3 {
 409     width: 270px;
 410   }
 411   .span4 {
 412     width: 370px;
 413   }
 414   .span5 {
 415     width: 470px;
 416   }
 417   .span6 {
 418     width: 570px;
 419   }
 420   .span7 {
 421     width: 670px;
 422   }
 423   .span8 {
 424     width: 770px;
 425   }
 426   .span9 {
 427     width: 870px;
 428   }
 429   .span10 {
 430     width: 970px;
 431   }
 432   .span11 {
 433     width: 1070px;
 434   }
 435   .span12, .container {
 436     width: 1170px;
 437   }
 438   .offset1 {
 439     margin-left: 130px;
 440   }
 441   .offset2 {
 442     margin-left: 230px;
 443   }
 444   .offset3 {
 445     margin-left: 330px;
 446   }
 447   .offset4 {
 448     margin-left: 430px;
 449   }
 450   .offset5 {
 451     margin-left: 530px;
 452   }
 453   .offset6 {
 454     margin-left: 630px;
 455   }
 456   .offset7 {
 457     margin-left: 730px;
 458   }
 459   .offset8 {
 460     margin-left: 830px;
 461   }
 462   .offset9 {
 463     margin-left: 930px;
 464   }
 465   .offset10 {
 466     margin-left: 1030px;
 467   }
 468   .offset11 {
 469     margin-left: 1130px;
 470   }
 471   .row-fluid {
 472     width: 100%;
 473     *zoom: 1;
 474   }
 475   .row-fluid:before, .row-fluid:after {
 476     display: table;
 477     content: "";
 478   }
 479   .row-fluid:after {
 480     clear: both;
 481   }
 482   .row-fluid > [class*="span"] {
 483     float: left;
 484     margin-left: 2.564102564%;
 485   }
 486   .row-fluid > [class*="span"]:first-child {
 487     margin-left: 0;
 488   }
 489   .row-fluid .span1 {
 490     width: 5.982905983%;
 491   }
 492   .row-fluid .span2 {
 493     width: 14.529914530000001%;
 494   }
 495   .row-fluid .span3 {
 496     width: 23.076923077%;
 497   }
 498   .row-fluid .span4 {
 499     width: 31.623931624%;
 500   }
 501   .row-fluid .span5 {
 502     width: 40.170940171000005%;
 503   }
 504   .row-fluid .span6 {
 505     width: 48.717948718%;
 506   }
 507   .row-fluid .span7 {
 508     width: 57.264957265%;
 509   }
 510   .row-fluid .span8 {
 511     width: 65.81196581200001%;
 512   }
 513   .row-fluid .span9 {
 514     width: 74.358974359%;
 515   }
 516   .row-fluid .span10 {
 517     width: 82.905982906%;
 518   }
 519   .row-fluid .span11 {
 520     width: 91.45299145300001%;
 521   }
 522   .row-fluid .span12 {
 523     width: 100%;
 524   }
 525   input.span1, textarea.span1, .uneditable-input.span1 {
 526     width: 60px;
 527   }
 528   input.span2, textarea.span2, .uneditable-input.span2 {
 529     width: 160px;
 530   }
 531   input.span3, textarea.span3, .uneditable-input.span3 {
 532     width: 260px;
 533   }
 534   input.span4, textarea.span4, .uneditable-input.span4 {
 535     width: 360px;
 536   }
 537   input.span5, textarea.span5, .uneditable-input.span5 {
 538     width: 460px;
 539   }
 540   input.span6, textarea.span6, .uneditable-input.span6 {
 541     width: 560px;
 542   }
 543   input.span7, textarea.span7, .uneditable-input.span7 {
 544     width: 660px;
 545   }
 546   input.span8, textarea.span8, .uneditable-input.span8 {
 547     width: 760px;
 548   }
 549   input.span9, textarea.span9, .uneditable-input.span9 {
 550     width: 860px;
 551   }
 552   input.span10, textarea.span10, .uneditable-input.span10 {
 553     width: 960px;
 554   }
 555   input.span11, textarea.span11, .uneditable-input.span11 {
 556     width: 1060px;
 557   }
 558   input.span12, textarea.span12, .uneditable-input.span12 {
 559     width: 1160px;
 560   }
 561   .thumbnails {
 562     margin-left: -30px;
 563   }
 564   .thumbnails > li {
 565     margin-left: 30px;
 566   }
 567 }