/* 
	File:			wsi-williams-sonoma.css
	Author:			Erin Lathers
	Created:		10-16-2008
	Description:	Styles specific for WSI Corp Site - Williams-Sonoma

*/
/* Shared brand styles */
div#header div.nav { margin-bottom: -3em; position: relative; z-index: 999; }
div#header div.nav ul#nav-brands { width: 98%; margin-left: .2em; margin: 0 0 0 0.2em; padding-left : 0; background-color:#FFFFFF; }

div#content { border: .1em solid #af8f48; background-color: #FFFFFF; position: relative; margin-top: 0.5em; }
div#content #intro { border: .1em solid #c09f58; margin: 3.8em 6.5em; padding: 0; }
div#content h1 { color: #9D9D9D;}
div#content div#brand-header { padding-right: 10em; width: 50.8em; }
div#content div#brand-header h2#brand-logo { padding: 2.95em 0; text-align: center; width: 100%; border-right: .1em solid #c09f58; }
div#content div#content-wrapper { border-top: 1px solid #af8f48; width: 60.9em;}


div#content #intro h1 { color: #9D9D9D; font-size: 1.65em; font-weight: bold;}
div#content #intro div.text-wrapper p { font-family: "Times New Roman", Times, serif; font-size: 1.3em; line-height: 1.3em; text-align: justify; color: #8c8b8b; letter-spacing: 0.005em; }
 font-weight: bold; font-size: 1.3em; line-height: 1.2em; text-align: justify; letter-spacing: .01em;
div#content #intro div#brand-header { background-repeat: no-repeat; background-position: right top;}


div#content ul.nav-tertiary { float: left; background-color: #fafaee; padding: 1.15em 0; _padding: 1.2em 0; /* IE6 hack */ width: 100%; border-top: 1px solid #c09f58; border-right: .1em solid #c09f58;}
div#content ul.nav-tertiary li { float: left; width: auto; padding: 0 1em;}
div#content ul.nav-tertiary li.first { padding-left: 9.5em;}
div#content ul.nav-tertiary li a { text-decoration: none; text-transform: uppercase;}
div#content ul.nav-tertiary li a:hover { color:#4f4f4f;}
/* end Shared company overview styles */

/* Landing Page */
body#ws-landing div#header div.nav ul#nav-brands {background-color:#ece7d8; margin-left: 0; padding-left: 0; width: 100%; }
body#ws-landing div#header div.nav ul#nav-brands li.first { padding-left: 6.75em;}
body#ws-landing div.landing { border: 1px solid #c09f58; float: left; width: 73.8em; margin-top: 10px; }
body#ws-landing div#header div.nav { margin-bottom: 0;}
body#ws-landing div.landing div.text-wrapper { float: right; padding: 6em 3em 2em 2em; width: 27.45em; }
body#ws-landing div.landing div.text-wrapper h1 { padding-bottom: .8em;}
body#ws-landing div.landing div.text-wrapper p.drop-case { font-weight: normal; font-size: 1.3em; line-height: 1.2em; text-align: justify; letter-spacing: -0.001em; color: #8c8b8b; }
body#ws-landing div.landing div.text-wrapper p.drop-case:First-Letter { float: left; font-size: 3em; line-height : .75em; padding-top: 0.05em; display : block; }
body#ws-landing div.landing div.images { padding: .8em .8em 2.7em .8em; float: left; width: auto; border-right: .1em solid #c09f58;  }
body#ws-landing div.landing div.images ul#channels { float: left; width: auto; padding : 9px 0 0 0; position: relative; font-size: 100%; }
body#ws-landing div.landing div.images ul#channels li { float : left; padding : 0 0 0 1.2em; margin : 0; }
body#ws-landing div ul#channels li a { background-repeat: no-repeat; float: left;}
body#ws-landing div ul#channels li a:hover img,
body#ws-landing div ul#channels li.channel-hover a img { visibility: hidden;}
body#ws-landing div ul#channels li#retail a { background-image: url('../images/company-overview/ws/img_retail_on.jpg')}
body#ws-landing div ul#channels li#catalog a { background-image: url('../images/company-overview/ws/img_catalog_on.jpg')}
body#ws-landing div ul#channels li#online a { background-image: url('../images/company-overview/ws/img_online_on.jpg')}
body#ws-landing div ul#channels li#publishing a { background-image: url('../images/company-overview/ws/img_publishing_on.jpg')}
body#ws-landing div ul#channels li#products a { background-image: url('../images/company-overview/ws/img_products_on.jpg')}
body#ws-landing div ul#channels li ul.callout { position: absolute; top: 7.6em; left: -999em; float: left; color:#9D9D9D; font-size: 1.2em; font-family:"Times New Roman", Times, serif; font-weight: bold; font-style: italic; line-height: 1.2em; }
body#ws-landing div ul#channels li ul.callout li { width: 30em; text-align: center;  }
body#ws-landing div ul#channels li:hover ul.callout, 
body#ws-landing div ul#channels li.channel-hover ul.callout, 
body#ws-landing div ul#channels li.channel-hover ul.callout li { left: 0em;}
/* end Landing Page */


