/* ===========================================
	Allgemeine Formatierungen
============================================== */



body {
  background-color: #fefef1;	
  color: #FFF;
  padding: 0;
  margin: 0;
  font: 100.01% 'Trebuchet MS', Arial, Helvetica, sans-serif;
  text-align: center;	
  min-width: 760px;
}

	
h1 {
	font-size: 1.2em;
	font-weight: normal;
	padding: 0;
	margin: 0 0 0.6em 0;
}

img {
    border: none;
}

a:link, a:visited {
	text-decoration: none;
	color: #FFF;
	background-color: transparent;
}

a.nogo:link, a.nogo:visited {
	cursor: default;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
li {
	margin: 0;
	padding: 0;
}
*/

p {
	margin: 0;
	padding: 0;
/*
	letter-spacing: 0.04em;
	word-spacing: 0.1em;
	line-height: 1.3em;
*/

}

.auto {
	overflow: auto;
}

#tooltips {
	display: none;

}


/* 	==========================================
	Layout und Navigation
	========================================== */



#site {	
  	width:760px;
	vertical-align: middle;
	text-align: left;
	margin: 20px auto;
  	padding: 0;
	position: relative;	
}

#frame { 	
 	padding: 0;
 	height: 570px;
 	background-color: #CC0001;
 	color: #FFF;
	position: relative;
}

#navi {
	text-align: left;
	margin-bottom: 4px;
	white-space: nowrap;
}

#navi li {
	display: inline;
}

#navi li a, #navi span {
	padding-right: 2em;
	padding-left: 1em;

}

#navi a:link, #navi a:visited, #footer a:link, #footer a:visited, #navi span, #footer span{	
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	background-color: inherit;
	color: #CC0001;
}

#navi a:focus, #navi a:hover, #navi a:active, #footer a:focus, #footer a:hover, #footer a:active, #navi span, #footer span {
	background-color: inherit;	
	color: #ee0000;	
}

#footer {
	text-align: right;	
}

/*	==================================================
	Textformatierungen
	================================================== */

.content {
	padding: 2px 1em 1em;
	background-color: #CC0001;
	color: #FFF;
	font-size: 0.9em;
}

.content p {
	padding: 0;
	margin-top: 0;
	margin-bottom: 0.4em;
}	

.bare {
	margin: 3.5em 0 0;

}

/*	==================================================
	Startseite
	================================================== */
	
#hover_text {
	width: 660px;
	padding: 1em;
	background-color: #fb49e4;
	color: white;

}

area {
	cursor: default;
}

img#start  {
	cursor: default;
}

/*	==================================================
	Bilderseiten
	================================================== */
	
#sub_navi {
	text-align: left;
	margin-bottom: 2em;
}

#sub_navi.text {
	margin-bottom: 1.7em;
}

#sub_navi li {
	display: inline;
}

#sub_navi li a, #sub_navi span {
	padding-right: 2em;
	padding-left: 1em;
	border-right: 1px solid #FFF;
}

#sub_navi li a#illu_start, #sub_navi span#illu_start,
#sub_navi li a#malerei_start, #sub_navi span#malerei_start {
	border-right: none;
}	

#sub_navi a:link, #sub_navi a:visited, 
#sub_navi span 
{	
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #fff;
	background-color: inherit;
}

#sub_navi a:focus, #sub_navi a:hover, #sub_navi a:active, 
#sub_navi span 
{
	color: #ee0000;	
	background-color: inherit;
}



/*	--------------------------------------------------------------
	Bilderteppich												*/

.bilderteppich {
	padding: 6px 0 12px 0;
	margin: 0 0 12px 0;
	width: 740px;	
}

.bilderteppich img {
	float: left;
	margin: 0 0 12px 10px;
	border: 1px solid #FFF;
}


/*	-------------------------------------------------------
	Spaltenlayout mit Bildcontainern					*/

.text_spalte {
	width: 35%;
	float: left;
	margin: 0;
	padding: 0;
	background-color: #CC0001;
	color: #FFF;
}

.img_spalte {
	width: 60%;
	float: left;
	margin: 0;
	padding: 0;
	background-color: #CC0001;
	color: #FFF;
}

.img_container {
	margin: 6px 0 1em 1em;
	text-align: right;
}

.img_container_w {
	margin: 6px 0 1em 1em;
	text-align: right;
}

.img_container a {
	height: 250px;
	width: auto;	
	display: block;
	cursor: default;
}

