/* CSS-Reset */
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset,img { 
	border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}

caption,th {
	text-align: left;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
q:before,q:after {
	content: "";
}
abbr,acronym {
	border: 0;
}

/* Easy clearing */
/* Slightly enhanced, universal clearfix hack 
.group:after {
	content: " ";
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
}

.group {
	display: block;
}
/* close commented backslash hack */

/* Grundeinstellungen die gesamte Seite betreffend */
html {
	font-size: 100%;
}
ol,ul {
	list-style: none;
}
.group {
	display: inline-block;
}
/* start commented backslash hack */
 html .group {
	height: 1%;
}
/*Smartphones*/
@media only screen and (max-width: 768px) {
body {font-family: Arial, Helvetica, sans-serif;
	padding: 1%;
}

#left {}
#yard {}
#bottom {
	position:fixed;
	top:85%;
	bottom:0px;
	width:100%;
	height:90px;
	overflow:visible;
	z-index:200;
}
.infos {max-width:98%!important;max-height:98%;overflow:hidden;z-index:0;margin:-20px 0 20px 0;}
#right {position:fixed;
	top:85%;
	bottom:0px;
	width:100%;
	height:90px;
	overflow:visible;
	z-index:200;
}
.billbo,#halfpage {width:0px;height:0px;overflow:hidden;z-index:0;}

#page { width: 98%;background-color:#FFF;}
.menuemitte {
        clear: both;
        width: 0%;
        height: 0px;
        /*twitter verschwinden lassen*/
    }
    #kokosbg {
        background: url('gifs/cocos/kokosaffe.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
        margin-left: 15%;
        margin-right: 15%;
    }
    .mobilbild {
        width: 50% !important;
        height: 50% !important;
        margin-left: 15%;
        margin-right: 15%;
        margin-top: 150px;
        /*Abstand zum Text drunter*/
    }
    /* ===[ Kopfbereich mit dem Schriftzug ]=== */
    #header {
        background: url('gifs/technik/schrift.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
        margin: 1% auto;
        height: 80px;
        display: block;
        text-indent: -9999em;
    }
    /* ===[ Seitenleiste ]=== */
    #aside {
        clear: both;
		width: 96%;
        padding: 0;
        margin: 0 2%;
        list-style-type: none;
    }
        #aside .nav { line-height: 100%; }
        #aside li { position:inherit; }
        #aside a {
            display: block;
            height: auto;
        }
           #aside a span {
                position: absolute;
                left: -9999em;
            }
    /* texte in den Links werden verschoben */
    /* ===[ Navigation ]=== */
    #nav1 a,
    #nav2 a,
    #nav3 a,
    #nav4 a,
    #nav5 a,
    /*#nav6 a,*/
	#nav6 a {
        width: 29%;
        display: block;
        margin: 0 2%;
        height: 100px;
        z-index: 2;
    }
    #nav1 a {
        background: url('gifs/technik/but1.gif') no-repeat;
        float: left;
        background-size: 100%;
        max-width: 100%;
    }
    #nav1 a:hover,
    #nav1 a:focus {
        background: url('gifs/technik/but1b.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
    }
    #nav2 a {
        background: url('gifs/technik/but2.gif') no-repeat;
        float: left;
        background-size: 100%;
        max-width: 100%;
    }
    #nav2 a:hover,
    #nav2 a:focus {
        background: url('gifs/technik/but2b.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
    }
    #nav3 a {
        background: url('gifs/technik/but3.gif') no-repeat;
        float: right;
        background-size: 100%;
        max-width: 100%;
    }
    #nav3 a:hover,
    #nav3 a:focus {
        background: url('gifs/technik/but3b.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
    }
    #nav4 a {
        background: url('gifs/technik/but4.gif') no-repeat;
        float: left;
        background-size: 100%;
        max-width: 100%;
    }
    #nav4 a:hover,
    #nav4 a:focus {
        background: url('gifs/technik/but4b.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
    }
    #nav5 a {
        background: url('gifs/technik/but5.gif') no-repeat;
        float: left;
        background-size: 100%;
        max-width: 100%;
    }
    #nav5 a:hover,
    #nav5 a:focus {
        background: url('gifs/technik/but5b.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
    }
  /*  #nav6 a {
        background: url('gifs/technik/but6.gif') no-repeat;
        float: right;
        background-size: 100%;
        max-width: 100%;
    }
    #nav6 a:hover,
    #nav6 a:focus {
        background: url('gifs/technik/but6b.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
    }*/
	
	/*Zusammenführung Zweitseite*/
	#nav6 a {
        background: url('gifs/technik/bananenbuta.gif') no-repeat;
        float: right;
        background-size: 100%;
        max-width: 100%;
    }
    #nav6 a:hover,
    #nav6 a:focus {
        background: url('gifs/technik/bananenbutb.gif') no-repeat;
        background-size: 100%;
        max-width: 100%;
    }	
		
