/*
 ****************************************************************************
 * Basic CSS Styles for tooltips including formating of standard HTML tags. *
 *                                                                          *
 * Styling for specific classes (e.g. .warning, .info etc) is not included  *
 * in this CSS file as, for the most part, it should be inherited by the    *
 * tooltip from other CSS files.                                            *
 ****************************************************************************
 */

#pageMask {
	width: 100%;
	height: 1000px; /* Actual value will be set by the JavaScript */
	overflow: hidden;
	position: fixed;
	z-index: 9999;
	opacity: 0.4;
/*	filter: alpha(opacity = 40); // MOVE TO IE specific CSS */
	background: #000;
	top: 0;
	left: 0;
	display: none;
	}
	
#blankMask {
	width: 100%;
	height: 1000px; /* Actual value will be set by the JavaScript */
	overflow: hidden;
	position: fixed;
	z-index: 9998;
	opacity: 0.0;
/*	filter: alpha(opacity = 40); // MOVE TO IE specific CSS */
	background: #FFF;
	top: 0;
	left: 0;
	display: block;
	}

#pageOverlay {
	width: 630px;
	position: absolute;
	top: 100px;		/* top and left are arbitary values that will be re-written by the JavaScript */
	left: 380px;
	z-index: 99999;
	overflow: hidden;
	background: transparent url(/pics/tooltips/tooltip_footer_uk.png) no-repeat scroll left bottom;
	padding-bottom: 18px;
	line-height: 1.2em;
	display: none;
	text-align: left;
	}
	
#resellerPage #pageOverlay,
#threeMonthsFREE #pageOverlay {
	background: transparent url(/pics/tooltips/tooltip_footer_reseller.png) no-repeat scroll left bottom;
	}
	
#pageOverlayBody {
	background: transparent url(/pics/tooltips/tooltip_header_uk.png) no-repeat scroll top left;
	overflow: hidden;
	padding: 10px;
	min-height: 50px;
	}
	
#resellerPage #pageOverlayBody,
#threeMonthsFREE #pageOverlayBody {
	background: transparent url(/pics/tooltips/tooltip_header_reseller.png) no-repeat scroll top left;
	}
	
#pageOverlayBody .tooltiploading {
	margin: 14px auto 0;
	display: block;
	}
	
#lnkClosePageOverlay {
	display: block;
	position: absolute;
	right: 23px;
	top: 23px;
	width: 25px;
	height: 25px;
	background: transparent url(/pics/tooltips/close.png) no-repeat scroll left top;
	text-indent: -900em;
	z-index: 9999;
	}
	
#lnkClosePageOverlay:hover {
	background-image: url(/pics/tooltips/close_hover_us.png);
/*	background-image: url(/images/tooltips/close_hover_uk.png);   <-- Blue rather than red hover state */
	}
	
#pageOverlayBody h1 {
	font-size: 22px;
	font-weight: bold;
	padding-right: 60px;
	height: 64px;
	line-height: 56px;
	overflow: hidden;
	background: url(/pics/tooltips/tooltip_header_bg.png) no-repeat;
	padding: 0 60px 0 10px;
	color: #454545;
	}
	
#pageOverlayBody h2, #pageOverlayBody h3, #pageOverlayBody h4, #pageOverlayBody p,
#pageOverlayBody ul, #pageOverlayBody ol, #pageOverlayBody dl {
	padding: 0 10px;
	margin: 0 0 1.2em;
	display: block;
	clear: both;
	}
	
#pageOverlayBody h2, #pageOverlayBody h3, #pageOverlayBody h4 {
	font-weight: bold;
	margin: 0;
	}
	
#pageOverlayBody h2 {
	font-size: 16px;
	margin: 2em 0 0.2em;
	}

#pageOverlayBody h3 {
	font-size: 14px;
	margin: 1.5em 0 0.1em;
	}
	
#pageOverlayBody h4 {
	font-size: 12px;
	margin: 1.5em 0 0.1em;
	color: #454545;
	}
	
#pageOverlayBody ul, #pageOverlayBody ol, #pageOverlayBody dl {
	overflow: hidden;
	}
	
#pageOverlayBody ul {
	padding: 0 30px;
	list-style: disc;
	}
#pageOverlayBody ul li {
	list-style: disc;
}

#pageOverlayBody ol {
	padding: 0 30px;
	list-style: decimal;
	}
	
#pageOverlayBody li {
	padding: 0.1em 5px 0.1em 0;
	}
	
#pageOverlayBody dt, #pageOverlayBody dd {
	display: inline-block;
	float: left;
	margin: 0.1em 5px 0.1em 0;
	}
	
#pageOverlayBody dt {
	font-weight: bold;
	clear: left;
	}
	
#pageOverlayBody dd {
	clear: right;
	}
	
#pageOverlayBody strong {
	font-weight: bold;
	}
	
#pageOverlayBody em {
	font-style: italic;
	}
#pageOverlayBody ul.oneclicklist li {
	float: left;
	width: 150px;
	padding-right: 30px;
	display: inline-block;
	font-size: 11px;
	color: #454545;
}
.release-date-pre-order{
	font-size: 1.4em;
	margin: 10px 0 !important;
}

.outlook-email {
    width: 350px;
}
	.outlook-email p {
		font-size:18px;
		text-align: center;
	}
	
	.outlook-email p strong span{
   		text-transform: none;
	}

	.outlook-email img{
		margin: 15px 10px 0 0;
	}

/* 
HTML STRUCTURE REQUIRED TO IMPLEMENT...

<div id="pageMask">&nbsp;</div>
<div id="pageOverlay">
	<div id="pageOverlayHeader"><a href="javascript:void(0);" id="lnkClosePageOverlay">Close</a></div>
	<div id="pageOverlayBody">
		<!-- AJAX WILL LOAD BODY CONTENT HERE -->
		<h1>Title of the Tooltip</h1>
		<p>Content etc...</p>
	</div>
</div>

The HTML structure and AJAX content will be loaded into the page by JavaScript on the fly and is only for reference. 
If JavaScript is not enabled, the page will not contain any of the HTML needed to display the tooltip.

The tooltip JavaScript code will be updated when the revised tooltips are implemented.
*/

/* Start Styles for Specific Instances */

/* End Styles for Specific Instances */