/* CSS-Reset */
body,div,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;
}
ol,ul {
	list-style: none;
}
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: inline-block;
}
/* start commented backslash hack \*/
* html .group {
	height: 1%;
}
.group {
	display: block;
}
/* close commented backslash hack */

/* Grundeinstellungen die gesamte Seite betreffend */
html {
	font-size: 100%; /* 16px */
}
body {
	font-family: "Comic Sans MS", Helvetica, Arial, sans-serif;
	line-height: 1.5; /* 21/16 */
	background-color: #999;
	padding: 10px 0;
	behavior: url("csshover3.htc");
}
#page {
	width: 1000px;
	margin: 0 auto;
	background-color: #fff;
}

/* Überschriften */
h1 {
	font-size: 1.375em; /* 22/16 */
	font-weight: bold;
	margin-bottom: 10px;
}
h2 {
	font-size: 1.125em; /* 18/16 */
	font-weight: bold;
	margin: 20px 0 10px 0;
}
h3 {
	font-size: 1.0625em; /* 17/16 */
	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;
}

.textklein  {
	font-size: 0.875em; /* 14/16 */
	line-height: 1.43; /* 20/14 */
}
.text-kursiv  {
	font-style: italic;
}
.weiter_links {
	text-align: left;
}
.weiter-cent {
	text-align: center;
}
a.nobold {
	font-weight: normal;
}
.strich {
	font-family: Helvetica, Arial, sans-serif;
}

.bildrechts {
	float: right;
	margin: 5px 0px 5px 10px;
}
.bildlinks {
    float:left;
	margin: 5px 10px 5px 0px; 
}
.bildlinks2 {
    float:left;
	margin: 0px 10px 5px 0px; 
}
.bildrechts2 {
	float: right;
	margin: 0px 0px 5px 10px;
}
.spinne{
	float: right;
	margin: 0px -147px 0px 0px;
}

/* Unternavigation/Sitemap */
.blau, .blau a:link {
	color: #006;
	font-weight: normal;
}
.blau a:visited  {
	color: #2894FF;
}
.blau a:hover, .blau a:focus {
	color: #03F;
}

.gruen, .gruen a:link {
	color: #030;
	font-weight: normal;
}
.gruen a:visited {
	color: #53A600;
}
.gruen a:hover, .gruen a:focus  {
	color: #008000;
}

.braun, .braun a:link {
	color: #280000;
	font-weight:normal;
}
.braun a:visited {
	color: #B6704E;
}
.braun a:hover, .braun a:focus {
	color: #972E00;
}

.rot, .rot a:link {
	color: #510000;
	font-weight:normal;
}
.rot a:visited  {
	color: #C30;
}
.rot a:hover, .rot a:focus {
	color: #F00;
}

.grau, .grau a:link {
	color: #000;
	font-weight:normal;
}
.grau a:visited  {
	color: #7A7A7A;
}
.grau a:hover, .grau a:focus {
	color: #822656;
}

/* Animation */
#ani {
	background: url('gifs/technik/wolli-animation198.gif') no-repeat;
	float: left;
	height: 110px;
	width: 198px;
	text-indent: -9999em;
}

/* Kopfbereich mit dem Schriftzug Baumwoll-Seite */
#header h1 a {
	background: url('gifs/technik/titel1.gif') no-repeat;
	height: 110px;
	width: 800px;
	display: block;
	margin-left: 200px;
	text-indent: -9999em;
}
#header h1 a:hover, #header h1 a:focus {
	background: url('gifs/technik/titel2.gif') no-repeat;
}

/* Spinne */
#spinne {
	background: url('gifs/technik/kleine-spinne-ani.gif') no-repeat;
	position: absolute;
	margin: -72px 0px 0px 730px;
	width: 27px;
	height: 165px;
}

/* Seitenleiste */
#aside {
	float: left;
	width: 200px;
}
#aside .nav {
	line-height: 1.25; /* 20/16 */
}
#aside li{position:relative;}
#aside a{display:block;height:129px;}
	
#aside a span{position:absolute;left:-9999em;} /*texte in den Links werden verschoben*/

/* Navigation */
#nav1 a{background: url('gifs/technik/t-shirt1a.gif') 0 0 no-repeat;display:block;}
#nav1 a:hover,#nav1 a:focus{background: url('gifs/technik/t-shirt1b.gif') 0 0 no-repeat;}

