/*-----------------------------------------------
$Id: style.css
     Style Sheet
Customer: StEB (Stadtentwässerungsbetriebe Köln)
Author:   Volker Dürr (vierviertel.com)
Version:  1.0
Creation Date:    2006/12/05
Last Modify:
-----------------------------------------------*/

/* -- import basic styles
------------------------- */
@import "organigramm.css";

* {
    margin:0px;
    padding:0px;
}

body {
    margin:0; /* setting top and bottom margin */
    padding:0;
    font-size:100.01%;
    background:#fff;
}
#skipToContent a, #skipToNav a {
    position:absolute;
    z-index:2;
    width:10em;
    overflow:hidden;
    top:-100px;
    left:-1000px
}

#skipToContent a:focus, #skipToNav a:focus, #skipToContent a:active, #skipToNav a:active {
    position:absolute;
    z-index:99;
    width:12em;
    top:.5em;
    left:.5em;
    margin-left:4px;
    text-decoration:underline;
    color:#000;
    background:#ccc;
    font-size:.8em
}
address, abbr, acronym, dfn    {
    font-variant:normal;
}

a, address, body, blockquote, caption, cite, div, dfn, dl, dt,
fieldset, h1, h2, h3, h4, img, input, label, legend,
li, ol, option, p, q, select, textarea, td, th, ul     {
    font-family:Arial,Helvetica,sans-serif,"Trebuchet MS";
}
.clear {
    clear:both;
    float:none;
}

.box-header ul{
    list-style: none;
    padding:0;
    margin:0;
    height:1%;
}

h1, h2, h3, h4 {
   font-weight:bold;
}
h1 {
    font-size:120%;
    color:#000;
}
h2 {
      font-size:80%;
    color:#000;
}
h3 {
    font-size:80%;
    color:#000;
}

h4 {
    font-size:1em;
    color:#000;
}
.hidden {
    display: none;
}
.clear {
    clear:both;
    font-size:1px;
    line-height:1px;
    margin-top:-1px;
}
img {
     border:none;
}
#box-main .box-header {
    display:none;
}

#navBox {
    display:none;
}
.lCol {
    display:none;
}
#footer {
    display:none;
}

.box-header img {
    position:absolute;
    left:8.2em;
    top:1.3em;
}
.box-content {
    background:#E5EFF5;
    width:100%;
    border-bottom:1px solid #fff;

}
.box-content-inner {
    background:#CCDFEC;
    overflow:hidden;
    width:57.45em;
    border-right:2px solid #fff;
    position:relative;
    top:-2.76em;
    margin-bottom:-2.76em;
}
.lCol {
    width:11.5em;
    float:left;
    position:relative;
}
.lCol fieldset {
    background:#7FB0CF;
    color:#fff;
    font-size:80%;
    clear:both;
    padding:.3em 0 0 1em;
    height:1.95em;
}
.lCol legend {
    display:none;
}
.lCol fieldset label {
    float:left;
    display:block;
    padding:.2em .4em 0 0;
}
.lCol fieldset input {
    float:left;
    width:8em;
    display:block;
    background:#CCDFEC;
}
* html .lCol fieldset input {
    width:7em;
}
.lCol fieldset input:focus {
    background:#fff;
}
.lCol fieldset .submit {
    float:left;
    border:none;
    background:url(img/submit.gif) no-repeat;
    width:1em;
    height:1em;
    margin:.3em 0 0 .3em;
    cursor:pointer;
}
* html .lCol fieldset .submit {
    margin-top:.1em;
}

