#bubbleInterface {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 0 20px 10px rgba(0,0,0,.2) ;
	display: block;
	color: transparent;
	width: 0;
	height: 0;
	padding: 5px;
	border-radius: 5px;
	opacity: 0 ;
}

#bubbleInterface.alert {
	display: block;
	position: absolute;
	left: 0 ;
	right: 0 ;
}

#bubbleInterface.message {
	display: block;
	position: relative;
	width: 100%;
	min-height: 100px;
	height: auto;
}

#bubbleInterface.display {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	opacity: 1 ;
	color: #444444;
}

#bubbleInterface.up:before ,
#bubbleInterface.left:before {
	transform:rotate(360deg);
	border-style: solid;
	line-height: 0px;
	content: '';
	display: block;
	position: relative;
	width: 0;
	height: 0;
	z-index: 2; /* higher z-index than the white */
}

#bubbleInterface.up:before {
	border-width: 0 10px 10px 10px;
	margin-top: -20px;
	border-color: transparent transparent #ffffff transparent;
	_border-color: #000000 #000000 #ffffff #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

#bubbleInterface.left:before {
	border-width: 10px 10px 10px 0;
	margin-left: -15px;
	border-color: transparent #ffffff transparent transparent;
	_border-color: #000000 #ffffff #000000 #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}