@charset "UTF-8";
/*-------------------------------------------------------------------------------------
	*
	*	@copyright:_________2013, Stadt Moers
	*	@link:______________http://www.moers.de
	*	@author:____________anatom5 perception marketing GmbH
	*
-------------------------------------------------------------------------------------*/
/* Stylesheet for moers.de
 *
 * - contains styles for screen/porjection and print
 * - contains styles for global layout, typography and all content types
 *
 * Outline:
 *
 * 1) imports
 * 2) styles for all medias
 * 3) additional styles for print media
 *
 * --------------------------------------------------------------------------------
 * WEITERE HINWEISE
 * --------------------------------------------------------------------------------
 * o Geschweifte Klammer "{}" werden in Beispielen für optionale Dinge (Klassen,
 *   Attribute, etc) verwenden, die Pipe "|" für mögliche Kombinationen und die
 *   Raute "#" als Platzhalter für verschiedene Dinge (z.B. URLs oder Texte).
 */
 
@import url(./core/slim_base.css); /* import basic styles from YAML */
@import url(./core/forms.css); /* import form styles from YAML */

@media all
{

/* == CONTENTS ==============================================================

    1. Layout global
        1.1. Header
        1.2. Page
        1.3. Footer
        1.4. Helper
            1.4.1. Highlights
    2. Navigation
        2.1. Skip Links
        2.2. Top Naviagtion
        2.3. Main Navigation
        2.4. Breadcrumb Navigation
        2.5. Pagination
        2.6. Social Network Support
        2.7. Sitemap
        2.8. Searchform and Language-PDFs
    3. Typography
        3.1. Text Elements
        3.2. Tables
    4. Media Includes
        4.1. Pictures
        4.2. Galleries
        4.3. Video & Flash
    5. Forms
    6. Content Types
        Infoboxes
        Teaser
        Calendar
        List of Links
        List of Downloads
        Datasources
        Contacts
        Guestbook
        Chat
        eCards
        Press Releases

   -------------------------------------------------------------------------- */

/* == 1. Layout global ====================================================== */

body
{
    font-family: Arial, sans-serif;
    font-size:100.1%;
    color:#000;
    background:url(./../../images/bg-gradient-body.png) repeat-x left top #e2e2ed;
}

div.top
{
    background:url(./../../images/bg-gradient-top.png) repeat-x left bottom transparent;
}

.page_margins
{
    font-size:0.75em;
    line-height:1.5;
    padding:0 2em 0 2em;
    margin:0 auto;
    width:80.8em;
    max-width:90%;
    min-width:800px;
}

/* -- 1.1. Header ----------------------------------------------------------- */

#header
{
    position:relative;
    background:url(./../../images/bg-header-banderole.png) repeat-x left bottom transparent;
    width:25%;
    padding-right:75%; padding-left:44px; left:-44px;
}

#header h1
{
    position:relative;
    left:-44px;
    background:url(./../../images/bg-banderole-logo.png) repeat-x center bottom transparent;
    padding-bottom:32px; padding-right:39px; width:100%;
}

#logo
{
    display:block;
    width:117.2%;
    max-width:259px;
    margin:0 auto -0.66em auto;
}

span.hbs
{
    display:block;
    position:absolute;
    bottom:-15px;
    right:100%;
    width:500px;
    height:63px;
    background:url(./../../images/bg-header-banderole-start.png) no-repeat right center transparent;
}

span.hbe
{
    display:block;
    position:absolute;
    bottom:-27px;
    left:100%;
    width:60px;
    height:59px;
    background:url(./../../images/bg-header-banderole-end.png) no-repeat right center transparent;
    z-index:1000;
}

.oem span.hbe
{
    background:url(./../../images/bg-header-banderole-end_oem.png) no-repeat right center transparent;
}


/* -- 1.2. Page ------------------------------------------------------------- */

.page
{
    position:relative;
    margin:0;
    padding:41px 44px 6.66em /*10em*/ 44px;
    background:url(./../../images/bg-gradient-page.png) repeat-x left bottom #fff;
    color:#404040;
}

/* -- page shadow -- */

span.psl
{
    display:block;
    position:absolute;
    bottom:0;
    left:-8px;
    width:8px;
    height:1051px;
    background:url(./../../images/bg-shadow-page-left.png) no-repeat right bottom transparent;
}

span.psr
{
    display:block;
    position:absolute;
    bottom:0;
    right:-8px;
    width:8px;
    height:1051px;
    background:url(./../../images/bg-shadow-page-right.png) no-repeat left bottom transparent;
}

/* -- 3x1 picture row on top of all pages -- */

#picturerow
{
    overflow:hidden;
    width:100%;
    padding-right:4px;
    background:url(./../../images/bg-shadow-picturerow.png) no-repeat right bottom transparent;
}

#picturerow img,
#picturerow span.bdrov
{
    display:block;
    padding:0;
    margin:0;
    width:100%;
}

#picturerow div.subcr span.bdrov
{
    width:101%;
}

#picturerow div.subcl,
#picturerow div.subc,
#picturerow div.subcr
{
    position:relative;
    padding:0;
    margin-right:3px;
    overflow:hidden;
}
#picturerow div.subcl { right:-1px; }
#picturerow div.subc { right:-2px; }
#picturerow div.subcr { right:-3px; }



#picturerow span.bdrov
{
    height:32px;
    background:url(./../../images/bg-banderole-logo.png) repeat-x right center transparent;
    opacity:0.75;
    position:absolute;
    top:8.4em;
    margin-top:-32px;
}

.oem #picturerow span.bdrov
{
    display: none;
}

/* -- 3x1 columns with service links on frontpage -- */
/*
#servicerow
{
    overflow:visible;
    width:100%;
    padding-right:4px;
    background:url(./../../images/bg-shadow-navmain.png) no-repeat right bottom transparent;
}

.srcontent
{
    width:100%;
    padding-bottom:0em;
    overflow:hidden;
    position:relative;
}

.js .srcontent
{
    padding-bottom:2.25em;
}

#servicerow .equalize
{
    border-spacing:4px 0;
    position:relative;
    left:-4px;
    width:102%;
}


#servicerow .csep
{
    border-style:none solid;
    border-width:0.5%;
    border-color:transparent;
    border-collapse:collapse;
}


#servicerow .c33l, #servicerow .c33r
{
    width:33%;
    vertical-align:bottom;
    background:url("./../../images/bg-gradient-topbox.jpg") no-repeat right bottom #fdf5da;
}

#servicerow .teaserimg
{
    width:100%;
    height:8.4em;
    overflow:hidden;
    z-index:1;
    position:relative;
}

#servicerow .teaserimg img
{
    display:block;
    margin:0; padding:0;
    width:300%;
    position:absolute;
    left:0; top:0;
}

#servicerow h3
{
    margin:-32px 0 0 0;
    padding:0 0 2px 0;
    line-height:1;
    background:url("./../../images/bg-banderole.png") repeat-x right top transparent;
    z-index:2; position:relative;
    height:30px;
}

#servicerow #picslider
{
    display:block;
    width:36px; height:36px;
    position:absolute;
    top:2.9em; right:-18px;
    margin-top:-18px;
    background:url('./../../images/button-slider.png') no-repeat center transparent;
    z-index:100;
    outline:0;
}

#servicerow .csep h3 { background-position:right center; }
#servicerow .c33r h3 { background-position:right bottom; }

#servicerow .subc
{
    padding:0;
    margin:0.75em 1em;
    min-height:7.833em;
}

#srService, #srPartner, #srTermine
{
    margin-top:0;
    margin-bottom:0;
}

#srService li, #srPartner li, #srTermine li
{
    padding-top:0;
    padding-bottom:0;
    margin-top:0;
    margin-bottom:0;
}

#srTermine li
{
    margin-bottom:0.5em;
}

.js #srTermine li,
.js #srService li,
.js #srPartner li
{
    overflow:hidden;
}

#servicerow span.toggle
{
    display:block;
    background:url('./../../images/bg-shadow-boxbottom.png') no-repeat right bottom #fff;
    text-align:right;
    white-space:nowrap;
    padding:0.25em 0 0.5em 0;
    margin:0;
    position:absolute;
    width:30%;
    bottom:-2.25em; /* needs FFHACK
}

#servicerow .c33l span.toggle { right:67%; } /* needs FFHACK
#servicerow .csep span.toggle { right:34%; } /* needs FFHACK
#servicerow .c33r span.toggle { right:8px; } /* needs FFHACK

#servicerow span.toggle a
{
    display:inline;
    padding:0.2em 21px 0.2em 0;
    margin-right:3px;
    background:url('./../../images/button-dropdown.png') no-repeat top right transparent;
}
#servicerow span.toggle a.close
{
    background-image:url(./../../images/button-up.png);
}

span#eventplayerapplet
{
    display:block;
    height:20px;
    position:absolute;
    right:33.33%;
    bottom:-2em;
    margin:-4px -64px 0 0;
    z-index:100;
}

#srTermine.active-player
{
    height:7.833em;
    overflow:hidden;
    position:relative;
}

#srTermine li
{
    position:static !important;
}
#srTermine.active-player li
{
    height:7.833em !important;
    width:100%;
    position:absolute !important;
    top:0; left:0;
    opacity:100 !important;
}
*/

/* -- column definitions -- */

#col1
{
    float:left;
    width:25%;
    background:url(./../../images/bg-shadow-navmain.png) no-repeat right -230px transparent;
    margin-top:8.4em;
    z-index:200;
}

#col1-toggler
{
    display: none;
}

#col1_content,
#col3_content
{
    margin-right:5px;z-index:200;
}

#col2
{
    float:none;
    width:auto;
    margin-left:25%;
    position:relative;
    margin-top:-8.4em;
}

#col2_content
{
    
}

#col3
{
    display:none;
}

/* -- content area -- */

#content
{
    padding:2em 0 0 2em;
}

.entry
{
    margin-top:1em;
    margin-bottom:3em;
    position:relative;
}

/* -- Banderole envelope for text elements -- */

/* .hentry .banderole,
.entry .banderole,
.hspezial .banderole, */
.banderole,
.banderole-narrowed
{
    display:block;
    position:relative;
    overflow:hidden;
    background:url(./../../images/bg-banderole-top.png) no-repeat left top #ffd925;
    width:100%;
    padding:12px 14px 0 24px;
    margin:0 0 0 -24px;
    line-height:1;
    font-weight:bold;
}

.banderole-narrowed
{
    background-image:url(./../../images/bg-banderole-topgrey.png);
    background-color:#d4d4d4;
}

/* .hentry .banderole { background-image:url(./../../images/bg-banderole-topgrey.png); background-color:#d4d4d4; }
.hspezial .banderole { background-image:url(./../../images/bg-banderole-top.png); background-color:#ffd925; } */

/* .hentry .banderole span,
.hspezial .banderole span, */
.banderole span,
.banderole-narrowed span
{
    background:url(./../../images/bg-banderole-bottom.png) no-repeat left bottom transparent;
    width:100%;
    display:block;
    padding:0 14px 12px 24px;
    margin:0 0 0 -24px;
}

.banderole-narrowed span
{
    background-image:url(./../../images/bg-banderole-bottomgrey.png);
}

/* .hentry .banderole span { background-image:url(./../../images/bg-banderole-bottomgrey.png); }
.hspezial .banderole span { background-image:url(./../../images/bg-banderole-bottom.png); } */

.banderole span.end,
.banderole-narrowed span.end
{
    display:block;
    position:absolute;
    right:0; bottom:3px;
    background:url(./../../images/bg-banderole-end.png) no-repeat right center transparent !important;
    height:100%;
    width:184px;
    padding:0;margin:0;
}

.banderole-narrowed span.end
{
}

.banderole a:link, .banderole a:visited,
.banderole-narrowed a:link, .banderole-narrowed a:visited
{
    color:#404040;
}

/* -- ReadSpeaker -- */

.readspeaker
{
    background:url(./../../images/icon-readspeaker.png) no-repeat left center transparent;
    display:none;
    height:1.166em; min-height:14px;
    width:17px;
    padding:12px 0 12px 0;
    margin:-24px 0 0 0;
    position:absolute;
    right:0; top:-2.166em;
    text-indent:-500em;
    overflow:hidden;
    z-index:1000;
    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg);
}

