API tools faq
paste
Advertisement
Guest User

css

a guest
Nov 17th, 2013
139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 65.35 KB | None | 0 0
raw download clone embed print report
  1. /******************************************************************
  2. Theme Name: Mobilia v3.1
  3. Theme URI: http://themes.shopify.com/themes/mobilia/styles/tokyo?ref=out-of-the-sandbox
  4. Author: Out of the Sandbox (http://outofthesandbox.com)
  5. Description: Shopify Theme (http://www.shopify.com/?ref=out-of-the-sandbox)
  6. ******************************************************************/
  7. /* Table of Content
  8. ==================================================
  9. #Reset & Basics
  10. #Basic Styles
  11. #Typography
  12. #Links
  13. #Lists
  14. #Menu
  15. #Images
  16. #Videos
  17. #Buttons
  18. #Tabs
  19. #Forms
  20. #Tables
  21. #Misc
  22. #Site Styles
  23. #FlexSlider
  24. #FancyBox
  25. #Layout
  26. #Font-Face */
  27.  
  28. /* #Reset & Basics
  29. ================================================== */
  30. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  31. margin: 0;
  32. padding: 0;
  33. border: 0;
  34. font-size: 100%;
  35. font: inherit; }
  36. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  37. display: block; }
  38. body {
  39. line-height: 1; }
  40. ol, ul {
  41. list-style: none; }
  42. blockquote, q {
  43. quotes: none; }
  44. blockquote:before, blockquote:after,
  45. q:before, q:after {
  46. content: '';
  47. content: none; }
  48. table {
  49. border-collapse: collapse;
  50. border-spacing: 0; }
  51.  
  52.  
  53. /* #Basic Styles
  54. ================================================== */
  55. body {
  56. background-color: {{ settings.shop_bg_color }};
  57. {% if settings.use_custom_bg_image %}
  58. background-image: url("{{ 'custom_bg.png' | asset_url }}");
  59. {% if settings.bg_stretched %}
  60. background-repeat:no-repeat;
  61. background-attachment:fixed;
  62. -webkit-background-size:cover;
  63. -moz-background-size:cover;
  64. -o-background-size:cover;
  65. background-size:cover;
  66. {% else %}
  67. background-repeat:{{ settings.repeat_bg }};
  68. {% if settings.bg_fixed %}
  69. background-attachment:fixed;
  70. {% endif %}
  71. {% endif %}
  72. {% endif %}
  73.  
  74. -webkit-font-smoothing: antialiased;
  75. font-smoothing: antialiased;
  76.  
  77. {% if settings.regular_typeface_method == "google_webfonts" %}
  78. font-family: "{{ settings.regular_google_webfont_font | replace: '+', ' ' }}";
  79. {% else %}
  80. font-family: {{ settings.regular_websafe_font | replace: '+', ' ' }};
  81. {% endif %}
  82. font-weight: {{ settings.regular_weight }};
  83. font-size: {{ settings.regular_font_size }}px;
  84. text-transform: {{ settings.regular_font_style}};
  85. color: {{ settings.regular_color}};
  86. line-height: 1.7em;
  87. }
  88. ::-moz-selection {
  89. background-color: #000;
  90. color: #fff;
  91. }
  92. ::selection {
  93. background: #FFF7B6;
  94. color: black;
  95. }
  96. abbr {
  97. border-bottom: 1px dotted {{ settings.border_color }};
  98. }
  99. /* #Typography
  100. ================================================== */
  101. .logo {
  102. {% if settings.logo_typeface_method == "google_webfonts" %}
  103. font-family: "{{ settings.logo_google_webfont_font | replace: '+', ' ' }}";
  104. {% else %}
  105. font-family: {{ settings.logo_websafe_font | replace: '+', ' ' }};
  106. {% endif %}
  107.  
  108. font-weight: {{ settings.logo_weight }};
  109. font-size: {{ settings.logo_font_size }}px;
  110. text-transform: {{ settings.logo_font_style}};
  111. color: {{ settings.logo_color }};
  112. }
  113. .logo a, .logo a:hover, .logo a:visited, .logo a:active {
  114. color: {{ settings.logo_color }};
  115. line-height: 45px;
  116. }
  117. h1, h2, h3, h4, h5, h6, .collection_title, .headline, p.subtitle {
  118. {% if settings.headline_typeface_method == "google_webfonts" %}
  119. font-family: "{{ settings.headline_google_webfont_font | replace: '+', ' ' }}";
  120. {% else %}
  121. font-family: {{ settings.headline_websafe_font | replace: '+', ' ' }};
  122. {% endif %}
  123. font-weight: {{ settings.headline_weight }};
  124. text-transform: {{ settings.headline_font_style}};
  125. color: {{ settings.headline_color}};
  126. display:block;
  127. letter-spacing: {{ settings.headline_letter_spacing }}px;
  128. text-rendering: optimizeLegibility;
  129. }
  130. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .collection_title { font-weight: inherit; }
  131. h1 a, h1 a:visited, .collection_title a, .collection_title a:visited { color: {{ settings.headline_color}} }
  132. h1 a:hover, h1 a:active, .collection_title a:hover, .collection_title a:active { color: {{ settings.link_color }} }
  133. h1, .h1, h1.home, h2.title, .collection_title { font-size: 22px; line-height: 1.5em; margin: 0 auto 20px; clear:both; font-weight: bold;}
  134. h1.home { margin: 0 auto 15px; border-top: 1px solid {{ settings.border_color }}; border-bottom: 1px solid {{ settings.border_color }}; padding: 12px 0; }
  135. h1.product_name { margin-bottom: 15px;}
  136. h2, .h2 { font-size: 26px; margin-bottom: 0.75em }
  137. h3, .h3, h1.blog_title { font-size: 24px; line-height: 35px; margin: 0 auto 15px 0; text-align: left; }
  138. h1.collection_title, div.collection_title { margin-bottom: 0; line-height: {{ settings.headline_font_size }}px; display: inline; }
  139. h1.collection_title_tags, div.collection_title_tags { padding-right: 25px; border-right: solid 1px {{ settings.border_color }}; }
  140. h4, .h4, h4.title a { font-size: 18px; line-height: 32px; margin: 0 0 10px 0; text-align: left; padding: 0; border-bottom: 1px solid {{ settings.border_color }}; padding-bottom:8px;}
  141. h4.title a { border-bottom: 0; padding-bottom: 0; margin-bottom: 0;}
  142. h5, .h5 { font-size: 18px; padding-bottom: 1em; }
  143. h5.sub_title { padding-bottom: 5px; }
  144. h6, .h6 { font-size: 16px; padding-bottom: 1em;}
  145. .footer h6 { color: {{ settings.headline_footer_text_color }}; }
  146. .subheader { color: #777; }
  147. p { margin: 0 0 15px; font-style: normal; line-height: 1.7em; }
  148. p img { margin: 0; }
  149. em, i { font-style: italic; }
  150. strong, b { font-weight: bold; }
  151. small { font-size: 90%; }
  152.  
  153. /* Blockquotes */
  154. blockquote, blockquote p { font-size: 17px; line-height: 24px; font-style: italic; }
  155. blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid {{ settings.border_color }}; }
  156. blockquote cite { display: block; font-size: 12px; color: #555; }
  157. blockquote cite:before { content: "\2014 \0020"; }
  158. blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
  159. hr { border: solid {{ settings.border_color }}; border-width: 1px 0 0; clear: both; margin: 12px 0; height: 0; }
  160. .quote {
  161. font-size: 16px;
  162. line-height: 22px;
  163. text-align: center;
  164. margin: 0 0 20px 0;
  165. font-style: italic;
  166. }
  167. /* #Links
  168. ================================================== */
  169. a, a:visited { color: {{ settings.link_color }}; text-decoration: none; outline: 0; -webkit-transition: color .1s linear; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; transition: color .1s linear; }
  170. a:hover, a:focus { color: {{ settings.link_hover_color }}; }
  171. /* #Lists
  172. ================================================== */
  173. ul, ol { margin-bottom: 20px; }
  174. ul { list-style: circle outside; }
  175. ol { list-style: decimal; }
  176. ul, ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
  177. ul.square { list-style: square outside; }
  178. ul.circle { list-style: circle outside; }
  179. ul.disc { list-style: disc outside; }
  180. ul ul, ul ol,
  181. ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
  182. ul ul li, ul ol li,
  183. ol ol li, ol ul li { margin-bottom: 6px; }
  184. li { line-height: 18px; margin-bottom: 12px; }
  185. ul.large li { line-height: 21px; }
  186. ul.none { list-style: none outside; margin-left: 0;}
  187. ul.border {
  188. list-style: none outside;
  189. line-height: 26px;
  190. }
  191. ul.border li {
  192. border-bottom: 1px solid {{ settings.border_color }};
  193. list-style: none outside none;
  194. padding: 12px 0;
  195. margin-bottom: 0;
  196. }
  197. ul.chirp {
  198. margin-left: 0
  199. }
  200. ul.chirp .meta a {
  201. color: {{ settings.was_price_color }};
  202. }
  203.  
  204. /* #Menu
  205. ================================================== */
  206.  
  207.  
  208.  
  209.  
  210.  
  211. {% if settings.shop_use_header_bg_color %}
  212. .header {
  213. background-color: {{ settings.header_bg_color }};
  214. }
  215. {% endif %}
  216. .header div.header_border {
  217. border-bottom: solid 0px {{ settings.border_color }};
  218. padding-bottom: 15px;
  219. }
  220. .homepage {
  221. padding-bottom: 15px;
  222. }
  223. .nav {
  224. text-align:center;
  225. }
  226. .nav ul {
  227. display: block;
  228. margin: 0 auto;
  229. border: none;
  230. padding: 0;
  231. margin: 0;
  232. }
  233. .nav ul li {
  234. display: inline-block;
  235. padding: 0 0 0 20px;
  236. position: relative;
  237. margin: 0;
  238. border: 0;
  239. }
  240. .nav ul li {
  241. margin-top: 10px;
  242. *display: inline;
  243. }
  244. .nav ul li a, .nav ul li a:visited, .nav ul li a:active {
  245. {% if settings.nav_typeface_method == "google_webfonts" %}
  246. font-family: "{{ settings.nav_google_webfont_font | replace: '+', ' ' }}";
  247. {% else %}
  248. font-family: {{ settings.nav_websafe_font | replace: '+', ' ' }};
  249. {% endif %}
  250. font-weight: {{ settings.nav_weight }};
  251. font-size: {{ settings.nav_font_size }}px;
  252. text-transform: {{ settings.nav_font_style}};
  253. color: {{ settings.nav_color}};
  254. position: relative;
  255. display:block;
  256. letter-spacing: {{ settings.nav_letter_spacing }}px;
  257. padding-bottom: 10px;
  258. }
  259. .nav ul li a.active, nav ul li a.active:visited, nav ul li a.active:active {
  260. color: {{ settings.nav_color_active }};
  261. }
  262. .nav ul.search_nav {
  263. margin-bottom: 5px;
  264. }
  265. .nav ul li a:hover, nav ul li a:focus {
  266. color: {{ settings.nav_color_hover}};
  267. }
  268. .nav ul li.current_page_item a {
  269. color: {{ settings.nav_color_hover}};
  270. }
  271. .nav ul li.current_page_ancestor a {
  272. color: {{ settings.nav_color_hover}};
  273. }
  274. .nav ul.menu {
  275. display: inline;
  276. }
  277.  
  278. .nav ul li a.cart, .nav ul li a.navicon, input[type="submit"].guest_button {
  279. {% if settings.cart_icon == 'light' %}
  280. background: url({{ 'cart.png' | asset_url }}) no-repeat 9px 7px;
  281. {% else %}
  282. background: url({{ 'cart_dark.png' | asset_url }}) no-repeat 9px 7px;
  283. {% endif %}
  284.  
  285. padding: 5px 10px 5px 30px;
  286. border: solid 1px {{ settings.border_color }};
  287. -webkit-border-radius: 4px;
  288. -khtml-border-radius: 4px;
  289. -moz-border-radius: 4px;
  290. -ms-border-radius: 4px;
  291. -o-border-radius: 4px;
  292. border-radius: 4px;
  293. }
  294.  
  295. input[type="submit"].guest_button, input[type="submit"].guest_button:hover {
  296. background: none;
  297. color: {{ settings.link_color }};
  298. padding: 8px 20px 8px 10px;
  299. }
  300.  
  301. .nav ul li a.cart.active {
  302. color: {{ settings.nav_color_active }};
  303. border-color: {{ settings.btn_color }};
  304. }
  305.  
  306. .nav ul li a.cart:hover, .nav ul li a.cart.active:hover {
  307. background-position: 9px -43px;
  308. color: {{ settings.nav_color_hover}};
  309. }
  310.  
  311. ul.menu li.navicon_button {
  312. display: none;
  313. }
  314. ul.menu li a.navicon {
  315. {% if settings.cart_icon == 'light' %}
  316. background: url({{ 'menu.png' | asset_url }}) no-repeat 9px 6px;
  317. {% else %}
  318. background: url({{ 'menu_dark.png' | asset_url }}) no-repeat 9px 6px;
  319. {% endif %}
  320. padding-left: 35px;
  321. }
  322.  
  323. ul.menu li a.navicon:hover {
  324. background-position: 9px -96px;
  325. }
  326.  
  327. /* sub-levels link */
  328. .menu ul a, .menu li:hover > ul a {
  329. padding: 10px 0 10px 15px;
  330. background: none;
  331. text-align: left;
  332. }
  333.  
  334. /* sub-level ul */
  335. .menu ul {
  336. position: absolute;
  337. left: 10px;
  338. top: 25px;
  339. background-color: {{ settings.shop_bg_color }};
  340. border: solid 1px #ddd;
  341. border-bottom-color: #bbb;
  342. z-index: 100;
  343. display: none;
  344. width: 200px;
  345. }
  346. ul.menu ul li {
  347. display: block;
  348. border-bottom: solid 1px #f4f4f4;
  349. text-align:left;
  350. padding: 0;
  351. }
  352. .menu ul li a {
  353. display:block;
  354. }
  355. /* sub-sub-level dropdown */
  356. .menu ul ul {
  357. left: 200px;
  358. top: -1px;
  359. }
  360. /* show dropdown ul on hover */
  361. .menu li:hover > ul {
  362. display: block;
  363. }
  364.  
  365. .toggle_menu {
  366. position: relative;
  367. overflow: hidden;
  368. display: none;
  369. top: -16px;
  370. }
  371.  
  372. {% if settings.fix_top_bar %}
  373. .header {
  374. position: fixed;
  375. z-index: 9999;
  376. width: 100%;
  377. background-color: #fff;
  378. }
  379.  
  380. .fixed_header {
  381. padding-top: 106px;
  382. }
  383.  
  384. .toggle_menu {
  385. padding-top: 92px;
  386. }
  387. {% endif %}
  388.  
  389. ul.top_menu {
  390. padding-top: {{ settings.menu_top_padding }}px;
  391. }
  392.  
  393. ul.top_menu li a, ul.top_menu li a:visited, ul.top_menu li a:active {
  394. font-size: {{ settings.top_menu_size }}px;
  395. color: {{ settings.top_menu_color }};
  396. }
  397.  
  398. ul.top_menu li a:hover {
  399. color: {{ settings.nav_color_hover}};
  400. }
  401. .mobile_menu_container {
  402. display: inline;
  403. }
  404. .nav ul.mobile_menu {
  405. background-color: #1B1B1B;
  406. margin-bottom: 1em;
  407. clear: both;
  408. }
  409.  
  410. .nav ul.mobile_menu li {
  411. border: none;
  412. text-align: left;
  413. display: block;
  414. border-top: 1px solid #313335;
  415. padding-left: 0
  416. }
  417.  
  418. .nav ul.mobile_menu .search_box {
  419. margin: 6px 0 6px 20px;
  420. width: 85%;
  421. }
  422.  
  423. .nav ul.mobile_menu li a {
  424. color: #9DA0A4;
  425. text-decoration: none;
  426. -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
  427. -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
  428. box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
  429. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  430. display: block;
  431. padding: 10px 0 10px 20px;
  432. }
  433.  
  434. .nav ul.mobile_menu li ul li a {
  435. padding-left: 40px;
  436. }
  437.  
  438. .nav ul.mobile_menu li ul ul li a {
  439. padding-left: 60px;
  440. }
  441.  
  442. .nav ul.mobile_menu li.active, .mobile_menu li:hover{
  443. background-color: #111;
  444. }
  445.  
  446. .nav ul.mobile_menu li.active a, .nav ul.mobile_menu li a:hover {
  447. color: #fff;
  448. }
  449.  
  450. .container div.collection_nav {
  451. border-bottom: solid 1px {{ settings.border_color }};
  452. padding-bottom: 15px;
  453. margin-bottom: 1.5em;
  454. }
  455. .collection_menu, .collection_menu li {
  456. display: inline;
  457. list-style: none;
  458. border: none;
  459. position: relative;
  460. top: -3px;
  461. margin: 0;
  462. }
  463. .collection_menu li {
  464. padding-left: 25px;
  465. }
  466.  
  467. .collection_menu li a, .sidebar a {
  468. color: {{ settings.nav_color}};
  469. }
  470.  
  471. .collection_menu li span.active, .sidebar li.active a, ul.blog_list a.active {
  472. color: {{ settings.nav_color_active }};
  473. }
  474.  
  475. .collection_menu li a:hover, .collection_menu li span.active:hover, .sidebar a:hover {
  476. color: {{ settings.nav_color_hover}};
  477. }
  478.  
  479. ul.blog_list li ul { margin-top: 12px; margin-left: 15px; }
  480.  
  481. /* #Images
  482. ================================================== */
  483. /*
  484. The purpose of the below declaration is to make sure images don't
  485. exceed the width of columns they are put into when resizing window.
  486. Unfortunately, this declaration breaks certain lightbox, slider or other plugins,
  487. so the best solution is to individually call these properties on images that
  488. are children of the grid that you want to resize with grid.
  489. */
  490. .product_row img, .product_image_col img, .article img, .blog_content img, .section img, .thumbnail img, .logo img, .page img, .sidebar img {
  491. max-width: 100%;
  492. height: auto; }
  493. .zoomImg {
  494. max-width: inherit !important;
  495. cursor: pointer;
  496. }
  497.  
  498. /* #Videos
  499. ================================================== */
  500. /*
  501. For YouTube and Vimeo videos, wrap the embedded code snippet
  502. in a <div class="video-container"> tag to allow it to resize.
  503. To restrict the width, wrap with an additional <div class="video-wrapper">
  504. */
  505. .video-container {
  506. position: relative;
  507. padding-bottom: 56.25%;
  508. padding-top: 25px;
  509. height: 0;
  510. overflow: hidden;
  511. }
  512. .video-container iframe,
  513. .video-container object,
  514. .video-container embed {
  515. position: absolute;
  516. top: 0;
  517. left: 0;
  518. width: 100%;
  519. height: 100%;
  520. }
  521. .video-wrapper {
  522. width: 600px;
  523. max-width: 100%;
  524. }
  525. /* #Buttons
  526. ================================================== */
  527.  
  528. a.button,
  529. button,
  530. input[type="submit"],
  531. input[type="reset"],
  532. input[type="button"],
  533. .action_button,
  534. a.action_button,
  535. input.action_button[type="submit"],
  536. input.action_button[type="button"] {
  537. background: {{ settings.btn_color }};
  538. color: {{ settings.btn_text_color }};
  539. border: 0;
  540. padding: 8px 20px;
  541. text-align: center;
  542. font-size: 14px;
  543. cursor: pointer;
  544. {% if settings.nav_typeface_method == "google_webfonts" %}
  545. font-family: "{{ settings.nav_google_webfont_font | replace: '+', ' ' }}";
  546. {% else %}
  547. font-family: {{ settings.nav_websafe_font | replace: '+', ' ' }};
  548. {% endif %}
  549. font-weight: {{ settings.nav_weight }};
  550. font-size: {{ settings.nav_font_size }}px;
  551. text-transform: {{ settings.nav_font_style}};
  552. display: inline-block;
  553. -webkit-transition: all 500ms ease 0s;
  554. -moz-transition: all 500ms ease 0s;
  555. -ms-transition: all 500ms ease 0s;
  556. -o-transition: all 500ms ease 0s;
  557. transition: all 500ms ease 0s;
  558. -webkit-appearance: none;
  559. text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  560. -webkit-border-radius: 2px;
  561. -khtml-border-radius: 2px;
  562. -moz-border-radius: 2px;
  563. -ms-border-radius: 2px;
  564. -o-border-radius: 2px;
  565. border-radius: 2px;
  566. -webkit-font-smoothing: antialiased;
  567. font-smoothing: antialiased;
  568. }
  569.  
  570. a.button:hover,
  571. button:hover,
  572. input[type="submit"]:hover,
  573. input[type="reset"]:hover,
  574. input[type="button"]:hover,
  575. .action_button:hover,
  576. input.action_button[type="submit"]:hover,
  577. input.action_button[type="button"]:hover {
  578. background: {{ settings.btn_hover_color }};
  579. -webkit-transition: all 500ms ease 0s;
  580. -moz-transition: all 500ms ease 0s;
  581. -ms-transition: all 500ms ease 0s;
  582. -o-transition: all 500ms ease 0s;
  583. transition: all 500ms ease 0s;
  584. }
  585.  
  586. a.button:active,
  587. button:active,
  588. input[type="submit"]:active,
  589. input[type="reset"]:active,
  590. input[type="button"]:active {
  591.  
  592. }
  593.  
  594. /* #Tabs
  595. ================================================== */
  596. ul.tabs {
  597. display: block;
  598. margin: 10px 0 10px 0;
  599. padding: 0;
  600. border-bottom: solid 1px {{ settings.border_color }};
  601. border-top: 0;
  602. list-style: none outside;
  603. margin-left: 0;
  604. }
  605. ul.tabs li {
  606. display: block;
  607. width: auto;
  608. height: 30px;
  609. padding: 0;
  610. float: left;
  611. margin-bottom: 0;
  612. border: 0
  613. list-style: none outside;
  614. margin-left: 0;
  615. }
  616. ul.tabs li a {
  617. display: block;
  618. text-decoration: none;
  619. width: auto;
  620. height: 29px;
  621. padding: 0px 20px;
  622. line-height: 30px;
  623. border: solid 1px {{ settings.border_color }};
  624. border-width: 1px 0 0 1px;
  625. margin: 0;
  626. background: {{ settings.tab_background_color }};
  627. font-size: 13px; }
  628. ul.tabs li a.active {
  629. {% if settings.shop_use_content_bg_color %}
  630. background-color: {{ settings.shop_content_bg_color }};
  631. {% else %}
  632. background-color: {{ settings.shop_bg_color }};
  633. {% endif %}
  634. height: 30px;
  635. position: relative;
  636. top: -4px;
  637. padding-top: 4px;
  638. border-right-width: 1px;
  639. margin: 0 -1px 0 0;
  640. color: #111;
  641. -moz-border-radius-topleft: 2px;
  642. -webkit-border-top-left-radius: 2px;
  643. border-top-left-radius: 2px;
  644. -moz-border-radius-topright: 2px;
  645. -webkit-border-top-right-radius: 2px;
  646. border-top-right-radius: 2px; }
  647. ul.tabs li:first-child a {
  648. -moz-border-radius-topleft: 2px;
  649. -webkit-border-top-left-radius: 2px;
  650. border-top-left-radius: 2px; }
  651. ul.tabs li:last-child a {
  652. border-width: 1px 1px 0 1px;
  653. -moz-border-radius-topright: 2px;
  654. -webkit-border-top-right-radius: 2px;
  655. border-top-right-radius: 2px; }
  656. ul.tabs-content { margin: 0; display: block; border: 0;}
  657. ul.tabs-content > li { display:none; border: 0;}
  658. ul.tabs-content > li.active { display: block; border: 0;}
  659.  
  660. /* Clearfixing tabs for beautiful stacking */
  661. ul.tabs:before,
  662. ul.tabs:after {
  663. content: '\0020';
  664. display: block;
  665. overflow: hidden;
  666. visibility: hidden;
  667. width: 0;
  668. height: 0; }
  669. ul.tabs:after {
  670. clear: both; }
  671. ul.tabs {
  672. zoom: 1; }
  673.  
  674. /* #Forms
  675. ================================================== */
  676. form {
  677. margin-bottom: 20px; }
  678. fieldset {
  679. margin-bottom: 20px; }
  680. input[type="text"],
  681. input[type="number"],
  682. input[type="password"],
  683. input[type="email"],
  684. textarea,
  685. select {
  686. border: 1px solid #ccc;
  687. padding: 9px;
  688. outline: none;
  689. -moz-border-radius: 2px;
  690. -webkit-border-radius: 2px;
  691. border-radius: 2px;
  692. font: 13px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  693. color: #555;
  694. margin: 0;
  695. width: 200px;
  696. max-width: 100%;
  697. display: block;
  698. margin-bottom: 20px;
  699. background: #fff;
  700. -webkit-appearance: none;
  701. -moz-appearance: none;
  702. -ms-appearance: none;
  703. appearance: none;}
  704. select {
  705. background: #f9f9f9 url({{ 'select.png' | asset_url }}) no-repeat right center;
  706. cursor: pointer;
  707. -webkit-padding-end: 30px;
  708. }
  709. input[type="number"] {
  710. padding: 5px;
  711. }
  712. input[type="text"]:focus,
  713. input[type="number"]:focus,
  714. input[type="password"]:focus,
  715. input[type="email"]:focus,
  716. textarea:focus {
  717. border: 1px solid #aaa;
  718. color: #333;
  719. -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
  720. -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
  721. box-shadow: 0 0 3px rgba(0,0,0,.2); }
  722. label,
  723. legend {
  724. display: block;
  725. font-weight: normal;
  726. margin-bottom: 4px; }
  727. input[type="checkbox"] {
  728. display: inline; }
  729. label span,
  730. legend span {
  731. font-weight: normal;
  732. font-size: 13px; }
  733. textarea {
  734. width: 95%;
  735. }
  736.  
  737. #contact_email {
  738. width: 230px;
  739. display: inline;
  740. }
  741.  
  742. #sign_up {
  743. margin-left: 10px;
  744. }
  745.  
  746. #customer input[type="text"],
  747. #customer input[type="email"],
  748. #customer input[type="password"] {
  749. width: 93%;
  750. }
  751.  
  752. /* #Tables
  753. ================================================== */
  754.  
  755. {% if settings.table_styles_enabled %}
  756. table a:link {
  757. color: #666;
  758. font-weight: bold;
  759. text-decoration:none;
  760. }
  761. table a:visited {
  762. color: #999999;
  763. font-weight:bold;
  764. text-decoration:none;
  765. }
  766. table a:active,
  767. table a:hover {
  768. color: #bd5a35;
  769. text-decoration:underline;
  770. }
  771. table {
  772. color:#666;
  773. text-shadow: 1px 1px 0px #fff;
  774. background:#eaebec;
  775. border:#ccc 1px solid;
  776. margin-bottom: 20px;
  777. -moz-border-radius:2px;
  778. -webkit-border-radius:2px;
  779. border-radius:2px;
  780. }
  781. table img {
  782. max-width: inherit !important;
  783. }
  784. table th {
  785. padding:15px 20px;
  786. border-top:1px solid #ccc;
  787. border-bottom:1px solid #e0e0e0;
  788. background: #ededed;
  789. background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
  790. background: -moz-linear-gradient(top, #ededed, #ebebeb);
  791. }
  792. table th:first-child{
  793. text-align: left;
  794. padding-left:20px;
  795. }
  796. table tr:first-child th:first-child{
  797. -moz-border-radius-topleft:3px;
  798. -webkit-border-top-left-radius:3px;
  799. border-top-left-radius:3px;
  800. }
  801. table tr:first-child th:last-child{
  802. -moz-border-radius-topright:3px;
  803. -webkit-border-top-right-radius:3px;
  804. border-top-right-radius:3px;
  805. }
  806. table tr{
  807. padding-left:12px;
  808. }
  809. table tr td:first-child{
  810. text-align: left;
  811. padding-left:12px;
  812. border-left: 0;
  813. }
  814. table tr td {
  815. padding:12px;
  816. border-bottom:1px solid #e0e0e0;
  817. border-left: 1px solid #e0e0e0;
  818. background: #fafafa;
  819. background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  820. background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
  821. }
  822. table tr td.value input {
  823. margin-bottom: 0;
  824. }
  825. table tr.even td{
  826. background: #f6f6f6;
  827. background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
  828. background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
  829. }
  830. table tr:last-child td:first-child{
  831. -moz-border-radius-bottomleft:3px;
  832. -webkit-border-bottom-left-radius:3px;
  833. border-bottom-left-radius:3px;
  834. }
  835. table tr:last-child td:last-child{
  836. -moz-border-radius-bottomright:3px;
  837. -webkit-border-bottom-right-radius:3px;
  838. border-bottom-right-radius:3px;
  839. }
  840. table tr:hover td{
  841. background: #f2f2f2;
  842. background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
  843. background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
  844. }
  845. {% endif %}
  846.  
  847. table tr.order_summary td.label { text-align: right;}
  848.  
  849. /* #Misc
  850. ================================================== */
  851. .remove{ color: {{ settings.regular_color }}; }
  852. .half-bottom { margin-bottom: 10px !important; }
  853. .add-bottom { margin-bottom: 20px !important; }
  854. .right { float:right; position: relative; }
  855. .left { float: left; }
  856. .center { text-align: center; }
  857. .relative { position: relative; }
  858. .align_right { text-align:right }
  859. .align_left { text-align: left; }
  860. .container div.mobile_only { display:none; }
  861. .no_border { border: none !important; }
  862. .extra_padding { padding-top: 4px; }
  863. div.hidden { display: none; }
  864. #grid .column,
  865. #grid .columns {
  866. background: #ddd;
  867. height: 25px;
  868. line-height: 25px;
  869. margin-bottom: 10px;
  870. text-align: center;
  871. text-transform: uppercase;
  872. color: #555;
  873. font-size: 12px;
  874. font-weight: bold;
  875. -moz-border-radius: 2px;
  876. -webkit-border-radius: 2px;
  877. border-radius: 2px; }
  878. #grid .column:hover,
  879. #grid .columns:hover {
  880. background: #bbb;
  881. color: #333; }
  882. #grid .example-grid { overflow: hidden; }
  883. /* #Site Styles
  884. ================================================== */
  885. div.container {
  886. margin: 0 auto;
  887. padding: 20px 0;
  888. }
  889. div.content {
  890. padding: 15px 0px 0px 0px;
  891. {% if settings.shop_use_content_bg_color %}
  892. background-color: {{ settings.shop_content_bg_color }};
  893. {% endif %}
  894. }
  895. .logo a {
  896. margin: 0;
  897. padding-top: 5px;
  898. display:block;
  899. }
  900. div.section {
  901. margin: 10px 0;
  902. }
  903. .homepage_content {
  904. {% if settings.shop_use_home_page_content_bg_color %}
  905. background-color: {{ settings.shop_home_page_content_bg_color }};
  906. border-top: solid 1px {{ settings.home_page_border_color }};
  907. border-bottom: solid 1px {{ settings.home_page_border_color }};
  908. {% endif %}
  909. }
  910. div.product_section {
  911. margin: 5px 0;
  912. }
  913. .breadcrumb {
  914. margin-bottom: 1em;
  915. }
  916. #category {
  917. width: 100%;
  918. }
  919. .featured_content p {
  920. margin-bottom: 0;
  921. }
  922. .paginate {
  923. text-align:center;
  924. }
  925. .paginate span, a.tag {
  926. border: solid 1px {{ settings.border_color }};
  927. -webkit-border-radius: 4px;
  928. -khtml-border-radius: 4px;
  929. -moz-border-radius: 4px;
  930. -ms-border-radius: 4px;
  931. -o-border-radius: 4px;
  932. border-radius: 4px;
  933. margin: 10px 2px;
  934. padding: 5px 10px;
  935. display: inline-block;
  936. }
  937. a.tag {
  938. font-size: smaller;
  939. padding: 4px 6px;
  940. margin: 5px 2px 5px 0;
  941. }
  942. .featured_collections { margin-bottom: 10px }
  943. .paginate span:hover, a.tag:hover {
  944. color: {{ settings.link_hover_color }};
  945. }
  946. .paginate .current {
  947. background-color: #f2f2f2;
  948. }
  949. .paginate .deco {
  950. border: none;
  951. }
  952. .thumbnail {
  953. position: relative;
  954. text-align:center;
  955. margin-bottom: 1em;
  956. }
  957. .thumbnail a {
  958. display:block;
  959. padding-bottom:0.5em;
  960. color: {{ settings.regular_color }};
  961. }
  962. .thumbnail a:hover {
  963. color: {{ settings.link_color }};
  964. }
  965. .new {
  966. position: relative;
  967. display: inline;
  968. padding: 5px;
  969. -moz-border-radius: 2px;
  970. -webkit-border-radius: 2px;
  971. border-radius: 2px;
  972. font-size: 12px;
  973. }
  974. .thumbnail img {
  975. margin-bottom: 0.75em;
  976. }
  977. .thumbnail .price, .thumbnail .sold_out, .sold_out {
  978. font-weight: bold;
  979. color: {{ settings.regular_color }};
  980. }
  981. .thumbnail .sale, .sale {
  982. color: {{ settings.sale_color }};
  983. }
  984. .sale_banner, .new_banner {
  985. position: absolute;
  986. top: 0;
  987. background: {{ settings.sale_banner_color }};
  988. padding: 5px 15px;
  989. text-align: center;
  990. text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  991. color: #fff;
  992. }
  993. .new_banner {
  994. background: {{ settings.new_banner_color }};
  995. }
  996. .thumbnail .price, .thumbnail .title {
  997. display: block
  998. }
  999. .cart_price {
  1000. float: right;
  1001. text-align: right;
  1002. padding-left: 20px;
  1003. font-weight:bold;
  1004. display: none;
  1005. }
  1006. #estimated-shipping, .excluding_tax {
  1007. display: block;
  1008. }
  1009. .cart_image {
  1010. float:left;
  1011. margin-right: 20px;
  1012. }
  1013. .quantity_label {
  1014. display: none;
  1015. }
  1016. .price_total_text {
  1017. font-weight: normal;
  1018. display: none;
  1019. }
  1020. .was_price {
  1021. text-decoration: line-through;
  1022. color: {{ settings.was_price_color }};
  1023. font-style: italic;
  1024. text-shadow:none;
  1025. font-weight:normal;
  1026. }
  1027. .thumbnail .quick_shop {
  1028. display:none;
  1029. padding: 5px 0;
  1030. background-color: #888;
  1031. position: absolute;
  1032. width: 50%;
  1033. top: 0;
  1034. right: 0;
  1035. color: #fff;
  1036. -webkit-border-radius: 0px;
  1037. -moz-border-radius: 0px;
  1038. border-radius: 0px;
  1039. }
  1040. .thumbnail .quick_shop:hover {
  1041. color: {{ settings.btn_text_color }};
  1042. background-color: {{ settings.btn_color }};
  1043. }
  1044. .thumbnails a {
  1045. display:block;
  1046. margin-bottom: 1em;
  1047. }
  1048. .twittercont, .fancycount {
  1049. display: inline-block;
  1050. margin-left: 6px;
  1051. }
  1052. .facebookcont {
  1053. display: inline-block;
  1054. position: relative;
  1055. margin-left: 1px;
  1056. min-width: 88px;
  1057. }
  1058. a.fancybutton {
  1059. background:url({{ "fancy.png" | asset_url }}) no-repeat;
  1060. font:11px Arial,sans-serif;
  1061. text-indent:-9999em;
  1062. font-size:.01em;
  1063. color:#cd1f1f;
  1064. height:20px;
  1065. width:30px;
  1066. display: inline-block;
  1067. margin-left: -9px;
  1068. position: relative;
  1069. top: -20px;
  1070. }
  1071. a.pinterestcount {
  1072. background:url({{ "pinit.png" | asset_url }}) no-repeat;
  1073. font:11px Arial,sans-serif;
  1074. text-indent:-9999em;
  1075. font-size:.01em;
  1076. color:#cd1f1f;
  1077. height:20px;
  1078. width:41px;
  1079. background-position:0 0;
  1080. display: inline-block;
  1081. margin-left: 2px;
  1082. position: relative;
  1083. top: -20px;
  1084. }
  1085. a.pinterestcount:hover{
  1086. background-position:0 -21px;
  1087. }
  1088. a.pinterestcount:active{
  1089. background-position:0 -42px;
  1090. }
  1091. .arrow {
  1092. font-size: smaller;
  1093. position: relative;
  1094. top: -1px;
  1095. left: 2px;
  1096. opacity: 0.6;
  1097. }
  1098. .modal {
  1099. margin: 10px 0;
  1100. display: none;
  1101. background-color: {{ settings.modal_background_color }};
  1102. }
  1103. .modal_product {
  1104. width: auto;
  1105. line-height:0px;
  1106. max-width: 940px;
  1107. }
  1108. .modal_product img {
  1109. cursor: pointer;
  1110. }
  1111. .modal_image {
  1112. text-align:center;
  1113. }
  1114. .modal a {
  1115. padding-bottom: 0;
  1116. }
  1117. .modal p.modal_price, p.modal_price {
  1118. font-size: 22px;
  1119. margin-bottom: 1em;
  1120. }
  1121. .modal form {
  1122. margin-bottom: 10px;
  1123. }
  1124. .modal a {
  1125. color: {{ settings.link_color }};
  1126. font-style: italic;
  1127. }
  1128. .modal a:hover {
  1129. color: {{ settings.link_hover_color }};
  1130. }
  1131. .notify_form .submit {
  1132. padding: 8px 8px !important;
  1133. }
  1134. .product_image_col {
  1135. margin-top: 15px;
  1136. text-align:center;
  1137. }
  1138. .meta {
  1139. font-size: 13px;
  1140. }
  1141. .meta p {
  1142. font-size: 13px;
  1143. margin-bottom: 0px;
  1144. }
  1145. p.meta {
  1146. margin-bottom: 10px;
  1147. }
  1148. .comment-body p.meta {
  1149. margin-bottom: 5px;
  1150. }
  1151. .sidebar_title {
  1152. margin-bottom: 0;
  1153. }
  1154. .blog_list {
  1155. margin-left: 0
  1156. }
  1157. .blog_list li {
  1158. list-style: none;
  1159. padding-left: 0;
  1160. }
  1161. .toggle span {
  1162. color: {{ settings.was_price_color }};
  1163. font-weight:bold;
  1164. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  1165. font-size:smaller;
  1166. float: right;
  1167. display: none;
  1168. }
  1169. .sidebar p {
  1170. font-size: {{ settings.regular_font_size | minus: 1 }}px;
  1171. }
  1172. .sidebar .search {
  1173. padding-top: 8px;
  1174. }
  1175. .sidebar .search input {
  1176. width: 100%;
  1177. box-sizing: border-box;
  1178. -moz-box-sizing:border-box;
  1179. }
  1180. .meta .label, .label {
  1181. color: {{ settings.was_price_color }};
  1182. }
  1183. .blog_meta, .blog_meta a {
  1184. color: {{ settings.was_price_color }};
  1185. }
  1186. .blog_meta a:hover {
  1187. color: {{ settings.link_hover_color }};
  1188. }
  1189. .blog_meta p {
  1190. padding-right: 40px;
  1191. }
  1192. .container .blog_content {
  1193. padding-left: 40px;
  1194. border-left: solid 1px {{ settings.border_color }};
  1195. }
  1196. .count {
  1197. font-style: normal;
  1198. font-size: 13px;
  1199. }
  1200. #tag_filter {
  1201. margin-bottom: 0;
  1202. float: right;
  1203. width: auto;
  1204. display: none;
  1205. }
  1206. .checkout {
  1207. display:block;
  1208. float:right;
  1209. margin-top: 0px;
  1210. }
  1211. .or {
  1212. font-size:smaller;
  1213. font-style: italic;
  1214. padding: 0 10px;
  1215. }
  1216. input.quantity {
  1217. width: 35px;
  1218. display: inline;
  1219. margin-bottom: 1em;
  1220. }
  1221. .inline_purchase {
  1222. display: inline-block;
  1223. margin-left: 20px;
  1224. margin-top: 22px;
  1225. }
  1226.  
  1227. .subtotal {
  1228. text-align:right;
  1229. }
  1230. .mobile_left {
  1231. text-align: right;
  1232. }
  1233. h4.title a.subscribe {
  1234. background: url("{{ 'rss-icon.png' | asset_url }}") no-repeat 0 4px;
  1235. display: inline;
  1236. padding: 5px 10px 5px 32px;
  1237. font-size: smaller;
  1238. }
  1239. h4.title a.subscribe:hover {
  1240. background-position: 0 -121px;
  1241. }
  1242. h4.title a.twitter {
  1243. background: url("{{ 'twitter-icon.png' | asset_url }}") no-repeat 0 4px;
  1244. display: inline;
  1245. padding: 5px 0px 5px 32px;
  1246. font-size: smaller;
  1247. }
  1248. h4.title a.twitter:hover {
  1249. background-position: 0 -121px;
  1250. }
  1251. div.article {
  1252. margin-bottom: 35px;
  1253. }
  1254. .comment {
  1255. margin-bottom:20px;
  1256. }
  1257. .comment-body h6 {
  1258. padding-bottom: 0.25em;
  1259. }
  1260. .social_buttons {
  1261. height: 22px;
  1262. }
  1263. .gravatar {
  1264. width: 100px !important;
  1265. }
  1266. .gravatar img {
  1267. width: 80px;
  1268. height: 80px;
  1269. margin-bottom: 15px;
  1270. -webkit-border-radius: 40px;
  1271. -khtml-border-radius: 40px;
  1272. -moz-border-radius: 40px;
  1273. -ms-border-radius: 40px;
  1274. -o-border-radius: 40px;
  1275. border-radius: 40px;
  1276. }
  1277. .red {
  1278. color: #C33;
  1279. }
  1280. .address p {
  1281. margin-bottom: 5px;
  1282. }
  1283. div#disqus_thread ul, div#disqus_thread li {
  1284. border: none;
  1285. }
  1286. .search_page {
  1287. padding: 40px 0 60px 0;
  1288. }
  1289. .search_page_text {
  1290. text-align: right;
  1291. }
  1292. .tweet .columns {
  1293. overflow: hidden;
  1294. -ms-word-break: break-all;
  1295. word-break: break-all;
  1296. word-break: break-word;
  1297. -webkit-hyphens: auto;
  1298. -moz-hyphens: auto;
  1299. hyphens: auto;
  1300. }
  1301. /* #Footer
  1302. ================================================== */
  1303. div.footer {
  1304. background-color: {{ settings.footer_color }};
  1305. {% if settings.use_custom_footer_image %}
  1306. background-image: url("{{ 'custom_footer.png' | asset_url }}");
  1307. {% endif %}
  1308. {% if settings.footer_border_color != blank %}
  1309. border-top: solid 1px {{ settings.footer_border_color }};
  1310. {% endif %}
  1311.  
  1312. font-size: {{ settings.footer_font_size }}px;
  1313. line-height: 1.7em;
  1314. color: {{ settings.footer_text_color }};
  1315. padding: 10px 0;
  1316. margin-top: 15px;
  1317. }
  1318. .footer p {
  1319. margin-bottom: 10px;
  1320. }
  1321. .footer a {
  1322. color: {{ settings.footer_link_color }};
  1323. }
  1324. .footer a:hover {
  1325. color: {{ settings.footer_link_color_hover }};
  1326. }
  1327. .contact-form {
  1328. margin-bottom: 0;
  1329. }
  1330. form.search {
  1331. margin-bottom: 0px;
  1332. position: relative;
  1333. margin-right: -125px;
  1334. }
  1335. input.search_box {
  1336. padding: 6px 6px 6px 28px;
  1337. background: #fff url({{ 'search.jpg' | asset_url }}) no-repeat 6px;
  1338. border: solid 1px {{ settings.border_color }};
  1339. -webkit-border-radius: 4px;
  1340. -khtml-border-radius: 4px;
  1341. -moz-border-radius: 4px;
  1342. -ms-border-radius: 4px;
  1343. -o-border-radius: 4px;
  1344. border-radius: 4px;
  1345. margin-bottom: 0px;
  1346. }
  1347. .search_box:focus {
  1348. background-color: #fff;
  1349. }
  1350. .payment_methods {
  1351. margin: 4px 0 6px 0;
  1352. }
  1353. .payment_methods img {
  1354. padding-right: 4px;
  1355. height: 24px;
  1356. width: 40px;
  1357. }
  1358. .credits_right {
  1359. text-align: right;
  1360. }
  1361. .icons {
  1362. list-style: none outside;
  1363. margin-left: 0;
  1364. border: 0;
  1365. }
  1366. .headline_icons {
  1367. top: 8px;
  1368. }
  1369. .icons li {
  1370. border: 0;
  1371. float: left;
  1372. line-height: 24px;
  1373. margin-right: 8px;
  1374. padding-top: 0;
  1375. }
  1376. .icons li a {
  1377. {% if settings.social_icons == 'light' %}
  1378. background: url({{ "icons_light.png" | asset_url }}) no-repeat;
  1379. {% else %}
  1380. background: url({{ "icons.png" | asset_url }}) no-repeat;
  1381. {% endif %}
  1382. display: inline-block;
  1383. opacity: 0.8;
  1384. -webkit-transition: opacity .2s ease-in-out;
  1385. -moz-transition: opacity .2s ease-in-out;
  1386. -o-transition: opacity .2s ease-in-out;
  1387. transition: opacity .2s ease-in-out;
  1388. cursor: pointer;
  1389. text-indent: -9999px;
  1390. width:25px;height:25px;background-position:left bottom;
  1391. }
  1392. .headline_icons li a, .cart_icons li a {
  1393. background: url({{ "icons.png" | asset_url }}) no-repeat;
  1394. }
  1395. .icons li a:hover {
  1396. background-color:transparent;
  1397. opacity: 1;
  1398. }
  1399.  
  1400. .icons .twitter a{background-position:-25px bottom}
  1401. .icons .facebook a{background-position:-50px bottom}
  1402. .icons .vimeo a{background-position:-75px bottom}
  1403. .icons .flickr a{background-position:-100px bottom}
  1404. .icons .delicious a{background-position:-150px bottom}
  1405. .icons .linkedin a{background-position:-200px bottom}
  1406. .icons .youtube a{background-position:-225px bottom}
  1407. .icons .google a{background-position:-250px bottom}
  1408. .icons .skype a{background-position:-325px bottom}
  1409. .icons .pinterest a{background-position:-500px bottom}
  1410. .icons .tumblr a{background-position:-625px bottom}
  1411. .icons .instagram a{background-position:-650px bottom}
  1412. .icons .rss a{background-position:-675px bottom}
  1413. .icons .close a{background-position:-700px bottom;position:relative; top:-10px; right: -8px; opacity: 0.6;}
  1414.  
  1415. .footer ul {
  1416. list-style: none outside;
  1417. margin-left: 0;
  1418. }
  1419. .footer li {
  1420. padding: 6px 0;
  1421. list-style: none outside none;
  1422. margin-bottom: 0;
  1423. }
  1424. .footer ul.footer_menu li:first-child {
  1425. margin-left: 0;
  1426. padding-top: 0;
  1427. }
  1428.  
  1429. /* #jQuery FlexSlider v2.1
  1430. ================================================== */
  1431.  
  1432. /* Browser Resets */
  1433. .flex-container a:active,
  1434. .flexslider a:active,
  1435. .flex-container a:focus,
  1436. .flexslider a:focus {outline: none;}
  1437. .slides,
  1438. .flex-control-nav,
  1439. .flex-direction-nav, .flex-direction-nav li {margin: 0; padding: 0; list-style: none; border: none;}
  1440. ul.slides li {border:none; padding: 0; margin-bottom: 0; position: relative;}
  1441.  
  1442. /* FlexSlider Necessary Styles
  1443. *********************************/
  1444. .flexslider {margin: 0; padding: 0;}
  1445. .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
  1446. .flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}
  1447. .flexslider .slides img {
  1448. display: block;
  1449. max-width: 100%; height: auto; margin: 0 auto;
  1450. }
  1451. {% if settings.slideshow_stretch %}
  1452. #homepage_slider .slides img {
  1453. width: 100%;
  1454. }
  1455. {% endif %}
  1456.  
  1457. .flex-pauseplay span {text-transform: capitalize;}
  1458.  
  1459. /* Clearfix for the .slides element */
  1460. .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
  1461. html[xmlns] .slides {display: block;}
  1462. * html .slides {height: 1%;}
  1463.  
  1464. /* No JavaScript Fallback */
  1465. /* If you are not using another script, such as Modernizr, make sure you
  1466. * include js that eliminates this class on page load */
  1467. .no-js .slides > li:first-child {display: block;}
  1468.  
  1469.  
  1470. /* FlexSlider Default Theme
  1471. *********************************/
  1472. .flexslider {position: relative; zoom: 1; clear:both; overflow: hidden}
  1473. .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
  1474. .loading .flex-viewport {max-height: 300px;}
  1475. .flexslider .slides {zoom: 1;}
  1476. .flexslider .slides li {text-align: center}
  1477. .carousel li {margin-right: 5px;border: 0}
  1478.  
  1479. .flex-caption {margin:0; width: 100%; position: absolute; top: 25%; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7)}
  1480. .flexslider .headline { font-size: {{ settings.slideshow_headline_size }}px; margin-bottom: 0.2em; line-height: {{ settings.slideshow_headline_size | plus: 5 }}px; font-weight: {{ settings.slideshow_headline_weight }} }
  1481. .flexslider p.subtitle { font-size: {{ settings.slideshow_subtitle_size }}px; line-height: {{ settings.slideshow_subtitle_size | plus: 5 }}px; font-weight: {{ settings.slideshow_subtitle_weight }} }
  1482.  
  1483. /* Direction Nav */
  1484. .flex-direction-nav {*height: 0;}
  1485. .flex-direction-nav a {width: 60px; height: 60px; margin: -20px 0 0; display: block; background: url({{ 'arrow_sprite.png' | asset_url }}) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
  1486. .flex-direction-nav .flex-next {background-position: 0 -120px; right: -36px; }
  1487. .flex-direction-nav .flex-prev {background-position: 0 -60px; left: -36px;}
  1488. .flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
  1489. .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
  1490. .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
  1491. .flex-direction-nav .flex-disabled {opacity: .3 !important; filter:alpha(opacity=30); cursor: default;}
  1492.  
  1493. /* Control Nav */
  1494. .flex-control-nav {position: absolute; bottom: 20px; right: 3%; width: auto;}
  1495. .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
  1496. .flex-control-nav li:first-child {margin: 0;}
  1497. .flex-control-nav li a {
  1498. width: 13px;
  1499. height: 13px;
  1500. display: block;
  1501. background: rgba(255,255,255,0.3);
  1502. cursor: pointer;
  1503. text-indent: -9999px;
  1504. box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
  1505. -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;
  1506. }
  1507. .flex-control-nav li a.flex-active {
  1508. background: rgba(255,255,255,0.7);
  1509. cursor: default;
  1510. }
  1511. .flex-control-paging li a:hover { background: rgba(255,255,255,0.7); }
  1512. .flex-control-thumbs {width: 100%; position: absolute; bottom: -40px; text-align: center;}
  1513. .flex-control-thumbs li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
  1514.  
  1515. .flex-control-thumbs {position: static; overflow: hidden;}
  1516. .flex-control-thumbs li, .flex-control-thumbs li:first-child {width: 22%; vertical-align: top; margin: 15px 4% 0 0;}
  1517. .flex-control-thumbs li:nth-child(4n) {margin: 15px 0 0; }
  1518. .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
  1519. .flex-control-thumbs img:hover {opacity: 1;}
  1520. .flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
  1521. #product_slider .flex-active-slide a:hover {cursor: -webkit-zoom-in; cursor: -moz-zoom-in;}
  1522.  
  1523. /* #Fancybox
  1524. ================================================== */
  1525. /*! fancyBox v2.1.2 fancyapps.com | fancyapps.com/fancybox/#license */
  1526. .fancybox-wrap,
  1527. .fancybox-skin,
  1528. .fancybox-outer,
  1529. .fancybox-inner,
  1530. .fancybox-image,
  1531. .fancybox-wrap iframe,
  1532. .fancybox-wrap object,
  1533. .fancybox-nav,
  1534. .fancybox-nav span,
  1535. .fancybox-tmp
  1536. {
  1537. padding: 0;
  1538. margin: 0;
  1539. border: 0;
  1540. outline: none;
  1541. vertical-align: top;
  1542. }
  1543.  
  1544. .fancybox-wrap {
  1545. position: absolute;
  1546. top: 0;
  1547. left: 0;
  1548. z-index: 8020;
  1549. }
  1550.  
  1551. .fancybox-skin {
  1552. position: relative;
  1553. background-color: {{ settings.modal_background_color }};
  1554. color: #444;
  1555. text-shadow: none;
  1556. -webkit-border-radius: 4px;
  1557. -moz-border-radius: 4px;
  1558. border-radius: 4px;
  1559. }
  1560.  
  1561. .fancybox-opened {
  1562. z-index: 8030;
  1563. }
  1564.  
  1565. .fancybox-opened .fancybox-skin {
  1566. -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  1567. -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  1568. box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  1569. }
  1570.  
  1571. .fancybox-outer, .fancybox-inner {
  1572. position: relative;
  1573. }
  1574.  
  1575. .fancybox-inner {
  1576. overflow: hidden;
  1577. }
  1578.  
  1579. .fancybox-type-iframe .fancybox-inner {
  1580. -webkit-overflow-scrolling: touch;
  1581. }
  1582.  
  1583. .fancybox-error {
  1584. color: #444;
  1585. font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  1586. margin: 0;
  1587. padding: 15px;
  1588. white-space: nowrap;
  1589. }
  1590.  
  1591. .fancybox-image, .fancybox-iframe {
  1592. display: block;
  1593. width: 100%;
  1594. height: 100%;
  1595. }
  1596.  
  1597. .fancybox-image {
  1598. max-width: 100%;
  1599. max-height: 100%;
  1600. }
  1601.  
  1602. #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  1603. background-image: url('{{ 'arrow_sprite.png' | asset_url }}');
  1604. background-position: 0 -180px;
  1605. }
  1606.  
  1607. #fancybox-loading {
  1608. position: fixed;
  1609. top: 50%;
  1610. left: 50%;
  1611. margin-top: -22px;
  1612. margin-left: -22px;
  1613. background-position: 0 -306px;
  1614. opacity: 0.8;
  1615. cursor: pointer;
  1616. z-index: 8060;
  1617. -webkit-border-radius: 8px;
  1618. -khtml-border-radius: 8px;
  1619. -moz-border-radius: 8px;
  1620. -ms-border-radius: 8px;
  1621. -o-border-radius: 8px;
  1622. border-radius: 8px;
  1623. }
  1624.  
  1625. #fancybox-loading div {
  1626. width: 44px;
  1627. height: 44px;
  1628. background: url('{{ 'fancybox_loading.gif' | asset_url }}') center center no-repeat;
  1629. }
  1630.  
  1631. .fancybox-close {
  1632. position: absolute;
  1633. top: 0px;
  1634. right: 0px;
  1635. width: 30px;
  1636. height: 30px;
  1637. cursor: pointer;
  1638. z-index: 8040;
  1639. background-position: 0 -30px;
  1640. -webkit-border-top-right-radius: 4px;
  1641. -moz-border-radius-topright: 4px;
  1642. border-top-right-radius: 4px;
  1643. }
  1644.  
  1645. .gallery .fancybox-close {
  1646. -webkit-border-top-right-radius: 0px;
  1647. -moz-border-radius-topright: 0px;
  1648. border-top-right-radius: 0px;
  1649. }
  1650.  
  1651. .fancybox-close:hover {
  1652. background-position: 0 0;
  1653. }
  1654.  
  1655. .fancybox-nav {
  1656. position: absolute;
  1657. top: 0;
  1658. width: 40%;
  1659. height: 100%;
  1660. cursor: pointer;
  1661. text-decoration: none;
  1662. background: transparent url('{{ 'blank.gif' | asset_url }}'); /* helps IE */
  1663. -webkit-tap-highlight-color: rgba(0,0,0,0);
  1664. z-index: 8040;
  1665. }
  1666.  
  1667. .fancybox-prev {
  1668. left: 0;
  1669. }
  1670.  
  1671. .fancybox-next {
  1672. right: 0;
  1673. }
  1674.  
  1675. .fancybox-nav span {
  1676. position: absolute;
  1677. top: 50%;
  1678. width: 60px;
  1679. height: 60px;
  1680. margin-top: -18px;
  1681. cursor: pointer;
  1682. z-index: 8040;
  1683. visibility: hidden;
  1684. }
  1685.  
  1686. .fancybox-prev span {
  1687. left: 10px;
  1688. background-position: 0 -180px;
  1689. }
  1690.  
  1691. .fancybox-prev span:hover {
  1692. left: 10px;
  1693. background-position: 0 -60px;
  1694. }
  1695.  
  1696. .fancybox-next span {
  1697. right: 10px;
  1698. background-position: 0 -240px;
  1699. }
  1700.  
  1701. .fancybox-next span:hover {
  1702. right: 10px;
  1703. background-position: 0 -120px;
  1704. }
  1705.  
  1706. .fancybox-nav:hover span {
  1707. visibility: visible;
  1708. }
  1709.  
  1710. .fancybox-tmp {
  1711. position: absolute;
  1712. top: -9999px;
  1713. left: -9999px;
  1714. visibility: hidden;
  1715. }
  1716.  
  1717. /* Overlay helper */
  1718.  
  1719. .fancybox-lock {
  1720. overflow: hidden;
  1721. }
  1722.  
  1723. .fancybox-overlay {
  1724. position: absolute;
  1725. top: 0;
  1726. left: 0;
  1727. overflow: hidden;
  1728. display: none;
  1729. z-index: 8010;
  1730. background: url({{ 'fancybox_overlay.png' | asset_url }});
  1731. }
  1732.  
  1733. .fancybox-overlay-fixed {
  1734. position: fixed;
  1735. bottom: 0;
  1736. right: 0;
  1737. }
  1738.  
  1739. .fancybox-lock .fancybox-overlay {
  1740. overflow: auto;
  1741. overflow-y: scroll;
  1742. }
  1743.  
  1744. /* Title helper */
  1745.  
  1746. .fancybox-title {
  1747. visibility: hidden;
  1748. font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  1749. position: relative;
  1750. text-shadow: none;
  1751. z-index: 8050;
  1752. }
  1753.  
  1754. .fancybox-opened .fancybox-title {
  1755. visibility: visible;
  1756. }
  1757.  
  1758. .fancybox-title-float-wrap {
  1759. position: absolute;
  1760. bottom: 0;
  1761. right: 50%;
  1762. margin-bottom: -35px;
  1763. z-index: 8050;
  1764. text-align: center;
  1765. }
  1766.  
  1767. .fancybox-title-float-wrap .child {
  1768. display: inline-block;
  1769. margin-right: -100%;
  1770. padding: 2px 20px;
  1771. background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  1772. background: rgba(0, 0, 0, 0.8);
  1773. -webkit-border-radius: 15px;
  1774. -moz-border-radius: 15px;
  1775. border-radius: 15px;
  1776. text-shadow: 0 1px 2px #222;
  1777. color: #FFF;
  1778. font-weight: bold;
  1779. line-height: 24px;
  1780. white-space: nowrap;
  1781. }
  1782.  
  1783. .fancybox-title-outside-wrap {
  1784. position: relative;
  1785. margin-top: 10px;
  1786. color: #fff;
  1787. }
  1788.  
  1789. .fancybox-title-inside-wrap {
  1790. padding-top: 10px;
  1791. }
  1792.  
  1793. .fancybox-title-over-wrap {
  1794. position: absolute;
  1795. bottom: 0;
  1796. left: 0;
  1797. color: #fff;
  1798. padding: 10px;
  1799. background: #000;
  1800. background: rgba(0, 0, 0, .8);
  1801. }
  1802.  
  1803. /*
  1804. Cloud Zoom CSS. (c)2012 Star Plugins.
  1805. */
  1806. .cloudzoom-lens {
  1807. border:none;
  1808. border:1px solid #888;
  1809. width:225px;
  1810. height:175px;
  1811. box-shadow: -0px -0px 10px rgba(0,0,0,0.40);
  1812. cursor:pointer;
  1813. z-index: 10;
  1814. }
  1815. .cloudzoom-zoom {
  1816. border:1px solid #888;
  1817. box-shadow: -0px -0px 10px rgba(0,0,0,0.40);
  1818. background-color: {{ settings.shop_bg_color }};
  1819. }
  1820. .cloudzoom-zoom-inside {
  1821. border:none;
  1822. box-shadow:none;
  1823. }
  1824. .cloudzoom-caption {
  1825. display:none;
  1826. text-align: left;
  1827. background-color:#000;
  1828. color:#fff;
  1829. font-weight:bold;
  1830. padding:10px;
  1831. font-family: sans-serif;
  1832. font-size:11px;
  1833. }
  1834. .cloudzoom-blank {
  1835. background-image:url('{{ 'blank.gif' | asset_url }}');
  1836. }
  1837. div.cloudzoom-ajax-loader {
  1838. background: #000 url('{{ 'fancybox_loading.gif' | asset_url }}') center center no-repeat;
  1839. width: 44px;
  1840. height: 44px;
  1841. opacity: 0.6;
  1842. -webkit-border-radius: 8px;
  1843. -khtml-border-radius: 8px;
  1844. -moz-border-radius: 8px;
  1845. -ms-border-radius: 8px;
  1846. -o-border-radius: 8px;
  1847. border-radius: 8px;
  1848. }
  1849. .cloudzoom-lens + div { display: none !important }
  1850.  
  1851. /*
  1852. * Layout
  1853. * Skeleton V1.2
  1854. * Copyright 2011, Dave Gamache
  1855. * www.getskeleton.com
  1856. * Free to use under the MIT license.
  1857. * http://www.opensource.org/licenses/mit-license.php
  1858. * 6/20/2012
  1859. */
  1860. /* Table of Contents
  1861. ==================================================
  1862. #Base 960 Grid
  1863. #Tablet (Portrait)
  1864. #Mobile (Portrait)
  1865. #Mobile (Landscape)
  1866. #Clearing
  1867. #Media Queries */
  1868. /* #Base 960 Grid
  1869. ================================================== */
  1870. .container { position: relative; width: 1000px; margin: 0 auto; padding: 0; }
  1871. .container .column,
  1872. .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
  1873. .row { margin-bottom: 20px; }
  1874.  
  1875. /* Nested Column Classes */
  1876. .column.alpha, .columns.alpha { margin-left: 0; }
  1877. .column.omega, .columns.omega { margin-right: 0; }
  1878. .column.omega, .columns.beta { margin-left: 10px; }
  1879.  
  1880. /* Base Grid */
  1881. .container .one.column,
  1882. .container .one.columns { width: 40px; }
  1883. .container .two.columns { width: 100px; }
  1884. .container .three.columns { width: 160px; }
  1885. .container .four.columns { width: 220px; }
  1886. .container .five.columns { width: 280px; }
  1887. .container .six.columns { width: 340px; }
  1888. .container .seven.columns { width: 400px; }
  1889. .container .eight.columns { width: 460px; }
  1890. .container .nine.columns { width: 520px; }
  1891. .container .ten.columns { width: 580px; }
  1892. .container .eleven.columns { width: 640px; }
  1893. .container .twelve.columns { width: 700px; }
  1894. .container .thirteen.columns { width: 760px; }
  1895. .container .fourteen.columns { width: 820px; }
  1896. .container .fifteen.columns { width: 880px; }
  1897. .container .sixteen.columns { width: 940px; }
  1898. <!--position of the main logo -->
  1899. .container .one-third.column { width: 300px; padding-top: 12px;}
  1900. .container .two-thirds.column { width: 620px; }
  1901.  
  1902. /* Offsets */
  1903. .container .offset-by-one { padding-left: 60px; }
  1904. .container .offset-by-two { padding-left: 120px; }
  1905. .container .offset-by-three { padding-left: 180px; }
  1906. .container .offset-by-four { padding-left: 240px; }
  1907. .container .offset-by-five { padding-left: 300px; }
  1908. .container .offset-by-six { padding-left: 360px; }
  1909. .container .offset-by-seven { padding-left: 420px; }
  1910. .container .offset-by-eight { padding-left: 480px; }
  1911. .container .offset-by-nine { padding-left: 540px; }
  1912. .container .offset-by-ten { padding-left: 600px; }
  1913. .container .offset-by-eleven { padding-left: 660px; }
  1914. .container .offset-by-twelve { padding-left: 720px; }
  1915. .container .offset-by-thirteen { padding-left: 780px; }
  1916. .container .offset-by-fourteen { padding-left: 840px; }
  1917. .container .offset-by-fifteen { padding-left: 900px; }
  1918.  
  1919.  
  1920.  
  1921. /* #Tablet (Portrait)
  1922. ================================================== */
  1923.  
  1924. /* Note: Design for a width of 768px */
  1925.  
  1926. @media only screen and (min-width: 768px) and (max-width: 959px) {
  1927. .container { width: 768px; }
  1928. .container .column,
  1929. .container .columns { margin-left: 10px; margin-right: 10px; }
  1930. .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
  1931. .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
  1932. .alpha.omega { margin-left: 0; margin-right: 0; }
  1933.  
  1934. .container .one.column,
  1935. .container .one.columns { width: 28px; }
  1936. .container .two.columns { width: 76px; }
  1937. .container .three.columns { width: 124px; }
  1938. .container .four.columns { width: 172px; }
  1939. .container .five.columns { width: 220px; }
  1940. .container .six.columns { width: 268px; }
  1941. .container .seven.columns { width: 316px; }
  1942. .container .eight.columns { width: 364px; }
  1943. .container .nine.columns { width: 412px; }
  1944. .container .ten.columns { width: 460px; }
  1945. .container .eleven.columns { width: 508px; }
  1946. .container .twelve.columns { width: 556px; }
  1947. .container .thirteen.columns { width: 604px; }
  1948. .container .fourteen.columns { width: 652px; }
  1949. .container .fifteen.columns { width: 700px; }
  1950. .container .sixteen.columns { width: 748px; }
  1951.  
  1952. .container .one-third.column { width: 236px; }
  1953. .container .two-thirds.column { width: 492px; }
  1954.  
  1955. /* Offsets */
  1956. .container .offset-by-one { padding-left: 48px; }
  1957. .container .offset-by-two { padding-left: 96px; }
  1958. .container .offset-by-three { padding-left: 144px; }
  1959. .container .offset-by-four { padding-left: 192px; }
  1960. .container .offset-by-five { padding-left: 240px; }
  1961. .container .offset-by-six { padding-left: 288px; }
  1962. .container .offset-by-seven { padding-left: 336px; }
  1963. .container .offset-by-eight { padding-left: 384px; }
  1964. .container .offset-by-nine { padding-left: 432px; }
  1965. .container .offset-by-ten { padding-left: 480px; }
  1966. .container .offset-by-eleven { padding-left: 528px; }
  1967. .container .offset-by-twelve { padding-left: 576px; }
  1968. .container .offset-by-thirteen { padding-left: 624px; }
  1969. .container .offset-by-fourteen { padding-left: 672px; }
  1970. .container .offset-by-fifteen { padding-left: 720px; }
  1971. }
  1972.  
  1973.  
  1974. /* #Mobile (Portrait)
  1975. ================================================== */
  1976.  
  1977. /* Note: Design for a width of 320px */
  1978.  
  1979. @media only screen and (max-width: 767px) {
  1980. .container { width: 300px; }
  1981. .container .columns,
  1982. .container .column { margin: 0; }
  1983.  
  1984. .container .one.column,
  1985. .container .one.columns,
  1986. .container .two.columns,
  1987. .container .three.columns,
  1988. .container .four.columns,
  1989. .container .five.columns,
  1990. .container .six.columns,
  1991. .container .seven.columns,
  1992. .container .eight.columns,
  1993. .container .nine.columns,
  1994. .container .ten.columns,
  1995. .container .eleven.columns,
  1996. .container .twelve.columns,
  1997. .container .thirteen.columns,
  1998. .container .fourteen.columns,
  1999. .container .fifteen.columns,
  2000. .container .sixteen.columns,
  2001. .container .one-third.column,
  2002. .container .two-thirds.column { width: 300px; }
  2003.  
  2004. .container .logo.column { width: 200px; }
  2005. .container .nav.column { width: 90px; margin-left: 10px; }
  2006.  
  2007. /* Offsets */
  2008. .container .offset-by-one,
  2009. .container .offset-by-two,
  2010. .container .offset-by-three,
  2011. .container .offset-by-four,
  2012. .container .offset-by-five,
  2013. .container .offset-by-six,
  2014. .container .offset-by-seven,
  2015. .container .offset-by-eight,
  2016. .container .offset-by-nine,
  2017. .container .offset-by-ten,
  2018. .container .offset-by-eleven,
  2019. .container .offset-by-twelve,
  2020. .container .offset-by-thirteen,
  2021. .container .offset-by-fourteen,
  2022. .container .offset-by-fifteen { padding-left: 0; }
  2023.  
  2024. }
  2025.  
  2026.  
  2027. /* #Mobile (Landscape)
  2028. ================================================== */
  2029.  
  2030. /* Note: Design for a width of 480px */
  2031.  
  2032. @media only screen and (min-width: 480px) and (max-width: 767px) {
  2033. .container { width: 420px; }
  2034. .container .columns,
  2035. .container .column { margin: 0; }
  2036.  
  2037. .container .one.column,
  2038. .container .one.columns,
  2039. .container .two.columns,
  2040. .container .three.columns,
  2041. .container .four.columns,
  2042. .container .five.columns,
  2043. .container .six.columns,
  2044. .container .seven.columns,
  2045. .container .eight.columns,
  2046. .container .nine.columns,
  2047. .container .ten.columns,
  2048. .container .eleven.columns,
  2049. .container .twelve.columns,
  2050. .container .thirteen.columns,
  2051. .container .fourteen.columns,
  2052. .container .fifteen.columns,
  2053. .container .sixteen.columns,
  2054. .container .one-third.column,
  2055. .container .two-thirds.column { width: 420px; }
  2056.  
  2057. .container .logo.column { width: 200px; }
  2058. .container .nav.column { width: 210px; margin-left: 10px; }
  2059. }
  2060.  
  2061.  
  2062. /* #Clearing
  2063. ================================================== */
  2064.  
  2065. /* Self Clearing Goodness */
  2066. .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
  2067.  
  2068. /* Use clearfix class on parent to clear nested columns,
  2069. or wrap each row of columns in a <div class="row"> */
  2070. .clearfix:before,
  2071. .clearfix:after,
  2072. .row:before,
  2073. .row:after {
  2074. content: '\0020';
  2075. display: block;
  2076. overflow: hidden;
  2077. visibility: hidden;
  2078. width: 0;
  2079. height: 0; }
  2080. .row:after,
  2081. .clearfix:after {
  2082. clear: both; }
  2083. .row,
  2084. .clearfix {
  2085. zoom: 1; }
  2086.  
  2087. /* You can also use a <br class="clear" /> to clear columns */
  2088. .clear {
  2089. clear: both;
  2090. display: block;
  2091. overflow: hidden;
  2092. visibility: hidden;
  2093. width: 0;
  2094. height: 0;
  2095. }
  2096. /* #Media Queries
  2097. ================================================== */
  2098. /* Smaller than standard 960 (devices and browsers) */
  2099. @media only screen and (max-width: 959px) {
  2100. #contact_email {
  2101. width: 170px;
  2102. }
  2103. .collection_menu {
  2104. display: none;
  2105. }
  2106. #tag_filter {
  2107. display: block;
  2108. }
  2109. h1.collection_title_tags, div.collection_title_tags {
  2110. border-right: 0;
  2111. margin-right: 0;
  2112. padding-right: 0;
  2113. }
  2114. .cloudzoom-lens {
  2115. width:140px;
  2116. height:120px;
  2117. }
  2118. }
  2119. /* Tablet Portrait size to standard 960 (devices and browsers) */
  2120. @media only screen and (min-width: 768px) and (max-width: 959px) {
  2121. .nav ul li { padding: 0 0 0 10px; }
  2122. .flex-caption { top: 0; }
  2123. .or { display: none; }
  2124. }
  2125. /* All Mobile Sizes (devices and browser) */
  2126. @media only screen and (max-width: 767px) {
  2127. .toggle span {
  2128. display: block;
  2129. }
  2130. .toggle_list {
  2131. display: none;
  2132. }
  2133. select {
  2134. width:100%;
  2135. }
  2136. #contact_email {
  2137. width: 94%;
  2138. }
  2139. .search_page_text {
  2140. text-align: left;
  2141. }
  2142. a.button,
  2143. button,
  2144. .action_button,
  2145. a.action_button,
  2146. textarea {
  2147. width: 85%;
  2148. }
  2149.  
  2150. .flexslider a.action_button {
  2151. width: initial;
  2152. }
  2153.  
  2154. input[type="submit"],
  2155. input[type="reset"],
  2156. input[type="button"],
  2157. input.action_button[type="submit"],
  2158. input.action_button[type="button"],
  2159. #sign_up {
  2160. margin-left: 0;
  2161. width: 100%;
  2162. }
  2163.  
  2164. .cart_icons, .or {
  2165. display: none;
  2166. }
  2167. .credits_right {
  2168. text-align: left;
  2169. }
  2170. .container .column.thumbnail, .container .columns.thumbnail {
  2171. margin-top: 1em;
  2172. }
  2173. table[style] {
  2174. width:auto !important;
  2175. max-width:100% !important;
  2176. overflow: hidden;
  2177. }
  2178. tr, td {
  2179. display:block;
  2180. width:99% !important;
  2181. max-width:99% !important;
  2182. padding:0px !important;
  2183. border-left: 0 !important;
  2184. border-right: 0 !important;
  2185. }
  2186. tr {
  2187. padding-bottom: 6px !important;
  2188. }
  2189. td {
  2190. padding: 4px !important;
  2191. }
  2192. .title_column {
  2193. float:left;
  2194. }
  2195. .subtotal_amount {
  2196. text-align:right;
  2197. }
  2198. .mobile_left {
  2199. text-align:left;
  2200. }
  2201. .container div.mobile_only {
  2202. display:block;
  2203. }
  2204. .quantity_label {
  2205. display: inline;
  2206. }
  2207. .price_total {
  2208. text-align: right;
  2209. }
  2210. .price_total_text {
  2211. display:block;
  2212. }
  2213. .update_subtotal, .price_total, .remove_column, .checkout_table_header {
  2214. display: none;
  2215. }
  2216. .mobile_right {
  2217. text-align: right;
  2218. }
  2219. .quick_shop {
  2220. display: none !important;
  2221. }
  2222. .cart_price {
  2223. display: block;
  2224. margin-bottom: 0;
  2225. }
  2226. table tr th, table tr td {
  2227. padding: 2px;
  2228. }
  2229. input.action_button {
  2230. margin-bottom: 1em !important;
  2231. }
  2232. .multiple_product_images {
  2233. display: none;
  2234. }
  2235. .flex-caption {
  2236. top: 0;
  2237. }
  2238. .flex-caption .headline {
  2239. font-size: 1.5em;
  2240. line-height: 1.5em;
  2241. }
  2242. .flex-caption p.subtitle {
  2243. font-size: 1.1em;
  2244. line-height: 1.1em;
  2245. }
  2246. .container .blog_content {
  2247. padding-left: 0;
  2248. border: 0;
  2249. }
  2250. }
  2251. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  2252. @media only screen and (min-width: 480px) and (max-width: 767px) {
  2253. .mobile_hidden { display: none !important }
  2254. ul.menu li.navicon_button { display:inline-block }
  2255. ul.menu li { padding: 0 0 0 10px; }
  2256. ul.nav_buttons { position: relative; top: 10px }
  2257. }
  2258. /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  2259. @media only screen and (max-width: 479px) {
  2260. .mobile_hidden { display: none !important }
  2261. ul.menu li.navicon_button { display:inline-block; }
  2262. ul.menu li a.cart { padding-left: 25px; }
  2263. ul.menu li a.navicon { padding-left: 28px; }
  2264. ul.menu li { padding: 0 }
  2265. ul.nav_buttons { position: relative; top: 10px; text-indent: -1000em; text-align: left }
  2266. .cart_count { display: none;}
  2267. ul.mobile_menu input.search_box { width: 240px !important;}
  2268. .flex-caption .headline, .flex-caption p.subtitle{
  2269. font-size: 1.1em;
  2270. font-height: 1.1em;
  2271. }
  2272. .flex-caption p.subtitle {
  2273. font-size: 0.9em;
  2274. line-height: 0.9em;
  2275. margin-bottom: 0.5em;
  2276. }
  2277. .flex-caption .action_button {
  2278. padding: 4px 15px;
  2279. font-size: 12px;
  2280. }
  2281. .flex-direction-nav .flex-prev {display: none;}
  2282. .flex-direction-nav .flex-next {display: none;}
  2283.  
  2284. h1, h2, h1.home, h1.blog_title, h3, h4, h5, h6, .title a {
  2285. font-size: 150%;
  2286. }
  2287. h1, h1.home, h1.blog_title, .title a, h2 {
  2288. padding:0;
  2289. }
  2290. }
  2291. @media
  2292. (min--moz-device-pixel-ratio: 2),
  2293. (-o-min-device-pixel-ratio: 2/1),
  2294. (-webkit-min-device-pixel-ratio: 2),
  2295. (min-device-pixel-ratio: 2) {
  2296. ul.menu li a.navicon {
  2297. {% if settings.cart_icon == 'light' %}
  2298. background-image: url({{ 'menu2x.png' | asset_url }});
  2299. {% else %}
  2300. background-image: url({{ 'menu_dark2x.png' | asset_url }});
  2301. {% endif %}
  2302. background-size: 20px 119px;
  2303. }
  2304. input.search_box {
  2305. background: #fff url({{ 'search2x.jpg' | asset_url }}) no-repeat 6px;
  2306. background-size: 14px 14px;
  2307. }
  2308. .nav ul li a.cart {
  2309. {% if settings.cart_icon == 'light' %}
  2310. background-image: url({{ 'cart2x.png' | asset_url }});
  2311. {% else %}
  2312. background-image: url({{ 'cart_dark2x.png' | asset_url }});
  2313. {% endif %}
  2314. background-size: 16px 64px;
  2315. }
  2316. }
  2317.  
  2318. @-moz-document url-prefix() {
  2319. input.search_box {
  2320. position: relative;
  2321. top: 8px;
  2322. }
  2323. }
  2324.  
  2325. @media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
  2326. html {
  2327. -webkit-text-size-adjust: 100%;
  2328. }
  2329. }
  2330.  
  2331. /* #Font-Face
  2332. ================================================== */
  2333. /* This is the proper syntax for an @font-face file.
  2334. Upload your font files to Assets and then
  2335. copy your FontName into code below and remove
  2336. comment brackets */
  2337.  
  2338. /* @font-face {
  2339. font-family: 'FontName';
  2340. src: url('FontName.eot');
  2341. src: url('FontName.eot?iefix') format('eot'),
  2342. url('FontName.woff') format('woff'),
  2343. url('FontName.ttf') format('truetype'),
  2344. url('FontName.svg#webfontZam02nTh') format('svg');
  2345. font-weight: normal;
  2346. font-style: normal; }
  2347. */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!