/**
 * Tooltip Styles   codepen.io/cbracco/pen/nufHz
 */

/* Position the element with tooltip attribute. */
[data-tooltip] {
  position: relative;
  cursor: auto;
}

/* Design the shape and bounce of the hidden popup. */
[data-tooltip]:before,
[data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
	  opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition:    
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition:         
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the popup. */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Design the area beside the arrow. */
[data-tooltip]:before {
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Design the contents of the popup. */
[data-tooltip]:after {
  padding: 15px;
  width: 300px;
  background-color: inherit!important;
  color: white;
  font-family:tohoma;
  content: attr(data-tooltip);
  font-size: 15px;
  line-height: 1.5;
  text-align:left;
  border-radius:5px;
}


/* Position the popup on top of the element. */
[data-tooltip]:before,
[data-tooltip]:after {
  bottom: 100%;
  left: 50%;
}

/* Color the arrow. */
[data-tooltip]:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #C34500;
}

/* Set margin to the left. */
[data-tooltip]:after {
  margin-left: -80px;
}

/* Transform up. */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px);
}

/* Popup on the Left 
.bubble-left:before,
.bubble-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.bubble-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: orange;
}

.bubble-left:hover:before,
.bubble-left:hover:after,
.bubble-left:focus:before,
.bubble-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}
*/

/* Popup below the element 
.bubble-bottom:before,
.bubble-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.bubble-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: orange;
}

.bubble-bottom:hover:before,
.bubble-bottom:hover:after,
.bubble-bottom:focus:before,
.bubble-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}
*/

/* Popup on the Right of the element. 
.bubble-right:before,
.bubble-right:after {
  bottom: 50%;
  left: 100%;
}

.bubble-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: orange;
}

.bubble-right:hover:before,
.bubble-right:hover:after,
.bubble-right:focus:before,
.bubble-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}
*/

/* Move directional arrows down a bit for left/right tooltips 
.bubble-left:before,
.bubble-right:before {
  top: 3px;
}
*/
/* Vertically center tooltip content for left/right tooltips 
.bubble-left:after,
.bubble-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}
*/


/* SHOW HINT SCRIPT STYLES */
/* Talk Bubbles Tool Tips
A combination of CSS-Tricks and Stack Overvlow techniques
http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/
http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag

a.bubble, 
dfn.bubble { 
	text-decoration:none!important;
	min-height:50px;
}
a.bubble:before, 
dfn.bubble:before { 
	content: "➚";
	font-size:2em;
	
}


area.bubble[title]:hover,
dfn.bubble[title]:hover { 
	cursor:help;
	text-align:left;
	margin:0;
	padding:10px;
	position:relative;
	z-index:100;
	top:0; left:0;
	width:250px;
	background:#fff;
	border-color: #fff;
	color:#000;
	-moz-box-shadow: 0px 2px 15px #333;
	-webkit-box-shadow: 0px 2px 15px #333;
	-o-box-shadow:0px 2px 15px #333;
	box-shadow: 0px 2px 15px #333;
	 }

area.bubble[title]:after,
dfn.bubble[title]:after {  
	content: "";
	position: absolute;
	top: 100%;
	left: 20px;
	border-top: 20px solid #fff;
	border-top-color: inherit;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}
*/