/*
 * Speech-Bubble Tooltip by Jamy Golden
 */
 
/***************************************/
/* MUESTRA EL TOOLTIP HACIA LA DERECHA */
/***************************************/
a.sbtooltip:hover {
	position: relative; /* Allows the tooltip to be absolutely positioned */
	z-index: 100;
}

/* Speech Bubble */
a.sbtooltip:before {
	color: #fff;
	border: solid 2px #d42e12; 
	background-color: #FFFFCC; 
	color: #d42e12; 
	content: attr(sbtooltip); /* This takes the content of the attribute named “sbtooltip” and displays it within this element*/
	display: none; /* Hidden until hovered upon */

/* Font, padding, top and right must change depending on the font size you are using on your web page */
	font: 12px Verdana, Helvetica, Arial,Georgia, sans-serif;
	padding: 3px 8px 5px 8px;
	position: absolute;
	top: 33px;
/* esta es la diferencia para que lo muestre a la izquierda o a la derecha, todo lo dem‡s es igual */
	left: -20px;
	width: 300px;
	max-width: 800px;
	text-align: center;
 
/* Border radio for different browsers */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

/* Box shadows for different browsers */
	-moz-box-shadow: 0px 0px 4px #999;
	-webkit-box-shadow: 0px 0px 4px #999;
	box-shadow: 0px 0px 4px #999;
}
 
/* Triangle */
a.sbtooltip:after {
	border-width: 12px;
	border-style: solid;
	border-color: transparent transparent #d42e12 transparent;
	content: ""; /* Forces this pseudo-element to appear on hover */
	display: none;
	height: 2px; /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
	width: 2px;
	position: absolute;
	top: 9px;
	left: 0px;
}

/* Display on hover */
a.sbtooltip:hover:after, a.sbtooltip:hover:before {
	display: block; /* The Speech-bubble tooltip and pointer will appear on hover */
}


/*****************************************/
/* MUESTRA EL TOOLTIP HACIA LA IZQUIERDA */
/*****************************************/
a.sbtooltip_izq:hover {
	position: relative; /* Allows the tooltip to be absolutely positioned */
	z-index: 100;
}

/* Speech Bubble */
a.sbtooltip_izq:before {
	color: #fff;
	border: solid 2px #d42e12; 
	background-color: #FFFFCC; 
	color: #d42e12; 
	content: attr(sbtooltip); /* This takes the content of the attribute named “sbtooltip” and displays it within this element*/
	display: none; /* Hidden until hovered upon */

/* Font, padding, top and right must change depending on the font size you are using on your web page */
	font: 12px Verdana, Helvetica, Arial,Georgia, sans-serif;
	padding: 3px 8px 5px 8px;
	position: absolute;
	top: 33px;
/* esta es la diferencia para que lo muestre a la izquierda o a la derecha, todo lo dem‡s es igual */
	left: -280px;
	width: 300px;
	max-width: 800px;
	text-align: center;
 
/* Border radio for different browsers */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

/* Box shadows for different browsers */
	-moz-box-shadow: 0px 0px 4px #999;
	-webkit-box-shadow: 0px 0px 4px #999;
	box-shadow: 0px 0px 4px #999;
}
 
/* Triangle */
a.sbtooltip_izq:after {
	border-width: 12px;
	border-style: solid;
	border-color: transparent transparent #d42e12 transparent;
	content: ""; /* Forces this pseudo-element to appear on hover */
	display: none;
	height: 2px; /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
	width: 2px;
	position: absolute;
	top: 9px;
	left: 0px;
}

/* Display on hover */
a.sbtooltip_izq:hover:after, a.sbtooltip_izq:hover:before {
	display: block; /* The Speech-bubble tooltip and pointer will appear on hover */
}


/*********************************************/
/* MUESTRA EL TOOLTIP HACIA LA DERECHA CORTO */
/*********************************************/
a.sbtooltip_cor:hover {
	position: relative; /* Allows the tooltip to be absolutely positioned */
	z-index: 100;
}

/* Speech Bubble */
a.sbtooltip_cor:before {
	color: #fff;
	border: solid 2px #d42e12; 
	background-color: #FFFFCC; 
	color: #d42e12; 
	content: attr(sbtooltip); /* This takes the content of the attribute named 'sbtooltip' and displays it within this element*/
	display: none; /* Hidden until hovered upon */

/* Font, padding, top and right must change depending on the font size you are using on your web page */
	font: 12px Verdana, Helvetica, Arial,Georgia, sans-serif;
	padding: 3px 8px 5px 8px;
	position: absolute;
	top: 33px;
/* esta es la diferencia para que lo muestre a la izquierda o a la derecha, todo lo dem‡s es igual */
	left: -20px;
/* 
	width: 100px;
 */
	max-width: 800px;
	text-align: center;
 
/* Border radio for different browsers */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

/* Box shadows for different browsers */
	-moz-box-shadow: 0px 0px 4px #999;
	-webkit-box-shadow: 0px 0px 4px #999;
	box-shadow: 0px 0px 4px #999;
}
 
/* Triangle */
a.sbtooltip_cor:after {
	border-width: 12px;
	border-style: solid;
	border-color: transparent transparent #d42e12 transparent;
	content: ""; /* Forces this pseudo-element to appear on hover */
	display: none;
	height: 2px; /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
	width: 2px;
	position: absolute;
	top: 9px;
	left: 0px;
}

/* Display on hover */
a.sbtooltip_cor:hover:after, a.sbtooltip_cor:hover:before {
	display: block; /* The Speech-bubble tooltip and pointer will appear on hover */
}