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

responsive.css 14KB

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