.contentBox {
    background:#CCDFEC;
    overflow:hidden;
    width:57.45em;
    border-right:2px solid #fff;
    position:relative;
}
.startseite {
    border-bottom:2px solid #fff;
    position:relative;
}
.startseite .imgleft {
    margin:0;
    width:11.5em;
    height:12.45em;
    float:left;
}
.startseite .imgright {
    margin:0;
    float:left;
    width:10.1em;
    height:12.45em;
}
.startseite p {
    position:absolute;
    top:12.5em;
    left:18em;
    color:#fff;
    font-size:76%;
    width:30em;
}
.startseite h1 {
    position:absolute;
    top:5em;
    left:9em;
    color:#fff;
    font-size:150%;
}
* html .startseite .imgright {
    width:10.15em;
}
.content {
    width:33.2em;
    border-left:2px solid #fff;
    border-right:2px solid #fff;
    float:left;
    background:#fff;
    min-height:15.5em;
    position:relative;
    padding:0 1em 2.65em 1.3em;
}
* html .content {
    height:15.5em;
}
.homeTeaserOuter {
    padding:0;
    width:35.5em;
}
.homeTeaser {
    background:#99C0D9;
    float:left;
    width:17.68em;
    text-align:center;
    min-height:19.6em;
}
* html .homeTeaser {
    height:19.6em;
}
.content .homeTeaser h2 {
    color:#fff;
    background:#0061A0;
    padding:1.4em 0 .5em 1.8em;
    text-align:left;
}
.content .homeTeaser h2 span {
    background:url(img/bghomeTeaser.gif) #0061A0 center left no-repeat;
    padding-left:1em;
}
.content .homeTeaser img {
    margin:1em 0 0 0;
    border-bottom:.3em solid #0061A0;
    width:14.9em;
}
.content .homeTeaser p {
     text-align:left;
    width:23.2em;
    font-size:70%;
    margin:.5em 0 .5em 1.8em;
}
.content .homeTeaser a {
     text-align:left;
    color:#000;
    display:block;
}
.tleft {
    border-right:2px solid #fff;
}

