Variables in CSS

[Gareth Wanklin]

Good Afternoon,

i am trying to create a sash overlay for sale products etc (EXAMPLE) - Hover over the left hand edge of the cable in the image.

i am having an issue with getting the sash background to be applied

Now the sash renders fine when previewing on a local machine but when i try to view the same page on the live site the SashColour variable seems not to work.

I am probably being dense and missed something simple but any help would be much appreciated.

my css is as follows

.sash {
	position: absolute;
	z-index: 999;
	top:30px;
	width:43px;
	height:103px;
	left:0px;
	opacity:1;
	background: <actinic:variable name="SashColour" /> url('<actinic:variable name="SashImage" />');
	overflow:hidden;
}

.sash:hover {
	position: absolute;
	z-index: 999;
	top:30px;
	width:240px;
	height:103px;
	left:0px;
	opacity:1;
	-webkit-transition:width 1s;
	background: <actinic:variable name="SashColour" /> url('<actinic:variable name="SashImage" />');
}

#desc {
margin-left:60px;
width:300px;
font-size:<actinic:variable name="SashContentSize" />;
font-weight:bold;
margin-top:30px;
color:#FFF;
overflow:hidden;	
}