/*  **** css sy_nitschke template responsive design | joomla 3_x | villa hunsrück : dr. nikolaus höllen 	**** */

/*   farben  

streifen header / footer :
ffffff> 	balken oben/unten

_____________________________________


farben  villa

dunkelgrün	3E7B39    

hell grün   3E7B39    3E7B39

- streifen >  logo 
- links
- h3 
- hover / current für links   	
_____________________________________


schrift  villa hunsrück   :     Lato

*/
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v23-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v23-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v23-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v23-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v23-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v23-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}


html { /* sticky footer nach james dean > http://mystrd.at/modern-clean-css-sticky-footer/ */
    position: relative; 
	min-height: 100%;
	}
	
	
body {
	font-size:0.85em;
	font-family: "Lato", Arial, sans serif;
	overflow-x:hidden;
	width:100%;
	color:#000000;
	margin: 0 0 3em; /* bottom = footer height */
}

.clear {
	float: none;
    clear:both;
	height: 1px;overflow:hidden;
	background-color: transparent;
	width: 1px;
	}
	
/*  ***** allg. links  ***** */		
a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #3E7B39;
	}

a:hover, a:focus {
	text-decoration: none;
	color: #009966;
	}
	
/*  *****  link footer internetlösungen  ***** */	
a.white {
	color: #3E7B39;
	}
	
a:hover.white, a:focus.white {
	color: #009966;
	}
	
/*  ***** weiterlesen  links  ***** */
.btn {
	font-size:0.90em;
	}

#img {
	width:100%;
	height:auto;
}

div.djslider {
	float: left;
}

#pageslide {
	/* nicht verändern > plugin > slide-menü / mobil */
    display: none;
	position: absolute;
	position: fixed;
	top: 0;
	height: 95%;
	z-index: 999999;
	/* Specify the width of your pageslide here */
    width: 200px;
	padding: 20px;
    
    /* individuelle stile der pagesslide        E6F9F9*/
    background-color: #FFF;
    -webkit-box-shadow: inset 0 0 5px 5px #3A4559;
    -moz-shadow: inset 0 0 5px 5px #3A4559;
	box-shadow: inset 0 0 5px 5px #3A4559;
	background-color: #FFFFFF;
	overflow:visible; overflow-y: scroll;
}

#pageslide ul {background:none;}

#pageslide ul li a {
	background:none;
	box-shadow:none;
	text-align:left;
}

#language {
	width:100%;
	height:auto;
	padding-top: 5px;
	padding-left: 10px;
}

.container {
	max-width:940px;
	margin:0 auto;
}

header {
	float:left;
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(../scripts/boxsizing.htc);  
	padding: 1%;
	background-color: #FFFFFF;
	}

.js .open {
	display:inline;
	float:right;
	height:39px;
	width:46px;
	text-indent:-9999px;
	background-image: url(../images/open.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 19px;
	margin-right: 0%;
	margin-bottom: 05;
	margin-left: 20px;
}

#logo {
	width:283px;
	display:block;
	height:71px;
	text-align:center;
	float:left;
	text-indent:-9999px;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-left: 1%;
}



/* *** formatierung  des vertikalen menues   nav_1  *** */

.js .menu-nav_1, .js ul.menu-nav_1, a.open, {
	  display:none;/* blendet das vertikale menü in der mobilen ansicht aus  */}

		ul.menu-nav_1 {
			list-style: none;
			padding: 0px;
			margin: 0px;
			margin-bottom:21px;
			line-height: 200%;
			}
		
		/* *** listenpunkt formate *** */
		ul.menu-nav_1 li {
				float: left;
				color: #3E7B39;
				list-style: none;
				text-indent: -2px;
				line-height: 200%;
				}
		ul.menu-nav_1 li ul {
                list-style: none;
				padding: 0px 0px 0px 0px;
				margin: 0px;
				line-height: 200%;
				}
				
		/* *** link formate   *** */
		ul.menu-nav_1 li a {
				color: #000000;
				text-decoration: none;
				padding-left: 20px;
				padding-bottom:4px;
				display: block;
				width: 215px;
				border-left-style: none;
				margin: 0px;
				line-height: 200%;
				 }
				
			/* *** link formate   >	submenue	einziger unter schied zu link formate > texteinzug > text-indent 20 px zusätzlich  *** */		
			ul.menu-nav_1 li.current ul li a, ul.menu-nav_1 li ul li.current a, ul.menu-nav_1 li ul li a {
				color: #000000;
				text-decoration: none;
				padding-left: 8px;
				padding-bottom:4px;
				display: block;
				width: 215px;
				margin: 0px;
				text-indent: 30px;
				line-height: 200%;
				}	
			
			
		/* ***  link formate hover, aktiver menuepunkt 	current	*** */
		
         ul.menu-nav_1 li.current ul li a:focus, ul.menu-nav_1 li a:hover, ul.menu-nav_1 li a:hover {
				text-decoration: none;
				color: #3E7B39;
				width: 215px;
				line-height: 200%;
				}
		
		/* *** 2. ebene aktiv > current mit einzug *** */	
		 ul.menu-nav_1 li.current ul li a:hover, ul.menu-nav_1 li.current ul li a:active, ul.menu-nav_1 li ul li.current a  {
				text-decoration: none;
				color: #3E7B39;
				width: 215px;
				text-indent: 30px;
				line-height: 200%;			
				}
				
               /* *** 2.Ebene aktiv - nicht aktive Menüpunkte*/
                ul.menu-nav_1 li ul li a {
				text-decoration: none;
				color: #000000;
				width: 210px;
				text-indent: 30px;	
				line-height: 200%;			
				}
               ul.menu-nav_1 li ul li a:hover, ul.menu-nav_1 li ul li a:active, ul.menu-nav_1 li.current ul li a:hover, ul.menu-nav_1 li.current ul li a:active {
				text-decoration: none;
				color: #3E7B39;
				width: 215px;
				text-indent: 30px;
				line-height: 200%;				
				}
	
		/* *** 1. ebene aktiv > current mit einzug *** */			
		ul.menu-nav_1 li.current a {
				text-decoration: none;
				color: #3E7B39;
				width: 215px;
				line-height: 200%;			
				}
		/* *** definiert die schriftgröße des submenüs  > ul.nav-child unstyled small*** */		
		ul.unstyled  {
				font-size:0.95em;
				}	
				
