.tooltip-container {
	position:relative;	/* Forces tooltip to be relative to the element, not the page */
	cursor:help;		/* Makes you cursor have the help symbol */
}

.tooltip {
	display:block;
	position:absolute;
	width:85%;
	padding:5px 15px;
	left:2%;
	top:10px;
	height:90%;
	
	/* Tooltip Style */
	
	text-align:center;
	
	/* Tooltip Style */
	opacity:0;
	box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-0-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	/* reset tooltip, to not use container styling */
	
	background-color: transparent;
  background-image: url('../img/cj_slide_down.png');
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.06)), to(rgba(0,0,0,0.12))),url('../img/cj_slide_down.png');
  background-image: -webkit-linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.12)),url('../img/cj_slide_down.png');
  background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.12) 100%),url('../img/cj_slide_down.png');
  background-image: -moz-gradient(center top, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.12) 100%),url('../img/cj_slide_down.png');
  background-image: -o-linear-gradient(top, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.12) 100%),url('../img/cj_slide_down.png');
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.12) 100%),url('../img/cj_slide_down.png');
  color: #831409;
  font-size: 25px;
  text-shadow: 0 1px rgba(255,255,255,0.2);
  -webkit-text-shadow: 0 1px rgba(255,255,255,0.2);
  -moz-text-shadow: 0 1px rgba(255,255,255,0.2);
  -o-text-shadow: 0 1px rgba(255,255,255,0.2);
	
}

.tooltip:before, .tooltip:after{
	content:'';
	position:absolute;
	bottom:-13px;
	left:50%;
	margin-left:-9px;
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid rgba(0,0,0,0.1);
}
.tooltip:after{
	bottom:-12px;
	margin-left:-10px;
	border-top:10px solid rgba(34,34,34,0.9);
}

.tooltip-container:hover .tooltip, a:hover .tooltip {
	/* Makes the Tooltip slightly transparent, Lets the barely see though it */
	opacity:0.9;
	/* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}

/* Pure CSS3 Animated Tooltip - Custom Classes
---------------------------------------------------- */
.tooltip-style1 {
	color:#000;
	border:2px solid #fff;
	background:rgba(246,246,246,0.9);
	font-style:italic;
}
.tooltip-style1:after{
	border-top:10px solid #fff;
}