/* ------------------ Tooltip ------------------- */
.tooltip {
position:relative; /* make span relative to anchor */
text-decoration:none; /* no underline */
cursor:pointer; /* make cursor point */
}
.tooltip span { /* main body of tooltip */

position:absolute; /* AP it */
bottom:66px; /* FADE IN/OUT BEGIN */
left:50%; /* CENTER TOOLTIP */
margin-left:-95px; /* CENTER TOOLTIP */
width:180px; /* tootip width */
opacity:0; /* HIDE TOOLTIP in modern browsers */
visibility:hidden; /* HIDE TOOLTIP in IE */
padding:15px; /* padding */
color:#000000; /* text color */
font:normal 12px  Verdana, Arial, Helvetica, sans-serif; /* font */
text-align:center; /* center text */
pointer-events:none; /* no unintended tooltip popup for modern browsers */
/* border-radius:6px; /* round corners */

background:rgb(255,223,47);  
/* border:2px solid rgb(255,255,255); /* IE6/7/8 */
/* border:2px solid rgba(255,255,255,.8); /* modern browsers */
/* box-shadow:0px 2px 4px rgba(0,0,0,0.5); /* shadow */
-webkit-transition:all 0.3s ease-in-out; /* animate tooltip */
-moz-transition:all 0.3s ease-in-out; /* animate tooltip */
-o-transition:all 0.3s ease-in-out; /* animate tooltip */
-ms-transition:all 0.3s ease-in-out; /* animate tooltip */
transition:all 0.3s ease-in-out; /* animate tooltip */
}
.tooltip span.dif { /* different width tooltip */
width:250px; /* width */
margin-left:-102px; /* center it */
}
.tooltip span:before, .tooltip span:after { /* bottom triangle - the white border */
content:''; /* add html content */
position:absolute; /* AP bottom triangle */
bottom:-13px; /* position bottom triangle */
left:50%; /* center bottom triangle */
margin-left:-12px; /* center bottom triangle */
border-left:12px solid transparent; /* build bottom triangle */
border-right:12px solid transparent; /* build bottom triangle */
border-top:12px solid rgb(255,223,47); /* build bottom triangle IE6/7/8 */
border-top:12px solid rgba(255,223,47,1); /* build bottom triangle modern browsers */
}
.tooltip span:after { /* top triangle - the blue background */
bottom:-10px; /* position top triangle */
margin-left:-10px; /* center top triangle */
border-width:10px; /* build top triangle */
border-top:10px solid rgb(255,223,47); /* build top triangle IE6/7/8 */
border-top:10px solid rgba(255,223,47,1); /* build top triangle modern browsers */
}
.tooltip:hover span { /* reveal tooltip */
opacity:1; /* REVEAL TOOLTIP in modern browsers */
bottom:28px; /* FADE IN/OUT END */
visibility:visible; /* REVEAL TOOLTIP in IE */
}
.tooltip span:hover {
visibility:hidden; /* hide tooltip when moving from link to span in IE */
}

/* YOU tube image */
.tooltipA {
position:relative; /* make span relative to anchor */
text-decoration:none; /* no underline */
cursor:pointer; /* make cursor point */
}
.tooltipA span { /* main body of tooltip */
position:absolute; /* AP it */
bottom:66px; /* FADE IN/OUT BEGIN */
left:50%; /* CENTER TOOLTIP */
margin-left:-223px; /* CENTER TOOLTIP */
width:440px; /* tootip width */
opacity:0; /* HIDE TOOLTIP in modern browsers */
visibility:hidden; /* HIDE TOOLTIP in IE */
padding:3px; /* padding */
color:#000000; /* text color */
font:normal 12px  Verdana, Arial, Helvetica, sans-serif; /* font */
text-align:center; /* center text */
pointer-events:none; /* no unintended tooltip popup for modern browsers */
/* border-radius:6px; /* round corners */

background:rgb(255,223,47);  
/* border:2px solid rgb(255,255,255); /* IE6/7/8 */
/* border:2px solid rgba(255,255,255,.8); /* modern browsers */
/* box-shadow:0px 2px 4px rgba(0,0,0,0.5); /* shadow */
-webkit-transition:all 0.3s ease-in-out; /* animate tooltip */
-moz-transition:all 0.3s ease-in-out; /* animate tooltip */
-o-transition:all 0.3s ease-in-out; /* animate tooltip */
-ms-transition:all 0.3s ease-in-out; /* animate tooltip */
transition:all 0.3s ease-in-out; /* animate tooltip */
}
.tooltipA span.dif { /* different width tooltip */
width:200px; /* width */
margin-left:-102px; /* center it */
}
.tooltipA span:before, .tooltip span:after { /* bottom triangle - the white border */
content:''; /* add html content */
position:absolute; /* AP bottom triangle */
bottom:-13px; /* position bottom triangle */
left:50%; /* center bottom triangle */
margin-left:-12px; /* center bottom triangle */
border-left:12px solid transparent; /* build bottom triangle */
border-right:12px solid transparent; /* build bottom triangle */
border-top:12px solid rgb(255,223,47); /* build bottom triangle IE6/7/8 */
border-top:12px solid rgba(255,223,47,1); /* build bottom triangle modern browsers */
}
.tooltipA span:after { /* top triangle - the blue background */
bottom:-10px; /* position top triangle */
margin-left:-10px; /* center top triangle */
border-width:10px; /* build top triangle */
border-top:10px solid rgb(255,223,47); /* build top triangle IE6/7/8 */
border-top:10px solid rgba(255,223,47,1); /* build top triangle modern browsers */
}
.tooltipA:hover span { /* reveal tooltip */
opacity:1; /* REVEAL TOOLTIP in modern browsers */
bottom:28px; /* FADE IN/OUT END */
visibility:visible; /* REVEAL TOOLTIP in IE */
}
.tooltipA span:hover {
visibility:hidden; /* hide tooltip when moving from link to span in IE */
}

 

/* RIGHT ----------------------------------------------*/
/* Base styles for the element that has a tooltip */
[data-tooltp],
.tooltp {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltp]:before,
[data-tooltp]:after,
.tooltp:before,
.tooltp: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(250, 250, 250);
  -moz-transform:    translate3d(250, 250, 250);
  transform:         translate3d(250, 250, 250);
  pointer-events: none;
}

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

/* Base styles for the tooltip's directional arrow */
.tooltp:before,
[data-tooltp]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltp:after,
[data-tooltp]:after {
  z-index: 1000;
  padding: 7px;
  width: 160px;
  background-color:#ffdf2f; 
  background-color: hsla(51, 100%, 59%, 1);
  color: #cc0000;
  content: attr(data-tooltp);
  font-size: 13px;
  line-height: 1.3;
}
/* Right */
.tooltp-right:before,
.tooltp-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltp-right:before { /* arrow */
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color:#ffdf2f;
  border-right-color: hsla(51, 100%, 59%, 1);
}

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

/* Move directional arrows down a bit for left/right tooltips */
.tooltp-left:before,
.tooltp-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltp-left:after,
.tooltp-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}