/*
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: 7px;
	margin-top:-55px;
	display: block;
	overflow:hidden;
	top: 2em;
	left: 0px;
	width: 210px;
	padding: 5px 10px;
	height: 26px;
	line-height:14px;
	z-index: 99;
	background: #f0f4f7;
	border: 1px solid #c2c7cd;
	background: -moz-linear-gradient(top, #ffffff, #a6aeb6);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#a6aeb6));
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 3px;
	font-size:11px;
	color: #303e4a;
	text-shadow: 1px 1px 1px #ffffff;
		}

/*		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: #2665a8;

		border: 1px solid #283759;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		
		font-size:10px;
		color: #c9e0f7;
		}	/*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;
		}