/* reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* render html5 elements as block 
   rendert html5 elemente als block  */

header, footer, feature, section, aside, nav, article { display: block;}

body {
background-color: rgb(237,245,251);
font-size: 1em;
font-family: Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
}
pre, code {
font-size: 1.3em;
}
a {color: #blue;}
a:visited {color:#blue;}
a:hover {color: #ccc;}
a:active { color:#000000;}

h1, h2{
font-size:2.2em;
font-weight: normal;
margin: 0 0 10px;
}


h3 {
font-size:1.38em;
font-weight: normal;
margin: 0 0 10px;
}

img.download {vertical-align:middle;}
img{border:none;}

ul{
	list-style-type:none;}



/* HOPPE Eintragungen------------------------- */

#sidebar{float:right;width:100%;}
#sidebar .sidebarbox {margin:0 0 25px 0;background-color:#fff; border:1px solid #467aa7;}
#sidebar header{background-color:#2a5a7a;color:#fff;font-size:1.1em;margin:0 ;padding:5px;}
#sidebar ul{list-style:none;margin:10px 0 10px 10px;padding:0;}
#sidebar ul li{margin:0 0 5px 0;}
#sidebar ul li a{color:#467aa7;font-weight:400;}



#DetailsScrollbalken {
  width: 100%;
  /* Höhe der Box */
  max-height: 200px;
  /* Scrollbalken anzeigen, wenn mehr als 200px benötigt werden */
  overflow: scroll;
  overflow-x: hidden;
}

#DetailsScrollbalken li{display:inline;padding:0;margin:0;}
#DetailsScrollbalken li a{display:block;padding:7px 5px 6px 10px;font-size:1.0em; font-weight:400;text-decoration:none;border-bottom:1px solid #ddd;}
#DetailsScrollbalken li a:hover{background-color:#eee;color:#333;border-bottom:1px solid #ccc;}
#DetailsScrollbalken ul{margin:0;padding:0;font-size:0.9em;border-bottom:1px solid #ccc;}
#DetailsScrollbalken ul li a{color:#467aa7;border:0px none;font-weight:400; padding-left:25px; padding-right:5px; padding-top:5px; padding-bottom:5px}
#DetailsScrollbalken ul li a:hover{border:0px none;}



/* ----------Button-------------- */
a.button {
    background-color: rgb(70, 122,167);
    color: white;
	font-family:Arial
	font-size:12px;
	padding:6px 10px;
    border: none;
    text-decoration:none;
    display:inline-block;
}
a.button:hover {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

a.button:active {
	position:relative;
	top:1px;
}

/* ----------Button2 -------------- */
a.button2 {
      display: block;
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      height: 30px;
      color: #9c9c9c;
      border-top: 1px solid #dcdcdb;
      background: #f5f5f5 url('button.jpg') no-repeat right center;
      font-family: "Open Sans Condensed", sans-serif;
      font-weight: 700;
      font-size: 18px;
      text-align: right;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer; padding-left:10px; padding-right:44px; padding-top:5px; padding-bottom:0 }
 
a.button2:hover {
        color: #c51927;
        background-color: white;
        background-image: url('button_hover.jpg'); }





/* ----------Button -------------- */
.buttonblau {
    background-color: rgb(70, 122,167);
    color: white;
    padding: 14px;
    font-size: 18px;
    border: none;
    text-decoration:none;
}
.buttonblau:hover {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}
.buttonblau:active {
	position:relative;
	top:1px;
}




/* ----------BoxGrau -------------- */
.BoxGrauX {
  color: #000000;
  background-color: #EEEEEE;
  padding:20px 20px;
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px; 
  font-family:Courier;
  font-weight:bold;
  font-size:1.1em;
}


.BoxGrau {
	margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; border-radius: 4px; border: 1px dashed rgb(226, 115, 46);
	border-image: none; clear: both; display: block; position: relative; background-color: rgb(255, 249, 223)

}



/* ----------Themen -------------- */
section article themen ul li a{
  padding-left:0px; padding-right:0; padding-top:0; padding-bottom:0px;
   color:#2A5A7A;
   background:#fff;
   font-size:1.2em;
   font-weight: normal;
   margin-left: 10px;
   line-height: 150%;
}
section article themen ul li a:visited {color:#2A5A7A;}


/* ----------FusszeileScrollbalken -------------- */
#FusszeileScrollbalken {
  /* Höhe der Box */
  max-height: 10px;
  /* Scrollbalken anzeigen, wenn mehr als 10px benötigt werden */
  overflow: scroll;
  overflow-x: hidden;
  color:#aaa;
  padding:0px 140px;
  font-family:Arial;
  font-size:18px;
}
#FusszeileScrollbalken h2 {color:#ddd;font-family:Arial,Georgia,serif;font-size:1.8em}
#FusszeileScrollbalken h3 {color:#ddd;font-family:Arial,Georgia,serif;font-size:1.8em}
#FusszeileScrollbalken h4 {color:#ddd;font-family:Arial,Georgia,serif;font-size:1.8em}



/* ---------- Theaser  -------------- */
.Theaser {
  border: 1px outset DARKGRAY;
  border-style: solid; 
  text-align: left;
  min-height:170px; 
  margin-top:1px; 
  margin-bottom:1px; 
  font-size:12.0pt; 
}

.TheaserHeader {
 padding-left:0px; padding-right:0; padding-top:10; padding-bottom:10px;
  border: 1px outset DARKGRAY;
  background-color: LIGHTGRAY;
  text-align: left;
  font-size:1.0em;
  font-family:Arial;
  font-weight:normal;
  color:#2a5a7a;
}


.TheaserImage{
  border: 0px outset grey;
  background-color: white;
  text-align: left;
  font-size:1.0em;
  font-family:Arial;  
}


.TheaserBody{
  border: 0px outset grey;
  background-color: white;
  text-align: left;
  font-size:1.0em;
  font-family:Arial;  
  color:#000000;
}



/* ----------Dropdown Button -------------- */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 14px;
    font-size: 14px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}





/* cols.css */
.section {	margin: 0px; padding: 0px; clear: both;}
.group::before {	display: table; content: ""}
.group::after {	display: table; content: ""}
.group::after {	clear: both;}
.group {	-ms-zoom: 1;}
.col {	margin: 1% 0px 1% 1.6%; float: left; background-color: white;}
:first-child.col {	margin-left: 0px;}

@media only screen and (max-width:480px)
{
.col {	margin: 1% 0px 1% 0%;}
}


/* 10cols.css */
.span_10_of_10 {width: 100%;}
.span_9_of_10 {	width: 89.84%;}
.span_8_of_10 {	width: 79.68%;}
.span_7_of_10 {	width: 69.52%;}
.span_6_of_10 {	width: 59.36%;}
.span_5_of_10 {	width: 49.2%;}
.span_4_of_10 {	width: 39.04%;}
.span_3_of_10 {	width: 28.88%;}
.span_2_of_10 {	width: 18.72%;}
.span_1_of_10 {	width: 8.56%;}

@media only screen and (max-width:480px)
{
.span_10_of_10 {width: 100%;}
.span_9_of_10 {	width: 100%;}
.span_8_of_10 {	width: 100%;}
.span_7_of_10 {	width: 100%;}
.span_6_of_10 {	width: 100%;}
.span_5_of_10 {	width: 100%;}
.span_4_of_10 {	width: 100%;}
.span_3_of_10 {	width: 100%;}
.span_2_of_10 {	width: 100%;}
.span_1_of_10 {	width: 100%;}
}


/* ----------container zentriert das layout-------------- */
#container {
max-width: 1400px;
min-width:320px;
margin:0 auto;
background-color: white;
}



/* ----------header for logo-------------- */
#top:after{
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility:hidden;
  } 
#top {
 background-colorXXX:#467aa7;
 background-color:white;
 background-image:url('bg_header.jpg');
 background-repeat:no-repeat;
 background-position: top 0px right 50px;
 	}
	
	
