/**
 * Filename: main.css
 *
 * File contains outline and structure of entire site; repeated components/general classes.
 * @author     Stewart Howe <stewart@celermedia.com>
 */

/*reset*/
html, body, div, span, h1, h2, h3, h4, h5, h6, 
p, a, abbr, em, img, ins, strong, dl , dt , 
dd , ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:		0 auto;
	padding:	0;
	border:		0;
	outline:	0;
	font-size:	100%;
	background: transparent;
	vertical-align: baseline;
}
body		{ line-height:  1;		}
ol, ul		{ list-style:	none;	}
:focus { outline:	0; }
abbr   { cursor: help; }
.clear { clear: both;  }


/*site structure*/
html,body {
	background-color:	#c1c1c1;
	font:				normal 12px 'Trebuchet MS','LucidaGrande','Verdana',sans-serif;
	color:				#4b4b4b;
	background:			url('./../images/bg.jpg') 0 0 repeat;
}

body#coastline {
	min-width:			948px;
} #clBody {
	width:				948px;
	min-height:			500px;
	border-left:		8px solid #6d6d6d;
	border-right:		8px solid #6d6d6d;
	background:			#ffffff;
  }

.grunge {
	position: absolute;
	width:		156px;
	height:		279px;
	top:		0;
} #grl { left: -164px;
	 background: url('./../images/grungeLeft.png') 0 0 no-repeat !important;
	 background: url('./../images/grungeLeft.gif') 0 0 no-repeat;	}
  #grr { right: -164px;
	 background: url('./../images/grungeRight.png') 0 0 no-repeat !important;
	 background: url('./../images/grungeRight.gif') 0 0 no-repeat;
  }

#header {
	width:				100%;
	height:				170px;
	position:			relative;
}
	#logo {
		width:					372px;
		height:					138px;
		overflow:				hidden;
		position:				absolute;
		top:					28px;
		left:					-3px;
		z-index:				99;
		background:				url('./../images/logo.png') 0 0 no-repeat !important;
		background:				url('./../images/logo.gif') 0 0 no-repeat;
	} #logo span { display: none; visibility: hidden; }
	  #logo a { 
		text-decoration: none;
		display:		block;
		height:			115px;
	  }

	#topNav {
		width:				100%;
		height:				30px !important;
		height:				20px;
		padding-top:		10px;
	}
		#topNav ul li {
			float:			right;
			font:			bold 15px 'Trebuchet MS','LucidaGrande','Verdana',sans-serif;
			text-transform: uppercase;
			letter-spacing: -1px;
			margin-right:	20px;
		}
			#topNav ul li a {
				text-decoration: none;
				color:		#adadad;
			}
			#topNav ul li a:hover {
				color:		#8a8a8a;
				border-bottom: 2px solid #8a8a8a;
			}

		#cartBox {
			float:			right;
			width:			30%;
			height:			20px;
			margin-right:	6px;
			background:		#dcdcdc url('./../images/cart.gif') 6px 3px no-repeat;
			color:			#5a5a5a;
		} #cartBox #cartInfo em { color: #b90d09; }
		  #cartBox #cartInfo {
			float:			left;
			padding:		2px 0 0 25px;
			font-size:		11px;
			font-weight:	normal;
		}
		a#viewCart {
			display:		block;
			float:			right;
			margin:			1px 1px 0 0;
			width:			45px;
			height:			17px;
			background:		#302c26;
			border:			1px solid #302c26;
			color:			#ffffff;
			font-weight:	bold;
			font-size:		11px;
			text-decoration: none;
			text-align:		center;
		} a#viewCart span { display: none; visibility: hidden; }
		  a#viewCart:hover {
			background:		#b90d09;
			color:			#ffffff;
			text-decoration: underline;
		  }
	#topBanner {
		position:			relative;
		width:				100%;
		height:				103px;
		background:			url('./../images/hbg.jpg') 4px 0 no-repeat;
	}
		#topBanner h2 {
			display:		block;
			position:		absolute;
			top:			32px;
			right:			16px;
			padding:		4px;
			width:			340px;
			height:			35px;
			color:			#486a6c;
			background:		#b7c3c2;
			text-align:		center; overflow:hidden;
			text-transform: uppercase;
			letter-spacing: -1px;
			font-weight:	bold;
			font-size:		28px;
		} #topBanner h2 span { display: none; }

	ul#menu {
		width:				100%;
		height:				28px;
		background:			#efefef;
	}
	#menu li {
		float:				right;
		width:				125px;
		margin-right:		1px;
		position:			relative;
	} #menu #Footwear { width: 110px; } #menu #Guys, #menu #Skate { width: 75px; } 
	#menu li a {
		display:			block;
		height:				20px;
		padding:			4px 0 4px 0;
		text-decoration:	none;
		text-indent:		20px;
		font:				bold 17px 'Arial','Verdana',sans-serif;
		color:				#575757;
		background:			url('./../images/bulletA.gif') 6px 10px no-repeat;
	}
		ul#menu li a:hover , ul#menu li .highLightItem  {
			color:					#ffffff;
			background:				#4c4c4c url('./../images/bulletA.gif') 6px -10px no-repeat;
		}
			ul#menu li ul.hovered {
				width:				126px;
				display:			block;
				height:				0;
				overflow:			hidden;
				position:			absolute;
				z-index:			98;
			}
			ul#menu li ul.hovered li a {
				display:			block;
				width:				100%;
				height:				13px;
				font:				normal 11px 'LucidaGrande','Arial','Lucida Sans','Lucida Sans Typewriter','Verdana',sans-serif;
				background-image:	none;
				background-color:	#2b2b2b;
				color:				#6d6d6d;
				text-indent:		15px;
				padding-bottom:		6px;
				border-bottom:		1px dotted #484848;
				border-left:		3px solid #1a1a1a;
			}
			ul#menu li ul.hovered li a:hover {
				color:				#ffffff;
				background-color:	#0e0e0e;
				text-indent:		15px;
				border-bottom:		1px dotted #ffffff;
				border-left:		3px solid #ab0403;
			}

