/* CSS Document */

h1					{font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#FEB429;}
h2					{font-family:Arial, Helvetica, sans-serif; font-size:16px;}
a					{color:#0066CC}

/*classes*/
.body				{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:1.8;}
.body_small			{font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333; line-height:1.8;}
.body_small1		{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; line-height:1.8;}
.body_small2		{font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333333; line-height:1.8;}
.body_smaller		{font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#333333; line-height:1.8;}
.body_lightgrey		{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999999; line-height:1.8;}
.copyright			{font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333333;}
.big				{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:1.8; color:#00B300;}
.buttons			{font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:1.8; font-weight:bold}
.button				{color:#FFFFFF; background-color:#00B300; font-size:11px; font-family:Arial, Helvetica, sans-serif; border:0; font-weight:bold}

/*colors*/
.green				{color:#00B300;}
.red				{color:#F20233;}
.poppy				{color:#CC0000;}
.pink				{color:#FF6699;}
.blue				{color:#0066CC;}
.orange				{color:#FEB429;}
.darkorange			{color:#FF6600;}
.lightgrey			{color:#999999;}
.white				{color:#FFFFFF;}
.charcoal			{color:#333333;}

/* Boxes on Services Page */
.qitem {
	width:126px;
	height:126px;	
	border:4px solid #EEEEEE;	
	margin:5px 5px 5px 0;
	background: url('pix/boxes/bg.gif') no-repeat;
	
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
	cursor:pointer;
}

	.qitem img {
		border:0;
	
		/* allow javascript moves the img position*/
		position:absolute;
		z-index:200;
	}

	.qitem .caption {
		position:absolute;
		z-index:0;	
		color:#ccc;
		display:block;
	}

		.qitem .caption h4 {
			font-size:14px;
			padding:10px 5px 0 8px;
			margin:0;
			color:#C6FA74;
		}

		.qitem .caption p {
			font-size:11px;	
			padding:3px 5px 0 8px;
			margin:0;
		}



/* Setting for corners */

.topLeft, .topRight, .bottomLeft, .bottomRight {
	position:absolute;
	background-repeat: no-repeat; 
	float:left;
}

.topLeft {
	background-position: top left; 	
} 

.topRight {
	background-position: top right; 
} 

.bottomLeft {
	background-position: bottom left; 
} 

.bottomRight {
	background-position: bottom right; 
}

/*Spot Light*/

.spotlightWrapper ul { 
	list-style-type: none; /* remove the default style for list items (the circles) */ 
	margin:0px; /* remove default margin */
	padding:0px; /* remove default padding */
}
.spotlightWrapper ul li { 
	float:left; /* important: left float */
	position:relative; /* so we can use top and left positioning */
}
.spotlightWrapper ul li a img { 
	width:123px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */
	height:inherit;
	position:relative; /* so we can use top and left positioning */
	border:2px solid #EEEEEE; /* remove the default blue border */
}
.spotlightWrapper ul li a img.active {
	border:4px solid #DDDDDD; /* choose whatever you like */
	z-index:1; /* show it on top of the other images (they have z-index 0) */
	left: -4px; /* same as border width but negative */
	top: -4px; /* same as border width but negative */
}
.clear { clear:both; } /* to clear the float after the last item */