#top header{
  padding:10px;
  float:left;
  width:100%;
  }
  


#top header h1{
   padding-left:10px; padding-right:0; padding-top:0; padding-bottom:0px;
   font-family:Arial;
   font-size:2.3em;
   colorXXX:#fff; 
   color:#467aa7;

}

#top header h2{
   padding-left:10px; padding-right:0; padding-top:0; padding-bottom:0px;
   font-family:Arial;
   font-size:1.8em;
   colorXXX:#fff; 
   color:#467aa7;
}
#top header p{
   font-size:0.8434em;
   padding-left:10px; padding-right:0; padding-top:0; padding-bottom:20px;
   colorXXX:#fff; 
   color:#467aa7;
}


header img{ 
border:0px none;
padding-left:0; padding-right:0; padding-top:0; padding-bottom:10px
}  
.mini, .menubutton{
  display:none;
  }

.menubutton a {
  cursor:pointer;
}
 
 
 


 
 

 
 
 

 
 
/* ----------Navigation-------------- */

.mainnav{
  background-color:rgb(70,122,167);
  overflow: hidden;
}

.mainnav ul{
  list-style-type: none;
}

.mainnav li {
	list-style: none;
	float: left;
}

.mainnav a {
  float: left;
  display: block;
  background-color:rgb(70,122,167);
  color: #f2f2f2;
  text-align: center;
  padding: 14px 14px 12px 12px;
  text-decoration: none;
  font-size: 17px;
}	

