@charset "UTF-8";
/* RUUL by Chris Thelwell */
/* © 2011 Chris Thelwell Ltd. */
/* www.christhelwell.com */

/*ruul setup*/
#ruulonsite {
	position: absolute;
	left: 218px;
	top: 127px;
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 100000;
}
body {
	overflow-x: hidden;
}



/* CHANGE AREA 1 */

/*ruul states*/
#ruulonsite.ruulHorizontal {
	background-image: url(ruul_h.png);
	height: 100px;
	width: 600px;
}
#ruulonsite.ruulVertical {
	background-image: url(ruul_v.png);
	height: 600px;
	width: 100px;
}
#ruulonsite.ruulHorizontalOpen {
	background-image: url(ruul_h_open.png);
	height: 400px;
	width: 600px;
}
#ruulonsite.ruulVerticalOpen {
	background-image: url(ruul_v_open.png);
	height: 600px;
	width: 400px;
}
/* END OF CHANGE AREA 1 */


/*ruul buttons – generic*/
#ruulonsite a {
	height: 20px;
	width: 20px;
	position: absolute;
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 100001;
}
#ruulonsite a:hover {
	background-position: left bottom;
}


/* CHANGE AREA 2 – BUTTONS */

/*ruul buttons – actual*/
#ruulonsiteRotate {
}
#ruulonsiteTextDrop {
}


/*ruul buttons – horizontal and vertical*/
#ruulonsite .ruulHorizontalButton {
	background-image: url(button_rotate_up.png);
	left: 41px;
	top: 42px;
}
#ruulonsite .ruulVerticalButton {
	background-image: url(button_rotate_down.png);
	left: 41px;
	top: 42px;
}
#ruulonsite .ruulTextDropHorizontal {
	background-image: url(button_panel_up.png);
	top: 42px;
	left: 71px;
}
#ruulonsite .ruulTextDropVertical {
	background-image: url(button_panel_up.png);
	top: 72px;
	left: 41px;
}
#ruulonsite .ruulTextDropHorizontalDown {
	background-image: url(button_panel_down.png);
	top: 42px;
	left: 71px;
}
#ruulonsite .ruulTextDropVerticalDown {
	background-image: url(button_panel_down.png);
	top: 72px;
	left: 41px;
}


/* END OF CHANGE AREA 2 */


/* Fix to prevent buttons moving on roll over incase site has positions for rollovers*/
.ruulHorizontalButton:hover {
	right: 40px;
	top: 42px;
}
.ruulVerticalButton:hover {
	left: 42px;
	top: 40px;
}
.ruulTextDropHorizontal:hover {
	top: 42px;
	right: 70px;
}
.ruulTextDropVertical:hover {
	top: 70px;
	left: 42px;
}
.ruulTextDropHorizontalDown:hover {
	top: 42px;
	right: 70px;
}
.ruulTextDropVerticalDown:hover {
	top: 70px;
	left: 42px;
}