/*
page custom colors
*/
html, body { background-color: #fffac4; }
#menu a:hover ins, #menu li:hover ins { background: #fff56d; }
#menu li.selected a ins { background: #fff56d; }
#socialnw li { border-left: 1px #fffac4 solid; }
#menufooter li { border-right: 1px #fffac4 solid; }
#menu ul a:hover li.col, #menu ul li:hover li.col {
background-color: #fff56d;
border-right: none;
border-left: 1px #fffac4 solid;
border-bottom: 5px #fffac4 solid;
}
#menu ul a:hover li.first, #menu ul li:hover li.first { border-left: 5px solid #fffac4; }
#menu ul li.last, #menu ul li.last { border-right: 5px solid #fffac4 !important; }
div#header { height: 100px; }
a.share { width: 80px; background-position: 0 -374px; }
/*
page styles
*/
.breadcrumb {
float: left;
display: inline;
width: 100%;
font-style: italic;
font-size: 16px;
color: #ef3e42;
margin-top: 3px;
padding: 0 0 5px 0;
}
.breadcrumb li {
display: inline;
}
.breadcrumb li a,
.breadcrumb li a:visited,
.breadcrumb li a:active {
color: #000;
padding-right: 20px;
margin-right: 11px;
background: url(../img/bg_breadcrumb.gif) no-repeat 100% 0.6em;
}
div.brand {
float: left;
display: inline;
width: 100%;
padding-bottom: 15px;
}
div.brand div.sections {
float: left;
display: inline;
width: 306px;
background-color: #fff56d;
padding: 5px 18px;
min-height: 308px;
height: auto !important;
height: 308px;
overflow: hidden;
}
div.brand div.sections h1 {
font-family: "Placard Bold Condensed";
font-size: 80px;
text-transform: uppercase;
overflow: hidden;
line-height: 63px;
margin-top: 15px;
}
div.brand div.sections ul {
width: 100%;
margin-top: 20px;
}
div.brand div.sections ul li {
display: inline;
font-size: 20px;
font-style: italic;
}
div.brand div {
float: left;
display: inline;
}
div.brand div.img {
font-size: 0;
}
div.brand div.img img {
float: left;
display: inline;
}
div.headbar {
float: left;
display: inline;
width: 964px;
clear: both;
background-color: #000;
padding: 2px 8px;
margin: 0 0 0 0;
overflow: hidden;
position: relative;
min-height: 43px;
height: auto !important;
height: 43px;
}
div.headbar h3 {
float: left;
display: inline;
position: static;
width: auto;
font-family: "Placard Bold Condensed";
font-size: 38px;
color: #fffac4;
text-transform: uppercase;
display: inline;
height: 43px;
overflow: hidden;
text-indent: 0;
}
div.headbar ul.filters {
white-space: nowrap;
float: right;
display: inline;
width: auto;
margin: 12px 10px 1px 0;
*margin: 10px 10px 1px 0;
_margin: 10px 10px 1px 0;
line-height: 20px;
padding-left: 70px;
background: url(../img/bg_filters.gif) no-repeat top left;
*background: url(../img/bg_filters.gif) no-repeat 0.1em left;
_background: url(../img/bg_filters.gif) no-repeat 0.1em left;
}
div.headbar ul.filters li * {
float: left;
display: inline;
}
div.headbar ul.filters li {
float: left;
display: inline !important;
padding-right: 15px;
margin-right: 6px;
background: url(../img/filter_separator.gif) no-repeat top right;
_background: url(../img/filter_separator.gif) no-repeat 100% 2px;
*background: url(../img/filter_separator.gif) no-repeat 100% 2px;
background /*\**/: url(../img/filter_separator.gif) no-repeat 100% 2px\9; /* ie 8 hack */
margin-top /*\**/: -3px\9;
}
div.headbar ul.filters li.last {
background: none;
padding: 0;
margin: 0;
margin-top /*\**/: -2px\9;
}
div.headbar ul.filters li a, div.headbar ul.filters li {
font-family: "Placard Bold Condensed";
font-weight: bold;
text-transform: uppercase;
font-size: 22px;
color: #FFF;
}
div.headbar ul.filters li.selected a,
div.headbar ul.filters li.selected a:active
div.headbar ul.filters li.selected a:visited {
float: left;
display: inline;
background-color: #fffac4;
color: #000;
padding: 2px 4px 1px 4px;
padding /*\**/: 1px 4px 2px 4px\9;
_padding: 2px 4px 1px 4px;
*padding: 1px 4px 2px 4px;
margin: -2px 0 0 0;
margin /*\**/: 0px 0 0 0\9;
*margin: -1px 0 0 0;
}
div.grid {
float: left;
display: inline;
width: 100%;
overflow: hidden;
position: relative;
}
#tagcloud {
width: 980px;
height: 1532px;
}
.collections { margin-bottom: 15px; }
.collections,
.collections ul {
float: left;
display: inline;
width: 100%;
line-height: 17px;
font-style: italic;
}
.collections ul { background: #fff56d; }
.collections ul li.col {
float: left;
display: inline;
width: 308px;
padding: 9px;
border-right: 1px solid #fffac4;
}
.collections ul li.last { border: none; }
.collections ul ul a,
.collections ul ul a:visited,
.collections ul ul a:active {
padding: 0;
font-size: 13px;
background: none;
}
.collections ul ul a:hover {
text-decoration: underline;
}
.collections ul ul { margin-top: 5px; }
.collections a {
display: block;
padding-bottom: 10px;
background: url(../img/hdot_black_bg_yellow.gif) repeat-x bottom left;
}
.grid ul.outfit {
float: left;
display: inline;
width: 110%;
margin-top: -16px;
}
.grid ul.outfit li {
float: left;
display: inline;
margin: 16px 15px 0 0;
}
.grid ul.outfit li img {
float: left;
display: inline;
}
/*
product page
*/
div.prod {
float: left;
display: inline;
width: 100%;
padding-bottom: 15px;
}
div.prod div.img {
background: #fff;
float: left;
display: inline;
width: 648px;
height: 535px;
margin-right: 1px;
font-size: 0;
}
div.prod div.data {
float: left;
display: inline;
width: 331px;
min-height: 535px;
height: auto !important;
height: 535px;
background: #FFF;
position: relative;
overflow: hidden;
}
div.prod div.data div.wrapper {
padding: 20px 20px 35px 20px;
overflow: hidden;
}
div.prod div.data h1 {
font-family: "Placard Bold Condensed";
font-size: 41px;
line-height: 35px;
text-transform: uppercase;
padding: 0 65px 15px 0;
}
div.prod div.data div.price {
position: absolute;
top: 22px;
right: 20px;
font-size: 15px;
font-style: italic;
}
div.prod div.data p {
line-height: 18px;
margin: 10px 0 10px 0;
font-style: italic;
background: url(../img/hdot_blue.gif) repeat-x top left;
}
div.prod div.outfit p {
background: none !important;
}
div.prod div.data div.btns {
clear: both;
float: left;
display: inline;
width: 100%;
padding: 23px 0 0 0;
background: url(../img/hdot_blue.gif) repeat-x top left;
}
div.prod div.outfit div.btns {
padding: 10px 0 25px 0;
background: none !important;
}
div.prod div.data div.btns a {
float: left;
display: inline;
margin-right: 10px;
}
div.prod div.outfit ul {
float: left;
display: inline;
background: url(../img/hdot_blue.gif) repeat-x top left;
padding-top: 4px;
width: 100%;
}
div.prod div.outfit ul li div {
float: left;
display: inline;
width: 100%;
padding-bottom: 6px;
background: url(../img/hdot_blue.gif) repeat-x bottom left;
}
div.prod div.outfit ul li h2 {
font-family: "Placard Bold Condensed";
text-transform: uppercase;
font-size: 24px;
float: left;
display: inline;
width: 125px;
overflow: hidden;
margin: 8px 10px 0 8px;
height: 33px;
overflow: hidden;
}
div.prod div.outfit ul li h2.no-price {
width: 270px;
}
* html div.prod div.outfit ul li h2 a { display: block; }
div.prod div.outfit ul li span.price {
float: left;
display: inline;
margin: 15px 0 0 0;
font-size: 15px;
}
div.prod div.outfit ul li a.btn {
float: right;
display: inline;
margin: 5px 3px 4px 0;
}
div.prod div.data div.links {
clear: both;
position: absolute;
left: 20px;
bottom: 20px;
font-size: 14px;
font-style: italic;
width: 280px;
float: left;
display: inline;
}
.comment-box ul {
min-height: 259px;
height: auto !important;
height: 259px;
width: 282px;
}
div.boxes div.comment-box, div.boxes div.tag-box, div.boxes div.related-box {
padding: 0;
min-height: 359px;
height: auto !important;
height: 359px;
}
div.tag-box p.no-data {
min-height: 212px;
height: auto !important;
height: 212px;
}
div.boxes {
float: left;
display: inline;
width: 100%;
position: relative;
}
div.boxes div.tag-box {
float: left;
display: inline;
margin-left: 16px;
margin-right: 16px;
overflow: hidden;
}
div.tag-box div.cadd-tag {
position: absolute;
top: 294px;
left: 0px;
width: 316px;
z-index: 50;
height: 65px;
filter: alpha(opacity=100);
background: #FFF;
}
div.boxes div.tag-box a.link {
margin: 19px 0 0px 0px;
}
div.boxes div.tag-box .head {
background-position: 19px -300px;
}
div.boxes div.tag-box ul { height: 233px; padding-bottom: 0; }
div.boxes div.tag-box li a {
background-image: url(../img/tag_separator_prod.gif);
}
div.boxes div.tag-box a.link {
float: left;
display: inline;
margin: 30px 0 0 15px;
height: 22px;
}
.related-box {
float: right;
display: inline;
font-style: italic;
width: 316px;
overflow: hidden;
}
.related-box .head {
height: 50px;
background: #000 url(../img/box_titles.gif) no-repeat 19px -350px;
}
.related-box h2 { visibility: hidden !important; }
.related-box ul {
float: left;
display: inline;
padding: 0;
width: 350px;
height: 259px;
overflow: hidden;
}
.related-box p.no-data {
background: #fff;
float: left;
display: inline;
padding:16px 20px 16px 20px;
width: 276px;
min-height: 227px;
height: auto !important;
height: 227px;
}
.related-box ul li {
float: left;
display: inline;
width: 332px;
}
.related-box ul li a {
float: left;
display: inline;
border: 8px solid #cbeaed;
font-size: 0;
margin: 0 16px 15px 0;
width: 134px;
height: 106px;
text-align: center;
background-repeat: no-repeat;
background-position: center center;
}
.related-box ul li a img { display: none; }
.related-box span { float: left; display: inline; font-size: 14px; margin: 6px 0 0 0px; }
.related-box a.view-all {
float: left;
display: inline;
width: 100%;
height: 50px;
background: #000 url(../img/links.gif) no-repeat 19px -82px;
}
.related-box a.view-all span { display: none; }
.relbox-wide ul { width: 1000px; }
.relbox-open a.view-all { background: #000 url(../img/links.gif) no-repeat 19px -131px; }
/*
collection preview
*/
ul.prods {
float: left;
display: inline;
width: 10000px;
padding-bottom: 1px;
}
ul.prods li,
ul.prods li a {
font-size: 0;
float: left;
display: inline;
}
.grid ul#coll-carousel li {
width: 97px;
margin-right: 1px;
}
/* carousel */
.grid .jcarousel-container {
position: relative;
}
.grid .jcarousel-clip {
width: 979px;
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.grid .jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.grid .jcarousel-list li,
.grid .jcarousel-item {
float: left;
list-style: none;
width: 97px;
height: 97px;
}
.grid .jcarousel-next, .grid .jcarousel-prev {
z-index: 3;
width: 53px;
height: 52px;
background: url(../img/btns_collection_preview.gif) no-repeat top left;
}
.grid .jcarousel-next {
position: absolute;
bottom: 0;
right: 1px;
cursor: pointer;
background-position: -53px 0;
}
.grid .jcarousel-prev {
position: absolute;
bottom: 0;
left: 1x;
cursor: pointer;
background-position: 0 0;
}
.grid #coll-carousel .jcarousel-item a {
position: relative;
font-size: 0;
width: 97px;
height: 97px;
background-repeat: no-repeat;
background-position: center center;
}
.grid #coll-carousel .jcarousel-item a img { display: none; }
.grid #coll-carousel .jcarousel-item span.overlay {
display: block;
position: absolute;
top: 0;
left: 0;
width: 97px;
height: 97px;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.grid #coll-carousel li.selected .overlay {
display: none !important;
}
#coll-loading {
position: absolute;
top: 44%;
left: 474px;
float: left;
display: inline;
width: 32px;
height: 32px;
background: url(../img/coll_loading.gif) no-repeat top left;
z-index: 5;
}
.coll-preview-content,
.coll-preview-content img,
.coll-preview-content a {
float: left;
display: inline;
width: 100%;
height: auto;
position: absolute;
z-index: 1;
font-size: 0;
color: #FFFAC4;
}
.coll-preview-content a { z-index: 1; }
.coll-preview-content img {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.coll-preview-content {
position: relative;
overflow: hidden;
margin-top: 1px;
}
.coll-preview-content .pleft {
position: absolute;
top: 0;
left: -980px;
z-index: 2;
}
.coll-preview-content .pright {
position: absolute;
top: 0;
left: 980px;
z-index: 2;
}
.coll-preview-content .linkright,
.coll-preview-content .linkleft {
position: absolute;
top: 0;
width: 150px;
height: 100%;
overflow: hidden;
z-index: 1000;
background: url(../img/blank.gif) no-repeat top left;
}
.coll-preview-content .linkright span,
.coll-preview-content .linkleft span {
clear: both;
z-index: 1500;
visibility: hidden;
position: absolute;
top: 45%;
font-size: 0;
text-indent: -9999em;
overflow: hidden;
background: url(../img/btns_collection_preview.gif) no-repeat top left;
width: 72px;
height: 41px;
}
.coll-preview-content .linkright span { background-position: -178px 0; right: 0; }
.coll-preview-content .linkleft span { background-position: -106px 0; left: 0; }
.coll-preview-content .linkleft { left: 0; }
.coll-preview-content .linkright { right: 0; }
.coll-preview-content a:hover.linkright,
.coll-preview-content a:hover.linkleft { direction: ltr; }
.coll-preview-content a:hover.linkright span,
.coll-preview-content a:hover.linkleft span { visibility: visible; }
.coll-preview-buy {
float: left;
display: inline;
width: 100%;
padding: 0;
padding: 0;
clear: both;
background: #000;
overflow: hidden;
}
.coll-preview-buy * { float: left; display: inline; }
.coll-preview-buy h3 {
line-height: 28px;
float: right;
padding: 7px 18px 0 0;
margin: 0 20px 0 0;
background: url(../img/arrow_yellow_bg_black.gif) no-repeat center right;
height: 38px;
}
.coll-preview-buy a {
float: right;
font-family: "Placard Bold Condensed";
font-weight: bold;
color: #fffac2;
font-size: 28px;
font-style: normal;
}
/** outfit slider **/
.outfit ul#coll-carousel li {
width: 291px;
}
.outfit .jcarousel-container {
clear: both;
position: relative;
padding-bottom: 4px;
}
.outfit .jcarousel-clip {
width: 291px;
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
height: 191px;
}
.outfit .jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.outfit .jcarousel-list li,
.outfit .jcarousel-item {
float: left;
list-style: none;
width: 291px;
height: 188px;
}
.outfit .jcarousel-next, .outfit .jcarousel-prev {
z-index: 3;
width: 21px;
height: 20px;
background: url(../img/btns_carousel_prod.gif) no-repeat top left;
}
.outfit .jcarousel-next {
position: absolute;
bottom: -25px;
right: 0px;
cursor: pointer;
background-position: -21px 0;
}
.outfit .jcarousel-prev {
position: absolute;
bottom: -25px;
right: 30px;
cursor: pointer;
background-position: 0 0;
}
.outfit .jcarousel-prev-disabled,
.outfit .jcarousel-next-disabled {
opacity: 0.4;
filter: alpha(opacity=40);
cursor: default;
}