.mainnav a:active { 
  background-color:rgb(70,122,230);
  font-weight:bold;
  color: white;
}	

.mainnav a.selected {
  background-colorXXX:rgb(70,122,230);
  font-weight:bold;
  font-size: 17px;
  color: white;
  border-bottom-color: rgb(199,199,199); border-bottom-width: 6px; border-bottom-style: solid;   
} 

.menue-button {
	display: none;
}		

.mainnav a:hover {
  background-color: #555;
  color: white;
}	


/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target .mainnav {
	display: block;
}

/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ;
}



/* Dropdown container - needed to position the dropdown content */
.mainnavdropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the mainnav */
.mainnavdropdown .mainnavdropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 14px 12px 12px;
  background-color:rgb(70,122,167);
  font-family: inherit;
  margin: 0;
}




/* Style the dropdown content (hidden by default) */
.mainnavdropdown-content {
  display: none;
  position: absolute;
  background-color:rgb(70,122,230);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


/* Style the links inside the dropdown */
.mainnavdropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.mainnav a:hover, .mainnavdropdown:hover .mainnavdropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.mainnavdropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.mainnavdropdown:hover .mainnavdropdown-content{
  display: block;
}



/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 768px */
@media only screen and (max-width: 600px) {


	.menue-button {
		display: block;
	}
	
	.menue-button {
        background-color: #467aa7;
        display: block;
		position: absolute;
		right: 3px;
		top: 3px;
		padding: 0.3em;
		color: orange;
		cursor: pointer;
		text-decoration: none;
	}
	
	.menue-button-beschr-close {
		background-image:url('menu-close.png');
		width: 50px; height: 50px;
		position:fixed;
	}
	.menue-button-beschr-open {
		background-image:url('menu-open.png');
		width: 50px; height: 50px;
		position:fixed;
	}
	
	#nav-menue{	
		background-color: white;
 	}

	
	.mainnav{
    	left: 10px; 
    	top: 10px; 
  		width: 85%; 
  		height: 900px;
  		right: 50px; 
       	display: none; 
  		position: absolute; 
  		z-index: 105; 
  		min-width: 200px; 
  		background-color: rgb(199,199,199);
  		background-color: white;
  	    padding:0 0 0 0;
	    float:left;
	    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 19px 0 rgba(0, 0, 0, 0.19);
	    
	  	}	



	.mainnav ul{
        width: 100%;
        padding: 0px 0px;
    	}				

	.mainnav ul li {
		width: 100%;
        height: 45px; 
		line-height: 45px; 
		clear: both; 
		border-bottom-color: rgb(199, 199, 199); 
		border-bottom-width: 1px; 
		border-bottom-style: solid; 
		list-style-type: none; 
		background-color: rgb(255, 255, 255);
     }


	.mainnav ul li a  {
	   width: 100%;
	   text-align: left;
       float:left;
	   padding: 0px 10px; 
	   font-weightXX: bold; 
	   white-space: nowrap;
       color: rgb(41,123,191);
	   background-color:rgb(255, 255, 255);
       box-shadow: 0 1px 3px #666666;
 	}
  
    .mainnav a.selected {
       color: rgb(41,123,191);
		border-bottom-color: rgb(199, 199, 199); 
		border-bottom-width: 1px; 
		border-bottom-style: solid;
      }
 

	.mainnav ul li a:hover   {
	   padding: 0px 10px; 
	   color: white;
	}
  
 	
	.menue-button:hover {
		color: red;
        background-color: #ccc; 
	}

 
  
 /* Style the dropdown content (hidden by default) */
     .mainnavdropdown {
      display: block;
     }


     .mainnavdropdown-content {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 0px;
        margin-left: 50px;
     }
   
    .mainnavdropdown-content a {
       padding: 0px 10px;
   	   width: 100%;
       height: 45px; 
  	   line-height: 45px; 
	   clear: both; 
	   text-align: left;
       float:left;
	   font-weightXX: bold; 
	   white-space: nowrap;
       color: rgb(41,123,191);
	   background-color:rgb(255, 255, 255);
       box-shado: 0 1px 3px #666666; 
       font-size: 15px;
     }
   
   .mainnavdropdown .mainnavdropbtn {
		width: 100%;
        height: 45px; 
		line-height: 45px; 
		clear: both; 
		border-bottom-color: rgb(199, 199, 199); 
		border-bottom-width: 1px; 
		border-bottom-style: solid; 
		list-style-type: none; 
	   text-align: left;
       floatXX:left;
	   padding: 0px 10px ; 
	   font-weightXX: bold; 
	   white-space: nowrap;
       color: rgb(41,123,191);
	   background-color:rgb(255, 255, 255);
	     }

 
   .nav-h1{ font-size: 2.2em;}	
   .nav-h2{	display: block;}	
   .nav-p{	display: none;}	
 
 
    #top {
	 background-color:#467aa7;
     padding-left:0px; padding-right:0; padding-top:0px; padding-bottom:15px;
     background-image:url('keinBild');
	}   

	
	#top header h1{
	 padding-left:0px; padding-right:0px; padding-top:10px; padding-bottom:0px;padding-right:80px;
   	 font-family:Arial;
     font-size:1.2em;
     color: rgb(70,122,167);
   	}
 
 
	#top header h2{
   	 padding-left:0px; padding-right:0; padding-top:0; padding-bottom:0px;
  	 font-family:Arial;
     font-size:0.9em;
     color: rgb(70,122,167);
	}

	article header h2{
   	 font-size:1.3em;
     font-family:Arial;
     font-weight: bold;
	}

	
	article header h3{
	  font-size:1.0em;
      font-family:Arial;
      font-weight:bold;
	}

	article teaserliste h4{
	  font-size:1.0em;
      font-family:Arial;
      font-weight:bold;
      color:#2a5a7a;
	}



	#slider_container_2{
		display: none;
	}	
	
	#sidebar{
		display: none;
	}	
	
	feature h3{
    	padding-left:20px; padding-right:0; padding-top:0; padding-bottom:0px;
	    font-size:1.2em;
	}	
	
	feature p{
    	padding-left:20px; padding-right:0; padding-top:0; padding-bottom:0px;
    	font-size:1.0em;
	}	

}

 
 


