/*
Dunkelgrau: #C4C4C4
Hellgrau: #F1F1F1
Dunkelblau: #00ADEF
Hellblau: #30BEF0
LogoBlau: 00B2EC
2FC0EF

*/
body {
    margin: 0px;
    padding: 0px;
    background-image: url('../pic/grid.png');
    background-repeat: repeat;
}

div#page {
    width: 985px;
    margin: 0 auto 0 auto;
    background-color: #FFFFFF;
}

div#head-topnav {
    background-color: #F1F1F1;
    text-align: right;
    border-left: 150px solid #C4C4C4;
    padding: 2px 25px 2px 0;
    height: 10px;
    font-size: 10px;
}

div#head-topnav a {
    padding: 0 0 0 5px;
}

div#head-topnav a:link {
    color: #444444;
}

div#head-topnav a:visited {
    color: #444444;
}

div#head-topnav a:hover {
    color: #444444;
}

div#head-topnav a:active {
    color: #444444;
}

div#head-left {
    float: left;
    width: 300px;
    background-color: #FFFFFF;
}

div#head-left div#head-logo {
    padding: 25px 0 0 25px;
}

div#head-right {
    background-color: #F1F1F1;
    float: left;
    width: 685px;
}

div#head-search {
    margin: 80px 0 0 45px;
}

div#head-search input {
    font-size: 10px;
}

div#head-search input.button {
    border: none;
    background-color: transparent;
}

div#head-nav {
    margin: 35px 0 0 45px;
}

div#head-nav a {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin: 0 1px 0 1px;
    float: left;
    color: #000000;
    display: block;
    padding: 0 10px 2px 10px;
}

div#head-nav a.unselected {
    border-bottom: 12px solid #C4C4C4;
}

div#head-nav a.selected {
    border-bottom: 12px solid #00ADEF;
}

div#head-nav a:hover {
    border-bottom: 12px solid #30BEF0;
}

div#navigation {
    width: 255px;
    background-color: #C4C4C4;
    float: left;
}

div#content {
    float: left;
    width: 730px;
}

div#content-full {
    float: left;
    width: 730px;
}

div#content-full div#content-full-inner {
    padding: 5px 15px 0 45px;
}

div#content-left {
    float: left;
    /* width: 565px; */
    width: 559px;
}

div#content-left div#content-left-inner {
    padding: 5px 15px 0 90px;
}

div#content-right {
    margin: 80px 0 0 0;
    width: 165px;
    float: left;
}

div#content-right-inner {
    
}

div#navigation {
    font-family: Verdana, sans-serif;
    font-size: 13px;
}

div#navigation  div.navhead {
    padding: 6px 2px 6px 15px;
    margin: 0;
    background-color: #00ADEF;
    font-weight: bold;
    letter-spacing: 0.15em;
    border-bottom: 2px solid #F1F1F1;
}

div#navigation a {
    color: #000000;
    display: block;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
}

div#navigation div {
    margin: 5px 5px 5px 5px;
}

div#navigation div.selected {
    background-color: #00ADEF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}

div#navigation div.active {
    background-color: #F1F1F1;
    border-left: 2px solid #00ADEF;
    border-right: 2px solid #00ADEF;
}

div#statusnav {
    margin: 0 0 15px 0;
}

div#footer {
    text-align: center;
    color: #818181;
    font-size: 10px;
    margin: 12px 0 0 0;
    padding: 0 0 15px 0;
}

div.shop-category h2 a {
    color: #30BEF0;
    font-weight: bold;
    font-size: 0.85em;
    padding: 0 0 15px 0;
    text-decoration: none;
}

div.shop-category div.toggle-target {
    margin: 0 0 0 25px;
}

.content ul {
    list-style: disc;
    padding: 0 0 0 25px;
}

.content ul li {
    padding: 5px 0 5px 0;
}

h1, h2, b{
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    color:#30BEF0;
    font-weight: bold;
}

h1 {
    font-size:1.05em;
    padding: 0 0 15px 0;
}

/* Subheadline und h2 */
h2, strong, b {
    font-size:0.85em;
    padding: 0 0 15px 0;
}

