html { background:#333 !important ; background-image:none !important; }
.bodycontainer { background:#333 !important ; }
.footer { position:absolute; bottom:0px;}

/* header */
/*
.topheader.container{ position:absolute; width:100%; z-index:100000; background: none repeat scroll 0 0 rgba(255,255,255,0.5) ;   border:1px solid green;  }
.topheader .logo { position:absolute; left:1px; width:10%; height:100%; background: url(/element/images/index/logo_word_small.png) no-repeat; background-size:100%; border:1px solid red; background-position: center;  }
*/
.topheader { position:absolute; display:table; width:100%; z-index:100000; background: none repeat scroll 0 0 rgba(255,255,255,0.5) ;    }
.topheader .logo { text-align:left; }
.topheader .logo img { width:10%; max-width:50px; margin:1%}

ul#header_menu {position:absolute; right:0px; top:0px; height:100%}
ul#header_menu { list-style-image:none; list-style-type:none; padding:0px; margin:0px;  }
ul#header_menu  > li { float:left; height:100%}
ul#header_menu  > li:hover { color:#fff;  background: none repeat scroll 0 0 rgba(100,100,100,0.5);    }
ul#header_menu  > li > a {  
	font-family:Helvetica; font-weight:bold; 
	color:#333;  
	
	padding:0px 10px;
	text-transform:uppercase; 
	white-space:nowrap;
	font-size:1.5vw;
	position:relative;
	top:23%;
	
}


/*--- DROPDOWN 	---*/
ul#header_menu > li > ul {
	display:none;
}
ul#header_menu > li:focus > ul, ul#header_menu li:hover > ul {
	display:block;
}
ul#header_menu ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
	/*width:100%;*/
	padding:0px 0px;
	width:100px;
	
}
ul#header_menu ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	width:100%;
}

ul#header_menu li:hover  li > a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    color:#fff;  background: none repeat scroll 0 0 rgba(100,100,100,0.5);    
}

ul#header_menu li > ul > li > a { 
    text-decoration:none;
	line-height:30px;
	width:100%;
	display:block;
	ppadding:0px 10px;
}
ul#header_menu li:hover ul > li  > a:hover{
    color:#fff;  background: none repeat scroll 0 0 #333;    
	

}

.home-sermon-index .date {width:100px }
.home-sermon-index .title { min-width:200px; }
.home-sermon-index .peacher {width:150px }
.home-sermon-index .sermon {width:150px }
.home-sermon-index .lang {width:100px }
.home-sermon-index .buttons {}

.home-sermon-index  .sermons > .div_row{
	border-bottom: 0px solid;
	padding:0;
}


		#viewport{
			
			width:100%;
			position:relative ;
		}
		
		#viewport img {
			
			margin: 0 auto;
			display:block;
		}
		#viewport a { color:#999	}
		#viewport a:hover { color:#fff	}
		
		
		
		/*
		.control.sharetools{
			position:absolute;
			bottom:1px;
			right:1px;
			font-size:1.5vw;		
		}
		.control.sharetools .download_print, .control.sharetools .facebook {
			padding:0px 5px;
			bborder:1px solid green
		}
		*/
		
		
/* -------------------------------------------- */


.photo_album {}
.panel { border:0px solid red; 	margin-left:80px; margin-right:80px;  display:inline-table; }
.panel .photo {  float:left; width:auto;  }
.panel .photo img {width:100px; }

.panel .thumbs { border:0px solid #222222;  	overflow-y: hidden; overflow-x:hidden; }
.panel .thumbs img { height:22%;; margin:5px;}
.panel .thumbs img:hover { border:3px solid #FFBF00; margin:2px; }
.panel .thumbs img.selected { border:3px solid #D96C00; margin:2px; }

.panel .details { border:0px solid yellow; height:100%;  width:30%; float:right;  }
.panel .details > div { text-align:left; margin-right:5%; margin-left:5%; margin-bottom:20px;} 
.panel .details .id {font-size:15px; color:#B9B9C8;}
.panel .details .description {font-size:20px; color:#B9B9C8;}
.panel .buttons { border:0px solid #ccc;  }
.panel .buttons img { 	filter:alpha(opacity=30);	opacity: 0.3;	}
.panel .buttons img:hover {  filter:alpha(opacity=80);	opacity: 0.8;	}


.control img:hover, img.control:hover {  filter:alpha(opacity=80);	opacity: 0.8;	}
.control img, img.control { 	filter:alpha(opacity=30);	opacity: 0.3;	}

.control.arrow-left, .control.arrow-right{
	position:absolute;
	width:5%;
	top:50%;
	
}
.control.arrow-left {
	left:2px;
}
.control.arrow-right {
	right:2px;
}

.control.albumtitle {   font-size:2vw; border:0px solid red; color:#B9B9C8; position:absolute; top:0px; left:80px;}
.control.albumbuttons {    position:absolute; top:0px; right:80px;}


.control.fullscreenbuttons { 
	border:0px solid red; 
	background:black;  
	font-size:2vw; 
	color:#B9B9C8; 
	position:absolute; 
	top:0px; 
	left:50%;
	transform: translate(-50%, 0%);
	padding:5px 20px ;
}
.control.fullscreenbuttons .msg {
	display:inline-block;
	min-width:100px;
	color:$fff;
}