@CHARSET "UTF-8";

/* 
* Farben: 
* mittelblau: #4890cc
* hellblau: #a4c6e3;
* 'weiß': #f2f9ff; 
* lehmbraun: #cc6600
* orange: #f3c08c
*/
body {
    background: #f2f9ff;
    color: #000;
    font-size: 100.01%;
    font-family: sans-serif;
    line-height: 1.4;
}

body,html,h1,h2,h3,h4,p,div,ul,ol,dl,li,form {
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

p {
    max-width: none;
}

/* ##################### Accessibility Elements ######################## */
#path,
#sprungNav {
    position: absolute;
    top: 2em;
    left: -150em;
    width: 10em;
}

#sprungNav a:focus,#sprungNav a:active {
    position: absolute;
    left: 151em;
    top: 0.5em;
    width: 14em;
    background: #fff;
    color: #000;
}

h2,#suche label,#service2 p,#mainNav .active span,#suche2 label {
    position: absolute;
    left: -130em;
    width: 20em;
}

/* ##################### Seitenlayout ############################ */
#header {
    position: relative;
}

#page {
    position: relative;
    padding-top: 6em;
    max-width: 70em;
    min-width: 32em;
    margin: auto;
}

#container {
    padding-right: 120px;
    overflow: hidden;
}

#inhalt {
    float: left;
    width: 100%;
}

#content {
    padding: 0 1em;
    padding-left: 15em; /* Nachhilfe für Moz 1.4 */
}

#mainNav {
    float: left;
    width: 14em;
    background-color: #a4c6e3;
}

#recommandations {
    float: right;
    display: inline;
    margin-right: -120px;
    /*background-color: #ddd;*/
    width: 120px; /* Dieser Wert wird für die Überprüfung auf CSS für 
    den "klappContent" abgefragt! Bei Änderungen wa.js anpassen */
    height: 720px;
    margin-right: -120px;
}
#recommandations h2 {
    position: static;
    left: 0;
    width: auto;
    font-size: .68em;
}
#recommandations ul#extlinks {
    list-style: none;
    margin: 1em 0;
    /*padding: .5em .5em;
    background-color: #f3c08c;*/
    font-size: .76em;
}
#recommandations ul#extlinks li {
    margin-bottom: .25em;
}
#recommandations #extlinks li a {
    display: block;
}
#recommandations .partnerlink {
    margin-bottom: 1em;
    font-size: .68em;
}
#recommandations #extlinks li a,
#recommandations .partnerlink a {
    color: #000;
}
#recommandations #extlinks li a:hover,
#recommandations #extlinks li a:focus,
#recommandations .partnerlink a:hover,
#recommandations .partnerlink a:focus {
    background-color: #a4c6e3;
}
#recommandations img.logo {
    float: left; 
    width: 3em;
    margin: .25em .5em .5em 0;
}


/* an ein paar Stellen brauchen alten Mozillen Nachhilfe in Sachen Containing Float */
#content .buchliste li:after,
#container:after, 
#service ul:after, 
#service2 ul:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    position: relative;
    visibility: hidden;
}


/* ################## Service Navigation ######################## */
#service {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #a4c6e3;
    height: 2em;
}

#service2 {
    background: #a4c6e3;
    width: 100%;
    position: relative;
    height: 2em;
    margin-top: 1em;
}

#service ul, #service2 ul {
    margin-right: 14em;
    background-color: #a4c6e3;
    overflow: hidden;
}

#service li,#service2 li {
    width: 23%;
    min-width: 10em;
    font-size: 0.8em;
    float: left;
    list-style: none;
    background: #4890cc;
    margin-right: 1%;
    height: 2.5em;
}

#service li.drucker img,
#service2 li.drucker img {
    vertical-align: bottom;
    padding-left: 0.5em;
    height: 2em;
}

#service a,#service2 a,#service span.active,#service2 span.active {
    font-weight: bold;
    text-decoration: none;
    display: block;
    height: 1.5em;
    padding: 0.5em;
}

#service a:link,#service a:visited,#service2 a:link,#service2 a:visited {
    color: #000;
}

#service span.active,#service a:hover,#service a:focus,#service a:active,#service2 span.active,#service2 a:hover,#service2 a:focus,#service2 a:active
    {
    background-color: #a4c6e3;
    background-image: url(/img/icon/kringel.gif);
    background-repeat: no-repeat;
    background-position: right center;
}

#service a:hover,#service a:focus,#service a:active {
    background-color: #f3c08c;
}

/* ############# Suchformular Servicenav ##################### */
#suche,#suche2 {
    width: 14em;
}

#suche {
    position: absolute;
    right: 0;
    padding: 0 0 0 0.4em;
    height: 2em;
    background-color: #4890cc;
    top: 0;
    z-index: 5;
}

#suche2 {
    position: absolute;
    right: 0;
    bottom: 0;
}

#suche div,#suche2 div {
    font-size: 0.8em;
    background-color: #4890cc;
    margin: 0;
    padding: 0 32px 0 0.3em;
    height: 2.5em;
}

