body {
	background-color: #036;
}
#haupt {
	height: 600px;
	width: 600px;
	margin-top: -300px;
	margin-left: -300px;
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px solid #FFF;
}
#offenes  {
	position: absolute;
	height: 600px;
	width: 600px;
	color: #6FF;
	background-image: url(bilder/offenesa1.png);
	background-repeat: no-repeat;
	top: 50%;
	left: 50%;
	margin-top: -300px;
	margin-left: -300px;
}

#haupt #adresse {
	font-family: "Comic Sans MS", cursive;
	color: #303;
	position: absolute;
	height: 100px;
	width: 200px;
	right: -206px;
	bottom: 286px;
	z-index: 10;
}
#haupt #kosten {
	font-family: "Comic Sans MS", cursive;
	color: #303;
	position: absolute;
	height: 52px;
	width: 150px;
	right: -173px;
	bottom: 420px;
	z-index: 10;
	text-align: center;
	vertical-align: middle;
}

#haupt #logo {
	background-image: url(bilder/logo-creativ-treff.png);
	position: absolute;
	width: 318px;
	height: 200px;
	top: 0px;
	background-repeat: no-repeat;
	left: 464px;
	
}
#haupt #formular {
	height: 600px;
	width: 600px;
	margin-top: -300px;
	margin-left: -300px;
	position: absolute;
	left: 50%;
	top: 50%;
}

#haupt #navi {
	display: block;
	position: absolute;
	height: 400px;
	width: 100px;
	left: -200px;
	top: 0px;
}
#haupt #navi  a {
	z-index: 100;
	display: block;
}

#haupt #navi a.home {
	display: block;
	background-image: url(bilder/button/home.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 200px;
}
#haupt #navi a.offenesatelier {
	background-image: url(bilder/button/offatelier.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 200px;
}
#haupt #navi .offenesatelier:hover {
	background-image: url(bilder/button/offatelier_hover.png);
	background-repeat: no-repeat;
}

#haupt #navi a.kidskurse {
	background-image: url(bilder/button/kidskurseferien.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 200px;
}
#haupt #navi .kidskurse:hover {
	background-image: url(bilder/button/kidskurseferien_hover.png);
	background-repeat: no-repeat;
}

#haupt #navi a.einzelunt {
	background-image: url(bilder/button/einzelu.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 200px;
}
#haupt #navi .einzelunt:hover {
	background-image: url(bilder/button/einzelu_hover.png);
	background-repeat: no-repeat;
}

#haupt #navi a.dasbesondere {
	background-image: url(bilder/button/dasgeschenk.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 200px;
}
#haupt #navi .dasbesondere:hover {
	background-image: url(bilder/button/dasgeschenk_hover.png);
	background-repeat: no-repeat;
}

#haupt #navi a.kinderg {
	background-image: url(bilder/button/kinderg.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 200px;
}
#haupt #navi .kinderg:hover {
	background-image: url(bilder/button/kinderg_hover.png);
	background-repeat: no-repeat;
}
#haupt #navi2 {
	position: absolute;
	height: 140px;
	width: 150px;
	bottom: 60px;
	display: block;
	right: -150px;
	z-index: 90;
}
#haupt #navi3 {
	position: absolute;
	height: 80px;
	width: 600px;
	bottom: 20px;
	display: block;
	z-index: 100;
	left: 0px;
}
#haupt #navi3 a {
	display: block;
	float: left;
}
#haupt #navi3 a.modell {
	background-image: url(bilder/button/modellierennavi.png);
	background-repeat: no-repeat;
	height: 100px;
	width: 200px;
}
#haupt #navi3 .modell:hover {
	background-image: url(bilder/button/modellierennavi_hover.png);
	background-repeat: no-repeat;
}
#haupt #navi3 a.malen {
	background-image: url(bilder/button/malennavi.png);
	background-repeat: no-repeat;
	height: 100px;
	width: 200px;
}
#haupt #navi3 .malen:hover {
	background-image: url(bilder/button/malennavi_hover.png);
}
#haupt #navi3 a.filzen {
	background-image: url(bilder/button/filzennavi.png);
	background-repeat: no-repeat;
	height: 100px;
	width: 200px;
}
#haupt #navi3 .filzen:hover {
	background-image: url(bilder/button/filzennavi_hover.png);
}

#haupt #navi2 a {
	display: block;
}
#haupt #navi2 a.anfahrt {
	background-image: url(bilder/button/anfahrt.png);
	background-repeat: no-repeat;
	height: 70px;
	width: 1500px;
}
#haupt #navi2 .anfahrt:hover {
	background-image: url(bilder/button/anfahrt_hover.png);
}

#haupt #navi2 a.imp {
	background-image: url(bilder/button/imp.png);
	background-repeat: no-repeat;
	height: 70px;
	width: 150px;
}
#haupt #navi2 .imp:hover {
	background-image: url(bilder/button/imp_hover.png);
}
#haupt #navi2 .kontakt:hover {
	background-image: url(bilder/button/kontakt_hover.png);
}

#haupt #navi2 a.kontakt {
	background-image: url(bilder/button/kontakt.png);
	background-repeat: no-repeat;
	height: 70px;
	width: 150px;
}


