/*	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
 *
 *	SONY CANADA | SONY STYLE.CA
 *  	REVISED:	LEO LU - leo_lu@sony.ca
 *	DATE:		OCT.19 2010
 *
 *	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: #FFF url('../img/global/ss_core_bkg.gif') top repeat-x;
	/* background: #CCCCCC url(/wcsstore/SonyStyleCanadaStorefront/img/static_images/holiday_2010/holiday_bg.jpg) repeat-x center top fixed; */
	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;
}
/* Dale says no outlines on a */
/* Also, FF4 renders outlines on focused objects and embeds (mostly noticeable with embedded SWFs) */
a, object, embed { outline: none; }

	/*	#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: #000;
		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: 960px;
			height: 74px;
			clear: both;
			margin: 0;
			padding: 0;
			position: relative;
			z-index:11000;
			/*background: #0a0a0a url(../img/global/header_bar_bg.gif) repeat-x left top;*/ /* moving to #sonyStyleHeader for indexing issues. */
		}

		/*	LOGOS
		 *	------------------------------------------------------------------------------------- */
		#makeBelieveHeader	{position: absolute; top: 20px; left: 28px; width: 100px; height: 35px;	margin: 0; padding: 0; background: transparent url('../img/global/make_believe_logo.gif') no-repeat; z-index: 99000;}
		#sonyStyleLogo		{position: absolute; top: 11px; left: 770px; width: 162px; height: 43px; margin: 0; padding: 0; background: transparent url('../img/global/sony_style_canada_logo.gif') no-repeat;}
		/*	------------------------------------------------------------------------------------- */

		#adminLinksAndGlobalPromos{
			position: absolute;
			top: 15px;
			right: 0;
			height: 45px;
			margin: 0;
			padding: 0;
			z-index:10900;
			/*position: relative;
			float: right;
			margin: 10px 0 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;}
			#logonLink              {background: transparent url(../img/nav/main-navigation-sprite.png)  -706px -319px no-repeat;}
		 	#myAccountAdminLink		{background: transparent url(../img/nav/main-navigation-sprite.png) -706px -344px no-repeat; width: 125px;}
		 	#myCartLinkHeader		{background: transparent url(../img/nav/main-navigation-sprite.png)  -700px -360px 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 {position:absolute; left: -375px; top: -13px;}
		 	#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;*/ /* Was causing issue with livechat always displaying. */
		 		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{
				padding-right: 15px;
				float: right;
				height: 40px;
				line-height: 20px;
				color: #eee;
				font-size: 11px;
				clear: both;
			}

					/* added extra header section */
				.topHeaderSection, .topExtraHeaderSection {
					float: left;
					clear: none;
					height: 20px;
					line-height: 20px;
					z-index: 10001;
					font-size: 10px;
					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;
				}
					/* differences between extra and non-extra topHeaderSection */
					.topHeaderSection {
						margin-right: 10px;
					}

					#adminLinksSection .topExtraHeaderSection .topHeaderLink {color: #999999;}

					.topHeaderTitle, .topExtraHeaderTitle {
						z-index: 16 !important;
						display: inline-block;
						_display: inline !important; /* for MSIE 6 */
						padding: 0 8px;
						margin: 0;
						line-height: 20px;
						height: 20px;
					}
						#adminLinksSection .topHeaderTitle.onState .topHeaderLink{color: #15B1E4;}


						/* This style needs to be applied to itesm with .hasDropContent *on click* */

						.topHeaderTitle.hasDropContent.onState, .topExtraHeaderTitle.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;
							outline: none;
						}
						.topExtraHeaderLink, .topExtraHeaderLink:visited { /* Added for nav changes. JK 10/8/10 */
							color: #FFF;
							text-decoration: none;
							outline: none;
						}
							.onState .topExtraHeaderLink {color:#00a4e8;}

						/* Make sure there is no underline anywhere. Defect 7851 */
						.topHeaderLink:hover, .topExtraHeaderLink:hover {text-decoration: none;}

						/* 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, #adminLinksSection .topHeaderLink:hover, #adminLinksSection .topExtraHeaderLink:hover { color: #15B1E4;}

					.topHeaderDropdownContent{
						position: absolute;
						top: 20px;
						padding: 0;
						margin:0;
						list-style: none;
						z-index: 10002;
						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, .topNavSupportList{
						padding: 0;
						margin: 0 10px;
						list-style-type: none;
					}

					#headerMyAccountSection	.topHeaderDropdownContent {left: 0px; width: 160px;}

					#headerSupportSection	.topHeaderDropdownContent {right: 0px; width: 200px;}

			html>body #headerMyCartSection .topHeaderDropdownContent{right: 0px; width: 300px; }
			*html #headerMyCartSection .topHeaderDropdownContent{right: 0px; width: 300px;}

			.topNavMyAccountList {
				width: 160px;
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			.topNavSupportList {
				width: 200px;
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
				.myAccountListItem,
				.supportListItem {
					margin: 0;
					padding: 0;
					height: 35px;
					line-height: 35px;
					display: block;
				}
					.myAccountListLink,
					.supportListLink {
						color: #999;
						text-decoration: none;
						display: block;
						margin: 0;
						padding-left: 10px;
					}

					.myAccountListLink:visited,
					.supportListLink:visited {
						color: #999;
					}

					.myAccountListLink:hover,
					.supportListLink: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; }


				a.headerCloseText{
					float: right;
					color: #999;
					text-decoration: none;
					font-size: 10px;
					display: inline-block;
				}

				a.headerCloseText:visited{
					color: #999;
				}

				span.headerCloseButton{
					font-size: 12px;
				}
			/* EMAIL OFFERS SECTION */
			.navSignUpHeader {
				font-size: 12px;
				/*display: inline-block;
				float: left;
				height: 20px;*/
			}

			#emailSubscriptionSection {
				left: -184px;
				width: 255px;
			}
				#headerSampleLinkArea .emailDropdownHeader {margin-bottom: 5px;}

			.socialItems {
				list-style-type: none;
				margin: 0;
				padding: 0;
				height: 19px;
			}
				.socialItem {
					margin: 0;
					padding: 0;
					width: 19px;
					float: left;
				}

			/* REGION INDICATOR */
			#regionIndicator {
				position: absolute;
				right: 30px;
				top: 25px;
				background: transparent url('../img/global/socan/nav_header_canada.gif') left center no-repeat;
				padding-left: 27px;

			}
			.regionTitle {
				font-size: 11px;
				font-weight: bold;
			}

			/**********************************************
		        	COMMUNITY ICONS AND RELATED AREAS
			**********************************************/
			.socialLogo {
				display: inline-block;
				width: 14px;
				height: 14px;
				background-color: transparent;
				background-image: url(../img/global/community_icons.png);
				background-repeat: no-repeat;
			}
				/* Specific locations */
				#communityNav .socialLogo {
					display: block;
					float: left;
					margin: 2px 6px 0 0;
				}

			.facebookLogo {background-position: 0px top;}
			.twitterLogo {background-position: -16px top;}
			.bloggerLogo {background-position: -33px top;}
			.youtubeLogo {background-position: -49px top;}
			.flickrLogo {background-position: -65px top;}

			/* Community tab specific */
			.catItemLink:hover .facebookLogo {background-position: 0px -16px;}
			.catItemLink:hover .twitterLogo {background-position: -16px -16px;}
			.catItemLink:hover .bloggerLogo {background-position: -33px -16px;}
			.catItemLink:hover .youtubeLogo {background-position: -49px -16px;}
			.catItemLink:hover .flickrLogo {background-position: -65px -16px;}

			/* List specific */
			.socialItem .facebookLogo:hover {background-position: 0px -16px;}
			.socialItem .twitterLogo:hover {background-position: -16px -16px;}
			.socialItem .bloggerLogo:hover {background-position: -33px -16px;}
			.socialItem .youtubeLogo:hover {background-position: -49px -16px;}
			.socialItem .flickrLogo:hover {background-position: -65px -16px;}


		/*	------------------------------------------------------------------------------------- */

		/*	Global Promotion Area
		 *	------------------------------------------------------------------------------------- */
			#ssGlobalPromoSection{
				/*width: 350px;  JK phatnav change */
				/*height: 35px; JK Phatnav change */
				line-height: 20px;
				margin: 0;
				padding: 0;
				font-size: 12px; /* AJ fix for defect 4611 12.24.2009 */

				/* JK Changes to readd after phatnav 11.2.2010 */
				/* float: left;
				clear: both; */

				/* LL Socan */
				width: 350px;
				position: absolute;
				top: 25px;
				right: 100px;
			}

				#ssGlobalPromoToggle{
				width: 3px;
				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: 320px;
				height: 20px;
				margin: 0;
				padding: 0;
				/* position: relative; */

			}
				.ssGlobalPromotion{
					/* position: absolute;
					right: 0px;
					top: -8px; */
					text-align: right;
					list-style-type: none;
					margin: 0;
					padding: 0;
					color: #15B1E4;
					font-weight: bold;
				}

				.ssGlobalPromotionLink, .ssGlobalPromotionLink:visited{
					color: #15B1E4;
					font-weight: bold;
					text-decoration: none;
				}
		/*	------------------------------------------------------------------------------------- */


		/* BRT 11.10.2010 - Added some classes that are missing for FC/EDU/EPP */

		/* this is the family center / edu / epp "you are now shopping @ bar." */
		.fcEppEduActive #programId {
			height: 31px !important;
		}

		#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: 77px;
		clear: both;
	}

		/* Search Bar
		*/
		#headerSearchSection{
			position: absolute;
			top: 76px;
			left: 740px;
			width: 204px;
		}
		.fcEppEduActive #headerSearchSection {
			top: 101px;
		}

			#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: 100px;
					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;
					font-weight: bold;
					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: 10001;
			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: 10001;
			}

			/*	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: 10003;
					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: 10003;
						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-color: #000;
			width: 960px;
			height: 200px;
			clear: both;
		}

			#sonyStyleFooterDirectory {
				/* width: 710px; */
				height: 200px;
				float: left;
				clear: none;
				margin: 0;
				padding: 0;
			}

				.footerDirectoryListing {
					width: 168px !important;
					float: left;
					clear: none;
					display: inline;
					width: 148px;
					/* height: 180px; */
					margin: 15px 0 0 15px;
					padding: 0;

				}

					.footerDirectoryListing.firstList{margin: 15px 0 0 28px; height:180px; overflow:hidden;}

					.footerDirectoryTitle{
						line-height: 20px;
						clear: both;
						color: #999;
						font-weight: bold;
						font-size: 11px;
						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 {
						/* width: 160px !important; */
						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;
							font-size: 11px;
						}

						.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;
						}
						.stayConnectedSubCopy
						{
							color:			#666;
							font-size: 		11px;
							line-height: 	20px;
							padding-bottom: 10px;
						}


			/*Socan Added - disabled for PhatNav*/
			#footerCMSpotSection {
				width: 240px;
				height: 200px;
				float: left;
				clear: none;
				display: block;
				margin: 0;
				padding: 0;
				position: relative;
			}

			#signUpForEmailUpdatesSection {
				width: 240px;
				height: 200px;
				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;
				}

				#firstName.emailFormField {width: 98px; float: left; margin-right: 10px; margin-bottom: 10px; clear: none; padding-left: 5px;}
				#lastName.emailFormField {width: 74px; float: left; margin-bottom: 10px; clear: none; padding-left: 5px;}
				#emailAddress.emailFormField {width: 190px; margin-bottom: 10px; clear: both; padding-left: 5px;}
				#postalCode.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;}
				#emailSignUpPostalCode.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;}

				#privacyLinkArea {margin: 15px 15px 0 0; font-size: 11px;}

					.privacyLink {margin: 0; line-height: 15px; color:#444;}



				#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: #000;
					color: #999;
					display: none;
				}

					#signUpResultsNotificationSection ul{
						margin: 0;
						padding: 0;
						font-size: 11px;
						list-style-type: none;
					}

					.postalCodeTitle{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;}

			/* HEADER EMAIL SIGNUP STYLES - SOCAN DISABLED*/
				#headerEmailSignupContainer {padding: 10px 10px 30px;}
					#headerEmailSignupContainer .navSignUpHeader {margin: 0 0 10px;}

					#headerEmailSignupContainer .emailFormField {
						background: #FFFFFF;
						color: #666666;
						height: 20px;
						border: none;
					}

					#headerEmailSignUpEmailAddress {
						width: 230px;
						margin-bottom: 10px;
					}

					#headerEmailSignUpZipCode {
						margin-right: 10px;
					}

					#headerEmailSignUpSubmitButton {
						width: 60px;
						height: 20px;
						background: transparent url(../img/navigation/header_emailSubmit_button.jpg);
					}

					#headerSampleLinkArea {
						margin-top: 15px;
					}

				#emailSubscriptionNotificationSection { /* 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: 130px;
					padding: 0 10px;
					background: #000;
					color: #999;
					display: none;
				}
					#emailSubscriptionNotificationSection .input-set {
						margin: 0;
						padding: 0;
						list-style-type: none;
					}
						#emailSubscriptionNotificationSection .input-set .quickEmailErrorMsg {
							padding: 0;
						}

					#emailSubscriptionNotificationSection h3 {font-size: 12px; margin: 5px 0;}
					#emailSubscriptionNotificationSection #signUpErrorNotification {}
					#emailSubscriptionNotificationSection .notificationResults {margin: 0 0 10px;}



			#globalContactDisclaimerLinkSection {
				background: #000;
				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;
					}

					.footerExtraLink:hover{
						color: #15B1E4;
						text-decoration: underline;
					}

		#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;}
			/* #globalLogoCalloutSection .ssFooterCopyright{float:left; clear: both; font-size: 11px; margin-left:20px; line-height:13px;} */

			#ssFooterLogoBrand{
				background: transparent url('../img/global/socan/footer_logo_brand.gif') no-repeat;
				width: 960px;
				height: 50px;
				border-top: 1px #333 solid;
				border-bottom: 1px #333 solid;
				position: absolute;
				left: 0px;
				top: 0px;
			}

			#ssFooterLogoVeriSign{
				background: transparent url('../img/global/socan/footer_logo_verisign.gif') center no-repeat;
				width: 200px;
				height: 30px;
				position: absolute;
				right: 0px;
				top: 15px;
				line-height: 30px !important;
			}


			#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: 79px;
		height: 45px;
		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: 13px;
			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: 80px;
	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;}

	.visibleElement {visibility: visible !important; display: block !important;}

	.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;}

	/* Socan Added */
	.boldText{font-weight:bold !important;}

	/*IE6 PNG FIX*/
	*html img#productDetailActiveImage, *html .seoImage, *html .seoImageLink,
	*html .CTAButton, *html .searchResultProductImage,
	*html .quickViewLink{ behavior: url(/wcsstore/SonyStyleCanadaStorefront/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;

}


/* import from global.css LL-SOCAN 2010.11.15*/
/* ul, li, input, select {
	padding: 0;
	margin: 0;
} */
/* input, select, textarea {
	font-size: 8pt;
	color: #555;
	font-family: Arial, Helvetica, sans-serif;
} */
/* a {text-decoration: none;} */
/* a:hover, a:active {text-decoration: underline;} */
/* reset header and p tag font sizes so nested "em" fonts will not inherit odd font sizes */
/* img, fieldset, form, h1, h2, h3, h4, p {
	border: 0;
	margin: 0;
	padding: 0;
} */

.darkGrey{color: #333 !important;}