#navWrap {
	position:			relative;
	float:				left;
	width:				137px;
	height:				910px;
	padding-right:		8px;
	padding-left:		2px;
	background:			#efefef;
}
  #nav {
	position:			absolute;
	top:				-14px;
	z-index:			1;
	width:				137px;
	height:				99%;
	padding:			2px 0 10px 0;
	background:			#ffffff;
	color:				#313131;
	border-top:			1px solid #acacac;
	border-right:		1px solid #acacac;
	border-bottom:		1px solid #acacac;
  }
	#nav li#search { }
		#inputBoxSearch {
			display:	block;
			margin:		0 auto;
			width:		130px;
			height:		20px;
			padding:	6px 1px 0px 1px;
		}
		#inputBtnSearch {
			display:	block;
			margin:		0 auto;
			border:		0 none;
			width:		132px;
			height:		29px;
			margin-top: 2px;
			background:	url('./../images/btnSearch.gif') 0 0 no-repeat;
		} #inputBtnSearch:hover { background-position: 0 -29px; }
	#nav li a {
		display:			block;
		font:				bold 15px 'LucidiaGrande Bold','LucidaGrande','Lucida Sans','Lucida Sans Typewriter','Verdana',sans-serif;
		text-indent:		10px;
		padding-top:		2px;
		padding-bottom:		1px;
		color:				#313131;
		text-decoration:	none;
		border-right:		2px solid #ffffff;
	} #nav li a:hover { background: #f6f6f6; border-right: 2px solid #486a6c; } #nav li a:active , #nav li.navListHead a:active { background: #efefef; border-right: 2px solid #b90d09; }
	#nav li.navListHead a {
		font:				bold 15px 'LucidiaGrande Bold','LucidaGrande','Lucida Sans','Lucida Sans Typewriter','Verdana',sans-serif;
		text-indent:		10px;
		padding-top:		3px;
		padding-bottom:		2px;
		color:				#313131;
		text-decoration:	none;
		background:			none;
	} #nav li.navListHead a:hover { background: #f6f6f6 none; }
		#nav li ul li a {
			font:			normal 11px 'LucidaGrande','Lucida Sans','Lucida Sans Typewriter','Verdana',sans-serif;
			text-indent:	20px;
			color:			#313131;
			text-decoration: none;
			background:		#ffffff url('./../images/bulletC.gif') -80px -70px no-repeat;
		}
		#nav li ul li a:hover {
			background:		#f6f6f6 url('./../images/bulletC.gif') 8px 7px no-repeat;
		}

