@charset "utf-8";
/* Witch.Scot Sprites CSS Document */
/*Projects listed alphabeticaly*/

/*START AW ROLLOVER*/
a.rolloveraw {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/autoharp_witch_scotland.gif"); /* image sprite */
	}

a.rolloveraw:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END AW ROLLOVER*/

/*START BW ROLLOVER*/
a.rolloverbw {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/bee_witch_scotland.gif"); /* image sprite */
	}

a.rolloverbw:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END BW ROLLOVER*/

/*START BS ROLLOVER*/
a.rolloverbs {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/british_supplements.gif"); /* image sprite */
	}

a.rolloverbs:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END BS ROLLOVER*/

/*START CW ROLLOVER*/
a.rollovercw {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/crochet_witch_scotland.gif"); /* image sprite */
	}

a.rollovercw:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END CW ROLLOVER*/



/*START graphic ROLLOVER*/
a.rollovergraphic {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/graphic_witch_scot.gif"); /* image sprite */
	}

a.rollovergraphic:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END graphic ROLLOVER*/

/*START web ROLLOVER*/
a.rolloverweb {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/web_witch_scot.gif"); /* image sprite */
	}

a.rolloverweb:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END web ROLLOVER*/

/*START willow ROLLOVER*/
a.rolloverwillow {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/willow_witch_scotland.gif"); /* image sprite */
	}

a.rolloverwillow:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END willow ROLLOVER*/

/*START wood ROLLOVER*/
a.rolloverwood {
	display: inline-block;
	width: 300px;	/*The width and height values in a.rollover are the size of the original image*/
	height: 300px;
	text-decoration: none;
	background: url("../images/sprite/wood_witch_scot.gif"); /* image sprite */
	}

a.rolloverwood:hover {
	background-position: -300px 0; /*The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.*/
	}

.displace { /*included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.*/
	position: absolute;
	left: -5000px;
	}
/*END wood ROLLOVER*/