﻿
@font-face {
    font-family: 'PT';
    src: url('../fonts/pt_sans-web-regular1-webfont.eot');
    src: url('../fonts/pt_sans-web-regular1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pt_sans-web-regular1-webfont.woff') format('woff'),
         url('../fonts/pt_sans-web-regular1-webfont.ttf') format('truetype'),
         url('../fonts/pt_sans-web-regular1-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*@font-face {
		font-family: 'DIRTC';
		src: url('../fonts/DIRTC_.ttf') format('truetype');}html {background-color: #ffa800;
	background-color: hsla(40,100%,50%,.8);}
@font-face {
		font-family: PT;
		src: url('../fonts/PT_Sans-Web-Regular.ttf')}*/
html {background-color: #ffa800;
	background-color: hsla(40,100%,50%,.8);}
body {margin: 0 auto ;
   width: 1000px;
   min-height:680px;
   color: #361F10;
   font-family: PT, Helvetica, Arial, sans-serif;
   position: relative;
}
.float-ende {clear: both;}

p {font-size: 19px;}
/*++++++++++++++++++++++++++
*           Kopf            *
****************************/
#kopf {
		height: 200px;
		position: relative;
		margin-top: 0px;
		
		
}
#logo {
		float: left;
		width: 300px;
		position: fixed;
		
}
/****************************
** Kopf oben mit Bildern   *
****************************/
#photo {
	float: right;
	width: 700px;
	height: 200px;
	background-color: #FFA800;
	background-color: hsla(40,100%,50%,1);
	position: relative;	
}

#bild_links {
		height: 200px;
		width: 350px;
		
		
}
#bild_rechts {
		height: 200px;
		float: right;
		margin-right: 0;
		
		
}


#bild_orthorechts  {
		height: 200px;
		width: 285px;
		float: left;
		}
		
#bild_orthomitte  {
		float: left;
		height: 200px;
		width:130px;
}
#bild_ortholinks  {
		height: 200px;
		width: 285px;
		float: right;
}


#bild_shiatsulinks {
		height: 200px;
		float: left;
		
}
#bild_shiatsumitte  {
		height: 200px;
		float: left;
		z-index: 2;
}
#bild_shiatsurechts  {
		height: 200px;
		float: right;
		z-index: 1;
		position: absolute;
		left: 412px;
		}

#bild_linksnormal  {
		height: 200px;
		width: 300px;
		float: left;
}

#bild_akkumitte  {
		height: 200px;
		float: left;
}
/**********************************
*      Hauptseite                  *
***********************************/

		



.linke-spalte {
		width: 240px;
		background-color: #feedd1;
		background-color: hsla(37,96%,91%,1);
		float: left;
		min-height: 800px;
		padding: 40px 10px 0 50px;
		position: fixed;
		top: 200px;
}		
.kleiner {		
		min-height: 480px;
}
#links_linke {
		min-height: 481px;
}
#heilpraktikerin {margin: 0 0 20px 0;
		font-weight: bold;
		font-size: 17px;
}
#navigation .unsichtbar {
		display: none;
		}
#navigation ul  {margin-left: -12px;
		margin-top: -20px;
		list-style-type: none;
		padding: 0;
}
#navigation ul li {margin-bottom: 2px;
		}
.punkt {padding:0 2px 2px 5px;
		border: none;
		margin-left: 10px;}
#navigation ul li a{display: block;
		text-decoration: none;
		font-size: 17px;
		color: #361F10;
		color: hsla(24,54%,14%,1);
		width: 196px;
		padding-top: 2px;
}
#navigation ul li a:hover,
#navigation ul li a:focus,
#navigation ul li a.aktiv
{width: 196px;
		background-color: #ffa800;
		background-color: hsla(40,100%,50%,1);
		text-decoration: none;
}
#termine {
		margin-bottom: 5px;
		font-size: 17px;
}
.telefon {
		margin-top: 0px;
		font-weight: bold;
		font-size: 17px;
		margin-bottom: 5px;
}
.adresse {
		font-size: 17px;
		margin-top: 0px;
		margin-bottom: 0px;
		
}
.e-mail  {
		display: none;}