.page { width: 100%; }
.subpage {
	width:		799px;
	float:		right;
}

#footer {
	clear:				both;
	height:				225px;
	background:			#efefef;
}
	.footCol {
		float:			left;
		width:			290px;
		height:			160px;
		margin:			12px 0 7px 15px;
		background:		#f5f5f5;
		border:			1px solid #dedede;
		color:			#888888;
		font:			normal 12px 'Arial','Verdana',sans-serif;
	}
		.footCol ul {
			float:			left;
			margin:			10px 0 0 28px;
		} .footCol ul li { text-indent: 10px; }
		.footCol .footListHead {
			color:			#486a6c;
			font:			bold 20px 'Arial','Verdana',sans-serif;
			text-indent:	0;
		}
		.footCol ul li a {
			padding-right:	10px;
			text-decoration: none;
			color:			#888888;
		}
		.footCol ul li a:hover {
			color:			#606060;
			border-bottom:	1px dotted #505050;
			background:		url('./../images/bulletB.gif') center right no-repeat;
		}
		.footCol p {
			width:		80%;
			padding:	5px 0 5px 0;
		}

		#inputBoxNewsletter {
			display:	block;
			margin:		0 auto;
			width:		261px;
			height:		26px;
			padding:	7px 2px 0px 2px;
		} h2#footNewsletter { margin: 12px 0 0 12px; }
		#inputBtnNewsletter {
			display:	block;
			margin:		0 auto;
			border:		0 none;
			width:		265px;
			height:		34px;
			margin-top: 2px;
			background:	url('./../images/btnNewsletter.gif') 0 0 no-repeat;
		} #inputBtnNewsletter:hover { background-position: 0 -34px; }
		
		#payments {
			background:	#f5f5f5 url('./../images/payments.gif') 15px 15px no-repeat;
		}

#coastlineCopy {
	clear:			both;
	padding:		15px 0 0 25px;
}

/*repeated components*/
.muchoGrande {
	font-family: 	'LucidiaGrande Bold','LucidaGrande','Lucida Sans','Lucida Sans Typewriter','Verdana',sans-serif;
}
.headingA {
	position:		relative;
	display:		block;
	color:			#486a6c;
	font:			bold 28px 'Arial','Verdana',sans-serif;
	padding:		6px 0 18px 0;
} .headingA span {
	position:		absolute;
	left:			10px;
	bottom:			6px;
	color:			#aaaaaa;
	font-size:		12px;
	font-weight:	normal;
  }
.headingB {
	margin-top:		10px;
	margin-bottom:	10px;
	width:			85%;
	color:			#000000;
	font:			bold 18px 'Arial',sans-serif;
}
.headingC {
	display:		block;
	margin-left:	9px;
	margin-bottom:	10px;
	padding-top:	2px;
	height:			20px;
	color:			#575757;
	font:			bold 16px 'LucidaGrande','Lucida Sans','Arial',sans-serif;
	text-transform:	uppercase;
	text-indent:	18px;
	background:		url('./../images/register.gif') 2px 5px no-repeat;
}

.noticeHeading {
	position:		absolute;
	top:			-7px;
	left:			5px;
	font:			bold 14px 'LucidaGrande','Lucida Sans','Arial','Verdana',sans-serif;
	color:			#575757;
	text-indent:	15px;
	background:		url('./../images/notice.gif') 2px 5px no-repeat;
}