.img_container_w a {
	height: 310px;
	width: auto;
	display: block;
	cursor: default;
}

.img_container a span, .img_container_w a span {
	display: none;
}

.floatEnd {
	clear: both;
}


/*	-------------------------------------------------
	Vermischtes										*/
	
	.mix {
		width: 740px;
		margin: 0;
		padding: 0;
	}
	
	.mix .left_row {
		width: 49%;
		float: left;
		text-align: right;
	}
	
	.mix .right_row {
		width: 49%;
		float: right;
		text-align: left;		
	}
	
	.mix img {
		vertical-align: top;
		margin-bottom: 2.5em;
	}


	
	.mix .right_row img {
		margin-left: 1em;
	}


/* 	-------------------------------------------------
	Kueche                                           */



#kueche a#b1:hover img.preview, #kueche a#b3:hover img.preview {
	top: -25px;
}

#kueche a#b2:hover img.preview {
	top: -50px;
}

#kueche a#a1 img.outer {
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
}

#kueche a#b1 img.outer {
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}

#kueche a#a2 img.outer {
	border-top: 1px solid #FFF;
}

#kueche a#b2 img.outer {
	border-bottom: 1px solid #FFF;
}

#kueche a#a3 img.outer {
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
}

#kueche a#b3 img.outer {
	border-right: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}

/* 	................................................
	Kinder
	................................................ */
	
	.img_container#emil1 a:link, .img_container#emil1 a:visited {
		background: url(../img/emil1.gif) 100% 0 no-repeat;
	}
	
	.img_container#emil1 a:hover {
		background: url(../img/emil1.gif) 100% -250px no-repeat;
	}	
	
	.img_container#emil2 a:link, .img_container#emil2 a:visited {
		background: url(../img/emil2.gif) 100% 0 no-repeat;
	}

	.img_container#emil2 a:hover {
		background: url(../img/emil2.gif) 100% -250px no-repeat;
	}	
	
	.img_container#emil3 a:link, .img_container#emil3 a:visited {
		background: url(../img/emil3.gif) 100% 0 no-repeat;
	}

	.img_container#emil3 a:hover {
		background: url(../img/emil3.gif) 100% -250px no-repeat;
	}	
	
	.img_container_w#nicki1 a:link, .img_container_w#nicki1 a:visited {
		background: url(../img/nicki1.gif) 100% 0 no-repeat;
	}

	.img_container_w#nicki1 a:hover {
		background: url(../img/nicki1.gif) 100% -310px no-repeat;
	}

	.img_container_w#nicki2 a:link, .img_container_w#nicki2 a:visited {
		background: url(../img/nicki2.gif) 100% 0 no-repeat;
	}

	.img_container_w#nicki2 a:hover {
		background: url(../img/nicki2.gif) 100% -310px no-repeat;
	}
	
	.img_container_w#nicki3 a:link, .img_container_w#nicki3 a:visited {
		background: url(../img/nicki3.gif) 100% 0 no-repeat;
	}

	.img_container_w#nicki3 a:hover {
		background: url(../img/nicki3.gif) 100% -310px no-repeat;
	}
	
	.img_container_w#nicki4 a:link, .img_container_w#nicki4 a:visited {
		background: url(../img/nicki4.gif) 100% 0 no-repeat;
	}		

	.img_container_w#nicki4 a:hover {
		background: url(../img/nicki4.gif) 100% -310px no-repeat;
	}
	
	.img_container_w#nicki5 a:link, .img_container_w#nicki5 a:visited {
		background: url(../img/nicki5.gif) 100% 0 no-repeat;
	}		

	.img_container_w#nicki5 a:hover {
		background: url(../img/nicki5.gif) 100% -310px no-repeat;
	}	
		
	.img_container_w#otto2 a:link, .img_container_w#otto2 a:visited {
		background: url(../img/otto2_new2.gif) 100% 0 no-repeat;
	}
	
	.img_container_w#otto2 a:hover {
		background: url(../img/otto2_new2.gif) 100% -310px no-repeat;
	}
	
	.img_container#otto3 a:link, .img_container#otto3 a:visited {
		background: url(../img/otto3.gif) 100% 0 no-repeat;
	}
	
	.img_container#otto3 a:hover {
		background: url(../img/otto3.gif) 100% -250px no-repeat;
	}	
	
	.img_container_w#otto3a a:link, .img_container_w#otto3a a:visited {
		background: url(../img/otto3_new.gif) 100% 0 no-repeat;
	}
	
	.img_container_w#otto3a a:hover {
		background: url(../img/otto3_new.gif) 100% -310px no-repeat;
	}
	
	.img_container_w#sessel a:link, .img_container_w#sessel a:visited {
		background: url(../img/kinderaufsessel.gif) 100% 0 no-repeat;
	}
	
	.img_container_w#sessel a:hover {
		background: url(../img/kinderaufsessel.gif) 100% -310px no-repeat;
	}	
	
	.img_container_w#schultuete a:link, .img_container_w#schultuete a:visited {
		background: url(../img/schule1.gif) 100% 0 no-repeat;
	}
	
	.img_container_w#schultuete a:hover {
		background: url(../img/schule1.gif) 100% -310px no-repeat;
	}
	
	.img_container#pflaster a:link, .img_container#pflaster a:visited {
		background: url(../img/pflaster.gif) 100% 0 no-repeat;
	}
	
	.img_container#pflaster a:hover {
		background: url(../img/pflaster.gif) 100% -250px no-repeat;
	}	
	
	.img_container#sophia a:link, .img_container#sophia a:visited {
		background: url(../img/sophia.gif) 100% 0 no-repeat;
	}
	
	.img_container#sophia a:hover {
		background: url(../img/sophia.gif) 100% -250px no-repeat;
	}	

