/*below is the stuff for the compact example*/
.pikachooseCompact{
	width: 780px;
	height: 370px;
	margin:auto;
}

/* This is the ul you have all your images in */
.pikachooseCompact ul{
	position: relative;
	width: 140px;
	height: 40px;
	margin: 50px 310px auto auto;
	z-index:99;
}

.pikachooseCompact ul li{
	float: left;
	height: 25px;
	width: 25px;
	cursor: pointer;
}

.pikachooseCompact ul li:hover {
	background-image: url('../img/menu_item_hover_bg.png');
}
.pikachooseCompact ul li div img{
	position:relative;
	height: 25px;
	width: 25px;
}



/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{
	width:506px;
	height:325px;
	display:block;
	position:relative;
}

.pika_main:hover .ds_caption {
	background: url('../img/menu_item_hover_bg.png');
}

/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{
	position:absolute;
	top:0px;
	left:0px;
}

.pika_back_img{
	position:relative;
	top:0px;
}

.pika_subdiv{
	position:relative;
	padding:0px;
}
.pika_subdiv img, .pika_subdiv a img{
	border:none;
}

.pika_caption{
	height:80px;
	text-align: left;
	padding:8px;
	position:absolute;
	bottom:-30px;
	left: -8px;
	width: 270px;
	z-index:100;
	font-size: 15px;
	
}


.ds_caption {
	background: url('../img/showcase_caption.png');
	width: 100%;
	margin: 1px 0px;
	padding: 3px 5px;
	text-align: right;
}

.ds_caption:hover {
	background: url('../img/menu_item_hover_bg.png');
	color:white;
}

.header {
	color: #c2c2c2;
	text-transform: uppercase;
	font-weight: bold;
}
.body {
	
	color: #848383;
}

.type {
	text-indent: 10px;
	color: #848383;
	font-size: 12px;
}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:3px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:2px;left:2px;height:456px;width:100px;}
.pika_next_hover{position:absolute;top:2px;right:2px;height:456px;width:100px;}