/* 
	File:			shop.css
	Author:			Erin Lathers
	Created:		12-4-2008
	Description:	This file contains all styles for West Elm shop pages. 

*/

/********** General Shop Styles **********/
div.the-bar {width:93em;}
div.bottom {overflow:visible !important;}
div#hero-img { line-height: .1em; }
div#flashMoviePlaceHolder,
div#showFlashPathDiv1 { margin-bottom: .1em; *margin-bottom: .2em; position: relative; overflow: hidden; /* This is taken from PT - not yet styled for westelm */ }
div#flashMoviePlaceHolder *, 
div#showFlashPathDiv * { float: left; /* This is taken from PT - not yet styled for westelm */ }
div.we-inner-wrap { overflow: hidden;}
div#room-content div#content,
div#theme-landing div#content { padding: 0 1.5em;}
div#room-landing div#content { padding : 0; }
div#sidebar li {text-transform:capitalize;}
div#sidebar ul li a.Sale {color:#990000;}
div#sidebar ul li a.New { color : #333 !important; }

/********** Banner/Content Block Shop Styles **********/
div#sidebar div#related-promo1 {margin-left:-1.3em; margin-top:1em; width:17.4em; _margin-right:-1em; }
div#sidebar div#related-promo1 div.promo1 { }
div#sidebar div#related-promo1 img {padding-left:1em;}

div#sidebar div#left_email {}
div#sidebar div#left_email_signup {background-color:#888;height:17em;width:16.4em;margin:0 -1.5em 0 -1.4em;*margin-left:-1.4em;padding:2em 0 1em 1em;}
div#sidebar div#left_email_signup img {margin-left:1em;}
div#sidebar div#left_email_signup p {margin:1em 0 .5em 0; color:#fff; line-height:1.3em; font-size:1.1em;}
div#sidebar div#left_email_signup #joinEmail2 {margin-top:1.5em;}
div#sidebar div#left_email_signup #joinEmail2 fieldset.email input {width:15em;border:0.1em solid #CCCCCC;color:#666666;cursor:text;font-family:Verdana,Geneva,sans-serif;font-size:1em;height:1.3em;margin-right:0.6em;padding:0.1em 0 0.1em 0.5em;}
div#sidebar div#left_email_signup #joinEmail2 fieldset.submit-button .btn_sign-up {margin:1em 0 0 2.5em; *margin-left:3.5em;}
div#sidebar div#left_email_signup #joinEmail2 fieldset.hidden {display:none;}
div#hero-area div#left_email_signup {display:none;}

/******  Product Thumbnail Grid *****/
div#content ul.product-list { float: left; overflow: hidden; font-size: 1em; width: 74.1em; *width: 74.6em; /* IE Hack - 6 & 7 */ margin-right: -0.2em; display: block; margin-top : -1px !important; }

div#content ul.product-list li { background-image: url('../images/pip/pip_tape_subcat.gif');background-repeat: no-repeat; background-position : 2.5em 22.5em;float: left; display: block; height:30em; width: 20em; *width: 20.1em; /* IE Hack - 6 & 7 */  padding: 0 2.3em 99em 2.3em; margin-bottom: -93.5em; font-size: 1em; overflow: hidden; }
div#content ul.product-list.single-item { float: right; width: 24.7em; *width: 24.8em; /* IE Hack - 6 & 7 */ }
div#content ul.product-list li a {cursor: pointer; display: block; width: 20em; text-decoration: none; position: relative; }
div#content ul.product-list li a:link { display: block; cursor: pointer; }
div#content ul.product-list li span { text-align: center; line-height: 1.5em; display: block; padding: 0 0.7em; }
div#content ul.product-list li img.product-thumb { float: left; padding-bottom: 3em; }
div#content ul.product-list li span.product-thumb { color:#FFF; /* this only appears if there is not product thumb */}
div#content ul.product-list li span.product-name {font-size: 1.1em; text-transform: capitalize; font-weight: bold; line-height: 1.2; }  /*  color:#333; */
div#content ul.product-list li span.product-price { margin: 0; width: 92%; float: left;}
div#content ul.product-list li span.product-price span { font-size: 1.1em; }

	/**** Product Thumbnail Grid Flags ****/
	div#content ul.product-list li span.more-colors { clear: both; display: block; text-transform: capitalize; font-style:italic; padding: .1em .1em .2em .2em;  color: #838383;  _width: 17.9em; position:absolute; top: 207px; right: 8px; } /* removed margin-bottom: 1em; -as 6/28/10 */
	div#content ul.product-list li span.new-product { margin-right: .4em; margin-left:.8em; padding: 0; font-style:italic; color:#333333; position:absolute; top:208px; left:0px; }
	div#content ul.product-list li span.product-flags {  }
	div#content ul.product-list li span.product-flags span { font-size: 1em; margin-right: 0em; padding:0 0.3em; font-weight: bold; display: inline; text-transform:lowercase; }
	div#content ul.product-list li span.product-flags span.flag-image { display: inline-block; margin-top: -8px; position: relative; bottom: -6px; }
	/**** /Product Thumbnail Grid Flags ****/
