/* Grundgerüst
-----------------------------------------------------------*/
html {
	min-height: 101%;
	-webkit-text-size-adjust: none;
}

body {
	background: #f2f2f2;
	background: #f6f6f6;
	color: #816c8f;
	font: 16px Calibri, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 50px;
}	

.frame {
	max-width: 1000px;
	margin: 0 auto;
	background: #ffffff url(../_img/mainBG.gif) repeat-y 75%;
}

.header {
	position: relative;
	background: #816c8f;
	z-index: 1;
	/*background: #666;*/
}

.main {
	float: left;
	width: 75%;
	position: relative;
}

.sub {
	float: right;
	width: 25%;
	background: #816c8f;
	color: #fff;
}

h1 {
	padding: 25px;
	font-size: 28px;
	font-weight: normal;
}

.content {
	clear: both;
	padding: 25px;
}

.contentTeam {
	background: #fff;
	clear: both;
	padding: 0 25px 25px 25px;
	margin: 0;
}

.sub .content {
	margin: 55px 0 0 0;
	text-align: right;
}

.sub .content a {
	color: #fff;
}

/*
h2:before{
	content:" ";
	background:url(../img/css/ribbon.png);
	display:block;
	width:10px;
	height:10px;
	position:absolute;
	bottom:0;
	left:0;
	margin-bottom:-10px;
	z-index:-1;
}
h1:after{
	background:url(../img/css/ribbon-2.png);
	right:0;
	left:auto;
}
*/


img {
	width: 100%;
	display: block;
	height: auto;
}

a {
	color: #816c8f;
}

a:focus {
	color: #000;
}

a.telNumber {
	text-decoration: none;
	cursor: default;
}

.mitarbeiter {
	padding: 0 0 25px 0;
}

.teamFoto {
	float: left;
	width: 25%;
	padding: 0 25px 0 0;
}

.contentBox p, .contentBox ul, .contentBox ol {
	line-height: 1.35em;
	padding: 0 0 1.35em 0;
	/*background: #ddd;*/
}

.contentBox ul ul {
	line-height: 1.35em;
	padding: 0 0 0 0;
	/*background: #ddd;*/
}

.contentBox ul li {
	background: url(../_img/liDash.gif) no-repeat left top;
	padding: 0 0 0 20px;
}

#specialLink {
	position: absolute;
	display: block;
	width: 160px;
	height: 160px;
	z-index: 200;
	top: 25px;
	right: 25px;
}

#specialLink img {
	max-width: 100%;
	width: auto;
}

/* MainNav
-----------------------------------------------------------*/
#nav-wrap {
	margin: 50px 0 0 0;
	float: left;
	width: 75%;
	/*z-index: 1;*/
	position: absolute;
}

#nav {
	z-index: 1;
}

#nav li {
	float: left;
	width: 21%;
	margin: 0 2%;
}

#nav li a {
	display: block;
	padding: 0 5%;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	text-transform: uppercase;
	background:transparent;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav li a:hover, #nav li a:focus, #nav li a:active, #nav li:hover {
	background: #a88cba;
/*	-webkit-tap-highlight-color: #a88cba;*/
/*	-webkit-tap-highlight-color: rgba(168, 140, 186, 1);*/
}


/* nav dropdown */
#nav ul {
	background: #a88cba;
	position: relative;
	display: none; /* hide dropdown */
	/*z-index: 1;*/
	/*padding: 20px 0 0 0;
	margin: -20px 0 0 0;*/
}

#nav ul li {
	float: none;
	display: block;
	width: 90%;
	margin: 0;
	padding: 0;
	/*margin: 0 20px;
	padding: 0 20px;*/
}

#nav ul li a {
	text-transform: none;
	width: 100%;
	/*background: #333;*/
	/*display: inline;*/
}

#nav ul li a:hover {
	color: #eee;	
	color: #eacaff;
	-webkit-tap-highlight-color:rgba(234,202,255,1);
}

#nav li:hover ul {
	display: block; /* show dropdown on hover */
}

/* Media Queries
-----------------------------------------------------------*/
@media screen and (min-width: 650px) {
body {
	margin: 40px;
}

.bild {
	position: relative;
	background: #fff;
	float: right;
	clear: both;
	padding: 0 20px 0 0;
	margin-left:-20px;
	margin-bottom: 0px;
	/*text-shadow:0 -1px #000, 0 1px #000;

	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	box-shadow:2px 2px 0 rgba(0,0,0,0.1);*/
}

.bild:before {
	content:" ";
	background:url(../_img/ribbon.png);
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	bottom:0;
	left:0;
	margin-bottom:-20px;
	z-index:-1;
}

#logo img {
	float: right;
	width: 100%;
}

#logo {
	position: relative;
	background: #fff;
	float: right;
	clear: both;
	padding: 10px 20px 20px 10px;
	margin-right: -20px;
	margin-bottom: 0px;
	/*text-shadow:0 -1px #000, 0 1px #000;

	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	box-shadow:2px 2px 0 rgba(0,0,0,0.1);*/
}

