comparison static/css/bootstrap-responsive.css @ 0:9305c6458e2f

initial commit
author Goffi <goffi@goffi.org>
date Sat, 28 Jul 2012 20:36:32 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:9305c6458e2f
1 /*!
2 * Bootstrap Responsive v2.0.4
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
11 .clearfix {
12 *zoom: 1;
13 }
14
15 .clearfix:before,
16 .clearfix:after {
17 display: table;
18 content: "";
19 }
20
21 .clearfix:after {
22 clear: both;
23 }
24
25 .hide-text {
26 font: 0/0 a;
27 color: transparent;
28 text-shadow: none;
29 background-color: transparent;
30 border: 0;
31 }
32
33 .input-block-level {
34 display: block;
35 width: 100%;
36 min-height: 28px;
37 -webkit-box-sizing: border-box;
38 -moz-box-sizing: border-box;
39 -ms-box-sizing: border-box;
40 box-sizing: border-box;
41 }
42
43 .hidden {
44 display: none;
45 visibility: hidden;
46 }
47
48 .visible-phone {
49 display: none !important;
50 }
51
52 .visible-tablet {
53 display: none !important;
54 }
55
56 .hidden-desktop {
57 display: none !important;
58 }
59
60 @media (max-width: 767px) {
61 .visible-phone {
62 display: inherit !important;
63 }
64 .hidden-phone {
65 display: none !important;
66 }
67 .hidden-desktop {
68 display: inherit !important;
69 }
70 .visible-desktop {
71 display: none !important;
72 }
73 }
74
75 @media (min-width: 768px) and (max-width: 979px) {
76 .visible-tablet {
77 display: inherit !important;
78 }
79 .hidden-tablet {
80 display: none !important;
81 }
82 .hidden-desktop {
83 display: inherit !important;
84 }
85 .visible-desktop {
86 display: none !important ;
87 }
88 }
89
90 @media (max-width: 480px) {
91 .nav-collapse {
92 -webkit-transform: translate3d(0, 0, 0);
93 }
94 .page-header h1 small {
95 display: block;
96 line-height: 18px;
97 }
98 input[type="checkbox"],
99 input[type="radio"] {
100 border: 1px solid #ccc;
101 }
102 .form-horizontal .control-group > label {
103 float: none;
104 width: auto;
105 padding-top: 0;
106 text-align: left;
107 }
108 .form-horizontal .controls {
109 margin-left: 0;
110 }
111 .form-horizontal .control-list {
112 padding-top: 0;
113 }
114 .form-horizontal .form-actions {
115 padding-right: 10px;
116 padding-left: 10px;
117 }
118 .modal {
119 position: absolute;
120 top: 10px;
121 right: 10px;
122 left: 10px;
123 width: auto;
124 margin: 0;
125 }
126 .modal.fade.in {
127 top: auto;
128 }
129 .modal-header .close {
130 padding: 10px;
131 margin: -10px;
132 }
133 .carousel-caption {
134 position: static;
135 }
136 }
137
138 @media (max-width: 767px) {
139 body {
140 padding-right: 20px;
141 padding-left: 20px;
142 }
143 .navbar-fixed-top,
144 .navbar-fixed-bottom {
145 margin-right: -20px;
146 margin-left: -20px;
147 }
148 .container-fluid {
149 padding: 0;
150 }
151 .dl-horizontal dt {
152 float: none;
153 width: auto;
154 clear: none;
155 text-align: left;
156 }
157 .dl-horizontal dd {
158 margin-left: 0;
159 }
160 .container {
161 width: auto;
162 }
163 .row-fluid {
164 width: 100%;
165 }
166 .row,
167 .thumbnails {
168 margin-left: 0;
169 }
170 [class*="span"],
171 .row-fluid [class*="span"] {
172 display: block;
173 float: none;
174 width: auto;
175 margin-left: 0;
176 }
177 .input-large,
178 .input-xlarge,
179 .input-xxlarge,
180 input[class*="span"],
181 select[class*="span"],
182 textarea[class*="span"],
183 .uneditable-input {
184 display: block;
185 width: 100%;
186 min-height: 28px;
187 -webkit-box-sizing: border-box;
188 -moz-box-sizing: border-box;
189 -ms-box-sizing: border-box;
190 box-sizing: border-box;
191 }
192 .input-prepend input,
193 .input-append input,
194 .input-prepend input[class*="span"],
195 .input-append input[class*="span"] {
196 display: inline-block;
197 width: auto;
198 }
199 }
200
201 @media (min-width: 768px) and (max-width: 979px) {
202 .row {
203 margin-left: -20px;
204 *zoom: 1;
205 }
206 .row:before,
207 .row:after {
208 display: table;
209 content: "";
210 }
211 .row:after {
212 clear: both;
213 }
214 [class*="span"] {
215 float: left;
216 margin-left: 20px;
217 }
218 .container,
219 .navbar-fixed-top .container,
220 .navbar-fixed-bottom .container {
221 width: 724px;
222 }
223 .span12 {
224 width: 724px;
225 }
226 .span11 {
227 width: 662px;
228 }
229 .span10 {
230 width: 600px;
231 }
232 .span9 {
233 width: 538px;
234 }
235 .span8 {
236 width: 476px;
237 }
238 .span7 {
239 width: 414px;
240 }
241 .span6 {
242 width: 352px;
243 }
244 .span5 {
245 width: 290px;
246 }
247 .span4 {
248 width: 228px;
249 }
250 .span3 {
251 width: 166px;
252 }
253 .span2 {
254 width: 104px;
255 }
256 .span1 {
257 width: 42px;
258 }
259 .offset12 {
260 margin-left: 764px;
261 }
262 .offset11 {
263 margin-left: 702px;
264 }
265 .offset10 {
266 margin-left: 640px;
267 }
268 .offset9 {
269 margin-left: 578px;
270 }
271 .offset8 {
272 margin-left: 516px;
273 }
274 .offset7 {
275 margin-left: 454px;
276 }
277 .offset6 {
278 margin-left: 392px;
279 }
280 .offset5 {
281 margin-left: 330px;
282 }
283 .offset4 {
284 margin-left: 268px;
285 }
286 .offset3 {
287 margin-left: 206px;
288 }
289 .offset2 {
290 margin-left: 144px;
291 }
292 .offset1 {
293 margin-left: 82px;
294 }
295 .row-fluid {
296 width: 100%;
297 *zoom: 1;
298 }
299 .row-fluid:before,
300 .row-fluid:after {
301 display: table;
302 content: "";
303 }
304 .row-fluid:after {
305 clear: both;
306 }
307 .row-fluid [class*="span"] {
308 display: block;
309 float: left;
310 width: 100%;
311 min-height: 28px;
312 margin-left: 2.762430939%;
313 *margin-left: 2.709239449638298%;
314 -webkit-box-sizing: border-box;
315 -moz-box-sizing: border-box;
316 -ms-box-sizing: border-box;
317 box-sizing: border-box;
318 }
319 .row-fluid [class*="span"]:first-child {
320 margin-left: 0;
321 }
322 .row-fluid .span12 {
323 width: 99.999999993%;
324 *width: 99.9468085036383%;
325 }
326 .row-fluid .span11 {
327 width: 91.436464082%;
328 *width: 91.38327259263829%;
329 }
330 .row-fluid .span10 {
331 width: 82.87292817100001%;
332 *width: 82.8197366816383%;
333 }
334 .row-fluid .span9 {
335 width: 74.30939226%;
336 *width: 74.25620077063829%;
337 }
338 .row-fluid .span8 {
339 width: 65.74585634900001%;
340 *width: 65.6926648596383%;
341 }
342 .row-fluid .span7 {
343 width: 57.182320438000005%;
344 *width: 57.129128948638304%;
345 }
346 .row-fluid .span6 {
347 width: 48.618784527%;
348 *width: 48.5655930376383%;
349 }
350 .row-fluid .span5 {
351 width: 40.055248616%;
352 *width: 40.0020571266383%;
353 }
354 .row-fluid .span4 {
355 width: 31.491712705%;
356 *width: 31.4385212156383%;
357 }
358 .row-fluid .span3 {
359 width: 22.928176794%;
360 *width: 22.874985304638297%;
361 }
362 .row-fluid .span2 {
363 width: 14.364640883%;
364 *width: 14.311449393638298%;
365 }
366 .row-fluid .span1 {
367 width: 5.801104972%;
368 *width: 5.747913482638298%;
369 }
370 input,
371 textarea,
372 .uneditable-input {
373 margin-left: 0;
374 }
375 input.span12,
376 textarea.span12,
377 .uneditable-input.span12 {
378 width: 714px;
379 }
380 input.span11,
381 textarea.span11,
382 .uneditable-input.span11 {
383 width: 652px;
384 }
385 input.span10,
386 textarea.span10,
387 .uneditable-input.span10 {
388 width: 590px;
389 }
390 input.span9,
391 textarea.span9,
392 .uneditable-input.span9 {
393 width: 528px;
394 }
395 input.span8,
396 textarea.span8,
397 .uneditable-input.span8 {
398 width: 466px;
399 }
400 input.span7,
401 textarea.span7,
402 .uneditable-input.span7 {
403 width: 404px;
404 }
405 input.span6,
406 textarea.span6,
407 .uneditable-input.span6 {
408 width: 342px;
409 }
410 input.span5,
411 textarea.span5,
412 .uneditable-input.span5 {
413 width: 280px;
414 }
415 input.span4,
416 textarea.span4,
417 .uneditable-input.span4 {
418 width: 218px;
419 }
420 input.span3,
421 textarea.span3,
422 .uneditable-input.span3 {
423 width: 156px;
424 }
425 input.span2,
426 textarea.span2,
427 .uneditable-input.span2 {
428 width: 94px;
429 }
430 input.span1,
431 textarea.span1,
432 .uneditable-input.span1 {
433 width: 32px;
434 }
435 }
436
437 @media (min-width: 1200px) {
438 .row {
439 margin-left: -30px;
440 *zoom: 1;
441 }
442 .row:before,
443 .row:after {
444 display: table;
445 content: "";
446 }
447 .row:after {
448 clear: both;
449 }
450 [class*="span"] {
451 float: left;
452 margin-left: 30px;
453 }
454 .container,
455 .navbar-fixed-top .container,
456 .navbar-fixed-bottom .container {
457 width: 1170px;
458 }
459 .span12 {
460 width: 1170px;
461 }
462 .span11 {
463 width: 1070px;
464 }
465 .span10 {
466 width: 970px;
467 }
468 .span9 {
469 width: 870px;
470 }
471 .span8 {
472 width: 770px;
473 }
474 .span7 {
475 width: 670px;
476 }
477 .span6 {
478 width: 570px;
479 }
480 .span5 {
481 width: 470px;
482 }
483 .span4 {
484 width: 370px;
485 }
486 .span3 {
487 width: 270px;
488 }
489 .span2 {
490 width: 170px;
491 }
492 .span1 {
493 width: 70px;
494 }
495 .offset12 {
496 margin-left: 1230px;
497 }
498 .offset11 {
499 margin-left: 1130px;
500 }
501 .offset10 {
502 margin-left: 1030px;
503 }
504 .offset9 {
505 margin-left: 930px;
506 }
507 .offset8 {
508 margin-left: 830px;
509 }
510 .offset7 {
511 margin-left: 730px;
512 }
513 .offset6 {
514 margin-left: 630px;
515 }
516 .offset5 {
517 margin-left: 530px;
518 }
519 .offset4 {
520 margin-left: 430px;
521 }
522 .offset3 {
523 margin-left: 330px;
524 }
525 .offset2 {
526 margin-left: 230px;
527 }
528 .offset1 {
529 margin-left: 130px;
530 }
531 .row-fluid {
532 width: 100%;
533 *zoom: 1;
534 }
535 .row-fluid:before,
536 .row-fluid:after {
537 display: table;
538 content: "";
539 }
540 .row-fluid:after {
541 clear: both;
542 }
543 .row-fluid [class*="span"] {
544 display: block;
545 float: left;
546 width: 100%;
547 min-height: 28px;
548 margin-left: 2.564102564%;
549 *margin-left: 2.510911074638298%;
550 -webkit-box-sizing: border-box;
551 -moz-box-sizing: border-box;
552 -ms-box-sizing: border-box;
553 box-sizing: border-box;
554 }
555 .row-fluid [class*="span"]:first-child {
556 margin-left: 0;
557 }
558 .row-fluid .span12 {
559 width: 100%;
560 *width: 99.94680851063829%;
561 }
562 .row-fluid .span11 {
563 width: 91.45299145300001%;
564 *width: 91.3997999636383%;
565 }
566 .row-fluid .span10 {
567 width: 82.905982906%;
568 *width: 82.8527914166383%;
569 }
570 .row-fluid .span9 {
571 width: 74.358974359%;
572 *width: 74.30578286963829%;
573 }
574 .row-fluid .span8 {
575 width: 65.81196581200001%;
576 *width: 65.7587743226383%;
577 }
578 .row-fluid .span7 {
579 width: 57.264957265%;
580 *width: 57.2117657756383%;
581 }
582 .row-fluid .span6 {
583 width: 48.717948718%;
584 *width: 48.6647572286383%;
585 }
586 .row-fluid .span5 {
587 width: 40.170940171000005%;
588 *width: 40.117748681638304%;
589 }
590 .row-fluid .span4 {
591 width: 31.623931624%;
592 *width: 31.5707401346383%;
593 }
594 .row-fluid .span3 {
595 width: 23.076923077%;
596 *width: 23.0237315876383%;
597 }
598 .row-fluid .span2 {
599 width: 14.529914530000001%;
600 *width: 14.4767230406383%;
601 }
602 .row-fluid .span1 {
603 width: 5.982905983%;
604 *width: 5.929714493638298%;
605 }
606 input,
607 textarea,
608 .uneditable-input {
609 margin-left: 0;
610 }
611 input.span12,
612 textarea.span12,
613 .uneditable-input.span12 {
614 width: 1160px;
615 }
616 input.span11,
617 textarea.span11,
618 .uneditable-input.span11 {
619 width: 1060px;
620 }
621 input.span10,
622 textarea.span10,
623 .uneditable-input.span10 {
624 width: 960px;
625 }
626 input.span9,
627 textarea.span9,
628 .uneditable-input.span9 {
629 width: 860px;
630 }
631 input.span8,
632 textarea.span8,
633 .uneditable-input.span8 {
634 width: 760px;
635 }
636 input.span7,
637 textarea.span7,
638 .uneditable-input.span7 {
639 width: 660px;
640 }
641 input.span6,
642 textarea.span6,
643 .uneditable-input.span6 {
644 width: 560px;
645 }
646 input.span5,
647 textarea.span5,
648 .uneditable-input.span5 {
649 width: 460px;
650 }
651 input.span4,
652 textarea.span4,
653 .uneditable-input.span4 {
654 width: 360px;
655 }
656 input.span3,
657 textarea.span3,
658 .uneditable-input.span3 {
659 width: 260px;
660 }
661 input.span2,
662 textarea.span2,
663 .uneditable-input.span2 {
664 width: 160px;
665 }
666 input.span1,
667 textarea.span1,
668 .uneditable-input.span1 {
669 width: 60px;
670 }
671 .thumbnails {
672 margin-left: -30px;
673 }
674 .thumbnails > li {
675 margin-left: 30px;
676 }
677 .row-fluid .thumbnails {
678 margin-left: 0;
679 }
680 }
681
682 @media (max-width: 979px) {
683 body {
684 padding-top: 0;
685 }
686 .navbar-fixed-top,
687 .navbar-fixed-bottom {
688 position: static;
689 }
690 .navbar-fixed-top {
691 margin-bottom: 18px;
692 }
693 .navbar-fixed-bottom {
694 margin-top: 18px;
695 }
696 .navbar-fixed-top .navbar-inner,
697 .navbar-fixed-bottom .navbar-inner {
698 padding: 5px;
699 }
700 .navbar .container {
701 width: auto;
702 padding: 0;
703 }
704 .navbar .brand {
705 padding-right: 10px;
706 padding-left: 10px;
707 margin: 0 0 0 -5px;
708 }
709 .nav-collapse {
710 clear: both;
711 }
712 .nav-collapse .nav {
713 float: none;
714 margin: 0 0 9px;
715 }
716 .nav-collapse .nav > li {
717 float: none;
718 }
719 .nav-collapse .nav > li > a {
720 margin-bottom: 2px;
721 }
722 .nav-collapse .nav > .divider-vertical {
723 display: none;
724 }
725 .nav-collapse .nav .nav-header {
726 color: #999999;
727 text-shadow: none;
728 }
729 .nav-collapse .nav > li > a,
730 .nav-collapse .dropdown-menu a {
731 padding: 6px 15px;
732 font-weight: bold;
733 color: #999999;
734 -webkit-border-radius: 3px;
735 -moz-border-radius: 3px;
736 border-radius: 3px;
737 }
738 .nav-collapse .btn {
739 padding: 4px 10px 4px;
740 font-weight: normal;
741 -webkit-border-radius: 4px;
742 -moz-border-radius: 4px;
743 border-radius: 4px;
744 }
745 .nav-collapse .dropdown-menu li + li a {
746 margin-bottom: 2px;
747 }
748 .nav-collapse .nav > li > a:hover,
749 .nav-collapse .dropdown-menu a:hover {
750 background-color: #222222;
751 }
752 .nav-collapse.in .btn-group {
753 padding: 0;
754 margin-top: 5px;
755 }
756 .nav-collapse .dropdown-menu {
757 position: static;
758 top: auto;
759 left: auto;
760 display: block;
761 float: none;
762 max-width: none;
763 padding: 0;
764 margin: 0 15px;
765 background-color: transparent;
766 border: none;
767 -webkit-border-radius: 0;
768 -moz-border-radius: 0;
769 border-radius: 0;
770 -webkit-box-shadow: none;
771 -moz-box-shadow: none;
772 box-shadow: none;
773 }
774 .nav-collapse .dropdown-menu:before,
775 .nav-collapse .dropdown-menu:after {
776 display: none;
777 }
778 .nav-collapse .dropdown-menu .divider {
779 display: none;
780 }
781 .nav-collapse .navbar-form,
782 .nav-collapse .navbar-search {
783 float: none;
784 padding: 9px 15px;
785 margin: 9px 0;
786 border-top: 1px solid #222222;
787 border-bottom: 1px solid #222222;
788 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
789 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
790 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
791 }
792 .navbar .nav-collapse .nav.pull-right {
793 float: none;
794 margin-left: 0;
795 }
796 .nav-collapse,
797 .nav-collapse.collapse {
798 height: 0;
799 overflow: hidden;
800 }
801 .navbar .btn-navbar {
802 display: block;
803 }
804 .navbar-static .navbar-inner {
805 padding-right: 10px;
806 padding-left: 10px;
807 }
808 }
809
810 @media (min-width: 980px) {
811 .nav-collapse.collapse {
812 height: auto !important;
813 overflow: visible !important;
814 }
815 }