/*
CSS Name: Shadow Design 2 with CSS3
Description: Gives your scrollGallery a shadow style. Lines of description are limited depending on the font-size.
Author: Benedikt Morschheuser
Version: 1.0
*/

/*defaults*/

div.bmo_scrollGallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image a{
	width:100%;	/*dont use padding or margins here, use the % width and hight to reduce the size of the inner images*/
	height:100%;
}

div.bmo_scrollGallery div.bmo_the_gallery_thumb_area{
	background-color:#ffffff;
    -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 5px 3px 2px #555;
	-webkit-box-shadow: 5px 3px 2px #555;
	box-shadow: 5px 3px 2px #555;
}
div.bmo_scrollGallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image a img{
	max-width:85%;
	max-height:85%;
}
	

div.bmo_scrollGallery div.bmo_the_gallery_images div.bmo_the_gallery_image img{
	background: url("../imgs/ajax-loader.gif") no-repeat scroll center center #ffffff;
	/*styles to center images*/
	vertical-align:top;
	display:inline;
	max-height:82%; /*dont use padding or margins here, use the % width and hight to reduce the size of the inner images*/
	max-width:95%;
    
    margin-top:2px;
    padding:5px;
    -moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	-moz-box-shadow: 10px 7px 5px #555;
	-webkit-box-shadow: 10px 7px 5px #555;
	box-shadow: 10px 7px 5px #555;
}

div.bmo_scrollGallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption{
    min-height:15%;
    bottom:0px;
}

div.bmo_scrollGallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption div.bmo_the_gallery_caption_text{
    background-color:#ffffff;
    color:#000;
    text-align:center;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	padding:2px;
	-moz-box-shadow: 5px 3px 2px #555;
	-webkit-box-shadow: 5px 3px 2px #555;
	box-shadow: 5px 3px 2px #555;
}

div.bmo_scrollGallery a.bmo_the_gallery_image_arrows{
	display: block;
	width:50%;
    height: auto;
    min-height: 82%;
    outline: medium none;
    overflow: hidden;
    position: absolute;
    top: 0;
	cursor:pointer;
}

div.bmo_scrollGallery div.bmo_the_gallery_thumb_area{
	margin:10px 0px;	
	max-width:96%;
	margin-left:2%;
}
div.bmo_scrollGallery.vertical div.bmo_the_gallery_thumb_area{
	margin:0px 10px;
	max-height:96%;
	margin-bottom:2%;
}

/*schrift unter bild:
img max- height:80%;
zusätzlich auf img ein paading-bottom. Das geht!

oder das vertical align auf top setzen und max-heit auf 70% und caption mit top:70% possitionieren
breite der caption dann 100% und mit text-aling center text zentrieren
*/