#logo:after {
	content:" ";
	background:url(../_img/ribbon-2.png);
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	bottom:0;
	right:0;
	left:auto;
	margin-bottom:-20px;
	z-index:-1;
}


/*body#body-index #nav li#btn01 a  { background: #a88cba; }
body#body-preise #nav li#btn02 a  { background: #a88cba; }
body#body-therapiemethoden #nav li#btn02 a  { background: #a88cba; }
body#body-raeumlichkeiten #nav li#btn05 a  { background: #a88cba; }
body#body-team #nav li#btn05 a  { background: #a88cba; }
body#body-philosophie #nav li#btn05 a  { background: #a88cba; }
body#body-lageplan #nav li#btn05 a  { background: #a88cba; }
body#body-aktuell #nav li#btn10 a  { background: #a88cba; }*/

body#body_front #nav li#btn01 a  { background: #a88cba; }
body#body_angebot #nav li#btn02 a  { background: #a88cba; }
body#body_ueber-uns #nav li#btn05 a  { background: #a88cba; }
body#body_team #nav li#btn05 a  { background: #a88cba; }
body#body_links #nav li#btn10 a  { background: #a88cba; }
body#body_downloads #nav li#btn10 a  { background: #a88cba; }


}



@media screen and (max-width: 950px) {
#nav li a {
	padding: 0 5%;
	font-size: 15px;
}

h1 {
	font-size: 24px;
}

}


@media screen and (max-width: 950px) {

#nav-wrap {
	margin: 40px 0 0 0;
}

}

@media screen and (max-width: 700px) {

#nav-wrap {
	margin: 35px 0 0 0;
}

}


@media screen and (max-width: 800px) {

body {
	margin: 30px;
}

#nav li a {
	padding: 0 5%;
}

#nav li ul a {
	font-size: 13px;
}

h1 {
	padding: 15px;
	font-size: 20px;
	font-weight: normal;
}

.content {
	clear: both;
	padding: 15px;
}

.sub .content {
	margin: 55px 0 0 0;
	text-align: right;
}




}


/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 650px) {

body {
	margin: 5px;
	/*background: #816c8f;*/
	background: #e5e5e5;
	font-size: 16px;
}

.frame {
	background: #fff;
	background: #eee;
	background: #a88cba;
	background: #816c8f;
	margin: 0;
	padding: 0;
}

.main {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

.sub {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

.header {
	background: #fff;
}

.content {
	background: #fff;
	clear: both;
	padding: 20px 20px 0 20px;
	margin: 0;
}

.contentTeam {
	background: #fff;
	clear: both;
	padding: 0 20px 0 20px;
	margin: 0;
}

.sub .content {
	/*padding: 20px;*/
	text-align: left;
	background: #816c8f;
	margin: 0 0 0 0;
}

.bild {
	padding: 0 0 0 0;
}

#logo {
	background: #fff;
	display: block;
	border-bottom: 1px solid #eee;
	/*margin: 0 0 1px 0;*/
}

#logo img {
	text-align: right;
	width: 70%;
	float: right;
}

h1 {
	padding: 15px 20px;
	font-size: 20px;
	font-weight: normal;
	color: #fff;
}

.contentBox p, .contentBox ul, .contentBox ol {
	line-height: 1.35em;
	padding: 0 0 1.35em 0;
}

	/* nav-wrap */
	#nav-wrap {
		/*position: relative;*/
	margin: 5px 0 0 0;
	}

	/* menu icon */
	#menu-icon {
		color: #fff;
		width: 42px;
		height: 30px;
		background: #a88cba url(../_img/menu-icon.png) no-repeat 10px center;
		background: #816c8f url(../_img/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		/*border: solid 1px #666;*/
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		/*background-color: #f8f8f8;*/
	}
	#menu-icon.active {
		/*background-color: #bbb;*/
	}

	#nav li a:hover, #nav li a:focus, #nav li a:active, #nav li:hover {
		background: #816c8f;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		width: 200px;
		/*width: 50%;*/
		z-index: 10000;
		padding: 5px;
		background: #a88cba;
		background: #816c8f;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 0px;
		width: 100%;
	}

	#nav a, 
	#nav ul a {
		font-size: 15px;
		/*font: inherit;*/
		background: none;
		/*display: inline;*/
		padding: 0;
		/*color: #666;*/
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: 100%;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 25px;
	}

	#nav ul li a {
		font-size: 15px;
	}

	#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav li:hover {
		color: #eacaff;
		-webkit-tap-highlight-color: rgba(168, 140, 186, 1);
	/*	-webkit-tap-highlight-color: rgba(168, 140, 186, 1);*/
	}


}

@media screen and (min-width: 650px) {
	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}




















/* Clearfix
-----------------------------------------------------------*/
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}