/*		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: -15px;
		display: block;
		bottom: 10em; left: 0px;
              padding: 5px 6px;
		width: 160px;		
		z-index: 99;
		background-color: rgba(0,0,0,0.8);
		background-color: #2d2d2d; /*asterisk is there to fix an IE7 issue*/
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		color: #ccc;
              text-align: justify;
		}

/*		DEFAULT TOOLTIPS	· used for every tooltip.	*/
	span.tooltip2 { position: relative; }
	span.tooltip2 span {
		margin-left: -9999px;
		position: absolute;
		}
	
	span.tooltip2 a:hover + span, span.tooltip2 span:hover {
		margin-left: 4px;
		display: block;
		bottom: 0.5em; left: 0px;
              padding: 5px 6px;
		width: 238px;		
		z-index: 99;
		background-color: rgba(0,0,0,0.8);
		background-color: #3b3221; /*asterisk is there to fix an IE7 issue*/
		color: #ccc;
              text-align: justify;
		}

	
/*		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: 238px;
              padding: 5px 6px;
		}
	span.tooltip.narrow a:hover + span, span.tooltip span:hover {
		width: 160px;
		padding: 5px 6px;
		}