/*
CSS Name: Basic default design
Description: Only needed styles are applied - Image design by Theme.
Author: Benedikt Morschheuser
Version: 1.0
*/

/*defaults*/
div.bmo_the_gallery div.bmo_the_gallery_thumb_area{}
div.bmo_the_gallery div.bmo_the_gallery_image_area{}

div.bmo_the_gallery div.bmo_the_gallery_thumbs{}
div.bmo_the_gallery div.bmo_the_gallery_images{}

div.bmo_the_gallery div.bmo_the_gallery_image{}
div.bmo_the_gallery div.bmo_the_gallery_image a{}
div.bmo_the_gallery div.bmo_the_gallery_image a:hover{}
div.bmo_the_gallery div.bmo_the_gallery_image img, div.bmo_the_gallery div.bmo_the_gallery_image a img{}
div.bmo_the_gallery div.bmo_the_gallery_image a:hover img{}
div.bmo_the_gallery div.bmo_the_gallery_image div.bmo_the_gallery_caption{position: absolute; bottom:0px;}

div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image{}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image{}
div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image a{}
div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image a img{}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image img{}
div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image div.bmo_the_gallery_caption{display:none;}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption{}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption div.bmo_the_gallery_caption_text{}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption div.bmo_the_gallery_caption_text p.caption_title{}

/*theme scrollgallery basic*/
div.bmo_the_gallery div.bmo_the_gallery_thumb_area{
	/*thumbs scrollable*/ 
	width: 700px; /*will be changed by js*/ 
    height: 100px;  /*will be changed by js*/ 
    position: relative;  
    overflow: hidden;
}
div.bmo_the_gallery div.bmo_the_gallery_image_area{
	/*imgs scrollable*/ 
	width: 700px;  /*will be changed by js*/ 
    height: 400px;  /*will be changed by js*/ 
    position: relative;  
    overflow: hidden;
	
	cursor:pointer;
}

div.bmo_the_gallery div.bmo_the_gallery_thumbs{
	position: absolute;  
    clear: both;  
    height: 100px; /*will be changed by js*/ 
    width: 10000px;  /*will be changed by js*/ 
    left: 0;  
    top: 0; 
	
	margin: 3px 0px;
}
div.bmo_the_gallery div.bmo_the_gallery_images{
	position: absolute;  
    clear: both;  
    height: 400px;  /*will be changed by js*/ 
    width: 10000px;  /*will be changed by js*/ 
    left: 0;  
    top: 0;  
}

div.bmo_the_gallery div.bmo_the_gallery_image{
	float: left;
	overflow:hidden;
	text-align:center;
}
div.bmo_the_gallery div.bmo_the_gallery_image a{}
div.bmo_the_gallery div.bmo_the_gallery_image a:hover{}
div.bmo_the_gallery div.bmo_the_gallery_image img, div.bmo_the_gallery div.bmo_the_gallery_image a img{
	background: url("../imgs/ajax-loader.gif") no-repeat scroll center center transparent;
	/*styles to center images*/
	vertical-align:middle;
	display:inline;
	max-height:96%; /*dont use padding or margins here, use the % width and hight to reduce the size of the inner images*/
	max-width:96%;
}
div.bmo_the_gallery div.bmo_the_gallery_image a:hover img{}
div.bmo_the_gallery div.bmo_the_gallery_image div.bmo_the_gallery_caption{
	position: absolute; 
	bottom:1%;
	left:0px;
	width:100%;
	text-align:center;
}
div.bmo_the_gallery div.bmo_the_gallery_image div.bmo_the_gallery_caption div.bmo_the_gallery_caption_text{}

div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image{
	width:100px;	/*will be changed by js*/ 
	height:100px;	/*will be changed by js*/ 
	line-height:100px;/*will be changed by js*/
}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image{
	width: 700px;  /*will be changed by js*/ 
    height: 400px;  /*will be changed by js*/ 
	line-height:400px;/*will be changed by js*/
}
div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image a{
	display:block;
	width:96%;	/*dont use padding or margins here, use the % width and hight to reduce the size of the inner images*/
	height:96%;
	line-height:100px;/*will be changed by js*/
	text-align:center;
	overflow:hidden;
}
div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image a img{}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image img{}
div.bmo_the_gallery div.bmo_the_gallery_thumbs div.bmo_the_gallery_image div.bmo_the_gallery_caption{display:none;}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption{overflow:hidden;}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption div.bmo_the_gallery_caption_text{
	display:inline-block;
	background-color:#FFF;
    color:#000;
	padding:2px 4px;
    font-size:0.8em;
    filter: alpha(opacity=85);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    opacity:0.85;
    -moz-opacity: 0.85; 
    zoom: 1;
}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption div.bmo_the_gallery_caption_text p.caption_title{
    font-weight:bold;
    margin:0px;
}
div.bmo_the_gallery div.bmo_the_gallery_images div.bmo_the_gallery_image div.bmo_the_gallery_caption div.bmo_the_gallery_caption_text p{
    margin:0px;
}
/*nur bei scrollgallery*/
div.bmo_the_gallery a.bmo_the_gallery_image_arrows, div.bmo_the_gallery a.bmo_the_gallery_thumb_arrows{
	display: block;
	width:50%;
    height: auto;
    min-height: 100%;
    outline: medium none;
    overflow: hidden;
    position: absolute;
    top: 0;
	cursor:pointer;}
div.bmo_the_gallery a.bmo_the_gallery_image_arrows.arrow_prev{background: url("../imgs/prev_button3.png") no-repeat scroll left center transparent; left: 0;}
div.bmo_the_gallery a.bmo_the_gallery_image_arrows.arrow_next{background: url("../imgs/next_button3.png") no-repeat scroll right center transparent; right: 0;}

div.bmo_the_gallery a.bmo_the_gallery_thumb_arrows{width:40px;}
div.bmo_the_gallery a.bmo_the_gallery_thumb_arrows.arrow_prev{background: url("../imgs/prev_button3.png") no-repeat scroll left center transparent; left: 0;}
div.bmo_the_gallery a.bmo_the_gallery_thumb_arrows.arrow_next{background: url("../imgs/next_button3.png") no-repeat scroll right center transparent; right: 0;}
div.bmo_the_gallery a.bmo_the_gallery_thumb_arrows.arrow_up{  background: url("../imgs/up_button3.png")   no-repeat scroll center top transparent; top: 0; 
width:100%; min-height:0px; height:40px;}
div.bmo_the_gallery a.bmo_the_gallery_thumb_arrows.arrow_down{background: url("../imgs/down_button3.png") no-repeat scroll center bottom transparent; top:auto; bottom: 0; width:100%; min-height:0px; height:40px;}

/*vertical*/
div.bmo_the_gallery.vertical div.bmo_the_gallery_thumb_area{
	/*thumbs scrollable*/ 
	width: 100px; /*will be changed by js*/ 
    height: 700px;  /*will be changed by js*/ 
	float:left;
}
div.bmo_the_gallery.vertical div.bmo_the_gallery_image_area{
	float:left;
}
div.bmo_the_gallery.vertical div.bmo_the_gallery_thumbs{
    height: 10000px; /*will be changed by js*/ 
    width: 100px;  /*will be changed by js*/  
	
	margin: 0px 3px;
}
div.bmo_the_gallery.vertical div.bmo_the_gallery_thumbs div.bmo_the_gallery_image{
	float: none;
}

/*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
*/