/* *** ENDE   formatierung  vertikales menue   nav_1  *** */


/* ***  link formate hover, aktiver menuepunkt 	current	*** */
		

#image_nav_container {
	float:left;
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	*behavior: url(/scripts/boxsizing.htc);
	padding-top: 1%;
	padding-right: 4%;
	padding-bottom: 0%;
	padding-left: 4%;
}

#image_nav_container img  {
	margin:2% 0;
	width:100%; 
	height:auto;
	border: 2px solid #ece9d7;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	*behavior: url(/scripts/boxsizing.htc);
}

#content {
	width:100%;
	float: right;
	text-align:left;
	padding-left: 1%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/* position:relative;   */
	padding-bottom: 3em;   /*  für abstand zum footer   */
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 2%;
	margin-left: 0%;
	*behavior: url(/scripts/boxsizing.htc);
	list-style-position: outside;
	list-style-image: url(../images/listenpunkt.jpg);
	}  	

#navbox {
	width:100%;display:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 8%;
	margin-left: 0;
	position:relative;
	text-align:left;
	font-size: 0.95em;
	font-weight: 200;
	color: #42726A;
	*behavior: url(/scripts/boxsizing.htc);
	}

footer {
	position:absolute;
	bottom:0px !important;
	float:left;
	background:#ffffff;
	width:100%;
	height:3em;
	margin: 0 auto;
	padding:0% 0% 0% 4%;  /* abstand der schrift zur box   */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	color: #333333;
	font-size: 0.95em;
	*behavior: url(/scripts/boxsizing.htc);
}

footer section {
	margin-bottom:0px;
}

footer section p {
	font-size: 0.85em;
}

@media screen and (min-width:420px) {

	body {font-size:0.9em;}
	#navbox {display:none;}
	footer {height:3em;}

}

@media screen and (min-width:500px) {

	body {font-size:0.9em;}

/*   ab  hier wird der menü-button ausgeblendet & menü wieder angezeigt   */	
	#pageslide, .open {display:none;}
	.js a.open {display:none;}
	.js #menu-nav_1 {display:none;}
	
	#content section a {
		padding:1%;
	}
	
	.js .open {
	margin-top: 40px;
}
	
	#logo {
	width:283px;
	display:block;
	height:71px;
	text-align:center;
	float:left;
	text-indent:-9999px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0%;
	}
	
	#navbox {
	display:inline;
	float:left;
	text-align:left;
	width:33%;
	padding-top: 2%;
	padding-right: 6%;
	padding-bottom: 0%;
	padding-left: 0%;
	}
	
				
/*   ab  hier content breite 66%    */
	#content { width:66%;  
	padding:2.5% 2.5% 2.5% 2.5%;}


}

@media screen and (min-width:550px) {
	
	#image_nav_container {
		padding-top:1%;
	}
	
	body {font-size:0.93em;}
	
		/* *** zeilenbastand in navigation für desktop geringer als mobil *** */
		ul.menu-nav_1 {	
				line-height: 150%;		
			}
		ul.menu-nav_1 li {
				line-height: 150%;	
				}
		ul.menu-nav_1 li ul {
				line-height: 150%;	
				}
		ul.menu-nav_1 li a {
				line-height: 150%;	
				 }	
		ul.menu-nav_1 li.current ul li a, ul.menu-nav_1 li ul li.current a, ul.menu-nav_1 li ul li a {
				line-height: 150%;	
				}	
         ul.menu-nav_1 li.current ul li a:focus, ul.menu-nav_1 li a:hover, ul.menu-nav_1 li a:hover {
				line-height: 150%;	
				}
		 ul.menu-nav_1 li.current ul li a:hover, ul.menu-nav_1 li.current ul li a:active, ul.menu-nav_1 li ul li.current a  {		
				line-height: 150%;	
				}
         ul.menu-nav_1 li ul li a {	
				line-height: 150%;			
				}
         ul.menu-nav_1 li ul li a:hover, ul.menu-nav_1 li ul li a:active, ul.menu-nav_1 li.current ul li a:hover, ul.menu-nav_1 li.current ul li a:active {	
				line-height: 150%;		
				}		
		 ul.menu-nav_1 li.current a {	
				line-height: 150%;		
				}



}

