/************************************************************************ 
This design built for demonstration purposes 
by Andrew Krespanis, Feb. 2005 - http://leftjustified.net/

Images used under license or by permission of the owner for educational purposes only. 
Images may not be re-used under any circumstance.

Browser support for this file does not include IE/mac or Netscape < 5. 
IE mac support is possible, time restraints ruled it out for this presentation.
Netscape 4.x should not download the file due to the import method used.

version 1.0 
*************************************************************************/

#kontakt {font: 1em Georgia, Times, serif;}
#kontakt input{width:400px; padding: 0.4em 0.5em; border: none; border-bottom: 2px solid #555; font-size:0.9em;}

#kontakt input[type=text]:focus {
  border: 5px solid #555;}
  
 #kontakt select {
	 font-size:1em;
  width: 100%;
  border: none;
border-bottom: 2px solid #555;
}

.contactTextarea{
width:100%;
height:200px;
border: none; border-bottom: 2px solid #555;
font-size:1.0em;
}


/** Global **/
/* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/  */
* {
    margin:0;
    padding:0;
}
h2 {
	font:bold 2em Georgia, Times, serif;
	color:#8B9F86;
	margin-bottom: 10px;
}
h3 {
	font:bold 1em Georgia, Times, serif;
	color:#845697;
	margin-bottom: 10px;
}
/* links */
a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}
/** end global **/

/* setting the base font size to 90% allows even scaling by the user while keeping font-size 'xx-small' legible */
body {
	background:#FFFFFF url(/images/body.png) repeat-x left bottom;
	font-size:100%;
	margin-top: 3px;
	margin-bottom: 10px;
}

#outer {
    margin:0 auto;
    max-width:1024px;
    background:#fff;
}

.bilder-quer {max-width:100%;}

/* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

/** hiding of elements for assistive devices (screen readers etc) **/
ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}
/* <hr />'s added to mark-up for browsers without CSS */
hr {display:none}

/** Title **/
#header {
	border:1px solid #BBD6B2;
	max-width:70em;
	z-index:2;
}
#header h1 {
    padding-left:.6em;
    font:bold 3em Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#845697;
    background: transparent url(img/banner.jpg) no-repeat right bottom; 
}
#header h1 a {
	color:#845697;
	text-decoration:none;
}
#logo-oben-links { 
	position:relative;
	top:20px;
	left:20px; 
	width:70px;
	height:70px;
	z-index:1;
	background-color:#ff5;
}


@media only screen and (min-width: 830px) {

.nivoSlider, .nivoSlider img {width:99%;}
	/** Navigation **/
div#navtext {display:none;}



ul#nav  {
	display:inline;
	float: right;
	margin: 0px 0;
	padding: 0 20px;
	height: 30px;
	background: #F6F4F4;
	border: 1px solid #bbb;
	border-radius: 4px;
	width:96%;
	}
#nav li {
	float: left;
	position: relative;
	list-style-type: none; 
	}
#nav  li.open, #nav li:hover {
	background: #EFEEEE;
	z-index:5;
  }
/** Einzelnen Navigations Links oben **/
#nav  li a {
	display: block;
	padding: 5px 12px 5px 0px;
	line-height: 20px;
	color: #444;
	text-decoration: none;
	font-size:0.9em;
	}
#nav  li ul {
	 display: none;
	 position: absolute;
	 top: 30px;
	 left: 0;
	 width: 130px;
	 padding: 0 0 5px;
	 background: #EFEEEE;
	 border: solid #bbb;
	 border-width: 0 1px 1px;
	 border-bottom-left-radius: 4px;
	 border-bottom-right-radius: 4px;
	 box-shadow: 0 3px 3px rgba(0,0,0,0.15);
  }
#nav  li:hover ul {
	display: block;
  }
#nav  li ul li {
	float: none;
  }
#nav  li ul li a {
	padding: 8px 10px;
	display: inline-block;
  }
#nav  li ul li a {display: block;}
#nav  li ul li a:hover {
	background: #EFEEEE;
	color: #bbb;
  }