/******  / Product Thumbnail Grid *****/


/* Category Page */
div#category div#hero-area {  width: 73.6em; /* IE Hack - 6 & 7*/ _height: 35em; padding: 0; margin: 0 -1px 0 0; } 
div#category div#hero-area div.tape {width:279px;height:118px; position: absolute; top: 1.5em; left: 67em; } /* z-index: 995; background-image: url('../images/pip/pip_tape_cat.gif');background-repeat: no-repeat; creative didn't tell me the tape image was going to be included in every hero image, not as a background image. Saving just in case they change their minds -as*/
div#category div#hero-area div.tape h1 {padding:1em 0 .2em 2em;margin:0 -1em;}
div#category div#hero-area div.tape div.hero-copy { width:23em;height:11.8em; padding: 0 0 0 2em; }
div#category div#hero-area div.sub-hero-img { display:none;}
div#category div#hero-area div.hero-copy { padding : 1em; *margin-top:-.2em;}
div#category div#hero-area img#hero-img { margin-bottom:1em;}
div#category div#hero-area div.sub-hero-img { }
div#category div#thumbnail-container { display:none; margin: 1.6em -.7em; padding: .1em 0 1em -1em; *padding-top: 0em; float: left; width: 74.6em; }
div#category div#hero-area p#hero-text { line-height: 1.3em; padding: 1em;}
div#category div#content { padding: 0 0em 1em 1em;}
div#category div#content h1 { padding: 0 0 .2em 0;}
div#category div#content ul.product-list { width: 74.6em; position: relative;  /* IE Hack - 6 */ border-width: 0; display: block;  clear: none; margin: 0 0 -0.1em 0; _margin-right: -.2em;/*IE6 Needs a little extra room. */ clear: both;}

div#category div#content ul.product-list li { width: 16.5em; *width: 16.1em; height: 16em; padding: 0; margin: 0 -.1em .1em 1.5em; *margin-top:.1em; /*IE6/7 Align top and bottom borders.*/ }
div#category div#content ul.product-list li a { width: 13.8em; height: 14em; position: relative; }
div#category div#content ul.product-list li a:hover span {  } 
div#category div#content ul.product-list li a span.product-thumb { margin:1em;text-align: center; }
div#category div#content ul.product-list li a span.product-thumb img { padding-left: 1em;padding-top:1em; }
div#category div#content ul.product-list li a span.product-name { padding: 0 0 0 1em; position: absolute; top: 12.8em; left: 0; z-index: 995; font-size: 1em; font-weight: bold; line-height: 1.1em; text-transform: uppercase;  }

/* end Category Page */

/* Subcategory Page */
div#sub-category div#sidebar-with-content div#content h1 { border-bottom: none; font-size:1.3; text-transform:lowercase;}
div#sub-category div#content { margin-left: 18.7em;  _margin-left: 18.5em; min-height: 35em; _height: 34.8em;  /* IE Hack - 6 */ margin-right: 1.1em;  *margin-right: .6em; _margin-right: 1em; }
div#sub-category div#sidebar-with-content { padding: 0 0 0 1em; float: left; overflow: hidden; width: 94em; _width: 94.5em;  position: relative;  }
div#sub-category div#sidebar li {text-transform : capitalize; }
div#sub-category div#hero-area { padding-bottom: .1em; }
div#sub-category div#hero-area img, div#sub-category div#hero-area div#showFlashPathDiv1 { }
div#sub-category div#hero-area div#hero-img-area {  float: left; overflow: hidden; margin-bottom:2em; }
div#sub-category div#hero-area div#hero-text { position:absolute; top:2.5em; left: 73em;  width: 20em;   }
div#sub-category div#hero-area div#hero-text p { line-height: 2em; padding-bottom: 1em;}
div#sub-category ul.product-list li span.product-thumb { width: 20em; height: 20.5em; display: block; /* this only appears if there is not product thumb */}
div#sub-category span.price-sale { padding-left: 0em; }

