html, body  {
	height:100%;
	margin:0;
	padding:0;	
	background: #bcbcbc url(img/mainbg.jpg) repeat-x;		
}



	
/*----- boxes -------------------------*/

.wrapper {
	background: transparent url(img/wrapperbg.png) repeat-y;
	width:984px;
	min-height:100%;
	margin:0 auto;
}

.header {position:relative; width:100%; height:315px; background: transparent url(img/header.jpg) no-repeat 17px 35px;}
.logobox { position:absolute; left:0; top:30px;}
.headerclear {height:0; clear:both;}
.headermaskmobile {display:none;}

.mainbox {margin: 20px 17px 0 17px;}



#leftbox {
	clear:left;
	float:left;
	margin: 0 20px 0 0;	
	width:200px;
	min-height:30px;
	display:inline;	
	
}


.contentbox {
	width:480px;
	float:left;	
	display:inline;
}

.contentboxwide {
	width:660px;
	float:left;	
	display:inline;
}


.contentinner {
	margin:0 10px 0 10px;
}


.sidebarbox {	
	width:240px;
	float:right;
	font-size:0.95em;
	display:inline;
}

.sidebarbox .inner {
	margin:0 10px 0 0;
	padding-left:10px;
	border-left: 1px dotted #aaaaaa;
}

.sidebarbox p {	
	line-height:140%;	
	margin: 0 0 20px 0;	
}







/*-- footer  -----------*/

.clearfooter {height:130px; clear:both;}

.footer {
	background: transparent url(img/footerbg.png) no-repeat;
	width:984px;
	height:130px;
	margin:-130px auto 0 auto;
	color: #555;
	font-size:11px;
}
.footerleft {float:left; display:inline; width:180px; margin: 20px 32px 0 34px;}
.footerright { float:left; display:inline; width:480px; margin: 20px 0 0 0;}


/*-- Menue Left  -----------*/

#menu {	
	line-height: 120%;
	width: 200px;
		
}	

#menu ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
	list-style-image: none;	
}


#menu li {	
	padding: 0 0 0 0;		
} 

#menu a:link, #menu  a:visited
{
color: #000;
text-decoration: none;
}

#menu li a {
	display: block;
	padding: 8px 0 10px 15px;
	color: #555;
	line-height: 120%;
	border-bottom: 1px solid #e4e4e4;	
	background: #ededed url(img/mhg.jpg) repeat-y;	
}


#menu li ul a {
	padding: 2px 5px 4px 25px;
	font-size:11px;	
}



#menu ul li a:hover {
	background: #fff url(img/mhghi.jpg) repeat-y;
	color: #006e34 ! important;
}

#menu ul li a.menu-current {
	background: #fff url(img/mhghi.jpg) repeat-y;
	color: #000;
}
#menu ul li .menu-parent {background-color: #eeeeee; font-weight: bold;}

#menu  .menu-current {
	font-weight: bold;
	/*background-position: left bottom;*/
}

#editthis {padding: 2px 15px; width: 170px; margin-left: 3px; font-size:10px;}	
#editthis a {display:inline; text-decoration: none; color: #000}


/* Login Box */

#showlogin {display: block; margin: 20px 0 0 10px;}
#login-box { margin-top:30px; padding:10px; border-top: 2px #9ecbb3 dotted; font-size: 10px;}
#login-box .inputfield {		
	font-size: 10px;
	padding:2px;
	border: 1px solid #9ecbb3;
	background-color: #cce7d9;
	width:100%;	
}
#login-box .loginsubmit { float:right;}








/*Topics*/
.mod_topic_loop { margin: 10px 0 10px 0; }
.mod_topic_loop img { float:left;  height:50px; width:50px; border:0; float:left; margin:4px 10px 30px 0; }
.mod_topic_loop h3.mt_title, .mod_topic_loop p {margin:0; line-height:140%;}



.mod_topic_prevnext h4 {margin: 8px 0 4px 0; }
.mod_topic_prevnext p {margin: 0px 0 0 0; height:40px; clear:left; font-size:11px;}
.mod_topic_prevnext p img { height:40px; width:40px; border:0; float:left; margin:0 6px 10px 0; }
.mod_topic_prevnext p a {font-size:11px; color:#666666; line-height:120%; font-weight:normal;}

.mod_topic_page p.topics-back {padding:0px 0 10px 23px; margin: 20px 0 ; background: transparent url(img/back-topic-bg.gif) no-repeat; font-size:14px; font-weight: bold;}



/* Mobile and not ===============================================================================================*/
#menueswitch, #menuecloser {display:none;}
#menueswitch {width:4%; height:60px; position:fixed; left:0; top:300px;}
#menueswitch img {width:100%; border:none; }



.mobiles_only {display: none;}
.nomobiles {display:block ! important;}
.desktops_only {display: block;}


/* ======================================================================
Smaller Screens */
@media screen and (max-width: 768px) {
	html, body  {background: #fff;}
	.wrapper { width:100%; background-image: none; width: 100%; overflow:hidden;}	

	
	.header { height: auto;
		background-size: 140% auto, auto;
		background-position: right 20px;		
	}
	.header img.headermask {width:140%; margin-left: -30%; }
	.logobox  {width:30%; top:15px; left:2%;}
	.logobox img {max-width:100%;}
		
	.mainbox {margin: 0 0 0 0; padding-left: 5%; }
		
	


	.contentbox {width:70%;}
	.contentboxwide {width:100%;}
	.sidebarbox {width:29%;}
	.contentinner img, .sidebarbox .inner img { max-width:100%; height: auto ! important; }
	
	.footer { width:100%; background-position: center 0;}
	.footerleft, .footerright {float:left; width:96%; margin: 0 0 0 2%;}
	
	#menueswitch, #mobilenav {display:block;}
	#menuecloser {position:absolute; top: 0; left: 0; width:100%; height:100%; XXbackground: #f00;}

	#leftbox {
		position:absolute;
		top:120px; left:0;		
		display:none;
		background: #eee;
		z-index:2000;	
	}
	
	#menu li a {
		padding: 8px 5px 8px 5px;
		font-size:14px;	
	}
	
	#menu li ul a {
		padding: 8px 5px 8px 25px;
		font-size:13px;	
	}
}

/* ======================================================================
Smaller Screens */
@media screen and (max-width: 440px) {
	.headermask {display:none;}
	.headermaskmobile {display:block; width:100%;}

	.header { 
		background: transparent url(img/header-mobile.jpg) no-repeat 0 0;
		background-size: 100% auto, auto;
		background-position: center 0;		
	}
	.logobox  {width:40%; top:20px; left:2%;}
	.logobox img {max-width:100%;}
	
	.header img.headermask {width:180%; margin-left: -50%; }
	
	.contentbox {width:100%;}
	.contentbox, .contentboxwide, .sidebarbox {width:100%; float:left;}
	.sidebarbox .inner {
		padding:20px 0 0 0;
		margin: 20px 0 20px 0;
		border-left: none;
		border-top: 1px dotted #aaaaaa;
		border-bottom: 1px dotted #aaaaaa;
}
	

}




/*-------------------------PRINT-----------------------------*/
  
@media print {

 .nopr, .header, #leftbox, .footer {display:none;}
 #mainbox {width:80%; margin-left:15%}

}


