@charset "UTF-8";

/* CSS Document */



/*Now the styles*/

* {

	margin: 0; 

	padding: 0;

}





/*Time to apply widths for accordian to work

Width of image = 640px

total images = 5

so width of hovered image = 640px

width of un-hovered image = 40px - you can set this to anything

so total container width = 640 + 40*4 = 800px;

default width = 800/5 = 160px;

*/



.accordian {

	width: 950px; height: 341px;

	overflow: hidden;

	float:right;

	

	/*Time for some styling*/

	margin: 40px auto;



}



/*A small hack to prevent flickering on some browsers*/

.accordian ul {

	width: 2000px;

	/*This will give ample space to the last item to move

	instead of falling down/flickering during hovers.*/

}



.accordian li {

	position: relative;

	display: block;

	width: 125px;

	float: left;

	

	border-left: 1px solid #888;

	

	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

	

	/*Transitions to give animation effect

	transition: all 0.5s;

	-webkit-transition: all 0.5s;

	-moz-transition: all 0.5s;*/

	/*If you hover on the images now you should be able to 

	see the basic accordian*/

}



/*Reduce with of un-hovered elements*/

.accordian ul:hover li {width: 40px;}

/*Lets apply hover effects now*/

/*The LI hover style should override the UL hover style*/

.accordian ul li:hover {width:720px;}





.accordian li img {

	display: block;

}



/*Image title styles*/

.image_title {

	background: rgba(0, 0, 0, 0.5);

	position: absolute;

	left: 0; bottom: 0;	

	width: 1000px;	



}

.image_title a {

	display: block;

	color: #fff;

	padding: 5px;

	font-size: 13px;

}