/* ----------------- content--------------------- */
section:before {
    height: 0;
    content: ".";
    display: block;
    clear: both;
  visibility:hidden;
  }

section#content {
float: left;
width: 75%;
padding: 20px;
background:#fff;
min-height:600px;
}



p, pre{
padding:  0 0 20px;
line-height:1.5em;
}
ul{
	list-style-type:none;
	line-height:1.5em;
}


article header{
	background:#fff;
	padding:0;
	}
	
article footer{
	border-bottom: 1px solid #564B47;
	color:#564B47;
	padding:0 0 20px;
	margin:0 0 20px;
}

article header h2{
  padding-left:0px; padding-right:0; padding-top:0; padding-bottom:0px;
  font-family:Arial;
  font-weight: bold;
   color:#467aa7;
   background:#fff;
   padding:0;
}

article header h3{
  padding-left:0px; padding-right:0; padding-top:0; padding-bottom:0px;
   color:#2a5a7a;
   background:#fff;
   padding:0;
}

article teaserliste h4{
  padding-left:0px; padding-right:0; padding-top:0; padding-bottom:0px;
   color:#2a5a7a;
   background:#fff;
   padding:0;
}


article ul{
	list-style-type:disc;
	padding: 0 0 0 10px;
}



/* -------------- side infos ------------- */

aside {
padding:20px;
float:right;
width: 25%;
}


articleside header{
	background:#2a5a7a;
	color:#FFFFFF;
	padding-left:10px;
}
	
articleside footer{
	border-bottom: 5px solid #564B47;
	color:#564B47;
	padding:0 0 10px;
	margin:0 0 20px;
}

articleside header h2{
   color:#000000;
   background:#fff;
}


/* -----------footer--------------------------- */
footer.footer {
padding: 20px;
clear:both;
background-color: #564B47;
background: linear-gradient(rgb(27, 79, 124) 0%, rgb(10, 29, 46) 100%);
color:white;
font-size: 1em; 
margin-top: 3px; 
box-sizing: border-box; -moz-box-sizing: border-box;
}