/*	================================================
	Wandmalerei
	================================================ */
	
#wandBlume {
	height: 756px;
	width: 596px;
	position: relative;
	top: 50px;
	left: 70px;
}

#wandBlume a img.hoverImg {
	display: none;
}

#wandBlume a#hummel img {
	position: absolute;
	top: -50px;
	right: -50px;
}

#wandBlume a:hover img.hoverImg {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
}


		

/* 	================================================
	Linkseite
	================================================ */

.content a:link, .content a:visited, #frame dl dt a:link, #frame dl dt a:visited {

	font-variant: normal;	
	text-decoration: none;
	font-size: 1em;	
	color: #FFF;
	background-color: inherit;	
}

.content a:focus, .content a:hover, .content a:active {
	text-decoration: underline;	
}

#links .content ul {
	margin-bottom: 2em;
}



/* 	==============================================
	Kontaktformular
	============================================== */

#kontakt {
	margin-top: 2em;
	color: #fefef1;
}

#kontakt textarea {
	height: 150px;	
	width: 90%;
	padding: 0.5em;
	font-family: cursive;
	font-size: 0.8em;
}

#kontakt textarea, #kontakt input {
	background-color: #CC0001;
	color: #fff;
	border: 1px dotted #fefef1;
}

#kontakt textarea:focus, #kontakt textarea:hover , #kontakt input:focus, #kontakt input:hover {
	background-color: #fefef1;
	color: #cc0001;
}

#kontakt fieldset {
	border: 1px solid #fefef1;
	padding: 1em;
	width: 80%;
}

#kontakt legend {
	border: 1px dotted #fefef1;
	padding: 0.3em;
	font-weight: bold;
}

#kontakt input.submit {
	background-color: #CC0001;
	border: 1px dotted #fefef1;
	color: #fefef1;
	cursor: pointer;
	margin-top: 1em;
	padding: 0.3em;
	font-weight: bold;	
}

#kontakt input.submit:focus, #kontakt input.submit:hover, #kontakt input.submit:active {
	background-color: #fefef1;
	color: #CC0001;
}

#kontakt #von {
	margin-bottom: 1em;
}

#kontakt input#name {
	margin-right: 1em;
}

#kontakt #formmail {
	font-size: 0.7em;
	text-align: right;
	margin: 0;
}

/*	=================================================================
	Ueber mich	
	=================================================================	*/

#profil .content ul {
		list-style: circle;
		padding: 0 0 2em 1em;
	}

#profil #signature {
	vertical-align: top;
}

#profil img#portrait {
	margin-left: 240px;
	border: 1px solid #FFF;
}


/*	=================================================================
	Impressum		
	=================================================================	*/
	
.content #impressum {
		width: 10em;
		height: 10em;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -5em auto auto -5em;
	}

#sign {
	position: absolute;
	top: 550px;
	right: 1em;
	font-size: 0.7em;
}

#sign a:link, #sign a:visited {
	text-decoration: none;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}

#sign a:hover {
		text-decoration: underline;
}