oaup9/o2web/source/x_desktop/css/mBoxTooltip.css

/* Tooltip-Theme: default */

.mBox.Tooltip {
	font-size: 11px;
	line-height: normal;
}

.mBox.Tooltip .mBoxContainer {
	background: #fff;
	border: 1px solid #d6d6d6;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
}

.mBox.Tooltip .mBoxContent {
	background: #fff;
	color: #353535;
	padding: 5px 8px;
	border-radius: 5px;
}

.mBox.Tooltip.hasTitle .mBoxContent {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.mBox.Tooltip .mBoxTitleContainer {
	position: relative;
}

.mBox.Tooltip .mBoxTitle {
	position: relative;
	color: #505050;
	text-shadow: 0 1px 0 #fff;
	padding: 5px 8px;
	font-weight: bold;
	border-bottom: 1px solid #d6d6d6;
	background-color: #f8f8f8;
	background-image: -webkit-linear-gradient(top,#fdfdfd,#f4f4f4);
	background-image: -moz-linear-gradient(top,#fdfdfd,#f4f4f4);
	background-image: -ms-linear-gradient(top,#fdfdfd,#f4f4f4);
	background-image: -o-linear-gradient(top,#fdfdfd,#f4f4f4);
	background-image: linear-gradient(top,#fdfdfd,#f4f4f4);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fdfdfd,EndColorStr=#f4f4f4);
	box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);
	border-radius: 5px 5px 0 0;
}

.mBox.Tooltip .mBoxClose {
	display: block;
	cursor: pointer;
	width: 13px;
	height: 13px;
	position: absolute;
	top: 5px;
	right: 8px;
}

.mBox.Tooltip .mBoxClose > div {
	opacity: 0.65;
	width: 7px; 
	height: 7px;
	position: absolute;
	top: 3px;
	left: 3px;
	background: 0 0 no-repeat url(data:image/gif;base64,R0lGODlhBwAHAJEDAMjIyLCwsLy8vP///yH5BAEAAAMALAAAAAAHAAcAAAIPDIZgNnoqGIoCtRAfc/IWADs=);
}

.mBox.Tooltip .mBoxClose:hover > div {
	opacity: 1;
}

.mBox.Tooltip .mBoxPointer {
	background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAlCAYAAACgc9J8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP9JREFUeNq01oENhCAMBdCWuIgTuP8WOoGj9GhSDaeUfjiuCSEm+iKFVllESGNdVzrPk55xHIfewHnItm1MrVDMG/u+i0aeyWZp3R9CJRaBIWRB5YUHItAL80AEqmI1EIFcrAQ1rwjUxEoQgULsAue+2ayc/W83p5+z6RXggOO1WQGhrsFXP/Oip58tAaQTZ4QMbEbyEB2GCKEBdtpmru4NsC4aHg8PLJ/3lim2xDv02jYDz1kNQsGEQgiYeqAQBPuZQF1jFKqBYTn1RLK1D4+v3E3NGfgNkJlfdKi0XrUZgc1OWyt0Dwz/z37tGhA20s+WR4t+1iBbzTJyaD8CDAB7WgNSzh/AnwAAAABJRU5ErkJggg==);
}

.mBox.Tooltip .mBoxPointerTop {
	width: 17px;
	height: 9px;
	background-position: 0px -18px;
}

.mBox.Tooltip .mBoxPointerBottom {
	width: 17px;
	height: 9px;
	background-position: 0px -28px;
}

.mBox.Tooltip .mBoxPointerRight {
	width: 9px;
	height: 17px;
	background-position: -10px 0px;
}

.mBox.Tooltip .mBoxPointerLeft {
	width: 9px;
	height: 17px;
	background-position: 0px 0px;
}

/* Tooltip-Theme: Black */

.mBox.Tooltip-Black {
    font-size: 11px;
    line-height: normal;
}

.mBox.Tooltip-Black .mBoxContainer {
    background-color: #000;
    border-radius: 3px;
}

.mBox.Tooltip-Black .mBoxContent {
    color: #fff;
    padding: 5px 8px;
}

.mBox.Tooltip-Black .mBoxTitle {
    color: #fff;
    font-weight: bold;
    padding: 4px 8px 2px;
}

.mBox.Tooltip-Black .mBoxPointer {
    background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAVCAYAAACQcBTNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIZJREFUeNqUUkEOwCAIo2b//3I3iBp1MFgvxlCKtog8ICkLeJxWPziTwF7g2qBojqInsJEj4tbQCsTZoGSUmCTGM7IGnB/EF1FxOYXV300Antl/wCg1RAF4f0CSILwLM9uqCY7FMuvgrGk4gpWoH0irRm1v7uPTqI2s8oGvL4FoN9w1uAUYAJb2PwK9FWu9AAAAAElFTkSuQmCC);
}

.mBox.Tooltip-Black .mBoxPointerTop {
    width: 7px;
    height: 4px;
    background-position: -1px -10px;
}

.mBox.Tooltip-Black .mBoxPointerBottom {
    width: 7px;
    height: 4px;
    background-position: -1px -17px;
}

.mBox.Tooltip-Black .mBoxPointerRight {
    width: 4px;
    height: 7px;
    background-position: -7px -1px;
}

.mBox.Tooltip-Black .mBoxPointerLeft {
    width: 4px;
    height: 7px;
    background-position: 0px -1px;
}

/* Tooltip-Theme: BlackGradient */

.mBox.Tooltip-BlackGradient {
    font-size: 12px;
    line-height: normal;
}

.mBox.Tooltip-BlackGradient .mBoxContainer {
    background-color: #252525;
    background-image: -webkit-linear-gradient(top,#505050,#000000);
    background-image: -moz-linear-gradient(top,#505050,#000000);
    background-image: -ms-linear-gradient(top,#505050,#000000);
    background-image: -o-linear-gradient(top,#505050,#000000);
    background-image: linear-gradient(top,#505050,#000000);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#505050,EndColorStr=#000000);
    border-radius: 4px;
}

.mBox.Tooltip-BlackGradient .mBoxContent {
    color: #fff;
    text-shadow: 0px -1px 1px #000000;
    padding: 8px 15px;
}

.mBox.Tooltip-BlackGradient .mBoxTitle {
    color: #fff;
    font-weight: bold;
    padding: 4px 8px 2px;
}

.mBox.Tooltip-BlackGradient .mBoxPointer {
    background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAVCAYAAACQcBTNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIZJREFUeNqUUkEOwCAIo2b//3I3iBp1MFgvxlCKtog8ICkLeJxWPziTwF7g2qBojqInsJEj4tbQCsTZoGSUmCTGM7IGnB/EF1FxOYXV300Antl/wCg1RAF4f0CSILwLM9uqCY7FMuvgrGk4gpWoH0irRm1v7uPTqI2s8oGvL4FoN9w1uAUYAJb2PwK9FWu9AAAAAElFTkSuQmCC);
}

.mBox.Tooltip-BlackGradient .mBoxPointerTop {
    width: 7px;
    height: 4px;
    background-position: -1px -10px;
}

.mBox.Tooltip-BlackGradient .mBoxPointerBottom {
    width: 7px;
    height: 4px;
    background-position: -1px -17px;
}

.mBox.Tooltip-BlackGradient .mBoxPointerRight {
    width: 4px;
    height: 7px;
    background-position: -7px -1px;
}

.mBox.Tooltip-BlackGradient .mBoxPointerLeft {
    width: 4px;
    height: 7px;
    background-position: 0px -1px;
}