/*	SONY | SONY STYLE.COM - CORE STYLES
 *	AUTHOR: Branden Thompson, Front End Architect | Creative Services - Branden.Thompson at am dot sony dot com
 *	DATE:	April 15, 2009
 *
 *	GUIDING PRINCIPLES:
 *	--------------------------------------------------------------------------------------------------------------
 *	- Styles in this file should ONLY be those that appear on EVERY SINGLE PAGE IN THE WEBSITE, otherwise it's a different file.
 *	- Single - 3 property styles: 1 line.  4+ Properties: indent.
 *	- Tabulate Nested Styles to reflect inheritance / give a psuedo portrait of the DOM.
 *
 *	- ***DOCUMENT THOROUGHLY!*** - 	Lots of different hands could work on this file so it's important to err on the side of 
 *									MORE documentation, rather than less.
 *
 *	- Hack for MSIE6 as a last resort (using *html .something{}, and making the corresponding Mozilla styles html>body .something{})
 *
 *	- All Changes to this file should be reviewed with CST and corresponding changes should be made within a 
 *	  "dev version" (file including comments) of this .css, and then minimized and published.
 *
 *	PERFORMANCE OPTIMIZATION PRINCIPLES:
 *	--------------------------------------------------------------------------------------------------------------
 *	Use whenever possible, in the following order:
 *
 *		- NEVER EVER IMPORT STYLESHEETS INTO ANOTHER .CSS FILE.  (@import causes render blocking in all browsers!)
 *		- id's (#example - should be unique and therefore is the fastest rendering)
 *		- classes (.example - second fastest)
 *		- use class names before type selectors (.listElement is faster than ul li{} )
 *		- Avoid universal selectors (*) and common type selectors (.something div{}, .something a{}, etc.)
 *		- Avoid property selctors: [HREF="blah.html"] {}
 *
 *		- Keep a copy with documentation for development in SVN or local repository, and minify for publication if possible.
 *		  (no user needs to see this documentation.)
 *		
*/

/* BEGIN HTML REDEFINTIIONS */
/* ----------------------------------------------------------------------------------------------------------- */
body {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #323232 url('../img/global/ss_core_bkg.gif') top repeat-x;
	font-family: arial;	
}


/* BEGIN GLOBAL CONTAINER STYLES */
/* ----------------------------------------------------------------------------------------------------------- */
#sonyStyleWebsite {
	width: 960px;
	margin: 0 auto;
	background: #dfdfdf;
	top: 0;
	clear: both;
	color: #dfdfdf;
	position: relative;
	font-size: 12px;
}
	/*	#accessibilityMessage:
	 *	----------------------------------------------------
	 *	The Accessibility message is our current "stopgap"
	 *	solution in order to alert visitors to Sony Style 
	 *	that use screen readers that they have some other 
	 *	options to reach us in the event that they have 
	 *	difficulties with the website.  This is a Sony Global
	 *	mandated requirement, but should not be used as a 
	 *	crutch to prevent us from making the totality of our 
	 *	online experience as accessible as possible.
	*/
	#accessibilityMessage {position: absolute; top: -900em;}
	
	
	/*
		**NOTE** BRT - 11.25.2009 - Shopping Cart Header Styles Have been moved to ss_cart_checkout_styles.css ****
	*/
	
	
