body 
{
	background: none;
	text-align:center;
	font-family: helvetica, georgia, sans-serif;
}

#container 
{
	width: 979px; /*width of white area in bg image */
	margin: auto;
	text-align: left;
}

div, ul, li, img, body html 
{
	margin: 0;
	padding: 0;
}

h1, h3, h3, h4, h5 h6 
{
	margin: 0;
	padding: 0;
}

li 
{
	list-style:none;
}

#header 
{
	height:195px; /* ~ height of top nav, btns, etc... in bg image */
	/*188 in IE*/
}

#main
{
	margin:0;
	padding-top:0;
}

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

     -- S E L E C T I O N   B A N N E R   (BEGIN) --

The selection banner shows info of the currently selected item as well as 
breadcrumbs for previous selections

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

#selection-banner
{
	padding-top:4px;
	line-height:36px;
	height:36px;
}
#selection-banner.step1
{
	background: url(/images/stepsimages/step1-selection-banner-bg.jpg) repeat-x top left;
}
#selection-banner.step2
{
	background: url(/images/stepsimages/step2-selection-banner-bg.jpg) repeat-x top left;
}
#selection-banner.step3
{
	background: url(/images/stepsimages/step3-selection-banner-bg.jpg) repeat-x top left;
}
#selection-banner.step4
{
	background: url(/images/stepsimages/step4-selection-banner-bg.jpg) repeat-x top left;
}


#selection-banner h1
{
	color:white;
	float:left;
	text-transform:uppercase;
	margin-left:30px;
	margin-right:20px;
	background-image: none;
}

#selection-banner .breadcrumbs
{
	color:white;
	text-transform:uppercase;
	font-size:11px;
}

#selection-banner .breadcrumbs a
{
	font-weight: normal;
	color:white;
}



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

     -- S E L E C T I O N   B A N N E R   (END) --

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

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

     -- S T E P S   (BEGIN) --

There are 4 steps that the user must proceed through (in order) to make 
a product selection.

Each steps contains a list of choices to select from as well as a description of 
the currently selected item.

Steps that the user has made a selection in are considered "active"
Steps that the user has not made a selection in are considered "inactive"
The first step after the last "active" step is considered the "next inactive" 
step. The class "next" is used because not all browsers (*cough* IE *cough*) support 
CSS sibling selectors.

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

#steps > div
{
	padding-top:30px;
	width:245px;
	float:left;
	position:relative;
	min-height:800px;
}

#steps > div .step-number
{
	margin:0;
}

#steps > div .step-name
{
	margin-top:10px;
	margin-left:30px;
}

#show-all-products
{
	padding-top:10px;
	color:Black;
	margin-left:30px;
	font-size:0.7em;
	line-height:1em;
}

#show-all-products input
{
	margin-left:0;
	right:0;
}
#show-all-products p
{
	margin-top:0;
	margin-bottom:0;
}

/*
NOTE: the first step should never be assigned the active class
as it doesn't get the same background as the other active classes
*/

/* step background begin >>>> */

#steps > div.inactive.next
{
	background: url(/images/stepsimages/step-is-inactive-and-previous-step-is-active-bg.jpg) repeat-y top left;
}
#steps > div.inactive
{
	background: url(/images/stepsimages/step-is-inactive-bg.jpg) repeat-y top left;
}
#steps > div.active
{
	background: url(/images/stepsimages/step-is-active-bg.jpg) repeat-y top left;
}

/* <<<< step background end */

/* step number start >>>> */

#step1 .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step1-active.jpg) no-repeat top left;
}

#step2.active .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step2-active.jpg) no-repeat top left;
}
#step2.inactive.next .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step2-inactive-and-next.jpg) no-repeat top left;
}

#step3.active .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step3-active.jpg) no-repeat top left;
}
#step3.inactive .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step3-inactive.jpg) no-repeat top left;
}
#step3.inactive.next .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step3-inactive-and-next.jpg) no-repeat top left;
}

#step4.active .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step4-active.jpg) no-repeat top left;
}
#step4.inactive .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step4-inactive.jpg) no-repeat top left;
}
#step4.inactive.next .step-number
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step4-inactive-and-next.jpg) no-repeat top left;
}