footer a {
	color: white;
	}

.footer-segment {
    display: inline-block;
    vertical-align: top;
    width: 32%;
}



/* -----------feature--------------------------- */
feature.feature{
padding: 20px;
clear:both;
background-color: #eee;
color:#555;
border-top:1px solid #ccc;border-bottom:1px solid #ccc;
}

feature a {
	color: #999; text-decoration:none;
	}
feature h2 {
    color:#467aa7;
	padding: 0
	}
.feature-segment {
    display: inline-block;
    vertical-align: top;
    width: 48%;
}






/* -------------------- Media Queries -------------------- */


@media only screen and (max-width: 860px) { 
.desc::before {content: "max 860 wide.";}
 #top header, nav {
    float:none;
    width:100%;
  }
  nav {
    padding:0;
  } 
  nav ul {
    float:none;
  }
  nav li {
    float: left;
    margin: 0;
    width:25%;
  } 
}



@media only screen and (max-width: 768px) { 

.desc::before {content: "max 768 wide.";}
section#content {
float: none;
width: 100%;
padding: 20px;
}

aside {
padding:20px;
float: none;
width: 100%;
}

.footer-segment {
    display: inline-block;
    vertical-align: top;
    width: 49%;
	padding: 0 0 20px;
}

.footer-segment:last-child {
    border-top:1px solid #999;
    display: block;
    width: 100%;
	padding:20px 0 0 ;
}


.feature-segment {
    display: inline-block;
    vertical-align: top;
    width: 49%;
	padding: 0 0 20px;
}

.feature-segment:last-child {
    border-top:1px solid #999;
    display: block;
    width: 100%;
	padding:20px 0 0 ;
}

}





@media only screen and (max-width: 480px) { 

footer.footer {
padding: 0;
}

  .footer-segment, .footer-segment:last-child  {
    display: block;
    vertical-align: top;
    width: 100%;
	border-bottom:1px solid #999;
	padding:20px;
}




feature.feature{
padding: 0;
}

  .feature-segment, .feature-segment:last-child  {
    display: block;
    vertical-align: top;
    width: 100%;
	border-bottom:1px solid #999;
	padding:20px;
}



 .sidebarbox {margin:0 0 25px 0;background-color:#fff; border:1px solid #467aa7;}


}




/* HOPPE Eintragungen------------------------- */


#testversion-button {
	left: 0px; width: 240px; height: 65px; bottom: 0px; position: fixed; background-image: url('testversion.png');
	}
	
#aktionspreis-button {
	left: 0px; width: 240px; height: 65px; bottom: 0px; position: fixed; background-image: url('aktionspreis.png');
	}		

/* HOPPE Eintragungen------------------------- */

#suchform input#q {
	padding: 0.2em; width: 6.5em;
}
#suchform input#s {
	padding: 0.2em; width: 6.5em;
}


.searchform {
	background: rgb(255, 255, 255); margin: 0px !important; padding: 2px 4px; display: inline-block;
}

.searchform input {
	font-size: 1.2em;
}
.searchform {
	width: 100%;
}

.searchform .searchfield {
	 background: rgb(255, 255, 255) ;
	 border-radius: 2em; border: 1px solid rgb(188, 187, 187); 
	 border-image: none; width: 65% !important; 
	 padding-left:20px; padding-right:0px; 
	 padding-top:5px; padding-bottom:5px
}


.rahmen .searchform .searchfield {
	width: 90% !important;
}

.searchform .searchbutton {
  font-family: Arial;
  color: #ffffff;
  font-size: 1.2em;
  background: #3498db;
  padding: 4px 4px 4px 4px;
  text-decoration: none;
}

.searchform .searchbutton:hover {
  background: #3cb0fd;
  text-decoration: none;
}

.searchbutton:focus {
	background: linear-gradient(rgb(238, 238, 238), rgb(102, 102, 102)) !important; color: rgb(51, 51, 51) !important; text-shadow: 0px 1px 1px #fff;
}
.searchform img {
	margin-bottom: -3px;
}
.entry {
	background: linear-gradient(rgb(255, 255, 255), rgb(204, 204, 204)); padding: 2px 5px 3px; border-radius: 2em; border: 1px solid rgb(221, 221, 221); border-image: none;
}