/*-------------------------------------------------------------------------------------*/
/* undo some default styling of common (X)HTML browsers
/*------------------------------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,a img,:link img,:visited img {border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:'';}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}
.clearfix {
	display: inline-block;
	}
html[xmlns] .clearfix {
	display: block;
	}
* html .clearfix {
	height: 1%;
	}

td {
	padding: 3px;
}

/* ------------------------ GLOBAL ELEMENTS ------------------------ */

/* ------------------------ type selectors ------------------------ */
body { 
	background:#FFF url("../images/bg-body.jpg") top repeat-x;
	text-align:center; 
	font:10px/15px Arial, Helvetica, sans-serif; 
	color:#666;
	padding: 10px 11px;
	}

blockquote { margin: 0 10px 10px; background:#EFEFEF; padding: 10px;}

h1	{ font-size:24px; color:#666; }
h2	{ font-size:20px; color:#666; }
h3	{ font-size:18px; color:#666; }

h1, h2, h3 {
	font-weight: normal;	
}

a:link,a:visited	{ color:#CE1B21; text-decoration:none; outline:none; }
a:hover,a:active	{ color:#666; text-decoration:none; outline:none; }

/* ------------------------ global classes ------------------------ */
.clear	{ 
	clear:both;
	}

div.clear	{ 
	height:.01em; 
	overflow:hidden; 
	}

p.back-to-top {
	text-align:right;
	display:block;
	padding-right:15px;
	background:url("../images/bullet-back-to-top.jpg") right no-repeat;
	}

img.img-left { 
	float:left; 
	margin:2px 10px 10px 0px;
	}

img.img-right { 
	float:right; 
	margin:5px 0px 10px 10px; 
	}
.swatch1 {
		color:#CE1B21;
}

.swatch2 {
	background: #F0F0F0;	
}

.btop {
	border-top: 1px solid #DEDFE1;
	padding-top: 5px;
}

.bbottom {
	border-bottom: 1px solid #DEDFE1;
	padding-bottom: 5px;
}

.related {
	width: 130px;
	padding: 0 13px;
	margin: 10px 0;
	float:left;
	display: inline;
	text-align: center;
}
	.related-img {
		height: 130px;
		width: 130px;
		overflow: hidden;
	}

.wide {
	width: 100%;
}

/* ------------------------------- FORMS ------------------------------- */

input {
	padding: 3px;
	font-size: 10px;
}
select {
	font-size: 10px;
}

#calc-ship-form input {
	width: 144px;
}
	#calc-ship-form select {
		width: 150px;
	}

/* ------------------------------- CONTENT FRAMEWORK ------------------------------- */

/* ------------------------ main framework ------------------------ */
#wrap {
	background:url("../images/bg-wrap.jpg") repeat-y;
	width:800px;
	text-align:left;
	}

/* ------------------------ masthead framework ------------------------ */
#masthead {
	position:relative;
	background:url("../images/sjdlogo2.jpg") 0px 5px no-repeat;
	height:45px;
	text-align: right;
	font-size: 11px;
	font-weight: bold;
	}
	#masthead a {
		color: #6C6C6C;
		line-height: 24px;
	}
	/* index page link within #masthead */		
	#masthead #masthead-link {	
		position:absolute;
		left:0px;
		width:250px;
		top:0px;
		height:30px; 
		text-indent: -9999px;
		}
	#masthead p {
		margin: 0;
		padding: 0;
		font: normal normal bold 16px Arial, sans-serif;
		position: absolute;
		left: 400px;
		top: 7px;
	}
/* ------------------------ column-left framework ------------------------ */
#column-left {
	width:127px;
	float:left;
	}

	#column-left p, #column-left h1, #column-left h2, #column-left h3, #column-left ul, #column-left dl {
		margin:0px 0px 10px 0px;
		}
	
	#column-left ul {
		width: 105px;
		margin: 0 auto 15px;
	}
		#column-left li a {
			display:block;
			width: 105px;
			color: #696A6C;
		}
		#column-left li a:hover {
			background: #DEDFE1;
		}

	/* definition list */
	#column-left dl { padding-left:5px; }
		#column-left dl dt {
			font-weight:bold;
			color:#99CC00;
			}
		#column-left dl dd {
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:10px;  /* pushes text to the right to display bg img */
			margin-left:5px;
			}

/* ------------------------ column-right framework ------------------------ */
#column-right {
	width:655px;
	float:right;
	}

	#column-right p, #column-right h1, #column-right h2, #column-right h3, #column-right ul, #column-right dl {
		margin:0px 0px 10px 0px;
		}

	#column-right form { margin-left:0px; }

	/* single column list */
	#column-right ul { padding-left:5px; }
		#column-right ul li { 
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:10px;  /* pushes text to the right to display bg img */
			}

	/* definition list */
	#column-right dl { padding-left:5px; }
		#column-right dl dt {
			font-weight:bold;
			color:#99CC00;
			}
		#column-right dl dd {
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:10px;  /* pushes text to the right to display bg img */
			margin-left:5px;
			}

/* ------------------------ bottom-wrap framework ------------------------ */
/* ------------ must have below column-left and column-right to clear the float ------------ */
#bottom-wrap {
	background:url("../images/bottom-wrap.jpg"); /* delete if not needed */
	width:100%; /* fix for Safar */
	height:40px;
	clear:both; /* important - do not remove */
	}


/* ------------------------ Checkout Steps ------------------------ */

#checkout-steps {
	margin: 0 0 20px 0;
}