#zweitSeite a {background: url('gifs/technik/ban1.gif') 0px 0 no-repeat;background-size: 0%; max-width: 0%;
	text-indent: -9999em;
}

#zweitSeite a:hover,  zweitSeite a:focus{
	background: url('gifs/technik/ban2.gif') 0px 0 no-repeat; background-size: 0% ;max-width: 0%;
}
			
    /* ===[ Inhaltsbereich ]=== */
#content {
	clear:both;
	float:left;
	line-height:180%;
	font-size:120%;
	width: 94%;
	padding: 3%; 
	text-align: justify;
	background-color:#FFF;
}
	

    /* ===[ Bildwechsel bei hover ]=== */
   
        #content .imgContainer1 {
            max-width: 70%!important;
            margin: 10px auto 10px -160px;
        }
        #content .imgContainer3,
        #content .imgContainer5,
        #content .imgContainer7,
        #content .imgContainer9 {
            max-width: 90%!important;
            margin: 5%;
        }
		
.bildrechts,
.bildlinks,
.bildlinks2,
.bildrechts2 {
    clear: both;
	display:block;
	width:auto;
	margin-left:auto;
	margin-right:auto;
    margin-top:5%;
	margin-bottom:5%;
}
    /* ===[ Weiter ]=== */
    #weiter-rechts {
        clear: both;
        text-align: center;
        width: 90%;
        margin: 30px auto;
        font-size: 16px;
    }
  	
  #strich {
	clear:both;font-size:15px;text-align:center; margin:30px auto;line-height:140%;}

  #footer{clear:both;margin:50px auto; text-align:center;color:#000;font-family:Verdana;font-size:14px;}
  #footer a,#footer a:hover,#footer a:visited,#footer a:active{font-weight:normal;}

 
  #medcontainer {clear:both;width:98%;text-align:center;margin:10px 1% 60px 1%;padding:10px 1% 60px 1%;}
  
  

#media3, #media4{
	clear:none;
	float:left;
	height:20px;
	text-align:center;
	margin:2%;
	padding:0 5% 0 5%;
	width:35%;
	}
	
	

/* Sitemap */
#sitemap{background:none; height:auto; margin:0 2%;width:100%;padding:2%;background-color:#FFF;font-size:18px;} 

#sitemap .ol{padding-left:15px;line-height:2.0em;/*1.5* wenn nur Ü*/}
#sitemap a,#sitemap a:visited{font-weight:normal;}


/*Redaktion*/
 .eins{clear:both;float:left;width:30%;margin-bottom:30px;}
 .zwei{clear:none;float:right; width:64%;position:relative;top:0px;margin-bottom:30px;margin-left:10px;}

.info_text  {
	/* identisch mit textklein */
	font-size: 0.875em; /* 14/16 */
	line-height: 1.43; /* 20/14 */
}
.photolinks{max-width:100%;}


}


