html, body { 	
	background: #f0f0f0 url(img/bodybg.jpg) repeat-x fixed;
	margin: 0; padding: 0;
	height:100%;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.maxw {width:100%; max-width: 1100px;}

.bodybox { /* Holds the page items in place */	
	min-height:100%;
	margin: 0 auto 0 auto;
	padding: 0;
	XXbackground: transparent url(img/mainbg.png) repeat-y;
	background-color: #f0f0f0;
}

.noleftmenu .bodybox  {background: #f0f0f0 url(img/bauplan2.gif) no-repeat left 160px;}

/*Bereich Logo + Top Menue */
.headerbox {height:150px; margin:0 0 0 0px; position:relative;}

.toggleMenu {display:none;}

/*Top left*/
.logobox {width: 20%; height:150px; float:left; background: #fff } /*XXurl(img/logo.gif) no-repeat;*/
.logobox a.logo {width: 100%; XXheight:143px; display:block; font-weight: normal; font-size:18px; color: #fff; text-decoration: none; overflow:hidden;}
.logobox a.logo span {display:block; height:auto; margin:30px 0 0 10px; }
.logobox img {max-width:100%; height:auto;}

/*Top Menue*/
#menuebox {width: 80%; height:150px; float:left; background: #fff url(img/header-giebel.jpg) no-repeat;} 


/*Bereich Suche + Breadcrumbs */
.subheaderbox {background-color: #666666; width: 100%; height:30px; margin:0 0 30px 0px;}
.subheaderbox .rightheaderbox {width: 170px; float:right; text-align:right;}
.subheaderbox .rightheaderbox a {color:#fff;  text-decoration: none; }
.subheaderbox .rightheaderbox img  {
	vertical-align: middle;
}

/* Search Box */

.search_box {
	float:left;	
	width: 20%;
	XXbackground-color: #f0f;
}

.search_box .searchstring {
	margin:5px 0 0 10px;
	width:70%;
	border: 1px solid #505567;
	background-color: #f2f3f8;
	font-size:12px;
	padding:2px;
}
.search_box .submitbutton {
	vertical-align: top; margin:0 0 0 0; 
}





/*LINKS*/





#leftbox {
	margin-left: 0px;
	width:20%;
	float:left;
	display:inline;
}

#leftbox .inner {margin: 60px 10px 20px 10px; min-height:200px;}


.leftmenu {margin-top:3px; border-top: 2px #ddd solid;}
.leftmenu ul, #footermenu ul  {margin:0; padding:0;}
.leftmenu ul li, #footermenu ul li {margin:0; list-style-type: none; list-style-image: none;}
.leftmenu ul li a, #footermenu ul li a {
	margin:0;
	display:block;
	font-size:14px;
	padding:2px 0 3px 10px;
	line-height: 160%;
	XXfont-weight: bold;
	color: #666666;
	text-decoration: none;
	border-bottom: 1px #ddd solid;
	background-color:#eee;
	
}

.leftmenu ul li ul li a, #footermenu ul li ul li a { background-color:#fff; font-size:12px; padding:2px 0 3px 20px;}
.leftmenu ul li ul li ul li a { background-color:#fff; font-size:11px; padding:2px 0 3px 30px;}

.leftmenu ul li a:hover, .leftmenu a.menu-parent {color:#000; background-color:#e6ede0; XXtext-shadow: 0px 1px 1px #666; font-weight: bold;}
.leftmenu  a.menu-current {color:#569e21; background-color:#d3e0c9; XXtext-shadow: 0px 1px 1px #666; font-weight: bold;}

.noleftmenu .leftmenu {border-top:none;}

.leftmenu .uebersicht {background:#d7edf1 url(img/print.png) no-repeat right center;}
.leftmenu .uebersicht.menu-current {background-image:none;}


#footermenu {display:none;}
#footermenu ul li a {	font-size:16px; padding:4px 0 6px 10px;}
#footermenu ul li ul li a {	font-size:15px; padding:4px 0 6px 20px;}

/*RECHTS ALLES*/
.mainbox {width:79%;  float:right; }


/*Breiten ändern:
gesamt: .mainbox: 889px
.content = mittlerer Bereich
#rightbox = rechte Box
770 = 508 + etwas abstand + 240
*/

.content { /* main content */	
	float: left;
	display:inline;
	margin-left: 1.5%;
}

.contentwide {width:96%;}
.contentnarrow {width: 66%;}



#rightbox {
	width: 30%;	
	float: right;
	display:inline;
	border-left:2px #fff solid;
	font-size:94%;
	

}
#rightbox .inner { margin: 0 10px 0 10px;}
#openrightboxswitch, #closerightboxswitch {display:none;}


.clearcontent {height:100px; clear:both; }

.footerbox {margin: -100px auto 0 auto; height:100px; font-size:11px; color: #999;}
.footerbox .left {width: 20%; margin:15px 0 0 2%; float:left;}
.footerbox  .center {width: 75%; margin-top: 15px; margin-left: 1%; float:left; XXbackground-color:#f0f; text-align:justify;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
.breadcrumbs {
	width: 79%; height:30px; float:left; 	
	line-height:100%;
	margin: 0 0 10px 0;
	padding: 0;
	color: #eee;
	XXclear:both;	
}

.innerbc {
	font-size:14px;
	margin:10px 0 0 20px;
	width: 560px;
	float:left;
}
.breadcrumbs .innerbc span {
	background: transparent url(img/bclink.gif) no-repeat; 
	padding: 6px 2px 0px 12px; font-weight: normal; }
	
.breadcrumbs .innerbc a {
	color: #a5dd6e;
	padding:1px;
	border-bottom: 1px dotted #fff;
	text-decoration: none;
}
.breadcrumbs .innerbc a:hover {border-bottom: 1px solid #fff;}
	
.breadcrumbs .innerbc .menu-current a {
	color: #a5dd6e;
	font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	####	Header Menu #####
	#######################

	Horizontal Drop-Down Menu based off :
	http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu, #nav2 ul, #nav2 ul li {
	list-style-type: none;
	list-style-image: none;
	margin: 0px;
	padding: 0px;
}

#nav {
	float:left;	
	height: 150px;	
	border: 0;	
	padding:0;
	border-left:1px #ddd solid;
}
#nav ul,  #nav2 ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: auto;
	position: relative;
	list-style-image: none;
}

/* Root Level Link Formatting */
#nav ul li {float: left; color: #fff; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none;}
#nav ul li a {display: block; text-shadow: 1px 2px 8px #000; text-shadow: 1px 4px 4px #000; font-size: 16px; border-right:1px #f0f0f0 solid; color: #fff; text-decoration: none; font-weight: bold; }
#XXnav ul li a span {display:block; padding: 126px 30px 4px 20px; }
#nav ul li a span {display:block; padding: 126px 10px 4px 10px; }
/* Root Level link hover */
#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current, #nav a.menu-parent {color: #fff; background: transparent url(img/atopbg.png) ; }


/*Current page Customisations*/
#nav a.menu-current		{font-weight: bold;}



/* 2nd Child menu */
#nav  li ul {position: absolute; width: 190px; margin: -3px 0 0 0; padding-top:10px; display: none; text-transform: none; border-bottom: 1px solid #fff; font-size: 12px; 	background: #6f9059 url(img/ulbg1.jpg) no-repeat right 0px;}
#nav  li ul li {text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;  }
#nav  li ul li a {width: 190px;  height:auto; text-shadow: 0px 1px 2px #444; margin:0; padding: 0; color: #fff; border-top: 1px solid #fff; font-weight: normal; font-size: 14px; background: none;}
#nav  li ul li a span {display:block; padding:4px 0 4px 20px; }

/* 2nd Child link hover */
#nav  li ul a:hover,  #nav  li ul a.menu-current { background-color: #569e21;}
#nav  li ul a.menu-parent {background: #7290a7 url(img/navbgl1parent.gif) right 0px; color:#fff;}

/* Show and hide */
#nav  li:hover ul, #nav  li a:focus ul, #nav  li.subMenu ul {display: block;}
#nav  li ul ul { display: none;}
#nav  li:hover ul ul, #nav  li.subMenu ul ul {display: none;}
#nav  li:hover>ul, #nav .XXmenu li li:hover>ul, #nav .XXmenu li.subMenu>ul, #nav  li li.subMenu>ul {display: block;  z-index: 1000;}


/* 3rd Child Menu Appreances 
#nav  li ul li ul	{ width: 160px; margin: 10px 0 0 -40%; z-index: 9999; }
#nav  li ul li ul li	{width: 160px;}
#nav  li ul li ul li a 	{ width: 160px;}
*/
#XXnav .menu li ul li ul {display:none;}

/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
	position: absolute;
	top: 1px;
	left: 100%;
}



/* Better: */
#nav li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}







/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#suggestbox {
	z-index:1000;
	width:180px;	
	position: absolute;
	float:left;
	clear:both;		
}
#suggestbox ul {width: 180px; margin: -5px 0 0 20px;}
#suggestbox ul, #suggestbox li {
	list-style-type: none;
	list-style-image: none;	
	padding: 0 0 0 0 ;
	font-size:11px ;
	line-height: 120%;
	text-align: left;		
}
#suggestbox ul li a {
	display:block;
	padding: 0 10px 0 15px; 
	text-decoration: none;
	margin:0; 
	font-weight:normal;
	font-size:11px;
	line-height: 120%;
	overflow:hidden;
}
#suggestbox ul li {background: transparent url(img/suggestli.png) repeat-y;} 
#suggestbox ul li.suggestdivide {font-size:5px;}
	
#suggestbox ul li.suggesttop {
	height:30px;
	background: transparent url(img/suggesttop.png) no-repeat;
} 
#suggestbox ul li.suggestbottom {height:15px; background: transparent url(img/suggestbottom.png) no-repeat;} 



/* Login Box */

#showlogin {display: block; margin: 20px 0 0 10px;}
#login-box { margin-top:30px; padding:10px; border-top: 2px #505567 solid; font-size: 10px;}
#login-box .inputfield {		
	font-size: 10px;
	padding:2px;
	border: 1px solid #505567;
	background-color: #f2f3f8;
	width:100%;	
}
#login-box .loginsubmit { float:right;}


#aprevnext {display:none;}



/*old foldergallery ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.rootparent2 {}

ul.photostyle {
    list-style: none;
    list-image: none;
    margin: 0 0 5px 0;
    padding: 0;
}

.rightbox ul.photostyle li {
    margin: 3px 0 15px 0;
}

ul.photostyle {
    list-style: none;
    list-image: none;
}

ul.photostyle li {
    list-style: none;
    list-image: none;
    float: left;
    margin: 3px 0 15px 20px;
    padding: 0px;
}


.photostyle img {
    padding: 2px;
    XXborder: 2px #9db2b9 solid;
    -XXmoz-border-radius: 5px;
    -XXwebkit-border-radius: 5px;
    border: none;
    padding: 0;
	max-width:100%;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	Custom Classes (Re-useables)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
/*  Float containers fix: */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*  \*/
* html #clearfix {
	height: 1%;
}
/*  */

.stealth {visibility:hidden; display:none;} /* hides from normal css enabled browsers */

#nav2remove {display:none;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	Module udn zeug
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.helplink {float:right;}

.bauberater {width: 49%; height: 120px; float:left}
.bauberater .inner {width: 90%; background-color:#fff; padding: 10px; }
.bauberater h3 {margin: 0; font-size: 12px;}
.bauberater .inner, .bauberater p {margin: 0; font-size: 12px;}

.bauberatertrenner {width: 98%; height: 1px; clear:left; background-color:#ddd;}

.desktoponly {}
.mobilesonly {display:none;}

#openrightboxswitch {display:none; }

.fancybox-content {width:600px; max-width:80%;}

/* ======================================================================
bergmilch */
.bergmilchvieh-uebersicht .bergmilch {width:50%; float:left;}
.bergmilchvieh-uebersicht .bergmilch.mrow0 {clear:left;}
.bergmilchvieh-uebersicht .bergmilch img {width:45%; float:left; margin: 0 3% 20px 0;}
.bergmilchvieh-uebersicht .bergmilch p {margin: 5px 3% 0 48%;}

/*Carousel*/
.bergmilchvieh-uebersicht.owl-carousel  {XXbackground:#fff;}  
.owl-carousel h2 {font-size: 14px; line-height:100%;}  


.owl-carousel blockquote.bergmilch {
	background-color: transparent;
	padding: 0 3px 15px 0;
	border-left: none;
	margin: 0 0 20px 0;
}
.owl-carousel .bergmilch {width: 100%; float: none;}
.owl-carousel .bergmilch h3 { margin: 5px 3% 2px 3%; clear:both;}
.owl-carousel .bergmilch h4 { margin: 0 3% 2px 3%; clear:both;}
.owl-carousel .bergmilch p { margin: 0 3% 0 3%; clear:both;}
.owl-carousel .bergmilch img { margin: 0 3% 5px 0;}

/* ======================================================================
bergmilchvieh-betriebsbesichtigung */
.bergmilchvieh-betriebsbesichtigung h3 {padding-top: 20px;}
.bergmilchvieh-betriebsbesichtigung a {display:block; width: 31%; float:left; padding: 0 1% 0 0; margin: 0 1% 10px 0; background: rgba(0,0,0,0.1); line-height:190%; font-weight:bold; transition: 1s background;}
.bergmilchvieh-betriebsbesichtigung a img {width: 20%; float:left; margin: 0 2% 0 0; }

.bergmilchvieh-betriebsbesichtigung a:hover {background: rgba(255,255,255,0.5);}

@media screen and (max-width: 600px) {
	.bergmilchvieh-uebersicht .bergmilch {width:90%; float:none; clear:both;}
	.bergmilchvieh-uebersicht .bergmilch img {width:25%; }
	.bergmilchvieh-uebersicht .bergmilch p {margin: 5px 3% 0 27%;}
	
	.owl-carousel .bergmilch {width:100%;}
	.owl-carousel .bergmilch p {margin: 5px 3% 0 3%;}
	
	.bergmilchvieh-betriebsbesichtigung a {width:45%; }
	.bergmilchvieh-betriebsbesichtigung a.row0 {clear:left;}

}


/* ======================================================================
Smaller Screens */


@media screen and (max-width: 1025px) {	
	.bodybox {width:100%; }
	#nav ul li a span {
		padding-left: 10px;
		padding-right: 10px;
	}
	
}




@media screen and (max-width: 800px) {
	XXbody {	font-size: 14px; }
	
	.bodybox {width:98%; }
	
	
	.headerbox{width:100%; XXdisplay:none; position:relative; background-color:#fff;}
	.toggleMenu {display:block; float:left; width:30px; height:150px; background: url(img/menuswitch.gif) no-repeat top right; margin-right:10px;}
	
	.subheaderbox {width:100%; XXdisplay:none; position:relative;}
	#aprevnext {display:block; width:90px; height:27px; float:right; XXbackground-color:#0ff;}
	#aprevnext a.aprev {display:block; width:40px; height:27px; float:right;  background: url(img/prev.png) no-repeat center top}
	#aprevnext a.anext {display:block; width:40px; height:27px; float:right;  background: url(img/next.png) no-repeat center top}
	
	.rightheaderbox {display:none;}
	#suggestbox ul li a {padding: 6px 10px 6px 15px; font-size:12px;}
	
	.mainbox {width:96%; padding: 20px 2% 20px 2%; position:relative;}
	
	
	
	
	.content {width:70%; margin:0 0 0 0;}
	.mainbox .contentwide  {width:100%; margin:0 0 0 0;}
	
	#rightbox {width:30%; margin:0 -2% 0 0;}
	
	.footerbox .left {display:none;}
	.footerbox {width:96%; height:auto; }
	.footerbox .center {width:100%; height:auto; margin-left: 0;}
	
	
	#leftbox {display:none;}
	
	/*Nav*/
	#menuebox {display:none; width:200px; height: auto; border-left:none; position:absolute; left:0; top:0; z-index:2000; }
	
	
	#nav2 {width:250px; height: auto; position:absolute; left:-250px; top:100px; z-index:2000; box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.75); transition: 1s left;}
	#nav2 li {width:250px; XXfloat:left;  padding: 0 0 0 0; }
	#nav2 li a {display:block; padding: 12px 0 12px 20px; font-size:18px; background:#f8f8f8; color:#004214; text-decoration: none; border-bottom: 1px solid #666;}
	#nav2 li li a {padding: 10px 0 10px 30px; font-size:16px; background:#eee; }
	#nav2 li li li a {padding: 8px 0 8px 40px; font-size:14px; background:#e4e4e4;}
	#nav2 li li li li a {padding: 6px 0 6px 50px; font-size:13px; background:#ddd;}
	
	#nav2 li ul {display:none;}
	#nav2 li.menu-parent > ul, #nav2 li.menu-current > ul {display:block;}
	#nav2 li.is_opened > ul, #nav2 li.is_opened > ul {display:block;}
	
	
	#nav2 li a.menu-parent, #nav2 li a.menu-current {background:#def4c8; font-weight:bold;}
	
	#nav2 li a.menu-expand { background: #eee url(img/haschild.png) no-repeat 2px center;}
	#nav2 li a.menu-expand.is_opened { background: #eee url(img/isclicked.png) no-repeat 2px center; }
	
	
	#nav2remove {position:fixed; top:0; width:100%; height:100%; background-color: #000; opacity:0.5;}
	
	body.menuopen #nav2 {left:0;  transition: 1s left;}
	body.menuopen #nav2remove {display:block;}

	body.beforeunload #nav2remove {display:block; background-color: #fff;}
	
	
	.breadcrumbs { width: 100%; height: auto; background:#666; }
	.innerbc { margin: 2px 0 5px 2%; width: 100%; }
	.innerbc span  {display: block; float:left; padding: 2px 2px 2px 12px; margin: 0 0 5px 0;}
	 .innerbc b  {display: none;}
	
	/*Content sachen */
	
	.mainbox img {max-width:100%; height: auto ! important;}
	.mainbox table td img {max-width:100%; height: auto;}
	
	.mainbox .tablewrapper {overflow-x:scroll; XXwidth:105%;}
	
	.logobox { width:80%; }
	.search_box {width: 50%;}
	
	#XXfootermenu {display:block; margin-top:30px; border-top: 5px #ddd solid; padding}
	
	#footermenu {clear:both; display:block; padding-top:20px;}
	#footermenu>ul {padding-top:30px; border-top: 5px #ddd solid; }
	
	
	
	.footerbox {overflow:hidden;}
	
}


/* ======================================================================
Smaller Screens */



@media screen and (max-width: 500px) {
	XXhtml,XXbody { height:auto;}
	.XXbodybox {min-height: 10%;}
	.content {width:100%; margin:0 0 0 0;}
	#rightbox {display:none; width:240px; position:absolute; right:0; top:0; background:#f0f0f0}
	#openrightboxswitch {display:block; width: 19px; height:57px; position:absolute; right:0; top:20px;}
	#closerightboxswitch {display:block;}
	
	body.openrightbox #rightbox  {box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.75);}
	
	.bauberater {width:100%;}
	
	.XXsearch_box {  width: 160px;}
	.XXsearch_box .searchstring {width: 80px;}
		
	object {display:none;}
	object::before { content: "Flash-Objekt ausgeblendet";}
	
	.desktoponly {display:none;}
	.mobilesonly {display:block;}
	
	

}