#search,#search2 {
    border: 1px solid #000;
    padding: 1px;
    width: 80%;
    position: absolute;
    bottom: 0.3em;
    right: 28px;
    height: 1.6em;
}

#search :hover,#search :active,#search :focus,#search2 :hover,#search2
    :active,#search2 :focus {
    border-width: 2px;
    padding: 0;
}

#suche input.submit,#suche2 input.submit {
    padding: 0;
    background-color: #4890cc;
    border: none;
    width: 24px;
    position: absolute;
    right: 0;
    bottom: 0.3em;
}

/* ##################### Head ##################### */
h1 {
    font-size: 1.7em;
    line-height: normal;
    font-weight: normal;
    background-color: #4890cc;
    min-height: 70px;
    margin-bottom: 2em;
    padding-right: 350px;
    padding-left: 2em;
}

h1 span {
    position: relative;
    top: -0.75em;
}

#header img {
    position: absolute;
    right: 120px;
    top: -50px;
}

#beratung #header img {
    top: -40px;
}

#infos #header img {
    top: -30px;
}

/* ################## Hauptnavigation ################# */
#mainNav ul {
    list-style: none;
}

#mainNav li {
    margin-bottom: 0.8em;
    width: 100%;
    background-color: #4890cc;
}

#mainNav a,#mainNav span {
    display: block;
    padding: 0.5em;
    font-size: 0.9em;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

#mainNav span.active,#mainNav a:hover,#mainNav a:focus,#mainNav a:active
    {
    background-color: #a4c6e3;
    background-image: url(/img/icon/kringel.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%; 
    /* ursprünglich : 95% center; aber wg. Moz1.4 Problemen geändert.
    Mischung von % und keywords ist erst in neueren Versionen von CSS 2.1 erlaubt */ 
}

#mainNav li.active a {
    background-image: url(/img/icon/kringel.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

#mainNav a:hover,#mainNav a:focus,#mainNav a:active {
    background-color: #f3c08c;
}

#mainNav img {
    vertical-align: middle;
    height: 1.65em;
}

#mainNav #secondary {
    margin-top: 1em;
    border: 2em solid #4890cc;
    border-width: 2em 0;
    padding-top: 0.5em;
}

/* ############## content ###################### */
#content p {
    margin: 0.5em 0;
    max-width: 42em;
}

#content h3 {
    font-size: 1.3em;
    border-bottom: 4px solid #f3c08c;
    margin-bottom: 1em;
    max-width: 32em; /* 42 / 1.3 */
}

#content h4 {
    font-size: 1.2em;
    border-bottom: 4px solid #4890cc;
    margin: 1.5em 0 0.5em 0;
    max-width: 35em; /* 42 / 1.2 */
}

#content ul {
    padding-left: 1.5em;
    margin: 1em 0 1em 1.5em;
    max-width: 39em; /* 42 - 1.5 - 1.5 */
}

#content li {
    margin: 0.2em 0;
}
#content ul.items {
    list-style: none;
    margin-left: 0;
    padding: 0;
}
#content ul.items li {
    margin: 0 0 .5em;
    background: url(/img/icon/punkt.gif) no-repeat left top;
    padding: 0 0 0 27px;
}
#content p#date {
    margin-top: 2em;
}

/* ########## portraitseite / Beratung ################## */
#content #portraet h4 {
    border: none;
}

#content #portraet {
    padding-left: 150px;
    position: relative;
}

#portraet p.img {
    position: absolute;
    left: 0;
    top: -2px;
    width: 140px;
    text-align: center;
    font-size: 91%;
}

/* Definition List */
#content dl.vita {
    margin: 0 0 1em;
    overflow: hidden;
}
#content dl.vita dt {
	float: left;
    clear: left;
	width: 12.5em;
}
#content dl.vita dd {
    margin-bottom: 1em;
	margin-left: 13.5em;
}
#content dl.vita dd span { /* similar to .clearall */
    display: block;
    clear: left;
    font-size: 0;
    /* optional */
    line-height: 0;
    height: 0;
}



/* ################ Infoseite ###################### */
#content .buchliste,
#content .linkliste {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

#content .buchliste li,
#content .linkliste li {
    margin-bottom: 0.7em;
}

#content .buchliste p,
#content .linkliste p {
    padding-left: 30px;
    margin-top: 0.2em;
    font-size: 0.85em;
}
#content .buchliste li {
    overflow: hidden;
}
#content .buchliste .cover {
    float: left;
    padding-top: .2em;
    width: 45px;
}
#content .buchliste .info {
    float: left;
    width: 85%;
}

.linkliste a {
    color: #000;
    padding-left: 30px;
    background-image: url(/img/icon/info-blau.gif);
    background-position: left center;
    background-repeat: no-repeat;
}

.linkliste a span {
    padding-right: 30px;
    background-image: url(/img/icon/pfeil-blau.gif);
    background-repeat: no-repeat;
    background-position: right center;
}

.linkliste a:visited span {
    background-image: url(/img/icon/haken.gif);
}

.linkliste a:visited {
    background-image: url(/img/icon/info-hblau.gif);
}

