<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#colors{
	position:relative;
	width:auto;
	height:90%;
	margin-top:10%;
	margin-left:1%;
	border:none;
	float:left;
	overflow:hidden;
	-moz-transform:rotate(345deg);
	-moz-transform:rotate(345deg);
	-webkit-transform:rotate(345deg);
	-o-transform:rotate(345deg);
	-ms-transform:rotate(345deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3.45);
	pointer-events:visible;
}
button#blackBar{
	position:relative;
	margin-left:0px;
	margin-top:0px;
	margin-right:5px;
	border: 0; 
	background: url('images/black_line.png');
	background-position:-35px 0px;
	background-repeat:no-repeat;
	width:5px;
	height:95%;
}
button#blackBar:hover{
	background-position:5px 0px;
}
button#yellowBar{
	position:relative;
	margin-top:0px;
	margin-right:5px;
	border: 0; 
	background: url('images/yellow_line.png');
	background-position:-35px 0px;
	background-repeat:no-repeat;
	width:5px;
	height:95%;
}
button#yellowBar:hover{
	background-position:5px 0px;
}
button#blueBar{
	position:relative;
	margin-top:0px;
	margin-right:5px;
	border: 0; 
	background: url('images/blue_line.png');
	background-position:-35px 0px;
	background-repeat:no-repeat;
	width:5px;
	height:100%;
}
button#blueBar:hover{
	background-position:5px 0px;
}
button#redBar{
	position:relative;
	margin-top:0px;
	margin-right:5px;
	border: 0; 
	background: url('images/red_line.png');
	background-position:-35px 0px;
	background-repeat:no-repeat;
	width:5px;
	height:100%;
}
button#redBar:hover{
	background-position:5px 0px;
}
</style>
</head>
</html>