/* BEGIN SONY STYLE GLOBAL HEADER STYLES */
/* ----------------------------------------------------------------------------------------------------------- */
	
	/*	BRT 11.24.2009 - We are completely re-tooling the Header Styles for Make.Believe 
	 *	As such, attempts will be make to strike a balance between ease of CSS maintainability
	 *	and front-end CSS render/performance optimization.
	*/
	#sonyStyleHeader {
		width: 960px;
		clear: both;
		background: #111;
		margin: 0;
		padding: 0;
		
	}
		/* Accessibility Message - Should be hidden from sighted users, but able to be read by Screen Readers */
		#accessibilityMessage{
			position: absolute;
			top: -3000px;
		}
		
		#logoLoginSearchSection{width: 906px; height: 65px; clear: both; margin: 0; padding: 0; position: relative; }
		
		/*	LOGOS
		 *	------------------------------------------------------------------------------------- */
		#makeBelieveHeader	{position: absolute; top: 15px; left: 28px; width: 100px; height: 35px;	margin: 0; padding: 0; background: transparent url('../img/global/make_believe_logo.gif') no-repeat;}		
		#sonyStyleLogo		{position: absolute; top: 15px; left: 802px; width: 130px; height: 35px; margin: 0; padding: 0; background: transparent url('../img/global/sony_style_logo.gif') no-repeat;}
		/*	------------------------------------------------------------------------------------- */
		
		#adminLinksAndGlobalPromos{
			position: absolute;
			top: 15px;
			left: 168px; /* AJ 12.24.2009 defect 4610  reduced left position by 10px */
			width: 610px;
			height: 45px;
			
			margin: 0;
			padding: 0;
		}	
		
		/* AJ 12.24.2009 defect 4585*/
		#topHeaderLinkId {padding-left: 0px;} 
		
		/*	Admin Links Area
		 *	------------------------------------------------------------------------------------- */
		 
		 	/*	BRT 12.1.2009 - I'm placing all the Admin Link IDs with their image icons here to
		 	 *					make it easier to find and subsequently edit them.
		 	*/
		 	
		 	#headerLoginMessage, #headerLoginMessageTab		{display: inline !important;}
		 	#myAccountAdminLink		{background: transparent url(../img/global/my_account_icon.gif) left center no-repeat; width: 125px;}
		 	#myCartLinkHeader		{background: transparent url(../img/global/my_cart_icon.gif)  5px 5px no-repeat;}

		 	/*
			#liveChatHeader 		{background: transparent url(../img/global/live_chat_icon.gif) 5px 5px no-repeat; display: inline-block;}
			per defect 4584 / 4585  placing recommended css from DEV for live chat styles AJ 12.24.09
			*/
			#liveChatHeader a {
			                        text-decoration: none;
			                        color: #eee;
			                        font-size: 11px;
			                        background: transparent url(../img/global/live_chat_icon.gif) 5px 5px no-repeat;
			                        display: inline-block;
			                        padding-left: 22px;
			                        margin:0;
			                  }

			                  #liveChatHeader a:link {color: #eee;} /* unvisited link */

			                  #liveChatHeader a:visited {color: #eee;} /* visited link */

			                  #liveChatHeader a:hover {color:#15B1E4} /* mouse over link */

			                  #liveChatHeader a:active {color:#15B1E4} /* selected link */
		
		 
			#adminLinksSection{
				width: 610px;
				height: 20px;
				line-height: 20px;
				color: #eee;
				font-size: 11px;
				clear: both;
				
			}
					
				.topHeaderSection{
					float: left;
					clear: none;
					margin-right: 10px;
					height: 20px;
					line-height: 20px;
					z-index: 110;
					font-size: 11px;
					display: inline;
					
					/*	BRT 12.18.2009 - This one property causes us a problem in the 
					 *	rendering tree for MSIE 7, where the object nodes within the 
					 *	dropdown content div to be rendered *behind* the object *if*
					 *	the child box is visibilty "hidden" - using "display" will 
					 *	take care of this issue.
					*/
					position: relative;
				}
						
					.topHeaderTitle {
						z-index: 16 !important;
						display: inline-block;
						_display: inline !important; /* for MSIE 6 */
						padding: 0 8px;
						margin: 0;
						line-height: 20px;
						height: 20px;				
					}
						.topHeaderTitle.onState .topHeaderLink{color: #15B1E4;} 
						
					
						
						/* This style needs to be applied to itesm with .hasDropContent *on click* */
						
						.topHeaderTitle.hasDropContent.onState {
							border-top: 1px #999 solid;
							border-left: 1px #999 solid;
							border-right: 1px #999 solid;
							border-bottom: 1px #000 solid;
							background-color: #000;
							
						}
						
						/*rempove 1px of padding to accomodate the 1px border*/
						.topHeaderTitle.hasDropContent.onState .topHeaderLink {
							
						}
						
						.topHeaderLink, .topHeaderLink:visited {color: #eee; text-decoration: none; padding-left: 15px;}
						
						/* making A tag expand all the div area*/
						.topHeaderLink { }
						.topHeaderLink a{ display:block; margin:0; padding:0}
						.Active .topHeaderLink{color: #15B1E4;}				
						.topHeaderTitle.hasDropContent:hover .topHeaderLink, .topHeaderTitle:hover .topHeaderLink, .topHeaderLink:hover { color: #15B1E4;}
					
					.topHeaderDropdownContent{
						position: absolute;
						top: 20px;
						padding: 0;
						margin:0;
						list-style: none;
						z-index: 12;
						border: 1px #999 solid;
						background: #000;						
						font-size: 12px;
						
						/*	BRT 12.18.09 - You might be tempted to consider changing this to "visibility"
						 *	rather than display, because at first glance this would improve reflow/paint
						 *	performance, however - because the containing div .topHeaderSection MUST be
						 *	relatively positioned, having this a visibility attribute will cause render
						 *	stack issues in MSIE 7 - and potential workaround will involve more CSS and
						 *	potentially using JavaScript to flush any cached CSS changed queued for the 
						 *	render tree.
						*/
						
						display: none;
					}	
						.hasDropContent{
							visibility: visible !important;
						}
					
						.topHeaderDropdownContent.hasDropContent {
							visibility: visible !important;
							display: block;	
						}				
				
					.topNavMyAccountList{
						padding: 0;
						margin: 0 10px;
						list-style-type: none;
					}
					
					#headerMyAccountSection	.topHeaderDropdownContent {left: 0; width: 250px;}
			
			html>body #headerMyCartSection .topHeaderDropdownContent{left: 0px; width: 300px; }
			*html #headerMyCartSection .topHeaderDropdownContent{left: 0px; width: 300px;}
			
			.topNavMyAccountList {
				width: 250px;
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
				.myAccountListItem{
					margin: 0;
					padding: 0;
					height: 35px;
					line-height: 35px;
					display: block;
				}
					.myAccountListLink{
						color: #999;
						text-decoration: none;
						display: block;
						margin: 0;
						padding-left: 10px;
					}
					
					.myAccountListLink:visited{
						color: #999;
					}
					
					.myAccountListLink:hover{
						background: #333 url('../img/global/nav_actionable_arrow.gif') right center no-repeat;
						color: #fff;
						
						
					}
					
					/* Begin My Cart Top header Content Styles */	
		.myCartItem
		{
			margin: 10px 5px 0 5px;
			border-bottom: 1px #666 solid;
			height: 80px;	/* BRT - 7.19.09  added height for defect 2113 */	
		}
		
		.cartMessaging	{
			margin: 10px 5px 0 5px;
			border-bottom: 1px #666 solid;
			height: 35px;
		}		
			.cartMessaging p{color: #999;}
					
			.myCartItemImage{
				width: 75px;
				height: 49px;
				border: none;
				display: inline;
				margin-right: 10px;
				float: left;
				clear: none;
				background: #eee;
				
			}	

			
			.myCartProductName{
				display: block;
				width: 150px;
				height: 50px;
				float: left;
				clear: none;
				padding-right: 5px;	
				margin-top: 5px;
				line-height: 13px;
				color: #dfdfdf;
			}
				.myCartItemSku{
					clear:both;
					display: block;
				}
			
			.myCartPriceLinkSection {
				float: left;
				clear: none;
				margin: 0;
				padding: 0;
				width: 50px;				
			}
				.myCartProductPrice{
					color: #15B1E4;
					font-weight: bold;
					text-align: right !important;
					width: 50px;
					display: block;
					margin-top: 3px;
				}
				
				.myCartGotoLink {
					
					display: block;
					clear: both;	
					text-align: right;				
				}
				
				a.topHeaderMyCartLink{
					padding-left: 15px;
					background: transparent url('../img/global/global_arrow_link.gif') left center no-repeat;
					color: #fff !important;
					text-decoration: none !important;
					float: left;
				}
				
				a.cartCloseText{
					float: right;
					color: #999;
					text-decoration: none;
				}
				
				a.cartCloseText:visited{
					color: #999;
				}
				
				span.cartCloseButton{
					font-size: 13px;
				}
				
				span.myCartTextLink{
					float: left;
					padding-left: 5px;
				}
				
				#viewEditCartSection {
					margin: 5px 10px 5px 5px;
					color: #999;
					font-size: 11px;
				}
					#viewEditCartSection a.topHeaderMyCartLink{color: #15B1E4 !important; text-decoration: none; }
				
				
		/*	------------------------------------------------------------------------------------- */
		
		/*	Global Promotion Area
		 *	------------------------------------------------------------------------------------- */
			#ssGlobalPromoSection{
				width: 640px;
				height: 35px;
				line-height: 35px;
				margin: 0;
				padding: 0;
				font-size: 12px; /* AJ fix for defect 4611 12.24.2009 */
			}
			
				#ssGlobalPromoToggle{
				width: 20px;
				height: 20px;
				margin: 0 0 0 5px;
				padding: 0;
				background: transparent url('../img/global/global_promo_plus_minus.gif') top no-repeat;
				float: left;
				clear: none;
			}
				#ssGlobalPromoToggle.onState{background-position: bottom; border: none;}
			
			#ssGlobalPromoList {
				float: left;
				clear: none;
				width: 590px;
				height: 20px;
				margin: 0;
				padding: 0;
				position: relative;
				
			}
				.ssGlobalPromotion{
					position: absolute;
					left: 0px;
					top: -8px;
					text-align: left;
					list-style-type: none;
					margin: 0;
					padding: 0;
					color: #15B1E4;
					font-weight: normal;
				}
				
				.ssGlobalPromotionLink, .ssGlobalPromotionLink:visited{
					color: #15B1E4;
					font-weight: normal;
					text-decoration: none;
				}
		/*	------------------------------------------------------------------------------------- */	
		

		#purchasePriceProgramCalloutBar{
			height: 30px;
			clear: both;
			line-height: 30px;
			padding: 0 28px;
			color: #eee;
			background: #222 url('../img/global/program_storefront_bkg.gif') repeat-x;
			border-bottom: 1px #000 solid;
			font-size: 12px; /* defect 4590 AJ 12.24.2009 */
		}
	
			#programStorefrontName{font-weight: bold !important;}
		
		
	/* BEGIN GLOBAL NAVIGATION CORE STYLES */
	/* ----------------------------------------------------------------------------------------------------------- */
	#mainNavAndSearchSection{
		/* position: relative; */
		width: 960px;
		height: 37px;
		clear: both;
	}
		
		/* Search Bar 
		*/
		#headerSearchSection{
			position: absolute;
			top: 67px;
			left: 695px;
			width: 245px;
		}
		
		.fcEppEduActive #headerSearchSection {
			top:97px;
		}
			#siteSearchLabel {
				position: absolute;
				left: 0;
				top: 5px;
				width: 55px;
				height: 23px;	
				background: transparent url('../img/global/search_label.gif') no-repeat;		
			}
			
			#siteSearchForm {
				position: absolute;
				top: 0;
				left: 0px;
				width: 182px;			
			}
			
				#siteSearchInputField, .topHeaderSearchBar	{
					position: absolute; 
					top: 4px; 
					left: 61px;  
					width: 171px;				 
					padding: 4px; 
					margin: 0;
					border-top: 1px #111 solid; 
					border-left: 1px #111 solid;					 
					border-bottom: 1px #666 solid; 
					border-right: none;
					background: #555; 				
					font-size: 12px; 
					color: #999;
					
					/* For MSIE 6 */
					_padding: 4px 4px 3px 4px; 
					_font-size: 13px;
				}
				
				#siteSearchSubmitButton	{
					position: absolute; 
					top: 6px; 
					left: 218px; 
					width: 22px;  
					height: 22px; 
					background: #111 url()no-repeat;
				}


		/*	#globalNavigation:
		 *	This is our main container for the globalNav, id is used for CSS 
		*/
		#globalNavigation {
			width: 960px;
			height: 37px;
			background: #1d1d1d;
			margin: 0;
			padding: 0;
			list-style-type: none;
			z-index: 9;
			font-size: 12px;
		}
			
			/* BEGIN GLOBAL NAV. IMAGE STYLES 
			 * ------------------------------------------------
			 * These are going to be handled a little differently, since the 
			 * the global NAV will never "change" on every page, and in an effort
			 * to reduce the number of CSS HTTP requests, the entire "NAV" will be
			 * ONE IMAGE WITH BOTH ON AND OFF STATES.  What we will then do is use 
			 * the background-position: to move the image around as we need it.
			 *
			 * This will solve many of our problems:
			 *
			 * 	- minimize http requests
			 *	- prevent flickering on hover states due to seperate images
			 *  - prevent MSIE6 caching issues with CSS images that are not active on page load.
			*/
		
			.mainNavSectionItem {			
				float: left;
				clear: none;
				margin: 0;
				padding: 0;
				width: 144px;			
				height: 37px;
				line-height: 37px;
				border-right: 1px #000 solid;
				z-index: 9;
			}
			
			/*	BEGIN GLOBAL NAV IMAGE STYLES - MOZILLA / SAFARI, etc... */
			
				.sectionButton 				{background-image: url('../img/global/main_navigation.gif') !important;}		
					
				html>body .mainNavSectionItem .discoverSection	{background-position: left top ;}
					html>body .discoverSection.Active			{background-position: left bottom !important; }
					
				html>body .mainNavSectionItem .shopSection		{background-position:  -145px top;}
					html>body .shopSection.Active				{background-position: -145px bottom !important; }
					
				html>body .mainNavSectionItem .servicesSection	{background-position: -290px top;}
					html>body .servicesSection.Active			{background-position: -290px bottom !important; }
					
				html>body .mainNavSectionItem .supportSection	{background-position: -435px top;}
					html>body .supportSection.Active				{background-position: -435px bottom !important; }
					
				/* 	MSIE 6 COMPATILITY HACK! - Global Navigation
				 *	Because of the difference in which MSIE6 renders and computes inheritence, the onstate buttons 
				 *	are having the "background-position-x: property overwritten, causing all "on" buttons to read
				 *	"support"  (the last style called).  Therefore, we need to create a very specific set of the same
				 *	styles for each that are MSIE6 readable only.
				*/ 
				
				*html .mainNavSectionItem .discoverSection	{background-position: left top ;}
					*html .discoverSection.Active			{background-position-y: bottom ;}
				
				*html .mainNavSectionItem .shopSection		{background-position:  -145px top;}
					*html .shopSection.Active				{background-position-y: bottom ;}
				
				*html .mainNavSectionItem .servicesSection	{background-position: -290px top;}
					*html .servicesSection.Active,			{background-position-y: bottom ;}
				
				*html .mainNavSectionItem .supportSection	{background-position: -435px top;}
					*html .supportSection.Active 			{background-position-y: bottom;}
				
				.mainNavCategoryList {
					position: absolute;
					z-index: 15;
					width: 258px;
					height: 400px; /* BRT 11.25.2009 - added fixed height for Navigation flyout congruency - this needs to match the sub Cat List height */
					*height: 430px; /* JC 2.23.2010 - added to fix IE height problem */
					display: block;
					visibility: hidden;
					background: #2a2a2a;
					padding: 0;
					margin: 0;
					left: 0;
				}
				
				.discoverSection{left: 0;}
				.shopSection{left: 145px;}
				.servicesSection{left: 290px;}
				.supportSection{left: 435px;}
				
					/*	You may notice that .mainNavCategoryItem and .mainNavSubCategoryItem
					 *	are exactly the same property sets, but merely with different names,
					 *	this was an explicit design decision in order to give both current and
					 *	potential javascripts an easy way to distinguish the differing levels
					 *	of the tiered navigation lists without having to do full element crawls
					 *	(and hopefully speed up performance).
					*/
					
					.mainNavCategoryItem{
						/* position: relative; */
						/* height: 36px; AJ removing height due to ie7, line height sufficient for all browsers defect 4591*/
						line-height: 36px;
						height: 36px;
						clear: both;
						margin: 0 !important;
						padding-left: 20px !important;
						list-style-type: none;
						background-position-y: center !important;
					}	
					
						.mainNavCategoryItem.standBy {background-color: #444 !important;}				
						.mainNavCategoryItem.Active  {background: #999 url('../img/global/nav_actionable_arrow.gif') right center no-repeat;}
						
						.mainNavCategoryItem.hasMoreOptions.Active {
							background-image: url('../img/global/nav_plus.gif');
							background-repeat: no-repeat;
							background-position: right;
						}
						
						.mainNavListingLink, .mainNavListingLink:visited {color: #ccc; font-weight: bold; text-decoration: none;}
						.mainNavCategoryItem.Active .mainNavListingLink {color: #fff;}
					
					.mainNavSubCategoryList {
						position: absolute;
						z-index: 9;
						top: 0;
						left: 258px;
						width: 258px;
						height: 400px; /* BRT 11.25.2009 - added fixed height for Navigation flyout congruency - this needs to match the main Cat List height */
						background: #272727;
						padding: 0;
						margin: 0;
						display: block;
						visibility: hidden;
					}				
						.mainNavSubCategoryItem, .mainNavSubCategoryItem:visited {
							/* position: relative;	 BRT 11.25.09 - Commented out for the Navigation flyout fix */
							height: 36px;
							line-height: 36px;
							clear: both;
							margin: 0 !important;
							padding-left: 20px !important;
							list-style-type: none;
							color: #DFDFDF;
							background-position-y: center !important;
						}	
											
							.mainNavSubCategoryList .mainNavSubCategoryItem.Active {
								background-color: #999;
								background-image: url('../img/global/nav_actionable_arrow.gif');
								background-repeat: no-repeat;
								background-position: right;
								
							}
							
							/* to fix IE6/7 flicker problem */
							.mainNavCategoryItem a,
							.mainNavSubCategoryItem a{ 
								padding:0;
								margin:0;
								display:block;
							}
					
							.subNavListingLink, .subNavListingLink:visited {color: #ccc; font-weight: bold; text-decoration: none;}
							.mainNavSubCategoryItem.Active .subNavListingLink {color: #fff;}
/* ----------------------------------------------------------------------------------------------------------- */

/* BEGIN GLOBAL FOOTER STYLES */
/* ----------------------------------------------------------------------------------------------------------- */	

	#sonyStyleFooter {
		background: #000;
		color: #fff;
		width: 960px;
		position: relative;
		clear: both;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	
		#sonyStyleBreadCrumb {
			width: 960px;
			height: 35px;
			line-height: 35px;
			clear: both;
			margin: 0;
			padding: 0;
			background: #1b1b1b;
			font-size: 12px;
			color: #eee;
		}
		
			.footerCrumbPiece {
				display: block;
				float: left;
				clear: none;
				height: 35px !important;
				padding: 0 45px 0 30px;
				margin: 0;
				background: transparent url('../img/global/breadbrumb_arrow.gif') right center no-repeat;
			}
			
				.breadcrumbLink 		{color: #eee !important; text-decoration: none;}
				.breadcrumbLink:hover	{text-decoration: underline;}
		
		#sonyStyleFooterDirectoryEmailSection {
			background: #0d0d0d url('../img/global/directory_email_bkg.gif') top repeat-x;
			width: 960px;
			height: 250px;
			clear: both;
		}
		
			#sonyStyleFooterDirectory {
				width: 710px;
				height: 250px;
				float: left;
				clear: none;
				margin: 0;
				padding: 0;				
			}
			
				.footerDirectoryListing {
					float: left;
					clear: none;
					display: inline;
					width: 148px;
					height: 230px;
					margin: 15px 0 0 15px;
					padding: 0;
					
				}
				
					.footerDirectoryListing.firstList{margin: 15px 0 0 28px;}
				
					.footerDirectoryTitle{
						line-height: 20px;
						clear: both;
						color: #999;
						font-weight: bold;
						font-size: 13px;
						display: block;
					}
				
					/*	We have two classes:  footerDirectoryListItem and directoryListingLink.
					 *	The <li> WILL NOT have a bullet, because we will "fake" the bullet image
					 *	in the <a> tag, since this is purely a presentational element, but bullets
					 *	render differently in the different browsers.  While it's an extra class
					 *	this will give us more flexibility and compatability.
					*/
				
					.footerDirectoryListItem {
						list-style-type: none;
						margin: 0;
						padding: 0;
						height: auto;
						line-height: 20px;
						float: left;
						clear: both;
						width: 158px;
					}
											
					
						.directoryListingLink, .directoryListingLink:visited {
							padding-left: 10px;
							margin: 0;
							background: transparent url('../img/global/global_footer_link_arrow.gif') left 6px no-repeat;
							display: block;
							color: #666;
							text-decoration: none;
							font-weight: normal;
						}
						
						.directoryListingLink:hover{text-decoration: underline; color: #15B1E4;}
			
						/**
						*  Added global override to move the container up 13pixels
						*  Added to override the footer styles of global.css
						*  Also added overrides for the myaccount related pages
						*  Added tweak for confirmation page to eliminate grey bar
						*  - PJH
						*/
						.showcase #content a.directoryListingLink,						
						#content a.directoryListingLink
						{
							color: #666;
						}
						
						#content a.directoryListingLink:hover{text-decoration: underline; color: #15B1E4;}						
						.showcase #content a.footerExtraLink,
						.showcase #content a.footerStoreDealerLink,
						#content a.footerStoreDealerLink,
						#content a.footerExtraLink{
							color: #EEE;
						}
						
						.my_account h2, .my_account h2.full { border: 0; }
						.checkout .receipt{
							margin-bottom: 0;
						}
						
						

			
			#signUpForEmailUpdatesSection {
				width: 250px;
				height: 250px;
				float: left;
				clear: none;
				display: block;
				margin: 0;
				padding: 0;		
				position: relative;		
			}	
			
				.signUpHeader{margin: 19px 0 10px 0; color: #999; font-size: 13px;}				
				
				#quickEmailSignupParentContainer{margin-left: 28px;}
					
				.emailFormField{
					background: #333;
					color: #666;
					border-top: 1px #101010 solid;
					border-left: 1px #101010 solid;
					border-bottom: 1px #3d3d3d solid;
					border-right: 1px #3d3d3d solid;
					font-family: arial;
					font-size: 11px;					
				}
				
				#emailAddress.emailFormField {width: 190px; margin-bottom: 10px; clear: both; padding-left: 5px;}
				#zipCode.emailFormField {width: 98px; float: left; clear: none; margin-right: 10px; padding-left: 5px;}
				
				#emailSignUpEmailAddress.emailFormField {width: 190px; margin-bottom: 10px; clear: both; padding-left: 5px;}
				#emailSignUpZipCode.emailFormField {width: 98px; float: left; clear: none; margin-right: 10px; padding-left: 5px;}
				
				#sampleLinkArea{margin-top: 15px; font-size: 11px;}	
					
					.emailSampleLink{margin: 0; height: 20px; line-height: 20px;}
								
									
					
				#signUpResultsNotificationSection{ /* This is the Box that will appear on top of the "sign up for email updates once you completed the signup process. */
					position: absolute;
					top: 35px;
					left: 0;
					width: 250px;
					height: 110px;
					background: #0d0d0d;	
					color: #999;
					display: none;			
				}
				
					#signUpResultsNotificationSection ul{
						margin: 0;
						padding: 0;
						font-size: 11px;
						list-style-type: none;
					}
					
					.zipCodeTitle{font-size: 13px; padding: 0 28px; margin: 10px 0; font-weight: normal; color: #15B1E4;}
					
					.quickEmailErrorMsg{display: block; padding: 0 28px; margin: 0;}
					
					
					.okButton{width: 40px; height: 20px; background: #333 url('../img/global_buttons/ok.gif') no-repeat; margin-top: 10px; margin-left: 28px;}
				
					.notificationResults{margin: 10px 28px;}
						.successThankYouMessage{margin: 0; padding: 0; color: #15B1E4;}
						.successByLine{margin: 2px 0;}
			
			#globalContactDisclaimerLinkSection {
				background: #0d0d0d;
				clear: both;
				width: 930px;
				font-size: 11px;
				color: #999;
				height: 30px;
				line-height: 30px;
				padding-left: 28px;
			}
				
				.sonyFooterPhoneNumber{
					color: #eee; 
					font-weight: bold; 
					font-size: 13px;
				}
				
				.visitRetailDealerSection{margin-left: 15px;}
				
					.footerStoreDealerLink, .footerStoreDealerLink:visited{color: #eee; text-decoration: none;}
			
			.ssFooterExtraLinkList{
				margin: 10px 28px 0 0;
				display: inline;
				padding: 0;
				float: right;
				clear: none;
				list-style-type: none;
				height: 15px;
				
			}			
				.extraLinkListItem{
					float: left;
					clear: none;
					margin: 0 0 0 5px;
					padding: 0 0 0 0;
					line-height: 30px;				
					border-right: 1px #999 solid;
					height: 12px;
					line-height:  12px;
				}
					.footerExtraLink, .footerExtraLink:visited{
						color: #fff;
						text-decoration: none;
						padding-right: 5px;						
					}
					
		#globalLogoCalloutSection{
			clear: both;
			width: 960px;
			height: 50px;
			line-height:50px;
			background: #070707;
			color: #999;
			font-size: 11px;
			position: relative;
		}
			#globalLogoCalloutSection .ssFooterExtraLinkList{margin: 18px 0 0 10px;}
		
			#ssFooterLogoSony{
				background: transparent url('../img/global/sony_footer_logo.gif') no-repeat;
				width: 75px;
				height: 30px;
				position: absolute;
				right: 28px;
				top: 10px;
			}
			
			#seeHearShopLogo {
				background: transparent url('../img/global/see_hear_shop.gif') no-repeat;
				width: 74px;
				height: 47px;
				float: left;
				clear: none;
				margin-right: 10px;
				margin-left: 20px;
			}
			
			.ssFooterCopyright{float: left; clear: none; font-size: 10px;}

/* BEGIN GLOBAL PROMO SPOT TITLES */

.rightRailSpot {
	clear: both;
	width: 240px;
	margin: 15px 0 0 0;
	padding: 0;
	display: block;
}
	.rightRailSpotImage {
		float: left;
		clear: none;
		width: 75px;
		height: 49px;
		margin-left: 5px;		
	}
	
	.rightRailSpotCopy{
		float: right;
		clear: none;
		margin-bottom: 10px;
		margin-right: 5px;
		width: 150px;
	}
		.rightRailSpotTitle{
			display: block;
			clear: both;
			color: #333;
			font-weight: bold;
			font-size: 14px;
			margin-top: 5px;
		}
	
		.rightRailSubText{
			color: #999;
			margin-bottom: 3px;
			font-size: 11px;
		}
		
		.eSpotViewNowLink{
			display: block;
			clear: both;
			font-size: 11px;
			margin: 5px 0 0 0;
		}
		
			.eSpotViewNowLink a{color: #666;}
			.eSpotViewNowLink a:hover{color: #15B1E4;}

.bottomRailPromoSpot{
	width: 320px;
	height: 90px;
	float: left;
	clear: none;
}

.promotion{
	margin: 0;
	padding: 0;
	width: 960px;
	display:block;
}
			
/* BEGIN CORE UTILITY STYLES */
/* ----------------------------------------------------------------------------------------------------------- */	
	.seoImage {display: block; text-indent: -900em; overflow:hidden;}
	.seoImageLink {display: block; width: 100%; height: 100%; text-indent: -900em; background: transparent; overflow: hidden;}

	.lastLinkItem {border: none;}
	.floatItLeft{float: left;}
	.floatItRight{float: right;}
	
	.clearfix{height: 0; font-size: 0; clear: both; display: block;}
	
	.hidden{display: none !important;}
	.invisibleElement {visibility: hidden;}
	
	.originalPricing{
		float: left;
		clear: none;
		margin-right: 7px;
		padding: 0;
		color: #999 !important;
		clear: none;
		background: url('../img/global/strikethrough_line.gif') center repeat-x;
	}
	
	.callout{color: #15B1E4; font-weight: bold;}
	
	.darkText{color: #000 !important;}
	
	/*IE6 PNG FIX*/
	*html img#productDetailActiveImage, *html .seoImage, *html .seoImageLink, 
	*html .CTAButton, *html .searchResultProductImage,
	*html .quickViewLink{ behavior: url(/wcsstore/SonyStyleStorefrontAssetStore/css/iepngfix.htc) } */
	/* hardcoding WCS folder value above, since relative pathing is not possible with WCS folder structure. Commented line below can be used for Blackmesa.   */
	/*{ behavior: url(css/iepngfix.htc) } */


/* BASIC EDU STYLES */
#eduWelcomeBar p{
	background: #222;
	margin: 0;
	padding: 0 28px;
}



/* BEGIN CORE sifr (Flash Text Object) STYLES */
/* ----------------------------------------------------------------------------------------------------------- */	

	.sfrHeader {
	
	}		
		
		/* FOR LIVE PERSON BUTTON */
		#lpButton-DIV{
			/* margin-top: 3px; BRT 12.1.2009 - Margin no longer necessary with new header */
	}
	
/**
Category hero banners
**/
.categoryHeroBanner{
	position:relative;
	width:960px;
	height:260px;
}

a.categoryHeroBannerCTA{
	position:absolute;
	top:0px;
	left:0px;
}

/* fix for ie7 my account and my cart drop down */
.fullPage,
.pageContent {
	*position:relative;
	*z-index:-1;
	
}

#cartCheckOutContent {
	*position:relative;
	*z-index:-1;
	
}