/* ===[ Bildschirme ]=== */
@media only screen and (min-width: 768px) { 
    body {
        font-family: "Comic Sans MS", Helvetica, Arial, sans-serif;
        line-height: 1.8;
        /* 21/16 */
        padding: 0;
        /*behavior: url("csshover3.htc");*/
        background: url(gifs/cocos/kokos-bg.jpg) repeat;
    }
/*  #universum {
	position:relative;
	width:1285px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	padding: 0px;
	border:0;
	overflow:visible;
}*/
   #universum {
        position: relative;
        width: 980px;
        height: 100%;
        margin: 0 auto 0 auto;
        border: 0;
        overflow: visible;
}


   #page {
	width: 980px; 
	position: relative;
	float:left;
	margin-top: 5px;
	margin-left:auto;
	background-color: #FFF;
	border-top:1px solid #804040;
}
    .infos {
        clear:both;
        overflow: inherit;
        text-align: center;
    }
    .white { background-color: #FFF }
    .ausgleich {
        margin-bottom:10px;
        
    }
	
	/*ausgleich border-bottom: thin solid #630;*/
    #kokosbg {
        background: url('gifs/cocos/kokosaffe.gif')  0 0 no-repeat;
		height:510px;
        margin-top: 45px;
        margin-left: 100px;
        margin-bottom: 20px;
		padding:0 0 20px 0;
    }
    /* ===[ Skyscraper ]===
       ================================================== */
   #right {
        position:absolute;
        left: 980px;
        top: 0px;
        width: 5px;
        height: 100%;
        bottom: 0px;
        background: url('gifs/technik/rand-rechts.gif') repeat-y;
        display: block;
        overflow: visible;
    }
	
#sky {	
	position:absolute;
	left:985px;
	margin-right:auto;
	text-align:left;
	top: 0px;
	bottom:0px;
	width:300px; 
	height:100%;
	display:block;
	overflow:visible;
}
#halfpage {
	top: 5px;
	height:600px;
	bottom:auto;
}
#middlepage {position:relative;bottom:5px;top:auto;}
#untenweiter {
	position:absolute;
	bottom:150px;
	top:auto;
	height:250px;
}
    .kursivmed {
        font-size: 13px;
        font-style: italic;
        font-weight: bold;
    }
    .menuemitte {
        top: 700px;
        margin: 70px auto auto 40px;
    }
    #left {
        left: -3px;
        top: -1px;
        float: right;
        width: 3px;
        height: 100%;
        top: 0px;
        bottom: 0px;
        background: url('gifs/technik/rand-links.gif') repeat-y;
        background-repeat: repeat-y;
        display: block;
        position: absolute;
        overflow: visible;
        z-index: 0;
    }
    #yard {
       clear:both;
	   width:983px;
	   margin:0px -2px 5px -1px; 
	   height:3px;
	   padding:0px 0px 5px 0px;
       background: url('gifs/technik/rand-unten.gif') 0 0 no-repeat;
       text-align: center;
       float: inherit;
       display: block;
       position: absolute;
       overflow: visible;
       z-index: 0;
    }
	#bottom {
	clear:both;
	width:983px;
	/*align:center;*/
	float:inherit;
	height:100px;
	position:absolute;
	overflow:visible;
	margin:5px auto 10px auto;
	/*padding:5px auto 10px auto;*/
}
    /* ===[ Kopfbereich mit dem Schriftzug ]===
       ================================================== */
    #header {
        background: url('gifs/technik/schrift.gif') 0 0 no-repeat;
        height: 80px;
        width: 630px;
        display: block;
        margin-left: 200px;
        margin-top: 22px;
		margin-bottom: 10px; /*neu*/
        text-indent: -9999em;
    }
	
	/* Zweitseite weiterleiten */
	
#zweitSeite a {background: url('gifs/technik/ban1.gif') 0px 0 no-repeat;
	clear:none;
	float:right;
	width:100px;
	height:100px;
	margin-top: -80px;
	/*padding: 0px -25px 0px 10px;*/
	display: block;
	overflow:visible;
	z-index:11;
	text-indent: -9999em;
}

