/*
tooltip.css is a product created by Daan Weijers (http://daanweijers.com). It is for sale exclusively at CodeCanyon (http://codecanyon.net).

Version 1.2 (as of 08-24-2010)
*/

/*		DEFAULT TOOLTIPS	· used for every tooltip.	*/
	span.tooltip { position: relative; }
	span.tooltip span {
		margin-left: -9999px;
		position: absolute;
		}
	
	span.tooltip a:hover + span, span.tooltip span:hover {
		margin-left: 0px;
		
		display: block;
		/*float:left;*/
		top: 2em; left: 0px;
		width: 200px;
		padding: 11px 15px;
		
		z-index: 99999;
		
		background-color: #000;
		background-color: rgba(0,0,0,1);
		*background:#000;
		
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;

		color: #fff;
		}

/*		TOOLTIP COLOURS		· default tooltips are see-through black, below are some other styles. Colours to choose from: light, red, blue, green, yellow, sky blue, mint green, cherry red and vanilla 			yellow.	*/
	span.tooltip.light a:hover + span {
		background-color: #fff;
		background-color: rgba(255,255,255,0.8);

		color: #444;

		-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
		box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
		}	/*light tooltip*/
		
	span.tooltip.red a:hover + span {
		background-color: #9c2b2b;

		border: 1px solid #401818;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #de8383;
		}	/*red tooltip*/

	span.tooltip.blue a:hover + span {
		background-color: #3c5794;

		border: 1px solid #283759;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #99add9;
		}	/*blue tooltip*/

	span.tooltip.green a:hover + span {
		background-color: #5d893d;

		border: 1px solid #445b32;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #b5d093;
		}	/*green tooltip*/

	span.tooltip.yellow a:hover + span {
		background-color: #e6b222;

		border: 1px solid #9e6f1e;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #9e6f1e;
		}	/*yellow tooltip*/

	span.tooltip.cherry a:hover + span {
		background-color: #bb6f63;

		border: 1px solid #823c37;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #efc4bd;
		}	/*cherry red tooltip*/

	span.tooltip.sky a:hover + span {
		background-color: #c3d2ea;

		border: 1px solid #8c9eba;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #5f6e85;
		}	/*sky blue tooltip*/

	span.tooltip.mint a:hover + span {
		background-color: #cddea5;

		border: 1px solid #9bab76;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #6d794f;
		}	/*mint green tooltip*/

	span.tooltip.vanilla a:hover + span {
		background-color: #ead89f;

		border: 1px solid #a58a4a;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;

		color: #8e7741;
		}	/*vanilla yellow tooltip*/

/*		Optional Classes 	· there are two more optional classes that you can add to the tooltips, noBorder removes the border and noCorner removes the rounded corners. These classes are OPTIONAL*/
	span.tooltip.noBorder a:hover + span {
		border-width: 0px;
		}
	span.tooltip.noCorner a:hover + span {
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;
		}
	
/*		TOOLTIP SIZES 	· there are three different sizes available for the tooltips, besides the default class. Sizes to choose from: wide (400px), medium (300px) and narrow (100px).	The default tooltip is 200 pixels wide*/
	span.tooltip.wide a:hover + span {
		width: 400px;
		}
	span.tooltip.medium a:hover + span {
		width: 300px;
		}
	span.tooltip.narrow a:hover + span {
		width: 100px;
		}
		
	span.tooltip.small a:hover + span {
		width: 200px;
		position: relative;
		left:-70px;
		top:8px;
		}