/* =============================================================================
   Properties for Tooltips, such as those on the Product Detail pages
   ========================================================================== */

.has-tooltip
{
	cursor: help;
}

/* This bit ensures that the tooltip-content elements are hidden until they're needed */
.has-tooltip + .tooltip-content
{
	display: none;
}

.tip-container
{
	z-index: 1000;
	text-align: left;
	border: 1px solid black;
		
	padding: 0px; /* General reset */
	
	padding-top:   12px;
	padding-bottom: 4px;

	min-width:  50px;
	max-width: 220px;
	
	color: black;
	background-color: white;
	/**
	 * - If you set a background-image, border/padding/background-color will be ingnored.
	 *   You can set any padding to .tip-inner instead if you need.
	 * - If you want a tiled background-image and border/padding for the tip,
	 *   set the background-image to .tip-inner instead.
	 */
}

	.tip-container .tip-inner 
	{
		padding-left:  14px;
		padding-right: 14px;
	}
	
		/* -------------------------------------------------------
		   Link properties within tooltips
		   ------------------------------------------------------- */
	
		.tip-container .tip-inner a
		{
			color: rgb(50, 50, 50); /* Dark gray */
		}
		
		.tip-container .tip-inner a:link,
			.tip-container .tip-inner a:visited
		{
			text-decoration: underline;
		}
		
		.tip-container .tip-inner a:focus,
			.tip-container .tip-inner a:hover,
			.tip-container .tip-inner a:active
		{
			color: black;
			text-decoration: none;
		}
		
	
		/* -------------------------------------------------------
		   Content properties within tooltips
		   ------------------------------------------------------- */
		
		.tip-container h6
		{
			
			font-weight: bold;
		}
		
		.tip-container p,
			.tip-container h6
		{
			color: rgb(50, 50, 50); /* Dark gray */
			font-size: .8em;
			margin: 0em;
			margin-bottom: 0.8em;
			
			line-height: 1.3;
		}
		
	
		/* -------------------------------------------------------
		   Arrow properties within tooltips
		   ------------------------------------------------------- */

		/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
		
		.tip-container .tip-arrow-top,
			.tip-container .tip-arrow-right,
			.tip-container .tip-arrow-bottom,
			.tip-container .tip-arrow-left
		{
			background-image: url(/images/tooltips/tooltip-pointers.png);
			background-repeat: no-repeat;;
		}
		
		.tip-container .tip-arrow-top 
		{
			margin-top:  -38px;
			margin-left: -15px; /* approx. half the width to center it (formerly -19px )*/
			
			top: 0;
			left: 50%;
			
			width:  38px; /* 9px; */
			height: 38px; /* 6px; */
		}

		.tip-container .tip-arrow-right 
		{
			margin-top: -19px; /* approx. half the height to center it */
			margin-left: 0;
			
			top:   50%;
			left: 100%;
			
			width:  38px; /* 6px; */
			height: 38px; /* 9px */
			
			background-position: -38px 0px;
		}

		.tip-container .tip-arrow-bottom 
		{
			margin-top: 0;
			margin-left: -15px; /* approx. half the width to center it (formerly -19px) */
			
			top: 100%;
			left: 50%;
			
			width:  38px; /* 9px; */
			height: 38px; /* 6px; */
			
			background-position: -76px 0px;
		}
		.tip-container .tip-arrow-left 
		{
			margin-top:  -19px; /* approx. half the height to center it */
			margin-left: -38px;
			
			top: 50%;
			left: 0;
			
			width:  38px; /* 6px; */
			height: 38px; /* 9px; */
			
			background-position: -114px 0px;
		}