/* CSS Document */

.bubble {
    background-color: #EBEFF1;
    background-repeat:no-repeat;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px 10px 38px;
    position: relative;
    vertical-align: top;
    font-family: georgia;
    font-size:medium;
}

.tail {
    position: absolute;
    bottom: -18px;
    left: 18px;
    height: 18px;
    width:18px;
    overflow:hidden;
}
.tail:before {
    background-color: #EBEFF1;
    box-shadow: 0 0 6px #B2B2B2;
    content: "\00a0";

    display: block;
    position: absolute;
    top: 0px;
    left: 12px;
    height: 20px;
    width:  35px;
    -webkit-transform: skew( -135deg );
    -moz-transform:    skew( -135deg );
}

.me {
    width: 600px;
    float: left;   
    margin: 15px 20px 15px 20px;         
}


.triangle-right {
	position:relative;
	padding:15px;
	margin: 10px 20px;
	color:#333;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	background: url(/siteimages/p6.webp);
    border: 1px solid grey;
}

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

.triangle-right.top {
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(#075698, #2e88c4);
	background:-o-linear-gradient(#075698, #2e88c4);
	background:linear-gradient(#075698, #2e88c4);
}

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

.triangle-right.left {
	margin-left:40px;
	background:#075698;
}

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

.triangle-right.right {
	margin-right:40px;
	background:#075698;
}

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

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

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

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

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

.triangle-right.left:after {
	top:16px; 
	left:-40px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
	border-color:transparent #075698; 
}

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

.triangle-right.right:after {
	top:16px; 
	right:-40px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
	border-color:transparent #075698 ; 
}

.bubble2 
{
position: relative;
width: 250px;
height: 110px;
padding: 6px;
background: #DAD9D8;
border: #7D7F7F solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble2:after 
{
content: "";
position: absolute;
bottom: -14px;
left: 34px;
border-style: solid;
border-width: 14px 10px 0;
border-color: #DAD9D8 transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble2:before 
{
content: "";
position: absolute;
top: 123px;
left: 34px;
border-style: solid;
border-width: 14px 10px 0;
border-color: #7D7F7F transparent;
display: block;
width: 0;
z-index: 0;
}