/* CSS Document */

h2 {
font-size: 14px;
font-weight: bold;
margin-top: 0;
margin-bottom: 5px;
padding: 0;
}



p {
margin-top: 0;
line-height: 18px;
}

#plainholder, #mainholder, #rangeholder, #thermholder, #new-models-holder, #galleryholder, #siliconholder, #demoholder{
width: 820px;
height: 374px;
border: 1px solid #666666;
repeat: no-repeat;
background-color: #ffffff;
float: right;
margin-top: 5px;
}

#mainholder {
background-image: url(../../images/mercury/mercury_bg.jpg);
}

#rangeholder {
/*background-image: url(../../images/mercury/range_bg.jpg);*/
background-image: url(../../images/mercury/mercury_1092_fig.jpg);
}

#thermholder {
background-image: url(../../images/mercury/thermastone_bg.jpg);
}

#galleryholder {
background-image: url(../../images/mercury/gallery_bg.jpg);
}

#siliconholder {
background-image: url(../../images/mercury/silicon_bg.jpg);
}

#demoholder {
background-image: url(../../images/mercury/demo_bg.jpg);
}

#new-models-holder {
background-image:url(../../images/mercury/mercury_new_models_bg.jpg);
}

#demotext {
float: left;
margin-left: 35px;
width: 413px;
margin-top: 124px;
}

#toptext {
text-align: right;
float: right;
margin-right: 205px;
margin-top: 30px;
width: 220px;
height: 150px;
font-size: 11px;
line-height: 16px;
}

#toptext a {
color: #6699cc;
}


#bottomtext {
text-align: left;
float: left;
margin-left: 195px;
margin-top: 40px;
width: 250px;
height: 150px;
font-size: 11px;
line-height: 16px;
color: #333333;
}

#bottomtext a {
color: #990000;
}

#maintext {
font-size: 12px;
line-height: 18px;
width: 400px;
margin-left: 275px;
margin-top: 115px;
}

#thermtext {
font-size: 12px;
line-height: 18px;
width: 325px;
margin-left: 465px;
margin-top: 115px;
color: #000000;
}

#silicontext1 {
font-size: 12px;
line-height: 18px;
width: 259px;
height: 212px;
float: left;
color: #000000;
margin-left: 22px;
margin-top: 120px;
}

#silicontext2 {
font-size: 12px;
line-height: 18px;
width: 259px;
height: 212px;
float: left;
color: #000000;
margin-left: 10px;
margin-top: 120px;
}




#thermtext a {
text-decoration: underline;
color: #990000;
}

#back {
float: left;
height: 16px;
width: 21px;
margin-top: 171px;
margin-left: 7px;
}

#forward {
float: right;
height: 16px;
width: 21px;
margin-top: 171px;
margin-right: 7px;
}

#back img, #forward img {
border: 0;
text-decoration: none;
}

.padding10 {
padding: 5px;
}


/*--- scrollable image gallery ---*/

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/

#galleryholder {
position:relative;
}


.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 762px;
	height:139px;
	margin:108px 0 0 30px;
	float:left;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
	border:none;
	background-image:none;
}

.items div img {
	margin:0 9px 0 0;
	border:1px solid #cccccc;
	background-image:none;
	cursor:pointer;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:20px;
	height:20px;
	float:left;
	margin:0px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{position:absolute; top:160px; right:5px; background:#000000 url(../../images/mercury/forward.jpg) no-repeat 0 0; clear:right; margin-right: 0px;}
a.right:hover 		{}
a.right:active 	{} 


/* left */
a.left				{position:absolute; top:160px; left:5px; background:#000000 url(../../images/mercury/back.jpg) no-repeat 0 0; margin-right: 0px; margin-left: 0px; } 
a.left:hover  		{}
a.left:active  	{}

/* up and down */
a.up, a.down		{
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/* --- Overlay --*/

/* black version of the overlay. simply uses a different background image */

/* the overlayed element */
.apple_overlay {
	/* initially overlay is hidden */
	display:none;
	overflow:hidden;
	margin:0;
	
	/* growing background image */
	background:url(../../images/transparent-bg.png) no-repeat 0 0;
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:600px;
	
	border:none;
			
	/* some padding to layout nested elements nicely  */
	padding:40px 40px 60px 40px;
	
	/* a little styling */	
	font-size:11px;
	position:relative;
	z-index:100;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background:url(../../images/close-button.png) no-repeat 0 0;
	position:absolute; right:10px; top:10px;
	cursor:pointer;
	height:35px;
	width:35px;
}
	
	div.apple_overlay h2 {
		margin:10px 0 10px 0;
		font-weight:bold;
		font-size:20px;
		padding:0;
	}
	
	div.apple_overlay p {
	margin:0;
	padding:0;
	font-size:14px;
	color:#000000;
	}
	
	div.black h2 {
		color:#000;
	}


a:active {
outline:none;
}

:focus {
  -moz-outline-style:none;
}


/*--- Bottom Gallery ---*/

#bottomholder {
height: 104px;
margin-top: 20px;
margin-left: 18px;
float:right;
width:800px;
}

#bottomholder div {
float:left;
margin-top:0;
}

/* prev, next, prevPage and nextPage buttons */
#bottomholder div a.browse {
	display:block;
	width:15px;
	height:15px;
	float:left;
	margin:0px;
	cursor:pointer;
	font-size:1px;
}

/* right */
#bottomholder div a.right 				{position:absolute; top:300px; right:5px; background:#000000; clear:right; margin-right: 0px; border:1px solid red;}


/* left */
#bottomholder div a.left				{position:absolute; top:260px; left:5px; background:#000000; margin-right: 0px; border:1px solid red;margin-left: 0px; } 

#bottomholder img {
margin-right:7px;
cursor:pointer;
}
	
	
/* the overlayed element */
#bottomholder div.apple_overlay {
	/* initially overlay is hidden */
	display:none;
	overflow:hidden;
	margin:0;
	float:left;
	
	/* growing background image */
	background:url(../../images/transparent-bg.png) no-repeat 0 0;
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:500px;
	
	border:none;
			
	/* some padding to layout nested elements nicely  */
	padding:40px 40px 30px 40px;
	
	/* a little styling */	
	font-size:11px;
	position:relative;
	z-index:100;
	line-height:100%;
}