/*
=================================
CSS File for Tooltips  on product pages (ie: LexisAdvance, LMO)
Creation Date = August 2012
By = Ricardo Zea

This file is a separate asset for easier and faster maintanibility. 
Any changes required can be done here without touching the main global file (lexisnexis-base-ph3.css).

*/

/* TOOLTIPS
=================================*/	
#prodAdvance { width:574px; margin:auto; }
#prodAdvance img { margin:5px 0; border:#fff 1px solid; border-radius:3px; box-shadow:0 0 4px rgba(0,0,0,.5); }

/*Tooltip container*/
.tooltip { width:300px; position:absolute; }
#prodAdvance.no-js .tooltip { width:auto; margin:0 0 10px; position:relative; }

/*Tooltip trigger*/
.tooltip span.tipTrigger { font-size:1px; text-indent:-9999em; overflow:hidden; width:29px; height:29px; position:absolute; float:left; background:url(../images/toolTip-trigger.png) no-repeat; }

	.tooltip span.tipTrigger.no-js { display:none; }
	.tooltip span.tipTrigger.visible { display:block; z-index:10; }
#tip-3.tooltip span.tipTrigger.visible{z-index:0;}

	/*Active tooltip (minus sign)*/
	.tooltip span.tipTrigger.active { background-position:0 -40px !important; } 

/*Tooltip content/box*/
	.tooltip .tipText { padding:15px 20px 5px; position:absolute; left:-9999px; margin:14px 14px 0 14px; background:#ef3239; xbackground:rgba(237,28,36,.9); border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.5); }
	.tooltip .tipText h3 { margin-bottom:8px; color:#fff; font:bold 15px Calibri, Arial, Helvetica, sans-serif; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
	.tooltip .tipText p { color:#fff; font:14px Calibri, Arial, Helvetica, sans-serif; text-shadow:1px 1px 0 rgba(0,0,0,.2); }
	.tooltip .tipText ul li {color:#fff; background:none; list-style:disc; list-style-position:outside; font-size:14px; line-height:14px; padding-left:0; margin-left:15px;}
	
	.tooltip .tipText.no-js { position:relative; left:auto; margin:0; padding:0; background:none; box-shadow:none; border-bottom:#999 1px dotted; }
	.tooltip .tipText.no-js h3,
	.tooltip .tipText.no-js p { color:#000; text-shadow:none; }
	
	.tooltip .tipText.visible { left:auto; z-index:10; }
	#tip-3.tooltip .tipText.visible{z-index:0; }
	
	/*Tooltips to the right*/
	.tooltip span.trigRight { float:right; position:relative; -position:absolute; }

/*Tooltip positioning*/
	.prod-panel { width:564px; margin:0 auto 40px; border:#000 1px solid; }

	/*LexisAdvance*/
	#tip-1 { margin:95px 0 0 105px; width:370px; -margin-left:415px; z-index:11; }
	#tip-2 { margin:68px 0 0 148px; width:375px; -margin-left:493px; z-index:10;}
	#tip-3 { margin:185px 0 0 210px; width:360px; z-index:9;}
	#tip-4 { margin:60px 0 0 100px; width:370px; #width:330px; z-index:8;}
	#tip-5{z-index:7;}
	#tip-6{z-index:6;}
	#tip-7{z-index:5;}
	#tip-8{z-index:4;}
	#tip-9{z-index:3;}
	#tip-10{z-index:2;}
	#tip-11{z-index:1;}
	
	/*Microsfot Outlook*/
	#prodOutlook #tip-1 { margin:10px 0 0 50px; }
	#prodOutlook #tip-2 { margin:10px 0 0 130px; }
	#prodOutlook #tip-3 { margin:10px 0 0 170px; }
	#prodOutlook #tip-4 { margin:10px 0 0 200px; }
	#prodOutlook #tip-5 { margin:10px 0 0 230px; }
	
	/*Microsfot Word*/
	#prodWord #tip-1 { margin:10px 0 0 35px; }
	#prodWord #tip-2 { margin:10px 0 0 135px; }
	#prodWord #tip-3 { margin:10px 0 0 180px; }
	#prodWord #tip-4 { margin:10px 0 0 210px; }
	#prodWord #tip-5 { margin:10px 0 0 240px; }
	#prodWord #tip-6 { margin:10px 0 0 270px; }
	#prodWord #tip-7 { margin:10px 0 0 70px; }
	#prodWord #tip-8 { margin:10px 0 0 139px; }
	#prodWord #tip-9 { margin:10px 0 0 169px; }
	#prodWord #tip-10 { margin:10px 0 0 199px; }
	#prodWord #tip-11 { margin:10px 0 0 229px; }
	
	#prodAdvance #tip-2{margin:175px 0 0 112px;}
	#prodAdvance .tooltip ul{margin-bottom:0;}
	#prodAdvance #tip-4{z-index:12;}