#zweitSeite a:hover,  zweitSeite a:focus{
	background: url('gifs/technik/ban2.gif') 0px 0 no-repeat;
}	
	
	
    /* ===[ Seitenleiste ]===
       ================================================== */
    #aside {
        clear:left;
		float: left;
        width: 130px;
        padding: 40px 20px 0 30px;
        overflow: visible;
        z-index: 2;

    }
        #aside .nav { line-height: 1.25; }
        #aside li { position: relative; }
        #aside a {
            display: block;
            height: 95px;
        }
            #aside a span {
                position: absolute;
                left: -9999em;
            } /* texte in den Links werden verschoben  */
    /* ===[ Navigation ]===
       ================================================== */
    #nav1 a {
        background: url('gifs/technik/but1.gif') 0 0 no-repeat;
        display: block;
    }
    #nav1 a:hover,
    #nav1 a:focus { background: url('gifs/technik/but1b.gif') 0 0 no-repeat }
    #nav2 a {
        background: url('gifs/technik/but2.gif') 0 0 no-repeat;
        display: block;
    }
    #nav2 a:hover,
    #nav2 a:focus { background: url('gifs/technik/but2b.gif') 0 0 no-repeat }
    #nav3 a {
        background: url('gifs/technik/but3.gif') 0 0 no-repeat;
        display: block;
    }
    #nav3 a:hover,
    #nav3 a:focus { background: url('gifs/technik/but3b.gif') 0 0 no-repeat }
    #nav4 a {
        background: url('gifs/technik/but4.gif') 0 0 no-repeat;
        display: block;
    }
    #nav4 a:hover,
    #nav4 a:focus { background: url('gifs/technik/but4b.gif') 0 0 no-repeat }
    #nav5 a {
        background: url('gifs/technik/but5.gif') 0 0 no-repeat;
        display: block;
    }
    #nav5 a:hover,
    #nav5 a:focus { background: url('gifs/technik/but5b.gif') 0 0 no-repeat }
  
	#nav6 a {
        background: url('gifs/technik/bananenbuta.gif') 0 0 no-repeat;
        display: block;
    }
    #nav6 a:hover,
    #nav6 a:focus { background: url('gifs/technik/bananenbutb.gif') 0 0 no-repeat }
	
	
	/*Quiz*/
	
	 /* #nav6 a {
        background: url('gifs/technik/but6.gif') 0 0 no-repeat;
        display: block;
    }
    #nav6 a:hover,
    #nav6 a:focus { background: url('gifs/technik/but6b.gif') 0 0 no-repeat }*/
	
    /* ===[ Inhaltsbereich ]===
       ================================================== */
    #content {
        float: left;
        width: 690px;
        padding: 30px 25px 0 35px;
        text-align: justify;
        color: #400000;
        background-color:#FFF;
    }
    /* ===[ Bildwechsel bei hover ]===*/
   
        #content .imgContainer1 { margin: 10px }
        #content .imgContainer3 {
            float: right;
            margin: 10px 0px 10px 10px;
        }
        #content .imgContainer5 {
            float: right;
            margin: 10px 0px 10px 10px;
        }
        #content .imgContainer7 {
            float: left;
            margin: 10px 10px 10px 0px;
        }
        #content .imgContainer9 {
            float: right;
            margin: 10px 0px 10px 10px;
        }
   
    .bildrechts {
        margin: 5px 0px 5px 10px;
		float:right;
    }
    .bildlinks {
        margin: 5px 10px 5px 0px;
		float:left;
    }
    .bildlinks2 {
        margin: 0px 10px 5px 0px;
		float:left;
    }
    .bildrechts2 {
        margin: 0px 0px 5px 10px;
		float:right;
    }
    /* ===[ Weiter ]===
       ================================================== */
    #weiter-rechts {
        text-align: right;
        margin: 20px 35px 40px 0px;
        font-size: 1.05em;
        display: block;
    }
	#strich {
    font-size: 0.95em;
    text-align: center;
    padding: 20px;
}
    /* ===[ Footer ]===
       ================================================== */
#footer{clear:both;padding:40px 10px 0px 10px;margin:30px 0px 0px 0px; text-align:center;color:#000;font-family:Verdana;font-size:0.88em;}
#footer a,#footer a:hover,#footer a:visited,#footer a:active{font-weight:normal;}


