/* images are 280 x 420 pixels */
/*body {
	background-color: #999;
	color: white;
	padding-top: 20px;
	font-family: helvetica;
	font-size: 12px;
	text-align:  center;
}
*/

.pikachoose {
	width: 870px;
	height: 728px;
	/*margin: 0 auto 50px auto;*/
	margin: 0 0 20px 0;
	text-align: left;
}

/* This is the ul you have all your images in */
.pikachoose ul {
	padding-left: 0;
	width: 870px;
	height: 380px;
	margin: 5px 0;
	overflow: hidden;
}

.pikachoose ul li {
	float:  left;
	border: 1px solid #555;
	padding: 2px;
	background: #fff;
	margin: 0 6px 4px 0;
	position: relative;
	overflow: hidden;
}

.pikachoose 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: 870px;
	height: 428px; /* this helps to leave space before the bottom icons */
	display: block;
	position: relative;
	text-align: center;
	overflow: hidden;
}

/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img {
	margin: 0 auto;
	position: relative;
	top: 2px;
	left: 2px;
	text-align: center;
	overflow: hidden;
}

.pika_back_img {
	visibility: hidden;
	height: 0px,width: 0px;
	position: relative;
	top: 0px;
}

.pika_subdiv {
	position: relative;
	height: 422px; /* this helps to leave space before the bottom icons */
	border: 1px solid #666;
	background: #fff;
	padding: 2px;
	margin-bottom: 4px;
	overflow: hidden;
}

.pika_subdiv img, .pika_subdiv a img {
	border: none;
}

.pika_caption {
	width: 864px;
	height: 4em;
	padding: 0 0 0 6px;
	/*margin: 344px 0 0 0;*/
	text-align: left;
	position: absolute;
	/*bottom: 77px;*/
	left: 3px;
	background: url('white.png') top left;
	top: 372px;
	font-size: 10pt;
	line-height: 13pt;
	vertical-align: text-bottom;
}

.pika_caption a {
	color: #309;
}


.pika_play {
	position: absolute;
	z-index: 1;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	top: 5px;
}

.pika_play a {
	position: relative;
	margin-left: auto;
	cursor: pointer;
	display:  block;
	width: 50px;
	height: 50px;
	background: url('play.png') top center no-repeat;
}

.pika_play a {
	position: relative;
	margin-left: auto;
	cursor: pointer;
	display:  block;
	width: 50px;
	height: 50px;
	background: url('pause.png') top center no-repeat;
}


.pika_navigation a {
	font-size:  12px;
	 text-decoration:  none;
}

.pika_navigation a: hover {
	text-decoration:  underline;
}

.pika_navigation {
	padding-top: 10px;
	clear: both;
	text-align: center;
}


/* if you want to 'hide' these jus make their height and width 1px  - was :  height: 456px;
	width: 100px;
	*/
.pika_prev_hover {
	position: absolute;
	top: 5px;
	left: 5px;
	height: 1px;
	width: 1px;
	background: url('rewind.png') top left no-repeat;
}

.pika_next_hover {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 1px;
	width: 1px;
	background: url('fastf.png') top right no-repeat;
}