/* Überschriften H3 bis H6 */
h3,h4,h5,h6 {color:#0DA2D6;}

h3 {
    font-size:1.4em;
    line-height: 1.8em;
    font-weight:bold;
}
h4 {
    font-size:1.2em;
    line-height: 1.5em;
    font-weight:bold;
}
h5 {
    font-size:1.2em;
    line-height: 1.5em;
    font-weight:normal;
}

h6 {
    font-size:1.0em;
    line-height: 1.2em;
    font-weight:bold;
}

/* 2. Texte */
/* Allgemein */
body, td {
    font-size: 100%;
    font-family: Verdana,Arial,Helvetica,Helv,sans-serif;
    color: #000000;
}

/* Bildelemente innerhalb der Content-Komponenten */
/* Links vom Text stehende Bildelemente */
.obj-fliess-left { /* Aussenabstand der umflossenen Elemente zum Text bzw Nachbarelementen */
    float:left;
    width:auto;
	padding-top:0px;
	padding-bottom:7px;
	padding-right:5px;
	padding-left:0px;
	margin-right:10px;
}
/* Rechts vom Text stehende Bildelemente */
.obj-fliess-right { /* Aussenabstand der umflossenen Elemente zum Text bzw Nachbarelementen */
    float:right;
    width:auto;
	padding-top:0px;
	padding-bottom:7px;
	padding-right:0px;
	padding-left:10px;
	margin-right:0px;
}

.obj-fliess-center { /* Aussenabstand der umflossenen Elemente zum Text bzw Nachbarelementen */
	padding-top:0px;
	padding-bottom:7px;
	padding-left:0px;
}



/* Bilduntertitel in der gesamten Seite */
.bildtitel {
    padding-left:2px;
    padding-right:0px;
    padding-top:2px;
    padding-bottom:2px;
}


/* Element innerhalb des Funktionsbereichs */
.func-element {
    margin-left:0px;
    margin-top:10px;
    margin-bottom:10px;
}

/* Abstand zwischen zwei Funktionsbereichscontainern */
/* Abstand zwischen zwei Elementen innerhalb der Funktions-Container */
.component-func-spacer {
    height:10px;
    margin:0;
}


/* Abstände der Texte im Funktionsbereich */
.func .fliess {
    width:auto;
    padding-right:7px;
    padding-left:8px;
    padding-bottom:0px;
    padding-top:0px;
}

/* Überschrift Funktionsbereich -> Container */
.func-container-head {
    padding-top:0px;
}

/* Überschrift innerhalb der Text/Bildkomponente im Funktionsbereich */
.func-headline {
    width:auto;
    padding-top:0px;
    padding-left:5px;
    margin-bottom:3px;
    /*border:1px solid red;*/
}

/* Abstand einer Liste zur linken Linie */
.func ul {
    padding-left:8px;
}


/* Großbild im PopUp - Überschrift  */
.pic-popup-head {
    padding-bottom:0px;
}

.bigpic {
	padding-top:1px;
	padding-right:1px;
	padding-bottom:2px;
}


div.fliess-shop-kat {
	margin-top:0px;
	margin-bottom:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:12px;
	padding-top:0px;
}


/* Fliesstext über dem Suchfeld */
.fliess-search {
    padding-left:4px;
    margin-top:2px;
    margin-bottom:3px;
}



/* Tabelle im Contentbereich */
table.prod-tab {
	border: 1px solid #C4C4C4;
	border-right: none;
	border-bottom: none;
}

/* Tablenfeld für Tabelle */
table.prod-tab td {
	border-right: 1px solid #C4C4C4;
	border-bottom: 1px solid #C4C4C4;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: top;
}

tr.prod-tab-head td {
	padding-top:3px;
	padding-bottom:3px;
}

/* Tabellenfooter für Tabelle */
tr.prod-tab-footer td {
	border-bottom: none;
}


/* ##########################  Ab hier nichts zu editieren! ##################### */
/* Die nächsten Klassen sind nur Ergänzungen zur Umflusskontrolle.*/
.popuppic {position:static;}
.cont-txt { width:auto; }


.prod-obj-fliess-right {
    float:right;
    width:auto;
}


/* Großbild im PopUp - Überschrift */
.pic-popup-head {
    font-size:1.0em;
    font-weight: bold;
    color:#91909A;
    padding-bottom:2px;
}

.popup-head-underline {
    background-color:#2B6E80;
}




/* Texte im Contentbereich */
/* body#ta für Schriftkorrektur im Texteditor! */
/* Normaler Fliesstext  (.fliess-shop-kat -> Fliesstext für Shop-Komponente) */
body#ta, .fliess, .fliess-shop-kat {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:0.75em;
    font-weight:normal;
    color: #000000;
    line-height:1.30em;
}


div#content-full div.content-componente {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:0.75em;
    font-weight:normal;
    color: #000000;
    line-height:1.30em;
}

/* htWEB-Fixes*/
td.htWeb-schwarze-linie ,td.htWeb-graue-linie,td.schwarze_linie,td.htWeb-orange
{
    height: 1px;
    font-size: 1px;
}

div.tagnavigation {
    width: 250px;
    border: 1px solid #ddd;
}

/* Bildtitel (Content-Bereich) */
div.adlt-text {
    float: left;
    margin: 3px 3px 3px 3px;
}