.js .readspeaker
{
    display:block;
}

/* -- 1.3. Footer ----------------------------------------------------------- */

div.bottom
{
    background:url(./../../images/bg-bottom.png) repeat-x left top #231800;
    border-top:solid 1px #ffd536;
    position:relative;
}

#footer
{
    position:relative;
    min-height:277px;
    background:url(./../../images/bg-footer.jpg) no-repeat left top transparent;
    color:#fff;
    padding:0 44px;
}

#footer div.subcolumns
{
    padding-top:37px;
    margin-left:25%;
    width:75%;
}

#footer div.subcolumns .c33l
{
    width:32%;
    margin-right:1%;
    float:left;
    white-space:nowrap;
}

#footer div.subcolumns #fService ul,
#footer div.subcolumns #fService p,
#footer div.subcolumns #fService h2
{
    background-color:#bcaea0;
}
#footer div.subcolumns #fPartner ul,
#footer div.subcolumns #fPartner p,
#footer div.subcolumns #fPartner h2
{
    background-color:#dec697;
}
#footer div.subcolumns #fKontakt ul,
#footer div.subcolumns #fKontakt p,
#footer div.subcolumns #fKontakt h2
{
    background-color:#ffe496;
}
#footer div.subcolumns #fService ul,
#footer div.subcolumns #fPartner ul,
#footer div.subcolumns #fKontakt ul,
#footer div.subcolumns #fService p,
#footer div.subcolumns #fPartner p,
#footer div.subcolumns #fKontakt p,
#footer div.subcolumns #fService h2,
#footer div.subcolumns #fPartner h2,
#footer div.subcolumns #fKontakt h2
{
    background-color:rgba(255, 255, 255, 0.6);
}

#footer div.subcolumns .c33l, #footer div.subcolumns .c33l a
{
    color:#2c1717;
}

#footer div.subcolumns h2
{
    font-size:1.45em;
    text-transform:uppercase;
    line-height:1;
    display:inline-block;
    color:#462525;
    padding:0.55em 0.7em 0.5em 0.7em;
    margin:0;
    -moz-border-radius:0.25em 0.25em 0 0;
    border-radius:0.25em 0.25em 0 0;
}

#footer ul.list-links, #footer p
{
    margin:0;
    padding:1em;
    min-height:15em;
    overflow:hidden;
}

#footer ul.list-links li
{
    background:url(./../../images/bg-links-spezial-footer.png) no-repeat left 0.42em transparent;
    line-height: 1.5;
    margin:0;
}

#footer ul.list-links li.download
{
    background-image:url(./../../images/bg-links-download-footer.png);
}

#footer ul.list-links li.extern
{
    background-image:url(./../../images/bg-links-extern-footer.png);
}

#footer p img
{
    float:right;
    width:24.5%;
}

#ym-mobi {
    display: none;
}


/*
#feedbackbutton
{
    display:block;
    width:98px; height:98px;
    position:absolute;
    top:-1px; left:-1px;
    background-image:url(./../../images/button-feedback.png);
}
*/

span.fgl, span.fgr
{
    display:block;
    position:absolute;
    top:0;
    width:35px;
    height:274px;
    padding:0;
    background:url(./../../images/bg-gradient-footer-left.png) repeat-y right top transparent;
    z-index:100;
}
span.fgl
{
    left:-35px;
}
span.fgr
{
    right:-35px;
    background:url(./../../images/bg-gradient-footer-right.png) repeat-y left top transparent;
}

span.fl
{
    position:absolute;
    left:-1000px; top:0;
    display:block;
    width:1000px;
    height:277px;
    background:url(./../../images/bg-footer-left.png) repeat-x left top transparent;
}

span.fl span
{
    display:block;
    width:100%; height:100%;
    position:absolute;
    right:0; top:0;
    background:url(./../../images/bg-footer-left-light.jpg) no-repeat right top transparent;
}

span.fst
{
    position:absolute;
    left:0; top:0;
    display:block;
    width:100%;
    height:18px;
    background:url(./../../images/bg-shadow-footer.png) repeat-x left top transparent;
}

/* -- 1.4. Helper ----------------------------------------------------------- */

/* -- 1.4.1. Highlights -- */

.highlight, .highlight0 /* einfach */
{
    color:inherit;
    background-color:#fff1c1;
}

.highlight .hightlight, .highlight0 .hightlight0, 
.highlight-strong, .highlight-strong0 /* stark */
{
    color:#000;
    background-color:#ffeba8;
}

form.highlight,
form .highlight,
.highlight-info
{
    background-color:#f5f5f5;
}


/* -- 1.4.2. Floatboxes & Floats -- */

.floatbox
{
    display:block;
    overflow:hidden;
    width:auto;
}

.floatbox > h3
{
    margin-top:0;
}

.lefty, .floatleft
{
    float:left;
    margin:0 1.5em 0.25em 0;
    clear:left;
}

.righty, .floatright
{
    float:right;
    margin:0 0 0.25em 1.5em;
    clear:right;
}

.scrollbox
{ 
    overflow: auto;
    width: 100%;
}

/* -- 1.4.3. Trennstriche -- */