.content .footer {
    display:none;
}
.content .intro h2,
.content .intro h3,
.content .intro a,
.content .intro {
    color:#0061A0;
}
.content .intro h1 {
    position:absolute;
    top:1.3em;
    left:2.6em;
    color:#fff;
    background:none;
    padding:0;

}
.content .introbild {
    width:35.5em;
    margin-left:-1.3em;
    margin-right:-1.3em;
}
.startseite .introbild {
    width:35.5em;
    margin-left:0;
    border-left:2px solid #fff;
    border-right:2px solid #fff;
    float:left
}
.content h1 {
     background:#ADC9E3;
    font-size:95%;
    padding:1.3em .5em .8em 1.3em;
    margin:0 -1.05em 1em -1.35em;
}
.content h2 {
    padding:0 .5em .2em 0;
    margin-left:0;
}
.content h3 {
    padding:.8em .5em .1em 0;
}
.content h4 {
    padding:1em .5em .1em 0;
    font-size:76%;
}
.content a {
    color:#0061A0;
}
.content a {
    text-decoration:underline;
}
.content ul,
.content p {
    font-size:76%;
    margin:.2em 8em .8em 0;
    line-height:1.3em;
}
.content ul {
    margin:0 6em 0 16px;
}
.content ul li {
    list-style:url(img/liste.gif);
    margin-bottom:.8em;
}
.content ol {
    list-style-position:inside;
    margin-left:0.6em;
}
.content ol li {
    font-size:76%;
    margin-bottom:.8em;
}
span.trenner {
    display:block;
    background:url(img/trenner.gif) center repeat-x;
    height:1px;
    line-height:1px;
    margin:1.5em 0 1.2em 0;
}
.content img {

}
dd {
    display:block;
    font-size:66%;
    color:#6699CC;
}
.daten {
    font-size:76%;
}
.daten dt {
    float:left;
    width:8em;
    color:#6699CC;
}
.daten dd {
    float:left;
    font-size:100%;
    color:#000;
    width:30em;

    overflow:hidden;
    margin-left:0;
}
.daten dd.trenner {
    clear:left;
    float:none;
    width:43em;
    line-height:1px;
    height:1px;
    position:relative;
    top:.5em;
    margin:.5em 0 1.2em 0;
    overflow:hidden;
    background:url(img/trenner.gif) repeat-x;
}
.stellen {
    font-size:76%;
    margin:1em 0 0 0;
}
.stellen dt {
    float:left;
    width:18em;
    color:#6699CC;
    background:#CCDFEC;
    padding:.2em .2em .2em .8em;
}
.stellen dd {
    float:left;
    font-size:100%;
    width:2em;
    margin-right:8em;
    overflow:hidden;
    background:#CCDFEC;
    margin-left:0;
    margin-bottom:.3em;
    padding:.2em;
}
.stellendetail {
    padding-bottom:1em;
    margin-bottom:1em;
    background:url(img/trenner.gif) bottom repeat-x;
}
.content .bilder {
    margin:0;
    list-style:none;
}
.bilder span {
    display:block;
    color:#6699CC;
    font-size:90%;
}
.bilder li {
    display:inline;
    float:left;
    margin-right:1.5em;
}
.bilder li a {
    display:block;
    color:#970F00;
    background:url(img/download.gif) left center no-repeat;
    padding-left:10px;
    text-decoration:none;
}
.bilder li a:hover {
    text-decoration:underline;
}
/* VCARD Kontakte */
.kontakt-gruppe {
    padding-bottom:.1em;
    background:url(img/trenner.gif) bottom repeat-x;
    margin-bottom:1em;
}
.kontakt-gruppe h2 {
    margin-top:1em;
}
.vcard {
    font-size:76%;
    margin:.5em 0 2em 0;
}
.vcard span {
    display:block;
}
.vcard .fn {
    color:#6699CC;
    font-weight:bold;
}
.content .kontakt-gruppe a {
    font-weight:normal;
}
.dlBox2,
.dlBox1 {
    position:relative;
    left:0;
    padding-bottom:1em;
    margin-bottom:1em;
    background:url(img/trenner.gif) bottom repeat-x;
    width:33em;
}
.dlBox2 {
     min-height:5.5em;
    margin-bottom:0;
}
* html .dlBox2 {
     height:5.5em;
}
.dlBox1 div {
    position:absolute;
    left:8em;
    top:0;
}
.dlBox2 div {
    position:absolute;
    left:0;
    top:1em;
    height:6em;
    width:33em;
}
.dlBox1 img {
    margin:0;
}
.dlbox2 h3 {
     position:relative;
    left:0;
    top:0;
}
.dlBox1 h3 {
    position:absolute;
    left:10em;
    top:-.8em;
}
.dlBox2 div p {
    position:relative;
    left:0;
    top:2em;
    width:28em;
}
.dlBox1 p {
    position:relative;
    left:0;
    top:2em;
    width:28em;
}
.dlBox1 a {
    position:relative;
    display:block;
    color:#970F00;
    top:2em;
    font-size:76%;
    margin-top:.5em;
    background:url(img/download.gif) left center no-repeat;
    padding-left:10px;
    text-decoration:none;
}
.dlBox2 a {
    position:absolute;
    display:block;
    right:1em;
    color:#970F00;
    bottom:2em;
    font-size:76%;
    margin-top:.5em;
    background:url(img/download.gif) left center no-repeat;
    padding-left:10px;
    text-decoration:none;
}
.dlBox2 a:hover,
.dlBox1 a:hover {
    text-decoration:underline;
}
.baumassnahme {
    margin:0 1em 1em 0;
    background:url(img/trenner.gif) bottom repeat-x;
    padding-bottom:1em;
}
.content .baumassnahme ul {
    list-style:none;
    margin:0;
}
.content .baumassnahme ul {
    width:37em;
}
.baumassnahme ul li {
    list-style:none;
    list-style-image:none;
    background:#e5eff5;
    padding:.2em 0 .2em .5em;
    margin-bottom:.4em;
}
.baumassnahme ul li a {
    font-weight:bold;
    text-decoration:none;
    color:#000;
}
.baumassnahme ul li a:hover {
    text-decoration:underline;
}
.zweispalten {
    margin:.5em 0 .5em 0;
    clear:both;
    float:none;
    overflow:hidden;
    width:32em;
}
.zweispalten p {
    float:left;
    width:18em;
    margin:0 1em 0 0;
}
.beschreibung {
    color:#000;
    font-size:76%;
    margin:1em 0 3em 0;
    overflow:hidden;
    width:38em;
    clear:left;
    float:none;
}
.beschreibung dt {
    width:11em;
    float:left;
    margin-bottom:.5em;
}
.beschreibung dd {
    width:25em;
    min-height:2em;
    color:#000;
    font-size:100%;
    float:left;
    margin-bottom:.5em;
}
.content .linkliste,
.content .linkliste li {
    list-style:none;
    list-style-image:none;
    clear:both;
}
.content .linkliste {
    margin:0;
}
.content .linkliste li {
    margin-bottom:.3em;
}
.content .linkliste a {
    color:#970F00;
    background:url(img/download.gif) left center no-repeat;
    padding-left:10px;
}

