.apple_overlay {	display:none; background-image:url(/ccsurvey/images/transparent.png); width:450px; padding:35px; font-size:11px; color:#fff;}
.apple_overlay .close {background-image: url(/ccsurvey/images/close.png); position: absolute; right: 5px; top: 5px; cursor: pointer; height: 35px; width: 35px;}
.apple_overlay h2 {margin: 10px 0px 5px; font-weight: bold; font-size: 13px;}
.details  {line-height: 24px}
.details div {float: left; width: 100px}
.details A:link, .details A:visited, .details A:active { color: #9bc942; text-decoration: none; }
.details A:hover { color: #9bc942; text-decoration: underline; }
/*
<!--[if lt IE 7]>
.apple_overlay {background-image: url(/ccsurvey/images/overlay_IE6.gif); color: #fff;}
.apple_overlay .close {background-image:url(/ccsurvey/images/overlay_close_IE6.gif);}	
<!--[endif]-->
*/
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
/* root element for scrollable */
.vertical {  
	/* required settings */
	position:relative;
	overflow:hidden;	

	/* vertical scrollers have typically larger height than width */	
	height: 360px;	 
	width: 150px;
	border-top:1px solid #ffffff;	
}

/* items holder */
#scrollable_items_holder {width: 150px; float: left;}

/* root element for scrollable items */
.items {	
	position:absolute;
	
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0px;
}

/* single scrollable item */
.item {
	border-bottom:1px solid #ddd;
	padding:7px;
	font-size:12px;
	height:75px;
}

/* elements inside single item */
.item img {
	float:left;
	height:75px;
	width:100px;
	cursor: pointer;
}

/* the action buttons above the scrollable */
#actions {width:150px; margin:2px 0px 0px; clear: both; border-bottom:1px solid #efefef;}
#actions a {font-size:11px; cursor:pointer; color:#666;}
#actions a:hover {text-decoration:underline; color:#000;}
.disabled {visibility:hidden;}
.prev {float:left;}	
.next {float:right;}

/* styling for the image wrapper  */
#image_wrap { text-align:center; background-color:#ffffff; padding:0px 0 }
	
/* styling for the video wrapper  */
#video_items_holder {width: 108px; height: 133px; float: left; padding: 10px 10px 10px 10px; }
#video_items_holder img {clear: both; margin-bottom: 15px; cursor: pointer; border: 1px solid #9bc942}
#video_wrap {float : right; padding:10px 0px 0px 0px; position: relative; }

/* the overlayed element */
.image_overlay {
	text-align: center;
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	/* set the width to 20px smaller than the intended size */
	width:680px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

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

#image_overlay_trigger {	margin-top: 15px; text-align: center; cursor: pointer; clear: both}