/* Page Structure*/

@import url("content.css");

/* TOC

1: - Global Styles

2: - Header & Footer

3: - Main Nav

4: - Content

*/


/* 1 :-------- Global Styles ------------ */

	body {
		margin: 0 auto;
		padding: 0;
		}
	.skipLink {
		position: absolute;
		margin-top: -9999px;
		}
	.clear {
		clear:both;
		height: 1px;
		margin-top: -1px;
		}
	a {
		outline: none;
		}

/* 2 :-------- Header & Footer ------------ */
	.header {
		width: 960px;
		height: 192px;
		background: #fff;
		font-weight: bold;
		font-size: .9em;
		}
	.footer {
		float: left;
		width: 768px;
		height: 192px;
		background: #000;
		color: #999;
		font-size: .9em;
		}
	.headerCol {
		padding: 17px 10px 0;
		height: 175px;
		width: 172px;
		color: #a1a1a1;
		display: block;
		float: left;
		}
	.footerCol {
		padding: 28px 10px 0;
		height: 164px;
		width: 172px;
		color: #a1a1a1;
		display: block;
		float: left;
		/*position: relative; removed this to fix product listing rollovers */
		}
	.headerCol ul,
	.footerCol ul {
		padding: 0;
		margin: 0;
		list-style: none;
		}
	.headerCol ul li,
	.footerCol ul li {
		display: block;
		width: 100%;
		float: left;
		}
		
	/* nav rollover updates */
	.headerCol#firstCol,
	.headerCol#secondCol,
	.headerCol#thirdCol {
		padding:17px 0 0;
		width:192px;
		}
	.headerCol#firstCol li a,
	.headerCol#secondCol li a,
	.headerCol#thirdCol li a {
		padding:1px 10px 0 !important;
		}
	.header #firstCol ul.level01 {
		position:absolute;
		width:192px;
		height:192px;
		z-index:0;
		}
	.headerCol#firstCol ul.level01:hover {
		z-index:1;
    	}
	.header #firstCol ul.level02 li:hover ul.level03,
	.header #firstCol ul.level03.subNodeParent li:hover,
	.header #firstCol ul.level02 li.sfhover ul.level03,
	.header #firstCol ul.level03.subNodeParent li.sfhover {
		display:block !important;
		z-index:1 !important;
		}
	.header #firstCol ul.level02,
	.header #firstCol ul.level03,
	.header #firstCol .subNodeParent li:hover ul,
	.header #firstCol .subNodeParent li.sfhover ul {
		display:none !important;
		}
	.header #firstCol ul.level01 li:hover,
	.header #firstCol ul.level01 li.sfhover,
	.header #secondCol ul.level01 li.sfhover {
		background:#f9f9f9/* url(../Images/Icons/icon_grey_arrow_newNav.gif) 184px 5px no-repeat*/;
		}
	.header #firstCol ul.level01 li:hover a,
	.header #firstCol ul.level01 li.sfhover a,
	.header #secondCol ul.level01 li.sfhover a{
		color:#666;
		}
	.header #firstCol ul.level01 li:hover ul.level02,
	.header #firstCol ul.level01 li.sfhover ul.level02,
	.header #secondCol ul.level01 li.sfhover ul.level02 {
		display:block !important;
		background:url(../Images/elements/bg_newNavRollover_firstCol.png) 49px 0 no-repeat !important;
		position:absolute;
		/*width:206px;*/
		width:398px;
		height:175px;
		left:131px;
		top:-17px;
		padding-top:17px;
		padding-left:50px;
		z-index:2 !important;
		}
	.header #firstCol ul.level01 li:hover ul.level02 li.level02,
	.header #firstCol ul.level01 li:hover ul.level02 li.level02On,
	.header #firstCol ul.level01 li.sfhover ul.level02 li.level02,
	.header #firstCol ul.level01 li.sfhover ul.level02 li.level02On,
	.header #secondCol ul.level01 li.sfhover ul.level02 li.level02,
	.header #secondCol ul.level01 li.sfhover ul.level02 li.level02On {
		width:190px;
		margin:0 0 0 11px;
		background:none;
		}
	.header #firstCol ul.level01 li:hover ul.level02 li:hover,
	.header #firstCol ul.level01 li:hover ul.level02 li.sfhover {
		background:#f9f9f9;
		}
	.header #firstCol ul.level01 li:hover ul.level02 li.level02 a,
	.header #firstCol ul.level01 li:hover ul.level03 li.level03 a,
	.header #firstCol ul.level01 li.sfhover ul.level02 li.level02 a,
	.header #firstCol ul.level01 li.sfhover ul.level03 li.level03 a {
		color:#666 !important;
		}
	.header #firstCol ul.level01 li.subNode {
		font-weight:normal;
		}
	.header #firstCol ul.level01 li.subNode a {
		padding:0 0 0 17px !important;
		background:url(../Images/Icons/icon_dash_grey.gif) 10px 6px no-repeat;
		}
	.header #firstCol li.level03On {
		width:192px;
		margin-left:10px !important;
		}
	.header #firstCol li.level03On a {
		width:192px;
		margin-left:0 !important;
		}
	.header #firstCol ul.level02 li:hover ul.level03,
	.header #firstCol ul.level02 li.sfhover ul.level03 {
		display:block;
		position:absolute;
		width:206px !important;
		height:192px;
		top:0;
		left:192px;
		padding-top:17px;
		padding-left:50px;
		background:url(../Images/elements/bg_newNavRollover.png) 46px 0 no-repeat !important;
		z-index:2 !important;
		}
	.header #firstCol ul.level02 li:hover ul.level03 li.level03,
	.header #firstCol ul.level02 li.sfhover ul.level03 li.level03 {
		float:left;
		position:relative;
		display:block !important;
		width:190px;
		margin:0 0 0 11px !important;
		}
	.header #firstCol ul.level02 li:hover ul.level03 li.level03 a,
	.header #firstCol ul.level02 li:hover ul.level03 li.level03On a,
	.header #firstCol ul.level02 li.sfhover ul.level03 li.level03 a,
	.header #firstCol ul.level02 li.sfhover ul.level03 li.level03On a {
		font-weight:normal;
		background:none;
		padding:2px 10px 1px !important;
		}
	.header #firstCol li.level03On li a {
		color:#666 !important;
		}
	.header #secondCol .moreBrands a,
	.header #firstCol .moreBrands a {
		font-weight:bold !important;
		}
	.header #secondCol ul.level02,
	.header #secondCol ul.level03{
		display:none !important;
		}
	.header li:hover .subNodeParent,
	.header li.sfhover .subNodeParent {
		background:none !important;
		}
	.header #secondCol ul.level01 li:hover.subNodeParent a,
	.header #secondCol ul.level01 li.sfhover.subNodeParent a,
	.header #secondCol ul.level01 li:hover.subNodeParent a:hover,
	.header #secondCol ul.level01 li.sfhover.subNodeParent a:hover {
		background:none !important;
		font-weight:bold;
		color:#a1a1a1 !important;
		}
	.header #secondCol ul.level01 li.level01On:hover.subNodeParent a:hover,
	.header #secondCol ul.level01 li.level01On.sfhover.subNodeParent a:hover {
		color:#ee2617 !important;
		}
	.header #secondCol ul.level01 li.subNode {
		font-weight:normal;
		}
	.header #secondCol ul.level01 li.subNode a {
		padding:0 0 0 17px !important;
		background:url(../Images/Icons/icon_dash_grey.gif) 10px 6px no-repeat !important;
		}
	.header #secondCol ul.level01 li:hover.subNode a{
		/*background:url(../Images/elements/bg_newNavRollover_subNode2.gif) 0 0 no-repeat !important;*/
		background:url(../Images/elements/bg_newNavRollover_subNode3.gif) 0 0 no-repeat !important;
		color:#666;
		}
	.header #secondCol ul.level01 li:hover.level01On.subNode a:hover {
		background:url(../Images/Icons/icon_dash_grey.gif) 10px 6px no-repeat !important;
		}
	.header #secondCol ul.level01 li.subNode li.level02 a,
	.header #secondCol ul.level01 li.subNode li.level02On a {
		padding:2px 9px 1px !important;
		}
	.header #secondCol ul.level01 li:hover.level01 a,
	.header #secondCol ul.level01 li:hover.level01On a {
		background:#f9f9f9 /*url(../Images/Icons/icon_grey_arrow_newNav.gif) 184px 5px no-repeat !important*/;
		}
	.header #secondCol ul.level01 li:hover.level01 li.level02 a,
	.header #secondCol ul.level01 li:hover.level01On li.level02 a,
	.header #secondCol ul.level01 li:hover.level01 li.level02On a,
	.header #secondCol ul.level01 li:hover.level01On li.level02On a {
		background:none !important;
		width:170px !important;
		}
	.header #secondCol ul.level01 li:hover.level01 li.level02 a:hover,
	.header #secondCol ul.level01 li:hover.level01On li.level02 a:hover,
	.header #secondCol ul.level01 li:hover.level01 li.level02On a:hover,
	.header #secondCol ul.level01 li:hover.level01On li.level02On a:hover {
		background:#f9f9f9 /*url(../Images/Icons/icon_grey_arrow_newNav.gif) 184px 5px no-repeat !important*/!important;
		}
	.header #secondCol ul:hover.level01{
		z-index:1;
		}
	.header #secondCol ul.level01 {
		width:192px;
		float:left;
		margin: 0 !important;
		padding: 0 !important;
		position:relative;
		}
	.header #secondCol ul.level01 li:hover.level01 ul.level02,
	.header #secondCol ul.level01 li:hover.level01On ul.level02 {
		display:block !important;
		position:absolute;
		z-index:1 !important;
		padding-top:17px;
		padding-left:17px;
		top:-17px !important;
		left:176px !important;
		width:209px !important;
		height:192px !important;
		background:url(../Images/elements/bg_newNavRollover.png) 3px 0 no-repeat !important;
		font-weight:normal !important;
		}
	.header #secondCol ul.level01 li.level01 ul.level02 li.level02 a,
	.header #secondCol ul.level01 li.level01On ul.level02 li.level02 a {
		color:#666 !important;
		}
	.header #secondCol ul.level01 li.level01On ul.level02 li.level02On a {
		color:#ee2617 !important;
		}
	.header #thirdCol {
		font-weight:normal !important;
		}
	/* brands listing page - add scrollbar to brands in main nav */
	.headerCol.brands ul {
		float:left;
		height:168px;
		list-style-image:none;
		list-style-position:outside;
		list-style-type:none;
		margin:0 !important;
		overflow-x:hidden;
		overflow-y:scroll;
		padding:0 !important;
		width:180px;
		display:block;
		position:relative;
		}
	.headerCol.brands ul li {
		cursor:pointer;
		width:100%;
		}
	.headerCol.brands ul li a,
	.headerCol.brands ul li a:hover {
		width:150px !important;
		}
	.headerCol.brands ul li a:hover {
		background:#f9f9f9 /*url(../Images/Icons/icon_grey_arrow_newNav.gif) no-repeat scroll 160px 5px;*/;
		}
	.headerCol.brands .jScrollPaneTrack {
		background:url(../Images/ecomm/bg-scroll-track-wide.gif) 0 0 !important;
		padding:0 2px;
		}
	.headerCol.brands .jScrollPaneDrag {
		margin-top:2px;
		background:#525252 !important;
		}
	/* hide all */	
	.header #firstCol ul.level01 li:hover.level01On,
	.header #secondCol ul.level01 li:hover.level01On a {
		background:none !important;
		}
	.header #firstCol ul.level01 li:hover.level01On ul.level02,
	.header #secondCol ul.level01 li:hover.level01On ul.level02,
	.header #firstCol ul.level01 li.sfhover.level01On ul.level02,
	.header #secondCol ul.level01 li.sfhover.level01On ul.level02 {
		display:none !important;
		}
		
	.footerColTitle {
		font-weight: bold;
		display: block;
		width: 100%;
		}
	.footerColLinks {
		padding: 3px 0 0 !important;
		}
	.headerCol a {
		color: #a1a1a1;
		text-decoration: none;
		padding: 0 0 3px;
		display: block;
		}
	.headerCol a:hover {
		color: #6d6d6d;
		}
	.footerCol a {
		color: #a1a1a1;
		text-decoration: none;
		padding: 0 0 2px;
		display: block;
		}
	.footerCol a:hover {
		color: #e5e5e5;
		}
	.footerCol .mailingListInfo {
		padding: 2px 0 0;
		margin: 0;
		font-weight: normal !important;
		line-height: 1.5em;
		width: 75%;
		display: block;
		cursor: pointer !important;
		}
	.footerCol input.footerSearchTextbox,
	.footerCol input.footerJoinTextbox {
		color: #fffffa;
		margin: 6px 5px 6px 0;
		padding: 2px 5px 0;
		height: 19px;
		width: 88px;
		border: solid 0 #fff;
		background: transparent url(/images/elements/bg_footerSearchTextbox.gif) no-repeat;
		font-size: 1em;
		display: inline;
		float: left;
		font-family: Arial, Helvetica, sans-serif !important;
		}
	.footerCol input.footerJoinTextbox {
		width:109px;
		margin: 6px 5px 8px 0;
		}
	.footerCol input.footerSubmitButton {
		padding: 0;
		margin: 6px 0 0;
		float: left;
		}
	.footerCol .facebook,
	.footerCol .twitter {
		background:url(../Images/Icons/icon_socialMedia.gif) 0 0 no-repeat;
		width:28px;
		height:28px;
		display:block;
		margin:3px 5px 0 0;
		padding:0 !important;
		text-indent:-9999px;
		float:left;
		}
	.footerCol .twitter {
		background-position:0 -28px;
		}