/* Retail */
body#ws-retail div#content #intro div.hero-container { float: right; width: 30.6em;}
body#ws-retail div#content #intro div.text-wrapper { float: left;  width: 26.5em; padding: 1.25em 1.75em 0em 1.75em; }
body#ws-retail div#content #intro div#brand-header { background-image: url('../images/company-overview/ws/head_retail.jpg');background-repeat: no-repeat; background-position: right top;}
body#ws-retail div#content #intro a.find-store { display: block; text-indent: -9999em; background-image:url('../images/company-overview/company_overview_sprite.gif'); height: 1.8em; width: 8.8em; background-repeat: no-repeat; background-position: -10px -50px;  margin-top: 2em; position: relative; left: 9em;}
/* end Retail */

/* Catalog */
body#ws-catalog div#content #intro div.hero-container { float: left; width: 28.5em; }
body#ws-catalog div#content #intro div.text-wrapper { float: right; width: 28em; padding: 4em 2em 0em 1em; }
body#ws-catalog div#content #intro div#brand-header { background-image: url('../images/company-overview/ws/head_catalog.jpg'); background-repeat: no-repeat; background-position: right top;}
body#ws-catalog div#content #intro a.request-catalog { display: block; text-indent: -9999em; background-image:url('../images/company-overview/company_overview_sprite.gif'); height: 1.8em; width: 12.5em; background-repeat: no-repeat; background-position: -10px -10px;  margin-top: 2em; position: relative; left: 7.5em;}
/* end Catalog */

/* Online */
body#ws-online div#content #intro div.hero-container { float: right; width: 29.5em;}
body#ws-online div#content #intro div.text-wrapper { float: left; width: 28em; padding: 4em 1em 0em 2em; }
body#ws-online div#content #intro div#brand-header { background-image: url('../images/company-overview/ws/head_online.jpg'); background-repeat: no-repeat; background-position: right top;}
body#ws-online div#content #intro a.visit-brand { display: block; text-indent: -9999em; background-image:url('../images/company-overview/company_overview_sprite.gif'); height: 1.8em; width: 17.5em; background-repeat: no-repeat; background-position: -10px -30px;  margin-top: 2em; position: relative; left: 5em;}
/* end Online */

/* Publishing */
body#ws-publishing div#content #intro div.hero-container { float: left; width: 27.5em;}
body#ws-publishing div#content #intro div.text-wrapper { float: right; width: 30.5em; padding: 3em 2.5em 2em 0em; }
body#ws-publishing div#content #intro div#brand-header { background-image: url('../images/company-overview/ws/head_publishing.jpg'); background-repeat: no-repeat; background-position: right top;}
/* end Publishing */

/* Products */
body#ws-products div#wrap { margin: 1em 0 0 1em; text-align: left; width: 63em; position: relative;}
body#ws-products div#header, body#ws-products div#footer { display: none;}

body#ws-products ul#pagination { float: right; position: absolute; top: 1em; right: 1em; z-index: 999;}
body#ws-products ul#pagination li { float: left; padding: .25em; }
body#ws-products ul#pagination li a { color:#CCCCCC; text-decoration: none; font-weight: bold; font-size: 1.1em;}
body#ws-products ul#pagination li a:hover,
body#ws-products ul#pagination li.active a { color:#333}

body#ws-products div.pop-content { border: .1em solid #c09f58; background-color: #FFFFFF; position: relative; width: 100% }
body#ws-products div.pop-content div.hero-container { float: left; width: 25em; /* IE6 hack to get the margins around the hero uniform */ _margin-bottom: -.3em; }
body#ws-products div.pop-content div.text-wrapper { float: right; width: 34.5em; padding: 1.5em; }
body#ws-products div.pop-content div.text-wrapper h1 { background-image:url('../images/company-overview/underline_brown.gif'); background-repeat: no-repeat; background-position: bottom center; padding: 1.75em 0 .6em 0; margin-bottom: .5em; font-variant:small-caps; text-transform: none; color:#8c8b8b; letter-spacing: 0em; font-weight: bold; }
body#ws-products div.pop-content div.text-wrapper h1.ws-header { padding: 4em 0 .5em 0; margin: 0; background-image: none; height: auto; }
body#ws-products div.pop-content div.text-wrapper p.drop-case { text-align: justify; font-size: 1.2em; color: #8c8b8b; font-weight: normal; line-height: 1.5em; padding-bottom: 0;}
body#ws-products div.pop-content div.text-wrapper p.drop-case:First-Letter { font-size: 3.69em; line-height: .7em; font-weight: normal; margin-top : 0.02em; margin-right: -0.01em;}

body#ws-products div.pop-content ul.page-links { position: relative; right: 1em; top: 29.25em; /* IE6 hack to get the back/next buttons positioned*/ _top: 29.5em; display: block; float: right; }
body#ws-products div.pop-content ul.page-links li { float: left; padding-left: 1em; display: block;}
body#ws-products div.pop-content ul.page-links li a { text-transform: uppercase; color:#CCCCCC; text-decoration: none; }
body#ws-products div.pop-content ul.page-links li a:hover { color:#5b5a5a }
body#ws-products div.pop-content ul.page-links li.back-link a { background-image:url('../images/common/arrow_lt_ltgrey.gif'); background-repeat: no-repeat; background-position:center left; padding-left: 1em;}
body#ws-products div.pop-content ul.page-links li.back-link a:hover { background-image:url('../images/common/arrow_lt_dkgrey.gif');}
body#ws-products div.pop-content ul.page-links li.next-link a { background-image:url('../images/common/arrow_rt_ltgrey.gif'); background-repeat: no-repeat; background-position: center right; padding-right: 1em;}
body#ws-products  div.pop-content ul.page-links li.next-link a:hover {background-image:url('../images/common/arrow_rt_dkgrey.gif');}
/* end Products */