#nav2 a{background: url('gifs/technik/t-shirt2a.gif') 0 0 no-repeat;display:block;}
#nav2 a:hover,#nav2 a:focus{background: url('gifs/technik/t-shirt2b.gif') 0 0 no-repeat;}

#nav3 a{background: url('gifs/technik/t-shirt3a.gif') 0 0 no-repeat;display:block;}
#nav3 a:hover,#nav3 a:focus{background: url('gifs/technik/t-shirt3b.gif') 0 0 no-repeat;}

#nav4 a{background: url('gifs/technik/t-shirt4a.gif') 0 0 no-repeat;display:block;}
#nav4 a:hover,#nav4 a:focus{background: url('gifs/technik/t-shirt4b.gif') 0 0 no-repeat;}

#nav5 a{background: url('gifs/technik/t-shirt5a.gif') 0 0 no-repeat;display:block;}
#nav5 a:hover,#nav5 a:focus{background: url('gifs/technik/t-shirt5b.gif') 0 0 no-repeat;}

/* Unternavigation */
.subNav1,.subNav2,.subNav3,.subNav4,.subNav5{
	display: none;
	text-align: center;
	position: absolute;
	top: 0px;
	font-size: 0.6875em; /* 11/16 */
	font-family: Arial, Helvetica, sans-serif;
}
#nav1:hover .subNav1, #nav2:hover .subNav2, #nav3:hover .subNav3,#nav4:hover .subNav4,#nav5:hover .subNav5,
#nav1:focus .subNav1, #nav2:focus .subNav2, #nav3:focus .subNav3,#nav4:focus .subNav4,#nav5:focus .subNav5{display:block;}

.subNav1{
	left:160px;
	width:94px;
	padding:30px 0px;
}
.subNav2{
	left:130px;
	width:119px;
	padding: 25px 0px;
}
.subNav3{
	left:150px;
	width:102px;
	padding:35px 0px;
}
.subNav4{
	left:125px;
	width:111px;
	padding:35px 0px;
}
.subNav5{
	left:150px;
	width:104px;
	padding:50px 0px;
}

#aside .subNav1 a,#aside .subNav1 a:visited {background:none;height:auto;font-weight:normal;}
#aside .subNav2 a,#aside .subNav2 a:visited {background:none;height:auto;font-weight:normal;}
#aside .subNav3 a,#aside .subNav3 a:visited {background:none;height:auto;font-weight:normal;}
#aside .subNav4 a,#aside .subNav4 a:visited {background:none;height:auto;font-weight:normal;}
#aside .subNav5 a,#aside .subNav5 a:visited {background:none;height:auto;font-weight:normal;}
#aside .subNav1 a:hover,#aside .subNav1 a:focus,
#aside .subNav2 a:hover,#aside .subNav2 a:focus,
#aside .subNav3 a:hover,#aside .subNav3 a:focus,
#aside .subNav4 a:hover,#aside .subNav4 a:focus,
#aside .subNav5 a:hover,#aside .subNav5 a:focus{color:red;}

/* aktiver Unternavigationspunkt */
.nav ul.active{display:block;}
.nav a.active{color:red;} 

/* Hintergrundbild, Position etc fuer jenden Navigationspunkt einzeln anpassbar */
#nav1 .subNav1{background: url('gifs/technik/handtuch_blau.gif') 0px -1px no-repeat;}
#nav2 .subNav2{background: url('gifs/technik/handtuch_braun.gif') 0px -1px no-repeat;}
#nav3 .subNav3{background: url('gifs/technik/handtuch_grau.gif') 0px -1px no-repeat;}
#nav4 .subNav4{background: url('gifs/technik/handtuch_gruen.gif') 0px -1px no-repeat;}
#nav5 .subNav5{background: url('gifs/technik/handtuch_rot.gif') 0px -1px no-repeat;}


/* Inhaltsbereich */
#content {
	float: left;
	width: 690px;
	padding: 55px 55px 0 55px;
	color: #000;
	text-align: justify;
}

