Advertisement
Guest User

Untitled

a guest
Sep 2nd, 2014
259
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.58 KB | None | 0 0
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. /* =RESET
  5. -------------------------------------------------------------- */
  6. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
  7. code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
  9. details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio,
  10. video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
  11. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
  12. nav ul { list-style: none }
  13. blockquote, q { quotes: none }
  14. blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
  15. a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
  16. ins { background-color: #ff9; color: #000; text-decoration: none; }
  17. mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
  18. del { text-decoration: line-through }
  19. abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
  20. /* tables still need cellspacing="0" in the markup */
  21. table { border-collapse: collapse; border-spacing: 0; }
  22. hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  23. input, select { vertical-align: middle }
  24. label, input[type=button], input[type=submit], button { cursor: pointer }
  25.  
  26. .browsehappy {
  27. margin: 0.2em 0;
  28. background: #ccc;
  29. color: #000;
  30. padding: 0.2em 0;
  31. }
  32.  
  33. /* WEBFONTS
  34. -------------------------------------------------------------- */
  35. @font-face {
  36. font-family: 'oswaldlight';
  37. src: url('../webfonts/oswald-light-webfont.eot');
  38. src: url('../webfonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
  39. url('../webfonts/oswald-light-webfont.woff') format('woff'),
  40. url('../webfonts/oswald-light-webfont.ttf') format('truetype'),
  41. url('../webfonts/oswald-light-webfont.svg#oswaldlight') format('svg');
  42. font-weight: normal;
  43. font-style: normal;
  44. }
  45.  
  46. @font-face {
  47. font-family: 'open_sansregular';
  48. src: url('../webfonts/OpenSans-Regular-webfont.eot');
  49. src: url('../webfonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
  50. url('../webfonts/OpenSans-Regular-webfont.woff') format('woff'),
  51. url('../webfonts/OpenSans-Regular-webfont.ttf') format('truetype'),
  52. url('../webfonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  53. font-weight: normal;
  54. font-style: normal;
  55. }
  56.  
  57. @font-face {
  58. font-family: 'fashion_site';
  59. src: url('../webfonts/fashion-site.eot');
  60. src: url('../webfonts/fashion-site.eot?#iefix') format('embedded-opentype'),
  61. url('../webfonts/fashion-site.woff') format('woff'),
  62. url('../webfonts/fashion-site.ttf') format('truetype'),
  63. url('../webfonts/fashion-site.svg#open_sansregular') format('svg');
  64. font-weight: normal;
  65. font-style: normal;
  66. }
  67.  
  68. /* ROOT
  69. -------------------------------------------------------------- */
  70.  
  71. * {
  72. -moz-box-sizing: border-box;
  73. -webkit-box-sizing: border-box;
  74. box-sizing: border-box;
  75. }
  76.  
  77. body {
  78. font: 80%/1.1em "open_sansregular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  79. color: #4c4a4b;
  80. background: #fff;
  81. padding: 0;
  82. margin: 0;
  83. }
  84.  
  85. a {
  86. color:#92defe;
  87. font-size: inherit;
  88. }
  89.  
  90. a:hover {
  91. color:#92defe;
  92. text-decoration: none;
  93. -o-transition-duration: .5s;
  94. -o-transition-property: color;
  95. -ms-transition-duration: .5s;
  96. -ms-transition-property: color;
  97. -moz-transition-duration: .5s;
  98. -moz-transition-property: color;
  99. -webkit-transition-duration: .5s;
  100. -webkit-transition-property: color;
  101. transition-duration: .5s;
  102. transition-property: color;
  103. }
  104.  
  105. ::selection {
  106. background: #92defe;
  107. color: #fff;
  108. text-shadow: none;
  109. }
  110.  
  111. /* TYPOGRAPHY
  112. -------------------------------------------------------------- */
  113.  
  114. h1,
  115. h2,
  116. h3,
  117. h4,
  118. h5,
  119. h6 {
  120. margin: 1em 0;
  121. font-weight:700
  122. }
  123.  
  124. .ie8 h1,
  125. .ie8 h2,
  126. .ie8 h3 {
  127. font-weight:900 !important;
  128. }
  129.  
  130. h1 {
  131. font-size: 150%;
  132. line-height: 1.3em;
  133. }
  134.  
  135. h2 {
  136. font-size: 140%;
  137. line-height: 1.2em;
  138. }
  139.  
  140. h3 {
  141. font-size: 130%;
  142. line-height: 1.1em;
  143. }
  144.  
  145. h4 {
  146. font-size: 120%;
  147. line-height: 1.1em;
  148. }
  149.  
  150. h5 {
  151. font-size: 110%;
  152. line-height: 1.1em;
  153. }
  154.  
  155. h6 {
  156. font-size: 100%;
  157. line-height: 1.1em;
  158. }
  159.  
  160. p {
  161. font-size: 100%;
  162. line-height: 1.3em;
  163. margin: 1em 0;
  164. }
  165.  
  166. code {
  167. font-size: 100%;
  168. font-family: monospace;
  169. }
  170.  
  171. pre code {
  172. line-height: 1.3em;
  173. }
  174.  
  175. del{
  176. text-decoration: line-through;
  177. }
  178.  
  179. .small {
  180. font-size: 85%;
  181. }
  182.  
  183. ol, ul {
  184. font-size: 100%;
  185. line-height: 1.3em;
  186. margin: 1.2em 0 1.2em 2em;
  187. }
  188.  
  189. ul li,
  190. ol li,
  191. dl dt,
  192. dl dd {
  193. margin-bottom: 0.2em;
  194. }
  195.  
  196. img, a img {
  197. border: 0;
  198. }
  199.  
  200. .responsive-img {
  201. width: 100%;
  202. height: auto;
  203. vertical-align: middle;
  204. }
  205.  
  206. /* STRUCTURE
  207. -------------------------------------------------------------- */
  208.  
  209. #wrapper {
  210. width: 100%;
  211. margin: 0 auto;
  212. padding: 0 10px;
  213. background: #fff;
  214. }
  215.  
  216. .col-1 {
  217.  
  218. }
  219.  
  220. .col-2 {
  221.  
  222. }
  223.  
  224. .col-3 {
  225.  
  226. }
  227.  
  228.  
  229. /* PODS
  230. -------------------------------------------------------------- */
  231. .pods-wrap {
  232. width: 100%;
  233. overflow: hidden;
  234. }
  235.  
  236. .pod {
  237. float: left;
  238. width: 100%;
  239. height: auto;
  240. margin: 0 0 20px 0;
  241. }
  242.  
  243. .pod img {
  244. width: 100%;
  245. height: auto;
  246. vertical-align: middle;
  247. }
  248.  
  249. h1.pod-heading {
  250. text-transform: uppercase;
  251. font-family: 'oswaldlight';
  252. font-weight: 300;
  253. font-size: 140%;
  254. }
  255.  
  256. /* HEADER
  257. -------------------------------------------------------------- */
  258. #header {
  259. z-index: 1000;
  260. }
  261.  
  262. #logo {
  263. height: 140px;
  264. width: 55%;
  265. text-align: center;
  266. margin: 0 auto;
  267. }
  268.  
  269. .nav {
  270. width: 100%;
  271. text-align: center;
  272. background: #fff;
  273. padding: 13px 0 9px 0;
  274. }
  275.  
  276. .nav ul {
  277. margin: 0;
  278. padding: 0;
  279. }
  280.  
  281. .nav ul li {
  282. list-style: none;
  283. display: -moz-inline-stack;
  284. display: inline-block;
  285. vertical-align: top;
  286. zoom: 1;
  287. *display: inline;
  288. padding: 0 10px;
  289. text-transform: uppercase;
  290. font-family: 'oswaldlight';
  291. }
  292.  
  293. .nav ul li a {
  294. text-decoration: none;
  295. color: #4c4a4b;
  296. }
  297.  
  298. .nav ul li a:hover {
  299. color: #000;
  300. }
  301.  
  302. #social-nav.nav ul li {
  303. font-family: 'fashion_site';
  304. font-size: 180%;
  305. padding: 0 5px;
  306. color: #000;
  307. }
  308.  
  309. #social-nav.nav ul li a {
  310. color: #000;
  311. text-decoration: none;
  312. }
  313.  
  314. #nav-wrap {
  315. display: none;
  316. vertical-align: top;
  317. background: #fff;
  318. width: 100%;
  319. }
  320.  
  321. #main-nav {
  322. vertical-align: top;
  323. }
  324.  
  325. #main-nav.nav {
  326. padding: 0;
  327. }
  328.  
  329. #main-nav ul {
  330. margin:0;
  331. padding:0;
  332. }
  333.  
  334. #main-nav ul li {
  335. margin:0;
  336. display: block;
  337. font-size: 150%;
  338. padding: .7em 0 .7em .8em;
  339. height: auto;
  340. border-bottom: 1px solid #afafaf;
  341. left: 0;
  342. }
  343.  
  344. #main-nav ul li:last-child{
  345. border-bottom: none;
  346. }
  347.  
  348.  
  349. #main-nav ul li .menu-sep {
  350. padding: 0;
  351. }
  352.  
  353. #main-nav ul li a {
  354. color:#4c4a4b;
  355. text-decoration: none;
  356. }
  357.  
  358. #main-nav ul li a:hover {
  359. color:#000;
  360. }
  361.  
  362. #main-nav ul li.current-menu-item a,
  363. #main-nav ul li.current-menu-item a:hover {
  364. color:#000;
  365. }
  366.  
  367. #main-nav ul li.current-menu-item a.touch-link,
  368. #main-nav ul li.current-menu-item a.touch-link:hover {
  369. border: none;
  370. color:#000;
  371. }
  372.  
  373. #main-nav ul li a.touch-link {
  374. float: right;
  375. padding: 0 10px 0 0;
  376. margin-left: 10px;
  377. font-size: 80%;
  378. font-family: 'fashion_site';
  379. }
  380.  
  381. #main-nav ul li ul.sub-menu {
  382. padding-top: .2em;
  383. display: none;
  384. font-size: 80%;
  385. }
  386.  
  387. #main-nav ul li ul.sub-menu li a {
  388. color:#4c4a4b;
  389. display: inline-block;
  390. }
  391.  
  392. #main-nav ul li ul.sub-menu li a:hover {
  393. color:#000;
  394. }
  395.  
  396. #main-nav ul li ul.sub-menu li.current-menu-item a {
  397. color:#4c4a4b;
  398. }
  399.  
  400. #main-nav ul li ul.sub-menu li.current-menu-item a:hover {
  401. color:#4c4a4b;
  402. }
  403.  
  404. #main-nav ul li ul.sub-menu li:last-child {
  405. border-bottom: none;
  406. padding-bottom: 0;
  407. }
  408.  
  409. #menu-toggle {
  410. height: 20px;
  411. display: block;
  412. padding: 4px 5px 0 4px;
  413. margin: 0;
  414. background-color: #4c4a4b;
  415. position: absolute;
  416. right: 10px;
  417. top: 120px;
  418. cursor: pointer;
  419. font-size: 100%;
  420. font-family: 'fashion_site';
  421. }
  422.  
  423. #menu-toggle a {
  424. text-decoration: none;
  425. color: #fff;
  426. }
  427.  
  428. /* SLIDE SHOW
  429. -------------------------------------------------------------- */
  430. #slide-show {
  431. width:100%;
  432. overflow: hidden;
  433. position: relative;
  434. border-top: 1px solid #afafaf;
  435. border-bottom: 1px solid #afafaf;
  436. }
  437.  
  438. #slide-controls {
  439. position: absolute;
  440. top: 80px;
  441. width: 100%;
  442. z-index: 10;
  443. }
  444.  
  445. #slide-controls a {
  446. color: #828282;
  447. text-decoration: none;
  448. font-family: 'fashion_site';
  449. font-size: 25px;
  450. display: block;
  451. border: 0;
  452. outline: 0;
  453. text-shadow: none;
  454. }
  455.  
  456. #slide-controls a:hover {
  457. color: #92defe;
  458. }
  459.  
  460. #slide-controls #prev-slide {
  461. float: left;
  462. }
  463.  
  464. #slide-controls #next-slide {
  465. float: right;
  466. }
  467.  
  468. #slide-show-wrap {
  469. position:relative;
  470. left: 0;
  471. top:0;
  472. display: block;
  473. overflow: hidden;
  474. }
  475.  
  476. #slide-show-wrap .slide-item {
  477. position: relative;
  478. }
  479.  
  480. #slide-show-wrap .slide-item img {
  481. width: 100%;
  482. height: auto;
  483. vertical-align: middle;
  484. }
  485.  
  486. #slide-show-wrap :nth-child(n+2) {
  487. display: none;
  488. }
  489.  
  490.  
  491. /* FILTER LIST
  492. -------------------------------------------------------------- */
  493. #filter-list {
  494. padding: 20px 0 15px 0;
  495. text-align: left;
  496. }
  497.  
  498. #filter-list ul li:first-child {
  499. padding-left: 0;
  500. }
  501.  
  502. #filter-pods .pod a {
  503. -moz-transition:all 1s ease;
  504. -webkit-transition:all 1s ease;
  505. -ms-transition:all 1s ease;
  506. -o-transition:all 1s ease;
  507. transition:all 1s ease;
  508. filter: url(css/filters.svg#grayscale);
  509. filter: gray;
  510. -webkit-filter: grayscale(1);
  511. }
  512.  
  513. #filter-pods .pod a:hover {
  514. filter: none;
  515. -webkit-filter: grayscale(0);
  516. }
  517.  
  518. .grey {
  519. filter: url(css/filters.svg#grayscale);
  520. filter: gray;
  521. -webkit-filter: grayscale(1);
  522. }
  523.  
  524. .clear-grey {
  525. filter: none;
  526. -webkit-filter: grayscale(0);
  527. }
  528.  
  529. /* FILTER PODS
  530. -------------------------------------------------------------- */
  531.  
  532.  
  533.  
  534. /* ABOUT PODS
  535. -------------------------------------------------------------- */
  536. #about-pods {
  537. border-top: 1px solid #afafaf;
  538. }
  539.  
  540. .body-logo {
  541. display: none;
  542. }
  543.  
  544. #about-pods .about-pod {
  545. height: auto;
  546. }
  547.  
  548. /* SOCIAL PODS
  549. -------------------------------------------------------------- */
  550. #social-pods {
  551. width: 100%;
  552. overflow: hidden;
  553. border-top: 1px solid #afafaf;
  554. }
  555.  
  556. #social-pods .news-pod .news-sub-pod {
  557. float: left;
  558. }
  559.  
  560. #social-pods .news-pod:first-child {
  561. margin-right: 20px;
  562. }
  563.  
  564. .news-sub-pod p:first-child {
  565. margin-top: 0;
  566. }
  567.  
  568. .email-list-pod {
  569. width: 60%;
  570. }
  571.  
  572. #email-list-wrap {
  573. overflow: hidden;
  574. }
  575.  
  576. #email-list-name {
  577. height: 25px;
  578. margin: 0 -3px 0 0;
  579. width: 70%;
  580. border-color: #000;
  581. background-color: white;
  582. border-width: 1px;
  583. border-style: solid;
  584. -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  585. -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  586. box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  587. border-radius: 1px;
  588. float: left;
  589. }
  590.  
  591. #email-list-submit {
  592. height: 25px;
  593. padding: 2px 16px;
  594. font-size: 12px;
  595. font-weight:normal;
  596. margin-bottom: 0;
  597. word-spacing: 1px;
  598. -moz-box-shadow: none;
  599. -webkit-box-shadow: none;
  600. box-shadow: none;
  601. margin-left: -5px;
  602. border-radius: 1px;
  603. float: right;
  604. }
  605.  
  606. a.button,
  607. button,
  608. input[type="submit"],
  609. input[type="reset"],
  610. input[type="button"] {
  611. background: #000; /* Old browsers */
  612. border: 1px solid #000;
  613. padding: 4px 16px;
  614. -moz-border-radius: 1px;
  615. -webkit-border-radius: 1px;
  616. border-radius: 1px;
  617. color: #fff;
  618. display: inline-block;
  619. font-size: 13px;
  620. font-weight: bold;
  621. text-decoration: none;
  622. cursor: pointer;
  623. margin-bottom: 20px;
  624. line-height: 21px;
  625. }
  626.  
  627. /* FOOTER
  628. -------------------------------------------------------------- */
  629. #footer-nav {
  630. border-top: 1px solid #afafaf;
  631. border-bottom: 1px solid #afafaf;
  632. }
  633.  
  634. #copyright {
  635. text-align: center;
  636. font-size: 80%;
  637. }
  638.  
  639. /*MEDIA QUERIES
  640. -------------------------------------------------------------- */
  641. /* 480px */
  642. @media only screen and (min-width: 480px) {
  643. #logo {
  644. width: 38%;
  645. min-width: 200px;
  646. }
  647. .pod {
  648. margin: 0 2% 10px 0;
  649. }
  650.  
  651. .col-1 {
  652. width: 49%;
  653. }
  654.  
  655. .col-2 {
  656. width:100%;
  657. }
  658.  
  659. .col-3 {
  660. width:100%;
  661. }
  662.  
  663. .nav ul li {
  664. padding: 0 20px;
  665. }
  666.  
  667. #slide-controls {
  668. top: 50%;
  669. }
  670.  
  671. #slide-controls a {
  672. font-size: 30px;
  673. }
  674.  
  675. #filter-pods .pod:nth-child(even) {
  676. margin-right: 0;
  677. }
  678.  
  679. .email-list-pod {
  680. width: auto;
  681. }
  682.  
  683. #email-list-name {
  684. width: 65%;
  685. }
  686.  
  687. }
  688.  
  689. /* 640px */
  690. @media only screen and (min-width: 640px) {
  691. #logo {
  692. width: 28%;
  693. }
  694. }
  695.  
  696. /* 768px iPad Portait*/
  697. @media only screen and (min-width: 768px) {
  698.  
  699. #logo {
  700. width: 30%;
  701. max-width: 250px;
  702. }
  703.  
  704. #menu-toggle {
  705. display: none;
  706. }
  707.  
  708. .col-1 {
  709. width: 32%;
  710. }
  711.  
  712. .col-2 {
  713. width: 66%;
  714. }
  715.  
  716. .col-3 {
  717. width: 100%;
  718. }
  719.  
  720. #nav-wrap {
  721. display: block;
  722. }
  723.  
  724. #main-nav.nav {
  725. padding: 13px 0 9px 0;
  726. }
  727.  
  728. #main-nav.nav ul li {
  729. display: -moz-inline-stack;
  730. display: inline-block;
  731. vertical-align: top;
  732. zoom: 1;
  733. *display: inline;
  734. padding: 0 30px;
  735. border: none;
  736. }
  737. .nav ul li {
  738. padding: 0 30px;
  739. }
  740.  
  741. #main-nav.nav ul li,
  742. #filter-list.nav ul li {
  743. font-size: 20px;
  744. }
  745.  
  746.  
  747.  
  748. #slide-controls a {
  749. font-size: 35px;
  750. }
  751.  
  752. .pod {
  753. height: auto;
  754. margin: 0 2% 20px 0;
  755. }
  756.  
  757. #filter-list {
  758. text-align: left;
  759. padding: 29px 0 21px 0;
  760. }
  761.  
  762. #filter-pods .pod:nth-child(even) {
  763. margin-right: 2%;
  764. }
  765.  
  766. #filter-pods .pod:nth-child(3n+3) {
  767. margin-right: 0;
  768. }
  769.  
  770. .body-logo {
  771. display: block;
  772. }
  773.  
  774. .about-pod {
  775. margin-right: 0;
  776. }
  777.  
  778. .twitter-pod,
  779. .news-pod {
  780. width: 32%;
  781. }
  782.  
  783. .email-list-pod {
  784. margin-right: 0;
  785. }
  786.  
  787. }
  788. /* 980px Desktop */
  789. @media only screen and (min-width: 960px) {
  790.  
  791. /*structure*/
  792. #wrapper {
  793. width: 960px;
  794. margin: 0 auto;
  795. }
  796.  
  797. #logo {
  798. width: 220px;
  799. }
  800.  
  801. #slide-controls a {
  802. font-size: 35px;
  803. }
  804.  
  805. .col-1 {
  806. width: 220px;
  807. }
  808.  
  809. .col-2 {
  810. width: 460px;
  811. }
  812.  
  813. .col-3 {
  814. width: 700px;
  815. }
  816.  
  817. .nav ul li {
  818. font-size: 14px;
  819. padding: 0 40px;
  820. }
  821.  
  822. #main-nav.nav ul li {
  823. font-size: 20px;
  824. padding: 0 40px;
  825. }
  826.  
  827. #filter-pods .pod {
  828. background: #ddd;
  829. height: 150px;
  830. width: 220px;
  831. margin: 0 20px 20px 0;
  832. }
  833.  
  834. #filter-pods .pod:nth-child(3n+3) {
  835. margin-right: 20px;
  836. }
  837.  
  838. #filter-pods .pod:nth-child(4n+4) {
  839. margin-right: 0;
  840. }
  841.  
  842. .about-pod {
  843. margin: 0;
  844. height: auto;
  845. width: 700px;
  846. }
  847.  
  848. #social-pods .pod:nth-child(3n+3) {
  849. margin-right: 0;
  850. }
  851.  
  852. .twitter-pod {
  853. width: 220px;
  854. }
  855.  
  856. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement