/* CSS-File generated by Christiane Mueller, http://www.itib.de */
/* Version: 2012-02-02 */

/* USED COLORS ------------------------------------------------- */
/* BENUTZTE FARBEN --------------------------------------------- */

/* white (e.g. main-background)             #FFFFFF   weiss      */
/* black (e.g. font)                        #000000   schwarz    */
/* light grey (e.g. content background)     #F5F5F5   hellgrau   */
/* grey (e.g. site background)              #DCDCDC   grau       */
/* dark grey (e.g. main border)             #777777   dunkelgrau */
/* lightest blue (browser background)       #f3f8fc   superhellblau   */
/* light blue (h1 font)                     #a2beff   hellblau   */
/* middle blue (active navi)                #3170d7   mittelblau */
/* dark blue (e.g. links)                   #001446   dunkelblau */

/* GENERAL ----------------------------------------------------- */
/* ALLGEMEIN --------------------------------------------------- */

/* page general */
/* Seite generell */
body {
  background: #f3f8fc url(../images/wip-bg.png) top left repeat-x;   /* Hintergrund: superhellblau */
  color: #000000;              /* Textfarbe: schwarz */
  font-family: Verdana, Helvetica, Arial, sans-serif; /* Schriftart: Verdana bis sans-serif */
  font-size: 100.01%;          /* Schriftgroesse: ca. 100% */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
  text-align: left;            /* Horizontale Ausrichtung: linksbuendig */
}

/* page-container including header-, main- and footer-container */
/* Seiten-Container mit Kopf-, Inhalts- und Fussbereich */
#top {
  background-color: #FFFFFF;   /* Hintergrund: dunkelgrau */
  border-right: 1px solid #777777;
  border-left: 1px solid #777777;
  border-bottom: 1px solid #3170d7;
  line-height: 1.5em;          /* Zeilenhoehe: 1.5fach */
  margin: auto;                /* Aussenabstand: automatisch */
  padding: 0;                  /* Innenabstand: keiner */
  max-width: 65em;             /* Maximalbreite: 65em */
}

#top div {
  font-size: .8em;
}

noscript p {
  display: inline;
  margin: 0;
  padding: 0;
}

li noscript p {
  font-style: italic;
}

div#top > noscript {
  font-size: .8em;
}

div.article > noscript p {
  font-style: italic;
  display: block;
  padding: .5em;               /* Innenabstand: 0.5em */
}

#top div div {
  font-size: 1em;
}

abbr {
  border-color: #a2beff;
}

blockquote {
  font-style: italic;
}

/* link general and visited link */
/* Verweis allgemein und bereits besuchter Verweis */
a:link,
a:visited {
  color: #001446;              /* Textfarbe: dunkelblau */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
  text-decoration: none;       /* Textdekoration: keine */
}

/* link on mouse-over, active or focused link */
/* Verweis bei Mouse-over,Aktiver Verweis oder Verweis mit Fokus */
a:hover,
a:active,
a:focus {
  background-color: #001446;   /* Hintergrund: dunkelblau */
  color: #FFFFFF;              /* Textfarbe: weiss */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
  text-decoration: underline;  /* Textdekoration: unterstrichen */
}

/* copyright notice */
/* Urheber-Hinweis */
.copyright {
  background-color: #f3f8fc;   /* Hintergrund: dunkelgrau */
  border-top: 1px solid #3170d7;
  color: #a2beff;              /* Textfarbe: hellblau */
  clear: both;                 /* Fortsetzung bei Textumfluss: unterhalb */
  float: none;                 /* Textumfluss: keiner */
  font-size: .8em;             /* Schriftgroesse: 80% des Elternelementes */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
  text-align: center;          /* Horizontale Ausrichtung: zentriert */
}

/* heading level 1 */
/* Ueberschrift Ebene 1 */
h1 {
  background: #a2beff url(../images/wip-header-bg.png);   /* Hintergrund: mittelblau */
  color: #000000;              /* Textfarbe: hellgrau */
  border-top-left-radius: .2em;
  border-top-right-radius: .2em;
  border-bottom: 2px solid #3170d7;
  font-size: 1.2em;            /* Schriftgroesse: 1.2em */
  font-weight: bold;           /* Schriftgewicht: fett */
  min-height: 40px;
  line-height: 40px;
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0 .5em;             /* Innenabstand: oben/unten keiner, rechts/links 0.5em */
  text-align: center;
  font-variant: small-caps;    /* Schriftvariante: Kapitaelchen */
}

h1.title {
  background: #FFFFFF none;    /* Hintergrund: weiss */
  border-bottom: 0;
  color: #a2beff;              /* Textfarbe: hellblau */
  font-size: 1.8em;            /* Schriftgroesse: 1.8em */
  line-height: 1.5em;          /* Zeilenhoehe: 1.5fach */
  font-variant: normal;        /* Schriftvariante: normal */
  margin-top: 1em;
}

h1 span {
  color: #777777;
  font-size: .5em;
  line-height: 1em;            /* Zeilenhoehe: 1fach */
  margin: 0;
  padding: 0;
}

/* heading level 2 */
/* Ueberschrift Ebene 2 */
h2 {
  background: #F5F5F5 url(../images/wip-header-banner.png);   /* Hintergrund: grau */
  border-top: 1px solid #DCDCDC;
  border-bottom: 2px solid #DCDCDC;
  color: #777777;
  border-top-left-radius: .2em;
  border-top-right-radius: .2em;
  font-size: 1.2em;            /* Schriftgroesse: 1.2em */
  font-weight: bold;           /* Schriftgewicht: fett */
  min-height: 40px;
  line-height: 40px;
  margin: 1em 0 0 0;                   /* Aussenabstand: oben 1em, Rest keiner */
  padding: 0 .5em 0 50px;          /* Innenabstand: oben/unten 0.2em, rechts/links 0.5em */
}

/* heading level 3 */
/* Ueberschrift Ebene 3 */
h3 {
  font-size: 1em;              /* Schriftgroesse: 1em */
  font-weight: bold;           /* Schriftgewicht: fett */
  line-height: 1.3em;          /* Zeilenhoehe: 1.3fach */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: .2em .5em;          /* Innenabstand: oben/unten 0.2em, rechts/links 0.5em */
}

/* CONTENT ----------------------------------------------------- */

/* Content-Container */
/* Inhaltsbereich */
.col100 {
  background-color: #FFFFFF;   /* Hintergrund: weiss */
  color: #000000;              /* Textfarbe: schwarz */
  clear: both;
  float: left;
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
  width: 100%;                 /* Breite: 100% */
}

.col20 {
  background-color: #FFFFFF;
  float: left;
  width: 20%;
}

.col60 {
  background-color: #FFFFFF;
  float: left;
  margin: 0 0 2em 0;                   /* Aussenabstand: keiner */
  width: 60%;
}

.border {
  border: 1px solid #777777;
  border-radius: .2em;
  -moz-border-radius: .2em;
  -webkit-border-radius: .2em;
}

.content {
  background-color: #F5F5F5;
  border: 1px solid #DCDCDC;
  border-radius: .2em;
  -moz-border-radius: .2em;
  -webkit-border-radius: .2em;
  margin: 0 1em;
  min-height: 53.8em;
  clear: both;
  float: left;
}

.content a {
  font-weight: bold;
}

.center {
  text-align: center;
}

.align-r {
  text-align: right;
}

div.col2 {
  float: left;
  margin: 1% 0 5% 1%;
  padding: 0;
  width: 49%;
}

div.col2 p {
  margin: 0;
  padding: .5em 0;
}

div.col2 h3 {
  padding: .2em 0;             /* Innenabstand: oben/unten 0.2em, rechts/links keiner */
}

div.col2 p.bild {
  float: left;
  margin-right: 1em;
  padding: 0;
  height: 130px;
  width: 130px;
}

p.bild img {
  border: 1px solid #777777;
  border-radius: .5em;
}

/* highlighted paragraph */
/* hervorgehobener Absatz */
.highlight {
  background: #a2beff url(../images/wip-small-banner.png);   /* Hintergrund: hellblau */
  color: #001446;              /* Textfarbe: dunkelblau */
  font-weight: bold;
  margin: 0 0 1em 0;                   /* Aussenabstand: keiner */
  min-height: 40px;
  line-height: 40px;
  padding: 0;               /* Innenabstand: 0.5em */
  text-align: center;
}

ul {
  list-style-type: square;
  margin: 0;                   /* Aussenabstand: keiner */
  padding: .5em 0 1em 1.6em;        /* Innenabstand: keiner */
}

ul.inline {
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
}

ul.footer {
  background-color: #a2beff;   /* Hintergrund: hellblau */
  border-top: 1px solid #3170d7;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  color: #3170d7;              /* Textfarbe: mittelblau */
  clear: both;                 /* Fortsetzung bei Textumfluss: unterhalb */
  float: none;                 /* Textumfluss: keiner */
  font-variant: small-caps;    /* Schriftvariante: Kapitaelchen */
  font-size: .8em;             /* Schriftgroesse: 80% des Elternelementes */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
  text-align: center;          /* Horizontale Ausrichtung: zentriert */
}

ul.headernavi {
  background-color: #a2beff;   /* Hintergrund: hellblau */
  border-bottom: 1px solid #3170d7;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  color: #3170d7;              /* Textfarbe: mittelblau */
  clear: both;                 /* Fortsetzung bei Textumfluss: unterhalb */
  float: none;                 /* Textumfluss: keiner */
  font-variant: small-caps;    /* Schriftvariante: Kapitaelchen */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
  text-align: center;          /* Horizontale Ausrichtung: zentriert */
}

ul.inline li {
  border-right: 2px solid #001446;
  color: #3170d7;
  display: inline;
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0 .3em 0 0;                  /* Innenabstand: keiner */
}

ul.inline li:last-child {
  border-right: 0;
}

ul.inline li strong {
  font-weight: normal;
}

ul.socialmedia {
  margin: 1em auto auto;
  width: 100%;
  text-align: center;
}

ul.socialmedia li {
  border: 0;
}

ul.socialmedia li img {
  border: 0 none;
}

ul.socialmedia li a:link,
ul.socialmedia li a:visited {
  background-color: #ffffff;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border: 0 none;
  display: inline-block;
  line-height: .8em;
  margin: 0;
  padding: 0;
}

ul.socialmedia li a:hover,
ul.socialmedia li a:active,
ul.socialmedia li a:focus {
  background-color: #a2beff;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border: 0 none;
  display: inline-block;
  line-height: .8em;
  margin: 0;
  padding: 0;
}

ol.clean {
  list-style: none;            /* Listendarstellung: keine */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
}

ol.clean li {
  background-color: #ffffff;
  padding-bottom: 1em;
}

ol.clean ul {
  list-style: none;            /* Listendarstellung: keine */
  padding: 0;                  /* Innenabstand: keiner */
}

ol.clean li ul li {
  padding-bottom: 0;
}

/* active item in the horizontal navigation-list */
/* Aktiver Listenpunkt in der horizontalen Navigationsleiste */
ol.navigation li strong {
  background-color: #3170d7;   /* Hintergrund: mittelblau */
  color: #a2beff;              /* Textfarbe: hellgrau */
  display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
  font-weight: bold;           /* Schriftgewicht: fett */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: .2em .5em;          /* Innenabstand: oben/unten 0.2em, rechts/links 0.5em */
}

/* link general and visited link in navigation-lists */
/* Verweis allgemein und bereits besuchter Verweis in Navigationsleisten */
ol.navigation li a:link,
ol.navigation li a:visited {
  display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
  font-weight: bold;           /* Schriftgewicht: fett */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: .2em .5em;          /* Innenabstand: oben/unten 0.2em, rechts/links 0.5em */
  text-decoration: none;       /* Textdekoration: keine */
}

/* link on mouse-over, active or focused link in navigation-lists */
/* Verweis bei Mouse-over, Aktiver Verweis und Verweis mit Fokus in Navigationsleisten */
ol.navigation li a:hover,
ol.navigation li a:active,
ol.navigation li a:focus {
  display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
  font-weight: bold;           /* Schriftgewicht: fett */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: .2em .5em;          /* Innenabstand: oben/unten 0.2em, rechts/links 0.5em */
  text-decoration: underline;  /* Textdekoration: unterstrichen */
}

ol.navigation li {
  background-color: #F5F5F5;
  border: 1px solid #a2beff;
  border-radius: .2em;
  font-variant: small-caps;    /* Schriftvariante: Kapitaelchen */
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;                  /* Innenabstand: keiner */
}

ol.mainnavi li {
  border-left: 0;
}

ol.subnavi li {
  border: 0;
}

ol.navigation li ul li {
  font-size: .9em;
  border-width: 0;
  border-top: 1px solid #DCDCDC;
  font-variant: normal;        /* Schriftvariante: normal */
}

ol.navigation li + li {
  margin-top: .5em;
}

ol.navigation li ul li {
  margin-top: 0;
}

ol.navigation li ul li a:link,
ol.navigation li ul li a:visited,
ol.navigation li ul li a:hover,
ol.navigation li ul li a:active,
ol.navigation li ul li a:focus {
  color: #777777;
  padding-left: 1em;
}

ol.navigation li ul li a:hover,
ol.navigation li ul li a:active,
ol.navigation li ul li a:focus {
  color: #DCDCDC;
  padding-left: 1em;
}

/* paragraph */
/* Absatz */
p {
  margin: 0;                   /* Aussenabstand: keiner */
  padding: .5em;               /* Innenabstand: 0.5em */
}

li p {
  padding: .5em 0;
}

.italic {
  font-style: italic;
}

/* paragraph linking to the top of the site */
/* Absatz mit Sprungmarke zum Seitenanfang */
p.up {
  font-size: .85em;            /* Schriftgroesse: 85% des Elternelementes */
  line-height: 1.3em;          /* Zeilenhoehe: 1.3fach */
  margin: 0 .5em;              /* Aussenabstand: oben/unten keiner, rechts/links 0.5em */
  padding: 0;                  /* Innenabstand: keiner */
  text-align: right;           /* Horizontale Ausrichtung: rechts */
}

/* definition list */
/* Definitionsliste */
dl {
  margin: 0;                   /* Aussenabstand: keiner */
  padding: 0;               /* Innenabstand: 0.5em */
  width: 100%;
}

dt {
  border-top: 1px solid #DCDCDC;
  clear: both;
  display: inline-block;
  vertical-align: top;
  width: 38.5%;
  margin: .5em 0 0 1.5%;                   /* Aussenabstand: keiner */
  padding: .5em 0 0 0;               /* Innenabstand: 0.5em */
}
/* Referenzen */
dl.refs dt {
  width: 18.5%;
}

div.article {
  clear: both;
  float: left;
  width: 70%;
}

dd {
  border-top: 1px solid #DCDCDC;
  display: inline-block;
  width: 57.5%;
  margin: .5em 1.5% 0 0;                   /* Aussenabstand: keiner */
  padding: .5em 0 0 0;               /* Innenabstand: 0.5em */
}

dl.refs dd {
  width: 77.5%;
}

div.image {
  float: left;
  text-align: right;
  width: 30%;
}

div.image + h2,
div.image + p {
  clear: both;
  float: none;
}

/* hide fancybox gallery images on site 'unternehmen'*/
dd a + a,
dd a + a.hide {display: none;}

dt:first-of-type,
dd:first-of-type {
  border-top: 0;
  margin-top: 0;
}

kbd {
  font-family: Verdana, Helvetica, Arial, sans-serif; /* Schriftart: Verdana bis sans-serif */
}

/* ########################### FORM ############################ */
/* ########################## Formular ######################### */

