You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

responsive.css 11KB

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