.veranstaltung {
    background:url(img/veranstaltung_trenner.gif) 24.9em top #ccdfec no-repeat;
    margin:1em 0 1em -.2em;
    overflow:hidden;
    width:33em;
    position:relative;
}
.veranstaltung .inner {
    background:url(img/veranstaltung_trenner.gif) 24.9em top #6699cc no-repeat;
    position:relative;
    min-height:3.5em;
}
* html .veranstaltung .inner {
    height:3.5em;
}
.veranstaltung .inner p {
    width:31.5em;
    margin:0 0 0 1.4em;
    padding:.3em 0 0 0;
    float:none;
}

.veranstaltung .inner h2 {
    width:29.5em;
    padding-left:1.4em;
}
.veranstaltung .inner span {
    display:block;
    position:absolute;
    right:3.7em;
    top:1.8em;
    font-size:76%;
    font-weight:bold;
}
.veranstaltung p {
    float:left;
    width:27.5em;
    margin:.5em 0 0 0;
    padding:0 0 0 1.3em;
}
.veranstaltung  a {
    color:#000;
    text-decoration:none;
    position:absolute;
    left:1.4em;
    bottom:.5em;
    font-size:76%;
    display:block;
    color:#970F00;
    background:url(img/download.gif) left center no-repeat;
    padding-left:10px;
}
.presse {
    margin:1em 0 1em -.2em;
    overflow:hidden;
    width:33em;
    position:relative;
    background:url(img/trenner.gif) bottom repeat-x;
    padding-bottom:1em;
}
.detail {
    background:url(img/trenner.gif) top repeat-x;
    padding-top:1em;
}
.presse span {
    display:block;
    float:left;
    position:relative;
    width:7em;
    font-size:76%;
    padding-left:1px;
    color:#0061A0;
}
.presse div {
    float:left;
    position:relative;
    width:27em;
}
.presse h2 {
    color:#0061A0;
    width:29em;
}
.presse p {
    margin-bottom:0;
}
.presse a {
    color:#970F00;
    background:url(img/download.gif) left center no-repeat;
    padding-left:10px;
    font-size:76%;
    text-decoration:none;
}
.presse a:hover {
    text-decoration:underline;
}
.content .back {
    display:block;
    color:#970F00;
    background:url(img/download.gif) left center no-repeat;
    padding-left:10px;
    font-size:76%;
    margin-bottom:-.5em;
}
.veranstaltung p a:hover {
    text-decoration:underline;
}
.veranstaltung img {
    float:right;
    width:8.05em;
}
.veranstaltung .gesamttext {
    float:left;
}
.veranstaltung .gesamttext p {
    float:none;
    width:27.5em;
    margin:.5em 0 1em 0;
    padding:0 0 0 1.3em;
}
.blau {
    color:#006699;
}
.content .links dt {
    background:url(img/trenner.gif) top repeat-x;
    padding:.5em 0 0 0;
}
.content .links dt a {
    font-size:80%;
    text-decoration:none;
    color:#000;
}
.content .links a:hover {
    text-decoration:underline;
}
.content .links dd {
    margin-bottom:.5em;
    font-size:80%;
    text-decoration:none;
    color:#000;
}

.content fieldset {
    font-size:76%;
}
legend {
    font-weight:bold;
    margin:0 0 .5em 0;
}
* html legend {
    margin-left:-.3em;
}
.content fieldset p {
    margin:0 0 2em 0;
    font-size:100%;
}
.content fieldset label {
    display:block;
    float:left;
    width:12em;
    margin-bottom:1em;
}
.content fieldset textarea,
.content fieldset select,
.content fieldset input {
    display:block;
    border:1px solid #6699CC;
    float:left;
    width:24em;
    margin-bottom:1em;
}
.content fieldset textarea {
    font-size:100%;
}
* html .content fieldset textarea {
    width:26.3em;
}
.content fieldset select {
    width:24.25em;
}
.content fieldset input:focus {
    background:#D9E5F2;
}
.content fieldset div {
    clear:left;
    float:none;
    padding-left:12em;
}
.content fieldset div input {
    background:#6699CC;
    width:8em;
    color:#fff;
    cursor:pointer;
    margin-right:1em;
}
.content fieldset div input:focus {
    background:#6699CC;
}

.content .a-z {
    background:url(img/trenner.gif) top repeat-x;
    padding:.5em 0 0 0;
}
.content .abisz {
    clear:both;
    float:none;
    width:35em;
    overflow:hidden;
}

.content .a-z a {
    color:#000;
    text-decoration:none;
}
.content .a-z a:hover {
    color:#0061A0;
    text-decoration:underline;
}
.content .a-z ul,
.content .a-z ul li {
    list-style-image:none;
    list-style:none;
    margin:0;
    color:#ccc;
}
.content .a-z ul {
    margin-bottom:1em;
}
.content .a-z ul li {
    margin-bottom:.1em;
}
.content ul.abisz {
    margin-bottom:2em;
}
.content ul.abisz li {
    display:inline;
    float:left;
    margin:0 .5em 0 0;
}


/* Tabellen */
.tb {
    font-size:80%;
    width:41.5em;
}
.tb caption {
    text-align:left;
    padding:.2em 0 .8em 0;
    font-weight:bold;
}
.tb th {
    text-align:left;
    padding:.2em 0 .2em .5em;
       background:#6699CC;
    color:#fff;
}
.tb td {
    text-align:left;
    padding:.2em 0 .2em .5em;
}
.tb .tdblue {
    background:#CCDFEC;
}

.rCol {
    display:none;
}
.lblue,
.green,
.blue,
.dblue {
    display:none;
}
.teaserBox2,
.teaserBox1 {
    border-bottom:.1em solid #fff;
}
.tHome {
    border-bottom:none;
    min-height:19.7em;
}
* html .tHome {
    height:19.64em;
}
.teaserBox1 {
       background:#FDE9CC;
}
.teaserBox2 {
       background:#CCDFEE;
}
.teaserBox2 h3,
.teaserBox1 h3 {
    color:#fff;
    font-size:80%;
    padding:.2em .5em .2em .8em;
}
.tHome h3 {
    padding:1.4em 0 .5em 1.2em;
}
.tHome h3 span {
    background:url(img/bghomeNewsTeaser.gif) center left no-repeat;
    padding-left:1em;
}
.teaserBox1 h3 {
    background:#F79100;
}
.teaserBox2 h3 {
    background:#0061A8;
}
.teaserBox2 p,
.teaserBox1 p {
    padding:.5em .5em .5em .8em;
    font-size:76%;
}
.tHome p {
    padding:0 0 .1em 1.2em;
    font-size:70%;
}
.teaserBox2 strong,
.teaserBox1 strong {
    padding:1em 0 0 1.2em;
    display:block;
    font-size:70%;
}
.tHome strong {
    padding:1em 0 .1em 1.2em;
    display:block;
    font-size:70%;
}
.teaserBox2 a,
.teaserBox1 a {
    text-decoration:underline;
}
acronym {
    text-decoration:none;
    cursor:help;
}
.baustellen-karte {
    position:relative;
}
.baustellen-karte .karte {
    width:30em;
    height:30em;
}
.baustellen-karte .punkt {
    width:.6em;
}