/** End header **/

/** current menu item **/
ul#nav li#active {
	background:#F6F4F8;
	font:bold 1em Georgia, Times, serif;
	color:#000;
	text-decoration:underline;
}

#sprechzeiten {
	font-size:0.8em;
}

}


/** Content Containers **/
#sub, #right {
	font: 1em Georgia, Times, serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

/******
div#sub is an extra wrapper, which allows the center column to come first in the source. 
#sub is floated left, with #center -the content column- nested within and floated to the right.
concept from http://www.positioniseverything.net/piefecta-rigid.html
******/
#sub {
	width:74%;
	float:left;
	position:relative;
}

/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/
#center {
	width:90%;
	float:right;
	padding-top:20px;
	
}
#center ul {
	text-indent:10px;
	margin-left:20px; }
#left {
	width:1%;
	float:left;
	/* the following 3 declarations are for design purposes only - not required for layout 
	padding:220px 0 10px;
	background:transparent url(img/eye.jpg) no-repeat right top;
	border-bottom:9px solid #845697; */
}
#right {
	width:25%;
	float:right;
	font-size:1em;
}




 /** Main Col Contents **/
#center p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}

/** Left Col Contents**/
#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}
a.serviceBtn {
	display:block;
	clear:right;
	padding:.1em 2%;
	margin:.5em 0;
	text-align:center;
	text-decoration:none;
	color:#845697;
	font:bold 1em Georgia, Times, serif;
	background:#F6F4F8 url(img/btn-purple.gif) repeat-x left bottom;
	border:2px outset #845697;
}
a.serviceBtn:focus, a.serviceBtn:hover, a.serviceBtn:active {
	text-decoration:underline;
	border-style:inset;
}



#bg-logo {
	background-image:url(/images/bg-logo.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	min-height:270px;
}


#right h2 {
	font-size:1.2em;
}

/** New Products Special offers **/
.offerList {
	background:#E0F4C3;
	border:1px solid #C8DCC2;
	margin:1em 10px;
}
.offerList h2 {
	color:#3A4F3B;
	margin:.1em 2%;
}
.offerList table {
	color:#3A4F3B;
	margin:.1em 2%;
}

.offerList ul {
	margin:.1em 2%;
	list-style:none;
}
.offerList ul li {
	list-style:none;
	padding-left:20px;
	margin:.3em 0;
	background:transparent url(img/bullet.gif) no-repeat 2px 50%;
}

.offerList ul li#org {
	display:none;
}
.offerList ul li#email {
	display:none;
}
.offerList ul li#url {
	display:none;
}
/** Forms **/
form {
	margin:1em 0;
}
legend {
	font:bold 1.1em Georgia, Times, serif;
	color:#3A4F3B;
}


label {
	display:block;
	margin-top:.5em;
}
/* search */
#search fieldset {
	border:1px solid #C8DCC2;
	padding:.3em .5em;
}
/* subscribe */
#subscribe {
	background:#F6F4F8;
	border:1px solid #B2A9B9;
	
}
#subscribe div {
	margin:.3em .5em;
}
#subscribe h2 {
	color:#845697;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font:.9em Georgia, Times, serif;
	border-top:3px double #C8DCC2;
}
#footer p {
	margin:1em 1em 1em 0;
	float:right;
	width:30%;
	text-align:right;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
}

#footer a {
	color:#8E8E8E;
}

#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}




/** --- Impressum **/
.impressums-block ul {
	margin:.1em 2%;
	list-style:none;
}

.impressums-block ul li {
	list-style:none;
	padding-left:20px;
	margin:.3em 0;
	background:transparent url(img/bullet.gif) no-repeat 2px 50%;
}
.impressums-block h1 {
	margin-top:70px;
}
.impressums-block h2 {
	color:#000000;
	font:1.7em Georgia, Times, serif;
	margin-top:60px;
}





form {
    width: 35em;
}