#medcontainer {clear:both;text-align:center;margin:20px 50px 20px 180px;padding:20px;}

  /* linkedin Xing */
 #media3, #media4{
	float:left;
	width:80px;
	text-align:center;
	margin-left:40px;
	padding: 0 0 20px 0;
}	
	
	/* Sitemap */
#sitemap{background-color:#FFF;border:1px #630; height:870px; margin:0 auto;width:720px;padding:15px 15px 0px 15px;color:#000;} 
#sitemap .ganz{float:left;width:675px;height:auto/*40px* wenn nur Ü*/;margin:15px;padding:10px 10px 10px 10px;background-color:#FFF;}
#sitemap .ol{padding-left:12px;line-height:1.8;/*1.5* wenn nur Ü*/}
#sitemap a,#sitemap a:visited{font-weight:normal;}


/*Redaktion*/
 .eins{clear:right;float:left;width:150px;margin-bottom:30px;margin-left:50px;}
 .zwei{clear:none;float:right; width:400px;position:relative;top:0px;margin-bottom:30px;margin-left:30px;margin-right:50px;}

.info_text  {
	font-size: 1.0em;
	line-height: 1.6em; 
}
.photolinks {
	margin: 10px;
}

	
}

 /* ===[ Bildwechsel bei hover ]===*/
 #img2,
    #img4,
    #img6,
    #img8,
    #img10 { display: none }
    #content .imgContainer1:hover #img1,
    #content .imgContainer1:focus #img1 { display: none }
    #content .imgContainer1:hover #img2,
    #content .imgContainer2:focus #img2 { display: block }
    #content .imgContainer3:hover #img3,
    #content .imgContainer3:focus #img3 { display: none }
    #content .imgContainer3:hover #img4,
    #content .imgContainer4:focus #img4 { display: block }
    #content .imgContainer5:hover #img5,
    #content .imgContainer5:focus #img5 { display: none }
    #content .imgContainer5:hover #img6,
    #content .imgContainer6:focus #img6 { display: block }
    #content .imgContainer7:hover #img7,
    #content .imgContainer7:focus #img7 { display: none }
    #content .imgContainer7:hover #img8,
    #content .imgContainer8:focus #img8 { display: block }
    #content .imgContainer9:hover #img9,
    #content .imgContainer9:focus #img9 { display: none }
    #content .imgContainer9:hover #img10,
    #content .imgContainer10:focus #img10 { display: block }


/* ===[ Überschriften ]===
   ================================================== */
h1 {
    font-size: 1.375em;
    font-weight: bold;
    margin-bottom: 10px;
}
h2 {
    font-size: 1.125em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}
h3 {
    font-size: 1.0625em;
    font-weight: bold;
    margin: 5px 0 5px 0;
}
/* ===[ Hyperlinks ]===
   ================================================== */
a,
a:link {
    color: #00C;
    font-weight: bold;
    text-decoration: none;
}
a:visited { color: #906 }
a:active { text-decoration: underline }
a:focus,
a:hover {
    color: #F00;
    text-decoration: underline;
}
a:focus,
a:active {
    /*-moz-outline: none;*/
    outline: 0 none;
}
.info_text {
    font-size: 0.875em;
    line-height: 1.03;
}
.announce {
    color: #F00;
    font-size: 1.5em !important;
    line-height: 1.43;
}
.klein { font-size: 0.75em }
.text-kursiv { font-style: italic }
.weiter_links { text-align: left }
.weiter-cent { text-align: center }
a.nobold { font-weight: normal }

.tabellenhead {
    padding: 4px;
    margin: 4px;
    text-align: left;
    font-weight: bold;
}
.tabellenzelle {
    padding: 3px;
    margin: 4px;
    text-align: left;
}
#content .btnRow { text-align: right }
    #content .btnRow a { text-decoration: underline }

.strich {
	font-family: Helvetica, Arial, sans-serif;
}