.linkliste a:hover,.linkliste a:focus,.linkliste a:active {
    background-image: url(/img/icon/info-braun.gif);
    background-color: #F3C08D;
}

.linkliste a:hover span,.linkliste a:focus span,.linkliste a:active span
    {
    background-image: url(/img/icon/pfeil-braun.gif);
}
#content .buchliste li {
    margin-bottom: 1em;
}
#content .buchliste img {
    border: 1px solid #000;
}
#content .buchliste .buchtitel {
    font-weight: bold;
}

#content .buchliste a {
    color: #000;
    /*padding-left: 30px;
    background-image: url(/img/icon/info-blau.gif);
    background-position: left center;
    background-repeat: no-repeat;*/
    padding-left: 0;
    background: none;
}

#content .buchliste a span {
    padding-right: 0;
    background-image: none;
}

#content .buchliste a:visited span {
    background-image: none;
}

#content .buchliste a:visited {
    background-image: none;
}

#content .buchliste a:hover,#content .buchliste a:focus,#content .buchliste a:active {
    /*background-image: url(/img/icon/info-braun.gif);*/
    background-color: #F3C08D;
}

#content .buchliste a:hover span,#content .buchliste a:focus span,#content .buchliste a:active span
    {
    background-image: url(/img/icon/pfeil-braun.gif);
}

/* #################### Kontaktseite ###################### */
address {
    font-style: normal;
    line-height: 2em;
    margin-bottom: 2em;
}

/* hide from MacIE \*/
#content form p,#content form div {
    margin: 1em 0;
    clear: left;
    margin-left: 11em;
}

#content input,textarea,select {
    width: 100%;
    border: 1px solid #000;
    max-width: 32em; /* evtl. rausnehmen, weil die verschiedenen 
    Felder unterschiedlich berechnet werden */
    padding: 1px;
}

label {
    width: 10em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    margin-left: -10.5em;
    line-height: 1;
}

#content .submit input {
    background: #4890cc;
    width: 10em;
    display: block;
    padding-left: 0.4em;
    margin: 0.5em 0;
    text-align: left;
    background-image: url(/img/icon/pfeil-schwarz.gif);
    background-position: right center;
    background-repeat: no-repeat;
    margin: 0.5em 0;
}

#content .submit input:hover,#content .submit input:focus {
    background-color: #f3c08c;
}

form span.error {
    color: #c60;
    font-size: 0.8em;
    display: block;
    margin-bottom: 1em;
}

#content input:hover,#content  input:focus,#content input:active,textarea:hover,textarea:focus,textarea:active,select:hover,select:focus,select:active
    {
    border-width: 2px;
    padding: 0;
}

fieldset {
    margin: 1.5em 0;
}

/* Mac is back */
    /* #################### Klappcontent ################### */
#klappContent h3 {
    background-image: url(/img/icon/info-blau.gif);
    background-repeat: no-repeat;
    background-position: left 0;
    padding-left: 40px;
    margin: 1em 0 0.5em 0;
    border: none;
}

#klappContent h3.link,#klappContent h3.active,#klappContent h3.visited {
    background-image: none;
    padding-left: 0;
}

#klappContent h3 a {
    display: block;
    /* ermöglicht sauberes padding bei mehrzeiligen Überschriften */
    text-decoration: none;
    color: black;
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: left 0;
}

#klappContent h3 span {
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
}

#klappContent h3.link a {
    background-image: url(/img/icon/info-blau.gif);
}

#klappContent h3.link span {
    background-image: url(/img/icon/pfeil-blau.gif);
    border-bottom: 1px solid black;
}

#klappContent h3.visited a {
    background-image: url(/img/icon/info-hblau.gif);
}

#klappContent h3.visited span {
    background-image: url(/img/icon/haken.gif);
    border-bottom: 1px solid black;
}

#klappContent h3.active a {
    background-image: url(/img/icon/info-braun.gif);
}

#klappContent p {
    padding-left: 40px;
}

#klappContent h3.active span {
    background-image: none;
    border-bottom: 4px solid #f3c08c;
}

#klappContent h3.active a span {
    background-image: url(/img/icon/pfeil-blau-links.gif);
}

#content #klappContent a:hover,
#content #klappContent a:focus {
    background-image: url(/img/icon/info-braun.gif);
    background-color: #F3C08D;
}

#klappContent a:hover span,
#klappContent a:focus span,
#klappContent a:active span {
    background-image: url(/img/icon/pfeil-braun.gif);
}

#klappContent h3.active a:hover span {
    background-image: url(/img/icon/pfeil-braun-links.gif);
}

#content a,
#content #klappContent a {
    color: #000;
}

#content #klappContent p a:hover,
#content #klappContent p a:focus,
#content #klappContent p a:active {
    background-image: none;
}

/* Zusatz für switch = zentralen Ein-/Ausklapper */
#klappContent #switch {
    font-size: 0.85em;
    text-align: right;
    width: 9em;
    padding: 0.2em;
    float: right;
    margin: 0;
    position: relative;
}

#klappContent #switch a {
    background: none;
}

#klappContent #switch a:hover, #klappContent #switch a:focus, #klappContent #switch a:active {
    background-image: none;
}