/* Laken Blau*/
.layout1 #content {background: url('gifs/technik/laken_blau-650.gif') 0 0 no-repeat;color:#006; }
.layout1a #content {background: url('gifs/technik/laken_blau-950.gif') 0 0 no-repeat;color:#006; }
.layout1b #content {background: url('gifs/technik/laken_blau-1150.gif') 0 0 no-repeat;color:#006; }
.layout1c #content {background: url('gifs/technik/laken_blau-1000.gif') 0 0 no-repeat;color:#006; }
.layout1d #content {background: url('gifs/technik/laken_blau-spinne-1550.gif') 0 0 no-repeat;color:#006; }
.layout1e #content {background: url('gifs/technik/laken_blau-badehose-1150.gif') 0 0 no-repeat;color:#006; }
.layout1f #content {background: url('gifs/technik/laken_blau-1200.gif') 0 0 no-repeat;color:#006; }
/* Laken Braun*/
.layout2 #content {background: url('gifs/technik/laken_braun-1000.gif') 0 0 no-repeat;color:#280000;}
.layout2b #content {background: url('gifs/technik/laken_braun-1550.gif') 0 0 no-repeat;color:#280000;}
.layout2c #content {background: url('gifs/technik/laken_braun-1300.gif') 0 0 no-repeat;color:#280000;}
.layout2d #content {background: url('gifs/technik/laken_braun_spinnerin-1650.gif') 0 0 no-repeat;color:#280000;}
.layout2e #content {background: url('gifs/technik/laken_braun-900.gif') 0 0 no-repeat;color:#280000;}
.layout2f #content {background: url('gifs/technik/laken_braun-1200.gif') 0 0 no-repeat;color:#280000;}
/* Laken Grau*/
.layout3 #content {background: url('gifs/technik/laken_grau-1150.gif') 0 0 no-repeat;color:#000;}
.layout3a #content {background: url('gifs/technik/laken_grau-1300.gif') 0 0 no-repeat;color:#000;}
/* Laken Grün*/
.layout4 #content {background: url('gifs/technik/laken_gruen-1000.gif') 0 0 no-repeat;color:#030;}
.layout4a #content {background: url('gifs/technik/laken_gruen-1200.gif') 0 0 no-repeat;color:#030;}
.layout4b #content {background: url('gifs/technik/laken_gruen-1350.gif') 0 0 no-repeat;color:#030;}
/* Laken Rot*/
.layout5 #content {background: url('gifs/technik/laken_rot1.gif') 0 0 no-repeat;color:#510000;height:685px;}
/* Laken Weiss*/
.layout0 #content {background: url('gifs/technik/laken_weiss1.gif') 0 0 no-repeat;color:#006; }


/* Bildwechsel bei hover */
/* :hover funktioniert im IE6 nur auf Links, ist dies fuer diesen Browser auch auf anderen Elementen gewuescht
   ist auf ein fix zurueck zu greifen z.B. http://www.iefix.org/ie-css-hover-effect-fix/ */
#content .imgContainer1{height:235px;width:350px;float:left;margin:10px 10px 10px 0;}
#content .imgContainer10{height:255px;width:200px;float:right;margin:10px 0px 10px 10px;}
#content .imgContainer3{height:272px;width:300px;float:right;margin:10px 0px 10px 10px;}
#img2, #img11, #img4{display:none;}

#content .imgContainer1:hover #img1,#content .imgContainer1:focus #img1{display:none;}
#content .imgContainer1:hover #img2,#content .imgContainer1:focus #img2{display:block;}

#content .imgContainer10:hover #img10,#content .imgContainer10:focus #img10{display:none;}
#content .imgContainer10:hover #img11,#content .imgContainer10:focus #img11{display:block;}

#content .imgContainer3:hover #img3,#content .imgContainer3:focus #img3{display:none;}
#content .imgContainer3:hover #img4,#content .imgContainer3:focus #img4{display:block;}

#content .btnRow{text-align:right;}
#content .btnRow a{text-decoration:underline;}

/* Wolli Weiter */
.weiter-rechts {
	text-align: right;
	margin: 0px 60px 0px 0px;
	padding:  0px 0px  0px  0px;
}
#wolliWeiter a {
	background: url('gifs/technik/wolli_weiter1.gif') 640px 0 no-repeat;
	height:60px;
	width:690px;
	margin: 10px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	display: block;
}
#wolliWeiter a:hover, #wolliWeiter a:focus {
	background: url('gifs/technik/wolli_weiter2.gif') 640px 0 no-repeat;
}


