/* CSS Document */

body {
	background-color: #FFF;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin:0;
	padding: 0;
}
a {
	color: #F09;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
/* leftCol is where the selector works */
#leftCol {
	position: absolute;
	left: 0;
	top: 0;
	width: 368px;
	height: 434px;
	margin:0;
	padding: 0;
	z-index: 1;
}
#leftCol h1{
	color: #F09;
	margin: 16px 16px;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
}
#leftCol h2 {
	color: #F09;
	margin: 8px 16px;
	padding: 0;
	font-size: 14px;
	font-weight: bold;
}
#leftCol p {
	margin: 8px 16px;
	padding: 0;
	font-size: 11px;
	font-weight: normal;
	overflow: auto;
	clear: both;
}
#leftCol p.error {
	background-image: url(../media/buttons/warning.gif);
	background-position: 0 4px;
	background-repeat: no-repeat;
	padding: 0 0 0 26px;
	color:#990000;
}
#leftCol p strong{
	font-size: 14px;
	font-weight: bold;
}
#leftCol ul {
	margin: 16px 0;
	padding: 0 16px;
	font-size: 11px;
	list-style-type: none;
	text-align: left;
}
#leftCol ul.noTop {
	margin: 0;
}
#leftCol ul li {
	display: inline-block;
}
#leftCol ul li {
	border-bottom: #DDD solid 1px;
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#leftCol ul li.first {
	border-top: #DDD solid 1px;
}
#leftCol ul li a {
	display: inline-block;
}
#leftCol ul li a {
	background-image: url(media/box.gif);
	background-position: 0 8px;
	background-repeat: no-repeat;
	color: #000;
	display: block;
	margin: 0;
	padding: 8px 8px 8px 24px;
}
#leftCol ul li a#reset {
	background-image: url(media/arrow-down.gif);
}
#leftCol ul.withimg li a:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#leftCol ul li a:hover {
	background-color: #E1E1E1;
	background-image: url(media/check_semi.gif);
}
#leftCol ul li a#reset:hover {
	background-image: url(media/arrow-down.gif);
}
#leftCol ul li a.info, h2 a.info {
	background-image: url(media/info.gif);
	background-position: 8px 8px;
	background-repeat: no-repeat;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	float: right;
	height: 28px;
	width: 28px;
}
#leftCol ul li a.info:hover, h2 a.info:hover{
	background-image: url(media/info_hover.gif);
	background-color: #FFF;
}
#leftCol ul li a.info span, h2 a.info span{
	display: none;
}
#leftCol div.scrollArea {
	height: 300px;
	overflow: auto;
	width: 370px;
	margin: 0;
	padding: 0;
	text-align: center;
}
#leftCol img.right {
	border: 0;
	margin: 0;
	padding: 0 0 0 8px;
	float: right;
	clear: right;
}
#leftCol p.illustration {
	margin-bottom: 0;
}
#leftCol p.back {
	position: absolute;
	top: 400px;
	left: 2px;
	width: 240px;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 4px;
}
#leftCol p.back a {
	background-image: url(media/buttons/back.gif);
	background-position: left;
	background-repeat: no-repeat;
	padding: 0 20px;
}
#leftCol p.back a:hover {
	background-image: url(media/buttons/back-hover.gif);
	color: #E08;
}
#leftCol p.next {
	position: absolute;
	top: 400px;
	left: 226px;
	width: 140px;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 4px;
}
#leftCol p.next a {
	background-image: url(media/buttons/next.gif);
	background-position: right;
	background-repeat: no-repeat;
	padding: 0 20px;
}
#leftCol p.next a:hover {
	background-image: url(media/buttons/next-hover.gif);
	color: #E08;
}
/* rightCol is where the settings are shown */
#rightCol {
	position: absolute;
	left: 372px;
	top: 0;
	width: 416px;
	height: 416px;
	margin: 8px;
	border: 1px solid #DDD;
	z-index: 2;
}
#rightCol h1 {
	margin: 8px;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
}
#rightCol h2 {
	margin:  0 6px;
	padding: 0;
	font-size: 11px;
	font-weight: bold;
}
#rightCol ul {
	margin: 0 0 5px 0;
	padding: 0 8px;
	display: block;
}
#rightCol li {
	background-image: url(media/buttons/next.gif);
	background-position: 0 2px;
	background-repeat: no-repeat;
	margin: 0 ;
	padding: 0 16px;
	display: block;
	list-style-type: none;
}
#rightCol img{
	float: right;
	clear: right;
	margin: 0 0 4px 4px;
	padding: 0;
}
#rightCol #mail a {
	background-image: url(media/mailBG.gif);
	background-position: 23px 42px;
	background-repeat: no-repeat;
	border: 1px solid #CCC;
	position: absolute;
	top: 343px;
	left: 335px;
	margin: 0;
	padding: 8px 0 0 0;
	display: block;
	text-align: center;
	font-size: 11px;
	width: 80px;
	height: 64px;
}
#rightCol #mail a:hover {
	background-color: #E1E1E1;
}
#rightCol #printResults a {
	background-image: url(media/print.gif);
	background-position: 30px 42px;
	background-repeat: no-repeat;
	border: 1px solid #CCC;
	position: absolute;
	top: 343px;
	left: 254px;
	margin: 0;
	padding: 8px 0 0 0;
	display: block;
	text-align: center;
	font-size: 11px;
	width: 80px;
	height: 64px;
}
#rightCol #printResults a:hover {
	background-color: #E1E1E1;
}
#rightCol #gotoPreview a {
	background-image: url(media/previewBG.gif);
	background-position: 28px 41px;
	background-repeat: no-repeat;
	border: 1px solid #CCC;
	position: absolute;
	top: 343px;
	left: 173px;
	margin: 0;
	padding: 8px 0 0 0;
	display: block;
	text-align: center;
	font-size: 11px;
	width: 80px;
	height: 64px;
}
#rightCol #gotoPreview a:hover {
	background-color: #E1E1E1;
}
/* bottomCol holds the menu */
#bottomCol {
	position: absolute;
	left: 0;
	top: 432px;
	width: 800px;
	margin:0;
	padding: 0;
	z-index: 3;
}
#bottomCol ul {
	background-image: url(media/wizard-menu.gif);
	background-position: left;
	background-repeat:repeat-y;
	border: 1px solid #777;
	display: block;
	margin: 8px 16px;
	padding: 0 0 4px 128px;
	width: 652px;
	height: 80px;
	list-style-type: none;
}
#bottomCol ul li {
	float: left;
	font-size: 14px;
	width: 200px;
	height: 16px;
	display: inline-block;
	margin: 4px;
	padding: 0;
}
#bottomCol ul li a{
	display: block;
	margin: 0;
	padding: 2px 24px;
	color: #000;
	font-weight: bold;
	position: relative;
	background-image: url(media/box.gif);
	background-position: left;
	background-repeat: no-repeat;
}
#bottomCol ul li a.checkMark{
	background-image: url(/style/media/box_done.gif);
}
#bottomCol ul li a:hover{
	background-color: #EEE;
}
#bottomCol ul li.active a, #bottomCol ul li.active a.checkmark{
	color: #F09;
	background-color: #FFF;
}
/* for multiple choice lists */
#question li a.selected, #question li a.selected:hover {
	background-image: url(media/check.gif);
}
#question li a.unselected, #question li a.unselected:hover {
	background: none;
}
/* for the color swatch table */
#leftCol table.swatch {
	font-size: 10px;
	width: 300px;
	float: none;
	text-align: left;
	margin: 0 auto;
	padding: 0;
}
#leftCol table.swatch td {
	vertical-align: top;
	margin: 0;
	padding: 4px;
	top: 0;
}
#leftCol table.swatch td a {
	background-image: url(media/box.gif);
	background-position: top left;
	background-repeat: no-repeat;
	display: block;
	margin: 0;
	padding: 4px 4px 4px 20px;
	color: #000;
}
#leftCol table.swatch td a.selected, #leftCol table.swatch td a.selected:hover {
	background-image: url(media/check.gif);
}
#leftCol table.swatch td a:hover {
	background-image: url(media/check_semi.gif);
}
#leftCol table.swatch td a.info {
	background: none;
	border: none;
	float: right;
	padding: 5px;
	margin: -24px 0 0 0;
}
#leftCol table.swatch td a.info:hover {
	background: none;
}
/* for the modal information boxes */
div.info {
	visibility: hidden;
}
#fancybox-inner {
	color: #000;
}
#fancybox-inner p, #fancybox-inner h1,  #fancybox-inner h2 {
	margin: 16px;
	padding: 0;
	font-size: 11px;
	clear: none;
}
#fancybox-inner p img, #fancybox-inner h1 img, #fancybox-inner h2 img {
	float: right;
	clear: right;
	margin: 0 0 9px 9px;
}