@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;
}

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

.tooltipL{ /* The styling on the tooltip */
	background: #0E1777; /* old browsers */
	background: -moz-linear-gradient(top, #5159CC 10%, #0E1777 100%); /* firefox */
	background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* future browsers */
	-pie-background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* pie for ie */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(27%,#5159CC), color-stop(100%,#0E1777)); /* webkit */
	box-shadow: 0 0 6px 1px #666666;
	-moz-box-shadow: 0 0 6px 1px #666666;
	-webkit-box-shadow: 0 0 6px 1px #666666;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	border:solid #FFFFFF 3px;
    padding: 5px;
    position: absolute;
	text-align:center;
    left: -226px;
    margin-top: -28px;
	color:#e7e7e7;
	width:200px;
	z-index:10;
	}
	
.tooltipL:before{  /* Creates the arrow for the tooltip */
	border-color: transparent transparent transparent #5159CC;
  	border-style: solid;
  	border-width: 11px;
  	height:0px;
  	width:0px;
  	position:absolute;
  	top:5px;
  	right:-20px;
  	display:block;
  	content:"\00a0";
}

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

.tooltipB{ /* The styling on the tooltip */
	background: #0E1777; /* old browsers */
	background: -moz-linear-gradient(top, #5159CC 10%, #0E1777 100%); /* firefox */
	background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* future browsers */
	-pie-background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* pie for ie */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(27%,#5159CC), color-stop(100%,#0E1777)); /* webkit */
	box-shadow: 0 0 6px 1px #666666;
	-moz-box-shadow: 0 0 6px 1px #666666;
	-webkit-box-shadow: 0 0 6px 1px #666666;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	border:solid #FFFFFF 3px;
    top: 30px;
    color: #e7e7e7;
	min-width:200px;
    padding: 5px;
    position: absolute;left: -183px;
    text-align: center;
    z-index: 10;
	box-shadow: 0 0 6px 1px #666666;
	-moz-box-shadow: 0 0 6px 1px #666666;
	-webkit-box-shadow: 0 0 6px 1px #666666;
	}
	
.tooltipB:before{  /* Creates the arrow for the tooltip */
	border-color: transparent transparent #5159CC transparent;
  	border-style: solid;
  	border-width: 11px;
  	height:0px;
  	width:0px;
  	position:absolute;
  	right:5px;
  	top:-20px;
  	display:block;
  	content:"\00a0";
}

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

.tooltipR{ /* The styling on the tooltip */
	background: #0E1777; /* old browsers */
	background: -moz-linear-gradient(top, #5159CC 10%, #0E1777 100%); /* firefox */
	background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* future browsers */
	-pie-background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* pie for ie */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(27%,#5159CC), color-stop(100%,#0E1777)); /* webkit */
	box-shadow: 0 0 6px 1px #666666;
	-moz-box-shadow: 0 0 6px 1px #666666;
	-webkit-box-shadow: 0 0 6px 1px #666666;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	border:solid #FFFFFF 3px;
    padding: 5px;
    position: absolute;
	text-align:center;
    right: -226px;
    margin-top: -28px;
	color:#E7E7E7;
	width:200px;
	z-index:10;
	}
	
.tooltipR:before{  /* Creates the arrow for the tooltip */
	border-color: transparent #5159CC transparent transparent;
  	border-style: solid;
  	border-width: 11px;
  	height:0px;
  	width:0px;
  	position:absolute;
  	top:5px;
  	left:-20px;
  	display:block;
  	content:"\00a0";
}

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

.tooltipT{ /* The styling on the tooltip */
	background: #0E1777; /* old browsers */
	background: -moz-linear-gradient(top, #5159CC 10%, #0E1777 100%); /* firefox */
	background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* future browsers */
	-pie-background: linear-gradient(top, #5159CC 27%, #0E1777 100%); /* pie for ie */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(27%,#5159CC), color-stop(100%,#0E1777)); /* webkit */
	box-shadow: 0 0 6px 1px #666666;
	-moz-box-shadow: 0 0 6px 1px #666666;
	-webkit-box-shadow: 0 0 6px 1px #666666;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	border:solid #FFFFFF 3px;
    bottom:26px;
    color: #e7e7e7;
	min-width:200px;
    padding: 5px;
    position: absolute;
    left: -186px;
    text-align: center;
    z-index: 10;
	}
	
.tooltipT:before{  /* Creates the arrow for the tooltip */
	border-color: #0E1777 transparent transparent transparent;
  	border-style: solid;
  	border-width: 11px;
  	height:0px;
  	width:0px;
  	position:absolute;
  	right:5px;
  	bottom:-20px;
  	display:block;
  	content:"\00a0";
}