/* Vor-Zurück-Verweise*/
#vor-zurueck{
	text-align: center;
	margin:  0px 0 40px 0;
	font-size: 0.875em; /* 14/16 */
}
#vor-zurueck a,#vor-zurueck a:hover,#vor-zurueck a:visited,#vor-zurueck a:active{font-weight:normal;}



/* Footer*/  
#footer{clear:both;padding:10px;margin:10px;text-align:center;color:#000;font-family:Verdana;font-size:11px;}
#footer a,#footer a:hover,#footer a:visited,#footer a:active{font-weight:normal;}

/* Sitemap */
#sitemap{margin:0 auto;width:690px;padding:45px 45px 0px 45px;color:#000;}
#sitemap .blau{float:left;width:324px;height:250px; margin-top:10px;padding:0px 10px 10px 10px;background-color:#AAD5FF;text-align:left;font-size:16px;}
#sitemap .braun{float:right;width:330px;height:250px;margin-top:10px;padding:0px 5px 10px 10px;background-color:#D2BFB7;text-align:left;font-size:16px;}
#sitemap .grau{float:left;width:324px;height:190px; margin-top:1px;padding:0px 10px 10px 10px;background-color:#BCBCBC;text-align:left;font-size:16px;}
#sitemap .gruen{float:right;width:325px;height:190px;margin-top:1px;padding:0px 10px 10px 10px;background-color:#B3FFB3;text-align:left;font-size:16px;}
#sitemap .rot{float:left;width:670px;height:120px;margin-top:1px;margin-bottom:10px;padding:0px 10px 10px 10px;background-color:#FFB7B7;text-align:center;font-size:16px;}
#sitemap .ol{padding-left:12px;}
#sitemap a,#sitemap a:visited{font-weight:normal;}
.site_bg {
	background-image: url(http://www.baumwoll-seite.de/gifs/technik/bg1.gif);
	background-repeat: repeat;
	width:800px; border:0; align:center; padding:30px;
}
/*Sonstige Seiten*/
#ciao{margin:0 auto;width:690px;padding:45px 45px 0px 45px;color:#000;}
.layout0b #ciao {background: url('gifs/technik/laken_weiss2.gif') 0 0 no-repeat;color:#006; }

#buecher {background: url('gifs/technik/laken_weiss1200.gif') 0 0 no-repeat;color:#006;float:left;width:680px;height:1145px;padding:55px 55px 0 65px;color:#000;text-align:justify;}
#buecher .eins{float:left;width:140px;height:1030px; margin-top:10px;padding:0px 10px 0px 0px;}
#buecher .zwei{float:right;width:520px;height:1030px;margin-top:10px;padding:0px 10px 0px 0px;position:relative;top:0px;}

/*Redaktion*/
#redaktion {background: url('gifs/technik/laken_weiss1.gif') 0 0 no-repeat;color:#006;float:left;width:680px;height:910px;padding:55px 55px 0 65px;color:#000;text-align:justify;}
#redaktion .eins{float:left;width:140px;height:800px; margin-top:10px;padding:0px 10px 0px 0px;}
#redaktion .zwei{float:right;width:520px;height:800px;margin-top:10px;padding:0px 10px 0px 0px;position:relative;top:0px;}

.info_text  {
	/* identisch mit textklein */
	font-size: 0.875em; /* 14/16 */
	line-height: 1.43; /* 20/14 */
}
.photolinks {
    float:left;
	margin: 10px 10px 50px 0px; 
}


/* Die styles für's Quiz*/
/* Symbole für richtig und falsch */
.wrong {
	background: url(gifs/technik/wrong.gif) no-repeat;
	color: #F00;
}
.correct {
	background: url(gifs/technik/richtig.gif) no-repeat;
	color: #090;
}
.wrong, .correct {
  margin: 15px 60px 15px 10px;
  padding: 10px 0px 15px 55px;
}

.question_no {
	font-size: 0.9375em; /* 15/16 */
	margin: 15px 0 15px 10px;
}
.question_wrapper {
	margin: 15px 0 15px 20px;
}
.question {
	font-weight: bold;
	margin-left: -10px;
}
.resultat {
	margin: 20px 0 0 10px;
}
.quizwahl {
	font-size: 1.0625em; /* 17/16 */
	font-weight: bold;
	margin: 20px 0 15px 10px;
}
.hint {
	font-size: 0.875em; /* 14/16 */
	margin: 20px 0 15px 0;
}
.quiz .button {
	display: block;
	margin-top: 20px;
}