/* Bildunterschrift */
.alt-text {
    float: left;
    font-family: Verdana,Arial,Helvetica,Helv,sans-serif;
    font-size:0.75em;
    color:#878787;
    padding-left:2px;
    padding-right:0px;
    padding-top:2px;
    padding-bottom:2px;
}


/* popUp-Icon */
div.big-pic {
    margin: 3px 3px 3px 3px;
    float: left;
}




/* Texte im Funktionsbereich */
.func .fliess, .fliess-dl {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:0.70em;
    font-weight:normal;
    color:#878787;
}



/* Kleiner Text */
.small {
    font-size:0.65em;
    color:#666666;
}

/* Hinweistext Fehler */
.warn {
    font-size:0.75em;
    font-weight:bold;
    color:#FF0000;
}

/* Text in Statuszeile */
.status {
    font-family:  Arial, Helvetica;
    font-size: 0.60em;
    font-weight: normal;
    text-decoration: none;
    color:#6A7173;
}

.status-nav {
    background-color:#B8E8FF;
}

/* Trennelement zwischen Statusnav-Punkten */
.statusnav-sep {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.80em;
    font-weight: bold;
    color:#04ADF0;
}


/* 3. Links */
/* Allgemein */
.content a {
    font-family: Verdana,Arial,Helvetica,Helv,sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration:underline;
    color:#00ADEF;

}
.content a:link { color:#00ADEF; }
.content a:visited { color:#00ADEF; }
.content a:hover { color:#00ADEF; }
.content a:active { color:#00ADEF; }
.content a.textlink {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:1.00em;
    font-weight:bold;
    color:#6A7173;
    text-decoration:none;
    padding-left:12px;
    background-image:url('../pic/pfeil.gif');
    background-repeat:no-repeat;
    background-position:2px 4px;
}
.content a.textlink:link, a.textlink:visited { color:#6A7173; }
.content a.textlink:hover {
    color:#6A7173;
    border-bottom:1px solid #30BEF0;
}
.content a.textlink:active { color:#6A7173; }

/* Textlinks im Funktionsbereich */
.func a.textlink {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:1.00em;
    font-weight:bold;
    color:#6A7173;
    text-decoration:none;
    padding-left:12px;
    background-image:url('../pic/pfeil.gif');
    background-repeat:no-repeat;
    background-position:2px 4px;
    }
.func a.textlink:link, .func a.textlink:visited { color:#6A7173; }
.func a.textlink:hover {
    color:#6A7173;
    border-bottom:1px solid #30BEF0;
}
.func a.textlink:active { color:#6A7173; }




/* Links in der Statusnav */
a.statusnav {
    font-family: Verdana, Arial, Helvetica;
    font-size: 0.65em;
    font-weight: bold;
    text-decoration:none;
    color:#01AFEC;
}
a.statusnav:link { color:#01AFEC; }
a.statusnav:visited { color:#01AFEC; }
a.statusnav:hover {
    color:#01AFEC;
}
a.statusnav:active { color:#01AFEC; }
/* 3.6 Kleines Link */
a.small {
    text-decoration:none;
    color:#000000;
}
a.small:link { color:#000000; }
a.small:visited { color:#000000; }
a.small:active { color:#000000; }
a.small:hover { color:#000000; }


/* Download-Links */
/* Download-Links für Texte im Contentbereich */
a.dl-text {
    font-size:0.9em;
    font-family: Arial,Helvetica,Helv,sans-serif;
    color: #6A7173;
    text-decoration:none;
    font-weight: normal;
    padding-left:14px;
    background-repeat:no-repeat;
    background-position:2px 1px;
    }
a.dl-text:link { color:#6A7173; }
a.dl-text:visited { color:#6A7173; }
a.dl-text:hover {
    color:#6A7173;
    border-bottom:1px solid #30BEF0;
}
a.dl-text:active { color:#6A7173; }


/* Download-Links für Bilder im Contentbereich */
a.dl-pic {
    font-size: 0.70em;
    font-family: Arial,Helvetica,Helv,sans-serif;
    color: #6A7173;
    text-decoration:none;
    font-weight: normal;
    padding-left:14px;
    background-repeat:no-repeat;
    background-position:2px 1px;
    }
a.dl-pic:link { color:#6A7173; }
a.dl-pic:visited { color:#6A7173; }
a.dl-pic:hover {
    color:#6A7173;
    border-bottom:1px solid #30BEF0;
}
a.dl-pic:active { color:#6A7173; }



/* Download-Links für Bilder im Funktionsbereich */
.func a.dl-pic {
    font-family: Verdana,Arial,Helvetica,Helv,sans-serif;
    font-size:1.0em;
    font-weight: normal;
    text-decoration:none;
    color:#2B6E80;
    }
.func a.dl-pic:link, .func a.dl-pic:visited { color:#2B6E80; }
.func a.dl-pic:hover {color:#2B6E80;}
.func a.dl-pic:active { color:#2B6E80; }

/* Download-Links für Bilder im Funktionsbereich */
.func a.dl-text {
    font-family: Verdana,Arial,Helvetica,Helv,sans-serif;
    font-size:1.0em;
    font-weight: normal;
    text-decoration:none;
    color:#2B6E80;
    }
.func a.dl-text:link, .func a.dl-text:visited { color:#2B6E80; }
.func a.dl-text:hover {color:#2B6E80;}
.func a.dl-text:active { color:#2B6E80; }




/* 4. Bildrahmen */
/* Bildrahmen Contentbereich/Funktionsbereich */
div.bildrahmen-cont, div.bildrahmen-func {
    border: 1px solid #31BFF1;
    padding:1px;
}

/* Rahmen für die Anzeige des alt-tags -> Contentbereich/Funktionsbereich */
div.alttext-cont, div.alttext-func {
    border-left: 1px solid #31BFF1;
    border-right: 1px solid #31BFF1;
    border-bottom: 1px solid #31BFF1;
    padding:1px;
}

/* Rahmenfarbe der Bilder im popUp */
div.popup-border {
    border: 1px solid #2B6E80;
}



/* 7. Styles für Barrierefreiheit */

.unsichtbar {
    position:absolute;
    left:-1000px;
    top:-1000px;
    width:0px;
    height:0px;
    overflow:hidden;
    display:inline;
}


/*#######################################################*/

/* 8. Projektspezifische Styles */

b {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:1.00em;
    font-weight: bold;
    color:#000;
    line-height:1.0em;
}

p {
    margin-top:0px;
    padding-top:0px;
    margin-bottom: 10px;
}


.func b {
    font-family: Arial,Helvetica,Helv,sans-serif;
    font-size:1.00em;
    color: #6A7173;
    font-weight:bold;
}

/* Hinweistext über dem Suchfeld */
.fliess-search {
    font-family: Arial,Helvetica,Helv,sans-serif;
    font-size:0.60em;
    font-weight:normal;
    color: #2F8DAF;
}

/* Text Funktionsbereich -> Überschrift Container */
.func-container-head {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:0.70em;
    font-weight:bold;
    color:#01ADEF;
    padding: 5px 2px 5px 5px;
}

div#content-right-inner {
    border: 1px solid #C4C4C4;
    padding: 4px;
    background-color: #F1F1F1
}



/* Tabelle für Produktbeschreibungen */
/* Tabellenkopf für Tabelle */
table.prod-tab span.prod-tab-head {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-size:0.70em;
    font-weight:bold;
    color: #484848;
}

/* Fließtext für Tabelle */
table.prod-tab td.fliess {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-weight:normal;
    color: #484848;
    font-size:0.75em;
}

a.navlink {
    font-family: Verdana, Arial,Helvetica,Helv,sans-serif;
    font-weight: bold;
    text-decoration:none;
    color:#878787;
    font-size:1.0em;
    background-image:url('../pic/nav/execcpfeil.gif');
    background-repeat:no-repeat;
    background-position:3px 3px;
    padding-left:18px;
}
a.navlink:link, a.navlink:visited { color:#878787; }
a.navlink a:hover, a.navlink:active { color:#878787; }



/*##############################################################################################################*/


/* ######## htCMS PageAdmin ################*/
/* Klassenbezeichnung ist fest. Was die Klasse macht, einstellbar */

/* Link für Administrative Textlinks */
.func a.htcms-admlink {
    font-size:0.75em;
    background-image: none;
}
.func a.htcms-admlink:link, .func a.htcms-admlink:visited {}
.func a.htcms-admlink:hover {
    border: none;
    text-decoration: underline;
}
.func a.htcms-admlink:active {}

/* Kennzeichnung inaktiver Links. */
.htcms-padm-inactivelink {
  border-width:1px;
  border-style:dotted;
  border-color:red;
  /*background-color:#FFFF80;*/
}

/* Anzeige eines Komponentenbereichs. */
div.htcms-padm-showcomponent {
  border-width:1px;
  border-style:dotted;
  border-color:#FF0000;
  background-color:#FAFAF0;
}
span.htcms-padm-showtext {
  background-color:#EAEAE0;
}


.text-fliess table {
    border: 5px #2FC0EF solid;
    border-collapse: collapse;
    width: 100%;
    margin: 0px;
    padding: 0px;
    width: 358px;
}

.text-fliess td {
    padding: 2px;
    font-size:0.75em;
    color: #484848;
}