/* end Subcategory Page */

/* Theme Page */
div#theme-landing div#content { border : none; margin-left : 17em; }
div#theme-landing #secondary-nav { overflow : hidden; margin : 0; padding : 0; width : 74.25em; _width : 73.6em; }
div#theme-landing #secondary-nav ul { list-style-type : none; padding : 0; margin : 0; }
div#theme-landing #secondary-nav ul li { display : block; float : left; padding : 0; margin : 0; }

div#theme-landing div.content { width : 72.6em; *width : 73.1em; height : 58.3em; margin-top : -4px; *margin-top : -3px; margin-bottom : 1px; border : 1px solid #999; border-top : none; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
	div#theme-landing div.content { margin-top : -1px; }
}
div#theme-landing div.hidden { display : none; }
div#theme-landing div.content p { padding : 1.5em; }
div#theme-landing div.content p a { padding-right : 0.8em; font-weight : bold; text-decoration : none; background : url('../images/common/img_carat.gif') no-repeat; background-position : right 0.4em; }
div#theme-landing div.content a.hero { display : block; padding : 0 0.6em 0.6em; }

div#theme-narrow div#content { margin-left: 18.7em;  _margin-left: 18.5em; min-height: 35em; _height: 34.8em;  /* IE Hack - 6 */ margin-right: 3.5em;  *margin-right: 3em; _margin-right: 1.3em; }
div#theme-narrow div#sidebar-with-content, div#theme-wide div#sidebar-with-content { padding: 0 0 0 1em; float: left; overflow: hidden; width: 94em; _width: 94.5em;  position: relative;  }
div#theme-narrow div#hero-area { float: left; overflow: hidden; width: 49.3em; *width: 49.6em; }

div#theme-wide div#hero-area div#hero-text, div#theme-narrow div#hero-area div#hero-text { background : url('../images/theme/tape_theme_ln.gif') no-repeat; background-position : right 0.4em; padding: 1.3em 2.3em 3.4em; }
div#theme-wide div#hero-area div#hero-text h1, div#theme-narrow div#hero-area div#hero-text h1 {padding:0 0 .1em .2em; border-bottom: none; }
div#theme-wide div#hero-area div#hero-text p, div#theme-narrow div#hero-area div#hero-text p { line-height: 1.6em; }
div#theme-wide div#content ul.product-list li { padding: 0 1.6em 99em 1.6em; }
div#theme-wide div#content ul.product-list li { background-position:1.8em 22.5em; }
div#theme-wide div#content { margin-left: 18.7em;  _margin-left: 18.5em; min-height: 35em; _height: 34.8em;  /* IE Hack - 6 */ margin-right: 0; }

div#theme-wide div#hero-area { width:44em; float:left;}
div#theme-wide .breadcrumbspace {height:4em;}
div#theme-wide div#content { margin-left: 2em; }
div#theme-wide div#hero-area  div#hero-text { }
div#theme-wide div#hero-area  div#wide-hero-img-area { width: 74em; *width: 74.5em; overflow: hidden; margin-bottom:.1em;*margin-bottom:-.1em; }
div#theme-wide div#content ul.product-list { width: 94.1em; *width: 94.6em; }
div#theme-wide ul.product-list.single-item { border-bottom: 0; float: right; margin: 0; width: 47em !important; *width: 47.2em;}

div#theme-narrow div#hero-area img, div#theme-narrow div#hero-area div#showFlashPathDiv1 { margin-left: -0.1em; border-right: 1px solid #CCC;}


div#theme-narrow ul.product-list.single-item{ border-bottom: 0; float: right; margin: 0 -2em; width: 24.7em !important; *width: 24.9em; }
/* end Theme Page */

/* Room Pages */
div#room-category div#content,
div#room-landing div#content { margin-right: 1.1em; *margin-right: .6em; _margin-right: .7em; }
div#room-category div#content h1 { margin: 0; }
div#room-category div#content ul.product-list { border-bottom: 0; }

/* Gift Page */
div#gift-landing div#content {margin-right:1em; *margin-right:.5em; _margin-right:.5em; }
div#gift-landing div#content div#hero {padding:.5em;border-bottom:1px solid #ccc;padding-bottom:.05em;*padding-bottom:.5em; _padding-bottom:.5em;}
div#gift-landing div#content div#hero div#heroMovie {padding-bottom:.5em;}
div#gift-landing div#content div#banner {height:14.2em;}
/* end Gift Page */