bootstrap-responsive.css 10 KB

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