opentip.css

/**
 ** http://www.opentip.org
 ** See opentip.js for the license.
 **/
.opentipContainer {
	position: absolute;
	max-width: 300px;
	z-index: 100;
}
.opentip {
	position: relative;
	font-size: 13px;
	line-height: 120%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.opentip .title   { font-weight: bold; }
.opentip .content { width: auto !important;}


.opentip .loadingIndication {
	display: none;
	padding: 10px 15px;
	background: url("images/loading.gif") center center no-repeat;
	width: 25px;
	height: 15px;
}
.opentip .loadingIndication span { display: none; }
.loading .opentip .loadingIndication { display: block; }
.loading .opentip .content { display: none; }

.opentipButtons {
	position: absolute;
	right: 0;
	top: 0;
}

.opentipButtons .close {
	display: block;
	text-decoration:none;
	width: 15px;
	height: 15px;
	background: url("images/button.close.small.ffffff.png") center center no-repeat;
}
.opentipButtons .close span {
	display: none;
}

.opentipContainer .stemContainer {
	position: absolute;
	width: 0;
	height: 0;
}
.opentipContainer .stem {
	position: absolute;
	overflow: hidden;
}
.opentipContainer .stem div {
	background: no-repeat url("images/stems.cccccc.png");
	position: absolute;
	width: 320px;
	height: 160px;
}


.opentipContainer .left { left: 0; }
.opentipContainer .center { left: 50%; }
.opentipContainer .right { right: 0; }
.opentipContainer .top { top: 0; }
.opentipContainer .middle { top: 50%; }
.opentipContainer .bottom { bottom: 0; }



/**  Styles  **/

.style-standard .opentip {
	border: 1px solid #f2e37b;
	background-color: #fff18f;
	color: black;
	padding: 6px 10px;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
}
.style-standard .opentip .title {
	margin-bottom: 1px;
}
.style-standard .stem div {
	background-image: url("images/stems.e3ca1b.png");
}
.style-standard .opentipButtons {
	top: -9px;
	right: -10px;
}
.style-standard .opentipButtons .close {
	background-color: rgba(0,0,0,0.2);
	width: 21px;
	height: 21px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}




.style-rounded .opentip {
	border: 7px solid #81b4da;
	background-color: #f9fbfc;
	color: #3f5d73;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.style-rounded .opentip .title {
	background: #81b4da;
	color: #f7fafd;
	padding: 0px 10px 4px 10px;
}
.style-rounded .opentip .content {
	padding: 6px 10px;
}
.style-rounded .stem div {
	background-image: url("images/stems.c3ddf0.png");
}
.style-rounded .opentipButtons {
	top: -13px;
	right: -12px;
}
.style-rounded .opentipButtons .close {
	background-color: #81B4DA;
	width: 21px;
	height: 21px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.style-slick .opentip {
	border: 1px solid #eeeeee;
	background: #f7f7f7;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.style-slick .opentip .title {
	color: #49677e;
	padding: 5px 10px 3px 10px;
	border-bottom: 1px solid #eeeeee;
}
.style-slick .opentip .content {
	padding: 6px 10px;
	border-top: 1px solid #fefefe;
}
.style-slick .stem div {
	background-image: url("images/stems.cccccc.png");
}
.style-slick .opentipButtons {
	right: -11px;
	top: -11px;
}
.style-slick .opentipButtons .close {
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.1);
	border: 1px solid #cccccc;
	height: 19px;
	width: 19px;

}

.style-glass .opentip {
	background: white;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 0 15px rgba(51, 113, 136, 0.5);
	-moz-box-shadow: 0 0 15px rgba(51, 113, 136, 0.5);
	-webkit-box-shadow: 0 0 15px rgba(51, 113, 136, 0.5);
	padding: 20px 30px; 
}
.style-glass .opentip .title {
	color: #316F89;
	font-family: serif;
	font-style: italic;
	margin: 0 0 20px 0;
	font-size: 16px;
}
.style-glass .opentip .content {
	color: #333333;
}
.style-glass .stem {
	background-image: url("images/stems.ffffff.png");
}
.style-glass .opentipButtons .close {
	background-image: url("images/button.close.big.ffffff.png");
	border-radius: 0 5px 0 5px;
	-moz-border-radius: 0 5px 0 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	background-color: #F7BA00;
	width: 25px;
	height: 25px;
}


/** IE 6 HACKS **/
/*\*/
.opentipButtons {
	z-index: 110;
}
.opentip {
	z-index: 110;
}
.opentipIFrame {
	position: absolute;
	top: 0;
	left: 0;
	border: none;
	background: none;
	margin: 0;
	padding: 0;
	display:none;
 	/*sorry for IE5*/ display/**/:block;/*sorry for IE5*/
 	z-index:-1;/*must have*/
 	filter:mask();/*must have*/
}
.opentipContainer .stem div {
	behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
		this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
		this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
	);
}
.style-glass .opentip {
	border: 1px solid #bbbbbb;
}
/**/