/* Design of Responsive template richu172 by Richard Kircher (c)2017/ www.richukunst.ch */
.clear {
clear: both;
}
* {padding: 0; margin: 0;
}
#body{  
padding-left:0; 
padding-right:0; 
background:url(images/background.jpg) no-repeat center center fixed;
/*background-size: 100% 100%;*/
/*tilføjet 23 jan 2019:*/
background-size: max-width:100%;height:auto;
/*alternativ:*/
/*background-size: width:100%;height:auto;*/
/*overflow-x: hidden;*/
}
body{
font-size: 1em;
font-family: Arial, SunSans-Regular, Sans-Serif, Verdana;
color:#000;
}
a:link, a:visited {
color:#00F;/* Hyperlink zu einem noch nicht besuchten Ziel */
text-decoration: none;
}
a:hover, a:active, a:focus {
color: #090;/* Hyperlink z.B. Während die Maus über dem Element E hovert */
}
/* Überschriften von h1 bis h6 Start */
h1{
font-size:2.5em;
color:#00F;/* Überschrift-Farbe */
font-weight:600;
margin: 0 0 10px;
letter-spacing:.05em;
text-shadow: 2px 2px 0px rgba(255,  255,  255,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
h2{
font-size:2.2em;
color:#00F;/* Überschrift-Farbe */
font-weight:600;
margin: 0 0 10px;
letter-spacing:.05em;
text-shadow: 4px 4px 0px rgba(255,  255,  255,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
h3{
font-size:2em;
color:#6699ff;/* Überschrift-Farbe */
font-weight:600;
margin: 0 0 10px;
letter-spacing:.05em;
text-shadow: 4px 4px 0px rgba(255,  255,  255,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
h4{
font-size:1.8em;
font-weight:500;
color:#090;
margin: 0 0 10px;
}
h5{
font-size:1.6em;
color:#000;/* Überschrift-Farbe */
font-weight:400;
margin: 0 0 10px;
letter-spacing:.05em;
}
h6{
font-size:1.4em;
color:#060;/* Überschrift-Farbe */
font-weight:400;
margin: 0 0 10px;
letter-spacing:.05em;
}
/* Überschriften von h1 bis h6 End */
.print{
margin-top:20px;
margin-left:20px;
background-color:#FFF;
background-image:none;
text-align:left;
}
/* Important */
p, pre{
padding:  0 0 20px;
line-height:1.5em;
}
#tinymce {
margin: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
margin-bottom:20px;
}
/* Important */
/* Sitemap Start  */
ul.sitemaplevel1, ul.sitemaplevel1 ul {
list-style: none;
text-decoration: none;
font-size: 20px;
}
.sitemaplevel1 a:hover {
font-size: 20px;
color:#090;
}
.sitemaplevel1 li:before {
list-style-type: none;
color: #000;
content: "\00bb"; /* Sonderzeichen » */ 
font-family: inherit;
font-size: 1em;
font-weight:800;
}
/* Sitemap End  */
img{
max-width:100%;
height:auto;
/*box shadow fjernet 5 apr 2020*/
/*box-shadow: 2px 2px 5px 2px #000;*/
}
/* Bilder mii Text links oder rechts mit TinyMCE for CMSimple_XH einfügen Start */
.img_left{
clear: left;
float:left;
margin-right:1em;
margin-top:3em;
margin-bottom:1em;
}
.img_right{
clear: right;
float:right;
margin-left:1em;
margin-top:3em;
margin-bottom:1em;
}
/* Bilder mii Text links oder rechts mit TinyMCE for CMSimple_XH einfügen End */
/* Videos mit CMSimple_XH Editor Multimedia einfügen, responsive */
video {
max-width: 100%;
height: auto;
}
/* End Multimedia einfügen, responsive */
.video iframe,.video object,.video embed{
position:absolute;
top:0;left:0;
width:100%;
height:100%;
}
/* Login */
.xh_login{
height: 20em;
margin: 5em 0 0;
text-align: center;
color: #00F;
}
#login #submit {
padding: 0 20px;
}
/* Login */
.clear {
clear: both;
}

/* Blockquote Zitat Start */
blockquote {
background:rgba(0, 0, 0, 0.4);
border-left: 8px solid #00F;
border-right: 8px solid #00F;
margin-top: 15px;
margin-left: 0; /* bündig mit Seiten Rand = Schrift  */
padding: 0.8em 10px;
font-size: 1.5em;
color: #FFF; /* Überschrift-Farbe */
font-weight: 500;
quotes: "\201C""\201D";
}
blockquote::before {
margin-left: 5px;
color: #F00; /* Zitat-Zeichen-Farbe */
content: open-quote;
font-size: 2em;
line-height: 0.1em;
margin-right: 0.2em; /* Abstand Sonderzeichen Schrift */
vertical-align: -.2em; /* Zitat-Zeichen-höhe*/
}
blockquote p {
display: inline;
margin: 0;
}
/* Blockquote Zitat End */

/* Navigation Hamburger Grünenbergpass_color2/icons/März/ Start by Richard Kircher (c)2017 /www.richukunst.ch */
/* Navigation fährt von links nach rechts über die ganze Seite */
/* Hamburger ABSCHNITT  Start */
.hamburger-toggleable-menu {
background-color: rgba(0, 0, 0, 0.2);/* Background Farbe */
box-shadow: 3px 3px 11px #333;/* Farbe Einschub rechts*/
color: #FFF;/* Angeklickte Seite Farbe */
font-size: 100%;/* Schrift grösse */
display: block;
padding: 0;/* Background Farbe abstand rechts */
}
.hamburger-toggleable-menu li {
display: inline-block;
padding: 0;/* Abstand Text nach unten */
margin: 0;
height: 40px;
line-height: 40px;
}
.hamburger-toggleable-menu li a:hover {
background: radial-gradient(ellipse farthest-corner at center, #0F1FFA 0%, #7EA0CC 100%);
transition-property: background;
transition-duration: 1s;
transition-timing-function: ease-out;
color: #0F3;/* Textfarbe Hover */
}
/* Hamburger close Element Button links */ 
.hamburger-menu-toggle-button:checked ~ .hammenu-toggle {
background: rgba(0, 0, 0, 0) url(images/close.png)no-repeat;/* Farbe + Bild background links zu */
font-size: 0;               
transform: rotate(-180deg);
}
.hamburger-menu-toggle {
left: -9999px;/* position close icon */
position: absolute;
top: -9999px;
}
.hamburger-toggleable-menu {
margin: 0;/* abstand zum Rand links */ 
width: 310px;
height: 100%;
max-height: 100%;/* abstand nach unten auf Handy korrigieren? */ 
min-height: 100%;/* abstand nach unten auf Handy korrigieren? */
z-index: 998;
overflow-x: auto;/* vertikaler scrollbalken für Geräte mit zuwenig Höhe */
overflow-x: hidden;
}
.hamburger-toggleable-menu.hamburger-left {
right: 105%;/* weg ganze naviseite fährt von rechts nach links */
}
.hamburger-toggleable-menu.hamburger-right {
right: 105%;/* weg ganze naviseite fährt nicht mehr von rechts nach links */ 
}
.hamburger-menu-toggle-button:checked ~ .hammenu-toggle.hamburger-left {
right: auto; 
left: 0;/* icon close kann nach links verschoben werden */
}
.hamburger-menu-toggle-button:checked + .hamburger-toggleable-menu.hamburger-left {
width: 210px !important;/* Breite navi */
right: 0;
}
/* Hamburger öffnen Menü Button rechts */
.hammenu-toggle {
background-color: #09F;/* Farbe background*/
color: #000;/* Farbe Hamburger*/
font-size: 35px; 
text-decoration: none;
text-align: center;
font-weight: normal;
height: 50px;
line-height:50px;
}
.hammenu-toggle:hover {
background-color:#3F0;/* background hover Farbe links */
}
.hammenu-toggle {
display: none;
}
.hammenu-toggle, .hamburger-menu-toggle-button, .hamburger-toggleable-menu {
/*top: 0;*/
position: fixed;
transition: all 0.7s;/* schneligkeit einschub */ 
}
.hammenu-toggle {
right: 0;
margin: 0;
display: inline-block;
width: 50px;/* Briet bouton links und rechts */
z-index: 999;
}
.hammenu-toggle:hover {
cursor: pointer;/* sonst keine Hand anzeige bei icon */
}
/* Hamburger ABSCHNITT  End */
.clear{
clear: both;
}
/* 9 Menü-Ebenen Start */
nav li > a:after { 
content: ' +'; /* Sonderzeichen + Menü*/ 
color: #FFF;
font-size: 22px;
}
nav li > a:only-child:after { 
content: ''; 
}
.menulevel1 li a {
/*height: 100%;*/
width: 310px;
background-color: #ffa500;/* menulevel1: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #000;
padding: 0 5px;/* Abstand Rand rechts Text links */
box-shadow: 2px 2px 10px 7px #EEE;
}
.menulevel2 li a {
height: 100%;
width: 310px;
background-color: #03C;/* menulevel2: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #FFF;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
.menulevel3 li a {
height: 100%;
width: 310px;
background-color: #09F;/* menulevel3: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #FFF;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
.menulevel4 li a {
height: 100%;
width: 310px;
background-color: #0CF;/* menulevel3: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #FFF;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
.menulevel5 li a {
height: 100%;
width: 310px;
background-color: #0FF;/* menulevel3: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #FFF;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
.menulevel6 li a {
height: 100%;
width: 310px;
background-color: #AAA;/* menulevel3: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #FFF;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
.menulevel7 li a {
height: 100%;
width: 310px;
background-color: #BBB;/* menulevel3: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #FFF;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
.menulevel8 li a {
height: 100%;
width: 310px;
background-color: #DDD;/* menulevel3: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #666;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
.menulevel9 li a {
height: 100%;
width: 310px;
background-color: #EEE;/* menulevel3: Farbe background */ 
display: inline-block;
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-decoration: none;
color: #666;
padding: 0 5px;/* Abstand Rand rechts Text links */
}
/* 9 Menü-Ebenen End */
.clear{
clear: both;
}
/* Navigation Hamburger Grünenbergpass_color2/icons/März/ End by Richard Kircher (c)2017 /www.richukunst.ch */
/* Navigation fährt von links nach rechts über die ganze Seite */
/* search Start  */
#searchbox .submit{
margin-top:2px;
float: right;
height: 52px;
margin-left: 15px;
background: url(images/search.png)no-repeat center;
padding: 22px 22px;
font-size:0px;
color: #FFF;
cursor: pointer;
box-shadow: 2px 2px 5px 2px #000;
}
#searchbox .submit:hover{
background: url(images/searchhover.png)no-repeat center;
}
#searchbox .text{
margin-top:2px;
float: left;
height:auto;
background-color: #fff;/* Background Farbe */
margin-left: 15px;
width:180px;
/*padding: 15px 15px;*/
font-size:14px;
font-weight:600;   
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #FFF;
box-shadow: 2px 2px 5px 2px #000;
}
#searchbox .text:hover{
box-shadow: inset 0 0 0 2px #0F3;
}
/* search End  */
/* buttontop Statt  */
#buttontop {
margin-left:15px;
margin-right: auto ;
margin-top:15px;
}
#buttontop a:hover{
background: url(images/buttontop.png);
padding-top: 30px;
padding-bottom: 0px;
border-radius: 5px;
border: 3px solid #AAA; 
}
/* buttontop End  */
/* content Start  */
#content{
width: 50%;
/*min-height: 500px;*/
margin-top:0;
margin-left:auto;
margin-right:auto;
background-color: rgba(255,255,255,0.5);
border: 1px solid rgba(0, 0, 0, 0.4);
padding-top: 30px;
padding-left: 50px;
padding-right: 50px;
box-shadow: 2px 2px 5px 2px #000;
clear: both;
}
#content img {
max-width: 100%;
height: auto;
width:auto;
box-shadow:none;
}
/* content End  */
.clear{
clear: both;
}
/* Newsbox Start */
/*#newscontainer {
position: relative;
max-width: 100%;
background-color: rgba(255, 255, 255, 0.5);/*Background Farbe */
padding-top: 10px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
border: 1px solid rgba(0, 0, 0, 0.4);
word-spacing:normal;/* Durch word-spacing kann man den Abstand zwischen den einzelnen Worten einer Zeile beeinflussen. */
vertical-align: top;/* Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile. */
}*/
/* Überschriften Newsboxen von h1 bis h6 Start */
#newscontainer h1 {
width:100%;
/*background: rgba(0,  0,  255,  0.6); Überschrift-Farbe-background */
/*box-shadow: 2px 2px 10px 2px #000;*/
/*border: 0 solid #EEE; */
font-size:1.5em;
color:#FFF;/* Überschrift-Farbe */
text-shadow:none;    
text-align:center;
/*line-height:3em*/
}
#newscontainer h2 {
width:100%;
background: rgba(255,  255,  255,  0.4);/* Überschrift-Farbe-background */
box-shadow: 2px 2px 10px 2px #000;
border: 0 solid #EEE; 
font-size:1.5em;
color:#3F3;/* Überschrift-Farbe */
text-shadow:none;    
text-align:center;
line-height:3em
}
#newscontainer h3 {
width:100%;
background: rgba(0,  0,  255,  0.5);/* Überschrift-Farbe-background */
box-shadow: 2px 2px 10px 2px #000;
border: 0 solid #EEE; 
font-size:1.5em;
color:#FF0;/* Überschrift-Farbe */
text-shadow:none;    
text-align:center;
line-height:3em
}
#newscontainer h4 {
width:100%;
background: rgba(255,  0,  255,  0.4);/* Überschrift-Farbe-background */
box-shadow: 2px 2px 10px 2px #000;
border: 0 solid #EEE; 
font-size:1.5em;
color:#FFF;/* Überschrift-Farbe */
text-shadow:none;    
text-align:center;
line-height:3em
}
#newscontainer h5 {
font-size:1.5em;
font-weight:500;
color:#09F;/* Überschrift-Farbe */
text-shadow:none;    
line-height:1.5em
}
#newscontainer h6 {
font-size:1.5em;
font-weight:500;
color:#FFF;/* Überschrift-Farbe */
text-shadow:none;    
line-height:1.5em
}
/* Überschriften Newsboxen von h1 bis h6 End */
/*newsbox1 Start */
#newsbox1 {
/*min-width:420px;*/
/*max-width:420px;*/
/*max-height:500px; Newsbox max-height kann beliebig angepasst werden. Alle 4 Boxen sollten gleiche Grösse haben.   */
/*min-height:500px;*/
font-size: 1em;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
color: #000;/* Schrift-Farbe-Text-Newsbox */
/*margin-top:1em;*/
margin-left:1em;
background:rgba(255, 255, 255, 0.4); background-Farbe-newsbox
/*float: left;*/
order:1;
}
#newsbox1 a:link, a:visited {
font-size: 1em;
text-decoration: none; 
color: #F00;/* Schrift Farbe link */
}
#newsbox1 a:hover  {
transition-delay : 0.4s;
padding: 8px;
box-shadow:none;
}
/*newsbox1 End*/
/*newsbox2 Start */
#newsbox2 {
min-width:420px;
max-width:420px;
max-height:500px;/* Newsbox max-height kann beliebig angepasst werden. Alle 4 Boxen sollten gleiche Grösse haben.   */
min-height:500px;
font-size: 1em;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
color: #FFF;/* Schrift-Farbe-Text-Newsbox */
margin-top:1em;
margin-left:1em;
background:rgba(0, 0, 0, 0.4);/* background-Farbe-newsbox */
/*float: left;*/
order:1;
}
#newsbox2 a:link, a:visited {
font-size: 1em;
text-decoration: none; 
color: #F00;/* Schrift Farbe link */
}
#newsbox2 a:hover  {
transition-delay : 0.4s;
padding: 8px;
box-shadow:none;
}
/*newsbox2 End*/
/*newsbox3 Start */
#newsbox3 {
min-width:420px;
max-width:420px;
max-height:500px;/* Newsbox max-height kann beliebig angepasst werden. Alle 4 Boxen sollten gleiche Grösse haben.   */
min-height:500px;
font-size: 1em;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
color: #FFF;/* Schrift-Farbe-Text-Newsbox */
margin-top:1em;
margin-left:1em;
background:rgba(0, 0, 0, 0.4);/* background-Farbe-newsbox */
/*float: left;*/
order:1;
}
#newsbox3 a:link, a:visited {
font-size: 1em;
text-decoration: none; 
color: #F00;/* Schrift Farbe link */
}
#newsbox3 a:hover  {
transition-delay : 0.4s;
padding: 8px;
box-shadow:none;
}
/*newsbox3 End*/
/*newsbox4 Start */
#newsbox4 {
min-width:420px;
max-width:420px;
max-height:500px;/* Newsbox max-height kann beliebig angepasst werden. Alle 4 Boxen sollten gleiche Grösse haben.   */
min-height:500px;
font-size: 1em;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
color: #FFF;/* Schrift-Farbe-Text-Newsbox */
margin-top:1em;
margin-left:1em;
background:rgba(0, 0, 0, 0.4);/* background-Farbe-newsbox */
/*float: left;*/
order:1;
}
#newsbox4 a:link, a:visited {
font-size: 1em;
text-decoration: none; 
color: #F00;/* Schrift Farbe link */
}
#newsbox4 a:hover  {
transition-delay : 0.4s;
padding: 8px;
box-shadow:none;
}
/*newsbox4 End*/
/* Newsbox End */
/* previous top next Start */
.previous_top_next {
width:50%;
margin: 0 auto;
padding: 1em;
padding-top: 20px;
}
.previous_top_next td a {
text-decoration:none;
font-size: calc(0.6em + 0.9vw);
color:#000;
/*font-weight:600;*/
white-space: nowrap;
padding: 0 0.5em;
}
.previous_top_next td a:hover {
width:100%;
color:#FFF;
background-color: rgba(0, 0, 0, 0.4);   
padding: 0.4em;
}
.previous {
width:10%;
text-align:left;
}
.top {
width:10%;
text-align:center;
}
.next  {
width:10%;
text-align:right
}
/* previous top next Start */
/* Footer Start */
.footer-center{
/*background-color: rgba(0, 0, 0, 0.4);  Background Farbe */
margin: 0;
max-width: 100%;
text-align: center;
padding: 5px;/* abstand überschrit footer start */
margin-top: 20px;/* abstand Seite top*/
padding-bottom: 10px;/* abstand Überschrift Login unten */
font-size: 1em;
}
div#footer {
text-align: center;
font-size: 1em;
color: #FFF; 
padding-top: 8px;
padding-bottom: 8px;
margin-top:5px;
margin-bottom:20px;
margin-left:0;
margin-right:11px;
}
#footer a:link, #footer a:visited {
font-size: 1em;
text-decoration: none; 
color: #FF0;
}
#footer a:hover {
font-size: 1em;
text-decoration: none; 
color: #F00;
}
#footer a img:hover {
border-bottom: 3px solid #F00; 
}
#footer img {
max-width: 100%;
height: auto;
width:auto;
box-shadow:none;
}
/* footer-links Start */
.footer-center .footer-links a:hover{
color: #FFF; /* Link Text Farb hover */
}
.footer-center .footer-links a{
list-style: none;
font-weight: bold;
color:  #0FF; /* Link Text Farb Login */
padding: 15px 0 23px;/* abstand Überschrift*/
}
/* footer-links End*/
/* Footer End*/
/* -------------------- Media Queries -------------------- */
@media screen and (max-width: 1900px){
#newscontainer{
position: relative;
margin-left: 430px;
margin-right: 430px;
}
}
@media screen and (max-width: 1850px){
#newscontainer{
position: relative;
margin-left: 400px;
margin-right: 400px;
}
}
@media screen and (max-width: 1800px){
#newscontainer{
position: relative;
margin-left: 325px;
margin-right: 325px;
}
}
@media screen and (max-width: 1680px){
#newscontainer{
position: relative;
margin-left: 330px;
margin-right: 330px;
}
}
@media screen and (max-width: 1640px){
#newscontainer{
position: relative;
margin-left: 295px;
margin-right: 295px;
}
}
@media screen and (max-width: 1580px){
#newscontainer{
position: relative;
margin-left: 200px;
margin-right: 200px;
}
}
@media screen and (max-width: 1440px){
#newscontainer{
position: relative;
margin-left: 215px;
margin-right: 215px;
}
}
@media screen and (max-width: 1390px){
#newscontainer{
position: relative;
margin-left: 175px;
margin-right: 175px;
}
}
@media screen and (max-width: 1340px){
#newscontainer{
/*position: relative;*/
/*margin-left: 125px;*/
/*margin-right: 125px;*/
width: 50%;
margin: 0 auto;
}
}    
@media screen and (max-width: 1240px){
#newscontainer{
position: relative;
margin-left: 70px;
margin-right: 70px;
}
}    
@media screen and (max-width: 1130px){
#newscontainer{
position: relative;
margin-left: 40px;
margin-right: 40px;
}
}    
@media screen and (max-width: 1070px){
#newscontainer{
position: relative;
margin-left: 10px;
margin-right: 10px;
}
#content{
width: 70%;
}      
}        
@media screen and (max-width: 1010px){
#newscontainer {
background: none;
}
#newscontainer{
position: relative;
margin-left: 0;
margin-right:0;
}
}     
.clear{
clear: both;
}
@media screen and (max-width: 990px){
#newsbox1{
position: relative;  
max-width:100%;    
min-width:100%;
max-height:700px;
margin-left:-10px;
}
#newsbox2{
position: relative;  
max-width:100%;    
min-width:100%;
max-height:700px;
margin-left:-10px;
}
#newsbox3{
position: relative;  
max-width:100%;    
min-width:100%;
max-height:700px;
margin-left:-10px;
}
#newsbox4{
position: relative;  
max-width:100%;    
min-width:100%;
max-height:700px;
margin-left:-10px;
}
h1{
font-size:1.5em;
}
h2{
font-size:1.4em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
}      
}