/*below is the stuff for the compact example*/
.pikachooseCompact{width: 616px; margin:0 auto; position: relative;}
/* This is the ul you have all your images in */
.pikachooseCompact ul {padding: 15px 4px 0px 0px; width: auto; height:299px; margin:0; overflow:hidden; position:absolute; bottom:0px; left:517px;}
.pikachooseCompact ul li{float:left; margin:12px 7px 4px 0; position: relative; background:url("thumb-circle-empty.png") top left no-repeat;}
.pikachooseCompact ul li div img {position: relative; cursor: pointer;}
/* 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: 616px; height: 301px; display: lock; position: relative;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img {position: relative;}
.pika_subdiv {position: relative;}
.pika_animationDivs {top:0px; left:0px;} /*must match top/left padding for subdiv */
.pika_subdiv img, .pika_subdiv a img{border:none;}
.pika_caption { text-align: left; position:absolute; bottom:14px; left:14px; z-index:100; color: #fff;}
.pika_caption a {color:#fff; font-weight:normal; display: block; background:#C67120 url("white_arrow.png") 7px 8px no-repeat; padding: 4px 4px 5px 16px; width:585px; width/**/:/**/565px;}
.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;}