body {font:13px/18px "Helvetica";color:#777;padding:0;margin:0; -webkit-font-smoothing:antialiased;} h4 {color:#222;font-weight:normal;font-size:24px;margin:5px 0;line-height:1.2em;} h5 {color:#bbb;text-transform:uppercase;margin:0;} a {text-decoration:none; color:#789cc2;} img {border:none;} /* BUTTONS & TAGS ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ .button { color:white; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.15); padding:4px 13px; float:left; font-weight:bold; cursor:pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .button:hover {background-color:black;} .button:active {background-color:black;} .round { text-align:center; -webkit-border-radius:20px; -moz-border-radius:20px; padding:4px 13px; float:left; font-weight:bold; cursor:pointer;} .grey.round {color:#77818a; background-color:#edf1f5; text-shadow:0 1px 1px rgba(255,255,255,.2);} .grey.round:hover {color:#77818a; background-color:#edf1f5; } .txt {color:#bbc0c4; text-shadow:none; background-color:white;} .txt:hover {color:#444;background-color:white;} .grey {background-color:#edf1f5; color:#77818a; text-shadow:none;} .grey:hover {background-color:#dbe3eb; color:#77818a; } .blue {background-color:#91a8c0;} .yellow {background-color:#fff5db; color:#ecac36;cursor:default; text-shadow:none;} .yellow:hover {background-color:#fff5db;} .orange {background-color:#f4765d;} .orange span {color:#f7b6a9;} .orange:hover span {color:#bbb;} .green{ background: -webkit-gradient(linear, left top, left bottom, from(#96c798), to(#83bc85)); background: -moz-linear-gradient(top, #96c798, #83bc85); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#96c798", endColorstr="#83bc85");} .green:hover {background:#70af73;} /* TEXTILE ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ .textile {margin-top:25px;} .textile h1, .textile h2, .textile h3, .textile h4, .textile h6{margin:0; padding:0; color:#222; font-weight:normal;} .textile h1 {padding-bottom:0.6em; font-size:2em;} .textile h2 {padding-bottom:0.6em; font-size:1.5em;} .textile h3 {padding-bottom:0.5em; font-size:1.17em;} .textile h4 {padding-bottom:0.3em; font-size:1em;} .textile h5 {font-size:1.17em; color:#bbb;text-transform:uppercase; font-weight:bold;} .textile h6 {font-size:0.83em; color:#bbb;text-transform:uppercase; font-weight:bold;} .textile p {margin:0 0 1.8em 0; padding:0;} .textile ul {margin:0; padding:0 0 0 17px;} .textile blockquote {font-style:italic; padding:0 0 0 10px; margin:0; border-left:2px solid #777;} .textile table {border:none; border-spacing:0;} .textile th {padding:0 1em 0.7em 0; border-bottom:2px solid #EAECED;font-size:14px;color:#2a3640;} .textile td {padding:0.4em 1em 0.3em 0px;margin:0; border-top:1px solid #EAECED;} /* LAYOUT ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #bodywrapper {width:945px;margin:0 auto; padding:0 20px;} #top-bar #logo-img a {display:block;} #top-bar #logo a {color:white;} #top-bar #logo {width:125px; height:110px; vertical-align:middle; margin:0; text-align:center;padding:10px; background-color: #f4765d; font-weight:bold;font-size:18px;} #top-bar #logo-img {padding:10px 0; } #top-bar #logo-img img {max-width:447px;} /* NAVIGATION ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #navigation {width:100%;z-index:1000; position:relative; padding:20px 0;} #navigation a {color:#bbb;margin:0 5px;font-weight:bold;} #navigation a:hover {color:#111} #navigation .active {color:#111;} #navigation #nav-menu {text-align:right; vertical-align:middle; padding:0 0 0 15px;} #navigation #search {width:196px; vertical-align:middle; padding-bottom:15px; } #navigation form {height:22px; margin-top:-2px; margin-left:10px; text-align:left;float:right;} #navigation form input {background:white; padding:5px 5px 5px 10px; color:#111;margin:3px 0 0 20px; width:175px; line-height:13px; border:3px solid #b7b7b7; -webkit-border-radius:20px;-moz-border-radius:20px; font-size:13px;} #navigation form input:focus {outline: 0;} /* NAVIGATION ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #product-menu {float:left; border-top:1px solid #eee; width:100%; margin:0;} #product-menu li.supermenu {list-style-type:none; margin:0;float:left; } #product-menu a {font-weight:bold; color:#333;} #product-menu li.supermenu:hover a.supermenu-link {color:#6f93b8;cursor:pointer;} #product-menu ul.supermenu-wrapper {float:left; position:relative; padding:15px 0; margin:0 0 0 -10px;} #product-menu a.supermenu-link {padding:7px 0 7px 0; display:block; float:left; position:relative;} #product-menu a.supermenu-link.active {color:#6f93b8;} #product-menu a.supermenu-link .title {float:left;} #product-menu a.supermenu-link .arrow-icon { background-image:url("supermenu-arrow.png"); width:7px; height:7px; display:block; float:left; font-size:0px; margin:6px 0 0 3px; background-repeat:no-repeat;} #product-menu li.supermenu:hover a.supermenu-link .arrow-icon {background-position:left -9px;} #product-menu a.supermenu-link.active .arrow-icon {background-position:left -9px;} #product-menu li.supermenu {position:relative; float:left; padding:0 10px;} #product-menu li.supermenu ul {margin:0; padding:7px 0; left:0; top:25px; position:absolute; -webkit-border-radius:5px; -moz-border-radius:5px; -moz-box-shadow:0 2px 4px rgba(0,0,0,.6); min-width:100%; z-index:100; background:white; display:none; -webkit-box-shadow:0 2px 4px rgba(0,0,0,.6); -webkit-background-clip:padding-box;} #product-menu li.supermenu:hover ul {display:block;} #product-menu li.submenu {white-space:nowrap; display:inline; list-style-type:none; margin:0; } #product-menu li.submenu a {display:block; padding:5px 12px; position:relative;} #product-menu li.submenu:hover a {background:#7E98B7; color:white; } #filter-bar {width:100%; float:left; padding:30px 0 30px;} #list-grid .button {margin-right:7px;} #list-grid .pressed {background:#ccc;} #sorting {float:right;} #sorting .button {margin-left:7px;} #sortbutton_active {background-color:#ccc; color:white;} #main {float:left; width:100%;} #main.devide {border-top:1px solid #eee; } /* CART ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #cart-wrapper { font-size:14px; display:none; float:left; width:100%; color:#91c0a2; background-color:#dff2e3; -webkit-border-radius:8px; -moz-border-radius:8px;} #loading-cart { padding:13px 0 14px; width:100%; text-align:center; font-weight:bold;} #cart {width:100%; float:left;} #cart_checkout { -webkit-border-radius:4px; -moz-border-radius:4px; font-size:13px; padding:6px 15px 5px; float:right;} #cart-main {float:left; width:100%; padding:8px 0 8px 0; height:29px; -webkit-user-select:none; } #switch {width:20px; height:17px; padding:6px 15px 0; border:none; cursor:pointer; float:left; } #switch #arrow {background:url("arrow.png"); background-repeat:no-repeat; height:17px; width:17px;} #switch .down {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);} @-webkit-keyframes arrowOpen { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(45deg); } } @-webkit-keyframes arrowClose { 0% { -webkit-transform:rotate(45deg); } 100% { -webkit-transform:rotate(0deg); } } #arrow { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);} #arrow.arrow-open { -webkit-animation-name: arrowOpen; -webkit-animation-duration: .25s; -webkit-transform: rotate(45deg); -moz-animation-name: arrowOpen; -moz-animation-duration: .25s; -moz-transform: rotate(45deg);} #arrow.arrow-close { -webkit-animation-name: arrowClose; -webkit-animation-duration: .25s; -webkit-transform: rotate(0deg); -moz-animation-name: arrowClose; -moz-animation-duration: .25s; -moz-transform: rotate(0deg);} #compact {z-index:0; font-weight:bold; padding:5px 0; float:left; width:430px; cursor:pointer; -webkit-user-select:none; background-color:#dff2e3;} #compact:hover {color:#578760;} #cart_right {padding-right:8px;} #totals {text-align:right; padding:6px 110px 0 0; font-size:16px; color:#91c0a2;} #totals .subtotal, #totals .total {font-weight:bold; color:#578760; } #cart input { width:22px; margin:1px 0 0 0; height:18px; border:none; color:#77818a; font-size:12px; font-weight:bold; text-align:center; -webkit-border-radius:3px; -moz-border-radius:3px; -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.3); -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.3); background-color:#edf1f5;} #lines-wrapper {border-top:1px solid #c9e1ce; float:left; width:100%; } #lines-wrapper .item {padding:3px 0 3px 35px; float:left; margin:0; } #lines-wrapper .item .item-wrapper {padding:9px 10px; margin:0; float:left; width:400px; background-color:white; -webkit-border-radius:4px; -moz-border-radius:4px;} #lines-wrapper .item .td-quantity {width:30px; float:left;} #lines-wrapper .item .name {float:left;} #lines-wrapper .item a {margin:2px 0 0 10px; display:block; font-weight:bold; } #lines-wrapper .item .subtotal, #lines-wrapper .item .formattedCurrency {display:block; color:#778088; font-weight:normal; float:right; padding:2px 0 0 0;} #lines-wrapper .item .td-remove {width:30px; float:right;} #lines {float:left; width:910px; padding:20px 0px; margin:0;} #lines li {list-style-type:none; } #lines a {color:#778088;} .remove_item {background-image:url("remove.png"); background-repeat:no-repeat; width:15px; height:15px; display:block; margin-top:3px; cursor:pointer;float:right; background-image:url("remove.png"); background-repeat:no-repeat;} .remove_item:hover {background-position:left -15px;} /* BROWSE PAGE ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ .labels a {font-weight:bold;} .labels {color:#6f93b8;font-size:11px; line-height:14px; margin:6px 0 0 0;} .itemsincart {display:none;} .picfiller {font:20px "Georgia";font-style:italic; font-weight:normal; background:#efefef; color:#BBB;} #list {float:left; width:100%;} #list .product {float:left; width:452px;} #list .product .left {float:left; width:145px; position:relative;} #list .product h5 {line-height:100%;} #list .product .border {width:143px; height:143px; position:absolute; left:0; right:0; border:1px solid black; opacity:.1;} #list .product .right {width:285px; float:right;} #list .product a img {border:none; float:left;margin-right:20px;} #list .product .buttons {float:left; padding:10px 0 0 0; height:29px; font-weight:bold; cursor:pointer;} #list .product .buttons .plus {font-weight:normal; color:#aaa;} #list .product .description {line-height:1.3em; margin-top:10px;} #list .picfiller {width:125px;height:125px; display:block; overflow:hidden; float:left;margin-right:15px;padding:10px;} #list .product .itemsincart {margin-left:7px;} #list .nobreak {width:40px;float:left; height:100px;} #list .break {clear:both;height:40px;} #grid {float:left; width:100%;} #grid .product {float:left; position:relative;} #grid .product a {display:block;} #grid .product a span {display:block;} #grid .product .border {width:204px; height:204px; position:absolute; left:0; right:0; border:1px solid black; opacity:.1;} #grid .product .picfiller {width:186px;height:186px; display:block; overflow:hidden; float:left;padding:10px;} #grid .product .title {background-color:black; position:absolute; color:white; bottom:0; left:0; font-weight:bold; -moz-border-radius-topright:7px; -moz-border-radius-topleft:7px; display:none; padding:10px; -webkit-border-top-right-radius:7px; -webkit-border-top-left-radius:7px; margin:0 10px;} #grid .product .formattedCurrency {font-weight:normal; color:#aaa;} #grid .nobreak {width:40px;float:left; height:100px;} #grid .break {clear:both;height:40px;} #notfound {width:945px;text-align:center;margin:100px 0;} /* ITEM PAGE ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #gallery {width:440px;float:left;margin:40px 30px 20px 0;border-right:1px dashed #eee; padding:0 32px 0 0;} #gallery .center {text-align:center; float:left; width:100%; padding:0;} #gallery .fullimage {margin:0 auto; display:block;} #gallery .thumbnails {float:left; width:100%; text-align:center; padding-top:20px;} #gallery .thumbnails .border {width:131px; height:131px; position:absolute; left:0; top:0; border:1px solid black; opacity:.1; cursor:pointer;} #gallery .thumb-wrapper {width:133px; height:133px; position:relative; float:left;} #gallery .thumbnail {margin:20px 20px 0 0; padding:0;} #gallery .thumbnaillast {cursor:pointer; margin:20px 0 0 0;padding:0;} #productdata {width:440px;margin:40px 0; float:left; line-height:1.6em;} #productdata h3 {color:#bbb;text-transform:uppercase;margin:0;} #productdata h2 {color:#222;font-weight:normal;font-size:24px;margin:5px 0 1em;line-height:1.2em;} #productdata select {display:block;margin:20px 0;} #productdata .labels {font-size:1em; margin:2em 0 1em;} #productdata .itemsincart {font-size:21px; margin-left:10px;} #productdata .button {font-size:20px; margin-top:15px; padding:8px 15px; } /* VARIATIONS ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #variations table {width:100%; margin:40px 0 0 0;} #variations th {text-align:left; padding:0 0 2px 5px; font-size:14px; color:#2a3640; -webkit-user-select:none; -moz-user-select:none;cursor:pointer;} #variations td {padding:10px 3px;margin:0; border-top:1px solid #EAECED;} #variations .variation_image {width:15px;padding:4px 0;} #variations .empty {font-weight:normal;padding-right:5px;} #variations label {position:absolute; width:390px; padding:13px 3px;margin:-10px 0 0 -5px; height:1em; cursor:pointer; z-index:200;} #variations tbody tr td {padding-left:5px;} #variations tbody tr:hover td {background-color:#edf2f7;} #variations .variation-link {width:23px;} #variations .variations-arrow {color:white;font-size:21px;text-decoration:none; display:block; height:18px; width:17px; font-weight:bold; padding-left:1px; background-color:#bbb;-webkit-border-radius: 20px;-moz-border-radius: 20px; line-height:15px; text-align:center;} #variations .variations-arrow:hover {background-color:black;} .td_input {width:10px;} .empty {color:#ADADAD;} .empty #sorttable_sortrevind {display:none;} .empty #sorttable_sortfwdind {display:none;} .sorttable_nosort {font-weight:normal;} #sorttable_sortrevind, #sorttable_sortfwdind {font-size:0;background-image:url('sort_arrows.gif');width:18px;height:24px; float:left; margin-right:0px; color:#cccbc7;} #sorttable_sortrevind {background-position:right top;} #sorttable_sortfwdind {background-position:right -25px;} #add-variation {opacity:1; position:relative;} #add-variation.inactive {background:#e2e2e2;} #add-variation.inactive:hover {background:#e2e2e2;} #add-variation.inactive:active {-webkit-box-shadow:none;-moz-box-shadow:none;} #add-variation.inactive:hover span.message {display:block; opacity:1;} #add-variation span.message { opacity:0; text-align:center; line-height:18px; position:absolute; background:#edd17c; font-size:11px; padding:5px 0 0 0 ; -moz-border-radius:4px; -webkit-border-radius:4px; height:22px; width:100%; top:40px; left:0;} @-webkit-keyframes slideUp { 0% {top:0;} 100% {top:40px; }} @-moz-keyframes slideUp { 0% {top:0;} 100% {top:40px; }} #add-variation.inactive:hover span.message:not(:target) { -moz-animation-name: slideUp; -moz-animation-duration: .1s; -moz-transition: opacity .5s linear; -webkit-animation-name: slideUp; -webkit-animation-duration: .1s; -webkit-transition: opacity .5s linear;} /* BOTTOM BAR ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #bottombar {float:left;border-top:1px solid #eee;width:944px;padding-top:10px;margin-top:20px;} .pagination {width:400px;margin:0 auto;text-align:center; } .pagination span {padding:3px 8px;text-decoration:none;background-color:#edf1f5; color:#77818a; line-height:1.6em; -webkit-border-radius: 4px; -moz-border-radius: 4px; font-weight:bold;} .pagination a {padding:3px 8px;text-decoration:none;color:#aaa; line-height:1.6em; -webkit-border-radius: 4px; -moz-border-radius: 4px;} .pagination a:hover {background:#edf1f5; color:#77818a;} /* WELCOME PAGE ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */ #intro {float:left; width:450px; margin:0 0 45px 0;} #intro .textile {margin:0; padding-top:15px;} #intro h1 {float:left; font-weight:normal; color:#222; width: expression(document.body.clientWidth < 497? "auto" : "495px"); min-width:495px;} #intro p {width:450px; color:#777; line-height:24px; font-size:16px; float:left; padding:15px 0; margin:0;} #intro h1 span {color:#bbb;} #featured_products {float:left; width:960px; margin-top:80px; } #featured_products img {border:none;} #featured_products a.feature {position:relative; float:left;} #featured_products div.left {float:left; width:450px; } #featured_products div.right {float:right; width:450px;} #featured_products img {-webkit-border-radius:10px; -moz-border-radius:10px; float:left; -webkit-background-clip:padding-box; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.8);} #featured_products .break {clear:both;height:1px; margin:0;} #featured_products .nobreak {margin:0;} #featured_products .title {background-color:black; position:absolute; color:white; bottom:0; left:0; font-weight:bold; -moz-border-radius-topright:7px; -moz-border-radius-topleft:7px; font-size:20px; -webkit-border-top-right-radius:7px; -webkit-border-top-left-radius:7px; display:none; padding:20px; margin:0 20px;} #featured_products .formattedCurrency {font-weight:normal; color:#aaa; padding:0 10px;} #featured_products .left {padding:0 45px 0 0;} #featured_products .right {padding:0 0px 45px 0;} /* FOOTER */ #footer {width:945px;text-align:center;margin:50px auto 30px auto;color:#bbb;font-size:11px; float:left;}