/* --------------------------------------- */
/* CITCLOPS colourwheel css */
/* --------------------------------------- */

#colourwheel { border: 1px solid #ccc; width: 200px; padding: 10px; float: right; }

.imageMap 			{display:block; position:relative; width:400px; height:399px; z-index:100; }

.backer,
.backer-selected,
.backer-hover 		{display:block; width:400px; height:399px; position:absolute; left:0; top:0; z-index:-1; }

.backer 			{ background:url(/grfx/colourwheel/wheel.png); }

.maps 				{border:0; display:block; position:absolute; left:0; top:0; }
#mapper 			{display:block; position:relative;}
area 				{display:block;}

/*area:nth-of-type(1):hover ~ span {background:url(/grfx/colourwheel/FU5-on.png);}
area:nth-of-type(2):hover ~ span {background:url(/grfx/colourwheel/FU2-on.png);}
area:nth-of-type(3):hover ~ span {background:url(/grfx/colourwheel/FU21-on.png);}
area:nth-of-type(4):hover ~ span {background:url(/grfx/colourwheel/FU19-on.png);}
area:nth-of-type(5):hover ~ span {background:url(/grfx/colourwheel/FU16-on.png);}
area:nth-of-type(6):hover ~ span {background:url(/grfx/colourwheel/FU14-on.png);}
area:nth-of-type(7):hover ~ span {background:url(/grfx/colourwheel/FU12-on.png);}
area:nth-of-type(8):hover ~ span {background:url(/grfx/colourwheel/FU8-on.png);}*/

.fu5 {background:url(/grfx/colourwheel/crushed/FU5-on.png);}
.fu2 {background:url(/grfx/colourwheel/crushed/FU2-on.png);}
.fu21 {background:url(/grfx/colourwheel/crushed/FU21-on.png);}
.fu19 {background:url(/grfx/colourwheel/crushed/FU19-on.png);}
.fu16 {background:url(/grfx/colourwheel/crushed/FU16-on.png);}
.fu14 {background:url(/grfx/colourwheel/crushed/FU14-on.png);}
.fu12 {background:url(/grfx/colourwheel/crushed/FU12-on.png);}
.fu8 {background:url(/grfx/colourwheel/crushed/FU8-on.png);}

.fu5-hover {background:url(/grfx/colourwheel/hover/FU5-on.png);}
.fu2-hover {background:url(/grfx/colourwheel/hover/FU2-on.png);}
.fu21-hover {background:url(/grfx/colourwheel/hover/FU21-on.png);}
.fu19-hover {background:url(/grfx/colourwheel/hover/FU19-on.png);}
.fu16-hover {background:url(/grfx/colourwheel/hover/FU16-on.png);}
.fu14-hover {background:url(/grfx/colourwheel/hover/FU14-on.png);}
.fu12-hover {background:url(/grfx/colourwheel/hover/FU12-on.png);}
.fu8-hover {background:url(/grfx/colourwheel/hover/FU8-on.png);}

/* tablets */
@media only screen and (max-width: 768px) {

	#colourwheel {
		margin-top: 400px;
		margin-bottom: 18px;
		}

}