.ortho  {min-height: 2501px;}
.link1 {
                text-decoration: none;
                color: black;
}
                
/**********************************
*   rechte Spalte              *
********************************/


#rechte-spalte {background-color: white;
		background-color: hsla(0,0%,100%,1);
		min-height: 480px;
		width: 650px;
		float: right;
		padding: 40px 25px 0 25px;
		
		
		
		
} 
#überschrift {font-size: 24px;
		background-color: #feedd1;
		background-color: hsla(37,96%,91%,1);
		width: 190px;
		height: 32px;
		padding-top: 3px;
		text-align: center;
		margin-left: -7px;
}
#bildschirm ul {
		list-style-type: none;
}
#willkommen {font-size: 24px;
		background-color: #feedd1;
		background-color: hsla(37,96%,91%,1);
		text-align: center;
		margin-left: 50px;
		margin-right: 50px;
		
		
}
.normal {
		text-decoration: none;
		color: #361F10;
		color: hsla(24,54%,14%,1);
		font-weight: bold;
}
#portrait {
		width: 300px;
		border: .5px solid grey;
		margin: 30px auto 30px 175px;
}
.unterstrichen {text-decoration: underline;}
.eingeschoben {margin-top: -25px;}
.gelberHintergrund {
		background-color: #feedd1;
		background-color: hsla(37,96%,91%,1);
		margin-top: 50px;
		width: 230px;
}
.ogelberHintergrund {
		background-color: #feedd1;
		background-color: hsla(37,96%,91%,1);
		margin-top: 50px;
		width: 320px;
}
.oogelberHintergrund {
		background-color: #feedd1;
		background-color: hsla(37,96%,91%,1);
		margin-top: 50px;
		width: 450px;
}
.schriftinmitte {
		text-align: center;
		margin-left: 50px;
		margin-right: 50px;
}

/***************************************
*  ShiatsuSeite                    *****
***************************************/


#shiatsuTabelle {
		font-size: 19px;
		
}
#shiatsuTabelle ul {
		list-style-type: disc;
		padding-left: 0px;
		margin: 19px;
		margin-top: 4px;
}
#shiatsuTabelle ul li ul#li-strich {
		list-style-type: none;
		padding-left: 15px;
		
}
.bildinmitte  {
		margin-left: 125px;
}


/*****************************************
*   Ortho-Bionomy    **************
*********************************************/

.odicker  {
		font-weight: bold;
		
}
#orthoTabelle {
		font-size: 19px;
		
}
#orthoTabelle ul {
		list-style-type: disc;
		padding-left: 0px;
		margin: 19px;
		margin-top: -15px;
}
#orthobild_mitte  {
		margin-left: 100px;
		margin-right: 20px;
}
/***********************************
+  Zur Person    *****************
*************************/
.personinmitte  {
		margin-left: 130px;
		
}



/*******************************
*    andere Formate             *
********************************/
/*  kleine Bildschirme  */
@media screen and (max-width: 950px) {
#logo {
		position: static;
		height: 200px;
		margin: 0;
		}
.linke-spalte {
		position: static;}
.erste {	min-height: 1549px;
		}
.ortho {min-height: 2315px;}
.shiatsu {min-height: 1776px;  }
.kontakt {min-height: 1754px;  }
.person { min-height: 830px;  }
#links  {height: 480px;  }
		
}

/*   i-phone   */
@media screen and (max-width: 480px) {
body {width: 95%;
		margin: auto;}
#logo {
		position: static;
		margin-bottom: -5px;}
#photo {
		display: none; height: 0px; clear: both;
}
#rechte-spalte {
                max-width: 95%;
                margin: auto;
                padding: 5%;
}
.erste, .ortho, .shiatsu, .person, .kontakt  {
                min-height: 50px;}
#portrait {
                width:85%;
                margin-left: 10%;
}
.bildinmitte, .personinmitte {
                width:85%;
                margin-left: 10%;
} 
#rechte-spalte {background-color: #ffa800;
	background-color: hsla(40,100%,50%,.8);}
}


