@charset "utf-8";
/* CSS Document */

/* Tooltip */

.tip, .tipClick{ /* This is any element that has a tooltip attached too it */
	position:relative !important;
	display:inline-block;
}

.tip > .tooltipL,
.tip > .tooltipB,
.tip > .tooltipR,
.tip > .tooltipT,
.tipClick > .tooltipL,
.tipClick > .tooltipB,
.tipClick > .tooltipR,
.tipClick > .tooltipT{ /* Used to hide the tooltip */
	display:none;
}

/** IMPORTANT!  Use the tipClick class for clickable tooltips (mobile doesn't allow hovering) and the .tip class for hoverable tooltips **/

.tip:hover > .tooltipL, 
.tip:hover > .tooltipB,
.tip:hover > .tooltipR,
.tip:hover > .tooltipT, /* This shows the tooltip when an elements with the .tip class is hovered over */
.tipClick > a:focus + .tooltipL, 
.tipClick > a:focus + .tooltipB,
.tipClick > a:focus + .tooltipR,
.tipClick > a:focus + .tooltipT{ /* This shows the tooltip once an element with the .tipClick class is clicked */
	display:block;
}

.tooltipL, .tooltipR, .tooltipB, .tooltipT{
	background: #333333; /* old browsers */
	background: rgba(0,0,0,0.85); /* For IE9 */
	background: -moz-linear-gradient(top, rgba(51,51,51,0.85) 0%, rgba(0,0,0,0.85) 100%); /* firefox */
	background: linear-gradient(top, rgba(51,51,51,0.85) 0%, rgba(0,0,0,0.85) 100%); /* future browsers */
	-pie-background: linear-gradient(top, rgba(51,51,51,0.25) 0%, rgba(0,0,0,0.25) 100%); /* pie for less than ie9 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0.85)), color-stop(100%,rgba(0,0,0,0.85))); /* webkit */
	-moz-box-shadow: 0 0 6px 1px #666666;
	-webkit-box-shadow: 0 0 6px 1px #666666;
	box-shadow: 0 0 6px 1px #666666;
	border:solid #FFFFFF;
	color: #E7E7E7;
	min-width:200px;
	padding: 5px;
    position: absolute;
	text-align: center;
    z-index: 10;
}

.tooltipL:before, .tooltipR:before, .tooltipB:before, .tooltipT:before{
  	border-style: solid;
  	border-width: 10px;
  	height:0px;
  	width:0px;
  	position:absolute;	
	display:block;
  	content:"\00a0";
}

/*********** Left Tooltip **************/

.tooltipL{ /* The styling on the tooltip */
    left: -226px;
    margin-top: -28px;
	}
	
.tooltipL:before{  /* Creates the arrow for the tooltip */
    border-color: transparent transparent transparent #333333;
  	top:5px;
  	right:-20px;
}

/************ Bottom Tooltip *************/

.tooltipB{ /* The styling on the tooltip */
    top: 30px;
	left: -183px;
	}
	
.tooltipB:before{  /* Creates the arrow for the tooltip */
	border-color: transparent transparent #333333 transparent;
  	right:5px;
  	top:-20px;
}

/*********** Right Tooltip ************/

.tooltipR{ /* The styling on the tooltip */
    right: -226px;
    margin-top: -28px;
	}
	
.tooltipR:before{  /* Creates the arrow for the tooltip */
	border-color: transparent #333333 transparent transparent;
  	top:5px;
  	left:-20px;
}

/******* Top Tooltip **********/

.tooltipT{ /* The styling on the tooltip */
    bottom:26px;
    left: -186px;
	}
	
.tooltipT:before{  /* Creates the arrow for the tooltip */
	border-color: #333333 transparent transparent transparent;
  	right:5px;
  	bottom:-20px;
}