/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
img { border: none; }
a { outline: none; }
/* LAYOUT */
.clear { clear: both; }
.hide { display: none; }
.spacer { margin: 0 auto; width: 990px; height: 80px; background: #eeeff0; clear:both; }
#line { width: 540px; height: 2px; color: #dededf; background:#dededf; margin: 5px 0px 50px 0px; line-height:2px; font-size: 0px; }
#masterwrapper { margin: 0 auto; width: 1000px; background: url(../images/shadow.jpg) repeat-y; }
#header { margin: 0 auto; width: 990px; height: 180px; background: #fff; }
#logo { float: right; }
#nav { margin: 0 auto; width: 990px; height: 40px; background: #7399a7; }
#wrapper { margin: 0 auto; width: 990px; height: 100%; background: #eeeff0; position:relative; }
#content { padding: 0px 40px; width: 540px; background: #eeeff0; float: left; position:relative; display:inline; }
#sidebar { width: 370px; height: 100%; background: #eeeff0; float: right; text-align: left; position:relative; display:inline; }
#infobox { margin: 80px 0px 0px 0px; padding: 40px; width: 288px; height: 100%; background: #fff; border: solid #dededf; border-width: 2px 0px 2px 2px; }
#footer { margin: 0 auto; width: 1000px; height: 31px; background: url(../images/footer.jpg) ; }
/* TYPO */
body {margin-bottom: 150px; font: 13px/16px "Lucida Grande", Arial, sans-serif; color: #545454; }
#content p { line-height: 24px; letter-spacing: 0.20px; }
#content h2 { font: 20px Georgia, Times, serif; color: #7399a7; }
#content a:link, #content a:visited { color:#7399a7; text-decoration:none; }
#content a:hover, #content a:active { color:#7399a7; text-decoration:underline; }
#content ul { list-style: circle; margin: 10px 15px; padding: 0px; line-height: 22px;}
#infobox p { font-size: 11px; line-height: 22px; letter-spacing: 0.20px; }
#infobox a:link, #crossnav a:visited { color:#7399a7; text-decoration:none; }
#infobox a:hover, #crossnav a:active { color:#7399a7; text-decoration: underline; }
#crossnav p { padding: 5px 0px 0px 45px; font-size: 11px; letter-spacing: 0.20px; color: #eeeff0; }
#crossnav a:link, #crossnav a:visited { color: #fff; text-decoration: none; }
#crossnav a:hover, #crossnav a:active { color: #fff; text-decoration: underline; }
/* MENU */
#menu { margin-left: 30px; }
#menu li { float:left; }
#menu li.last { float:left;}
#menu li a:link, #menu li a:visited { display: block; padding: 12px 16px; font: 13px "Lucida Grande", Arial, Sans-Serif; text-transform:uppercase; text-decoration:none; color: #eeeff0; letter-spacing: 2px; }
#menu li a:hover { color: #fff; background: #5c5c5c; }
#menu a:active { color: #fff; background: #737d7f; }
#menu li.active a { color: #fff; background: #737d7f; }
.active a { color: #fff; background: #737d7f; }
/* -------------------------------------------------------------
CONTACTFORM
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* -------------------------------------------------------------
STRUKTUR
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#formcontent {
margin : 0px;
padding: 0px;
width : 600px;
height : 600px;
}
#formcontent a {
color: #666;
text-decoration: none;
}
div#formwrapper {
/* Allgemeines Container */
margin: 0;
width: 000px;
padding: 0 0 35px 0;
text-align:left;
float:left;
font: 12px Trebuchet MS, Trebuchet, Helvetica, Arial, sans-serif; color:#4d4d4d; line-height: 20px;
}
div.errors {
font: 14px Trebuchet MS, Trebuchet, Helvetica, Arial, sans-serif; color:#33CC00; line-height: 20px;
}
div#formular {
/* Sub-Container, wird nach rechts verschoben, da links bei einem Formulare
weitere Elemente stehen werden. Typische Alternative: margin: 0 auto; */
padding: 0 0 0 0;
text-align: left;
width: 500px;
}
.contactleft {
/* Linker Bereich des Formulars: fuer Labels */
width: 10%;
clear: both;
/*float: left;*/
display: inline;
padding: 0;
margin: 0 0 0 0;
text-align: right;
}
.contactright {
/* Rechter Bereich des Formulars: fuer Eingabefelder */
width: 70%;
text-align: left;
/*float: right;*/
display: inline;
padding: 0px 0px 25px 0px;
margin: 0 35px;
}
/* -------------------------------------------------------------
GESTALTUNG VON EINGABEFELDERN
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
input, textarea {
border: 1px solid #d6d6d6;
}
.contactform {
/* Hintergrundebene mittels overflow */
height: 100%;
/*overflow: auto;*/
}
.contactform #kt_name,
.contactform #kt_addr,
.contactform #kt_plz,
.contactform #kt_city,
.contactform #kt_email,
.contactform #kt_telefon,
.contactform #kt_nachricht {
width: 80%;
padding: 5px;
color: #7b7b7b;
font: 1.1em/1.6em Verdana ,Arial, Helvetica, sans-serif;
}
#subm {
/* Versenden-Schaltflaeche */
font: 1.1em/1.6em Verdana ,Arial, Helvetica, sans-serif;
width: 100px;
border: 1px solid #d6d6d6;
padding: 4px 5px 4px 5px;
color: #7b7b7b;
background: #fff;
}
/* ICONS FUER EINGABEFELDER */
.contactform #kt_name {
background: #fff url(/assets/images/form/user.jpg) no-repeat left;
}
.contactform #kt_addr {
background: #fff url(/assets/images/form/user.jpg) no-repeat left;
}
.contactform #kt_plz {
background: #fff url(/assets/images/form/user.jpg) no-repeat left;
}
.contactform #kt_city {
background: #fff url(/assets/images/form/user.jpg) no-repeat left;
}
.contactform #kt_email {
background: #fff url(/assets/images/form/mail.jpg) no-repeat left;
}
.contactform #kt_telefon {
background: #fff url(/assets/images/form/world.jpg) no-repeat left;
}
.contactform #kt_nachricht {
width: 86%;
background: #fff url(/assets/images/form/comment.gif) no-repeat bottom right;
}
.contactform #kt_name,
.contactform #kt_addr,
.contactform #kt_plz,
.contactform #kt_city,
.contactform #kt_email,
.contactform #kt_telefon
{
width: 80%;
padding: 5px 5px 5px 30px;
}
/* Hover-Zustaende fuer jeweilige Eingabefelder */
.contactform #kt_name:hover,
.contactform #kt_addr:hover,
.contactform #kt_plz:hover,
.contactform #kt_city:hover,
.contactform #kt_email:hover,
.contactform #kt_telefon:hover,
.contactform #kt_nachricht:hover {
background-color: #fff;
border: 1px solid #d6d6d6;
color: #7b7b7b;
}
.contactform #kt_name:focus,
.contactform #kt_addr:focus,
.contactform #kt_plz:focus,
.contactform #kt_city:focus,
.contactform #kt_email:focus,
.contactform #kt_telefon:focus,
.contactform #kt_nachricht:focus
{
border: 1px solid #d6d6d6;
color: #7b7b7b;
background-color: #fff;
}
.contactform .wrong #kt_email {
/* Gestaltung der Felder mit Fehlermeldungen */
background: #ffffff url(/assets/images/form/warning.gif) no-repeat left;
color: #333333;
border: 1px solid #d6d6d6;
}
.contactform #Erfolg {
/* Mitteilung: Informationen wurden versandt */
background: #fff url(/assets/images/form/accept.gif) no-repeat left;
border: 1px solid #eeeeee;
color: #0066CC;
padding: 10px 10px 10px 30px;
width: 80%;
margin: 1.5em auto;
}
/* -------------------------------------------------------------
ALLGEMEINE ATTRIBUTE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h2 {
/* Ueberschrift der Seite */
font-family: Verdana ,Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 4em;
color: #7b7b7b;
}
span.required {
/* Markierung des Eingabefeldes, das ausgefuellt werden soll */
color: #ccc;
font-size: 16px;
padding-left: 2px;
}
label {
/* Beschriftung des Eingabeldes */
color: #999;
padding: 2px 5px 2px 5px;
/* Hintergrundfarbe + Abrundung
background-color: #5ea4d7;*/
}
/* ---------->>> jtip <<<---------------------------------------------------------------*/
#JT_arrow_left{
background-image: url(../images/arrow_left.gif);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
z-index:101;
left:-12px;
height:23px;
width:10px;
top:-3px;
}
#JT_arrow_right{
background-image: url(../images/arrow_right.gif);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
z-index:101;
height:23px;
width:11px;
top:-2px;
}
#JT {
position: absolute;
z-index:100;
border: 2px solid #7399a7;
background-color: #fff;
font-size: 11px;
}
#JT_copy{
padding:10px 10px 10px 10px;
color:#545454;
}
.JT_loader{
background-image: url(../images/loader.gif);
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:12px;
}
#JT_close_left{
background-color: #7399a7;
text-align: left;
padding-left: 8px;
padding-bottom: 5px;
padding-top: 2px;
font-weight:bold;
}
#JT_close_right{
background-color: #7399a7;
text-align: left;
padding-left: 8px;
padding-bottom: 5px;
padding-top: 2px;
font-weight:bold;
}
#JT_copy p{
margin:3px 0;
color:#545454;
}
#JT span{
color:#fff;
}
#JT_copy img{
padding: 1px;
border: 1px solid #7399a7;
}
.jTip{
cursor:help;
}