/*
 *  @styleClasses
 *	gvIIContainer:  overall holder of thumbnails and gvIIHolder div, the gvIILoader div, and the gvIIImgContainer div
 * 	gvIIHolder: contains the thumbnails divs
 *	gvIIItem: contains the thumbnail img, the gvLoaderMini div, and the gvOpen div
 *	gvIILoaderMini: empty but styled with a loader images as background image.
 * 	gvIIImgContainer: the full size image container and the gvDescText div
 * 	gvIILoader: empty but styled with a loader images as background image.
 * 
 * 
*/

/* main container*/
#example1 					{ width: 500px; }/* height: 300px;*/

/*this is the container  for scroll box, big pic and text box*/
#gvIIContainer				{ background: url(images/timeline_slide.gif) no-repeat top left ; width: 500px; height: 339px; margin-left: 12px; }

/*this is the text box under the big picture*/
#pictext 					{ float: right; width: 381px; height: 150px; }

/*this is the year or step under the sm pics*/
.datetext 					{ width: 62px; text-align: center; padding-bottom: 6px; }

/*big image container*/
#gvIIImgContainer			{ float: right; margin-right: 1px; width: 381px; height: 240px; overflow: hidden; }

/*holder for small images*/
#gvIIHolder					{ float: left; height: 339px; width: 85px; overflow: auto; padding-left: 10px; }

/*each small picture item*/
#gvIIHolder #gvIIContainer .gvIIItem {
	height: 62px;
	width: 62px;
	position: relative;
	overflow: hidden; 
}

.gvIIItem	{ height: 62px; width: 62px; border: 1px solid #333; }

/*for the effects*/
/*#gvIIHolder #gvIIContainer .gvIIItem .gvIIFlash { 
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	height: 62px;
	width: 62px;
	cursor: pointer;
}*/

/*image properties*/
/*#gvIIHolder #gvIIContainer .gvIIItem img { 
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	margin-left: 0;
	margin-top: 0;
	cursor: pointer;
}

.gvIIItem img	{ border: 1px solid red; }*/