/* 'xingle options' - Uses zindex and a:hover to give context sensitive enlargments of thumbnails */
/* This CSS is for refrence as multiple instances have been deployed using id prefixes 

#xingle {
	position:relative;
	top: 0px;
	left: 0px;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
}

#xifault {
	background-color:#777;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 0;
}

#xanchor1 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:0px;
	top:350px;
	z-index: 10;
}

#xanchor1:hover {
	background-color:#333;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#xanchor2 {
	background-color:#777;
	position:absolute;
	width: 50px;
	height: 50px;
	left:50px;
	top:350px;
	z-index: 10;
}
#xanchor2:hover {
	background-color:#777;
	background-image:url(../images/websites.gif);
	background-position:left;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#xanchor3 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:100px;
	top:350px;
	z-index: 10;
}
#xanchor3:hover {
	background-color:#333;
	background-image:url(../images/websites.gif);
	background-position:top;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

END OF xingle CSS reference */

/* Xingle use for section 1 */

#axingle {
	position:relative;
	top: 0px;
	left: 0px;
	background-image:url(../images/websites/xingle-web-opt1-all.gif);
	background-position:left;
	width: 400px;
}

#axifault {
	background-color:#000;
	position:absolute;
	background-image:url(../images/websites/xingle-web-opt1-all.gif);
	background-position:left;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 0;
}

#axanchor1 {
	background-color:#000;
	position:absolute;
	background-image:url(../images/websites/xingle-web-opt1-all.gif);
	background-position: 0px -287px ;
	width: 134px;
	height: 113px;
	left:0px;
	top:287px;
	z-index: 10;
}

#axanchor1:hover {
	background-color:#000;
	position:absolute;
	background-image:url(../images/websites/xingle-web-opt1-all.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#axanchor2 {
	background-color:#000;
	position:absolute;
	background-image:url(../images/websites/xingle-web-opt2-all.gif);
	background-position: -134px -287px;
	width: 140px;
	height: 113px;
	left:134px;
	top:287px;
	z-index: 10;
}
#axanchor2:hover {
	background-color:#000;
	background-image:url(../images/websites/xingle-web-opt2-all.gif);
	background-position: 0px 0px;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#axanchor3 {
	background-color:#000;
	position:absolute;
	background-image:url(../images/websites/xingle-web-opt3-all.gif);
	background-position: -274px -287px;
	width: 126px;
	height: 113px;
	left:274px;
	top:287px;
	z-index: 10;
}
#axanchor3:hover {
	background-color:#000;
	background-image:url(../images/websites/xingle-web-opt3-all.gif);
	background-position: 0px 0px;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}


/* Xingle use for section 2 */

#bxingle {
	position:relative;
	top: 0px;
	left: 0px;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
}

#bxifault {
	background-color:#777;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 0;
}

#bxanchor1 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:0px;
	top:350px;
	z-index: 10;
}

#bxanchor1:hover {
	background-color:#333;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#bxanchor2 {
	background-color:#777;
	position:absolute;
	width: 50px;
	height: 50px;
	left:50px;
	top:350px;
	z-index: 10;
}
#bxanchor2:hover {
	background-color:#777;
	background-image:url(../images/websites.gif);
	background-position:left;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#bxanchor3 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:100px;
	top:350px;
	z-index: 10;
}
#bxanchor3:hover {
	background-color:#333;
	background-image:url(../images/websites.gif);
	background-position:top;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}




/* Xingle use for section 3*/

#cxingle {
	position:relative;
	top: 0px;
	left: 0px;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
}

#cxifault {
	background-color:#777;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 0;
}

#cxanchor1 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:0px;
	top:350px;
	z-index: 10;
}

#cxanchor1:hover {
	background-color:#333;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#cxanchor2 {
	background-color:#777;
	position:absolute;
	width: 50px;
	height: 50px;
	left:50px;
	top:350px;
	z-index: 10;
}
#cxanchor2:hover {
	background-color:#777;
	background-image:url(../images/websites.gif);
	background-position:left;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#cxanchor3 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:100px;
	top:350px;
	z-index: 10;
}
#cxanchor3:hover {
	background-color:#333;
	background-image:url(../images/websites.gif);
	background-position:top;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}



/* Xingle use for section 4*/

#dxingle {
	position:relative;
	top: 0px;
	left: 0px;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
}

#dxifault {
	background-color:#777;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 0;
}

#dxanchor1 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:0px;
	top:350px;
	z-index: 10;
}

#dxanchor1:hover {
	background-color:#333;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#dxanchor2 {
	background-color:#777;
	position:absolute;
	width: 50px;
	height: 50px;
	left:50px;
	top:350px;
	z-index: 10;
}
#dxanchor2:hover {
	background-color:#777;
	background-image:url(../images/websites.gif);
	background-position:left;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#dxanchor3 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:100px;
	top:350px;
	z-index: 10;
}
#dxanchor3:hover {
	background-color:#333;
	background-image:url(../images/websites.gif);
	background-position:top;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

/* Xingle use for section 5*/

#exingle {
	position:relative;
	top: 0px;
	left: 0px;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
}

#exifault {
	background-color:#777;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 0;
}

#exanchor1 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:0px;
	top:350px;
	z-index: 10;
}

#exanchor1:hover {
	background-color:#333;
	position:absolute;
	background-image:url(../images/websites.gif);
	background-position:right;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#exanchor2 {
	background-color:#777;
	position:absolute;
	width: 50px;
	height: 50px;
	left:50px;
	top:350px;
	z-index: 10;
}
#exanchor2:hover {
	background-color:#777;
	background-image:url(../images/websites.gif);
	background-position:left;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}

#exanchor3 {
	background-color:#333;
	position:absolute;
	width: 50px;
	height: 50px;
	left:100px;
	top:350px;
	z-index: 10;
}
#exanchor3:hover {
	background-color:#333;
	background-image:url(../images/websites.gif);
	background-position:top;
	position:absolute;
	width: 400px;
	height: 400px;
	left:0px;
	top:0px;
	z-index: 5;
}