#contact {
  font-family: Verdana, Helvetica, Arial, sans-serif; /* Schriftart: Verdana bis sans-serif */
  font-size: .8em;
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
}

dl + #contact {
  margin: 1em 0;
}

#contact form {
  background-color: #FFFFFF;   /* Hintergrund: weiss */
  color: #000000;
  padding: 0;                  /* Innenabstand: keiner */
  margin: 0;
  width: 100%;
}

/* form: label before input field */
/* Formular: Beschriftung vor Eingabefeld */
#contact form label {
  color: #000000;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  display: inline-block;
  margin: 0;
  padding: 0 4% 0 0;
  text-align: right;
  vertical-align: top;
  width: 20%;
}

#contact form label.error {
  clear: both;
  float: none;
  color: #3170d7;
  margin-left: 25%;
  padding: 0;
  text-align: left;
  width: 75%;
}

/* form: input fields */
/* Formular: Eingabefelder */
#contact form input[type=text],
#contact form input[type=submit],
#contact form textarea {
  background-color: #F5F5F5; /* hellgrau */
  border: 1px solid #DCDCDC;
  border-radius: .2em;
  -moz-border-radius: .2em;
  -webkit-border-radius: .2em;
  color: #000000;
  display: inline-block;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 1em;
  margin: 0;
  padding: .1em 0;
  width: 74%;
}

/* form: input fields (on mouse-over, active and focus) */
/* Formular: Eingabefelder (bei Mouse-over, Aktiv oder Fokus) */
#contact form input[type=text]:hover,
#contact form input[type=text]:active,
#contact form input[type=text]:focus,
#contact form textarea:hover,
#contact form textarea:active,
#contact form textarea:focus {
  background-color: #DCDCDC; /* grau */
  border: 1px solid #777777;
  color: #000000;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  padding: .1em 0;
  font-size: 1em;
}

/* form: submit button */
/* Formular: Senden-Schaltflaeche */
#contact form input[type=submit] {
  background-color: #777777;
  color: #FFFFFF;
  font-size: 1.2em;
  font-weight: bold;
  min-height: 2em;
  margin: 0;
  padding: 0;
  width: 30%;
}

#contact form input[type=submit]:hover,
#contact form input[type=submit]:active,
#contact form input[type=submit]:focus {
  background-color: #001446;
  color: #FFFFFF;
}

/* paragraph in form element */
/* Absatz in Formular (Anfrage) */
#contact form p {
  margin: 0;
}

#contact form p:last-child {
  text-align: right;
}

img.logo {
  margin: .5em .5em 0 .5em;
  border: 2px solid #FFFFFF;
  border-radius: .5em;
}

a:link.image,
a:visited.image,
a:hover.image,
a:active.image,
a:focus.image {
  background-color: #FFFFFF;
  border: 2px solid #a2beff;
  border-radius: .5em;
  display: inline-block;
  margin: 0;
  padding: .5em .5em 0 .5em;
}

a:hover.image,
a:active.image,
a:focus.image {
  border-color: #001446;
  background-color: #a2beff;
}

ol.subnavi li a.image {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: .5em 0 0 .1em;
  text-align: right;
  overflow: hidden;
}

a:link.home,
a:visited.home,
a:hover.home,
a:active.home,
a:focus.home {
  border: 2px solid #001446;
  border-radius: .5em;
  display: inline-block;
  margin: 0;
  padding: .5em .5em 0 .5em;
}

a:link.home,
a:visited.home {
  border: 2px solid #FFFFFF;
}

a.home img {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}


a.image img {
  border: 0;
  border-radius: .5em;
  margin: 0;
  padding: 0;
}


ol.subnavi li a.image img {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-align: right;
  overflow: hidden;
}

.popup {
  font-size: .8em;
}

.popup h2 {
  margin-top: 0;
}

audio {
  background-color: #a2beff;
  border-radius: .5em;
}

/* Jquery UI Dialog (Kontaktformulare) */
.ui-widget-header {
  background: #F5F5F5 url(../images/wip-header-banner.png);
}

.ui-dialog-title {
  padding-left: 30px;
}