#patternbar, #colorbar {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
        float: left;
	color: #666666;
	width: 125px;
	margin-right: 2em;
       border: solid 1px #ccc;
       padding: 5px;
}

#patternbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#patternbar ul li {
	padding-left: 55px;
	color: #000;
	text-decoration: none;
	margin-bottom: 10px;
	height: 50px;
}
	
#patternbar li.aqua {background: url(images/aqua-moss-coaster.gif) no-repeat 0 50%}	
#patternbar li.lime {background: url(images/cool-lime-coaster.gif) no-repeat 0 50%}	
#patternbar li.psplash {background: url(images/pink-splash-coaster.gif) no-repeat 0 50%}	
#patternbar li.rsand {background: url(images/red-sand-coaster.gif) no-repeat 0 50%}		
#patternbar li.skymist {background: url(images/mint-sky-coaster.gif) no-repeat 0 50%}	
#patternbar li.tealc {background: url(images/teal-coral-coaster.gif) no-repeat 0 50% }


#colorbar {width: 200px; float: right;}

#colorbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#colorbar li  {
	padding-left: 5px;
	color: #000;
	text-decoration: none;
	margin-bottom: 3px;
        border-left: 80px solid;
        
}

#colorbar li.apple {border-color: #E40050; }
#colorbar li.chard {border-color: #F7E8AA;}
#colorbar li.cinn {border-color: #C0004E;}
#colorbar li.dog {border-color: #fff;}
#colorbar li.highland {border-color: #006B3F;}
#colorbar li.honeydew {border-color: #D3E8A3;}
#colorbar li.lavendar {border-color: #BAAFD3;}
#colorbar li.lemon {border-color: #F9E814;}
#colorbar li.mist {border-color: #A8CEE2;}
#colorbar li.pine {border-color: #546856;}
#colorbar li.van {border-color: #F7E8AA;}
#colorbar li.wild {border-color: #F9E814;}