/* <<<< step number end */

/* step name start >>>> */

#step1 .step-name
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step1-name.jpg) no-repeat top left;
}

#step2.active .step-name
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step2-name-active.jpg) no-repeat top left;
}
#step2.inactive .step-name
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step2-name-inactive.jpg) no-repeat top left;
}

#step3.active .step-name
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step3-name-active.jpg) no-repeat top left;
}
#step3.inactive .step-name
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step3-name-inactive.jpg) no-repeat top left;
}

#step4.active .step-name
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step4-name-active.jpg) no-repeat top left;
}
#step4.inactive .step-name
{
	text-indent: -9999px;	
	background: url(/images/stepsimages/step4-name-inactive.jpg) no-repeat top left;
}

/* <<<< step name end */

/* step item choices begin >>>> */

#steps .item-choices
{
	margin-top:17px;
	margin-left:10px;
	width:225px;
}

#steps .item-choices li
{
	line-height: 23px;
	min-height:23px;
}

#steps .item-choices .odd
{
	background-color:#E3E1E1;
}

#steps .item-choices .selected
{
	color:white;
}
#step1 .item-choices .selected
{
	background: url(/images/stepsimages/step1-selected-item-bg.jpg) repeat-x top left;
}
#step2 .item-choices .selected
{
	background: url(/images/stepsimages/step2-selected-item-bg.jpg) repeat-x top left;
}
#step3 .item-choices .selected
{
	background: url(/images/stepsimages/step3-selected-item-bg.jpg) repeat-x top left;
}
#step4 .item-choices .selected
{
	background: url(/images/stepsimages/step4-selected-item-bg.jpg) repeat-x top left;
}

#steps .item-choices .highlight
{
	cursor: pointer;
}
#step1 .item-choices .highlight
{
	background: url(/images/stepsimages/step1-item-desc-bg.jpg) repeat-x top left;
}
#step2 .item-choices .highlight
{
	background: url(/images/stepsimages/step2-item-desc-bg.jpg) repeat-x top left;
}
#step3 .item-choices .highlight
{
	background: url(/images/stepsimages/step3-item-desc-bg.jpg) repeat-x top left;
}
#step4 .item-choices .highlight
{
	background: url(/images/stepsimages/step4-item-desc-bg.jpg) repeat-x top left;
}


#steps .item-choices a
{
	margin-left:3px;
	text-decoration:none;	
	text-transform:uppercase;
	font-size:13px;
	font-weight:bold;
	display: block;
}

#steps .item-choices a:link
{
	color:black;
}

#steps .item-choices a:visited
{
	color:black;
}

#steps .item-choices .selected a:link
{
	color:white;
}

#steps .item-choices .selected a:visited
{
	color:white;
}

#steps .item-choices .highlight a:link
{
	color:black;
}

#steps .item-choices .highlight a:visited
{
	color:black;
}

/* <<<< step item choices end */

/* step item info begin >>>> */

#steps .item-info
{
	margin-left:10px;
	width:225px;
}
#step1 .item-info
{
	background: url(/images/stepsimages/step1-item-desc-bg.jpg) repeat-x top left;
}
#step2 .item-info
{
	background: url(/images/stepsimages/step2-item-desc-bg.jpg) repeat-x top left;
}
#step3 .item-info
{
	background: url(/images/stepsimages/step3-item-desc-bg.jpg) repeat-x top left;
}
#step4 .item-info
{
	background: url(/images/stepsimages/step4-item-desc-bg.jpg) repeat-x top left;
}

#steps .item-info h3
{
	background-image: none;
	font-size: 19px;
	padding-top:13px;
	margin-left:9px;
	text-transform:uppercase;
}
#step1 .item-info h3
{
	color:#1A65B5;
}
#step2 .item-info h3
{
	color:orange;
}
#step3 .item-info h3
{
	color:green;
}
#step4 .item-info h3
{
	color:red;
}

#steps .item-info p
{
	margin-top:0;
	margin-left:9px;
	line-height: 15px;	
}

/* <<<< step item info end */

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

     -- S T E P S   (END) --

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