/* 
Theme Name: Jaeckel
Theme URI: http://b-factor.de
Description: Thomas Jaeckel
Version: 1.1
Author: Thomas Hirmer
Author URI: http://b-factor.de
*/

/* reset all Browsers: */

* {margin: 0px; border: 0px; padding: 0px;}

/* ============= L A Y O U T ================= */

html 
	{
	height: 101%;
	}

body { 
	background-color: #e2e2e2;
	background-image: url(hg.png);
	background-repeat: repeat-x;
	font-family: Verdana; 
	font-size: 12px; 
	line-height: 19px; 
	color: #777777; 
	}
	
#wrapper {
	width: 840px;
	/*background-color: red;*/
	margin: auto;
	}

#header {
	width: 840px;
	height: 120px;
	/*background-color: yellow;*/
	}

	#header h2 {
		position: relative;
		top: 25px;
		left: 15px;
		font-size: 18px;
		/*text-align: right;*/
		line-height: 20px;
		color: white;
		font-weight: normal;
		}

	#header p {
		position: relative;
		top: 30px;
		left: 15px;
		line-height: 18px;
		color: black;
		}

#logo {
	height: 53px;
	width: 251px;
	background-image: url(logo.png);
	background-repeat: no-repeat;
	/*background-color: green;*/
	position: relative;
	top: -30px;
	left: 585px;
	}
	
#menu {
	/*background-color: blue;*/
	height: 25px;
	width: 840px;
	margin-bottom: 5px;
	}

#umenu {
	/*background-color: white;*/
	height: 25px;
	width: 840px;
	margin-bottom: 20px;
	}

	#menu ul, 
	#umenu ul {
		/*margin-top: 4px;*/
		padding: 4px;
		}

	#menu li, 
	#umenu li {
		display: inline;
		}

	#menu li a, 
	#umenu li a	
		{
		font-size: 12px;
		line-height: 18px; 
		color: #777777; 
		font-weight: bold; 
		text-decoration: none;
		padding: 0px 4px 0px 2px;
		border-right: 1px solid gray;
		}
	
	#menu li a:hover, 
	#umenu li a:hover	
		{
		color: #ff6600;
		}
	

/* ============== M E N U Highlights ============== */
	
#menu a:hover, #umenu a:hover, 
#home #nav_home a, 
#heil #nav_heil a, 
#heil #nav_mein a,
#fest #nav_fest a,  
#fest #nav_mein a, 
#denk #nav_denk a, 
#denk #nav_mein a, 
#yoga #nav_mein a, 
#yoga #nav_yoga a, 
#orga #nav_orga a,
#orga #nav_mein a, 
#kontakt #nav_kont a, 
#ment #nav_ment a, 
#ment #nav_mein a, 
#bera #nav_bera a, 
#bera #nav_mein a, 
#fami #nav_fami a, 
#fami #nav_mein a, 
#vita #nav_vita a, 
#vita #nav_pers a,
#prei #nav_prei a, 
#prei #nav_pers a,  
#aktu #nav_aktu a, 
#disc #nav_disc a 
		{
		color: #ff6600;
		}
	
/* ================== C O N T E N T ================== */

#content {
	float: left;
	background-color: #fbfbfb;
	width: 530px;
	border: 1px solid #e9e9e9;
	margin-left: 12px;
	}

	#content table {
		width: 100%;
		/*border: 1px solid black;*/
		}

	#content table td {
		/*border: 1px solid white;*/
		width: 50%;
		}

	#content table td p, 
	#content table td h3, 
	#content table td h4,
	#content table td h5,
	#content table td li, 
	#content table td a, 
	#content table td a:hover {
		max-width: 244px;
		} 

/* ====== Ausnahme-Tabellen ======= */

.preise {
	border: 1px solid #aaaaaa;
	padding: 4px;
	}

#prei #content table td .beschreibung {
	width: 80%;
	text-align: left;
	vertical-align: top;
	}

#prei #content table td .eur {
	width: 20%;
	text-align: right;
	vertical-align: bottom;
	}

#dreissig table td {
	width: 33%;
	padding: 3px 1px 3px 1px;
	}
	
	#dreissig table td {
		border: 1px dotted gray;
		}

#termine table {
	width: 425px;
	}

/* ================================== */

#txthome {
	margin-top: -650px;
	font-size: 11px;
	color: black;
	}

#newshome {
	position: relative;
	left: 20px;
	top: -310px;
	height: 300px;
	width: 190px;
	/*background-color: red;*/
	}
	
	#newshome h2 {
		font-size: 12px;
		font-weight: bold;
		color: black;
		}

	#newshome p {
		color: black;
		font-size: 11px;
		line-height: 14px;
		}

	#newshome b {
		font-weight: bold;
		font-size: 11px;
		color: black;
		line-height: 14px;
		}

	#newshome ul {
		margin-left: 4px;
		}
	
	#newshome li {
		font-size: 11px;
		line-height: 14px;
		padding-left: -3px;
		}

#zettel {
	position: relative;
	left: -30px;
	height: 338px;
	width: 255px;
	background-image: url(../bilder/zettel.png);
	}

/* ========================================================== */

.beschreibung {
	width: 80%;
	text-align: left;
	vertical-align: top;
	}

.eur {
	width: 20%;
	text-align: right;
	vertical-align: bottom;
	}

th {
	color: black;
	text-align: left;
	margin: 0x 0px 10px 0px;
	}

	#content ul {
		margin-left: 10px;
		padding: 2px 0px 2px 0px; 
		}

	#content ol {
		margin-left: 21px;
		padding: 2px 0px 2px 0px;
		}

/* ================== T R E N N E R ================= */

