/* Formate und gestaltung für spezielle Elemente , die mit einer ID (# steht für ID) angesprochen werden */
body {    /* Individualformat für den body. Alles ist im body (div Container gelöscht) */
position: relative;
max-width: 940px;
margin: 0 auto;
}

#rahmenl{              /* Individualformat für den grauen Rahmen / Strich links # steht für id = einmalig zuweisbarer identifikator*/
  position: absolute;
  left:0;
  width: 20px;
  height: 100%;
  background-image: url(../img/schathgl20.jpg);
  }

#rahmenr{                /* grauer Rahmen / Strich rechts*/
  position: absolute;
  right:0;
  width: 20px;
  height: 100%;
  background-image: url(../img/schathgr20.jpg);
  }


header {
	max-width: 900px;   /* hier wurde width durch max-width:900px  ersetzt*/
	background: #ffffff;
	margin: 0 20px;
	border-bottom: 20px solid #848484;	
  }

#kopf {    /*  Kopf der Webseiten  */
width: 100%;
height: 150px;
position: relative; 
}

#hlogo {  /* neu: div für Firmenlogo im header , um header variabel/responsive zu gestalten*/
         margin-left: 1em;
         margin-top: 40px;
		 float: left;
	   }
#himg {  /* neu: div für Bild im header (Schattenpersonen), um header variabel/responsive zu gestalten*/
        margin-left: 42%;
      }

main { /* Format und Position für den Hauptbereich, alles unter header */
max-width:708px;
margin-left: 191px;
padding: 0 20px;
color: #000000;
background-color: #FFFFFF;
display: block;
}

section { /* Format und Positionierung für schmalere Textspalte im Hauptbereich main mit Element section zuweisen ex div content*/
 margin-right: 195px;
 line-height: 1.2em; }

/* Navigation */

/* Anfang Top-Navigation fuer weniger wichtige Basis-Links  */
#navitop {
position: absolute;
left: 30%;
top: 151px;
width: 100%;  /* umgestellt auf 100%  */
list-style-type: none;
z-index: 5;
font-size: 0.8em;
}
#navitop li {
display: inline;
}
#navitop a {
border-left: 1px solid #999999;
padding: 1px 4px 4px 4px;
color: #FFFFFF;
text-decoration: none;
}
#navitop a:focus, #navitop a:hover {
  text-decoration: underline;
  background: transparent url() 0 0;
}
#navitop a:active {
  color: silver;
  font-weight: bold;
}  
#navitop a:visited{ color:lightskyblue;
                    text-decoration: none;
				  }
/* Ende Top-Navigation fuer weniger wichtige Basis-Links  */

/* Anfang Haupt-Navigation links fuer die Produkte */
#navil {
position: absolute;
left: 20px;
top: 150px;
width: 169px;
height: 96%;
color: #000000;
font-weight: bold;
background: #EFEFEF url(../img/hg_navip.jpg) repeat-y;
 }

#pschild{
  color: #FFFFFF;
  font-weight: bolder;
  padding: 5px 0px 5px 8px;
  margin-bottom:0px;
  background-color: #4F4F4F;
  z-index: 7; }

#navili {
 border-top: 1px solid #999999;
 font-size: 0.8em;
 list-style: none;
 }

#navili a {
display:block;
color:#000000;
text-decoration: none;
padding: 5px 0px 7px 8px;
border-bottom: 1px solid #999999;
}

#navili a:focus, #navili a:hover {
color: #FFFFFF;
background: #d29b2a url(../img/buttons/hgbtnnavipli_d.jpg);
}
#navili a:active {
color: #FFFFFF;
border: 1px solid black;
border-left-color: white; border-top-color: white;
background: #d29b2a url(../img/buttons/hgbtnnavipli_d.jpg);
}
#navili a:visited {color: midnightblue;}

/* Anfang Sub-Navigation innerhalb der Seite */
li.csubn {list-style: none}
#subnav {border-bottom: 1px solid #999999;
         list-style: none;}

#subnav a {
 padding: 3px 8px;
 font-size: 0.8em;
 color:#000000;
 font-weight: normal;
 text-decoration:none;
 border: none;

 }

#subnav a:focus, #subnav a:hover, #subnav a:active{
 text-decoration:underline;
 color:#000000;
 font-weight: normal;
 border: none;
 background: #d29b2a url(../img/hg_navip.jpg);
 }
  /* Ende Sub-Navigation innerhalb der Seite */

#phkontap { /* Angaben zum Photo Kontaktperson */
 width: 130px;
 height: 161px;
 font-weight:normal;
 font-size: 0.8em;
 padding: 5px;}
 /* Ende Haupt-Navigation links fuer die Produkte */


/* Anfang Navigation fuer Knowledge Base rechts  */
#column {        /* Blaue Spalte mit Leser */
position: absolute;
right: 20px;
top: 150px;
width: 160px;
color: #FFFFFF;
background: #00264E;
padding: 5px 0px 5px 8px;}

#column a {   /* allg. Formatierungen von Links in der blauen Spalte mit Leser */
 color:#FFFFFF;
 text-decoration: none;
}
#column a:focus, #column a:hover, #column a:active {text-decoration: underline;}

#kbschild{
  font-weight: bolder;
  padding: 9px 2px 2px 2px;
  z-index: 7;  }  /* Level der Ebene Vordergrund  */
 

 
#navir a {
 margin: 12px 0px;
 display:block;}

ul#navirkb {
 font-size: 0.8em;
 list-style: none;
 line-height: 1.5em;
 font-weight: bold;
 margin: 10px 0px;
 }
 /* Ende Navigation fuer Knowledge Base rechts  */
 
 
 @media screen and (max-width: 900px) 
 {
	#rahmenl {display:none}
	#rahmenr {display:none}
    body {    /* Individualformat für den body. Alles ist im body (div Container gelöscht) */
           position: relative;
           max-width: 900px;
           margin: 0 auto;
         }
	header {
	         max-width: 900px;   /* hier wurde width durch max-width:900px  ersetzt*/
	         margin: 0px;
	         border-bottom: 20px solid #848484;	
           }
	main { /* Format und Position für den Hauptbereich, alles unter header */
	        padding: 0px;
			margin-left: 180px;
         }	
	#navil {
             position: absolute;
             left: 0px;
           }
    #column {        /* Blaue Spalte mit Leser */
              position: absolute;
              right: 0px;
            }
    	    
	 section { /* Format und Positionierung für schmalere Textspalte im Hauptbereich main mit Element section zuweisen ex div content*/
   	
             }
	#navili a {
                padding: 12px 0px 7px 8px;
              }		 
    #pschild{
              padding: 15px 0px 5px 8px;
            }
 
 }
 
  @media screen and (max-width: 700px) 
 {
   #column {display:none} /* Blaue Spalte mit Leser Hinweis aud knowledge base*/
   section { /* Format und Positionierung für schmalere Textspalte im Hauptbereich main mit Element section zuweisen ex div content*/
  		     width: 100%;
			 margin: 0px;
           }
 
 }