fieldset {
	margin:3px;
	padding:10px;
	border:1px solid #C8DCC2;
}

label {
    clear: both;
    width: 10em;
    display: block;
    float: left;

}

.radiotrenner {
    display: block;
    float: left;
    width: 90px;
}


input#submit { /* den Submit-Button */
  float: none;
  width: auto;
}


  
  .ui-widget {
    font-size: 60%;
  }

a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(/images/calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 1900px;
	float: left;
}








@media only screen and (max-width: 829px) {
body {	background:#fff; }

#outer {
    margin:0px;
	padding:0em;
    max-width:100%;
}

#header, .offerList ul li#org, .offerList ul li#email, .offerList ul li#url, #footer {
	display:none;
}

#sub {
	width:100%;
	float:left;
	position:absolute;
}


.contactInputTd{
/* Breite und Höhe werden angepasst */
height:20px;
}
	
#center {
	width:90%;
	position:absolute;
	padding-top:25em;
}

#center p {margin-left:6px;}

/** Content Containers **/
#sub, #right {
	font: 1em Georgia, Times, serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

#right {
	width:100%;
	position:absolute;
	margin-top:1.2em;
}
#bg-logo {
	background-image:url(/images/zahn-pur-klein.jpg);
	background-position:top left;
	min-height:100px;
}

.offerList {
	background:#E0F4C3;
	border:1px solid #C8DCC2;
	margin:.5em .5em;
	float:left;
}

.offerList div.vcard {
	width:190px;
	left:120px;
	top:1px;
	position:absolute;
	background:#E0F4C3;
	border:1px solid #C8DCC2;
}
#sprechzeiten {
	width:300px;
	left:5px;
	margin-top:20px;
	position:absolute;
}


#nav {
	margin: 3px;
	padding: 20px 25px 0px;
	line-height: 100%;
	border-radius: 2em;
	background: #E0F4C3; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5F9C8', endColorstr='#A4CF6A'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#E5F9C8), to(#A4CF6A)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #E5F9C8,  #A4CF6A); /* for firefox 3.6+ */
	border: solid 1px #BFD5B8;
}
#nav li {
	margin: 5 20px;
	padding: 11px;
	float: left;
	position: relative;
	list-style: none;
}
/* main level link */
#nav a {
	font-weight: bold;
	color: #3A4F3B;
	text-decoration: none;
	display: block;
	padding: 8px 5px;
	margin: 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
	background: #E0F4C3; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5F9C8', endColorstr='#A4CF6A'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#E5F9C8), to(#A4CF6A)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #E5F9C8,  #A4CF6A); /* for firefox 3.6+ */

	color: #444;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
	z-index:5;

}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #3A4F3B;
	z-index:5;
}
#nav ul a:hover {
	background: #E0F4C3 !important; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5F9C8', endColorstr='#A4CF6A'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#E5F9C8), to(#A4CF6A)) !important; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #E5F9C8,  #A4CF6A) !important; /* for firefox 3.6+ */
	z-index:5;
	color: #000;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
	background: #E0F4C3; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5F9C8', endColorstr='#A4CF6A'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#E5F9C8), to(#A4CF6A)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #E5F9C8,  #A4CF6A); /* for firefox 3.6+ */

	display: none;
	margin: 0em;
	padding: 0em;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	border: solid 1px #b4b4b4;
	border-radius: 10px;

	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
	display: block;
	z-index:5;
}
#nav ul li {
	float: none;
	margin: 2em;
	padding: 0;
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
	left: 181px;
	top: -3px;
}

/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
}
html[xmlns] #nav {
	display: block;
}

form {
    width:100%;
}

fieldset {
	margin:3px 2px 1px 5px;
	padding:10px 2px;
	border:1px solid #C8DCC2;
}

label {
    clear: both;
    width: 8em;
    display: block;
    float: left;

}

}


@media only screen and (min-width: 960px) {
#center {margin:0px;}
#nav  li a {padding: 5px 18px;}
#sprechzeiten {font-size:1em;}
}