/************** Grundeinstellungen ****************/

html,body {
margin:0;
padding:0;
}

img {
border: 0px;
}

body {
font:80% Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
color:#242424;
background:#fff;
text-align:center;
background-image:url(../images/hintergrund.gif);
}

#page-container {
padding-top:11px;
width:721px;
text-align:left;
margin:auto;
}


/************** Header ****************/


#header {
height:106px;
background-image:url(../images/header.gif);
background-repeat:no-repeat;
margin:0;
padding:0;
}

#picture {
height:184px;
width:721px;
background-image:url(../images/navigation_hintergrund.jpg);
background-repeat:no-repeat;
}


/************** Content ****************/


#main {
background-image:url(../images/content_hintergrund.gif);
}

#content {
padding-top:24px;
margin-right:32px;
margin-left:32px;
overflow:hidden;
line-height:22px;
}

#content a {
color:#346381;
text-decoration:underline;
}

#content a:hover {
background-color:#222;
color:#fff;
text-decoration:none;
}

#content p {
margin:0;
padding:0 0 15px;
}


/************** Footer ****************/


#footer {
background-image:url(../images/footer.gif);
clear:both;
height:34px;
color:#fff;
line-height:22px;
background-repeat:no-repeat;
padding:2px 10px;
}

#footer a {
color:#fff;
text-decoration:none;
}

#footer a:hover {
color:#db6d16;
}

#footer #altnav {
background-image:url(../images/spacer.gif);
width:350px;
float:right;
text-align:right;
padding-top:5px;
}


/************** Ueberschriften ****************/


h1 {
float:left;
margin:57px 0 0;
padding:0 31px 0 0;
}

h2 {
padding: 0;
margin-bottom:20px;
}

h3 {
font:130% Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
padding: 0;
margin:0;
margin-bottom:10px;
color:#FF4411;
}


/************** Hauptmenue ****************/


#main-nav {
position:absolute;
list-style:none;
top:117px;
padding-left:4px;
height:184px;
display:inline;
overflow:hidden;
width:258px;
margin:0;
}

#main-nav li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
}

#main-nav li#start a,il#start a,li#referenzen a,li#leistungen a,li#person a {
display:block;
height:0 !important;
overflow:hidden;
background-repeat:no-repeat;
padding:37px 0 0;
}

#main-nav li#kontakt a {
display:block;
height:0 !important;
overflow:hidden;
background-repeat:no-repeat;
padding:36px 0 0;
}

#main-nav li#start a:hover,li#referenzen a:hover,li#leistungen a:hover,li#person a:hover {
background-position:0 -37px; /* -74px fuer blauen Hintergrund */
}

#main-nav li#kontakt a:hover {
background-position:0 -36px;  /* -72px fuer blauen Hintergrund */
}

#main-nav li#start,#main-nav li#start a {
width:258px;
background-image:url(../images/nav/start.gif);
}

#main-nav li#referenzen,#main-nav li#referenzen a {
width:258px;
background-image:url(../images/nav/referenzen.gif);
}

#main-nav li#leistungen,#main-nav li#leistungen a {
width:258px;
background-image:url(../images/nav/leistungen.gif);
}

#main-nav li#person,#main-nav li#person a {
width:258px;
background-image:url(../images/nav/person.gif);
}

#main-nav li#kontakt,#main-nav li#kontakt a {
width:258px;
background-image:url(../images/nav/kontakt.gif);
}

body.start li#start,
body.start li#start a,
body.start li#start a:hover,
body.referenzen li#referenzen,
body.referenzen li#referenzen a,
body.referenzen li#referenzen a:hover,
body.leistungen li#leistungen,
body.leistungen li#leistungen a,
body.leistungen li#leistungen a:hover,
body.person li#person,
body.person li#person a,
body.person li#person a:hover {
background-position:0 -74px; 
}

body.kontakt li#kontakt,
body.kontakt li#kontakt a,
body.kontakt li#kontakt a:hover {
background-position:0 -72px; 
}


/************** Sub-Menue ****************/


#sub-nav {
position:absolute;
list-style:none;
top:15px;
padding-left:262px;
height:102px;
display:inline;
overflow:hidden;
width:312px;
margin:0;
}

#sub-nav li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
}

#sub-nav a {
float:left;
overflow:hidden;
height:0 !important;
padding:102px 0 0;
}

#sub-nav a:hover {
background-position:0 -102px;
}

#sub-home a {
width:105px;
background:url(../images/nav/sub_home.gif) top left no-repeat;
}

#sub-sitemap a {
width:103px;
background:url(../images/nav/sub_sitemap.gif) top left no-repeat;
}

#sub-mail a {
width:104px;
background:url(../images/nav/sub_mail.gif) top left no-repeat;
}


/************** Kontakformular/Validation ****************/


.formStyle {
font:small/160% Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
color:#000;
background-color:#F8F8F8;
border:1px solid #e0e0e0;
margin-bottom:10px;
width:420px;
padding:2px;
}

.formStyle_Large {
font:small/160% Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
color:#000;
background-color:#F8F8F8;
border:1px solid #e0e0e0;
margin-bottom:10px;
width:568px;
padding:2px;
}

.inputButton {
background:url("../images/formular/bg_button2.gif") no-repeat;
width:134px;
height:30px;
cursor:pointer;
border:0;
color:#000;
text-decoration:none;
}

.inputButton:hover {
text-decoration:none;
}

.validation-advice {
	margin-bottom: 10px;
	padding: 2px;
	background-color: #FF3300;
	color : #FFF;
	font-weight: bold;
}

input.disabled {

}

input.required {
font:small/160% Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
color:#000;
background-color:#F8F8F8;
border:1px solid #e0e0e0;
margin-bottom:10px;
width:420px;
padding:2px;
}

textarea.required {
font:small/160% Trebuchet MS, "Lucida Sans Unicode", Arial, Lucida Sans, Tahoma, Sans-Serif;
color:#000;
background-color:#F8F8F8;
border:1px solid #e0e0e0;
margin-bottom:10px;
width:568px;
padding:2px;
}

input.validation-failed, textarea.validation-failed {

}
input.validation-passed, textarea.validation-passed {

}

.custom-advice {

}

#log {
	width: 590px;
	margin-top: 10px;
}
 
#log_res {
	overflow: auto;
}
 
#log_res.ajax-loading {
	padding: 20px 0;
	background: url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat center;
}


/************** Portfolio ****************/


.folio-item {
position: relative; 
float: left; 
margin-bottom: 100px;
}

.folio-img {
position: relative; 
float: left;
}

.folio-info {
position: relative; 
float: left; 
width: 290px; 
height: 252px;
}

.folio-info_text { 
text-align: left; 
width: 250px; 
margin-left: 20px;
}