.inputBoxA {
	border:		0 none;
	background:	#cacaca;
	color:		#575757;
	font:		normal 11px 'Trebuchet MS','Verdana','Arial',sans-serif;
}
.inputBoxB {
	border:		1px solid #d2d2d2;
	background:	#ffffff;
	color:		#929292;
	font:		normal 12px 'Trebuchet MS','Verdana','Arial',sans-serif;
} .inputBoxB:focus { border: 1px solid #a5a5a5; }

.button { cursor: pointer; border: none;
	display:		block;
	background-repeat: no-repeat;
	font:			normal 20px 'Trebuchet MS','LucidaGrande','Verdana',sans-serif;
	text-align:		 center;
	text-decoration: none;
	text-transform:	 uppercase;
} .button:hover {
	color:			#ffffff;
  }
	.red {
		width:			265px;
		height:			30px;
		padding-top:	4px;
		color: 			#d19897;
		background-image: url('./../images/btnGeneric.gif');
		background-position: 0 0;
	} .red:hover { background-position: 0 -34px; }
	.grn {
		width:			150px;
		height:			25px;
		padding-top:	4px;
		font-size:		16px;
		font-weight:	bold;
		color: 			#d1dada;
		background-image: url('./../images/btnGenericB.gif');
		background-position: -100px 0;
	} .grn:hover { background-position: -100px -29px; }
	.lng {
		background-position: -50px 0;
		width:	200px;
	} .lng:hover { background-position: -50px -29px; }
	  .lng:hover { background-position: -50px -34px; }

.inputCheckoutA {
	border:		1px solid #efefef;
	background: #efefef;
	color:		#777777;
	font:		normal 14px 'Trebuchet MS','Verdana','Arial',sans-serif;
} .inputCheckoutA:hover , .inputCheckoutA:focus , .inputCheckoutA:active { border: 1px solid #777777; color: #666666; }
	.inputCheckoutQty {
		width:	30px;
		height: 30px;
		padding: 15px 0 0 15px;
	}
	
ul.pagination { display: block;
	clear: 		both;
	width: 		96.2%;
	height: 	32px;
	margin-top:	-10px;
	margin-right: 4px;
	margin-bottom: 10px; 
}
	ul.pagination li {
		float: 	left;
		margin-left: 3px;
	}
	ul.pagination li a {
		display: 	block;
		width: 		16px;
		height: 	21px;
		padding: 	4px 0 0 9px;
		color:		#80abff;
		text-decoration: none;
		border: 	1px solid #b3cdff;
		background: #ffffff;
	} ul.pagination li.active a { color: #aaaaaa; border: 1px dotted #aaaaaa !important; border: 1px solid #ffffff; }
	ul.pagination li a:hover {
		border: 	 1px solid #6994e6;
		font-weight: bold;
		text-decoration: underline;
	}
	

		
		
		.roundBox {
			margin:				0 auto;
			width:				475px;
			background-color:	#efefef;
		}
		.rbHead, .rbHead p, .rbFoot, .rbFoot p { height: 11px;
			background-repeat:	no-repeat; background-position: 0 0; }
		.rbHead	 {width:100%;  background-image: url('./../images/rndCornerA.gif'); }
		.rbHead p{float:right; width: 11px;
							   background-image: url('./../images/rndCornerB.gif'); }
		.rbFoot  {width:100%;  background-image: url('./../images/rndCornerD.gif'); }
		.rbFoot p{float:right; width: 11px; height: 11px; clear: both;
							   background-image: url('./../images/rndCornerC.gif'); margin-top: 0; margin-bottom: -8px;}
		
		.r {
			margin:				0 auto;
			width:				730px;
			background-color:	#ffffff;
		}
		.rH, .rH p, .rF, .rF p { height: 11px;
			background-repeat:	no-repeat; background-position: 0 0; }
		.rH	 {width:100%;  background-image: url('./../images/rndCornerAA.gif'); }
		.rH p{ float:right; width: 11px;
							 background-image: url('./../images/rndCornerBB.gif'); }
		.rF  { width:100%;  background-image: url('./../images/rndCornerDD.gif'); }
		.rF p{ float:right; width: 11px; height: 11px; clear: both;
							 background-image: url('./../images/rndCornerCC.gif'); margin-top: 0; margin-bottom: -8px;}