/* CSS  jQuery Document */

/*----------------------------- EFFECT FOR OVERLAY -----------------------------*/
/* the overlayed element */
.apple_overlay {
	/* initially overlay is hidden */
	display:none;
	/* growing background image */
	background-image:url(../img/overlay/white.png);
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;
	/* some padding to layout nested elements nicely  */
	padding:35px;
	/* a little styling */	
	font-size:14px;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close {
	background-image: url(../../images/png/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}
/* black version of the overlay. simply uses a different background image */
div.apple_overlay.black {
	background-image: url(../../images/png/transparent.png);		
	color:#fff;
}

div.apple_overlay h2 {
	margin:10px 0 -9px 0;
	font-weight:bold;
	font-size:14px;
}

div.black h2 {
	color:#fff;
}

#triggers {
	margin-top:10px;
	text-align:center;
	float: right;
	width: 250px;
}

#triggers img {
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	margin:2px 5px;
	cursor:pointer;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
/*----------------------------- Tooltips with using HTML -----------------------------*/
/* tooltip styling */ 
.tooltip { 
    display:none; 
    background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png); 
    height:163px; 
    padding:40px 30px 10px 30px; 
    width:310px; 
    font-size:11px; 
    color:#fff; 
} 
 
/* a .label element inside tooltip */ 
.tooltip .label { 
    color:yellow; 
    width:35px; 
} 
 
.tooltip a { 
    color:#ad4; 
    font-size:11px; 
    font-weight:bold; 
}
/*----------------------------- Trigger Overlay Dialog -----------------------------*/
#dialog-box {

	/* overlay is hidden before loading */
	display:none;

	/* standard decorations */
	width:400px;	
	border:3px solid #666;

	/* for modern browsers use semi-transparent color on the border. nice! */
	border:10px solid rgba(82, 82, 82, 0.698);

	/* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

#dialog-box div {
	padding:10px;
	border:1px solid #3B5998;
	background-color:#fff;
	font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}

#dialog-box h2 {
	margin:-11px;
	margin-bottom:0px;
	color:#fff;
	background-color:#0099cc;
	padding:5px 10px;
	border:1px solid #3B5998;
	font-size:20px;
}
#dialog-box p {
	margin: 2px;
}
[if IE]
   .dialog-box {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333);
       zoom: 1;
    }
[endif]