<style>
/* General Style */ 
body {
background:#FFFFFF; font-size:100%; font-family:Helvetica;
margin:0em; padding:0em;  max-width:100%;	
} a{color:#0000FF;} a:hover { color: #bb800f; }
a:visited { color:#0000BF; }
h1 { font-size:1.0em; color:#000000;}  h2 { font-size:1.0em; color:#000000;}
img { width:90%; height:auto;max-width:90%;}
/* On Top Bar */ 
#menubar { display:block; text-align:center; background:#ffffff; }
#menubar ul { display:block; width:1.8em; padding:0.0em; margin-bottom:0.5em;}
#menubar img { max-width:20px; padding-left:20px;} #menubar ul li {display:inline; } #menubar ul li a.menubutton 
{display:none; max-width:20px;}

/* Header */ 
#header{background:url(http://www.handwerkernet.de/handwerk-2014.jpg);background-repeat:no-repeat;margin-top:-1.0em;background-position:center top;background-size:contain;width:100%;height:168px;}

#header img{max-width:800px;max-height:100px;text-align:center;box-shadow:0px 0px 5px -5px #4c4948;border-radius:5px;}
img{width:90%;height:auto;max-width:800px}

/* Navigation */ 
nav {
display:block; height:auto; background:#A2B7CA; text-align:center;
margin-bottom:1.0em; box-shadow:0px 0px 2px 1px #4c4948; border-radius:5px;}
nav ul { display:block ;margin:0em; padding:0em; }
nav ul li { display:inline; list-style:square; margin:0em 0.4em 0em 0.01em; }
nav ul li a {color:#000000; font-size:1.0em; line-height:1.800em; padding:0.263em 0.238em 0.275em 0.238em; transition:background 0.2s; 
-webkit-transition:background 0.2s; }

nav ul li a:hover { background:#678198; border-bottom:0.188em solid #6E8BA5; }
nav ul li a.active { border-bottom:0.188em solid #6E8BA5; }
/* Navigation-a */ 
ul#Navigation-a 
{
margin: 0; padding: 0.4em; margin-bottom:0.8em; margin-top:0.4em; box-shadow:0px 0px 2px 1px #4c4948; border-radius:5px;
text-align:left;  width:100%; background:#A2B7CA;}
ul#Navigation-a li { list-style: none; display: inline; margin:0.4em; }

 #media{width:100%;margin-bottom:1.0em;margin-top:0.2em;
 height:auto;background:#A2B7CA;display:-webkit-flex;display:flex;flex-direction:row;float:left;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
 
#media img{max-width:35px;}

 
/* Sprite button.png handwerker-nach-plz-include*/
 

 .solo-2google, .solo-3youtube, .solo-4twitter, .solo-5pinteres, .solo-6instagram, 
.solo-facebook-55
{max-width: 100%; margin:0.5em 1.0em 0.5em 1.0em; background-size: 100%;  background-image: url('../include/button-index.png'); }
 
.solo-2google { background-position: 0 0%; background-size: 100%; }
.solo-3youtube { background-position: 0 20%; background-size: 100%; }
.solo-4twitter { background-position: 0 40%; background-size: 100%; }
.solo-5pinteres { background-position: 0 60%; background-size: 100%; }
.solo-6instagram { background-position: 0 80%; background-size: 100%; }
.solo-facebook-55 { background-position: 0 100%; background-size: 100%; }


#ueber { margin-bottom:0.2em;  text-align:center; width:95%; } 
#plz-bereich{ clear:both;  margin-bottom:0.5em; background:#A2B7CA; padding-left:5%; text-align:left; width:95%; box-shadow:0px 0px 2px 1px #4c4948; border-radius:5px;}
#orte { clear:both; padding-left:5%; text-align:left; width:95%; background:#A2B7CA; box-shadow:0px 0px 2px 1px #4c4948; border-radius:5px;}

.responsive-video{position:relative;padding-bottom:56.25%;padding-top:20px;height:0;overflow:hidden}
.responsive-video iframe{position:absolute;top:0;left:0;width:96%;height:96%;margin-right:0px;box-shadow:5px 5px 2px 1px #A2B7CA;border-radius:5px}


#anfang-inhalt  
{ width:100%;  clear:both;  height:auto;  margin-top:2.0em;
display:-webkit-flex; 
display:flex; 
display:-ms-flexbox;
flex-direction:row; 
justify-content:space-between;
-ms-flex-pack: justify;  
box-sizing:border-box; 
-ms-box-sizing: border-box; 
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;}
#index, #mitte {vertical-align:top; margin:0em; float:left; background:#ffffff; }
#handwerkerseite  {vertical-align:top; margin:0em }
#handwerkerseite img  { max-width:180px; box-shadow:5px 5px 1px 2px #A2B7CA; border-radius:5px; margin-bottom:2.0em}
#index { width:25%; vertical-align:top;}
#mitte {width:35%; vertical-align:top;  margin-left:6.0em; word-wrap:break-word;}
#mitte img {max-width:330px; box-shadow:5px 5px 1px 2px #A2B7CA; border-radius:5px; margin-bottom:2.0em;  }


#rechte-spalte  { vertical-align:top; width:35%; float:right; background:#FFFFFF; margin-left:3.0em;  word-wrap:break-word;}
#rechte-spalte img {max-width:220px; box-shadow:5px 5px 1px 2px #A2B7CA; border-radius:5px; margin-bottom:2.0em}
#handwerkernews {vertical-align:top; margin:0em;}

#par { font-size:1.0em; line-height:1.800em; padding:0.263em 0.238em 0.275em 0.238em;}


#unten
{clear:both; display:inline-block; width:100%; background:#ffffff; vertical-align:top; margin:0em; text-align:center; }
#unten img { max-width:468px; } #footer { clear:both; text-align:left;}
#footer img { max-width:100px;} #button {width:100%;  clear:both; text-align:center;} #button img { max-width:120px;   }
#partner {width:100%;  clear:both; text-align:left;} #solomo {width:100%; max-height:300px; margin-bottom:1.0em; margin-top:0.4em; 
 background:#A2B7CA; display:-webkit-flex; display:flex; 
  box-shadow:0px 0px 1px 1px #4c4948; border-radius:5px; }
#solomo1, #solomo2, #solomo3, #solomo4, #solomo5, #solomo6, #solomo7
{ width:25px; height:auto; vertical-align:top; margin:0.8em 0.5em 0.6em 0.0em ; float:left; background:#A2B7CA;}
#solomo8 { width:200px; margin:1.025em 0.0em 0.625em 6.0em; }#solomo1{padding-left:5%;} #solomo img { max-width:25px;}



/* Mobile Style */ 
@media screen and (max-width: 800px) {
	body { font-size:100%; }  }
@media screen and (max-width: 600px) {

#header, #anfang-inhalt, #mitte, #rechte-spalte, #media, #unten, #unten-banner 

{width:100%; display:block; margin:0.625em 0em 0.625em 0.0em;  }
#mitte, #rechte-spalte
{width:96%; display:block; margin:0.625em 2.0% 0.625em 2.0%;  }
#header {background:url(http://www.handwerkernet.de/handwerk-2018.jpg) ; background-repeat: no-repeat; background-position: center  top; background-size: contain; width:100%; height:50px;}



 }
@media screen and (min-width: 550px) {
nav.nav { display:block !important; } }

@media screen and (max-width: 550px)
 { body { font-size:96%; } 
h1 {font-size:90%; } 
#header {font-size:10%; }
nav { display:none; height:auto; }

#menubar  {  margin:1.8em 0.0em 1.25em 0.0em; } 
#solomo8 {  margin:0.8em 0.0em 1.25em 2.0em; }  

#partner  { display:none; height:auto; }
#index {width:100%;} 
#unten{  margin:0.0em 0.0em 0.0em 0.0em;  line-height:1.8em} #index ul li  {  margin:1.2em 0.4em 0.8em 0.5em; } 
#header img { max-width:40% }

}
@media screen and (max-width: 360px) 
{
body { font-size:86%; }
h1 {font-size:90%; }
#menubar ul li a.menubutton { display:block; }
nav { display:none; height:auto; }


 .solo-2google, .solo-3youtube, .solo-4twitter, .solo-5pinteres, .solo-6instagram, 
.solo-facebook-55
{ max-width: 100%; margin:0.5em 0.5em 0.2em 0.5em; background-size: 100%; }
 
.solo-2google { background-position: 0 0%; background-size: 100%; }
.solo-3youtube { background-position: 0 20%; background-size: 100%; }
.solo-4twitter { background-position: 0 40%; background-size: 100%; }
.solo-5pinteres { background-position: 0 60%; background-size: 100%; }
.solo-6instagram { background-position: 0 80%; background-size: 100%; }
.solo-facebook-55 { background-position: 0 100%; background-size: 100%; }
#media img{max-width:30px;}
 }
 </style>