/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	display: none;      /* required */
	position: absolute; /* required */
	/*width: 250px;*/
	padding: 10px;
	/*border: 3px solid #AF8A31;*/
	background-color: #96C738;
	text-align: center;
	color: black;
	
	
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#96C738), to(#96C738));
	background:-moz-linear-gradient(#96C738, #96C738);
	background:-o-linear-gradient(#96C738, #96C738);
	background:linear-gradient(#96C738, #96C738);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	
	/* Theoretically for IE 8 & 9 (more valid) */
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=90);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.9;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.9;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.9;
		
}


/*.triangle-isosceles {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	color:#000;
	background:#f3961c;*/ /* default background for browsers without gradient support */
	/* css3 */
/*	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(#f9d835, #f3961c);
	background:-o-linear-gradient(#f9d835, #f3961c);
	background:linear-gradient(#f9d835, #f3961c);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	width:20px;
}
*/
/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
	background:-moz-linear-gradient(#f3961c, #f9d835);
	background:-o-linear-gradient(#f3961c, #f9d835);
	background:linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles.left {
	margin-left:50px;
	background:#f3961c;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles.right {
	margin-right:50px;
	background:#f3961c;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles:after {
	content:"";
	position:absolute;
	bottom:-5px; /* value = - border-top-width - border-bottom-width */
	right:5px; /* controls horizontal position */
	border-width:6px 6px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#96C738 transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-isosceles.top:after {
	top:-15px; /* value = - border-top-width - border-bottom-width */
	right:50px; /* controls horizontal position */
	bottom:auto;
	left:auto;
	border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
	border-color:#f3961c transparent;
}

/* Variant : left
------------------------------------------ */

.triangle-isosceles.left:after {
	top:16px; /* controls vertical position */
	left:-50px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:10px 50px 10px 0;
	border-color:transparent #f3961c;
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles.right:after {
	top:16px; /* controls vertical position */
	right:-50px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:10px 0 10px 50px;
	border-color:transparent #f3961c;
}

.transparent {
        /* Required for IE 5, 6, 7 */
        /* ...or something to trigger hasLayout, like zoom: 1; */
        width: 100%; 

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=50);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.5;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.5;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.5;
}