@media screen and (min-width:620px) {
	
	header {
		padding-top:5px;	
		padding-bottom:0;	
	}
	

	#image_nav_container {
		padding-bottom:0;	
	}
	
	#image_nav_container img {margin:1% 0 0 0%;}
	
	#content {padding:1% 1% 3% 1%;} 
	
}

@media screen and (min-width:720px) {

	body {font-size:0.95em;}
	#navbox {width:25%}
	#content {width:75%;}
	.wrapper {padding-top:26px;}
	#logo {
	margin-left: 3%;
	}
	
	
	#image_nav_container img {margin:0% 0 0%;}

	
	footer section {
		
		margin-right:4%;
		float:left;	
	}
	
	footer section:last-child {margin-right:0;}
	
}

@media screen and (min-width:820px) {

	
	#image_nav_container img {
		float:left;
		width:100%;
		margin:0% 0 3%;
	}
  
}

@media screen and (min-width:960px) {
	
	body {font-size:0.98em;}
	
	#logo {
	margin-left: 2%;
	}
	
	#image_nav_container img {
		margin:0% 0 4%;
	}

	footer {
	padding:0% 0% 0% 2%;  /* abstand der schrift zur box   */
}

}


@media screen and (min-width:1080px) {
	

	#logo {
	margin-left: 1%;
	}
	
	footer {
	padding:0% 0% 0% 1%;  /* abstand der schrift zur box   */
}

}


/*  ***** RESERVIERTE KLASSEN  ***** */


			
/* **** content | inhalte formate **** */
		
		.klein {font-size:0.82em;}
		
		
		a.blogsection:link,
		a.blogsection:visited {
			color: #3E7B39;
			text-decoration: underline;
		}
		.small {
			color: #999999;
			font-size: 0.80em;
		}
		.createdate {
			height: 15px;
			padding-bottom: 10px;
			color: #999999;
			font-size:0.8em;
		}
		.modifydate {
			height: 15px;
			padding-top: 10px;
			color: #999999;
			font-size:0.8em;
		}
		span.article_seperator {
			height:20px;
			background: #FFFFFF;
			width: 300px;
		}
		div.mosimage_caption {
			margin-top: 10px;
			margin-left: 5px;
			background: #ffffff;
			padding:0px;
			color: #666;
			font-size:0.8em;
			width: auto;
		}
		.back_button {
			float: left;
			text-align: center;
			font-size:0.8em;
			width: auto;
			padding: 0px 10px;
			line-height: 20px;
			margin: 1px;
		}

		.readon{
			text-decoration: none;		
		}
		
		/*  breadcrumbs  */
		.pathway {
			padding-left: 5px;
			}
		
		/*  pdf button  */
		.buttonheading {
			background-color: #FFFFFF;
			font-family: Open Sans, Verdana,Arial, Helvetica, sans-serif;
			font-size:90%;
			color: #3E7B39;			
		}

		
		
		#content div.contentheading, #content div.contentpane, 
		h1 {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.15em;
		margin-bottom:0.4em;
		color: #3E7B39;
		font-weight: 400;
		}	
		
		h2, h2.item-title {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.15em;
		margin-bottom:0.4em;
		color: #3E7B39;
		font-weight: 400;
		}
		
		
		/*  h3 grau  */
		h3 {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.00em;
		margin-bottom:.8em;
		color: #464646;
		font-weight: 400;
		}	
		
		h4, h5, h6 {
		font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.95em;
		margin-bottom:.4em;
		color: #464646;
		font-weight: 400;
		}
		
		
		div.contentpane th {
					font-weight: normal;
		}
		
		div.contentpane input.button {
					margin-bottom: 20px;
		}
	
		.inputbox {
					width: 200px;
					border: 1px dotted #3E7B39;
					font-size: 0.8em;
					margin-bottom:2px;
					background-color: #F0F7F4;
		}
		
		.button {
					border: 1px dotted #3E7B39;
					background-color: #FFFFFF;
					font-family: Open Sans, Verdana,Arial, Helvetica, sans-serif;
					font-size: 0.8em;
					color: #3E7B39;
		}

		
		.contentheading {
					font-size:0.95em;
					letter-spacing: 1px;
					font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
					font-weight: 100;
					color: #3E7B39;
					padding-top: 5px;
		}
		
		/************ weblinks ********************/
		
		.category-desc base-desc {
					font-size:90%;
					font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
					font-weight: 100;
					color: #3E7B39;
					padding-top: 20px;
		}
		


/*  **** ende css 	sy_nitschke_joomla!_3x_responsive 	**** */