Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

responsive.css 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
  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. .cart, h1.span6 {
  81. display: none!important;
  82. }
  83. .navbar.accounts {
  84. margin-bottom: 0px;
  85. }
  86. .navbar.accounts .brand.hidden {
  87. display: inline;
  88. padding: 6px 10px;
  89. font-size: 18px;
  90. }
  91. .navbar.accounts span {
  92. display: none;
  93. }
  94. .navbar.accounts .nav > li {
  95. float: left;
  96. }
  97. .navbar.primary {
  98. margin-top: 0px;
  99. }
  100. .navbar.primary .brand.hidden {
  101. display: inline;
  102. visibility: visible;
  103. }
  104. .navbar.primary .navbar-inner {
  105. -webkit-border-radius: 0px;
  106. -moz-border-radius: 0px;
  107. border-radius: 0px;
  108. }
  109. .brand.hidden {
  110. visibility: visible;
  111. }
  112. /*Remove float, widths, heights*/
  113. .product_title,
  114. .product_assets,
  115. .product_description,
  116. .product_related,
  117. .review_content,
  118. .review_votes,
  119. .main,
  120. .products li,
  121. .five li,
  122. .four li,
  123. .three li,
  124. .two li,
  125. .product_pod .product_price,
  126. .footer_links li,
  127. .footer_links .top_page {
  128. float: none;
  129. margin: 0px;
  130. width: auto;
  131. height: auto;
  132. }
  133. .products li {
  134. border-bottom: 1px solid #eeeeee;
  135. padding-bottom: 18px;
  136. margin-bottom: 18px;
  137. }
  138. .products li .product_pod {
  139. margin-bottom: 15px;
  140. height: auto!important;
  141. padding: 0px;
  142. text-align: left;
  143. }
  144. .products li .product_pod .star {
  145. clear: none;
  146. margin-left: 28.749999999999996%;
  147. }
  148. .products li .product_pod .avaliability {
  149. text-align: left;
  150. }
  151. .products li .product_pod .product_price {
  152. position: static;
  153. }
  154. .products li .product_pod .product_price h4 {
  155. margin-bottom: 0px;
  156. display: inline;
  157. }
  158. .products li .product_pod .product_price h4 span, .products li .product_pod .product_price h4 del {
  159. float: none;
  160. }
  161. .products li .product_pod .product_price form input#id_quantity {
  162. width: auto;
  163. }
  164. .products li .product_pod .product_price form .btn {
  165. width: auto;
  166. display: block;
  167. padding: 5px 14px 6px;
  168. margin-top: 5px;
  169. }
  170. .products li .product_pod .image_container {
  171. width: 25%;
  172. float: left;
  173. margin-right: 15px;
  174. margin-bottom: 80px;
  175. }
  176. .star {
  177. padding-left: 70px;
  178. background: url(../../img/ui/bg-stars-small.png) 0px -4px no-repeat;
  179. height: 11px;
  180. line-height: 11px;
  181. }
  182. .star.One {
  183. background-position: 0px -18px;
  184. }
  185. .star.Two {
  186. background-position: 0px -32px;
  187. }
  188. .star.Three {
  189. background-position: 0px -47px;
  190. }
  191. .star.Four {
  192. background-position: 0px -61px;
  193. }
  194. .star.Five {
  195. background-position: 0px -75px;
  196. }
  197. .review_content div {
  198. border: none;
  199. }
  200. .review_votes div {
  201. padding: 0px;
  202. }
  203. .footer_links {
  204. border-bottom: none;
  205. }
  206. .footer_links li {
  207. border-left: none;
  208. margin: 0px;
  209. padding: 0px;
  210. }
  211. .navbar #browse ul {
  212. width: auto!important;
  213. }
  214. .navbar #browse li {
  215. border: none!important;
  216. }
  217. .navbar #browse .dropdown-menu {
  218. margin: 0;
  219. }
  220. .navbar #browse .nav.sub-nav {
  221. position: static;
  222. visibility: visible;
  223. }
  224. .navbar #browse .nav.sub-nav li a {
  225. padding: 6px 15px;
  226. }
  227. #browse .dropdown-menu > li:hover .sub-nav, #browse .dropdown-menu > li > a:hover .sub-nav, #browse .dropdown-menu > li:hover {
  228. background: none;
  229. border: none;
  230. -webkit-box-shadow: none;
  231. -moz-box-shadow: none;
  232. box-shadow: none;
  233. -webkit-background-clip: none;
  234. -moz-background-clip: none;
  235. background-clip: none;
  236. }
  237. .header {
  238. text-shadow: none;
  239. }
  240. .alert {
  241. /* Position alerts at the bottom of the browser window*/
  242. position: static;
  243. width: auto;
  244. margin-bottom: 0px;
  245. }
  246. }
  247. @media (max-width: 768px) {
  248. .container {
  249. width: auto;
  250. padding: 0 20px;
  251. }
  252. .row-fluid {
  253. width: 100%;
  254. }
  255. .row {
  256. margin-left: 0;
  257. }
  258. .row > [class*="span"], .row-fluid > [class*="span"] {
  259. float: none;
  260. display: block;
  261. width: auto;
  262. margin: 0;
  263. }
  264. }
  265. @media (min-width: 768px) and (max-width: 980px) {
  266. .row {
  267. margin-left: -20px;
  268. *zoom: 1;
  269. }
  270. .row:before, .row:after {
  271. display: table;
  272. content: "";
  273. }
  274. .row:after {
  275. clear: both;
  276. }
  277. [class*="span"] {
  278. float: left;
  279. margin-left: 20px;
  280. }
  281. .span1 {
  282. width: 42px;
  283. }
  284. .span2 {
  285. width: 104px;
  286. }
  287. .span3 {
  288. width: 166px;
  289. }
  290. .span4 {
  291. width: 228px;
  292. }
  293. .span5 {
  294. width: 290px;
  295. }
  296. .span6 {
  297. width: 352px;
  298. }
  299. .span7 {
  300. width: 414px;
  301. }
  302. .span8 {
  303. width: 476px;
  304. }
  305. .span9 {
  306. width: 538px;
  307. }
  308. .span10 {
  309. width: 600px;
  310. }
  311. .span11 {
  312. width: 662px;
  313. }
  314. .span12, .container {
  315. width: 724px;
  316. }
  317. .offset1 {
  318. margin-left: 82px;
  319. }
  320. .offset2 {
  321. margin-left: 144px;
  322. }
  323. .offset3 {
  324. margin-left: 206px;
  325. }
  326. .offset4 {
  327. margin-left: 268px;
  328. }
  329. .offset5 {
  330. margin-left: 330px;
  331. }
  332. .offset6 {
  333. margin-left: 392px;
  334. }
  335. .offset7 {
  336. margin-left: 454px;
  337. }
  338. .offset8 {
  339. margin-left: 516px;
  340. }
  341. .offset9 {
  342. margin-left: 578px;
  343. }
  344. .offset10 {
  345. margin-left: 640px;
  346. }
  347. .offset11 {
  348. margin-left: 702px;
  349. }
  350. .row-fluid {
  351. width: 100%;
  352. *zoom: 1;
  353. }
  354. .row-fluid:before, .row-fluid:after {
  355. display: table;
  356. content: "";
  357. }
  358. .row-fluid:after {
  359. clear: both;
  360. }
  361. .row-fluid > [class*="span"] {
  362. float: left;
  363. margin-left: 2.762430939%;
  364. }
  365. .row-fluid > [class*="span"]:first-child {
  366. margin-left: 0;
  367. }
  368. .row-fluid .span1 {
  369. width: 5.801104972%;
  370. }
  371. .row-fluid .span2 {
  372. width: 14.364640883%;
  373. }
  374. .row-fluid .span3 {
  375. width: 22.928176794%;
  376. }
  377. .row-fluid .span4 {
  378. width: 31.491712705%;
  379. }
  380. .row-fluid .span5 {
  381. width: 40.055248616%;
  382. }
  383. .row-fluid .span6 {
  384. width: 48.618784527%;
  385. }
  386. .row-fluid .span7 {
  387. width: 57.182320438000005%;
  388. }
  389. .row-fluid .span8 {
  390. width: 65.74585634900001%;
  391. }
  392. .row-fluid .span9 {
  393. width: 74.30939226%;
  394. }
  395. .row-fluid .span10 {
  396. width: 82.87292817100001%;
  397. }
  398. .row-fluid .span11 {
  399. width: 91.436464082%;
  400. }
  401. .row-fluid .span12 {
  402. width: 99.999999993%;
  403. }
  404. input.span1, textarea.span1, .uneditable-input.span1 {
  405. width: 32px;
  406. }
  407. input.span2, textarea.span2, .uneditable-input.span2 {
  408. width: 94px;
  409. }
  410. input.span3, textarea.span3, .uneditable-input.span3 {
  411. width: 156px;
  412. }
  413. input.span4, textarea.span4, .uneditable-input.span4 {
  414. width: 218px;
  415. }
  416. input.span5, textarea.span5, .uneditable-input.span5 {
  417. width: 280px;
  418. }
  419. input.span6, textarea.span6, .uneditable-input.span6 {
  420. width: 342px;
  421. }
  422. input.span7, textarea.span7, .uneditable-input.span7 {
  423. width: 404px;
  424. }
  425. input.span8, textarea.span8, .uneditable-input.span8 {
  426. width: 466px;
  427. }
  428. input.span9, textarea.span9, .uneditable-input.span9 {
  429. width: 528px;
  430. }
  431. input.span10, textarea.span10, .uneditable-input.span10 {
  432. width: 590px;
  433. }
  434. input.span11, textarea.span11, .uneditable-input.span11 {
  435. width: 652px;
  436. }
  437. input.span12, textarea.span12, .uneditable-input.span12 {
  438. width: 714px;
  439. }
  440. }
  441. @media (max-width: 980px) {
  442. body {
  443. padding-top: 0;
  444. }
  445. .navbar-fixed-top {
  446. position: static;
  447. margin-bottom: 18px;
  448. }
  449. .navbar-fixed-top .navbar-inner {
  450. padding: 5px;
  451. }
  452. .navbar .container {
  453. width: auto;
  454. padding: 0;
  455. }
  456. .navbar .brand {
  457. padding-left: 10px;
  458. padding-right: 10px;
  459. margin: 0 0 0 -5px;
  460. }
  461. .navbar .nav-collapse {
  462. clear: left;
  463. }
  464. .navbar .nav {
  465. float: none;
  466. margin: 0 0 9px;
  467. }
  468. .navbar .nav > li {
  469. float: none;
  470. }
  471. .navbar .nav > li > a {
  472. margin-bottom: 2px;
  473. }
  474. .navbar .nav > .divider-vertical {
  475. display: none;
  476. }
  477. .navbar .nav > li > a, .navbar .dropdown-menu a {
  478. padding: 6px 15px;
  479. font-weight: bold;
  480. color: #999999;
  481. -webkit-border-radius: 3px;
  482. -moz-border-radius: 3px;
  483. border-radius: 3px;
  484. }
  485. .navbar .dropdown-menu li + li a {
  486. margin-bottom: 2px;
  487. }
  488. .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
  489. background-color: #222222;
  490. }
  491. .navbar .dropdown-menu {
  492. position: static;
  493. top: auto;
  494. left: auto;
  495. float: none;
  496. display: block;
  497. max-width: none;
  498. margin: 0 15px;
  499. padding: 0;
  500. background-color: transparent;
  501. border: none;
  502. -webkit-border-radius: 0;
  503. -moz-border-radius: 0;
  504. border-radius: 0;
  505. -webkit-box-shadow: none;
  506. -moz-box-shadow: none;
  507. box-shadow: none;
  508. }
  509. .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
  510. display: none;
  511. }
  512. .navbar .dropdown-menu .divider {
  513. display: none;
  514. }
  515. .navbar-form, .navbar-search {
  516. float: none;
  517. padding: 9px 15px;
  518. margin: 9px 0;
  519. border-top: 1px solid #222222;
  520. border-bottom: 1px solid #222222;
  521. -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  522. -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  523. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  524. }
  525. .navbar .nav.pull-right {
  526. float: none;
  527. margin-left: 0;
  528. }
  529. .navbar-static .navbar-inner {
  530. padding-left: 10px;
  531. padding-right: 10px;
  532. }
  533. .btn-navbar {
  534. display: block;
  535. }
  536. .nav-collapse {
  537. overflow: hidden;
  538. height: 0;
  539. }
  540. }
  541. @media (min-width: 980px) {
  542. .nav-collapse.collapse {
  543. height: auto !important;
  544. }
  545. }
  546. @media (min-width: 1200px) {
  547. .row {
  548. margin-left: -30px;
  549. *zoom: 1;
  550. }
  551. .row:before, .row:after {
  552. display: table;
  553. content: "";
  554. }
  555. .row:after {
  556. clear: both;
  557. }
  558. [class*="span"] {
  559. float: left;
  560. margin-left: 30px;
  561. }
  562. .span1 {
  563. width: 70px;
  564. }
  565. .span2 {
  566. width: 170px;
  567. }
  568. .span3 {
  569. width: 270px;
  570. }
  571. .span4 {
  572. width: 370px;
  573. }
  574. .span5 {
  575. width: 470px;
  576. }
  577. .span6 {
  578. width: 570px;
  579. }
  580. .span7 {
  581. width: 670px;
  582. }
  583. .span8 {
  584. width: 770px;
  585. }
  586. .span9 {
  587. width: 870px;
  588. }
  589. .span10 {
  590. width: 970px;
  591. }
  592. .span11 {
  593. width: 1070px;
  594. }
  595. .span12, .container {
  596. width: 1170px;
  597. }
  598. .offset1 {
  599. margin-left: 130px;
  600. }
  601. .offset2 {
  602. margin-left: 230px;
  603. }
  604. .offset3 {
  605. margin-left: 330px;
  606. }
  607. .offset4 {
  608. margin-left: 430px;
  609. }
  610. .offset5 {
  611. margin-left: 530px;
  612. }
  613. .offset6 {
  614. margin-left: 630px;
  615. }
  616. .offset7 {
  617. margin-left: 730px;
  618. }
  619. .offset8 {
  620. margin-left: 830px;
  621. }
  622. .offset9 {
  623. margin-left: 930px;
  624. }
  625. .offset10 {
  626. margin-left: 1030px;
  627. }
  628. .offset11 {
  629. margin-left: 1130px;
  630. }
  631. .row-fluid {
  632. width: 100%;
  633. *zoom: 1;
  634. }
  635. .row-fluid:before, .row-fluid:after {
  636. display: table;
  637. content: "";
  638. }
  639. .row-fluid:after {
  640. clear: both;
  641. }
  642. .row-fluid > [class*="span"] {
  643. float: left;
  644. margin-left: 2.564102564%;
  645. }
  646. .row-fluid > [class*="span"]:first-child {
  647. margin-left: 0;
  648. }
  649. .row-fluid .span1 {
  650. width: 5.982905983%;
  651. }
  652. .row-fluid .span2 {
  653. width: 14.529914530000001%;
  654. }
  655. .row-fluid .span3 {
  656. width: 23.076923077%;
  657. }
  658. .row-fluid .span4 {
  659. width: 31.623931624%;
  660. }
  661. .row-fluid .span5 {
  662. width: 40.170940171000005%;
  663. }
  664. .row-fluid .span6 {
  665. width: 48.717948718%;
  666. }
  667. .row-fluid .span7 {
  668. width: 57.264957265%;
  669. }
  670. .row-fluid .span8 {
  671. width: 65.81196581200001%;
  672. }
  673. .row-fluid .span9 {
  674. width: 74.358974359%;
  675. }
  676. .row-fluid .span10 {
  677. width: 82.905982906%;
  678. }
  679. .row-fluid .span11 {
  680. width: 91.45299145300001%;
  681. }
  682. .row-fluid .span12 {
  683. width: 100%;
  684. }
  685. input.span1, textarea.span1, .uneditable-input.span1 {
  686. width: 60px;
  687. }
  688. input.span2, textarea.span2, .uneditable-input.span2 {
  689. width: 160px;
  690. }
  691. input.span3, textarea.span3, .uneditable-input.span3 {
  692. width: 260px;
  693. }
  694. input.span4, textarea.span4, .uneditable-input.span4 {
  695. width: 360px;
  696. }
  697. input.span5, textarea.span5, .uneditable-input.span5 {
  698. width: 460px;
  699. }
  700. input.span6, textarea.span6, .uneditable-input.span6 {
  701. width: 560px;
  702. }
  703. input.span7, textarea.span7, .uneditable-input.span7 {
  704. width: 660px;
  705. }
  706. input.span8, textarea.span8, .uneditable-input.span8 {
  707. width: 760px;
  708. }
  709. input.span9, textarea.span9, .uneditable-input.span9 {
  710. width: 860px;
  711. }
  712. input.span10, textarea.span10, .uneditable-input.span10 {
  713. width: 960px;
  714. }
  715. input.span11, textarea.span11, .uneditable-input.span11 {
  716. width: 1060px;
  717. }
  718. input.span12, textarea.span12, .uneditable-input.span12 {
  719. width: 1160px;
  720. }
  721. .thumbnails {
  722. margin-left: -30px;
  723. }
  724. .thumbnails > li {
  725. margin-left: 30px;
  726. }
  727. }