@media screen {

    /* CSS Reset based on meyerweb.com v1.0 | 20080212 */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, input, textarea,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    /* remember to define focus styles! */
    :focus { outline: 0; }
    /* remember to highlight inserts somehow! */
    ins { text-decoration: none; }
    del { text-decoration: line-through; }
    /* tables still need 'cellspacing="0"' in the markup */
    table { border-collapse: collapse; border-spacing: 0; }

    /* Ganz allgemein */
    hr { display: none; }
    .versteckt { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

    body { color: #666; font-family: Verdana, Helvetica, sans-serif; font-size: 100%; height: 100%; }

    #kopf {  z-index: 100; position: relative; width: 960px; height: 250px; margin: 0 auto; }
    #kopf h1 { top: 90px; left: 0; text-indent: -9999px; width: 490px; height: 50px; background: transparent url(img/textformer.png) 0 0 no-repeat; }

    #wrapper1 { position: relative; width: 100%; margin: 0 auto; }

    #wrapper2 { position: relative; width: 960px; border-right: 10px solid #fff; border-left: 10px solid #fff; margin: 0 auto; background-color: #fff; }
    #inhalt { z-index: 1000; position: relative; width: 940px; padding: 0 0 0px 0; border: 10px solid #333; overflow-x: auto; overflow-y: hidden; }
    #portfolio { width: 17090px; position: relative; min-height: 360px; background-color: #333; }
    body#mailer #portfolio { width: 940px; }
    div.abschnitt { width: 910px; min-height: 330px; float: left;  padding: 15px; margin-right: 10px; background-color: #fff; }
    div.doppel { width: 1380px; min-height: 330px; float: left;  padding: 15px; margin-right: 10px; background-color: #fff; }
    div.abschnitt img, div.doppel img { float: left; margin-right: 20px; }


    #uebersicht .portinfo { width: 355px; margin: 3px 15px 15px 13px; float: left; padding-bottom: 10px; }
    div#uebersicht { padding: 0; background-color: #fff; width: 940px; min-height: 360px; }
    div#uebersicht a img { padding: 0; margin: 0; }
    div#uebersicht a.jump { margin: 0 9px 9px 0; border: 1px solid #ccc; padding: 2px; display: block; float: left; }
    div#uebersicht a.oben { margin-top: 12px; }
    div#uebersicht a.first { margin-left: 12px; margin-bottom: 0px; }
    div#uebersicht a.last { margin-right: 0; }

    div#kontakt { margin: 0; }

    div.eins { width: 450px; margin-right: 20px; float: left; }
    div.zwei { width: 450px; float: left; }
    div.imp1 { float: left; width: 200px; margin-right: 30px; }
    div.imp2 { float: left; width: 200px; margin-top: 2.8em; }

    /* Untere Leiste */

    #navileiste { display: none; position: relative; background-color: #fff; width: 960px; height: 40px; margin: 0; padding: 0; }
    #mininav { background-color: #333; position: relative; height: 40px; width: 80px; left: 0; padding: 0; margin: 0; float: left; }
    #mininav ul li a { position: absolute; top: 0px; height: 40px; width: 40px; background-color: #333; display: block; text-indent: -9999px; overflow: hidden; }
    #mininav ul li a.prev { left: 0px; background: #333 url(img/textformer.png) -710px -11px no-repeat; }
    #mininav ul li a.next { left: 40px; background: #333 url(img/textformer.png) -750px -11px no-repeat; }
    #mininav ul li a.prev:hover, #mininav ul li a.prev:focus, #mininav ul li a.prev:active { background-position: -790px -11px; }
    #mininav ul li a.next:hover, #mininav ul li a.next:focus, #mininav ul li a.next:active { background-position: -830px -11px; }

    #navigation { z-index: 500; position: relative; width: 870px; height: 30px; padding: 10px 0 0 10px; margin: 0; overflow: hidden; }
    #navigation p, #navigation ul li { float: left; height: 30px; }
    #navigation p { background: transparent url(img/textformer.png) 0 -51px no-repeat; text-indent: -9999px; width: 20px; }
    #navigation a { display: block; height: 30px; width: 120px; margin: 0; text-indent: -9999px; }
    #navigation a#llei { background: transparent url(img/textformer.png) -20px -51px no-repeat; width: 130px; }
    #navigation a#lakt { background: transparent url(img/textformer.png) -150px -51px no-repeat; }
    #navigation a#lpor { background: transparent url(img/textformer.png) -270px -51px no-repeat; }
    #navigation a#lvor { background: transparent url(img/textformer.png) -390px -51px no-repeat; }
    #navigation a#lart { background: transparent url(img/textformer.png) -510px -51px no-repeat; }
    #navigation a#ldat { background: transparent url(img/textformer.png) -630px -51px no-repeat; }
    #navigation a#limp { background: transparent url(img/textformer.png) -750px -51px no-repeat; }
    #navigation a#llei:hover { background: transparent url(img/textformer.png) -20px -81px no-repeat; }
    #navigation a#lakt:hover { background: transparent url(img/textformer.png) -150px -81px no-repeat; }
    #navigation a#lpor:hover { background: transparent url(img/textformer.png) -270px -81px no-repeat; }
    #navigation a#lvor:hover { background: transparent url(img/textformer.png) -390px -81px no-repeat; }
    #navigation a#lart:hover { background: transparent url(img/textformer.png) -510px -81px no-repeat; }
    #navigation a#ldat:hover { background: transparent url(img/textformer.png) -630px -81px no-repeat; }
    #navigation a#limp:hover { background: transparent url(img/textformer.png) -750px -81px no-repeat; }

    #navmarker { position: absolute; display: block; top: 0px; left: 240px; width: 120px; height: 40px; z-index: 50; }

    /* Typografie festlegen */

    h1, h2, h3, h4, ul, ol, li, p { text-align: left; }
    h2, .ref h3, h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.2em; line-height: 1.4em; margin-bottom: 1em; color: #333; font-weight: bold; }
    h2 a { color: #333; font-weight: bold; text-decoration: none; }
    h3 { font-size: 1em; margin-bottom: 0.5em; }
    p, td, th { font-size: 0.8em; line-height: 1.3em; margin-bottom: 0.5em; }
    p.tags { font-size: 0.7em; line-height: 1.1em; margin-bottom: 1em; }
    p.rechts { margin: 10px 0 0 0; text-align: right; }
    li { font-size: 0.8em; line-height: 1.3em; margin-bottom: 4px;  }
    ul, ol { margin-bottom: 0.5em; }
    .abschnitt h2, .abschnitt h3, .abschnitt p, .abschnitt ul, .abschnitt table, .abschnitt .eins { margin-left: 460px; }
    .abschnitt ul { list-style: square inside; }

    #fachartikel ul { list-style: none inside; }
    #fachartikel ul li { margin-bottom: 0.5em; position: relative; }
    #fachartikel ul li span.date { margin: 0; }
    #fachartikel ul li span.article { position: relative; left: 4em; display: block;  }

    table { width: 440px; }
    table td { padding: 6px 3px; }

    a { text-decoration: underline; color: #666; }
    a:hover, a:focus { text-decoration: none; color: #333; }

    /* Formularkram */
    form label { float: left; width: 80px; }
    label { font-size: 1em; line-height: 1em; float: left; text-align: right; padding: 4px 20px 0 0; }
    input { padding: 4px; margin: 0 0 5px 0px; border: 1px solid #ccc; font-size: 1em; line-height: 1em; width: 320px; }
    textarea { padding: 4px; margin: 0 0 5px 0px; border: 1px solid #ccc; font-size: 1em; line-height: 1.4em; width: 320px; height: 80px; font-family: Verdana, Helvetica, sans-serif; }
    input:focus, textarea:focus { border: 2px solid #b2c934; padding: 3px; }
    label.lxtra { width: 330px; text-align: left; margin: 0 0 5px 100px; }
    input#xtra { margin-left: 100px; }
    input#send { margin-left: 100px; width: auto; background-color: #333; color: #fff; }

    /* Farben */
    /* Frühling: b2c934 | Sommer : FFC50B | Weihnachten: 940d09 oder e61c24 | DrupalCamp Essen 12: E3A72F */
    #wrapper1 { background-color: #E3A72F; }
    #navmarker { background-color: #E3A72F; }
    input:focus, textarea:focus { border: 2px solid #E3A72F; }
    input#send:hover, input#send:focus { background-color: #E3A72F; }
    div#uebersicht a.jump:hover, div#uebersicht a.jump:focus { background-color: #E3A72F; border: 1px solid #E3A72F; }

    div.titel02 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/02-crowd.jpg) 0 0 no-repeat; }
    div.titel02 .white { padding: 10px; background-color: #fff; width: 200px; opacity: 0.8; }
    div.titel02 .white h2, div.titel02 .white p { margin-left: 0px; opacity: 1; }
    div.titel03 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/03_Santa_Card_2010.gif) 0 0 no-repeat; }
    div.titel03 .white { padding: 10px; margin-left: 450px; background-color: #fff; width: 250px; opacity: 0.8; }
    div.titel03 .white h2, div.titel03 .white p { margin-left: 0px; opacity: 1; }
    div.titel04 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/04_on_air.jpg) 0 0 no-repeat; }
    div.titel04 .white { padding: 10px; margin-left: 0px; background-color: #fff; width: 180px; opacity: 0.8; }
    div.titel04 .white h2, div.titel04 .white p { margin-left: 0px; opacity: 1; }
    div.titel05 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/05-wsm+t3n.jpg) 0 0 no-repeat; }
    div.titel05 p { text-indent: -9999px; }
    div.titel06 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/02-crowd.jpg) 0 0 no-repeat; }
    div.titel06 .white { padding: 10px; background-color: #fff; width: 200px; opacity: 0.8; }
    div.titel06 .white h2, div.titel06 .white p { margin-left: 0px; opacity: 1; }
    div.titel07 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/07-wsm+t3n.jpg) 0 0 no-repeat; }
    div.titel07 p { text-indent: -9999px; }
    div.titel08 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/08-drupal-buch.jpg) 0 0 no-repeat; }
    div.titel08 .white { padding: 10px; margin-left: 300px; background-color: #fff; width: 520px; opacity: 0.8; }
    div.titel08 .white h2, div.titel08 .white p { margin-left: 0px; opacity: 1; }
    div.titel08 .white h2 { margin-top: 10px; }
    div.titel08 .white p { line-height: 1.4em; }
    div.titel09 { margin: 0; padding: 10px; height: 310px; width: 910px; background: transparent url(img/09-drupalcamp-essen2012.jpg) 0 0 no-repeat; }
    div.titel09 .white { padding: 10px; margin: 10px 0 0 560px; background-color: #fff; width: 300px; opacity: 0.8; }
    div.titel09 .white h2, div.titel09 .white p { margin-left: 0px; opacity: 1; }
    div.titel09 .white h2 { margin-top: 10px; }
    div.titel09 .white p { line-height: 1.4em; }

  }


@media print {

    body { width: auto; margin: 1cm; padding: 0; font-size: 11pt; line-height: 15pt; font-family: Arial, Verdana;  }
    * { color: #333 !important; float: none; }
    #navileiste, #uebersicht, img, #kopf p, p.rechts, .imp2, #kontakt div.zwei { display: none; }
    #kopf, #wrapper-aussen { width: 100%; margin: 0 auto; border: 0; }
    #wrapper-innen { width: auto; }
    #inhalt, #portfolio, div.abschnitt { position: relative; width: auto; border: 0; padding: 0; }
    div.abschnitt img { margin-bottom: 15px; }
    .abschnitt h2, .abschnitt h3, .abschnitt p, .abschnitt ul, .abschnitt table, .abschnitt .eins { margin-left: 0; }
    h1, h2, h3, p { font-family: Georgia, "Times New Roman"; display: block; float: none; }
    p { display: block; float: none; }
    p, li { font-size: 1em; line-height: 1.3em; margin-bottom: 0.5em; }
    a[href]:after { content:" - "attr(href); }

  }