#trenner, 
#trenner_lang 
	{
	float: left;
	width: 2px;
	height: 1000px;
	background-image: url(trenner.png);
	background-repeat: no-repeat;
	margin: 0px 0px 0px 20px;
	}

#trenner_kurz {
	float: left;
	width: 2px;
	height: 550px;
	background-image: url(trenner_kurz.png);
	background-repeat: no-repeat;
	margin: 0px 0px 0px 20px;
	}

/* ========= S E R V I C E / M A R G I N A L ========= */

#marginal {
	float: right;
	width: 254px; /* bild hat 244 + je 5 padding .inside */
	height: 500px;
	/*background-color: green;*/
	}

	#marginal h3,
	#marginal h6 
		{
		margin-top: 15px;
		}

	#marginal ul, 
	#marginal ol {
		margin-left: 0px;
		}

	#marginal li {
		list-style-type: none;
		}

	#marginal li a {
		padding-left: 9px;
		background-image: url(link.gif);
		background-repeat: no-repeat;
		background-position: left top;
		}

#baum {
	position: relative;
	width: 44px;
	height: 42px;
	top: -36px;
	left: 200px;
	background-image: url(../bilder/baum.png);
	background-repeat:no-repeat;
	margin-bottom: -42px;
	}

.anschrift {
	font-size: 11px;
	line-height: 15px;
	}

#footer {
	clear: both;
	height: 20px;
	}

/* =============== Sonstiger Kram ==================== */

.inside {
	padding: 5px;
	}

h3 {
	font-size: 12px;
	color: black;
	font-weight: bold;
	padding: 0px 0px 4px 0px;
	border-bottom: 1px dotted gray;
	}

h4 {
	font-size: 12px;
	color: black;
	font-weight: normal;
	padding: 0px 0px 4px 0px;
	line-height: 18px;
	border-bottom: 1px dotted #959595;
	}

h5 {
	font-size: 12px;
	color: black;
	font-weight: normal;
	padding: 4px 0px 4px 0px;
	line-height: 18px;
	border-bottom: 1px dotted #959595;
	}

h6 {
	font-size: 11px;
	color: black;
	font-weight: bold;
	padding: 0px 0px 4px 0px;
	border-bottom: 1px dotted gray;	
	}

a {
	color: black;
	text-decoration: none;
	}

a:hover {
	color: #ff6600;
	}

a:active, a:focus {
	outline: none;
	}
	
	.link {
		padding-left: 9px;
		background-image: url(link.gif);
		background-repeat: no-repeat;
		background-position: left top;	
		}

.black,
.schwarz   
	{
	color: black;
	}

	.blackbold, 
	.schwarzfett, 
	.schwarz_fett 	
		{
		color: black;
		font-weight: bold;
		}

.orange {
	color: #ff9900;
	}
	
	.orangebold {
		color: #ff9900;
		font-weight: bold;
		}

hr {
	height: 1px;
	border-bottom: 1px dotted gray;
	margin: 5px 0px 5px 0px;
	}

	#prei #content hr {
		height: 1px;
		border-bottom: 1px dotted gray;
		margin: 1px 0px 1px 0px;
		}

p {
	padding: 6px 0px 3px 0px;
	}

.mini {
	padding: 0px;
	font-weight: normal;
	font-size: 10px;
	color: black;
	}

ul {
	margin-left: 10px;
	padding: 2px 0px 2px 0px; 
	}

	#vita #content ul {
		margin-left: 20px;
		}

ol {
	margin-left: 18px;
	padding: 2px 0px 2px 0px;
	}

	li {
		color: black;
		}

.space3 {
	height: 3px;
	}

.space4 {
	height: 4px;
	}

.space5 {
	height: 5px;
	}

	.space-5 {
		margin-bottom: -5px;
		}

.space6 {
	height: 6px;
	}

.space7 {
	height: 7px;
	}

.space8 {
	height: 8px;
	}

.space9 {
	height: 9px;
	}

.space10 {
	height: 10px;
	}

	.space-10 {
		margin-bottom: -10px;
		}

.space15 {
	height: 15px;
	}

	.space-15 {
		margin-bottom: -15px;
		}

.space20 {
	height: 20px;
	}

.blind {
	display: none;
	}

.zitat {
	display: block;
	color: #ff6600;
	background-color: white;
	font-style: italic;
	font-size: 11px;
	padding: 4px;
	}

.hinweis {
	display: block;
	padding: 5px;
	background-color: white;
	color: #ff6600;
	}


/* ========== KONTAKTFORMULAR =============== */

#kontakt #content {}

.formular {
	/*background-color: red;*/
	}

textarea, input {
	background-color: #e7e7e7;
	}

input {
	padding: 5px;
	margin: 5px;
	}

.fehler {}

.fox {}

.um {}

.bez {}

.nachricht {}

.absenden {
	padding: 5px;
	margin: 5px;
	}

/* ==================== lightbox ===================*/

#lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer {
	padding: 10px;
	}

#loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
	
#hoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
	
#imageContainer>#hoverNav { left: 0;}

#hoverNav a { outline: none;}

#prevLink, #nextLink {
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; 
	/* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, 
#prevLink:visited:hover 
{ background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, 
#nextLink:visited:hover 
{ background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData {padding:0 10px; color: #666; }
#imageData #imageDetails {width: 70%; float: left; text-align: left; }	
#imageData #caption {font-weight: bold;	}
#imageData #numberDisplay {display: block; clear: left; 
padding-bottom: 1.0em;	}			
#imageData #bottomNavClose {width: 66px; float: right;  
padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

/* -------------------------------------------------------------- */