Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @charset "UTF-8";
- /* CSS Document */
- /* =RESET
- -------------------------------------------------------------- */
- html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
- code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
- details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio,
- video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
- nav ul { list-style: none }
- blockquote, q { quotes: none }
- blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
- a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
- ins { background-color: #ff9; color: #000; text-decoration: none; }
- mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
- del { text-decoration: line-through }
- abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
- /* tables still need cellspacing="0" in the markup */
- table { border-collapse: collapse; border-spacing: 0; }
- hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
- input, select { vertical-align: middle }
- label, input[type=button], input[type=submit], button { cursor: pointer }
- .browsehappy {
- margin: 0.2em 0;
- background: #ccc;
- color: #000;
- padding: 0.2em 0;
- }
- /* WEBFONTS
- -------------------------------------------------------------- */
- @font-face {
- font-family: 'oswaldlight';
- src: url('../webfonts/oswald-light-webfont.eot');
- src: url('../webfonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
- url('../webfonts/oswald-light-webfont.woff') format('woff'),
- url('../webfonts/oswald-light-webfont.ttf') format('truetype'),
- url('../webfonts/oswald-light-webfont.svg#oswaldlight') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- @font-face {
- font-family: 'open_sansregular';
- src: url('../webfonts/OpenSans-Regular-webfont.eot');
- src: url('../webfonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('../webfonts/OpenSans-Regular-webfont.woff') format('woff'),
- url('../webfonts/OpenSans-Regular-webfont.ttf') format('truetype'),
- url('../webfonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- @font-face {
- font-family: 'fashion_site';
- src: url('../webfonts/fashion-site.eot');
- src: url('../webfonts/fashion-site.eot?#iefix') format('embedded-opentype'),
- url('../webfonts/fashion-site.woff') format('woff'),
- url('../webfonts/fashion-site.ttf') format('truetype'),
- url('../webfonts/fashion-site.svg#open_sansregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- /* ROOT
- -------------------------------------------------------------- */
- * {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
- body {
- font: 80%/1.1em "open_sansregular", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #4c4a4b;
- background: #fff;
- padding: 0;
- margin: 0;
- }
- a {
- color:#92defe;
- font-size: inherit;
- }
- a:hover {
- color:#92defe;
- text-decoration: none;
- -o-transition-duration: .5s;
- -o-transition-property: color;
- -ms-transition-duration: .5s;
- -ms-transition-property: color;
- -moz-transition-duration: .5s;
- -moz-transition-property: color;
- -webkit-transition-duration: .5s;
- -webkit-transition-property: color;
- transition-duration: .5s;
- transition-property: color;
- }
- ::selection {
- background: #92defe;
- color: #fff;
- text-shadow: none;
- }
- /* TYPOGRAPHY
- -------------------------------------------------------------- */
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- margin: 1em 0;
- font-weight:700
- }
- .ie8 h1,
- .ie8 h2,
- .ie8 h3 {
- font-weight:900 !important;
- }
- h1 {
- font-size: 150%;
- line-height: 1.3em;
- }
- h2 {
- font-size: 140%;
- line-height: 1.2em;
- }
- h3 {
- font-size: 130%;
- line-height: 1.1em;
- }
- h4 {
- font-size: 120%;
- line-height: 1.1em;
- }
- h5 {
- font-size: 110%;
- line-height: 1.1em;
- }
- h6 {
- font-size: 100%;
- line-height: 1.1em;
- }
- p {
- font-size: 100%;
- line-height: 1.3em;
- margin: 1em 0;
- }
- code {
- font-size: 100%;
- font-family: monospace;
- }
- pre code {
- line-height: 1.3em;
- }
- del{
- text-decoration: line-through;
- }
- .small {
- font-size: 85%;
- }
- ol, ul {
- font-size: 100%;
- line-height: 1.3em;
- margin: 1.2em 0 1.2em 2em;
- }
- ul li,
- ol li,
- dl dt,
- dl dd {
- margin-bottom: 0.2em;
- }
- img, a img {
- border: 0;
- }
- .responsive-img {
- width: 100%;
- height: auto;
- vertical-align: middle;
- }
- /* STRUCTURE
- -------------------------------------------------------------- */
- #wrapper {
- width: 100%;
- margin: 0 auto;
- padding: 0 10px;
- background: #fff;
- }
- .col-1 {
- }
- .col-2 {
- }
- .col-3 {
- }
- /* PODS
- -------------------------------------------------------------- */
- .pods-wrap {
- width: 100%;
- overflow: hidden;
- }
- .pod {
- float: left;
- width: 100%;
- height: auto;
- margin: 0 0 20px 0;
- }
- .pod img {
- width: 100%;
- height: auto;
- vertical-align: middle;
- }
- h1.pod-heading {
- text-transform: uppercase;
- font-family: 'oswaldlight';
- font-weight: 300;
- font-size: 140%;
- }
- /* HEADER
- -------------------------------------------------------------- */
- #header {
- z-index: 1000;
- }
- #logo {
- height: 140px;
- width: 55%;
- text-align: center;
- margin: 0 auto;
- }
- .nav {
- width: 100%;
- text-align: center;
- background: #fff;
- padding: 13px 0 9px 0;
- }
- .nav ul {
- margin: 0;
- padding: 0;
- }
- .nav ul li {
- list-style: none;
- display: -moz-inline-stack;
- display: inline-block;
- vertical-align: top;
- zoom: 1;
- *display: inline;
- padding: 0 10px;
- text-transform: uppercase;
- font-family: 'oswaldlight';
- }
- .nav ul li a {
- text-decoration: none;
- color: #4c4a4b;
- }
- .nav ul li a:hover {
- color: #000;
- }
- #social-nav.nav ul li {
- font-family: 'fashion_site';
- font-size: 180%;
- padding: 0 5px;
- color: #000;
- }
- #social-nav.nav ul li a {
- color: #000;
- text-decoration: none;
- }
- #nav-wrap {
- display: none;
- vertical-align: top;
- background: #fff;
- width: 100%;
- }
- #main-nav {
- vertical-align: top;
- }
- #main-nav.nav {
- padding: 0;
- }
- #main-nav ul {
- margin:0;
- padding:0;
- }
- #main-nav ul li {
- margin:0;
- display: block;
- font-size: 150%;
- padding: .7em 0 .7em .8em;
- height: auto;
- border-bottom: 1px solid #afafaf;
- left: 0;
- }
- #main-nav ul li:last-child{
- border-bottom: none;
- }
- #main-nav ul li .menu-sep {
- padding: 0;
- }
- #main-nav ul li a {
- color:#4c4a4b;
- text-decoration: none;
- }
- #main-nav ul li a:hover {
- color:#000;
- }
- #main-nav ul li.current-menu-item a,
- #main-nav ul li.current-menu-item a:hover {
- color:#000;
- }
- #main-nav ul li.current-menu-item a.touch-link,
- #main-nav ul li.current-menu-item a.touch-link:hover {
- border: none;
- color:#000;
- }
- #main-nav ul li a.touch-link {
- float: right;
- padding: 0 10px 0 0;
- margin-left: 10px;
- font-size: 80%;
- font-family: 'fashion_site';
- }
- #main-nav ul li ul.sub-menu {
- padding-top: .2em;
- display: none;
- font-size: 80%;
- }
- #main-nav ul li ul.sub-menu li a {
- color:#4c4a4b;
- display: inline-block;
- }
- #main-nav ul li ul.sub-menu li a:hover {
- color:#000;
- }
- #main-nav ul li ul.sub-menu li.current-menu-item a {
- color:#4c4a4b;
- }
- #main-nav ul li ul.sub-menu li.current-menu-item a:hover {
- color:#4c4a4b;
- }
- #main-nav ul li ul.sub-menu li:last-child {
- border-bottom: none;
- padding-bottom: 0;
- }
- #menu-toggle {
- height: 20px;
- display: block;
- padding: 4px 5px 0 4px;
- margin: 0;
- background-color: #4c4a4b;
- position: absolute;
- right: 10px;
- top: 120px;
- cursor: pointer;
- font-size: 100%;
- font-family: 'fashion_site';
- }
- #menu-toggle a {
- text-decoration: none;
- color: #fff;
- }
- /* SLIDE SHOW
- -------------------------------------------------------------- */
- #slide-show {
- width:100%;
- overflow: hidden;
- position: relative;
- border-top: 1px solid #afafaf;
- border-bottom: 1px solid #afafaf;
- }
- #slide-controls {
- position: absolute;
- top: 80px;
- width: 100%;
- z-index: 10;
- }
- #slide-controls a {
- color: #828282;
- text-decoration: none;
- font-family: 'fashion_site';
- font-size: 25px;
- display: block;
- border: 0;
- outline: 0;
- text-shadow: none;
- }
- #slide-controls a:hover {
- color: #92defe;
- }
- #slide-controls #prev-slide {
- float: left;
- }
- #slide-controls #next-slide {
- float: right;
- }
- #slide-show-wrap {
- position:relative;
- left: 0;
- top:0;
- display: block;
- overflow: hidden;
- }
- #slide-show-wrap .slide-item {
- position: relative;
- }
- #slide-show-wrap .slide-item img {
- width: 100%;
- height: auto;
- vertical-align: middle;
- }
- #slide-show-wrap :nth-child(n+2) {
- display: none;
- }
- /* FILTER LIST
- -------------------------------------------------------------- */
- #filter-list {
- padding: 20px 0 15px 0;
- text-align: left;
- }
- #filter-list ul li:first-child {
- padding-left: 0;
- }
- #filter-pods .pod a {
- -moz-transition:all 1s ease;
- -webkit-transition:all 1s ease;
- -ms-transition:all 1s ease;
- -o-transition:all 1s ease;
- transition:all 1s ease;
- filter: url(css/filters.svg#grayscale);
- filter: gray;
- -webkit-filter: grayscale(1);
- }
- #filter-pods .pod a:hover {
- filter: none;
- -webkit-filter: grayscale(0);
- }
- .grey {
- filter: url(css/filters.svg#grayscale);
- filter: gray;
- -webkit-filter: grayscale(1);
- }
- .clear-grey {
- filter: none;
- -webkit-filter: grayscale(0);
- }
- /* FILTER PODS
- -------------------------------------------------------------- */
- /* ABOUT PODS
- -------------------------------------------------------------- */
- #about-pods {
- border-top: 1px solid #afafaf;
- }
- .body-logo {
- display: none;
- }
- #about-pods .about-pod {
- height: auto;
- }
- /* SOCIAL PODS
- -------------------------------------------------------------- */
- #social-pods {
- width: 100%;
- overflow: hidden;
- border-top: 1px solid #afafaf;
- }
- #social-pods .news-pod .news-sub-pod {
- float: left;
- }
- #social-pods .news-pod:first-child {
- margin-right: 20px;
- }
- .news-sub-pod p:first-child {
- margin-top: 0;
- }
- .email-list-pod {
- width: 60%;
- }
- #email-list-wrap {
- overflow: hidden;
- }
- #email-list-name {
- height: 25px;
- margin: 0 -3px 0 0;
- width: 70%;
- border-color: #000;
- background-color: white;
- border-width: 1px;
- border-style: solid;
- -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
- -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
- box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
- border-radius: 1px;
- float: left;
- }
- #email-list-submit {
- height: 25px;
- padding: 2px 16px;
- font-size: 12px;
- font-weight:normal;
- margin-bottom: 0;
- word-spacing: 1px;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- margin-left: -5px;
- border-radius: 1px;
- float: right;
- }
- a.button,
- button,
- input[type="submit"],
- input[type="reset"],
- input[type="button"] {
- background: #000; /* Old browsers */
- border: 1px solid #000;
- padding: 4px 16px;
- -moz-border-radius: 1px;
- -webkit-border-radius: 1px;
- border-radius: 1px;
- color: #fff;
- display: inline-block;
- font-size: 13px;
- font-weight: bold;
- text-decoration: none;
- cursor: pointer;
- margin-bottom: 20px;
- line-height: 21px;
- }
- /* FOOTER
- -------------------------------------------------------------- */
- #footer-nav {
- border-top: 1px solid #afafaf;
- border-bottom: 1px solid #afafaf;
- }
- #copyright {
- text-align: center;
- font-size: 80%;
- }
- /*MEDIA QUERIES
- -------------------------------------------------------------- */
- /* 480px */
- @media only screen and (min-width: 480px) {
- #logo {
- width: 38%;
- min-width: 200px;
- }
- .pod {
- margin: 0 2% 10px 0;
- }
- .col-1 {
- width: 49%;
- }
- .col-2 {
- width:100%;
- }
- .col-3 {
- width:100%;
- }
- .nav ul li {
- padding: 0 20px;
- }
- #slide-controls {
- top: 50%;
- }
- #slide-controls a {
- font-size: 30px;
- }
- #filter-pods .pod:nth-child(even) {
- margin-right: 0;
- }
- .email-list-pod {
- width: auto;
- }
- #email-list-name {
- width: 65%;
- }
- }
- /* 640px */
- @media only screen and (min-width: 640px) {
- #logo {
- width: 28%;
- }
- }
- /* 768px iPad Portait*/
- @media only screen and (min-width: 768px) {
- #logo {
- width: 30%;
- max-width: 250px;
- }
- #menu-toggle {
- display: none;
- }
- .col-1 {
- width: 32%;
- }
- .col-2 {
- width: 66%;
- }
- .col-3 {
- width: 100%;
- }
- #nav-wrap {
- display: block;
- }
- #main-nav.nav {
- padding: 13px 0 9px 0;
- }
- #main-nav.nav ul li {
- display: -moz-inline-stack;
- display: inline-block;
- vertical-align: top;
- zoom: 1;
- *display: inline;
- padding: 0 30px;
- border: none;
- }
- .nav ul li {
- padding: 0 30px;
- }
- #main-nav.nav ul li,
- #filter-list.nav ul li {
- font-size: 20px;
- }
- #slide-controls a {
- font-size: 35px;
- }
- .pod {
- height: auto;
- margin: 0 2% 20px 0;
- }
- #filter-list {
- text-align: left;
- padding: 29px 0 21px 0;
- }
- #filter-pods .pod:nth-child(even) {
- margin-right: 2%;
- }
- #filter-pods .pod:nth-child(3n+3) {
- margin-right: 0;
- }
- .body-logo {
- display: block;
- }
- .about-pod {
- margin-right: 0;
- }
- .twitter-pod,
- .news-pod {
- width: 32%;
- }
- .email-list-pod {
- margin-right: 0;
- }
- }
- /* 980px Desktop */
- @media only screen and (min-width: 960px) {
- /*structure*/
- #wrapper {
- width: 960px;
- margin: 0 auto;
- }
- #logo {
- width: 220px;
- }
- #slide-controls a {
- font-size: 35px;
- }
- .col-1 {
- width: 220px;
- }
- .col-2 {
- width: 460px;
- }
- .col-3 {
- width: 700px;
- }
- .nav ul li {
- font-size: 14px;
- padding: 0 40px;
- }
- #main-nav.nav ul li {
- font-size: 20px;
- padding: 0 40px;
- }
- #filter-pods .pod {
- background: #ddd;
- height: 150px;
- width: 220px;
- margin: 0 20px 20px 0;
- }
- #filter-pods .pod:nth-child(3n+3) {
- margin-right: 20px;
- }
- #filter-pods .pod:nth-child(4n+4) {
- margin-right: 0;
- }
- .about-pod {
- margin: 0;
- height: auto;
- width: 700px;
- }
- #social-pods .pod:nth-child(3n+3) {
- margin-right: 0;
- }
- .twitter-pod {
- width: 220px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement