html, body {
 	height: 100%;
 	width: 100%;
 	margin: 0px;
 	padding: 0px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
	color: #333;
	/*background-color: #dfded9;*/
	background-color: #CAC6BB;
}

.clear {
	clear: both;
}

h1,h2,h2,h3,h4,h5 {
	margin: 0px;
	padding: 0px;
}

p {
	margin: 0px;
	padding-bottom: 10px;
}

ol, ul, li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

img, img a, img a:hover {
	border: none;
}

.mittig {
	text-align: center;
}

.left {
	float: left;
}

.right {
	float: right;
}

.fett {
	font-weight: bold;
}

a {
	text-decoration: none;
	color: #9B8D73; /*dunkelbeige*/
	outline: none;
}

a:hover {
/*	text-decoration: underline;*/
/*	color: #b2b3ad;*/ /*hellgrau*/
	color: #FF6600; /*orange*/
}

.content,
.content h1,
.content h2,
.content h3 {
	font-size: 10px;;
	color: #333;
	font-weight: normal;
	line-height: 130%;
}

.content ul li {
	background: url('img/strich.jpg') no-repeat left 5px;
	padding-left: 12px;
}

.content ul {
/*	margin-left: 14px;*/
}

.display {
	display: block;
}

.nodisplay {
	display: none;
}

/******************************************************************* Farben */

.orange {color: #FF6600;}
.grau {}
.lila_dunkel {color: #b1a4cc;}
.lila_hell {}
.pink {color: #DA558A;}



/*****************************************************************************
															Seitenaufbau
******************************************************************************/

#abstand {
	float: left;
	height: 50%;
	margin-bottom: -275px;
	width: 1px;
}

#main {
	width: 779px;
	height: 550px;
	background-color: #fff;
	margin: auto;
	clear: left;
	position: relative;
/*	overflow: hidden;*/
}

#navi {
	position: absolute;
	bottom: -40px;
	right: 0px;
	width: 100%;
	overflow: hidden;
}

#navi a.linkImpressum {
	color: #fff;
	float: left;
	font-weight: bold;
}

#navi a.linkImpressum:hover {
	color: #A29E92;
}

#navi .linkNavi {
	float: right;	
}

/*#home {
	position: absolute;
	bottom: 15px;
	right: 48px;
	background-color: #fff;
	padding: 5px 0 0 5px;
}

#vor_doppel {
	position: absolute;
	bottom: 15px;
	right: 11px;
	background-color: #fff;
	padding: 5px 0 0 5px;
}

#zurueck_doppel {
	position: absolute;
	bottom: 15px;
	right: 85px;
	background-color: #fff;
	padding: 5px 0 0 5px;
}*/


/*****************************************************************************
															Startseite
******************************************************************************/

#startseite {
	position: relative;
	background-color: #DF4128;
	height: 100%;
	width: 100%;
}

#home_startseite {
	position: absolute;
	top: 43px;
	right: 43px;
}

#logotitle {
	position: absolute;
	top: 300px;
	left: 30px;
}

#stoffregen {
	position: absolute;
	top: 300px;
	left: 30px;
}

#design_fuer_unternehmen {
	position: absolute;
	top: 335px;
	left: 168px;
}

/*****************************************************************************
									Übersicht / Positionierung der Images
******************************************************************************/

#uebersicht a {
	display: block;
}

#office {
	position: absolute;
	top: 0px;
	left: 0px;
}

#person {
	position: absolute;
	top: 50px;
	left: 0px;
}

#portfolio {
	position: absolute;
	top: 131px;
	left: 0px;
}

#kontakt {
	position: absolute;
	top: 177px;
	left: 0px;
}

#kkk,
#kkk_kinder_kunst {
	position: absolute;
	top: 418px;
	left: 0px;
}

#referenzen {
	position: absolute;
	top: 502px;
	left: 0px;
}


/*****************************************************************************
															Office
******************************************************************************/
 
#page_office .content {
	padding: 170px 50px 20px 200px;
	background: url("img/menschen.jpg") no-repeat 42px 174px;
 }

#page_office  .content .col_l {
	float: left;
	width: 200px;
	margin-right: 33px;
}

#page_office  .content .col_r {
	float: left;
	width: 200px;
}

/*****************************************************************************
															Person
******************************************************************************/

#page_person {
	height: 550px; 
	background: url("img/annettestoffregen.jpg") no-repeat 0 bottom;
}

#page_person .content {
	padding: 170px 50px 55px 213px;
}

/*****************************************************************************
															Portfolio
******************************************************************************/
 
#page_portfolio a {
 color: #b1a4cc; /*lila dunkel*/
}

#page_portfolio a:hover {
	color: #FF6600; /*orange*/
}
 