#haupt #navi .home:hover {
	background-image: url(bilder/button/home_hover.png);
	display: block;
}
#haupt #einzelunter {
	background-image: url(bilder/einzel_hindergrund.png);
	position: absolute;
	height: 600px;
	width: 600px;
	top: 0px;
	background-repeat: no-repeat;
}
#haupt #einzelunter #bild {
	position: absolute;
	width: 150px;
	top: -20px;
	right: -130px;
	z-index: -5;
}
#haupt #einzelunter #bild2 {
	width: 150px;
	top: 0px;
	right: -260px;
	position: absolute;
	z-index: -15;
}



#haupt #umschlag {
	background-image: url(bilder/umschlag.png);
	position: absolute;
	height: 600px;
	width: 600px;
	background-repeat: no-repeat;
	bottom: 10px;
	left: -10px;
}#haupt #briefpapier {
	background-image: url(bilder/papier-ged.png);
	background-repeat: no-repeat;
	height: 890px;
	width: 790px;
	right: -230px;
	bottom: -390px;
	position: absolute;
}#haupt #formular {
	position: absolute;
	height: 600px;
	width: 600px;
	font-family: boopee, Verdana, Geneva, sans-serif;
	font-size: 30px;
	color: #303;
}
#haupt #ausfuellen {
	position: absolute;
	height: 100px;
	width: 400px;
	top: 0px;
	right: -200px;
	background-repeat: no-repeat;
	background-image: url(bilder/ausfuellen.png);
}

#haupt #umschlag #formular table  {
	text-align: left;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	font-family: boopee, Verdana, Geneva, sans-serif;
}
 #haupt  #formular  table  input {
	background-color: transparent;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-style: double;
	border-left-style: double;
	color: #2A00AA;
	font-weight: bold;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-color: #FF0;
	border-left-color: #FF0;
	z-index: 20;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
}

 #haupt  #formular table textarea {
	background-color: transparent;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #FF5;
	border-right-color: #FF0;
	border-bottom-style: double;
	border-left-style: double;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-color: #00F;
	color: #FF0;
	font-weight: bold;
	border-left-color: #00F;
	font-size: 16px;
	font-family: Verdana, Geneva, sans-serif;
	height: 200px;
	width: 310px;
}
.tabelle {
	height: 520px;
	width: 600px;
	right: 0px;
	bottom: 0px;
	font-family: "Comic Sans MS", cursive;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
}
.td {
	font-family: Verdana, Geneva, sans-serif;
	width: 200px;
	font-size: 16px;
	color: #2A0000;
	text-align: center;
	border: 1px solid #FFF;
	vertical-align: middle;
	height: 124px;
}
.td3 {
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
	vertical-align: middle;
	height: 147px;
	width: 252px;
}

.td2 {
	font-family: "Comic Sans MS", cursive;
	font-size: 24px;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	height: 124px;
	width: 200px;
	border: 1px double #FF3;
}
.td4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
	height: 114px;
	border: 1px solid #FFF;
}
.tabelle a {
	color: #FF0;
	text-decoration: none;
	font-size: 24px;
	border: 1px solid #FF0;
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
}
#haupt #tabelleeinzel {
	font-family: "Comic Sans MS", cursive;
	font-size: 18px;
	width: 1000px;
	left: 40%;
	color: #003;
	text-align: center;
	vertical-align: middle;
	margin-top: -500px;
	margin-left: -500px;
	top: 1195px;
	position: absolute;
}

#haupt #offenes {
	position: absolute;
	height: 672px;
	width: 1324px;
	top: -79px;
	font-family: "Comic Sans MS", cursive;
	font-size: 18px;
	color: #000;
	left: -398px;
}
#haupt #hindergrund {
	position: absolute;
	height: 600px;
	width: 800px;
	top: 0px;
	background-image: url(bilder/karin_puste.png);
	background-repeat: no-repeat;
	right: -800px;
	z-index: -10;
}
#haupt #logoklein{
	background-image: url(bilder/logo-creativ-treff_klein.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 61px;
	width: 100px;
	right: 103px;
	bottom: 5px;
}
#haupt #tabellemodellieren {
	width: 1000px;
	position: absolute;
	top: 1192px;
	font-family: "Comic Sans MS", cursive;
	font-size: 18px;
	color: #003;
	text-align: center;
	vertical-align: middle;
	left: 212px;
	margin-top: -500px;
	margin-left: -500px;
}
.tdtabellenmod {
	background-color: #099;
	height: 250px;
	width: 250px;
	border: 1px solid #FFF;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
}
.td2tabellenmod {
	height: 250px;
	width: 250px;
	text-align: center;
	vertical-align: middle;
}
#haupt #hindergrundkids {
	background-image: url(bilder/mageritten.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 600px;
	bottom: 0px;
	width: 319px;
	right: -319px;
	z-index: -10;
}
.tdtabelleneinz {
	background-color: #099;
	height: 200px;
	width: 200px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border: 1px solid #FFF;
	text-align: center;
	vertical-align: middle;
}
.td2tabelleneinz {
	text-align: center;
	vertical-align: middle;
	padding: 20px;
	height: 200px;
	width: 200px;
}
#nachoben {
	font-family: "Comic Sans MS", cursive;
	font-size: 16px;
	position: fixed;
	height: 50px;
	width: 200px;
	right: -90px;
	bottom: 0px;
}