/* 3 :-------- Main Nav ------------ */

	

/* 4 :-------- Content ------------ */
		
	.container {
		width: 960px;
		margin: 0 auto;
		}
	#content {
		min-height: 576px;
		display: block;
		background: url(/images/elements/bg_content_black.gif) 0 0 repeat-y;
		margin: 0;
		float: left;
		/*position: relative;*/
		}
	#contentWhite {
		min-height: 576px;
		display: block;
		background: url(/images/elements/bg_content_white.gif) 0 0 repeat-y;
		padding: 0 0 30px;
		margin: 0;
		float: left;
		}
	.whiteBg {
		background-color: #fff;		
		}		
	.oneCol {
		float: left;
		width: 960px;
		min-height: 576px;
		padding: 0;
		margin: 0;
		}
	.twoColLeftCol,
	.twoColLeftColReversed,
	.twoColLeftColFourGrids {
		float: left;
		width: 576px;
		min-height: 576px;
		padding: 0;
		margin: 0;
		background: #fff;
		}
	.twoColLeftColReversed {
		float: right !important;
		display: inline;
		}
	.twoColLeftColFourGrids {
		width: 768px !important;
		background: #000 url(/images/elements/bg_productDetail_rightColFeature_blackGradient.jpg) right 0 no-repeat;
		}
	.twoColRightColTwoGrids {
		float: right;
		min-height: 384px;
		width: 384px;
		color: #fff;
		padding: 0 0 192px;
		}
	.twoColRightColThreeGrids {
		float: right;
		min-height: 576px;
		width: 384px;
		color: #fff;
		background: #000;
		}
	.twoColRightColThreeGrids.noBgColor {
		background: none !important;
		/*padding: 0 0 192px;*/
		}
	.oneColRightColThreeGrids {
		float: right;
		min-height: 476px;
		width: 192px;
		color: #fff;
		background: #000;
		}
	.twoColRightColThreeGrids ul {
		height: 576px;
		width: 384px;
		list-style: none;
		padding: 0 !important;
		margin: 0 !important;
		}
	.twoColRightColThreeGrids ul li {
		float: left;
		height: 192px;
		width: 192px;
		}
	.twoColRightColThreeGrids ul li.doubleSizedPromo {
		float: left;
		height: 384px;
		width: 384px;
		}
	.twoColRightColThreeGrids ul li.doubleSizedPromo a,
	.twoColRightColThreeGrids ul li.doubleSizedPromo a:hover {
		float: left;
		height: 384px !important;
		width: 384px !important;
		}
	.twoColRightColThreeGrids ul li.doubleSizedPromoText {
		float: left;
		height: 152px;
		width: 344px;
		}
	#generalPants.majorLabel .twoColRightColThreeGrids .twoColRightColRightCol {
		width:192px;
		height:576px;
		float:right;
		padding:0;
		}
	#generalPants.majorLabel .twoColRightColThreeGrids .twoColRightColLeftCol {
		width:192px;
		padding:0;
		float:left;
		}
	#generalPants.majorLabel .twoColRightColThreeGrids ul {
		padding:0 !important;
		margin:0 !important;
		list-style: none;
		width:192px;
		height:192px;
		}
	#generalPants.majorLabel .twoColRightColThreeGrids .twoColRightColLeftCol ul {
		padding:0 15px !important;
		width:152px;
		}
	#generalPants.majorLabel .twoColRightColThreeGrids .twoColRightColRightCol ul {
		padding:0 !important;
		width:162px;
		}
	#generalPants.majorLabel .twoColRightColThreeGrids ul li {
		width:100%;
		height:auto !important;
		}

/* See content.css */