/* the overlayed element */
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../images/ui-components/white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:682px;		
	
	/* some padding to layout nested elements nicely  */
	padding:65px 65px 65px 65px;

	/* a little styling */	
	font-size:1.3em;
	line-height:140%;
	color:#999;
	position:relative;
	float:left;
	z-index:10;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close {
	background-image:url(../images/ui-components/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:49px;
	width:49px;
}

.details{color:#535353;}
.details p{margin:0 0 2em 0;}
p.short{width:430px;}

p.position{text-align:left; margin:0 0 0.5em 0;}
p.position span{color:#660000; text-transform:uppercase; font-size:1.4em;}




/* override the arrow image of the tooltip */ 
#dynatip{
	display:none; 
	background:transparent url(../images/ui-components/black_arrow.png); 
	background:transparent url(../images/ui-components/tooltip.png) no-repeat;
	font-size:1em; 
	height:99px; 
	width:165px; 
	padding:15px; 
	color:#fff;
	line-height:1.2em;
	z-index:1000;
}

#dynatip.bottom { 
    background:url(../images/ui-components/tooltip.png) no-repeat;     
    padding-top:40px; 
    height:99px; 
} 

#dynatip.bottom { 
    background:url(../images/ui-components/tooltip.png) no-repeat; 
}



/*scrollable gallery*/





/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../images/ui-components/left.png) no-repeat;
	float:left;
position:relative;
top:-2px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

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

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../images/ui-components/right.png);
	clear:right;	
}



/*********** navigator ***********/

.center{padding:12px 0 5px 430px; width:960px; float:left;}

/* position and dimensions of the navigator */
div.navi {
	float:left;
	width:auto;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/ui-components/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
}



/* main vertical scroll */
#main {
	position:relative;
	overflow:hidden;
	width:962px;
	height: 450px;
	float:left;
	background:#fff;
}

/* root element for pages */
#pages {
	position:absolute;
	height:20000em;
	width:962px;
	height:450px;
	padding:0;
	margin:0;
	background:#fff;

}

/* single page */
.page {
	width:962px;
	height: 500px;
	background:#fff;
}

/* root element for horizontal scrollables */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 962px;
	height: 450px;
	color:#999;
}

/* root element for scrollable items */
.scrollable .items {
	width:20000em;
	height: 450px;
	position:absolute;
	clear:both;
	
}

.items{color:#999;}
/* single scrollable item */
.item {
	float:left;
	cursor:pointer;
	width:962px;
	height: 450px;
	background:#fff;

	
}







/* main navigator */


ul#main_navi{
	float:left;
	border-right:1px solid #999;
	border-top:1px solid #999;
	border-bottom:1px solid #999;
	padding:0px !important;
	margin:0px 20px 0 105px!important;
	position:relative;
	z-index:2;
	top:10px;
	background:#fff;
}

#main_navi li {
	border-left:1px solid #999;
	display:inline;
	float:left;
	background-color:#fff;
	/*border-top:1px solid #666;*/
	color:#535353;
	font-size:12px;
	height:75px;
	padding:10px;
	width:235px;
	cursor:pointer;
	list-style-image:none !important;
	margin:0;
}

#main_navi li:hover {
background:#f5f5f5;
}

#main_navi li.active {
background:#f5f5f5;
}

#main_navi img {
	float:left;
	margin-right:10px;
}

#main_navi strong {
	display:block;
	color:#660000;
	font-size:1.4em;
}
#main_navi li {font-size:1.2em;}
#main_navi li p{margin: 12px 0 0 0; font-size:1em;}
#main_navi li img{border:1px solid #999;}
#main div.navi {
	
	cursor:pointer;
}