.border-top { border-top:solid 1px #ccc; }
.border-left { border-left:solid 1px #ccc; }
.border-bottom { border-bottom:solid 1px #ccc; }
.border-right { border-right:solid 1px #ccc; }
.border-all { border:solid 1px #ccc; }
.border-vertical { border-style:none solid; border-color:#ccc; border-width:1px; }
.border-horizontal { border-style:solid none; border-color:#ccc; border-width:1px; }

/* -- 1.4.5. Abstände -- */

/* Außenabstände */
.margin-top { margin-top:1em; }
.margin-right { margin-right:2em; }
.margin-bottom { margin-bottom:1em; }
.margin-left { margin-left:2em; }
.margin-all { margin:1em 2em; }
.margin-horizontal { margin-left:2em; margin-right:2em; }
.margin-vertical { margin-top:1em; margin-bottom:1em; }

/* Innenabstände */
.padding-top { padding-top:1em; }
.padding-right { padding-right:1em; }
.padding-bottom { padding-bottom:1px; }
.padding-left { padding-left:1em; }
.padding-all { padding:1em 1em 1px 1em; }
.padding-horizontal { padding-left:1em; padding-right:1em; }
.padding-vertical { padding-top:1em; padding-bottom:1px; }

.padding-all > h3:first-child, .padding-all > h4:first-child,
.padding-top > h3:first-child, .padding-top > h4:first-child,
.padding-vertical > h3:first-child, .padding-vertical > h4:first-child
{
    margin-top:0;
}

/* -- 1.4.6. Clearings -- */

.clearme
{
    float:none;
    clear:both;
}

/* == 2. Navigation ========================================================= */

/* -- 2.1. Skip Links ------------------------------------------------------- */

/* -- 2.2. Top Naviagtion --------------------------------------------------- */

#nav-top
{
    display:table;
    float:left;
    line-height:1;
    margin: 4.3em 0 0 -1.5em;
    overflow:hidden;
    padding:0;
}

#nav-top p, div.navtopwrapper
{
    padding:0.5em 0 0.4em 0;
    margin:0;
}

#nav-top a:link, #nav-top a:visited, #nav-top h3, #nav-top strong
{
    display:inline-block;
    padding:0 1em;
    border-right:solid 1px #404040;
    color:#404040;
    text-decoration:none;
    margin:0 -0.5em 0 0;
    font-size:0.9em;
}

#nav-top a:focus, #nav-top a:hover, #nav-top a:active
{
    text-decoration:underline;
}

#nav-top h3, #nav-top strong, #nav-top .active
{
    font-weight:bold;
}

#fontsizeapplet
{
    display:none;
}

#nav-top dfn
{
    position:absolute;
    left:-5000em;
}


/* -- 2.3. Main Navigation -------------------------------------------------- */

#nav-main
{
    font-size:1.167em;
    line-height:1;
    /*
        background:url(./../../images/bg-shadow-boxbottom.png) no-repeat right top transparent;
    */
}

#nav-main dfn
{
    position:absolute;
    left:-5000em;
}

#nav-main ul { list-style:none; margin:0; padding:0; position:relative; }
#nav-main ul ul { font-size:0.857em; }
#nav-main ul ul ul { font-size:1em; }

#nav-main li { margin:0; }

#nav-main li a,
#nav-main li h3,
#nav-main li strong
{
    font-size:1em;
    font-weight:normal;
    display:block;
    padding:1em 0 0.8em 33px;
    color:#990a14;
    text-decoration:none;
    background:url(./../../images/bg-links-navmain.png) no-repeat 15px 1.1em transparent;
}
#nav-main ul.lev1 li a
{
    background:#fff;
}

#nav-main li a:focus, #nav-main li a:hover, #nav-main li a:active
{
    text-decoration:underline;
}

#nav-main li.active
{
    border:solid 1px #818181;
    border-style:solid none;
    background:url(./../../images/bg-gradient-navmain-active.png) repeat-x left top #d7d7d7;
}

#nav-main li.active ul
{
    border-top:solid 1px #818181;
}

#nav-main li.active ul ul
{
    border:none;
}

#nav-main li.active > ul > li:first-child
{
    border-top:solid 1px #fff;
}

#nav-main li.active li.active
{
    background:#cfcfcf;
}

#nav-main li.active li.active ul
{
    padding-bottom:0.45em;
    background-color:#fff;
}

#nav-main li.active li.active li
{
    background:#fff;
}

#nav-main li li a,
#nav-main li li h3,
#nav-main li li strong
{
    padding:0.45em 0 0.35em 33px;
    color:#404040;
    background-image:none;
}

#nav-main li li strong,
#nav-main li li h3,
#nav-main li li li.active a
{
    color:#000;
}

#nav-main li.active li.active
{
    border:none;
}

#nav-main li li li strong,
#nav-main li li li h3,
#nav-main li li li.active a
{
    font-weight:bold;
}

#nav-main li.goback
{
    position:absolute; top:0; left:0;
}

#nav-main li.goback a
{
    position:absolute;
    top:0.2em; left:0.2em;
    display:block;
    width:18px; height:1.5em; max-height:18px;
    background:url(./../../images/button-up.png) no-repeat center transparent;
    padding:0; margin:0;
    -moz-box-shadow: 0.1em 0.1em 0.5em #888;
    -webkit-box-shadow: 0.1em 0.1em 0.5em #888;
    box-shadow: 0.1em 0.1em 0.5em #888;
}

#nav-main li.goback a:focus,
#nav-main li.goback a:hover,
#nav-main li.goback a:active
{
    border-bottom:solid 1px #888;
}

/* -- 2.4. Breadcrumb Navigation -------------------------------------------- */

#nav-breadcrumb
{
    font-size:0.9em;
    line-height:1.9;
    margin-bottom:2.5em;
}

#nav-breadcrumb a
{
    color:#404040;
    display:inline-block;
    margin-right:0.5em;
}

#nav-breadcrumb span.sep
{
    display:inline-block;
    vertical-align:middle;
    width:5px;
    height:1em;
    background:url(./../../images/bg-breadcrumb-separation.png) no-repeat center transparent;
    margin-right:0.5em;
}

#nav-breadcrumb span.sep span
{
    position:absolute;
    left:-5000em;
}

#nav-breadcrumb strong
{
    font-weight:normal;
}

.js #nav-breadcrumb
{
    margin-left:18px;
}

.js .no-dynbc
{
    margin-left:-18px;
}

ul.dynbc
{
    margin:0 0 0 -.5em;
    padding:0;
}

ul.dynbc ul, ul.dynbc li
{
    margin:0; padding:0; display:inline;
}

ul.dynbc li
{
    margin-left:-18px;
}

ul.dynbc li.open
{
    
}

ul.dynbc li.closed
{
    
}

ul.dynbc li li
{
    margin-left:0;
}

ul.dynbc li div
{
    display:inline-block;
    position:relative;
    white-space:nowrap;
}

ul.dynbc a.dynbc-button
{
    text-indent:-5000em;
    display:inline-block;
    height:18px; width:18px;
    background:url(./../../images/button-dropdown.png) no-repeat center #ffc543;
    padding:0 !important; margin:0 !important;
    display:block;
    position:absolute;
    left:-19px; bottom:1px;
    border:none !important;
    overflow:hidden;
}

#nav-breadcrumb ul.dynbc span.sep
{
    height:18px;
    width:18px;
    background-color:#fff;
    margin:0;
    background-position:center;
}

ul.dynbc a.dynbc-button-active
{
    background-image:url(./../../images/button-up.png);
}

ul.dynbc a.dynbc-button-processing
{
    background-image:url(./../../images/button-loading.gif);
}

#nav-breadcrumb ul.dynbc a, #nav-breadcrumb ul.dynbc strong
{
    margin:0;
    line-height:1;
    min-height:13px;
    padding:0.5em 25px 0 0.5em;
    border:solid 1px #fff;
    border-left:none;
    border-bottom-color:#646464;
    display:inline-block;
    text-decoration:none;
}
#nav-breadcrumb ul.dynbc .dynbc-has-no-dropdown a, #nav-breadcrumb ul.dynbc .dynbc-has-no-dropdown strong
{
    min-height:13px;
    padding:0.5em 25px 0 0;
    border:none;
    text-decoration:underline;   
}

#nav-breadcrumb ul.dynbc .dynbc-has-no-dropdown
{
    margin-left:-18px;
}

#nav-breadcrumb ul.dynbc .dynbc-parent-active a
{
    color:#fff;
    background:#646464;
    border-color:#646464;
}
#nav-breadcrumb ul.dynbc strong
{
    padding-right:0;
    border-color:#fff;
}
#nav-breadcrumb ul.dynbc a:focus,
#nav-breadcrumb ul.dynbc a:hover,
#nav-breadcrumb ul.dynbc a:active
{
    text-decoration:underline;
}
#nav-breadcrumb ul.dynbc .dynbc-has-no-dropdown a:focus,
#nav-breadcrumb ul.dynbc .dynbc-has-no-dropdown a:hover,
#nav-breadcrumb ul.dynbc .dynbc-has-no-dropdown a:active,
#nav-breadcrumb ul.dynbc .dynbc-has-no-dropdown strong
{
    text-decoration:none;
}

ul.dynbc li.open div
{
    z-index:1000;
}

ul.dynbc li.open ul, ul.dynbc li.open ul div
{
    z-index:0;
}

ul.dynbc li.open ul.dropdown, ul.dynbc li.open ul.dropdown li
{
    display:block;
    z-index:5000;
    background:#fff;
    border-width:1px;
    border-color:#646464;
    border-style:solid solid none solid;
}

ul.dynbc .dynbc-breadcrumb, ul.dynbc span.sep
{
    z-index:1;
}

ul.dynbc li.open ul.dropdown li
{
    border-style: none none solid none;
}


ul.dynbc li.open ul.dropdown
{
    position:absolute;
    top:100%;
    left:0;
    width:15em;
    margin:-1px 0 0 -1px;
}

#nav-breadcrumb ul.dynbc ul.dropdown a
{
    display:block;
    white-space:normal;
    padding:0.25em 0.5em;
    border:none;
    line-height:1.5;
    z-index:5000;
}

#nav-breadcrumb ul.dynbc ul.dropdown a.active
{
    background:#999;
    color:#fff;
}

#nav-breadcrumb ul.dynbc ul.dropdown a:hover
{
    color:#fff;
    background:#646464;
}

/* -- 2.5. Pagination ------------------------------------------------------- */

/**

<!-- verwendet für Inhalte, die über mehrere Folgeseiten getrennt sind -->

<div class="pager">
    <p class="prev"><a href="#">&larr; vorige Seite</a></p>
    <p class="next"><a href="#">nächste Seite &rarr;</a></p>
    {<h3 class="hideme">Ergebnisseiten</h3>}
    <ol class="pages">
        <li><strong>1</strong></li> <!-- aktuelle Seite -->
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ol>
</div>

<div class="pager-simple">
    <ol class="pages">
        <li><strong>1</strong></li> <!-- aktuelle Seite -->
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ol>
</div>

 */

div.pager, div.pager-simple
{
    overflow:hidden;
    margin:1em 0;
}

div.pager *, div.pager-simple *
{
    padding:0; margin:0;
}

div.pager .prev
{
    width:8em;
    float:left;
    text-align:left;
}

div.pager .next
{
    width:9em;
    float:right;
    text-align:right;
}

div.pager .pages,
div.pager-simple .pages,
.paginator
{
    list-style:none;
    text-align:center;
    margin:0 9em;
    word-spacing:-0.25em;
}

.pages a
{
    white-space:nowrap;
}

div.pager-simple .pages, .paginator
{
    text-align:left;
    margin:0;
}

div.pager .pages *,
div.pager .prev *,
div.pager .next *,
div.pager-simple .pages *,
.paginator *
{
    display:inline-block;
    padding:0;
    margin:0; 
}

div.pager .pages a, div.pager .pages strong,
div.pager .prev a, div.pager .prev strong,
div.pager .next a, div.pager .next strong,
div.pager-simple .pages a, div.pager-simple .pages strong,
.paginator li a, .paginator li strong
{
    background:#fff1c1;
    color:#333;
    padding:0.25em;
    word-spacing:0;
    margin:1px 1px 0 0;
}

div.pager .pages a, div.pager .prev a, div.pager .next a, .paginator li a
{
    text-decoration: underline;
}
div.pager .pages a:focus, div.pager .pages a:hover, div.pager .pages a:active,
div.pager .prev a:focus, div.pager .prev a:hover, div.pager .prev a:active,
div.pager .next a:focus, div.pager .next a:hover, div.pager .next a:active,
.paginator li a:focus, .paginator li a:hover, .paginator li a:active
{
    text-decoration: none;
} 

div.pager .pages strong,
div.pager-simple .pages strong,
.paginator li strong
{
    background:#ffeba8;
    color:#000;
}

div.pager a abbr, div.pager a acronym, .paginator a abbr, .paginator a acronym
{
    border-bottom:0;
    cursor:pointer;
}

/* -- 2.6. Social Network Support ------------------------------------------- */

#sns
{
    position:absolute;
    right:0; bottom:0;
    /*
    width:348px; height:90px;
    background:url(./../../images/bg-sns.png) no-repeat left bottom transparent;
    */
}

#sns img
{
    width: 100%;
    max-width: 204px;
}

#sns h2
{
    margin-top: 0;
}

#col1 #sns
{
    position: static;
    margin-top: 5em;
    padding: 0 1.25em 0 1.5em;
}

#sns ul, #sns li
{
    margin:0; padding:0; list-style:none;
}

#sns ul
{
    overflow: hidden;
    padding: 1em;
}

#col1 #sns ul
{
    overflow: visible;
    padding: 0;
}

#sns li
{
    float: left;
    margin-right: 1em;
}

#col1 #sns li
{
    float: none;
    margin: 0 0 0.5em 0;
}

#sns a
{
    display:block;
    /*
    position:absolute;
    */
    /*
    width:57px; height:60px;
    background:url(./../../images/icon-facebook2.png) no-repeat left top transparent;
    */
    width:16px; height:16px;
    background:url(./../../images/komodo-sns-icons/facebook_16.png) no-repeat center transparent;
    z-index:625;
    /*
    -moz-transform:rotate(-11deg);
    -webkit-transform:rotate(-11deg);
    -o-transform:rotate(-11deg);
    transform:rotate(-11deg);
    */
}

#col1 #sns a
{
    width: auto;
    height: auto;
    min-height: 16px;
    padding-left: 30px;
    background-position: left center;
}

#sns a:focus, #sns a:hover, #sns a:active
{
    z-index:626;
    box-shadow:0 0 1em rgba(0,0,0, .2);
    background-color:rgba(100,100,100, .2);
    transform: scale(1.5);
}

#col1 #sns a:focus, #col1 #sns a:hover, #col1 #sns a:active
{
    z-index:626;
    box-shadow: none;
    background-color: transparent;
    transform: none;
}

a#sns-facebook
{
    /*
    left:102px; bottom:23px;
    background-image:url(./../../images/icon-facebook2.png);
    */
    background-image:url(./../../images/komodo-sns-icons/facebook_16.png);
}

a#sns-instagram
{
    /*
    left:102px; bottom:23px;
    */
    background-image:url(./../../images/komodo-sns-icons/instagram.png);
}

a#sns-gplus
{
    /*
    left:145px; bottom:23px;
    background-image:url(./../../images/icon-gplus2.png);
    */
    background-image:url(./../../images/komodo-sns-icons/google_plus_16.png);
}

a#sns-twitter
{
    /*
    left:188px; bottom:26px;
    background-image:url(./../../images/icon-twitter2.png);
    */
    background-image:url(./../../images/komodo-sns-icons/twitter_16.png);
}

a#sns-youtube
{
    /*
    left:231px; bottom:29px;
    background-image:url(./../../images/icon-youtube2.png);
    */
    background-image:url(./../../images/komodo-sns-icons/youtube_16.png);
}

a#sns-flickr
{
    /*
    left:274px; bottom:32px;
    background-image:url(./../../images/icon-flickr2.png);
    */
    background-image:url(./../../images/komodo-sns-icons/flickr_16.png);
}

a#sns-netvibes
{
    /*
    left:317px; bottom:35px;
    background-image:url(./../../images/icon-netvibes2.png);
    z-index:625 !important;
    */
    background-image:url(./../../images/komodo-sns-icons/netvibes_16.png);
}

a#sns-qik
{
    background-image:url(./../../images/komodo-sns-icons/qik_16.png);
}

a#sns-delicious
{
    background-image:url(./../../images/komodo-sns-icons/delicious_16.png);
}

a#sns-newsroom
{
    background-image:url(./../../images/moers-wappen_16.png);
}


/*
a#sns-more
{
    display:none;
    width:20px; height:20px;
    background-color:#888;
    left:360px; bottom:37px;
    background-image:url(./../../images/button-up.png);
    background-position:center;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -moz-box-shadow:0.1em 0.1em 0.5em rgba(0,0,0, .5);
    -webkit-box-shadow:0 0 0.5em rgba(0,0,0, .5);
    box-shadow:0 0 0.25em rgba(0,0,0, .5);
}
.js a#sns-more
{
    display:inline;
}
a#sns-more.close
{
    background-image:url(./../../images/button-dropdown.png);
}
*/

#sns a span
{
    position:absolute;
    display:block;
    width:0; height:0; overflow:hidden; /* patch for webkit (viewport too big with top:-5000em; ) */
}

#col1 #sns a span
{
    position: static;
    display: inline;
    width: auto;
    height: auto;
    overflow: visible;
    color: black;
}

/*
ul#sns-extended
{
    position:absolute;
    left:317px; bottom:0px;
    width:96px;
    margin:0 0 0 -44px;
    overflow:hidden;
    background:#fff;
    padding:0 5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index:1000;
    border:solid 1px #ccc;
}
.js ul#sns-extended {
    left:360px; bottom:60px;
}
#sns-extended li,
#sns-extended a,
#sns-extended img
{
    display:block;
    width:32px; height:32px;
    padding:0; margin:0;
    position:static;
}

#sns-extended li
{
    float:left;
}

#sns-extended a
{
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    background-image:none;
    padding:0; margin:0;
    position:relative;
    z-index:1001;
}

#sns-extended a:focus img, #sns-extended a:hover img, #sns-extended a:active img
{
    width:38px; height:38px;
    margin:-3px 0 0 -3px;
    position:relative;
    z-index:1002;
}
*/

h3.inline 
{
    display: inline;
    font-size: 1em;
    font-weight: normal;
}

a.social
{
    margin-left: .5em;
}

a.social img
{
    vertical-align: top;
} 

/* -- 2.7. Sitemap ---------------------------------------------------------- */

ul.sitemap,
ul.sitemap ul
{
    margin-left:0;
    margin-right:0;
}

ul.sitemap li
{
    list-style:none;
    margin-left:0;
    margin-right:0;
    margin-top:1.5em;
}

ul.sitemap li li
{
    background:url("./../../images/bg-links-spezial.png") no-repeat left 0.42em transparent;
    padding-left:15px;
    margin-left:0;
    margin-top:0;
    font-weight:normal;
    text-transform:none;
}

ul.sitemap li li li
{
}

ul.sitemap dfn
{
    position:absolute;
    left:-5000em;
}

/* -- 2.8. Searchform / Language-PDFs --------------------------------------- */

#nav-search-languages
{
    /*
        background:url(./../../images/bg-gradient-topbox.jpg) no-repeat right bottom #fdf5da;
    */
    padding:2em 1.25em 1.5em 1.25em;
    min-height:5.833em;
}

.searchform
{
    position:relative;
    margin:0 2.5em 0 0.5em;
}

.searchform input
{
    display:block;
    width:100%;
    padding:0.7em 2.5em 0.7em 0.5em;
    margin:0 0 0 -0.5em;
    line-height:1;
    font-size:1em;
    border:none;
    background:#fff;
    -moz-box-shadow: inset 0.25em 0.25em 0.25em #ddd;
    -webkit-box-shadow: inset 0.25em 0.25em 0.25em #ddd;
    box-shadow: inset 0.25em 0.25em 0.25em #ddd;
}

.searchform button
{
    display:block;
    position:absolute;
    top:0.375em; right:-2.2em;
    border:none;
    background:transparent;
    margin:0;
    padding:0;
    height:1.833em;
    width:1.833em;
    font-size:1em;
}
.searchform button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */


.searchform button img
{
    margin:0; padding:0; width:100%; display:block;
}

#languagepdf
{
    color:#404040;
    background:#e4e4e4;
    margin:0.4em 0 0 0;
    padding:0.7em 0.5em 0.6em 0.5em;
    border-bottom:solid 1px #6e6e6e;
    -moz-box-shadow: inset 0 0 0.5em #888;
    -webkit-box-shadow: inset 0 0 0.5em #888;
    box-shadow: inset 0 0 0.5em #888;
}

#languagepdf a
{
    color:#000;
}

#languagepdf h3
{
    font-size:1em;
    margin:0;
    padding:0;
    font-weight:bold;
    position:relative;
}

#languagepdf h3 a
{
    display:block;
    height:18px;
    width:18px;
    position:absolute;
    right:0;
    top:50%;
    margin-top:-9px;
    background:url(./../../images/button-dropdown.png) no-repeat center transparent;
    -moz-box-shadow: 0.1em 0.1em 0.5em #888;
    -webkit-box-shadow: 0.1em 0.1em 0.5em #888;
    box-shadow: 0.1em 0.1em 0.5em #888;
}

#languagepdf h3 a.close
{
    background-image:url(./../../images/button-up.png);
}

#languagepdf h3 a:focus, #languagepdf h3 a:hover, #languagepdf h3 a:active
{
    border-bottom:solid 1px #888;
}

#languagepdf h3 a:focus, #languagepdf h3 a:hover, #languagepdf h3 a:active
{
    outline:none !important;
}


#languagepdf h3 a span
{
    position:absolute;
    left:-5000em;
}


#languagepdf ul.simple
{
    margin:0.5em 0 0;
    font-size:0.9em;
}

.js #languagepdf ul.simple
{
    position:absolute;
    left:-5000em;
}

#languagepdf ul li
{
    padding-left:15px !important;
    background-color:transparent;
    background-position:left 0.42em;
    background-repeat:no-repeat;
}

#languagepdf ul li.en { background-image:url(./../../images/ico_lang_en.gif); }
#languagepdf ul li.fr { background-image:url(./../../images/ico_lang_fr.gif); }
#languagepdf ul li.nl { background-image:url(./../../images/ico_lang_nl.gif); }

/* -- 2.9. Eventlist --------------------------------------------------- */

#col1 #events
{
    margin-top: 5em;
    padding: 0 1.25em 0 1.5em;
}

#events h3
{
    font-size: 1em;
}

#events a
{
    color: black;
}

#events ul.simple li
{
    margin-bottom: 2em;
}

/* == 3. Typography ========================================================= */

/* -- 3.1. Text Elements ---------------------------------------------------- */

a:link
{
    color:#826228; /* #333; */
    text-decoration:underline;
}

a:visited
{
    color:#333;
    font-style:italic;
}

a:focus, a:hover, a:active
{
    text-decoration:none;
}

abbr, acronym
{
    border-bottom:1px #000 dotted;
    letter-spacing:.07em;
    cursor:help;
}

a abbr, a acronym
{
    border-bottom:0;
    cursor:pointer;
}

abbr.dtstart, abbr.dtend
{
    border-bottom:0;
    cursor:auto;
}

h2
{
    font-size:1.167em;
    font-weight:bold;
    padding:0;
    margin:1.93em 0 0.9em 0;
}

h3
{
    font-size:1.167em;
    font-weight:bold;
    padding:0;
    margin:0.9em 0 0.9em 0;
}

.entry h3
{
    width:66%;
}

.entry h3.full { width: 100%; }

h4, h5, h6
{
    font-size:1em;
    font-weight:bold;
    padding:0;
    margin:1em 0 0 0;
}

h4
{
    font-size:1.1em;
    margin-bottom:1em;
}

h5
{
    font-style:oblique;    
}

#main h3.image, #main h4.image, #main h5.image { margin-top: .1em; }

h6 
{
    font-weight:normal;
    font-style:oblique;
}
p, ul, ol, dl, dd, blockquote, address
{
    padding:0;
    margin:0 0 1em 0;
    font-weight:normal;
}

address
{
    font-style:normal;
}

p + h4, ul + h4, ol + h4, dl + h4, table + h4
{
    margin-top:1.5em;
}

p.info
{
    color:#606060;
    font-size:0.9em;
}

ul, ol
{
    margin-left:2em;
    margin-right:2em;
}

ul ul, ul ol, ol ol, ol ul
{
    margin:0.5em 0 0 2em;
}

ul
{
    list-style-type:square;
}

li
{
    line-height:1.5;
    margin:0 0 0.5em 0;
    line-height:inherit;
}

dl
{
    margin:1em 0;
}

dt
{
    margin:0;
    font-weight:normal;
    color:#000;
}

dd
{
    color:#555;
}

blockquote
{
    margin-left:2em;
    margin-right:2em;
}

em { font-style:italic; }
strong { font-weight:bold; }

/* -- 3.2. Tables ----------------------------------------------------------- */

/**

<table class="{full|simple|left|right|fixed}" summary="###">
    {<caption>###</caption>}
    <thead>
        <tr>
            <th>###</th>
            <th>###</th>
            <th {class="highlight"}>###</th>
        </tr>
    </thead>
    {<tfoot>
        <tr>
            <td colspan="3">###</td>
        </tr>
    </tfoot>}
    <tbody>
        <tr>
            <td>###</td>
            <td>###</td>
            <td>###</td>
        </tr>
        <tr {class="highlight|row1"}>
            <td>###</td>
            <td>###</td>
            <td>###</td>
        </tr>
        <tr>
            <td>###</td>
            <td>###</td>
            <td>###</td>
        </tr>
    </tbody>
</table>

<!--

    - Klassen für Tabelle:
        full = Tabelle über volle Breite
        fixed = feste Tabellenspaltenbreiten
        simple = grafisch einfacheres Tabellenlayout
    - Klassen für Tabelle, Zeilen, Zellen:
        right = rechts ausgerichteter Text
        left = links ausgerichteter Text
        center = mittig ausgerichteter Text (Default)
        top = oben ausgerichteter Text
        bottom = unten ausgerichteter Text
    - Klassen für Zeilen, Zellen:
        highlight = hervorgehoben (z.B. nutzbar für Zebra/Schachbrett-Muster)
    -  Klassen für Zeilen
        row1 = same like highlight, but only for weak CMS
    - Klassen für Zellen
        w05 ... w95 = Breitenangabe in Prozent

-->

 */

table
{
    padding:0;
    margin:1em 0;
    width: 100%;
    border-collapse:collapse;
    text-align:center;
    caption-side:top;
}

caption
{
    margin:0; padding:0;
    font-style:italic;
    font-weight:bold;
    text-align:left;
}
table.compact { width: auto; }
table.fixed { table-layout:fixed; }
table.right th, table.right td,
table .right th, table .right td,
th.right, td.right
{
    text-align:right;
}
table.left th, table.left td,
table .left th, table .left td,
th.left, td.left
{
    text-align:left;
}
table.center th, table.center td,
table .center th, table .center td,
th.center, td.center
{
    text-align:center;
}
table.top th, table.top td,
table .top th, table .top td,
th.top, td.top
{
    vertical-align:top;
}
table.bottom th, table.bottom td,
table .bottom th, table .bottom td,
th.bottom, td.bottom
{
    vertical-align:bottom;
}
td, th {color:#000; font-weight:normal; padding:0.5em 0.45em; border:solid 1px #fff;}
th, tr.head td, td.head
{ background-color:#fff1c1; color:#000; }

td, tr.cell th, th.cell, tr.highlight th.cell, tr.stronger th.cell, tr.weaker th.cell,
tr.row1 th.cell
{ background-color:#f7f7f7; color:#404040; }

tr.highlight td, td.highlight,
tr.row1 td
{
    background-color:#f1f1f1; color:#333;
}
tr.highlight th, th.highlight, tr.cell th.highlight,
tr.row1 th
{
    background-color:#ffeba8; color:#000;
}

tr.stronger th, tr.stronger td, th.stronger, td.stronger,
tr.cell th.stronger, tr.weaker th.stronger
{
    background-color:#ffeba8;
}
tr.weaker th, tr.weaker td, th.weaker, td.weaker
tr.cell th.weaker, tr.stronger th.weaker
{
    background-color:#fff7db;
}

tfoot td, tfoot th
{
    background-color:#f6f6f6;
}

/* Breitendefinition für Tabellen-Spalten */
/* dürfen nicht zu 100% addiert werden, wegen padding/border bei td/th */
/* am besten nur die kleineren Spalten darüber definieren */
table td.w10, table th.w10 { width:10%; }
table td.w20, table th.w20 { width:20%; }
table td.w30, table th.w30 { width:30%; }
table td.w40, table th.w40 { width:40%; }
table td.w50, table th.w50 { width:50%; }
table td.w60, table th.w60 { width:60%; }
table td.w70, table th.w70 { width:70%; }
table td.w80, table th.w80 { width:80%; }
table td.w90, table th.w90 { width:90%; }
table td.w05, table th.w05 { width:5%; }
table td.w15, table th.w15 { width:15%; }
table td.w25, table th.w25 { width:25%; }
table td.w35, table th.w35 { width:35%; }
table td.w45, table th.w45 { width:45%; }
table td.w55, table th.w55 { width:55%; }
table td.w65, table th.w65 { width:65%; }
table td.w75, table th.w75 { width:75%; }
table td.w85, table th.w85 { width:85%; }
table td.w95, table th.w95 { width:95%; }

/* Vereinfachte Tabelle  */
table.simple
{
    border-top:solid 1px #ccc; /*#555;*/
    border-bottom:solid 1px #ccc;
    text-align:left;
}
table.simple td,
table.simple th
{
    background-color:transparent;
    border-style:none none solid none;
    border-color:#ccc;
    vertical-align:top;
    color:#404040;
    padding-top:0.75em;
    padding-bottom:0.75em;
}
table.simple td
{
    border:none;
}
table.simple th
{
    font-weight:bold;
    /*text-transform:uppercase;*/
}
table.simple thead th
{
    border-bottom-style:solid;
    border-color:#ccc; /*#555;*/
}
table.simple tr.highlight td,
table.simple tr.highlight th,
table.simple td.highlight,
table.simple th.highlight,
table.simple tr.row1 td,
table.simple tr.row1 th
{
    background-color:#f1f1f1;
    color:#333;
}
.vevent table.simple tr td
{
    border-bottom:1px solid #ccc;
}
.vevent table.simple tr td.last
{
    border-bottom:0;
}

 /* Media Tables for Responsiveness */
.mediaTable 
{
    border-collapse: collapse;
    width: 100%;
}
.mediaTableWrapper
{
    position: relative;
}
.mediaTableMenuClosed ul
{
    display: none;
}

/**
 * Active Media Table Rules
 * these rules are applied to a table activated by the jQuery plugin.
 **/

.activeMediaTable th, 
.activeMediaTable td
{
    display: none;
}

.activeMediaTable th.essential,
.activeMediaTable td.essential
{
    display: table-cell;
}

/* IE7 Hack */
*+html .activeMediaTable th.essential, 
*+html .activeMediaTable td.essential 
{ 
    display: block;
}

/**
 * Menu Style
 **/
.mediaTableMenu
{
    background: #fff1c1;
    border: solid 1px #ccc;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}
.mediaTableMenu a
{
    cursor: pointer;
    display: block;
    padding: 0.5em;
}
.mediaTableMenu a:focus, 
.mediaTableMenu a:hover,
.mediaTableMenu a:active
{
    background: #740018;
    color: #fff;
}
.mediaTableMenu ul
{
    list-style: none;
    list-style-position: outside;
    margin: 0;
}
.mediaTableMenu ul li input[type=checkbox]
{
    margin: 0 5px;
}
.mediaTableMenu ul li
{
    line-height: 2em;
    margin: 0;
}

.mediaTableMenu ul li label
{
    cursor: pointer;
}
.select-menu
{
    display: none;
}
.nav-sub-p
{
    display: none;
    font-size: 1.15em;
    margin: 0 0 5px 15px;
}

/* settings for all sizes (related to media queries) */
.mediaTableMenu
{
    display: none;
}

/* == 4. Media Includes ===================================================== */

/* -- 4.1. Pictures --------------------------------------------------------- */

img
{
    padding:0;
    margin:0;
}

img.single
{
    margin:1em 0;
    max-width:100%;
    height:auto;
}

img.full
{
    margin:1em 0;
    width:100%;
    height:auto;
}

img.icon
{
    margin-right:0.25em; margin-bottom:0;
    vertical-align:baseline;
    height:0.75em;
}

.figure
{
    color:#666;
}

.figcaption
{
    display:block;
    margin-top:0.5em;
    font-size:0.9em;
}

/* -- 4.2. Galleries -------------------------------------------------------- */

/**

<ul|ol class="imgGal {captioned|legacy-sized|ecard-sized}">
    <li><a href="#Bild-URL" title="###" {rel="gruppierungs_id"}><img src="#Thumb-URL" alt="###" /></a></li>
    <li><a href="#Bild-URL" title="###" {rel="gruppierungs_id"}><img src="#Thumb-URL" alt="###" /></a></li>
</ul|ol>

 */

.imgGal
{
    margin:0; padding:0;
    list-style:none;
    overflow:hidden;
}

.imgGal li
{
    margin:0 0.75em 0.75em 0; padding:0;
    float:left;
}

.captioned li
{
    width:10em;
    height:10.5em;
    overflow:hidden;
}

.ecard-sized li
{
    width:13em;
    height:13em;
    overflow:hidden;
}

.imgGal img, .imgGal a
{
    padding:0; margin:0; display:block;
    font-size:0.9em;
}

.imgGal .caption
{
    display:block;
    font-weight:normal;
    width:100%;
    height:3em;
}

.imgGal img
{
    height:8em;
    width:auto;
}

.legacy-sized img
{
    height:6.5em;
}

.ecard-sized img
{
    height:10.5em;
}

.imgGal a img
{
    border:solid 1px #fff; /*#ccc;*/
    font-size:1em;
    /*padding:0.25em;
    background:#f6f6f6;*/
}

.imgGal a:focus img, .imgGal a:hover img,  .imgGal a:active img
{
    border-color:#826228; /*#555;*/
    /*background:#fff1c1;*/
}

/* -- 4.3. Video & Flash ---------------------------------------------------- */

/**

<!-- über gesamte Inhaltsbreite
     media-16-9 = 16:9 Ratio
     media-4-3 = 4:3 Ratio
     Ratio funktioniert nur annäherungsweise bei horizontal ungestauchter Seite -->

<div class="flashapp {media-16-9|media-4-3}">
    <!-- Flasheinbindung über object/embed -->
</div>

<!-- mit konkreter Größendefinition ->

<div class="flashapp media-custom" style="width:##px; height:##px">
    <!-- Flasheinbindung über object/embed -->
</div>

 */

object, embed
{
    margin:0;
    padding:0;
    display:block;
}

.flashapp
{
    display:block;
    margin:1em auto;
    padding:0;
}

.boxmedia .flashapp
{
    margin:0;
}

.small .flashapp
{
    margin:1em auto;
}

.media-16-9
{
    position: relative;
    width:100%;
    /* height:29.9em; */ /* Berechnung: [638px/16 * 9] / 16px / 0.75 (schriftgröße) */
    height: 1px;
    padding-bottom: 56.25%;
}

.media-4-3
{
    position: relative;
    width:100%;
    /* height:39.875em; */
    height: 1px;
    padding-bottom: 75%;
}

.media-16-9 object, .media-16-9 embed,
.media-4-3 object, .media-4-3 embed,
.media-custom object, .media-custom embed
{
    height:100%;
    width:100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.flashapp-caption
{
    border-top:solid 1px #d68e00;
    background:url(./../../images/bg-gradient-flashappcaption.jpg) no-repeat center top #ffd866;
    padding:0.3em 0.6em; margin:0;
    white-space:nowrap;
    overflow:hidden;
    color:#2a2a2a;
    font-size:0.9em;
}

.js .flashapp-caption
{
    position: absolute;
    left: -5000em;
    width: 20em;
}

.flashapp-caption * { margin:0; padding:0; }

/* youtube Video */

    .ym-video {
        border: 0 none;
        margin-bottom: 0;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
    }


/* -- 4.4. Lightbox-ARIA ---------------------------------------------------- */

.ui-widget-overlay
{
    background:#e2e2ed;
    opacity:0.5;
    filter:Alpha(opacity=50) !important; /* performance issue */
    position:absolute;
    left:0; top:0;
}

.ui-dialog
{
    background:#fff;
    color:#404040;
    font-size:0.75em;
    font-family:sans-serif;
    border:solid 1px #ccc;
    -moz-box-shadow:0 0 0.1em 0.1em rgba(0,0,0,0.1);
    -webkit-box-shadow:0 0 0.1em 0.1em rgba(0,0,0,0.1);
    box-shadow:0 0 0.1em 0.1em rgba(0,0,0,0.1);
	display: none;
	position: absolute;
	width: 20em;
	max-width: 75%;
	height: auto;
	margin:0;
	padding:1em;
}

#ui-lightbox-close
{
    display:block;
    position:absolute;
    right:1em; top:-5000em;
    width:9px; height:10px;
    padding:0; margin:30px 2px 0 0;
    overflow:hidden;
    background:url(./../../images/buttons-lightbox.png) no-repeat center transparent;
    text-indent:-5000em;
}

.ui-dialog-titlebar
{
}

.ui-dialog-title
{
    position:absolute;
    left:-5000em;
}

#ui-lightbox-image
{
	height: 10em;
	padding:0;
	margin:0;
	background: url(./../../images/symbol-lightbox-loading.gif) no-repeat center center;
}
#ui-lightbox-image img{
	display: none;
	max-width: 100%;
	height: auto;
}

#ui-lightbox-page
{
    font-size:0.9em;
    color:#555;
}

#ui-lightbox-description
{
    margin-top:1em;
    font-weight:bold;
    margin-right:2em;
}

#ui-lightbox-pager
{
    color:#555;
    font-size:0.9em;
}

#ui-dialog-buttonpane
{
    text-align:center;
    position:absolute;
    width:100%; padding:0;
    top:1em;
    left:0;
}

#ui-dialog-buttonpane button
{
    display:block;
    position:absolute;
    top:-5000em;
    left:0;
    text-indent:-5000em;
    margin:0;
    padding:0;
    border:none;
    background:url(./../../images/buttons-lightbox.png) no-repeat left center transparent;
    width:72px;
    height:36px;
    overflow:hidden;
    cursor:pointer;
}

#ui-dialog-buttonpane #ui-lightbox-next
{
    left:auto;
    right:0;
    background-position:right center;
}

#ui-dialog-buttonpane:hover button,
#ui-dialog-buttonpane button:focus
{
    top:80px;
}

#ui-dialog-buttonpane button.ui-state-disabled
{
    top:-5000em !important;
}

/* == 5. Forms ============================================================== */

/**

@see http://www.yaml.de/de/dokumentation/css-bausteine/formularbaukasten.html

Usally use general layout classes like highlight, border-* and padding-* for forms
and fieldsets.

Extras:
        fieldset.intralayout - layouts fieldset similar to @see http://moers.elementx.de/intranet/kontakt.html
        legend.big - justifies legend size to size of headline level 3

**/

form, input, textarea, button
{
    font-family: Arial, sans-serif;
}

form
{
    margin:1.5em 0;
}

  .yform {
    padding-top:0;
  }

  .yform fieldset {
    padding-top:0;
  }
  
  .yform legend {
    font-size:1em; 
    font-weight:bold; 
    color:#404040;
  }

  .yform label {
    color:#404040;
  }

  .yform .type-text input,
  .yform .type-text textarea,
  .yform .type-select select {
    border-color:#ccc;
    background:#f0f0f0;
  }

  .yform div.type-text input:focus,
  .yform div select:focus,
  .yform div textarea:focus,
  .yform div.type-text input:hover,
  .yform div select:hover,
  .yform div textarea:hover,
  .yform div.type-text input:active,
  .yform div select:active,
  .yform div textarea:active {
    border-color:#555;
    background:#fff7db;
  }
  .yform div.type-text input:focus,
  .yform div select:focus,
  .yform div textarea:focus,
  .yform div.type-text input:active,
  .yform div select:active,
  .yform div textarea:active {
    border-color:#404040;
    background:#ffffff;
  }

  .yform .type-button input,
  .yform .type-button input[type=reset],
  .yform .type-button input[type=submit],
  .yform .type-button input.reset,
  .yform .type-button input.submit,
  .yform button
  {
    border-style:outset;
    border-color:#555;
    border-width:1px;
    color:#000;
    background:#ddd;
    padding:0.25em 0.75em;
  }

  .yform div.type-button input:focus,
  .yform div.type-button input:hover,
  .yform div.type-button input:active,
  .yform button:focus,
  .yform button:hover,
  .yform button:active,
  .yform div.type-button input.reset:focus,
  .yform div.type-button input.reset:hover,
  .yform div.type-button input.reset:active,
  .yform div.type-button input.submit:focus,
  .yform div.type-button input.submit:hover,
  .yform div.type-button input.submit:active
  {
    border-style:outset;
    border-color:#000;
    border-width:1px;
    color:#fff;
    background:#740018;
    padding:0.25em 0.75em;
    cursor:pointer;
  }

  .yform legend { padding:0; }
  .yform .message { margin-bottom:1em; color:#404040; }

  .yform .type-text textarea { width:90%; }

  .yform div.type-text,
  .yform div.type-select,
  .yform div.type-check,
  .yform div.type-button {
    padding:0;
    margin:1em 0;
  }

  .yform div.type-check input
  {
    vertical-align:text-bottom;
  }
  
  .yform sup
  {
    color:#740018;
  }
  
  .yform div.error
  {
    border-style:none;
    padding:0.5em;
    background:#740018;
    color:#fff;
  }
  
  .yform div.error label,
  .yform div.error sup,
  .yform div.error a,
  .yform div.error .message
  {
    color:#fff;
  }
  
  .columnar div.type-check label
  {
    margin-left:30%;
    display:block;
    text-indent:1.5em;
    margin-top:-1.4em;
  }

  .columnar div.type-check input
  {
    
  }
  
fieldset.intralayout
{
    padding:0.5em 1em 0 1em;
    margin:0 0 1em 0;
    border:solid 1px #ccc;
    background:#f5f5f5;
}

fieldset.intralayout legend
{
    background:#f5f5f5;
    padding:0.5em 1em;
    border-top:solid 1px #ccc;
}

legend.big
{
    font-size:1.167em;
    font-weight:normal;
}

#nav-search-languages form ul.list-links { margin: 0; padding: .5em 0 0 0; }

/* -- The Button ------------------------------------------------------------ */

button.the-button::-moz-focus-inner, button.the-button-with-image::-moz-focus-inner,
a.the-button::-moz-focus-inner, a.the-button-with-image::-moz-focus-inner
{
    padding:3px 0;
    margin:0;
    border:none;
    outline: none;
}

button.the-button, button.the-button-with-image,
a.the-button, a.the-button-with-image
{
    display: inline-block;
    position:relative;
    
    font-size: 1em;
    
    /* leads to grey borders on a.the-button in webkit browsers
    -moz-appearance: button;
    -webkit-appearance: button;
    -o-appearance: button;
    appearance: button;
    */
    
    background-color: #ff9b31;
    color: #000;
    
    background-image: -moz-linear-gradient(
        center top,
        rgb(255,211,116) 0%,
        rgb(255,155,49) 50%,
        rgb(255,140,32) 100%
    );
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgb(255,211,116)),
        color-stop(0.5, rgb(255,155,49)),
        color-stop(1, rgb(255,140,32))
    );
    background-image: -o-linear-gradient(
        top,
        rgb(255,211,116) 0%,
        rgb(255,155,49) 50%,
        rgb(255,140,32) 100%
    );
    
    box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.75) inset;
    -moz-box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.75) inset;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.75) inset;
    -o-box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.75) inset;
    
    border-style: solid;
    border-width: 1px;
    border-color: #fe9537 #e68228 #de7b21 #e68228;
    
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -o-border-radius: 0.4em;
    border-radius: 0.4em;
    
    margin: 3px 9px 3px 3px;
    padding: 0.8em 1em 0.6em 1em;
    
    text-align: left;
    text-decoration: none;
    
    cursor: pointer;
}

button.the-button:after, button.the-button-with-image:after,
a.the-button:after, a.the-button-with-image:after
{
    content: url(./../../images/icon-the-button-red.gif);
    margin:0; padding:0;
    display: block;
    width: 12px; height: 18px;
    position: absolute;
    top: 50%; margin-top: -9px;
    left: 100%; margin-left: -6px;
}

button.the-button:focus, button.the-button-with-image:focus,
button.the-button:hover, button.the-button-with-image:hover,
button.the-button:active, button.the-button-with-image:active,
a.the-button:focus, a.the-button-with-image:focus,
a.the-button:hover, a.the-button-with-image:hover,
a.the-button:active, a.the-button-with-image:active
{
    background-color: rgb(255,211,116);
    border-color: #de7b21;
    
    background-image: none;
    
    text-decoration: underline;
    
    outline:none;

}

button.the-button:active, button.the-button-with-image:active,
a.the-button:active, a.the-button-with-image:active
{
    border-color: #de7b21 #e68228 #fe9537 #e68228;
    
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(255,211,116) 0%,
        rgb(255,155,49) 50%,
        rgb(255,140,32) 100%
    );
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(255,211,116)),
        color-stop(0.5, rgb(255,155,49)),
        color-stop(1, rgb(255,140,32))
    );
    background-image: -o-linear-gradient(
        bottom,
        rgb(255,211,116) 0%,
        rgb(255,155,49) 50%,
        rgb(255,140,32) 100%
    );
    
    text-decoration: none;
}

button.the-button-with-image,
a.the-button-with-image
{
    min-height: 20px;
    padding-left: 2.666em;
}

button.the-button-with-image img,
a.the-button-with-image img
{
    height: 1.666em;
    width: 1.666em;
    display: block;
    position: absolute;
    left: 0.5em;
    top: 50%;
    margin-top:-0.833em;
}


/* == 6. Content Types ====================================================== */

/* -- Infoboxes on right sides ---------------------------------------------- */

/*

+ used in main content for right floated areas in the third column, it can contain
  several other content, e.g. link lists
+ use .sideinfo-top for sideinfo boxes which need to start on the same row like
  the h3

<div class="sideinfo {sideinfo-top}">
    <!-- ... --->
</div>

*/

.sideinfo
{
    float:right; clear:right;
    position:relative; right:-4px;
    width:31.66%;/*34%;*/
    margin:0 0 1.5em 1.333em;
    padding:0 1.333em 1.333em 1.333em;
    background:url(./../../images/bg-shadow-sideinfo.png) no-repeat right bottom #fff;
    z-index:1;
}

.sideinfo-top
{
    padding-top:1.275em;
    margin-top:-1.3em;
}

.sideinfo-top2
{
    padding-top:1.275em;
    margin-top:-4.15em;
}

h3 + .sideinfo-top
{
    margin-top:-4.15em;
}

.sideinfo h3, .sideinfo h4, .sideinfo h5, dl.sideinfo dt,
.entry .sideinfo h3, .entry .sideinfo h4, .entry .sideinfo h5, .entry dl.sideinfo dt
{
    color:#404040;
    font-size:1.167em;
    font-weight:bold;
    padding:0;
    margin:0 0 0.9em 0;
    width:100%;
}

/* -- Teaser & Infoboxes in Content ----------------------------------------- */

.box-teaser, .box-simple
{
    width:100%;
    padding:0 5px 0 0;
    margin:1.5em 0;
    background:url(./../../images/bg-shadow-mainteasers.png) no-repeat right top transparent;
    overflow:hidden;
}

.teaserBox, .infoBox /* legacy */
{
    margin:1.5em 0;
}

/* #content */
.box-teaser, .box-info
{
    padding:0 4px 5px 0;
    background:url(./../../images/bg-shadow-sideinfo.png) no-repeat right bottom transparent;
}

.box-simple
{
    padding: 0;
    background-image: none;
}

/*
.box-last
{
    padding:0 5px 5px 0;
    background-image:url(./../../images/bg-shadow-mainteaser-last.png);
    background-position:right bottom;
}
*/

#col1 .boxmedia
{
    width:100%;
    padding:0;
    margin:0;
}
#col1 .boxcontent
{
    margin: 0;
}

/*
#content */
.boxmedia
{
    float:left;
    width:33%;
    margin-right:1.5em;
}

.boxmedia img,
.boxmedia object,
.boxmedia embed
{
    width:100%;
}


.boxcontent, .teaserBox, .infoBox
{
    background: /*url(./../../images/bg-gradient-topbox.jpg) no-repeat right bottom*/ #fdf5da;
    padding:1em 1em 1px 1em;
}

.boxmedia + .boxcontent
{
    margin-left: 33%;
}

/*#content .box-teaser .boxcontent, .teaserBox
{
    background:#fdf5da;
}
*/

.box-info .boxcontent,
.box-simple,
.box-simple .boxcontent,
.infoBox
{
    background:#f5f5f5;
}

.boxcontent h3, .entry .boxcontent h3, .boxcontent h4,
.teaserBox h3, .entry .teaserBox h3, .teaserBox h4,
.infoBox h3, .entry .infoBox h3, .infoBox h4
{
    margin:0 0 1em 0;
    width:100%;
}

.boxfollow
{
    clear:both;
    background:#fff;
    margin:0;
    padding:0 1em;
    text-align:right;
}

.boxfollow p
{
    margin:0.25em 0;
}

#teaser-homepage
{
    margin-top:5em;
}

.boxcontent .spezial
{
    background:url(./../../images/bg-links-spezial.png) no-repeat left 0.42em transparent;
    padding-left:15px;
}

.spezial h3 a, .spezial h4 a, .spezial .info
{
    font-weight:normal;
}

.spezial .info
{
    font-size:0.9em;
}



/* -- Simple & Separated Lists ---------------------------------------------- */

ul.simple, ol.simple, ul.dList, ol.dList
{
    margin:0 0 1em 0;
    list-style:none;
}

ul.simple li, ol.simple li, ul.dList li, ol.dList li
{
    line-height: 1.1;
    margin:0;
    padding:0.75em 0;
}

#col1 ul.simple li, #col1 ol.simple li
{
    padding:0;
}

ul.separated, ol.separated
{
    border-top:solid 1px #ccc;
}

ul.separated li, ol.separated li
{
    padding-left:0.45em;
    padding-right:0.45em;
    border-bottom:solid 1px #ccc;
}

dl.separated
{
    padding-bottom:0.75em;
    border-bottom:solid 1px #ccc;
}

dl.separated dt
{
    border-top:solid 1px #ccc;
    margin-top:0.75em;
    padding-top:0.75em;
}

dl.separated dt, dl.separated dd
{
    padding-left:0.45em;
    padding-right:0.45em;
}


li.highlight
{
    background-color:#f1f1f1;
}

li.row0
{
    background-color:#f7f7f7; /* background-color:#fff1c1; */
}

.aussen li 
{ 
    list-style-position: outside;
}


/* -- Calendar -------------------------------------------------------------- */

/* -- List of Links --------------------------------------------------------- */

ul.list-links
{
    margin:0 0 1em 0;
    list-style:none;
}

ul.list-links li
{
    line-height: 1.1;
    margin:1em 0 0 0;
    background:url(./../../images/bg-links-spezial.png) no-repeat left 0.25em transparent;
    padding-left:15px;
}

#col1 ul.list-links li,
.box-simple ul.list-links li
{
    margin:0;
    line-height: inherit;
    background-position: left 0.4em;
}

.box-simple ul.list-links li
{
    background-image:url(./../../images/bg-links-spezial-homebox.png);
}

ul.list-links li.extern
{
    background-image:url(./../../images/bg-links-extern.png);
}

ul.list-links li.download
{
    background-image:url(./../../images/bg-links-download.png);
}



/* -- List of Downloads ----------------------------------------------------- */

/* -- Datasources ----------------------------------------------------------- */

/* -- Contacts -------------------------------------------------------------- */

/* -- Weblog ---------------------------------------------------------------- */

#weblog #col2
{
    float:right;
    margin-left:0;
    width:75%;
}

#weblog #col3
{
    display:block;
    margin:0 75% 0 0;
    background:url(./../../images/bg-shadow-navmain.png) no-repeat right -230px transparent;
}

#weblog .hentry
{
    padding:0;
    border:none;
    background:transparent;
}

#weblog .hentry .banderole
{
    background-image:url(./../../images/bg-banderole-top.png);
    background-color:#ffd925;
}
#weblog .hentry .banderole span
{
    background-image:url(./../../images/bg-banderole-bottom.png);
}

#weblog .box-teaser ul
{
    margin-left:0;
    margin-right:0;
}

#weblog .box-teaser ul li
{
    margin-left:1em;
}

#weblog .entry-content
{
    margin-top:1em;
}

#weblog .entry-info
{
    font-size:0.9em;
}

#weblog .hentry h3
{
    background:transparent;
    border:none;
    margin:0.9em 0;
}

/* -- Forum ----------------------------------------------------------------- */

#forum h3
{
    width:100%;
}

#forum #col1
{
    background-position:right bottom;
}

#forum #content hr
{
    border:solid 1px #ccc;
    border-style:solid none none none;
    margin-bottom:1.5em;
}

/* -- Guestbook ------------------------------------------------------------- */

ol.guestbook cite
{
    font-style:normal;
}

ol.guestbook blockquote
{
    margin:0;
}

ol.guestbook li
{
    padding-top:0;
    padding-bottom:0;
}

ol.guestbook li h4
{
    margin-top:0;
    padding-top:1em;
}

/* -- Chat ------------------------------------------------------------------ */

ol.chat
{
    margin-left:0;
    margin-right:0;
    list-style:none;
}

ol.chat blockquote,
ol.chat p
{
    margin:0;
}

ol.chat li
{
    padding-top:0.5em;
    padding-bottom:0.5em;
    margin-left:0;
}

ol.chat li.mod
{
    background-color:#f5f5f5;
}

ol.chat li.guest
{
    background-color:#fdf5da;
}

ol.chat cite
{
    font-style:normal;
    font-weight:bold;
}

/* -- eCards ---------------------------------------------------------------- */

/* -- Search Results -------------------------------------------------------- */

dl.list-results
{
}

dl.list-results dt
{
    margin-top:inherit;
    font-weight:bold;
}

dl.list-results dt dfn
{
    position:absolute;
    left:-5000em;
}

dl.list-results dd
{
    margin:0;
}

/* -- Press Releases -------------------------------------------------------- */

dl.list-pressreleases dt
{
    margin-top:inherit;
}

dl.list-pressreleases dd
{
    margin:0;
}

ul.list-pressreleases li
{
    padding-top:0;
    padding-bottom:0;
}

ul.list-pressreleases li.highlight h4
{
    margin-top:0;
    padding-top:1em;
}

/* -- News ------------------------------------------------------------------ */

.hentry
{
    position:relative;
    padding-left:11em;
    padding-top:1em;
    border-bottom:solid 1px #fff;
    margin:0;
    background:url(./../../images/bg-gradient-newsbody.png) repeat-y right bottom #fff;
    min-height:10.08em;
}

/*
.hspezial
{
    background-image:url(./../../images/bg-gradient-newsbody-spezial.png);
}
*/

.hentry h3
{
    line-height:1;
    /* padding:12px 0 8px 0; *
    margin-top:0;
    /* background:url(./../../images/bg-gradient-newshead.png) repeat-y right bottom #fff; */
    /* border-bottom:solid 1px #fff; */
}

.hentry h3 a
{
    color:#404040;
}

.hcategory
{
    display:block;
    width:9em;
    position:absolute;
    top:0; left:0;
    z-index:1;
}

.himage
{
    display:block;
    width:8.5em; /* 102px */
    height:7.6em; /* 96px */
    position:absolute;
    left:0; top:0; /* top:1.167em; */
    margin-top:20px;
    z-index:2;
}

.hentry .follow
{
    text-align:right;
    padding-right:1em;
    margin-bottom:0.5em;
}

}

@-moz-document url-prefix()
{
    /* FFHACK: unbelievable but it needs a hack for FF */
    #servicerow span.toggle{ bottom:0; }
    /* #servicerow .c33l span.toggle { right:67%; } */
    #servicerow .csep span.toggle { right:33%; }
    #servicerow .c33r span.toggle { right:0; }
    span#eventplayerapplet { bottom:0; }


    button.the-button:after, button.the-button-with-image:after
    {
        left: auto;
        right: 0.5em;
    }
    
    button.the-button-with-image:after
    {
        right: 2.166em;
    }
    
    button.the-button-with-image img
    {
        left: -2.166em;
    }

}

/*

    PRINT STYLES

*/

@media print
{
    html, body, div.top, div.page_margins, div.page, #main, #col2, #col2_content, #content
    {
        display: block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-width: inherit !important;
        min-height: inherit !important;
        max-width: inherit !important;
        max-height: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: auto !important;
    }
    
    /* hide everything but the content */
    #skiplinks, #nav-top, div.bottom, #col1, #col3, #picturerow, #servicerow, #sns, span.psl, span.psr, span.hbs, span.hbe
    {
        display:none !important;
    }
    
    body
    {
        font-size: 14pt;
    }
    
    .page_margins
    {
        font-size: 1em;
    }
    
    #col2, #col2_content, #content, div.page, .page_margins, #header, #header h1, #logo
    {
        width:auto;
        margin:0;
        padding:0;
        color:#000;
        background:transparent;
        position:static;
    }
    
    #header
    {
        text-align:center;
    }
    
    #logo
    {
        display:inline-block;
    }
    
    #nav-breadcrumb
    {
        text-align:center;
    }
    
    #nav-breadcrumb span { position:static !important; width:auto !important; height:auto !important; }
    
    .entry p, .hentry p
    {
        text-align:justify;
    }
    
    * { background-image:none; }
}

/*
    MEDIA QUERY BREAKPOINTS
    
    Standardbreite inkl. Padding 84.8em bei 75% Schriftgröße = 1018px
    Standardbreite 80.8em bei 75% Schriftgröße = 970px
    - bis 1280 Pixel (und größer)
    - bis 1078 Pixel (90% = Seitebreite)
    - bis 1018 Pixel (Seitenbreite + Padding)
    - bis 970 Pixel (Seitenbreite)
    - bis 800 Pixel
    - bis 640 Pixel
    - bis 340 Pixel
*/

@media screen and (min-width: 80em)
{
    /* 1280 Pixel und größer */
    
    body
    {
        font-size: 1.333em;
    }
    
    .js #nav-top
    {
        top: 0;
    }

}

@media screen and (max-width: 67.361em)
{
    /* 1078 Pixel und kleiner */

    .page_margins
    {
        max-width: none;
        min-width: 0;
    }
}

@media screen and (max-width: 63.6em)
{
    /* 1018 Pixel und kleiner */

    .page_margins
    {
        width: auto;
    }
}

@media screen and (max-width: 60.625em)
{
    /* 970 Pixel und kleiner */

    body
    {
        background: white;
    }
    
    .page_margins
    {
        padding: 0;
    }
    
    span.psl, span.psr,
    span.hbs,
    span.fl, span.fgl, span.fgr
    {
        display: none;
    }
    
    span.hbe
    {
        width: 44px;
        background-position: left top;
    }
    
    #nav-search-languages, #nav-main,
    #sns, #events
    {
        padding-left: 0;
        padding-right: 24px;
        margin-left: -24px;
    }
}

@media screen and (max-width: 50em)
{
    /* 800 Pixel und kleiner */
    
    .page
    {
        padding-right: 20px;
        padding-top: 3em;
    }
    
    #header
    {
        background-image: none;
    }
    
    #col1 
    {
        margin-top: 5em;
    }
    
    #col2
    {
        margin-top: -5em;
    }
    
    #picturerow,
    span.hbe
    {
        display: none;
    }
    
    #nav-breadcrumb
    {
        display: none;
    }
    
    #footer div.subcolumns
    {
        margin-left: 10%;
        width: 90%;
    }
    
    .boxmedia
    {
        float: none;
        width: auto;
        margin: 0;
    }
    
    .boxcontent, .boxmedia + .boxcontent
    {
        margin: 0;
    }

    .himage
    {
        width: 85px;
        height: 76px;
        margin: 0;
    }
    
    .hentry
    {
        padding: 0 0 0 100px;
        min-height: 76px;
    }
    
    .floatleft, .floatright,
    .lefty, righty
    {
        display: block;
        width: auto;
        float: none;
        clear: none;
        max-width: 100%;
        margin: 0 0 0.5em 0;
    }
    
    .ecard-sized li
    {
        width: 9em!important;
        height: 9em!important;
    }
    
    .imgGal img
    {
        height: 5em;
    }

    #fKontakt img
    {
        display: none;
    }
    .mediaTableMenu 
    { 
        display: block;
    }
    .mediaTableWrapperWithMenu
    {
        padding-top: 2.5em;
    }
    .columnar .type-text label, 
    .columnar .type-select label,
    .columnar div.type-select select,
    .columnar div.type-file .customfile {
      float: none !important;
      width: 100% !important;
    }
    .columnar div.type-file .customfile {
      width: 98% !important;
    }
    .columnar div.error .message {
      float: none;
      margin-left: 0;
    }
    .columnar div.error {
      padding-left: 8px !important;
    }
    .columnar div.type-check input,
    .columnar div.type-check label {
      margin-left: 0;
      padding-bottom: .3em;
      display: inline-block;
    }
    .columnar div.type-text textarea,
    .columnar div.type-text input {
      float: none;
      width: 98%;
    }
    .yform div.type-text, .yform div.type-select, .yform div.type-check, .yform div.type-button {
      padding-left: 0;
    }
    
    .columnar fieldset div.type-button, fieldset.columnar div.type-button {
      padding-left: 0;
    }
    .tabs ul.tabs-list li, .tabs ul.tabs-list li a {
      display: block;
      float: none;
      margin: 1px 0;
    }

    .boxmedia {
        height: 0;
        margin-bottom: 1em;
        padding-bottom: 56.25%;
        position: relative;
        width: 100%;
    }
    .ym-video {
        height: 100%;
        left: 0;
        margin-bottom: 1.5em;
        position: absolute;
        top: 0;
        width: 100%;
    }
   
}

@media screen and (max-width: 40em)
{
    /* 640 Pixel und kleiner */
    
    body
    {
        font-size: 1.333em;
    }
    
    #fontsizeapplet
    {
        display: none !important;
    }
    
    .page
    {
        padding-left: 0;
        padding-right: 0;
    }
    
    #header
    {
        padding: 0;
        position: static;
        width: auto;
        background-image: none;
        margin-bottom: 20px;
    }
    
    #header h1
    {
        position: static;
        padding-right: 0;
        background-image: none;
    }
    
    #logo
    {
        margin-left: 0;
    }
    
    #nav-top
    {
        display: block;
        float: none;
        margin: 0 25px 0 20px;
        overflow: visible;
        
    }
    #nav-top a:first-child
    {
       border-top: 1px solid #d0d0d0;
    }
    #nav-top a:link, #nav-top a:visited, #nav-top h3, #nav-top strong
    {
        border-right: 0;
        border-bottom: 1px solid #d0d0d0;
        display: block;
        float: none;
        padding: .4em .4em;
    }
    
    #col1, #col2,
    #col1_content, #col2_content
    {
        float: none;
        width: auto;
        margin: 0;
        background-image: none;
    }
    
    #col1_content, #col2_content
    {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #col1-toggler
    {
        display: block;
        position: absolute;
        width: 32px;
        height: 32px;
        padding: 17px 10px 12px 10px;
        white-space: nowrap;
        overflow: hidden;
        top: -4px;
        right: 20px;
        z-index: 1000;
        background:url(./../../images/button-responsivemenu.png) no-repeat center transparent;
        text-indent: 200%;
        box-shadow: 0px 5px 2px #ddd;
    }
    
    #col1-toggler:focus, #col1-toggler:hover
    {
        background-color: #ddd;
    }
    
    #col1-toggler.menu-open
    {
        background: url(./../../images/button-responsivemenu-active.png) no-repeat center #f9eb00;
        background: url(./../../images/button-responsivemenu-active.png) no-repeat center, linear-gradient(180deg, #f8f24b, #fadb00);
    }
    
    .js #col1
    {
        overflow: hidden;
        max-height: 0px;
    }
    
    .js #col1.menu-open
    {
        max-height: 100em;
        -webkit-transition: max-height 1s linear;
        -moz-transition: max-height 1s linear;
        -o-transition: max-height 1s linear;
        transition: max-height 1s linear;
    }
    
    .js #col1.menu-closed
    {
        max-height: 0px;
        -webkit-transition: max-height 0.5s linear;
        -moz-transition: max-height 0.5s linear;
        -o-transition: max-height 0.5s linear;
        transition: max-height 0.5s linear;
    }
    
    .sideinfo
    {
        float: none;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }
    h3 + .sideinfo-top
    {
        margin-top: 0!important;
    }
    
    #nav-search-languages, #nav-main,
    #sns, #events
    {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
    }
    
    #nav-search-languages
    {
        padding-top: 0;
    }

    #picturerow
    {
        display: none;
    }
    
    #nav-main ul > li
    {
        border-bottom: solid 1px #bfbfbf;
    }
    
    #content
    {
        padding: 0;
    }
    
    #languagepdf ul.simple
    {
        font-size: 1em;
    }
    
    #col1 #sns,
    #col1 #events
    {
        margin-top: 2em !important;
        overflow: hidden;
        padding: 0;
    }
    #col1 #events
    {
        margin-top: 0 !important;
    }
    
    #sns img
    {
        display: none;
    }

    
    div.bottom, #footer
    {
        /* background-image: none; */
    }
    
    #bottom
    {
        padding: 0;
    }
    
    #footer
    {
        padding: 20px;
    }
    
    #footer div.subcolumns
    {
        margin-left: 20% !important;
        width: auto;
    }
    
    #footer ul-list-links,
    #footer p
    {
        min-height: 0;
    }
  
    .hentry
    {
        min-height: 0;
    }
    
    div.subcolumns, .c33l, .c33r
    {
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 0 1em 0 !important;
        padding: 0 !important;
    }
    
    /* -- Banderole envelope for text elements -- */

    .banderole,
    .banderole-narrowed,
    #weblog .hentry .banderole
    {
        background-color: #f8ed00;
        background-image: none;
        background-image: linear-gradient(180deg, #ffe400, #f8db00),
                          linear-gradient(180deg, transparent 1px, #fff 1px, #fff 2px, transparent 2px),
                          linear-gradient(0deg, rgba(255, 255, 255, 0.5) 1px, #fff 2px, rgba(255, 255, 255, 0.5) 3px, transparent 3px);
        border-bottom: solid 2px #eee;
        padding:6px 20px 8px 20px;
        margin:0 0 0 -20px;
        position: static !important;
        left: 0 !important;
    }

    #col2 h2.banderole-narrowed
    {
        background-color: #d4d4d4;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, 0.05)),
                          linear-gradient(180deg, transparent 1px, #fff 1px, #fff 2px, transparent 2px),
                          linear-gradient(0deg, rgba(255, 255, 255, 0.5) 1px, #fff 2px, rgba(255, 255, 255, 0.5) 3px, transparent 3px);
    }

    .banderole span,
    .banderole-narrowed span,
    #weblog .hentry .banderole span
    {
        background: transparent;
        background-image: none;
        width: auto;
        display: inline;
        padding:0;
        margin:0;
    }

    .banderole-narrowed span
    {
        background-image: none;
    }

    .banderole span.end,
    .banderole-narrowed span.end
    {
        display:none;
    }
    
    div.pager .prev,
    div.pager .next
    {
        float: none;
        text-align: left;
        margin: 0 0 .3em 0;
    }
    
    div.pager .pages, 
    div.pager-simple .pages,
    .paginator
    {
        text-align: left;
        margin: 0;
    }
    
    .entry h3
    {
        width: 100%;
    }
    
    .margin-all
    {
        margin: 0;
    }
   
    #weblog #col3
    {
        display: none;
        /* Workaround until Weblog works */
    }
    #weblog #col2
    {
        float: none;
        width: 100%;
    }
    #ym-mobi {
      background: #cfcfcf;
      bottom: 0;
      display: block;
      font-size: .8em;
      margin: 0;
      opacity: .9;
      padding: 0;
      position: fixed;
      z-index: 3000;
      width: 100%;
    }
    #ym-mobi.ym-nope {
      display: none;
    }
    #ym-mobi a {
      color: #000;
      display: block;
      margin-left: 3em;
      padding: .5em 1.2em .5em 0;
    }
    #ym-mobi a.ym-mobi-close {
      background: transparent url(./../../images/ico-close-black.png) no-repeat 50% 50%;
      background-size: 11px 12px;
      display: block;
      height: 10px;
      left: 1.2em;
      margin-left: 0;
      padding: 0;
      position: absolute;
      top: .8em;
      width: 10px;
    }
    
}

@media screen and (max-width: 30em)
{
    /* 480 Pixel und kleiner */

    #col1 #sns
    {
        width: auto;
        float: none;
        margin-top: 0 !important;
        margin-bottom: 1em;
        overflow: hidden;
        padding: 0;
    }
    
    #col1 #events
    {
        margin-left: 0;
        margin-top: 0 !important;
        margin-bottom: 1em;
        overflow: hidden;
        padding: 0;
    }
    
    .himage
    {
        position: static;
        display: block;
        float: left;
        width: 25%;
        height: auto;
        margin: 0 20px 0 0;
    }
    
    .hentry
    {
        padding: 0;
        overflow: hidden;
    }
    
}

@media screen and (max-width: 21.25em)
{
    /* 340 Pixel und kleiner */

    .himage
    {
        display: none;
    }
    
}