#page_portfolio .content,
#page_portfolio_detail .content {
	padding: 200px 15px 15px 15px;
}

#page_portfolio  .content .col_l,
#page_portfolio_detail  .content .col_l {
	float: left;
	width: 240px;
	height: 285px;
	margin-right: 20px;
	position: relative;
}

#page_portfolio  .content .col_r,
#page_portfolio_detail  .content .col_r {
	float: left;
	width: 455px;
}

#page_portfolio .thumbnail {
	width: 137px;
	height: 41px;
	float: left;
	margin: 0px 10px 10px 0px;
	background-color: #ddd;
}

/*#page_portfolio_detail .bildunterschrift {
	position: absolute;
	bottom: 53px;
	text-align: right;
	width: 225px;
}*/

#page_portfolio_detail .moreimages {
	position: absolute; 
/*	height:52px; */
	width: 250px;
	bottom: 0; 
	right: -10px; 
}

#page_portfolio_detail .moreimages img {
	float: right; 
	margin-left: 8px;
	margin-top: 8px;
}

#page_portfolio_detail .blaetterleiste {
	font-weight: bold;
	padding: 0 18px 0 0;
	font-size: 12px;
	position: absolute;
	top: 490px;
	left: 275px;
}

#page_portfolio_detail .blaetterleiste a {
	color: #B2B3AD;
}

#page_portfolio_detail .blaetterleiste a:hover {
	text-decoration: none;
	color: #FF6600; /*orange*/
	/*color: #DF7753; rot-orange wie aktiver Schirm */
}

/*#page_portfolio_detail  .content .col_l  a.lila_dunkel:hover {
	font-weight: bold;
	color: #B1A4CC;
}*/



/*****************************************************************************
															Kontakt
******************************************************************************/
 
#page_kontakt {
	padding: 10px 15px 15px 15px;
}

/*#page_kontakt .fliestext h1 {
	padding: 0px;
	font-size: 19px;
	font-weight: normal;
	color: #dfdfd7;
	line-height: 19pt;
	text-align: justify;
	letter-spacing: -0.5pt;
	width: 750px;
}*/

#page_kontakt img#kontakt_taglib {
	position: absolute;
	top: 0;
	left: 0;
}

#page_kontakt .formular {
	margin: 270px 0px 0px 0px;
}

#page_kontakt .formular form {
	margin: 0;
	padding: 0;
}

/*#page_kontakt .formular h2 {
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 10px;
	color: #b3b2ad;
}*/

#page_kontakt input.input {
	width: 300px;
	padding: 10px 8px 10px 50px;
}

#page_kontakt textarea {
	width: 691px;
	height: 65px;
	padding: 15px 8px 6px 50px;
}

#page_kontakt input.input,
#page_kontakt textarea {
	background-color: #DFDED9;
	border: none;
	font-size: 11px;
	font-family: Verdana;
}

#page_kontakt div.name ,
#page_kontakt div.email,
#page_kontakt div.firma,
#page_kontakt div.telefon,
#page_kontakt div.kommentar {
	position: relative;
	margin-bottom: 10px;
}

#page_kontakt label {
	position: absolute;
	top: 2px;
	left: 3px;
	color: #fff;
	font-size: 11px;
}

#page_kontakt input#senden {
	float: left;
	margin-right: 30px;
}

#page_kontakt .ausgabetext {
	color: #8F598F;
	font-weight: bold;
	width: 500px;
	float: left;
}

/*****************************************************************************
															KKK / Kinder / Kunst
******************************************************************************/
 
#page_kkk .content {
	padding: 170px 470px 20px 136px;
}

#page_kkk_kinder {
	background: url("img/img_kinder.jpg") no-repeat left bottom;
	height: 410px;
}

#page_kkk_kinder .content {
	padding: 120px 70px 50px 560px;
	z-index: 1;
}

#page_kkk_kunst .content {
	padding: 20px 15px 0px 555px;
}

#page_kkk_kunst .content a.pink:hover {
	color: #DA558A;
	text-decoration: none;
	font-weight: bold;
}

#page_kkk_kunst img.img_kunst {
	position: relative;
	top: 0;
	left: 265px;
}


/*****************************************************************************
															Referenzen
******************************************************************************/

#page_referenzen .content {
	padding: 64px 20px 20px 315px;
}

#page_referenzen .imgReferenzen {
	position: absolute;
	top: 0;
	left: 150px;
}


/*****************************************************************************
															Impressum
******************************************************************************/
 
#page_impressum .content {
	padding: 15px 0px 0px 15px;
}

#page_impressum .socialmedia img {
	margin-right: 15px;
	position: relative;
	top: 10px;
}

#page_impressum .socialmedia p {
	margin-bottom: 8px;
}