div#custom-title-tip {
	position: absolute;
	border: solid #ccc 1px;
	padding: .3em .5em;
	border-radius: 4px;
	background: #DCDCDC;
	color: #000000;
	opacity: .95;
	filter: alpha(opacity=95);
}
div#custom-title-tipWarning {
	margin: 0 1em 0 0;
	border: groove #ccc 4px;
	padding: .3em .5em;
	background: #FF8247;
	font-size: 120%;
}

.arrow::before {
	text-align: left;
    content: "";
    position: absolute;
    bottom: 50%;
    left: 0px;
    border-width: 10px;
    border-style: solid;
    border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 0px solid  transparent;
	border-right: 15px solid #ccc;
	z-index:1;
}

.arrow::after {
	text-align: left;
    content: "";
    position: absolute;
    bottom: 50%;
    left: 1px;
    border-width: 10px;
    border-style: solid;
    border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 0px solid  transparent;
	border-right: 15px solid #DCDCDC;
	z-index:2;
}

.arrow {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
	text-align: left;
}
.arrow.top {
    top: 0px;
    bottom: auto;
}
.arrow.left {
    left: -120%;
}

.arrow.top:after {
    bottom: -20px;
    top: auto;
}