@charset "utf-8";
/* CSS Document */

* {
	margin:0px;
	padding: 0px;
}

body {
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	background-color:#2e2418;
}

#container {
	position:relative;
	margin:20px auto;
	width:1280px;
	height:800px;
	background-image:url(bilder/hg/hg.jpg);
}

h1.start {
	position: absolute;
	top: 620px;
	text-indent: -9999px;
	width: 304px;
	height: 174px;
	background-image: url(bilder/hg/logo.png);
}

div.startseite a {
	position: absolute;
	top: 610px;
	text-indent: -9999px;
	width: 304px;
	height: 174px;
}

ul li {
	list-style:none;
}

ul li a {
	text-indent:-9999px;
}


/*#########################################################################################
#######################                NAVI STARTSEITE       ##############################
###########################################################################################*/

ul.aboutme {
	position: absolute;
	left: 317px;
	top: 26px;
	width: 328px;
}

ul.aboutme li a {
	display:block;
	width: 328px;
	height: 380px;
	background-image: url(bilder/navi_start/about_me.png);
}

ul.aboutme li a:hover {
	background-image: url(bilder/navi_start/about_me_hover.png);
}

ul.pictures {
	position: absolute;
	left: 700px;
	top: 26px;
	width: 328px;
}

ul.pictures li a {
	display:block;
	width: 335px;
	height: 390px;
	background-image: url(bilder/navi_start/pictures.png);
}

ul.pictures li a:hover {
	background-image: url(bilder/navi_start/pictures_hover.png);
}

ul.contact {
	position: absolute;
	left: 317px;
	top: 415px;
	width: 328px;
}

ul.contact li a {
	display:block;
	width: 311px;
	height: 372px;
	background-image: url(bilder/navi_start/contact.png);
}

ul.contact li a:hover {
	background-image:url(bilder/navi_start/contact_hover.png);
}

ul.imprint {
	position: absolute;
	left: 700px;
	top: 415px;
	width: 328px;
}

ul.imprint li a {
	display:block;
	width: 307px;
	height: 368px;
	background-image: url(bilder/navi_start/imprint.png);
}

ul.imprint li a:hover {
	background-image:url(bilder/navi_start/imprint_hover.png);
}

/*################   ENDE NAVI STARTSEITE      ####################################*/


a.navi_aboutme {
	display:block;
	float:left;
	text-indent:-9999px;
	width:328px;
	height:102px;
	background-image:url(bilder/navi_seiten/about_me.png);
}

a.navi_aboutme:hover {
	background-image:url(bilder/navi_seiten/about_me_hover.png);
}

a.aktivlink_aboutme {
	cursor:default;
	display:block;
	float:left;
	text-indent:-9999px;
	cursor:default;
	width:328px;
	height:102px;
	background-image:url(bilder/navi_seiten/about_me_hover.png)
}

a.navi_pictures {
	display:block;
	float:left;
	text-indent:-9999px;
	width:311px;
	height:102px;
	background-image:url(bilder/navi_seiten/pictures.png);
}

a.navi_pictures:hover {
	background-image:url(bilder/navi_seiten/pictures_hover.png);
}

a.aktivlink_pictures {
	display:block;
	float:left;
	text-indent:-9999px;
	cursor:default;
	width:311px;
	height:102px;
	background-image:url(bilder/navi_seiten/pictures_hover.png)
}


a.navi_contact {
	display:block;
	float:left;
	text-indent:-9999px;
	width:307px;
	height:102px;
	background-image:url(bilder/navi_seiten/contact.png);
}

a.navi_contact:hover {
	background-image:url(bilder/navi_seiten/contact_hover.png);
}

a.aktivlink_contact {
	cursor:default;
	display:block;
	float:left;
	text-indent:-9999px;
	cursor:default;
	width:307px;
	height:102px;
	background-image:url(bilder/navi_seiten/contact_hover.png)
}


a.navi_imprint {
	display:block;
	float:left;
	text-indent:-9999px;
	width:307px;
	height:102px;
	background-image:url(bilder/navi_seiten/imprint.png);
}

a.navi_imprint:hover {
	background-image:url(bilder/navi_seiten/imprint_hover.png);
}

a.aktivlink_imprint {
	cursor:default;
	display:block;
	float:left;
	text-indent:-9999px;
	cursor:default;
	width:308px;
	height:102px;
	background-image:url(bilder/navi_seiten/imprint_hover.png)
}

/*###################################################################################
###################################################################################*/

div#aboutme {
	width: 800px;
	height: 544px;
	min-width: 0px;
	top: 150px;
	left: 300px;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(bilder/hg/aboutme.png);
}

div#aboutme p {
	white-space:pre;
	-webkit-transform: rotate(355deg);
    -moz-transform: rotate(355deg);
    -o-transform: rotate(355deg);
    writing-mode: lr-tb;
	margin-top:116px;
	margin-left:50px;
}

