/* the overlayed element */
.apple_overlay {
	
	display:none;
	background:#F4F4F4;
	width:auto;		
	padding:8px 8px 6px 8px;
	font-size:11px;
}

.overlayStyle {
		position:absolute;
		width:450px;		
		height:636px;
		top:-62px;
		left:464px;
		display:none;
		border: 1px solid #868B90;
		background:#3A3D3F;
		overflow-y:auto;
		z-index:9999;
		
}

.overlay_spc {
	padding:12px 15px 12px 12px;
}

.overlayClose {
	background-image:url(../images/close.png);
	position:absolute; right:1px; top:-2px;
	cursor:pointer;
	height:35px;
	width:35px;
}

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

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(../images/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#FFF;
	position:relative;
	z-index:3000;
}

#location img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

#location {
	background:none; 
	position:absolute; 
	top:200px; left:260px; 
	width:25px; height:22px;
	z-index:2000;
}


/* everything is constructed with a single background image */

/* root element for tabs */
#flowtabs {
	
	/* dimensions */
	width:760px;
	height:31px !important;
	margin:0 !important; 
	padding:0;	
	
	/* IE6 specific branch (prefixed with "_") */
	_margin-bottom:-2px;
}

/* single tab */
#flowtabs li { 
	float:left; 
	margin:0; 
	padding:0; 
	text-indent:0; 
	list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
	display:block;
	height: 31px;   
	width: 189px; 	
	padding:0px;
	margin:0px;
	border:1px solid #666;
	background: url(../images/bg_tab.png)  repeat-x;
	
	/* font decoration */
	color:#9FAAB2;
	font-size:14px;
	font-weight:bold;
	line-height:33px;
	text-align:center;
	text-decoration:none;
}

/* adjust the background image position on each tab */
#flowtabs #t1 			{ background-position: 0 0; }
#flowtabs #t2 			{ background-position: -189px 0; }
#flowtabs #t3 			{ background-position: -378px 0; }
 
/* mouseover state */
#flowtabs a:hover 		{ color:#CC0000;	 }
#flowtabs #t1:hover 	{ background:#999; }
#flowtabs #t2:hover 	{ background:#999; }
#flowtabs #t3:hover 	{ background:#999; }

/* currently selected tabs */
#flowtabs a.current		{ cursor:default; color:#CC0000; line-height:34px; }
#flowtabs #t1.current { background:#999; }
#flowtabs #t2.current { background:#999; }
#flowtabs #t3.current { background:#999; }


/* panes */
#flowpanes {
	background: url(../images/bg_tab.png) repeat-x #020202;		
	border:1px solid #666;
	width:900px;
	min-height:450px;
	padding:0px 0px 15px;
}

.galleryCont{
      display:none;
    }

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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 850px;
	height:188px;

	/* custom decorations */
	border:1px dotted #ccc;
	background:url(../images/h300.png) repeat-x;
}

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

.items div {
	float:left;
	width:850px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:0px 10px 0px 17px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:250px;
	height:182px;
}

.scrollable img#last {
	float:left;
	margin:0px 0px 0px 10px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:250px;
	height:182px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}