/* ----- TYPE YELLOW ----- */
.tip-yellow {
	 z-index: 1000;
	 text-align: left;
	 border: 1px solid #939393;
	 padding: 7px;
	 min-width: 50px;
	 max-width: 530px;
	 color: #8c3901; /* couleur du texte */
	 background-color: #fef9d9;
	 background-image: url(../images/tip-yellow.png); /* bgImageFrameSize >= 10 should work fine */
}
.tip-yellow .tip-inner {
	 font:  12px 'trebuchet ms',arial,helvetica,sans-serif; /* taille police */
	 margin-top: -2px;
	 padding: 0 3px 1px 3px;
}
/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-yellow .tip-arrow-top {
	 margin-top: -7px;
	 margin-left: 15px;
	 top: 0;
	 left: 0;
	 width:1 6px;
	 height: 10px;
	 background: url(../images/tip-yellow_arrows.png) no-repeat;
}
.tip-yellow .tip-arrow-right {
	 margin-top: -9px; /* approx. half the height to center it */
	 margin-left: -4px;
	 top: 50%;
	 left: 100%;
	 width: 10px;
	 height: 20px;
	 background: url(../images/tip-yellow_arrows.png) no-repeat -16px 0;
}
.tip-yellow .tip-arrow-bottom {
	 margin-top: -6px;
	 margin-left: 15px;
	 top: 100%;
	 left: 0;
	 width: 16px;
	 height: 13px;
	 background: url(../images/tip-yellow_arrows.png) no-repeat -32px 0;
}
.tip-yellow .tip-arrow-left {
	 margin-top: -9px; /* approx. half the height to center it */
	 margin-left: -6px;
	 top: 50%;
	 left: 0;
	 width: 10px;
	 height:2 0px;
	 background: url(../images/tip-yellow_arrows.png) no-repeat -48px 0;
}

/* ----- TYPE VIOLET ----- */
.tip-violet {
	 z-index: 1000;
	 text-align: left;
	 border: 1px solid #afafaf;
	 padding: 7px;
	 min-width: 50px;
	 max-width: 530px;
	 color: #860404; /* couleur du texte */
	 background-color: #f2e7fd;
	 background-image: url(../images/tip-violet.png); /* bgImageFrameSize >= 9 should work fine */
}
.tip-violet .tip-inner {
	 font: bold 12px/18px 'trebuchet ms',arial,helvetica,sans-serif; /* taille de la police */
	 margin-top:-1px;
	 padding:0 3px 2px 3px;
}
/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-violet .tip-arrow-top {
	 margin-top: -7px;
	 margin-left: 15px;
	 top: 0;
	 left: 0;
	 width: 16px;
	 height: 10px;
	 background: url(../images/tip-violet_arrows.png) no-repeat;
}
.tip-violet .tip-arrow-right {
	 margin-top: -9px; /* approx. half the height to center it */
	 margin-left: -4px;
	 top: 50%;
	 left: 100%;
	 width: 10px;
	 height: 20px;
	 background: url(../images/tip-violet_arrows.png) no-repeat -16px 0;
}
.tip-violet .tip-arrow-bottom {
	 margin-top: -6px;
	 margin-left: 15px;
	 top: 100%;
	 left: 0;
	 width: 16px;
	 height: 13px;
	 background:url(../images/tip-violet_arrows.png) no-repeat -32px 0;
}
.tip-violet .tip-arrow-left {
	 margin-top: -9px; /* approx. half the height to center it */
	 margin-left: -6px;
	 top: 50%;
	 left: 0;
	 width: 10px;
	 height: 20px;
	 background: url(../images/tip-violet_arrows.png) no-repeat -48px 0;
}

/* ----- TYPE DARKGRAY ----- */
.tip-darkgray {
	 opacity: 0.95;
	 z-index: 1000;
	 text-align: left;
	 text-shadow: #444 0 1px 1px;
	 border: 1px solid #888;
	 padding: 8px;
	 min-width: 50px;
	 max-width: 530px;
	 color: #fff; /* couleur du texte */
	 background-color: #999;
	 background-image: url(../images/tip-darkgray.png); /* bgImageFrameSize >= 11 should work fine */
}
.tip-darkgray .tip-inner {
	 font: bold 12px/18px 'trebuchet ms',arial,helvetica,sans-serif; /* taille de la police */
	 margin-top: -1px;
	 padding: 0 4px 3px 4px;
}
/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-darkgray .tip-arrow-top {
	 margin-top: -7px;
	 margin-left: 15px;
	 top: 0;
	 left: 0;
	 width: 16px;
	 height: 10px;
	 background: url(../images/tip-darkgray_arrows.png) no-repeat;
}
.tip-darkgray .tip-arrow-right {
	 margin-top: -9px; /* approx. half the height to center it */
	 margin-left: -7px;
	 top: 50%;
	 left: 100%;
	 width: 11px;
	 height: 21px;
	 background: url(../images/tip-darkgray_arrows.png) no-repeat -22px 0;
}
.tip-darkgray .tip-arrow-bottom {
	 margin-top: -7px;
	 margin-left: 15px;
	 top: 100%;
	 left: 0;
	 width: 22px;
	 height: 13px;
	 background: url(../images/tip-darkgray_arrows.png) no-repeat -44px 0;
}
.tip-darkgray .tip-arrow-left {
	 margin-top: -9px; /* approx. half the height to center it */
	 margin-left: -6px;
	 top: 50%;
	 left: 0;
	 width: 11px;
	 height: 21px;
	 background: url(../images/tip-darkgray_arrows.png) no-repeat -66px 0;
}