/* Page Structure*/

@import url("content.css");

/* TOC

1: - Global Styles

2: - Header & Footer

3: - Main Nav

4: - Content

*/

/* Reset styles */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}:focus{outline:0;}body{line-height:1.25;font-size:75%;font-family:Arial,Helvetica,sans-serif;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"""";}
body{ font-size:75%; }
input, select, textarea{ font-family:Arial, Helvetica, sans-serif; font-size:1em; }
strong { font-weight: bold; }

/* 1 :-------- Global Styles ------------ */
	body {
		margin:0;
		padding: 0;
		font-size:75%;
		font-family:Arial, Helvetica, sans-serif;
		background:url(../Images/generic/bg_wood.gif) repeat;
		/*background:url('/images/generic/bg_Herringbone.jpg') repeat;*/
		}
	#skipLinks {
		position: absolute;
		margin-top: -9999px;
		}
	.clear {
		clear:both;
		height: 1px;
		margin-top: -1px;
		}
	hr { display:none; }
	a { text-decoration:none;}
	
	.ir span{
		display:block;
		overflow:hidden;
		position:absolute;
		top:0;
		left:0;
		}

/* 2 :-------- Header & Footer ------------ */	
#header{
	height:131px;
	position:relative;
	z-index:1000; /* to fix shop nav & shop listing rollover */
	width:100%;
	}
	#header .mainLogo{
		position:absolute;
		z-index:0;
		top:26px;
		left:35px;
		}
		#header .mainLogo a{
			position:relative;
			display:block;
			text-align:center;
			float:left;
			margin:0 18px 0 0;
			overflow:hidden;
			}
		.mainLogo #surfDiveSki{
			width:155px; height:36px;
			}
		.mainLogo #jettySurf{
			height:34px; width:99px;
			}
			#header .mainLogo span{	background:url('/images/generic/mainLogo.png') no-repeat; }
				.mainLogo #surfDiveSki span{ width:155px; height:36px; background-position:0 0; }
				.mainLogo #jettySurf span{ height:34px; width:99px; background-position:0 -36px; }

/* 3 :-------- Main nav ------------ */
#mainNav{
	position:absolute;
	right:30px;
	top:52px;
	}
	#mainNav ul{
		float:left;
		list-style:none;
		margin:0;
		padding:0;
		}
		#mainNav ul li{
			float:left;
			margin:0 !important;
			padding:0 0 0 5px !important;
			}
		#mainNav ul li.level01On{
			padding: 0 3px 0 0 !important;
			background:url(/Images/nav/bg-mainNav-right.png) right 2px no-repeat;
			}
		#mainNav ul li.level01On a,
		#mainNav ul li.level01On a:hover{
			color:#fff;
			background:url(/Images/nav/bg-mainNav-left.png) 0 2px no-repeat;
			padding:5px 2px 5px 5px !important;
			margin:0 0 0 5px !important;
			}
			#mainNav ul li a{
				color:#fff;
				text-decoration:none;
				text-transform:uppercase;
				font-size:0.917em;
				line-height:1.4em !important;
				font-weight:bold;
				display:block;
				margin:0 !important;
				padding:5px !important;
				}
			#mainNav ul li a:hover{
				color:#e6e6e6;
				}
				
/* 4 :-------- ShopNav ------------ */
#shopNav{
	background:url('/images/nav/bg-shopNav.png') 0 0 no-repeat;
	height:40px;
	position: absolute;
	left:0;
	bottom:0;
	width:100%;
	}
	#shopNav ul{
		position: relative;
		float:left;
		margin:0 30px 0 25px;
		padding:5px 0 0;
		list-style:none;
		}
		#shopNav ul li{
			float:left;
			margin:0 3px 0 0;
			padding:0 0px;
			}
			#shopNav ul li a{
				color:#b1b1b1;
				font-size:1.33em;
				line-height:12px;
				text-decoration:none;
				display:block;
				}
				#shopNav ul li a strong{
					display:block;
					font-weight:normal;
					background:url('/images/nav/shopNav-rnd.gif') -9999em -9999em no-repeat;
					}
					#shopNav ul li a span{
						padding:9px 10px 14px;
						display:block;
						background:url('/images/nav/shopNav-rnd.gif') -9999em -9999em no-repeat;
						}
				
		#shopNav ul li.on{
			}
			#shopNav ul li.on a{
			color: #b1b1b1;
				/*background:#3e3e3e url('/images/nav/mainNav-on2-herringbone.jpg') 0 0 no-repeat;*/
				background:url('/images/nav/mainNav-on2.jpg') 0 0 no-repeat;
				}
				#shopNav ul li.on a strong{
					background-position:0 0;
					}
					#shopNav ul li.on a span{
						padding-bottom:9px;
						background-position:100% 0;
						}
			#shopNav ul li.on a.home { background-position:-25px 0px;}
			#shopNav ul li.on a.mens { background-position:-25px 0px;}
			#shopNav ul li.on a.womens { background-position:-87px 0px;}
			#shopNav ul li.on a.girls { background-position:-173px 0px;}
			#shopNav ul li.on a.accessories { background-position:-228px 0px;}
			#shopNav ul li.on a.surf { background-position:-337px 0px;}
			#shopNav ul li.on a.skate { background-position:-390px 0px;}
			#shopNav ul li.on a.gift-vouchers { background-position:-453px 0px;}
			#shopNav ul li.on a.watches { background-position:-572px 0px;}
			#shopNav ul li.on a.new { background-position:-658px 0px; }
			
			/* make 'new' bold */
			#shopNav ul li a.highlight strong span, 
			#shopNav ul li.on a.highlight strong span { 
				font-weight:bold !important;
				}
			
		#shopNav ul li a:hover,
		#shopNav ul li.over a{
			color:#000000;
			background:#f1f1f1;
			}
		#shopNav ul li a:hover strong,
		#shopNav ul li.over a strong{
			background-position:0 -30px;
			}
		#shopNav ul li a:hover span,
		#shopNav ul li.over a span{
			padding-bottom:14px;
			background-position:100% -30px;
			}
			
		/* maybe 'Home' doesn't have dropdown */
		#shopNav ul li.over a.home strong,
		#shopNav ul li a.home:hover strong,
		#shopNav ul li.over a.highlight strong,
		#shopNav ul li a.highlight:hover strong{
			background-position:0 0;
			}
		#shopNav ul li.over a.home span,
		#shopNav ul li a.home:hover span,
		#shopNav ul li.over a.highlight span,
		#shopNav ul li a.highlight:hover span{
			padding-bottom:9px;
			background-position:100% 0px;
			}
		
		/* browseby drop downs */
		#shopNav .browseBy{
			position:absolute;
			z-index: 100;
			top:40px;
			padding-bottom:6px;
			background:url('/images/generic/browseBy-shadeB.png') 0 100% no-repeat;
			width:357px;
			display:none;
			}
			#shopNav .browseByInner{
				padding-right:7px;
				float:left;
				zoom:1;
				background:url('/images/generic/browseBy-shadeR.png') 100% 0 repeat-y;
				}
			#shopNav .browseByInner-2{
				float:left;
				zoom:1;
				background:url('/images/generic/shopNav-dropdown.gif') 0 0 repeat;
				}
				#shopNav .browseBy .col{
					width:145px;
					float:left;
					padding:30px 15px 24px;
					background:url('/images/generic/shopNav-dd.png') 0 0 no-repeat;
					min-height:236px;
					}
				#shopNav .browseBy .colalt{
					background-position:-175px 0;
					}
					#shopNav .browseBy p,
					#shopNav .browseBy span{
						width:91px;
						height:33px;
						display:block;
						margin:0;
						}
					#shopNav .browseBy p{
						position:relative;
						overflow:hidden;
						margin-bottom:13px;
						}
					#shopNav .browseBy span{ 
						position:absolute;
						top:0;
						left:0;
						background:url('/images/titles/browseBy.png') 0 0 no-repeat; 
						}
					#shopNav .browseBy .brand span { background-position:-91px 0;}
					#shopNav .browseBy ul{
						margin:0 !important;
						padding:0 !important;
						float:left;
						width:100%;
						}
						#shopNav .browseBy li{
							float:none;
							padding:0;
							margin:0;
							}
					#shopNav div.browseBy ul li a,
					#shopNav div.browseBy a.more{
						padding:2px 9px 2px 15px;
						font-size:1.16em;
						line-height: 1.1em;
						color:#666666;
						display:inline-block;
						background-color:none;
						background:url('/images/icons/browseBy-icon.gif') 5px 7px no-repeat;
						}
					#shopNav div.browseBy a.more{
						float:left;
						}
						#shopNav .browseBy ul li a:hover,
						#shopNav .browseBy a.more:hover{
							background:#03a8e6 url('/images/icons/browseBy-icon.gif') 5px -50px no-repeat;
							color:#fff;
							padding-bottom:2px;
							}
					#shopNav .browseBy a.more{
						margin-top:21px;
						}
				
/* 5 :-------- Header Links ------------ */
#headerLinks{
	font-family:Helvetica, Arial, sans-serif;
	position:relative;
	z-index:1001;
	right:30px;
	float: right;
	top:0;
	width:30%;
	font-weight:bold;
	}
	/* bag status - see ecomm.css */
	ul.accountLinks{
		list-style:none;
		margin:0;
		padding:0;
		position:absolute;
		top:11px;
		right:205px;
		font-weight:bold;
		}
		ul.accountLinks li{
			float:left;
			margin:0;
			padding:0;
			color:#fff;
			font-size:0.917em;
			}
			ul.accountLinks li a{
				color:#fff;
				padding:5px;
				}

/* search */
#searchBar,
.searchBar {
	position: absolute;
	z-index: 2;
	right: 32px;
	top: 102px;
	}
	.searchbox {
		background-color: none !important;
		background: url(/Images/elements/bg-keyword.png) 0 0 repeat-y !important;
		border: none;
		font-size: .917em;
		color: #333;
		padding: 3px 3px 2px;
		margin: 0 !important;
		float: left;
		}
	.searchbtn {
		margin: 0 0 0 -1px;
		}	

#container{
	width:963px;
	}
	/* --remove full width from homepage
	#homePage {
		min-width: 963px;
		width: 100%;
		}
	#homePage #container {
		width: 100%;
		width:expression(document.body.clientWidth < 963? "963px" : document.body.clientWidth > 1200? "100%" : "auto");
		}
	*/

#body{
	overflow:hidden;
	background:#fff background: url(/Images/generic/bg_wood.gif) 0 0 repeat;
	padding: 0 0 28px;
	}
	#homePage #body,
	#homePage #bodyPromo {
		position: relative;
		z-index:1;
		width: 100%;
		padding: 0;
		}
	#homePage #bodyPromo {
		padding:0 0 17px;
		background: url(/images/elements/bg-whatsNew-footer.gif) right bottom no-repeat;
		}
	#ecomm #body {
		padding: 30px 0 28px;
		background: #fff;
		width: 100%;
		}
	#checkout #body {
		padding: 30px 0 28px;
		background: #fff url(/Images/elements/bg-checkout.gif) 0 0 repeat-y;
		width: 100%;
		display: block;
		}
	#blackBg #body { 
		background: url(/Images/elements/bg-news.png) 0 0 repeat-x;
		padding: 0;
		}
	
	/* Main section */
	#main,
	#mainWhiteBg {
		float:left;
		min-height: 500px;
		padding: 0 24px 28px 36px;
		background: #fff;
		}
		#ecomm #main,
		#ecomm #mainWhiteBg {
			background: #fff url(/Images/elements/bg-shopDetail.gif) right 30px repeat-y;
			padding: 0 0 0 36px !important;
			margin: 0 !important;
			float: left;
			width:925px;
			}
		#ecomm #mainWhiteBg {
			background: none;
			}
			#ecomm #main .left,
			#ecomm #mainWhiteBg .left {
				float: left;
				display:block;
				/*width: 100%;*/
				width:675px;
				background:#fff;
				}
			#ecomm.fullWidth #mainWhiteBg {
				width: 940px !important;
				}
			#ecomm.fullWidth #mainWhiteBg .left,
			#ecomm.fullWidth #mainWhiteBg .left .wysiwyg {width: 100% !important;}
		#blackBg #main {
			background: url(/Images/elements/bg-blackBg.png);
			width: 100%;
			float: left;
			}
		#checkout #main {
			width: 1140px !important; 
			background:none;
			position: relative;
			}
		#checkout #main .left {
			background: transparent;
			width: 410px !important;
			overflow: hidden;
			}
		#checkout #main .rightCol {
			margin: 0;
			position: absolute;
			left: 480px;
			top: -52px;
			float: left;
			}
			
		.productDetail{
			width:675px;
			float:left;
			margin: -35px 0 0;
			}
		.mightAlsoLike{
			float:left;
			position:relative;
			padding: 0 0 19px 10px;
			background: url(/Images/elements/bg-mightAlsoLikeBottom.gif) 0 0 repeat-x;
			width:655px;
			}
		.fullWidth .mightAlsoLike {background:#fefefe url(/Images/elements/bg-mightAlsoLikeBottom.gif) 0 0 repeat-x;}
		#blackBg .athletesDetail .mightAlsoLike {right:-222px; background: #fefefe url(/Images/elements/bg-mightAlsoLikeBottom.gif) 0 0 repeat-x; }
		.fullWidth .mightAlsoLike.recentlyViewed {float:left;}
	
	/* Sub nav */
	.subNav {
		float: left;
		width: 100%;
		padding: 13px 0 27px;
		margin: 0 0 0 -7px !important;
		}
		.subNav ul {
			margin:0;
			padding:0;
			}
			.subNav ul li,
			.subNav ul li.on{
				list-style: none;
				float:left;
				margin:0;
				padding:0;
				font-size:0.917em;
				}
				.subNav ul li a{
					font-weight: bold;
					color:#7a7a7a;
					padding: 5px 7px 4px;
					display: block;
					text-transform: uppercase;
					text-decoration: none;
					float:left;
					}
				.subNav ul li a:hover{
					color: #acacac;
					text-decoration: none;
					}
				.subNav ul li.on a{
					background: url(/Images/nav/bg-subNav.png) 0 0 repeat-x;
					color: #acacac;
					}
					
	/* sub nav on white bg */
	#ecomm .subNav {	
		margin: -17px 0 0 29px !important;
		padding: 0 0 50px !important;
		width:100%;
		}
		#ecomm .subNav ul li.on a {
			color:#343434;
			}
					
	/* Product filters */
	.productNav {
		padding: 0 30px 0 10px;
		display: block;
		background: #fff;
		position: relative;
		z-index:0;
		}
	.productFiltersCol,
	.shoppingBagLinks {
		width:198px;
		height:400px;
		background:#b7b7b7;
		float:right;
		}
	
	/* Sharelinks // Paging */
	.grayBar { 
		clear:both; 
		}
	
/* x :-------- Footer styles ------------ */	
	#footer{
		height:178px;
		width:100% !important;
		float:left;
		margin:0 !important;
		padding:0 !important;
		}
		#homePage #footer{margin-top:-17px !important;}
		#blackBg #footer{width:963px !important;}
		#blackBg.fullWidth #footer{width:1200px !important;}
	
	/* Footer Links */
	#footerLinks{
		padding:33px 0 27px 412px;
		background: url('/images/generic/footerLinks-bg2.png') 0 0 repeat-y;
		float:left;
		height:30px;
		}
	#ecomm #footerLinks,
	#blackBg #footerLinks,
	#checkout #footerLinks {
		width:551px;
		}
	#ecomm #footerNotes,
	#blackBg #footerNotes,
	#checkout #footerNotes{
		width:641px;
		}
	#ecomm.fullWidth #footerLinks,
	#blackBg.fullWidth #footerLinks,
	#checkout.fullWidth #footerLinks{
		width:788px;
		}
	#ecomm.fullWidth #footerNotes,
	#blackBg.fullWidth #footerNotes,
	#checkout.fullWidth #footerNotes {
		width:878px;
		}
	#homePage #footerLinks,
	#homePage #footerNotes {
		float:none;
		}
	#homePage #footerNotes {height:33px;}
	#footerLinks p.top {margin: 0 0 0 -60px;}
	#footerLinks p {margin:0 0 0 -60px;}
	#footerLinks ul.promo{
		float:left;
		list-style:none;
		margin:-17px 0 -17px -385px;
		padding:0;
		display:block;
		width:320px;
		}
	#footerLinks ul.promo li,
	#footerLinks ul.promo li a,
	#footerLinks ul.promo li a:hover {
		float:left;
		position:relative;
		}
	#footerLinks ul.promo li a,
	#footerLinks ul.promo li a:hover {
		cursor:pointer !important;
		}
	#footerLinks ul.promo li.first{
		margin-right:36px;
			}
	#footerLinks p{
		color:#a7a4a0;
		font-size:0.92em;
		font-weight:bold;
		float:left;
		width:100%;
		}
	#footerLinks span { text-transform:uppercase; font-size:0.9em;}
	#footerLinks a{ color:#a7a4a0; }
	#footerLinks p.top, #footerLinks p.top a{ color:#dbdbd9;}
	#footerLinks p.top a:hover { color:#f3f3f3; }
	#footerLinks a:hover { color:#c8c8c8; }
	
	/* Footer Notes */
	#footerNotes{
		padding:31px 0 28px 322px;
		background:url('/images/generic/footerNotes-bg2.png') 0 0 repeat-y;
		float:left;
		}
	.fullWidth #footerNotes	{
		width:641px;
		}
	.fullWidth #footerNotes{width:878px;}
		#footerNotes ul{
			list-style:none;
			padding:0;
			margin:0 0 0 -289px;
			}
			#footerNotes ul li{
				display:block;
				position:relative;
				float:left;
				overflow:hidden;
				margin-right:5px;
				height:30px; 
				text-indent:-9999em; 
				}
			#footerNotes ul li.vs{ width:60px; margin-top:-4px;}
			#footerNotes ul li.pp{ width:50px; }
			#footerNotes ul li.mc{ width:37px; }
			#footerNotes ul li.visa{ width:39px; }
			#footerNotes ul li.amex{ width:37px; }
			#footerNotes ul li.diners{ width:35px; }
				#footerNotes ul li span{
					background:url('/images/icons/acceptedPayment.png') 0 0 no-repeat;
					height:30px;
					}
			#footerNotes ul li.vs span{ width:60px; background-position:0 0; }
			#footerNotes ul li.pp span{ width:50px; background-position:-60px 0; }
			#footerNotes ul li.mc span{ width:37px; background-position:-110px 0; }
			#footerNotes ul li.visa span{ width:39px; background-position:-147px 0; }
			#footerNotes ul li.amex span{ width:37px; background-position:-186px 0; }
			#footerNotes ul li.diners span{ width:35px; background-position:-223px 0; }
			
		#footerNotes p{
			color:#666666;
			font-size:0.92em;
			width:338px;
			float:left;
			padding: 0 0 0 30px;
			}
	
	/* Social Media Icons */
	#footerNotes .socialMediaIcons {
		float:right;
		margin:0 30px 0 0;
		width:110px;
		}
	#footerNotes .socialMediaIcons .icon {
		display:block;
		height:32px;
		float:left;
		background:url(../Images/Icons/icon-socialMedia.png) 0 0 no-repeat;
		text-indent:-9999em;
		}
	#footerNotes .socialMediaIcons .icon.tw {
		width:32px;
		margin:0 5px 0 0;
		}
	#footerNotes .socialMediaIcons .icon.fb {
		background-position: 0 -32px;
		margin:0 5px 0 0;
		width:32px;
		}
	#footerNotes .socialMediaIcons .icon.yt {
		background-position: 0 -64px;
		width:32px;
		}