body.quaternary #content{
	padding-bottom:63px
}

#header {
	background-image: url('../images/colorsnap/colorsnap-header.jpg');
	height: 329px;
	position: relative;
	width: 542px;
}

#header h1,
#header h2,
#header h3{
	text-indent: -9999px;
}

#header div {
	color: white;
	font-family: veranda;
	font-size: 10px;
	left: 290px;
	position: absolute;
	text-align: center;
	top: 220px;
	width: 212px;
}

#header div p{
	line-height: 140%;
}

#header .glyphs {
	position: absolute;
	left: 60px;
	text-align: left;
	top: 239px;
}

/* Every Browser except IE(6,7,8).  Hack to get the header text absolutely positioned correctly accross all Browsers. */
:root *> #header .glyphs{
	top: 236px;
}

#header .glyphs p{
	margin-bottom: 8px;
}

#header .glyphs p,
#header .glyphs a
{
	line-height: normal;
}


#header .glyphs a{
	background:url("../images/bullets/arrow-peagreen-brownback.jpg") no-repeat scroll 0 0 transparent;
	color: white;
	display:block;
	font-weight: bold;
	height: 13px;
	padding-left: 18px;
	text-transform: uppercase; 
}

#header .glyphs .first{
	background-position: 10px 0;
	padding-left: 29px;
}

#header .glyphs a:link{text-decoration: none}
#header .glyphs a:visited{
	color: white;
	text-decoration: none
}
#header .glyphs a:hover{text-decoration: none}
#header .glyphs a:active{
	color: white;
	text-decoration: none
}

#mainImage {
	display: inline;
	float: right;
	margin-right: 13px;
	margin-top: 0px;
	position: relative;
}

#mainImage img{
	border: none;
}

#description{
	padding-left: 18px;
	padding-top: 14px;
}

#description h3{
	color: #908917;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 4px;
	margin-bottom: 11px;
	text-transform: uppercase
}

#description ul{
	color: #4b4b4b;
	list-style-type:disc !important;
	margin-bottom: 18px;
	margin-left: 0px;
	padding-left: 15px;
	width: 290px;
}

#dots{
	background-image: url('../images/colorsnap/bottom-shadow.jpg');
	height: 19px;
	margin-top: -13px;
	margin-left: 3px;
	padding-top: 9px;
	padding-left: 55px;
	position: relative;
	text-align: center;
	width: 157px;
}

* html #dots{
	padding-left: 50px;
	width: 162px;
}

/* The importants are for IE6 */
#container #main #content #dots img,
#container #main #content #dots a{
	display: inline !important;
	height: 10px !important;
	width: 10px !important;
}

#dots a{
	float: left;
	margin-left: 6px;
}
#bottom-callout{
	float: left;
	padding: 0 0 0 16px;
	margin-top: -25px;
	width: 320px;
}

#bottom-callout img{
	border: none;
	display: inline;
	float: left;
}

#bottom-callout a{
	color: #4b4b4b;
	background:url("../images/bullets/arrow-peagreen.jpg") no-repeat scroll 0 0 transparent;
	background-position: 10px 0;
	display:block;
	font-weight: bold;
	float: left;
	height: 13px;
	padding-left: 28px;
	margin-top: 8px;
	text-transform: uppercase; 
}

#bottom-callout a:link{text-decoration: none}
#bottom-callout a:visited{
	color: #4b4b4b;
	text-decoration: none
}
#bottom-callout a:hover{text-decoration: none !important}
#bottom-callout a:active{
	color: #4b4b4b;
	text-decoration: none
}
#bottom-callout .first{
	margin-top: 13px;
}