@charset "UTF-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: url(../bilder/bg.jpg);
	background-size: cover;
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass diese Angaben auch für die .nav-Liste gültig sind, wenn Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Durch Entfernen des oberen Randes wird ein Problem vermieden, bei dem Ränder aus dem umgebenden Block entweichen. Der verbleibende untere Rand sorgt für den Abstand von allen folgenden Elementen. */
	padding-right: 15px;
	padding-left: 15px; /* Hinzufügen von Auffüllungswerten für beide Seiten jeweils enthaltener Blockelemente statt für die Blöcke macht Box-Modell-Berechnungen unnötig. Alternativ kann auch ein untergeordneter Block mit Auffüllung an den Seiten verwendet werden. */
}
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
a{
	text-decoration: none;
	color: #F0F;	
}

a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;
}
/* ~~ Dieser Container fester Breite umgibt alle anderen Blockelemente. ~~ */
.container {
	width: 960px;
	background-color: #FFFFFF;
	margin: 0 auto; /* Durch die Angabe der Breite und Verwendung des Werts "auto" für die Seiten wird das Layout zentriert. */
}

#header {
	/*background:#CF0;*/
	width:900px;
	height:50px;
	margin-left:70px;
	

}
#header_logo{
	width:60px;
	height:650px;
	background:url(../bilder/logo_text.png);
	float:left;
	
}
#contentbox{
	width:970px;
	height:auto;
	margin:auto;
	margin-top:200px;
	/*background:#F3F;*/
}
#content{
	background:url(../bilder/haarstudio2.jpg);
	width: 900px;
	height: 600px;
	margin-left:70px;
	
	
	
}
#content2{
	background:url(../bilder/teamhintergrund.jpg);
	width: 900px;
	height: 600px;
	margin-left:70px;
	
	
	
}
#content3{
	background:url(../bilder/service.jpg);
	width: 900px;
	height: 600px;
	margin-left:70px;
	
	
	
}

#facebook_likes{
	width: 300px;
	height: 220px;
	/*background: #C36;*/
	clear: both;
	margin-left: 70px;	
}
#footer_rechts{
	width:600px;
	height:220px;
	float:right;
	margin-top:-220px;
}
#box_links{
	width:300px;
	height:220px;
	float:left;
	
}
#box_rechts{
	width:300px;
	height:220px;
	float:right;
	padding-top:30px;
}
.table{
	color:#FFF;
	font-family: 'Poiret One', cursive;
	
	}
.menu{
	color:#FFF;
	list-style:none;
	font-family: 'Poiret One', cursive;
	font-size:30px;
	
	}
.menu li{
	float:left;
	font-family: 'Poiret One', cursive;
	padding-right:25px;
	opacity:0.4;
	}
.menu li a{
	color:#FFF;
	text-decoration:none;
	opacity:0.8;}
.menu li a:hover{
	color:#F09;
	
}
#logo_img{
	width:215px;
	height:157px;
	background:url(../bilder/kamm%C3%A4leon2.png);
	margin-top:-70px;
	margin-left:720px;
	position:absolute;
}
#imagebox{
	width:310px;
	height:410px;
	background:#000;
	
	position:absolute;
	margin-left:50px;
	margin-top:100px;
}
#imagebox_pic{
	width:300px;
	height:400px;
	margin:5px;
	background:url(../bilder/hairimages/hairbanner.gif);
}
#imagebox_pic2{
	width:300px;
	height:400px;
	margin:5px;
	background:url(../bilder/sarah.jpg);
}
#imagebox_pic3{
	width:300px;
	height:400px;
	margin:5px;
	background:url(../bilder/c%C3%BCmeyra.jpg);
}
#textbox{
	width: 500px;
	height: 407px;
	position: absolute;
	margin-left: 330px;
	margin-top: -300px;
	top: 304px;
}
#kontakt {
	color:#CCC;
	position:fixed;
	bottom:-270px;
	left:0px;
	width:100%;
	height:230px;
	padding:20px;
	background-color:#FC0388;
	
	transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s ease-in-out;
}

#kontakt:hover {
	bottom:0px;
	
	transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s ease-in-out;
}


#kontakt img {
	position:absolute;
	top:-105px;
	right:8%;
	padding:10px;
}

/*Mittig setzen des Footer-Text-Bereichs*/
#kontakt #kontakt_mitte {
	width:900px;
	margin:0px auto;
}

/*Aufteilung des mittigen Footers in zwei Bereiche*/
#kontakt #kontakt_links {
	width:250px;
	float:left;
	margin-left:30px;
}

#kontakt #kontakt_rechts {
	width: 550px;
	float: left;
	margin-left: 50px;
}

/*Überschrift des Footers*/
#kontakt h3 {
	color:#CCC;
	font-style:italic;
	margin-bottom:10px;
}

/*Inhalt linker Footer-Bereich*/
#kontakt dl {
	font-size:12px;
}

#kontakt dt {
	margin-top:20px;
}

#kontakt dd.a_bottom {
	margin-bottom:20px;
}

#kontakt a {
	color:#CCC;
}

/*Linker Bereich des rechten Footer-Teils (mit Name, Mail und den Buttons)*/
#kontakt #kontakt2_links {
	width:180px;
	float:left;
}

/*Rechter Bereich des rechten Footer-Teil (mit Ihre Nachricht)*/
#kontakt #kontakt2_rechts {
	width: 300px;
	float: right;
}

/*Formatierungen des rechten Footer-Bereichs*/
#kontakt fieldset {
	font-size:12px;
	padding:10px;
}

#kontakt .formatierung {
	margin-bottom:5px;
}

#kontakt .objekt {
	margin-bottom:10px;
}

#kontakt .input_laenge {
	width:150px;
}

#kontakt .abstand {
	cursor:pointer;
	padding:2px;
	margin-top:10px;
	margin-right:10px;
	border:none;
}

#kontakt input {
	font-size:11px;
	font-family: 'Poiret One', cursive;
}
#preisliste1{
	width:300px;
	height:450px;
	background:url(../bilder/service2.jpg);
	
	position:absolute;
	margin-left:50px;
	margin-top:80px;
	
	
}
#preisliste2{
	width: 400px;
	height: 450px;
	position: absolute;
	margin-left: 460px;
	margin-top: 80px;
	color: #F9F6F6;
	font-size: xx-small;
}

#kontakt textarea {
	font-size:11px;
	font-family: 'Poiret One', cursive;
	min-width:200px;
	min-height:120px;
	max-width:290px;
	max-height:120px;
}
.googlemaps_a{
	color:#000;
}
.datenschutz{
	font-size:9px
	
}