div#aboutme p strong {
	font-size:20px;
}

/*###########################       Galerie         ###############################*/

div.postit {
	position:absolute;
	top:300px;
	left:100px;
	width:200px;
	height:200px;
	background-image:url(bilder/hg/post-it.png);
	
}

div.postit p {
	display:block;
	padding:40px 20px 20px 30px;
	width:200px;
	height:200px;
	-webkit-transform: rotate(355deg);
    -moz-transform: rotate(355deg);
    -o-transform: rotate(355deg);
    writing-mode: lr-tb;
	/*font-family: 'Architects Daughter', cursive;*/
	font-size:18px;
	color:#009;
}

div.fb {
	position:absolute;
	top:120px;
	left:1150px;
	width:75px;
	height:75px;
	background-image:url(bilder/facebook-logo.png);
}

div.fb:active {
	background-image:url(bilder/facebook-logo_aktiv.png);
}

div.fb a {
	display:block;
	width:75px;
	height:75px;
	text-indent:-9999px;
}


/*###########################       Formular        ###############################*/

div#contaktformular {
	width: 786px;
	height: 500px;
	position: absolute;
	top: 150px;
	left: 300px;
	background-image:url(bilder/hg/postkarte.png);	
}

div#adresse {
	float:right;
	margin-top: 115px;
	margin-right:100px;
	margin-bottom: 10px;
	width: 300px;
	height: 300px;
}

#textfeld {
	width:300px;
	margin-top:50px;
	margin-left:30px;
	width:300px;
	height:400px;
}

p#briefmarke {
	position:absolute;
	top:20px;
	left:570px;
	display:block;
	width:200px;
	height:148px;
	background-image:url(bilder/hg/briefmarke.png);
}

p#briefmarke:hover {
	background-image:url(bilder/hg/briefmarke-hover.png);
}

p.anrede {
	margin-bottom: 10px;
	width: 300px;
	height: 25px;
	text-align: right;
}

p.vorname {
	margin-bottom: 10px;
	height: 25px;
	text-align: right;
}

#vorname {
	border:none;
	border-bottom: 3px dotted #000000;
	width:170px;
	height:22px;
	background:none;
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	color:#009;
}
#vorname:focus {
	background-color:rgba(255,255,255,0.40);
}

p.nachname {
	margin-bottom: 10px;
	height: 25px;
	text-align: right;
}

#nachname {
	border:none;
	border-bottom: 3px dotted #000000;
	width:170px;
	height:22px;
	background:none;
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	color:#009;
}

#nachname:focus {
	background-color:rgba(255,255,255,0.40);
}

p.strasse {
	margin-bottom: 10px;
	height: 25px;
	text-align: right;
}

#strasse {
	border:none;
	border-bottom: 3px dotted #000000;
	width:170px;
	height:22px;
	background:none;
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	color:#009;
}

#strasse:focus {
	background-color:rgba(255,255,255,0.40);
}

p.plz {
	margin-bottom: 10px;
	height: 25px;
	text-align: right;
}

#plz {
	border:none;
	border-bottom: 3px dotted #000000;
	width:170px;
	height:22px;
	background:none;
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	color:#009;
}

#plz:focus {
	background-color:rgba(255,255,255,0.40);
}

p.ort {
	margin-bottom: 10px;
	height: 25px;
	text-align: right;
}

#ort {
	border:none;
	border-bottom: 3px dotted #000000;
	width:170px;
	height:22px;
	background:none;
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	color:#009;
}

#ort:focus {
	background-color:rgba(255,255,255,0.40);
}

p.email {
	margin-bottom: 10px;
	height: 25px;
	text-align: right;
}

#email {
	border:none;
	border-bottom: 3px dotted #000000;
	width:170px;
	height:22px;
	background:none;
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	color:#009;
}

#email:focus {
	background-color:rgba(255,255,255,0.40);
}

p.sternchen {
	float:right;
	display: block;
	margin-right: 100px;
	margin-bottom: 10px;
	width: 300px;
	height: 30px;
	text-align: right;
}



#nachricht {
	width:270px;
	height:315px;
	border:none;
	background:none;
	padding:10px;
	font-family: 'Architects Daughter', cursive;
	font-size:16px;
	color:#009;
}

#nachricht:focus {
	background-color:rgba(255,255,255,0.40);
}

.texteingabe {
	padding:5px;
}

p.texteingabefeld {
	padding:5px;	
}

/*##################       Impressum       #######################################*/

div.impressum {
	position:absolute;
	width:800px;
	height:602px;
	top:150px;
	left:320px;
	padding:40px;
	background-repeat:no-repeat;
	background-image:url(bilder/hg/papier.png)
}

div.impressum p {
	display:block;
	width:740px;
	height:502px;
	white-space:pre-line;
	font-size:16px;
	overflow:auto;
}

div.impressum p strong {
	font-size:18px;
}