@charset "UTF-8";

/* Begin: copyright.css */
/*!
 *  Sueddeutsche.de CSS Library
 *  ===========================
 *
 *  Copyright 2010, Sueddeutsche.de GmbH / Süddeutsche Zeitung GmbH
 *  All rights reserved.
 *
 *  ----------------------------------------------------------------------
 *
 *  Includes components of the Yahoo User Interface library used under
 *  license: http://developer.yahoo.com/yui/license.html
 *
 *  -   http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css
 *  -   http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css
 */

/* Begin: reset.css */
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
/**
 * YUI Reset
 * @module reset
 * @namespace
 * @requires 
 */
html {
	color: #000;
	background: #FFF;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,
img {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
optgroup {
	font-style: inherit;
	font-weight: inherit;
}

del,
ins {
	text-decoration: none;
}

li {
	list-style: none;
}

caption,
th {
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,
q:after {
	content: '';
}

abbr,
acronym {
	border: 0;
	font-variant: normal;
}

sup {
	vertical-align: baseline;
}

sub {
	vertical-align: baseline;
}

/*because legend doesn't inherit in IE */
legend {
	color: #000;
}

input,
button,
textarea,
select,
optgroup,
option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input,
button,
textarea,
select {
	*font-size: 100%;
}




/* Begin: fonts.css */
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
/**
 * YUI Fonts
 * @module fonts
 * @namespace yui-
 * @requires 
 */

/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	/* for IE6/7 */ 
	*font-size:small; 
	/* for IE Quirks Mode */
	*font:x-small; 
}

/**
 * Nudge down to get to 13px equivalent for these form elements
 */ 
select,
input,
button,
textarea,
button {
	font:99% arial,helvetica,clean,sans-serif;
}

/**
 * To help tables remember to inherit
 */
table {
	font-size:inherit;
	font:100%;
}

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,
code,
kbd,
samp,
tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}

/* Begin: decoration.css */
/**
 *  Base decorations
 *
 *  Core bits of presentation code.  Link colours, etc.
 */
/* body { */
    /* text-rendering: optimizeLegibility; */
/* } */


a {
    color:              #024282;
    text-decoration:    none;
}
    /* a:focus { */
        /* outline:    none; */
    /* } */

/**
 *  Error/Success
 */
.notification {
    background:     #EEE;
    border:         1px solid #999;
    font-weight:    700;
    padding:        0.5em 1.5em;
    text-align:     center;
}
.important, .body .important, .footer .important,
.error, .body .error, .footer .error {
    background:     #EADEDE;
    border:         0;
    color:          #C00;
}
.success, .body .success, .footer .success {
    background:     #CFC;
    border-color:   #9C9;
    color:          #060;
}

/**
 *  Offscreen Text
 *
 *  Visually, the text contained within `<span class="offscreen">` blocks is
 *  contextually unnecessary.  Screen-readers, however, will benefit from the
 *  additional context.
 *
 *  `.read-me` is also available for code that still uses it (mostly external
 *  html like the finance boxes).
 *  
 */
.offscreen, .read-me {
    left:       -999em;
    position:   absolute;
}


/**
 *  Ohther offscreen text variant
 *
 *  Visually, the text contained within `<span class="audible">` blocks is
 *  contextually unnecessary.  Screen-readers, however, will benefit from the
 *  additional context.
 *  As a addition to "offscreen" from above, child elements like 
 *  a img-tag will stll remain within a tag marked as audible.
 */
.audible {
    text-indent:   -999em;
}
    .ie .audible {
        font-size:     0;
    }



/**
 *  Bicubic resampling for IE6.
 *
 *  @workaround
 *  @affects    IE6/IE7
 *  @valid      no
 */
.ie img {
    -ms-interpolation-mode: bicubic;
}

/**
 *  CallToAction buttons (red, rounded corners, white text)
 */
input.cta,
button.cta,
a.cta, .sidebar li a.cta {
    background:     #B70000;
    border:         1px solid #922;
    color:          #FFF;
    display:        block;
    font-size:      93%;
    font-weight:    700;
    padding:        2px 5px 2px 5px;

    -webkit-border-radius:  4px;
    -moz-border-radius:     4px;
    border-radius:          4px;
}
    input.secondary,
    button.secondary,
    a.secondary, .sidebar li a.secondary {
        background:     #EEE;
        border-color:   #DDD;
        color:          #999;
    }
        .sidebar input.secondary,
        .sidebar button.secondary,
        .sidebar a.secondary, .sidebar li a.secondary {
            background: #FFF;
        }
            #articlesidebar input.secondary,
            #articlesidebar button.secondary,
            #articlesidebar a.secondary, #articlesidebar li a.secondary {
                background:     #EEE;
            }

    .ie input.cta, .ie button.cta, .ie a.cta {
        zoom:       1;
    }

    /* Remove extra paddings from input/buttons for IE6/7 */
    .ie6 input.cta,
    .ie6 button.cta,
    .ie7 input.cta,
    .ie7 button.cta {
        width:       auto;
        overflow:    visible;
    }

    /* Some special treatment for IE6/7 */
    .ie6 input.cta,
    .ie6 button.cta,
    .ie6 a.cta,
    .ie7 input.cta,
    .ie7 button.cta,
    .ie7 a.cta {
        border-style:     solid;
        border-width:     1px;
        padding:          1px 4px 1px 4px;
    }


    /**
     *  @HACK:  Working around 3px padding that Gecko adds to buttons
     *  @link:  http://stopdesign.com/archive/2009/02/04/recreating-the-button.html#comment-4379
     */
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        padding:        0;
        border-style:   none;
    }
        button:focus, input:focus {
            outline-width:  1px;
            outline-style:  dotted;
        }


/**
 * Checkboxes n' radios, horizontally centered.
 *
 * We have to work with a classname, bcause IE6s lack of attribute selector support
 * (input[type="checkbox"])
 */
input.checkbox,
input.radio {
    display:        inline-block;
    height:         1.2em;
    position:       relative;
    overflow:       hidden;
    top:            0.2em;
}
/* Get rid of extra margins in IE */
.ie input.checkbox,
.ie input.radio {
    top:            -0.2em;
    left:           -0.2em;
    margin-right:   -0.3em;
}

/* Begin: grid.css */
/**
 *  SDE Grid: Article 3.
 *
 *  Lays out the main structural elements of the page: sets up the page's
 *  width, the width of the main column and sidebar, the site and article
 *  header blocks, as well as the footer.
 *
 *  Pages are more or less laid out as:
 *
 *  <pre><code>
 *      <div id="wrapper">
 *          <div id="sdesiteheader"></div>
 *          <div class="maincolumn"></div>
 *          <ul class="sidebar"></ul>
 *          <div class="relatedcontent">
 *              <div class="maincolumn"></div>
 *              <ul class="sidebar"></div>
 *          </div>
 *      </div>
 *      <div id="sitefooter"></div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_grid
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

body, html {
    background:    #F3F3F3;
}
/**
 *  Yahoo Ad Wrapper
 *  
 *  Yahoo needs a wrapper div that contains the entire site's contents
 *  (so `wrapper` doesn't work, as the site footer is just outside of
 *  it's range), has the proper width (880px), uniquely identifies S.de,
 *  and is relatively positioned.  So, here it is: `#sueddeutsche`
 */
#sueddeutsche {
    position:   relative;
    width:      892px;
}

/**
 *  Wrapper
 *
 *  This div wraps the entire site, setting the maximum width to 860px.
 *
 */
    #wrapper, #sdesiteheader {
        position:   relative;
        width:      860px;
        margin:     0;
    }
        #wrapper {
            background:         #FFF;
            padding:            0 16px 10px;
            z-index:            2;

            -webkit-box-shadow:  0px 0px 10px #CCC;
            -moz-box-shadow:    0px 0px 10px #CCC;
            box-shadow:         0px 0px 10px #CCC; 
        }
            #wrapper:after {
                content:    ".";
                display:    block;
                height:     0;
                clear:      both;
                visibility: hidden;
            }
            .ie #wrapper {
                border:     1px solid #CCC;
                padding:    0 15px 10px;
                zoom:       1;
            }
        #sdesiteheader {
            margin: 0;
        }
        #wrapper .article {
            overflow:   hidden;
            margin-top: -6px;
        }
/**
 *  Site Header
 *
 *  The site header fills the page's entire width
 */
    #siteheader {
        width:  100%;
    }
        #siteheader:after {
            content:        ".";
            display:        block;
            clear:          both;
            visibility:     hidden;
            line-height:    0;
            height:         0;
        }
/**
 *  Article Main Column
 *
 *  The main content column sits to the left of the sidebar, and is 536px wide
 */
    #contentcolumn, #relatedmaincolumn, .maincolumn {
        clear:          both;
        float:          left;
        width:          536px;
        margin-bottom:  15px;
    }
/**
 *  Sidebar Column
 *
 *  The sidebar column sits to the right of the main content, and is 300px wide
 */
    #articlesidebar, #relatedsidebar, .sidebar {
        width:          300px;
        float:          right;
        margin-bottom:  15px;
    }

/**
 *  Related Content Box
 *  @HACK: Couldn't get IE6+7 to cooperate with me ( http://www.brunildo.org/test/IEWfc3.html )
 *  @TODO: Remove this?  Eventually?  When I'm cleverer?
 */
    #relatedcontent {
        clear:      both;
    }

/**
 *  Site footer
 *
 *  Clears the floats of the two inner columns, and spans the page width.
 */
    #sitefooter {
        clear:      both;
        position:   relative;
        width:      100%;
        z-index:    1;
    }

/**
 *  Related Sidebar (Homepage)
 *  
 *  On the homepage, the related sidebar should be pushed down a bit to visually
 *  line up with the top of the Image of the Day module
 */
.homepage #secondarysidebar {
    margin-top: 34px;
}

/* Begin: sidebar.css */
/**
 *  SDE Sidebar
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_sidebar
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.sidebar {
    width:  300px;
}
li.module {
    clear:  both;
}
.sidebar li.module {
    margin-bottom: 15px;
}
    .sidebar li.ad {
        margin-bottom:  0px;
    }

/**
 *  "Full Column" sidebars share normal sidebar's grouping of modules, but spread
 *  them horizontally across the page instead of vertically.
 *  @section Full Column
 */
.full-column li.module {
    clear:          none;
    float:          left;
    margin-left:    16px;
}
    .full-column li.first {
        margin-left:    0;
    }

/* Begin: siteheader.css */
/**
 *  SDE Site Header
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_siteheader
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

/**
 *  Site Header
 *
 *  *   Setting position relative so that I can bring the external links up
 *      to the top of the box without effecting their source position
 *
 *  *   Adding padding to the top of the box for the same reason.
 */
#sdesiteheader {
    margin:         0 0 20px;
    overflow:       visible;
}
.siteheader {
    position:       relative;
    padding-top:    20px;
}
    .ie .siteheader {
        zoom:   1;
    }
    .siteheader:after, .siteheader .body:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    /**
     *  Every list in the header is displayed as a flat, horizontal block.
     */
    .siteheader li, .siteheader ul {
        display:    inline;
    }
    /**
     *  Body completes the border:
     */
    .siteheader .body {
        overflow:       visible;
        border-bottom:  1px solid #CCC;
    }
        .ie .siteheader .body {
            zoom:       1;
            overflow:   hidden;
        }
        .siteheader .body img {
            border:         1px solid #CCC;
            border-width:   0 1px;
            display:        block;
        }

/**
 *  Time
 *
 */
    #sdesiteheader .currenttime {
        color:          #999;
        font-size:      85%;
        position:       absolute;
        padding-left:   7px;
    }
/**
 *  Logo Region
 *
 *  Contains the logo and the "Welcome" text with today's date/time.
 *  The latter will be absolutely positioned up to the top-left of the box.
 */
    .siteheader .header {
        background:     #EEE;
        border:         1px solid #CCC;
        border-bottom:  0;
        height:         63px;
        position:       relative;
    }

    .siteheader .header .logo a {
        background:     url(/static_assets/build/img/site/logo-sde-black-320px.9ea3869c.png) no-repeat top left;
        display:        block;
        height:         27px;
        margin:         17px 0 0 20px;
        text-indent:    -999em;
        width:          318px;
    }
    .siteheader .header p {
        color:          #CCC;
        font-size:      77%;
        left:           0;
        position:       absolute;
        top:            3px;
    }
    /**
     *  Search Form
     */
    .siteheader .header form {
        position:   absolute;
        right:      5px;
        top:        27px;
    }
        .siteheader #q {
            border:     1px solid #DDD;
            color:      #666;
            height:     18px;
            position:   relative;
            top:        1px;
            width:      215px;
        }
            .ie .siteheader #q {
                top:    0;
            }
        .siteheader label {
            color:          #888;
            font-size:      109%;
            font-weight:    700;
            position:       relative;
            top:            1px;
        }
        .siteheader .submit {
            background:     url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px -300px;
            border:         0;
            height:         22px;
            padding:        0;
            position:       relative;
            top:            1px;
            text-indent:    -999em;
            width:          22px;
        }
            .ie67 .siteheader .submit {
                /*  @HACK: IE6/7 don't support text-indent in the way I need it here. */
                font-size:      0;
                line-height:    0;
            }
    /**
     *  Web Two Point Oh.
     */
    .siteheader .webtwopointoh {
        position:   absolute;
        right:      30px;
        top:        32px;
    }
        .ie67 .siteheader .webtwopointoh {
            right:  27px;
        }
        .siteheader .webtwopointoh a {
            background:    url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px -220px;
            display:       block;
            float:         left;
            height:        12px;
            margin-right:  3px;
            text-indent:   -999em;
            width:         12px;
        }
        .siteheader .webtwopointoh .rss a {
            background-position:   -40px -220px;
        }
        .siteheader .webtwopointoh .facebook a {
            background-position:   -20px -220px;
        }
/**
 *  Site-level Navigation
 *
 *  A list of the site's Ressorts for navigation through the site's major
 *  categories.
 */
    .siteheader .sitenav {
        background:     #252115;
        border:         1px solid #CCC;
        border-width:   0 1px;
        display:        block;
        line-height:    1;
        margin:         0;
        overflow:       hidden;
        padding:        2px 0;
    }
        .ie67 .siteheader .sitenav {
            padding:    3px 0;
            zoom:       1;
        }
        .siteheader .sitenav a {
            color:          #FFF;
            display:        inline-block;
            font-size:      93%;
            overflow:       hidden;
            padding:        3px 3px 3px 7px;
            line-height:    1.2;
            position:       relative;
            text-align:     center;
            vertical-align: middle;
        }
            .ie67 .siteheader .sitenav a {
                /* @HACK: IE6 is miserable at padding.  It makes no sense. */
                top:        0px;
                padding:    0px 7px;
                display:    inline;
                zoom:       1;
            }
        .siteheader .sitenav li {
            border-left:    1px solid #666;
            display:        inline;
            position:       relative;
        }
            .ie67 .siteheader .sitenav li {
                display:    inline;
                zoom:       1;
            }
            .siteheader .sitenav .first {
                border:     0;
            }
            /* .siteheader .sitenav .politik-link      {  width:  37px; } */
            /* .siteheader .sitenav .wirtschaft-link   {  width:  60px; } */
            /* .siteheader .sitenav .geld-link         {  width:  30px; } */
            /* .siteheader .sitenav .kultur-link       {  width:  35px; } */
            /* .siteheader .sitenav .sport-link        {  width:  35px; } */
            /* .siteheader .sitenav .leben-link        {  width:  35px; } */
            /* .siteheader .sitenav .karriere-link     {  width:  45px; } */
            /* .siteheader .sitenav .muenchen-link     {  width:  55px; } */
            /* .siteheader .sitenav .bayern-link       {  width:  40px; } */
            /* .siteheader .sitenav .panorama-link     {  width:  60px; } */
            /* .siteheader .sitenav .auto-link         {  width:  25px; } */
            /* .siteheader .sitenav .digital-link      {  width:  35px; } */
            /* .siteheader .sitenav .wissen-link       {  width:  40px; } */
            /* .siteheader .sitenav .fitness-link      {  width:  40px; } */
/**
 *  Breadcrumb Navigation
 *
 *  Displays links to the homepage, to the page's Ressort, and the page's
 *  Theme.
 */
    .siteheader .breadcrumb {
        background:             #666 url(/static_assets/build/img/sdesiteheader/breadcrumb-end.740c515b.png) no-repeat right top;
        border:                 1px solid #CCC;
        border-width:           0 0 0 1px;
        display:                block;
        float:                  left;
        height:                 25px;
        padding-right:          10px;
    }
        .siteheader ul.breadcrumb {
            border-left-color:  #CCC;
        }
        .ie67 .siteheader .breadcrumb {
            /* HACK: IE6/7 can't deal with PNG24 */
            background-image:       url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png);
            background-position:    right -200px;
        }
        .siteheader .breadcrumb li {
            background: url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px -341px;
            display:    block;
            float:      left;
        }
        .siteheader .breadcrumb li.first {
            background: none;
        }
            .siteheader .breadcrumb li.first a {
                padding-left:   5px;
            }
        .siteheader .breadcrumb a, .siteheader .breadcrumb h1, .siteheader .breadcrumb span {
            color:          #FFF;
            display:        block;
            float:          left;
            font-size:      108%;
            font-weight:    700;
            padding:        4px 5px 0 12px;
        }

/**
 *  Page-level navigation
 *
 *  Displays the links associated with the current document's position in the
 *  system: sport documents get sport links, forumla 1 documents get forumla
 *  1 links.
 *
 */
    .siteheader .pagenav {
        background-color:   #FFF;
        display:            block;
        float:              left;
        font-size:          93%;
        height:             1.3em;
        margin:             0;
        overflow:           hidden;
        padding:            6px 0 0;
    }
        .siteheader .pagenav li {
            border-left:    1px solid #CCC;
            white-space:    nowrap;
        }
        .siteheader .pagenav li.first {
            border-left:    0;
        }


        .siteheader .pagenav a {
            padding:    0 5px;
        }

/**
 *  Featured links/ads
 *
 */
    .siteheader .features {
        display:    block;
        max-height: 14px;
        margin:     0;
        padding:    6px 0 0;
        position:   absolute;
        right:      0;
        text-align: right;
    }
        .siteheader .features a {
            background: url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px 5px;
            color:      #333;
            overflow:   visible;
            padding:    0 4px 0 9px;
        }
            .siteheader .features .ad {
                border-left:    1px solid #CCC;
                bottom:         0.4em;
                display:        block;
                float:          left;
            }
                .siteheader .features .first {
                    border-left:    0;
                }
                .ie67 .siteheader .features .ad {
                    bottom:     0.3em;
                }
            .siteheader .features .ad a {
                background:     none;
                color:          #666;
                font-weight:    700;
                padding:        0 4px;
                position:       relative;
            }
                .siteheader .features .last a {
                    padding-right:  0;
                }
            .siteheader .features .ad span {
                display:    none;

                border:         1px solid #CCC;
                background:     #EEE;
                font-weight:    400;
                position:       absolute;
                text-align:     center;
                top:            1.2em;
                right:          0;
                width:          100%;
            }
            .siteheader .features .ad a:hover span {
                display:    block;
            }
/**
 *  Random links that no one really clicks on or likes at all.
 *
 */
    .siteheader .footer {
        font-size:  85%;
        position:   absolute;
        top:        3px;
        left:       0px;
        width:      100%;
    }
        .homepage .siteheader .footer {
            top:    2px;
        }
        .siteheader .footer li, .siteheader .footer ul, .siteheader .footer a {
            color:      #666;
        }
        .siteheader .markets a {
            background: url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px 4px;
            padding:    0 4px 0 9px; 
        }

        .siteheader .services li {
            border-left:    1px dotted #BBB;
            padding:        0 4px 0 6px;
        }
        .siteheader .services li.first {
            border:         none;
        }
/**
 *  Weitere Services
 *  @section Services
 */
    .siteheader .weitere {
        display:    inline;
        position:   relative;
        top:        0;
    }
        /* .siteheader  #weiterebox.visible { */
            /* background: #CCC; */
        /* } */
            /* .siteheader #weiterebox.visible .toggle { */
                /* background-color:   #CCC; */
                /* color:              #000; */
            /* } */
        .siteheader  #weiterebox .toggle {
            background:     #FFF url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat right 3px;
            border:         0;
            margin:         0;
            padding-right:  8px;
            cursor:         pointer;
            color:          #666;
        }
        .siteheader .weitere #weiterepanel {
            display:    none;
        }
        .siteheader .weitere li {
            border-left:    1px dotted #BBB;
            margin:         0;
            padding:        0 4px 0 6px;
        }

/**
 *  Logout Form
 *  @section Logout
 */
.siteheader .logout {
    position:   absolute;
    right:      0;
}
    .siteheader .logout form {
        border-left:    1px dotted #BBB;
        display:        inline;
        margin:         0 0 0 2px;
        padding:        0 0 0 6px;
    }
        .siteheader .logout form input {
            background:     #FFF;
            border:         0;
            color:          #666;
        }
    .homepage .siteheader .logout {
        top:    3px;
    }
/**
 *  Login Form without JavaScript
 *  @section Login
 */
#login {
    background: #FFF;
    border:     1px solid #999;
    position:   absolute;
    right:      0;
    top:        0;
    width:      300px;
}
    #login label {
        color:      #666;
    }
    #login .body {
        background: #CCC;
    }
    #login .footer {
        left:       0;
        position:   relative;
        top:        0;
    }

#konto {
    background: #FFF;
    border:     1px solid #999;
    float:      right;
    margin:     0;
    padding:    0;
    position:   absolute;
    display:    inline;
}
    #konto {
        color:      #666;
    }
/**
 *  Login Form with JavaScript
 *  @section Login JS
 */
.js #login_toggle, .js #konto_toggle {
    background:     #FFF url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat right 4px;
    border:         0;
    color:          #666;
    cursor:         pointer;
    font-weight:    700;
    padding:        1px 7px 0 0;
    position:       absolute;
    right:          2px;
    top:            0;

}
    .js .ie67 #login_toggle, .js .ie67 #konto_toggle {
        width:         35px;   /* HACK: IE requires a width here; absolute positioning isn't enough. */
    }
        .js .ie67 #login_toggle, .js .ie67 #konto_toggle {
            padding-top:    0;
            top:    -1px;
        }
.js #login, .js #konto {
    display:    none;
    outline:    0;
    padding:    5px;
    width:      140px;
    z-index:    5;
}
    .js #login .body, .js #konto .body {
        overflow:   hidden;
        padding:    5px 5px 3px;
    }
    .js #login input, .js #konto input {
        border:     1px solid #999;
        display:    block;
        margin:     3px 0;
        width:      128px;
    }
        .js #login input[type="hidden"] { display: none; }
        .js #konto input[type="hidden"] { display: none; }
        .js #login .submit, .js #konto .submit {
            background:             #B20000;
            border:                 1px solid #B20000;
            -moz-border-radius:     3px;
            -webkit-border-radius:  3px;
            border-radius:          3px;
            color:                  #FFF;
            float:                  right;
            font-size:              90.9%;
            padding:                2px 2px; 
            width:                  auto;
        }
    .js #login .footer ul, .js #konto .footer ul {
        padding:    3px;
        margin:     0;
    }
    .js #login .footer li, .js #konto .footer li {
        background: url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px 5px;
        display:    block;
        font-size:  86%;
        height:     18px;
        margin:     4px 0 0;
        padding:    0 4px 0 9px;
    }
    
    .js #konto .footer .button {
      background-color: #fff;
      border:  none;
      color:   #024282;
      cursor:  pointer;
      float:   none;
      margin:  0;
      padding: 0;
      width:   auto;
    }
/**
 *  Weitere Angebote Panel
 *  @section WeitereAngebote JS
 */
#weiterepanel {
    background: #CCC;
    position:   absolute;
    right:      0;
    top:        0;
    width:      12em;
    z-index:    5;

    -moz-box-shadow:    2px 2px 5px #999;
    -webkit-box-shadow: 2px 2px 5px #999;
    box-shadow:         2px 2px 5px #999;


}
    #weiterepanel li {
        background: url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px 5px;
        display:    block;
        margin:     4px 0 0;
        padding:    0 4px 0 9px;
    }
        #weiterepanel li a {
            color:  #142F44;
        }
    #weiterepanel ul {
        background: #FFF;
        margin:     5px;
        padding:    5px 5px;
    }
        #weiterepanel ul ul {
            padding:    0 10px;
        }
/**
 *  Specials Styles
 *
 *  "Specials" need a smaller logo area, a smaller logo, and drop the `webtwopointoh` block.
 *  
 *  @section Specials
 */
    #sdesiteheader.special .header {
        height: 45px;
    }
        #sdesiteheader.special .header .logo a {
            background: url(/static_assets/build/img/sdesiteheader/sde-logo-black-230.de649f07.png) no-repeat left top;
            margin-top: 12px;
        }
        #sdesiteheader.special .webtwopointoh {
            display:    none;
        }
        #sdesiteheader.special .header form {
            top:    15px;
        }
/**
 *  Homepage Styles
 *
 *  The header displays differently on the homepage: override the default
 *  styles in this section to achieve that.
 *  
 *  @section    Homepage
 */
.homepage .siteheader {
    padding-top:    20px;
}
    /**
     *  Logo/Header
     */
    .homepage .siteheader .header {
        background: #111 url(/static_assets/build/img/sdesiteheader/homepage-background.f197a37d.png) repeat-x left top;
        height:     75px;
    }
        .homepage .siteheader .header .logo {
            background:     url(/static_assets/build/img/sdesiteheader/sde-logo-white-330.9743deba.png) no-repeat left top;
            display:        block;
            height:         28px;
            margin:         22px 0 0 20px;
            text-indent:    -999em;
            width:          330px;
        }

    /**
     *  Ressort Navigation
     */
    .homepage .siteheader .sitenav {
        background: #315A7A;
        border-top: 1px solid #387296;
    }
        .ie67 .siteheader .sitenav {
            border-left:    0;
            margin-left:    1px;
        }
    .homepage #sdesiteheader .sitenav li a,
    .homepage #sdesiteheader .sitenav li a:hover,
    #sdesiteheader.homepage .sitenav li a,
    #sdesiteheader.homepage .sitenav li a:hover {
        color:      #FFF;
    }
    /**
     *  Not-Ressort Navigation
     */
    .homepage .siteheader .pagenav {
        border:         none;
        float:          left;
        padding-bottom: 2px;
    }
    .homepage .siteheader .pagenav li {
        border: none;
    }
        .homepage .siteheader .pagenav li.first a {
            font-weight:    700;
            margin-left:    2px;
        }
    .homepage .siteheader .pagenav a {
        color:  #333;
    }
    .homepage .siteheader .features {
        padding-bottom: 6px;
    }
    /**
     *  Market Tabs
     *
     */
    .homepage .markets {
        float:      left;
        margin:     0;
        padding:    0;
    }
    .homepage .siteheader .markets li {
        background: #CCC url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat left -100px;
        display:    block;
        float:      left;
        margin:     0 1px 0 0;
        padding:    0 0 0 2px;
    } 
    .homepage .siteheader .markets a {
        background:     url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat right -100px;
        color:          #333;
        display:        block;
        font-weight:    700;
        padding:        3px 5px 2px 3px; 
    }

    .homepage .siteheader .services {
        margin:     0 0 0 3px;
        padding:    0;
        position:   relative;
        top:        3px;
    }
    .homepage .siteheader .weitere {
        top:        3px;
    }
    /**
     *  Search
     */
    .homepage .siteheader .header form {
        top: 32px;
    }
    /**
     *  Web Two Point Oh.
     */
    .homepage .siteheader .webtwopointoh {
        top:    38px;
    }
    .homepage .siteheader .webtwopointoh a {
        background:    url(/static_assets/build/img/sdesiteheader/sprite.e7b31aad.png) no-repeat 0px -200px;
    }
        .homepage .siteheader .webtwopointoh .rss a {
            background-position:   -40px -200px;
        }
        .homepage .siteheader .webtwopointoh .facebook a {
            background-position:   -20px -200px;
        }

    .js .homepage #login_toggle, .js .homepage #konto_toggle {
        top: 2px;
    }
        .js .ie67 #login_toggle, .js .ie67 #konto_toggle {
            top:    0px;
        }

/**
 *  Muenchen Special
 *
 *  @section Muenchen
 */
    /**
     *  Logo/Header
     */
    .muenchen .siteheader .header {
        /* Commented out for `[SDE-916]`: @TODO: Determine if we still need any of the `muenchen` styles. */
        /* background:     #111 url(/static_assets/build/img/sdesiteheader/munich-background.f9f45b0b.png) repeat-x left top; */
        padding-bottom: 0;
    }
        .muenchen .siteheader .header .logo a {
            background: url(/static_assets/build/img/sdesiteheader/munich-logo-black-260.82544b47.png) no-repeat left top;
            height:     43px;
            margin-top: 11px;
            width:      265px;
        }
    .muenchen .breadcrumb {
        background-color:   #999;
    }
        .muenchen .pagenav a {
            font-family:    Georgia, Serif;
        }
    .muenchen .siteheader label {
        position:   absolute;
        left:       -999em;
    }

/* Begin: sitefooter.css */
/**
 *  SDE Site Footer
 *
 *  Appearing on every page of the site, outside the `wrapper` div.  Contains
 *  each Department, as well as a few hard-coded links to helpful places like
 *  "Impressum" or "Kontakt"
 *
 *  Markup is as follows:
 *
 *
 *      <div id="sitefooter" class="footer">
 *          <ul>
 *              <li class="first"><a href="http://www.sueddeutsche.de">Nachrichten</a></li>
 *              ...
 *              <li class="last"><a href="/cmlink/sueddeutsche-de/fitness">Fitness</a></li>
 *          </ul>
 *          <ul>
 *              <li class="first"><a href="http://www.sueddeutsche.de/mediadaten">Mediadaten</a></li>
 *              ...
 *              <li class="last"><a href="http://www.sueddeutsche.de/praktika">Praktika</a></li>
 *          </ul>
 *          <p>Copyright &copy; sueddeutsche.de GmbH / S&uuml;ddeutsche Zeitung GmbH</p>
 *          <p>
 *              Artikel der S&uuml;ddeutschen Zeitung lizenziert durch DIZ
 *              M&uuml;nchen GmbH. Weitere Lizenzierungen exklusiv &uuml;ber
 *              <a href="http://www.diz-muenchen.de" target="_blank">www.diz-muenchen.de</a>
 *          </p>
 *      </div>     
 *
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_sitefooter
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
#sitefooter {
    background: #F3F3F3;
    color:      #333;
    font-size:  83%;
    padding:    15px 0;
    width:      auto;
    z-index:    1;
}
    /**
     *  Link lists
     *
     *  @section    links
     */
    #sitefooter ul {
        clear:      both;
        display:    block;
        margin:     0 auto;
        padding:    1em 0;
        text-align: center;
        width:      650px;
    }
        #sitefooter li {
            display:   inline;
            padding:   0 5px;
        }
        #sitefooter a, #sitefooter a:visited {
            color:   #024282;
        }
    /**
     *  Exciting footer text
     *
     *  @section    text
     */
    #sitefooter p {
        font-size:  90.9%;
        margin:     10px 0;
        text-align: center;
    }

/* Begin: pagefooter.css */
/**
 *  SDE Page Footer
 *
 *  At the moment, this footer appears only on the homepage and overview
 *  pages, rendering an "archive" link and search box just inside the 
 *  `wrapper` div.
 *  
 *  Markup is as follows:
 *
 *      <div id="pagefooter" class="footer">
 *          <a href="#TODO" class="archivelink"><span>SZ Archiv</span> &ndash; Recherchieren Sie im Archiv der Süddeutschen Zeitung</a>
 *          <form action="#TODO">
 *              <div>
 *                  <label for="footer-query">Suche</label>
 *                  <input type="search" placeholder="Suche" value="" size="40" id="footer-query" name="q">
 *                  <input type="hidden" value="sde" name="source" id="source">
 *                  <input type="submit" class="searchsubmit" value="Finden">
 *              </div>
 *          </form>
 *      </div> 
 *
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_pagefooter
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
#pagefooter {
    clear:      both;
    font-size:  83%;
    overflow:   hidden;
    padding:    10px 0 0;
}
    /**
     *  SZ Archive Link
     *
     *  @section    Archive
     */
    #pagefooter .archivelink {
        color:          #333;
        float:          left;
        margin:         3px 0 0;
    }
        #pagefooter .archivelink span {
            font-weight:    700;
        }

    /**
     *  Search form
     *
     *  @section search
     */
    #pagefooter form {
        float:      right;
    }
        #pagefooter label {
            color:          #999;
            font-size:      109.1%;
            font-weight:    700;
        }
        #footer-query {
            font-size:      108%;
            margin:         0 5px 0 10px;
            padding:        1px;
            width:          200px;
        }
        .ie #footer-query {
            font-size:      100%;
        }
        #pagefooter .submit {
            display:        inline; 
            position:       relative;
            top:            -1px;
        }
        .ie6 #pagefooter .submit,
        .ie7 #pagefooter .submit {
            top:            0;
            padding-top: 1px;
        }

/* Begin: colors-ressort.css */

/**
 *  SDE Ressort Colors
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_colors_ressort
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
/**
 *  Defaults.
 *  @section Defaults
 */
.specialcolor {
    background:     #FFF;
    border-color:   #CCC;
}



/**
 *  Panorama
 *
 *  Light color:    #AF8FFC;
 *  Dark color:     #67519D;
 *
 *  @section    Panorama
 */
.panorama .specialcolor {
    background-color:   #67519D;
    border-color:       #67519D;
}
.panorama .pagenav a {
    color:  #67519D;
}
.panorama .ressorttitle a:hover {
    color:  #67519D;
}
#sdesiteheader .panorama-link:hover,
.panorama #sdesiteheader .panorama-link,
#sdesiteheader.panorama .panorama-link {
    color:          #AF8FFC;
}
#sdesiteheader.panorama .siteheader .panorama-link {
    font-weight:    700;
}
    

/**
 *  Medien
 *
 *  Light color:    #09C8DF;
 *  Dark color:     #00A0B8;
 *
 *  @section    Medien
 */
.medien .specialcolor {
    background-color:   #00A0B8;
    border-color:       #00A0B8;
}
.medien .pagenav a {
    color:  #00A0B8;
}
.medien .ressorttitle a:hover {
    color:  #00A0B8;
}
#sdesiteheader .medien-link:hover,
.medien #sdesiteheader .medien-link,
#sdesiteheader.medien .medien-link {
    color:          #09C8DF;
}
#sdesiteheader.medien .siteheader .medien-link {
    font-weight:    700;
}
    

/**
 *  Bayern
 *
 *  Light color:    #4B87FE;
 *  Dark color:     #4379E3;
 *
 *  @section    Bayern
 */
.bayern .specialcolor {
    background-color:   #4379E3;
    border-color:       #4379E3;
}
.bayern .pagenav a {
    color:  #4379E3;
}
.bayern .ressorttitle a:hover {
    color:  #4379E3;
}
#sdesiteheader .bayern-link:hover,
.bayern #sdesiteheader .bayern-link,
#sdesiteheader.bayern .bayern-link {
    color:          #4B87FE;
}
#sdesiteheader.bayern .siteheader .bayern-link {
    font-weight:    700;
}
    

/**
 *  Wirtschaft
 *
 *  Light color:    #CF5D1F;
 *  Dark color:     #BA5924;
 *
 *  @section    Wirtschaft
 */
.wirtschaft .specialcolor {
    background-color:   #BA5924;
    border-color:       #BA5924;
}
.wirtschaft .pagenav a {
    color:  #BA5924;
}
.wirtschaft .ressorttitle a:hover {
    color:  #BA5924;
}
#sdesiteheader .wirtschaft-link:hover,
.wirtschaft #sdesiteheader .wirtschaft-link,
#sdesiteheader.wirtschaft .wirtschaft-link {
    color:          #CF5D1F;
}
#sdesiteheader.wirtschaft .siteheader .wirtschaft-link {
    font-weight:    700;
}
    

/**
 *  Service
 *
 *  Light color:    #666666;
 *  Dark color:     #666666;
 *
 *  @section    Service
 */
.Service .specialcolor {
    background-color:   #666666;
    border-color:       #666666;
}
.Service .pagenav a {
    color:  #666666;
}
.Service .ressorttitle a:hover {
    color:  #666666;
}
#sdesiteheader .Service-link:hover,
.Service #sdesiteheader .Service-link,
#sdesiteheader.Service .Service-link {
    color:          #666666;
}
#sdesiteheader.Service .siteheader .Service-link {
    font-weight:    700;
}
    

/**
 *  Auto
 *
 *  Light color:    #C29202;
 *  Dark color:     #AB8000;
 *
 *  @section    Auto
 */
.auto .specialcolor {
    background-color:   #AB8000;
    border-color:       #AB8000;
}
.auto .pagenav a {
    color:  #AB8000;
}
.auto .ressorttitle a:hover {
    color:  #AB8000;
}
#sdesiteheader .auto-link:hover,
.auto #sdesiteheader .auto-link,
#sdesiteheader.auto .auto-link {
    color:          #C29202;
}
#sdesiteheader.auto .siteheader .auto-link {
    font-weight:    700;
}
    

/**
 *  Reise
 *
 *  Light color:    #BA94D9;
 *  Dark color:     #8A6EA1;
 *
 *  @section    Reise
 */
.reise .specialcolor {
    background-color:   #8A6EA1;
    border-color:       #8A6EA1;
}
.reise .pagenav a {
    color:  #8A6EA1;
}
.reise .ressorttitle a:hover {
    color:  #8A6EA1;
}
#sdesiteheader .reise-link:hover,
.reise #sdesiteheader .reise-link,
#sdesiteheader.reise .reise-link {
    color:          #BA94D9;
}
#sdesiteheader.reise .siteheader .reise-link {
    font-weight:    700;
}
    

/**
 *  Digital
 *
 *  Light color:    #4DA0C7;
 *  Dark color:     #2A576C;
 *
 *  @section    Digital
 */
.digital .specialcolor {
    background-color:   #2A576C;
    border-color:       #2A576C;
}
.digital .pagenav a {
    color:  #2A576C;
}
.digital .ressorttitle a:hover {
    color:  #2A576C;
}
#sdesiteheader .digital-link:hover,
.digital #sdesiteheader .digital-link,
#sdesiteheader.digital .digital-link {
    color:          #4DA0C7;
}
#sdesiteheader.digital .siteheader .digital-link {
    font-weight:    700;
}
    

/**
 *  Meinung
 *
 *  Light color:    #CC0000;
 *  Dark color:     #CC0000;
 *
 *  @section    Meinung
 */
.meinung .specialcolor {
    background-color:   #CC0000;
    border-color:       #CC0000;
}
.meinung .pagenav a {
    color:  #CC0000;
}
.meinung .ressorttitle a:hover {
    color:  #CC0000;
}
#sdesiteheader .meinung-link:hover,
.meinung #sdesiteheader .meinung-link,
#sdesiteheader.meinung .meinung-link {
    color:          #CC0000;
}
#sdesiteheader.meinung .siteheader .meinung-link {
    font-weight:    700;
}
    

/**
 *  Themes
 *
 *  Light color:    #70B2D8;
 *  Dark color:     #5BA5D0;
 *
 *  @section    Themes
 */
.thema .specialcolor {
    background-color:   #5BA5D0;
    border-color:       #5BA5D0;
}
.thema .pagenav a {
    color:  #5BA5D0;
}
.thema .ressorttitle a:hover {
    color:  #5BA5D0;
}
#sdesiteheader .thema-link:hover,
.thema #sdesiteheader .thema-link,
#sdesiteheader.thema .thema-link {
    color:          #70B2D8;
}
#sdesiteheader.thema .siteheader .thema-link {
    font-weight:    700;
}
    

/**
 *  Muenchen
 *
 *  Light color:    #4B87FE;
 *  Dark color:     #6F98AA;
 *
 *  @section    Muenchen
 */
.muenchen .specialcolor {
    background-color:   #6F98AA;
    border-color:       #6F98AA;
}
.muenchen .pagenav a {
    color:  #6F98AA;
}
.muenchen .ressorttitle a:hover {
    color:  #6F98AA;
}
#sdesiteheader .muenchen-link:hover,
.muenchen #sdesiteheader .muenchen-link,
#sdesiteheader.muenchen .muenchen-link {
    color:          #4B87FE;
}
#sdesiteheader.muenchen .siteheader .muenchen-link {
    font-weight:    700;
}
    

/**
 *  Geld
 *
 *  Light color:    #E94C2D;
 *  Dark color:     #BA3D24;
 *
 *  @section    Geld
 */
.Geld .specialcolor {
    background-color:   #BA3D24;
    border-color:       #BA3D24;
}
.Geld .pagenav a {
    color:  #BA3D24;
}
.Geld .ressorttitle a:hover {
    color:  #BA3D24;
}
#sdesiteheader .Geld-link:hover,
.Geld #sdesiteheader .Geld-link,
#sdesiteheader.Geld .Geld-link {
    color:          #E94C2D;
}
#sdesiteheader.Geld .siteheader .Geld-link {
    font-weight:    700;
}
    

/**
 *  Leben
 *
 *  Light color:    #E94E97;
 *  Dark color:     #9C3465;
 *
 *  @section    Leben
 */
.leben .specialcolor {
    background-color:   #9C3465;
    border-color:       #9C3465;
}
.leben .pagenav a {
    color:  #9C3465;
}
.leben .ressorttitle a:hover {
    color:  #9C3465;
}
#sdesiteheader .leben-link:hover,
.leben #sdesiteheader .leben-link,
#sdesiteheader.leben .leben-link {
    color:          #E94E97;
}
#sdesiteheader.leben .siteheader .leben-link {
    font-weight:    700;
}
    

/**
 *  Karriere
 *
 *  Light color:    #B1BB0C;
 *  Dark color:     #A0A90D;
 *
 *  @section    Karriere
 */
.karriere .specialcolor {
    background-color:   #A0A90D;
    border-color:       #A0A90D;
}
.karriere .pagenav a {
    color:  #A0A90D;
}
.karriere .ressorttitle a:hover {
    color:  #A0A90D;
}
#sdesiteheader .karriere-link:hover,
.karriere #sdesiteheader .karriere-link,
#sdesiteheader.karriere .karriere-link {
    color:          #B1BB0C;
}
#sdesiteheader.karriere .siteheader .karriere-link {
    font-weight:    700;
}
    

/**
 *  Multimedia
 *
 *  Light color:    #697786;
 *  Dark color:     #697786;
 *
 *  @section    Multimedia
 */
.multimedia .specialcolor {
    background-color:   #697786;
    border-color:       #697786;
}
.multimedia .pagenav a {
    color:  #697786;
}
.multimedia .ressorttitle a:hover {
    color:  #697786;
}
#sdesiteheader .multimedia-link:hover,
.multimedia #sdesiteheader .multimedia-link,
#sdesiteheader.multimedia .multimedia-link {
    color:          #697786;
}
#sdesiteheader.multimedia .siteheader .multimedia-link {
    font-weight:    700;
}
    

/**
 *  Politik
 *
 *  Light color:    #4680EC;
 *  Dark color:     #2E549B;
 *
 *  @section    Politik
 */
.politik .specialcolor {
    background-color:   #2E549B;
    border-color:       #2E549B;
}
.politik .pagenav a {
    color:  #2E549B;
}
.politik .ressorttitle a:hover {
    color:  #2E549B;
}
#sdesiteheader .politik-link:hover,
.politik #sdesiteheader .politik-link,
#sdesiteheader.politik .politik-link {
    color:          #4680EC;
}
#sdesiteheader.politik .siteheader .politik-link {
    font-weight:    700;
}
    

/**
 *  Fitness
 *
 *  Light color:    #70B2D8;
 *  Dark color:     #5BA5D0;
 *
 *  @section    Fitness
 */
.fitness .specialcolor {
    background-color:   #5BA5D0;
    border-color:       #5BA5D0;
}
.fitness .pagenav a {
    color:  #5BA5D0;
}
.fitness .ressorttitle a:hover {
    color:  #5BA5D0;
}
#sdesiteheader .fitness-link:hover,
.fitness #sdesiteheader .fitness-link,
#sdesiteheader.fitness .fitness-link {
    color:          #70B2D8;
}
#sdesiteheader.fitness .siteheader .fitness-link {
    font-weight:    700;
}
    

/**
 *  Sport
 *
 *  Light color:    #90CC4E;
 *  Dark color:     #6D9A3B;
 *
 *  @section    Sport
 */
.sport .specialcolor {
    background-color:   #6D9A3B;
    border-color:       #6D9A3B;
}
.sport .pagenav a {
    color:  #6D9A3B;
}
.sport .ressorttitle a:hover {
    color:  #6D9A3B;
}
#sdesiteheader .sport-link:hover,
.sport #sdesiteheader .sport-link,
#sdesiteheader.sport .sport-link {
    color:          #90CC4E;
}
#sdesiteheader.sport .siteheader .sport-link {
    font-weight:    700;
}
    

/**
 *  Immobilien
 *
 *  Light color:    #B9B022;
 *  Dark color:     #B9B022;
 *
 *  @section    Immobilien
 */
.immobilien .specialcolor {
    background-color:   #B9B022;
    border-color:       #B9B022;
}
.immobilien .pagenav a {
    color:  #B9B022;
}
.immobilien .ressorttitle a:hover {
    color:  #B9B022;
}
#sdesiteheader .immobilien-link:hover,
.immobilien #sdesiteheader .immobilien-link,
#sdesiteheader.immobilien .immobilien-link {
    color:          #B9B022;
}
#sdesiteheader.immobilien .siteheader .immobilien-link {
    font-weight:    700;
}
    

/**
 *  Wissen
 *
 *  Light color:    #93C47A;
 *  Dark color:     #516C43;
 *
 *  @section    Wissen
 */
.wissen .specialcolor {
    background-color:   #516C43;
    border-color:       #516C43;
}
.wissen .pagenav a {
    color:  #516C43;
}
.wissen .ressorttitle a:hover {
    color:  #516C43;
}
#sdesiteheader .wissen-link:hover,
.wissen #sdesiteheader .wissen-link,
#sdesiteheader.wissen .wissen-link {
    color:          #93C47A;
}
#sdesiteheader.wissen .siteheader .wissen-link {
    font-weight:    700;
}
    

/**
 *  Kultur
 *
 *  Light color:    #A58115;
 *  Dark color:     #6D550D;
 *
 *  @section    Kultur
 */
.kultur .specialcolor {
    background-color:   #6D550D;
    border-color:       #6D550D;
}
.kultur .pagenav a {
    color:  #6D550D;
}
.kultur .ressorttitle a:hover {
    color:  #6D550D;
}
#sdesiteheader .kultur-link:hover,
.kultur #sdesiteheader .kultur-link,
#sdesiteheader.kultur .kultur-link {
    color:          #A58115;
}
#sdesiteheader.kultur .siteheader .kultur-link {
    font-weight:    700;
}
    

/* Begin: colors-special.css */

/**
 *  SDE Special Colors
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_colors_special
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
/**
 *  Defaults are taken care of in {@link `colors-ressort.css`}
 *  @section Defaults
 */



/**
 *  China Red
 *
 *  Dark color:     #BA0404;
 *
 *  @section    China Red
 */
.specialchinarot .specialcolor {
    background-color:   #BA0404;
    border-color:       #BA0404;
}
.specialchinarot .pagenav a {
    color:  #BA0404;
}
    

/**
 *  Gold
 *
 *  Dark color:     #AB8000;
 *
 *  @section    Gold
 */
.specialgold .specialcolor {
    background-color:   #AB8000;
    border-color:       #AB8000;
}
.specialgold .pagenav a {
    color:  #AB8000;
}
    

/**
 *  Dark Red
 *
 *  Dark color:     #8E002A;
 *
 *  @section    Dark Red
 */
.specialdunkelblau .specialcolor {
    background-color:   #8E002A;
    border-color:       #8E002A;
}
.specialdunkelblau .pagenav a {
    color:  #8E002A;
}
    

/**
 *  Dark Blue
 *
 *  Dark color:     #0F2D69;
 *
 *  @section    Dark Blue
 */
.specialdunkelblau .specialcolor {
    background-color:   #0F2D69;
    border-color:       #0F2D69;
}
.specialdunkelblau .pagenav a {
    color:  #0F2D69;
}
    

/**
 *  Violet
 *
 *  Dark color:     #6B1485;
 *
 *  @section    Violet
 */
.specialviolett .specialcolor {
    background-color:   #6B1485;
    border-color:       #6B1485;
}
.specialviolett .pagenav a {
    color:  #6B1485;
}
    

/**
 *  Grass Green
 *
 *  Dark color:     #016E2A;
 *
 *  @section    Grass Green
 */
.specialgrasgruen .specialcolor {
    background-color:   #016E2A;
    border-color:       #016E2A;
}
.specialgrasgruen .pagenav a {
    color:  #016E2A;
}
    

/**
 *  Light Blue
 *
 *  Dark color:     #4478FF;
 *
 *  @section    Light Blue
 */
.specialhellblau .specialcolor {
    background-color:   #4478FF;
    border-color:       #4478FF;
}
.specialhellblau .pagenav a {
    color:  #4478FF;
}
    

/* Begin: article.css */
/**
 *  Article-specific Styles
 *  
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_article
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

    .article p, .article object, .article embed {
        font-size:      108%;
        line-height:    1.5;
        margin:         0 0 1.5em 0;
    }
        .article .sidebar p, .article .relatedcontent p {
            font-size:  100%;
        }

    .article h2,
    .article h3 {
        margin:         0 0 0.5em 0;
        font-weight:    700;
    }

    .article h3 {
        font-size:      108%;
    }

/**
 *  Article "Kopf"
 *
 *  Teaser and author information displayed at the top of the article page
 *  @section kopf
 */
    .article .maincolumn .author {
        color:          #333;
        font-style:     italic;
        margin:         0 0 20px 0;
    }
        .article .author a {
            color:  #333;
        }
    .article .entry-summary {
        font-weight:    700;
        line-height:    1.2;
    }
        .article .sidebar .entry-summary,
        .article .relatedcontent .entry-summary {
            font-weight:    400;
        }

/**
 *  Quelle
 *
 *  @section quelle
 */
    p.quelle {
        color:      #999;
        font-size:  85%;
        margin:     10px 0 5px;
    }

/**
 *  Overview link
 *  @section overview
 */
    p.overviewlink {
        margin:     10px 0 0 0;
        text-align: right;
    }
        p.overviewlink a {
            font-weight:    bold;
        }

/* Begin: header.css */
/**
 *  Article Header
 *
 *  The article's title and subtitle, along with a variety of "meta"
 *  information (print link, bookmarking, comments), navigation (list of
 *  article's pages), and the publication datetime.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_article_header
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

/**
 *  Article Header
 *
 *  Positioned relative so that absolutely positioned elements use this div
 *  as their frame of reference.  This will come in handy for the action
 *  elements coming up in a moment.  Overflow is set hidden to contain floats.
 *  Padding is set to make room for the absolutely positioned actionable clicky
 *  things that need to sit at the top of the box.
 */
.articleheader {
    border-bottom:  1px solid #CCC;
    margin:         0px 0 10px 0;
    overflow:       hidden;
    padding:        10px 0 10px;
    position:       relative;

}
    .ie .articleheader {
        zoom:       1;              /* @HACK: `position: relative;` wasn't enough to give this div `haslayout`.  Grrr. */
    }
    .articleheader p {
        margin:     0;
    }

/**
 *  Page titles, dates.
 *
 *  @section    Titles
 */
    .articleheader .header {
        display:    inline;     /* @HACK: Avoid IE double-margin bug. */
        float:      left;
        margin:     0;
        width:      750px;
    }

    /**
     *  Article Title
     *
     */
        .articleheader h1 {
            font-size:      30px;
            margin-right:   10px;
        }
    
    /**
     *  Article Subtitle
     */
        .articleheader h1 strong {
            color:          #024282;
            display:        block;
            font-size:      12px;
            font-weight:    700;
            margin:         0 0 3px 0;
        }

    /**
     *  Updated date
     */
        .articleheader .updated {
            color:          #666;
            font-size:      11px;
            top:            0px;
            position:       absolute;
            right:          0;
        }
            .articleheader .updated .value { /* Hide machine-parsable data */
                display:    none;
            }

/**
 *  Article Header "Body"
 *
 *  Contains the page list (if it exists), and the actionable clicky things.
 *  Each defaults to 11px text.
 */
    .articleheader .body {
        float:      left;
        font-size:  11px;
        width:      295px;
    }
/**
 *  Actionable Clicky Things
 *
 *  An unordered list of links to the article's printable version, comments,
 *  bookmarking, and mail-to-friend functionality.  Absolutely positioned to
 *  the bottom-right of the `.articleheader` box.
 */ 
    .articleheader .actions {
        bottom:     15px;
        position:   absolute;
        right:      0;
        width:      301px;
    }
        .actions li {
            border-left:   1px solid #999;
            float:          right;
            height:         15px;
            overflow:       hidden;
            padding:        0 10px 0 10px;
            width:          15px;
        }
            /* Mail is the left-most action in the list, remove it's border */
            li.mail { border: 0; }

        .actions .comments {
            border:     0;
            float:      left;
            padding:    0;
            width:      auto;
        }
            .actions li a {
                background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat top left;
                color:          #000;
                display:        block;
                padding:        2px 0 0 25px;
                white-space:    nowrap;
            }
            li.comments a { /* LI added to override `.actions li a` */
                background-position:    0px 0px;
                color:                  #024282;
                padding-left:           15px;
            }
            li.bookmark {
                padding-right:  0;
            }
            li.bookmark a {
                background-position:    0px -250px;
            }
            li.print a {
                background-position:    0px -100px;
            }
            li.mail a {
                background-position:    0px -150px;
            }
/**
 *  Page List
 *
 *  Ordered list of pages inside this article, along with an indication of
 *  the current page, and total page count.
 */
    .articleheader .body p {
        color:          #666;
        font-weight:    700;
        margin-bottom:  5px;
    }
    .articleheader ol li {
        color:                  #000;
        font-weight:            700;
        list-style:             decimal inside;
        padding:                3px 0 0;
    }
        .articleheader ol .current {
            color:              #666;
            font-weight:        400;
        }
    .articleheader ol a {
        color:          #000;
        font-weight:    700;
    }

/* Begin: footer.css */
/**
 *  Article Footer Styles
 *  
 *  These styles are based on those laid out in `articleheader`.  That file's
 *  contents must be included before this file's in order for things to work
 *  more or less correctly.  
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_articlefooter
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.articlefooter {
    border-top: 1px solid #BBB;
    overflow:   hidden;
    padding:    8px 0 15px 0;
}
    .articlefooter li {
        border:         0;
        float:          left;
        height:         auto;
        margin:         1px 10px 0 0;
        padding:        0;
        width:          auto;
    }
        .articlefooter .bookmark {
            padding:    0;
            position:   relative;
            top:        -6px;
        }
        .articlefooter li a {
            border-right:   1px solid #CCC;
            color:          #024282;
            float:          none;
            font-size:      11px;
            padding:        0 10px 0 15px;
        }
    .articlefooter .skip-to-top {
        background: url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat right -50px;
        float:      right;
        font-size:  11px;
        padding:    2px 20px 2px 0;
    }

/* Begin: quoteoftheday.css */
/**
 *  Quote of the Day-specific Styles
 *  
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_article_quoteoftheday
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.quoteoftheday .entry-summary {
    color:          #666;
    font-size:      138.5%;
    font-weight:    400;
    line-height:    1.6;
    font-family:    Georgia, 'Times New Roman', Serif;
}

.quoteoftheday p img {
    float:  left;
    margin: 0 10px 0 0;
}
.quoteoftheday cite {
    color:          #BBB;
    display:        block;
    font-family:    Aria, Helvetica, 'Sans Serif';
    font-size:      68.75%;
    margin-top:     0.5em;
}

/**
 * Footer
 */
.quoteoftheday .footer {
    border-top:     1px solid #CCC;
    padding-top:    5px;
}
    .quoteoftheday form {
        font-size:  85%;
        margin-top: 10px;
    }
    .quoteoftheday input {
        width:  45px;
    }
    .quoteoftheday .secondary {
        display:        inline-block;
        font-weight:    400;
        width:          auto;
    }

    .quoteoftheday .footer ul {
        float:      right;
    }
        .quoteoftheday .footer li {
            float:          left;
            font-weight:    700;
            line-height:    36px;
        }
            .quoteoftheday li a {
                display:        block;
                height:         36px;
                margin-left:    5px;
                text-indent:    -999em;
                width:          36px;
            }
                .ie .quoteoftheday li a {
                    font-size:  0;
                }
            .quoteoftheday .prev a {
                background: url(/static_assets/build/img/article/unsprited/icon-arrow-36x36-left.e33def6c.png) no-repeat top left;
            }
            .quoteoftheday .next a {
                background:     url(/static_assets/build/img/article/unsprited/icon-arrow-36x36-right.a497d885.png) no-repeat top left;
            }

/* Begin: gallery.css */
/**
 *  Gallery
 *
 *  The image gallery page displays a single image out of a gallery, or a list
 *  of thumbnails out of related galleries (for the gallery's last page).
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_gallery_header
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: header.css 336 2010-02-04 11:47:17Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/article/header.css $
 */
.gallery .entry-content {
    position:   relative;
}

.gallery .whereami {
    color:          #666;
    font-weight:    700;
}
/**
 *  Single Image
 *  @section Single Image
 */
    .gallery .body .image {
        display:        block;
        line-height:    1;
        margin:         1em auto 0.5em;
    }
    .gallery .body p {
        margin-bottom:  1em;
    }
        .gallery .body .image cite {
            color:      #666;
            display:    block;
            font-size:  78.571%;
            text-align: right;
        }

/**
 *  Sidebar
 *
 *  @section Sidebar
 */
.gallery .sidebar {
    position:   relative;
}
    .gallery .sidebar .ad {
        top:        -331px;
        position:   absolute;
    }

/* Begin: header.css */
/**
 *  Gallery Header
 *
 *  Serves the same purpose as {@link ../article/header.css}, but tuned for image
 *  galleries rather than articles.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_gallery_header
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: header.css 336 2010-02-04 11:47:17Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/article/header.css $
 */

.gallery .header {
    position:   relative;
}

/**
 *  Gallery Overline and Title
 *  @section    Title
 */
.gallery .header h1 {
    font-size:      30px;
    width:          457px;
}
    .gallery .header h1 strong {
        color:          #024282;
        display:        block;
        font-size:      12px;
        font-weight:    700;
        margin:         0 0 3px 1px;
    }

/**
 *  Header Paging
 *
 */
.gallery .header .whereami {
    color:          #666;
    font-weight:    700;
    position:       absolute;
    right:          0;
    top:            0;
}

/* Begin: footer.css */
/**
 *  Gallery Footer
 *
 *  Serves the same purpose as {@link ../article/footer.css}, but tuned for image
 *  galleries rather than articles.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_gallery_footer
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: header.css 336 2010-02-04 11:47:17Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/article/header.css $
 */
.gallery .footer .whereami {
    display:        block;
    text-align:     center;
}
.gallery .footer ul {
    border-bottom:  1px solid #BBB;
    display:        block;
    padding-bottom: 3px;
    margin-top:     -1.4em;
    overflow:       hidden;
}
    .ie .gallery .footer ul {
        zoom:   1;
    }
    .gallery .footer a span {
        display:    block;
        height:     36px;
        position:   absolute;
        right:      0;
        top:        18px;
        width:      36px;
    }
    .gallery .footer .prev {
        float:      left;
        font-size:  85%;
        padding:    4px 0;
    }
        .gallery .footer .prev a {
            background: url(/static_assets/build/img/article/unsprited/icon-arrow-left.da24f3d2.png) no-repeat top left;
            display:    block;
            padding:    3px 0 3px 24px;
        }
        .gallery .footer .prev span {
            background: url(/static_assets/build/img/article/unsprited/icon-arrow-36x36-left.e33def6c.png) no-repeat top left;
            right:      41px;
            cursor:     pointer;
        }
    .gallery .footer .next {
        float:      right;
        font-size:  85%;
        padding:    4px 0;
    }
        .gallery .footer .next a {
            background: url(/static_assets/build/img/article/unsprited/icon-arrow-right.68818f2d.png) no-repeat top right;
            display:    block;
            padding:    3px 24px 3px 0;
        }
        .gallery .footer .next span {
            background: url(/static_assets/build/img/article/unsprited/icon-arrow-36x36-right.a497d885.png) no-repeat top left;
            cursor:     pointer;
        }
            #imageoverlay {
                background: none;
                top:        68px;
            }
                .ie #imageoverlay {
                    background: url(/static_assets/build/img/article/unsprited/icon-arrow-36x36-right.a497d885.png) no-repeat top -999em;
                }

/* Begin: actions.css */
/**
 *  Gallery Sidebar Actions
 *
 *  A list of actionable links ( mail to friend, bookmark )
 *
 *      <li class="actions">
 *           <ul>
 *              <li class="bookmark"><a href="#bookmarking" title="Lesezeichen hinzuf&uuml;gen">Lesezeichen hinzuf&uuml;gen</a></li>
 *              <li class="mail"><a href="#mailtofriend" title="Als E-Mail Versenden">Versenden</a></li>
 *          </ul>
 *      </li> 
 *              
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_gallery_actions
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: header.css 336 2010-02-04 11:47:17Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/article/header.css $
 */
.gallery .sidebar .actions {
    margin:     69px 0 15px;
    overflow:   hidden;
    padding:    0 10px;
}
    .gallery .sidebar .actions li {
        float:      left;
        padding:    0 10px;
        width:      auto;
    }
        .gallery .sidebar .actions li.mail {
            padding:    0 10px 0 0;
        }
        .gallery .sidebar .actions li a {
            font-size:      85%;
            font-weight:    400;
            padding-left:   15px;
        }

.gallery .articlefooter {
    position:   static;
}
.gallery .footer .actions {
    border:     0;
    overflow:   visible;
    margin-top: 0;
}

/* Begin: paging.css */
/**
 *  SDE Paging Module
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_paging
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.articlepaging {
    margin:    0.5em 0 38px 10px;
    width:     200px;
}
    .sidebar .articlepaging {
        margin: 0 10px;
        width:  auto;
    }
.articlepaging p {
    font-size:      83%;
    font-weight:    700;
    margin:         0;
}
/**
 *  Page navigation
 *
 *  @section Navigation
 */
.articlepaging .whereami {
    display:        block;
    float:          right;
    font-size:      93%;
    font-weight:    400;
}
    .articlepaging .whereami .current {
        font-weight:   900;
    }
    .articlepaging .whereami .cta {
        background:     #B70000; /* TODO: url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat -362px -994px; */
        display:        inline-block;
        margin-left:    5px;
        /* padding-right:  12px; */
        margin-left:    5px;
    }
    .ie .articlepaging .whereami .cta {
        background-image: none;
        padding-right:    4px;
        position:         relative;
        top:              1px;
        left:             5px;
    }


/**
 *  Page list
 *
 *  @section List
 */
.articlepaging li {
    color:          #666;
    font-size:      11px;
    list-style:     decimal inside;
    margin:         0.25em 0; 
}
    .articlepaging li a {
        color:          #000;
        font-weight:    700;
    }
    .sidebar .articlepaging li {
        margin-top: 0.5em;
    }
        .sidebar .articlepaging li a {
            color:      #000;
        }

/* Begin: modules.css */
/**
 *  SDE Modules
 *
 *  Builds the base module structures that will be reused throughout the site.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
/**
 *  Position
 *
 *  @section    Position
 */
    .right {
        float:          right;
        margin-left:    10px;
    }
    .left {
        float:          left;
        margin-right:   10px;
    }

/**
 *  Size
 *
 *  @section    Size
 */
    .full-column {
        clear:  both;
        width:  100%;
    }
    .narrow {
        width:  180px;
    }


/* Begin: basebox.css */
/**
 *  SDE Basebox Module
 *
 *  Basebox is the foundation of many different types of modules on the SDE
 *  site.  It's based on YUI's "module pattern", and defines a few reusable
 *  rules upon which to build.
 *
 *  At its core, markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox">
 *          <div class="header">[TITLE]</div>
 *          <div class="body">[BODY]</div>
 *          <div class="footer">[FOOTER]></div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

.basebox {
    background: #EEE;
    font-size:  83%;
    overflow:   hidden;
    padding:    0 0 5px;
}
    .ie6 .basebox {
        zoom:   1;  /* God I hate IE.  Seriously, why do all the boxes need `hasLayout`?  They have `overflow:hidden` for crying out loud! */
    }

    .basebox div {
        margin: 5px 10px;
    }
    .basebox .body {
        overflow:   hidden;
    }
        .sidebar .basebox .body a {
            font-size:  13px;
        }
    .basebox .header {
        color:          #666;
        font-weight:    700;
        margin:         0 10px 10px;
        padding-top:    10px;
        text-transform: uppercase;
    }
    .basebox .header a,
    .article .basebox .header a{
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat right -22px;
        color:          #000;
        padding:        0 10px 0 0;
    }


/**
 *  One/Many Image Layout
 *  @section    Images
 */
    .basebox li {
        clear:          both;
        overflow:       hidden;
        margin-bottom:  10px;
        padding-bottom: 10px;
        position:       relative;
    }
        .basebox li.last {
            border-bottom:  0;
            margin:         0;
            padding:        0;
        }
    .basebox li img {
        float:          left;
        margin-right:   10px;
        margin-bottom:  5px;
    }
    .basebox li a {
        color:          #000; 
        font-size:      11px;
    }
        .basebox li span, .basebox li strong {
            color:          #024282;
            display:        block;
            font-weight:    700;
        }
            .basebox li .author {
                color:          #000;
                display:        inline;
                font-weight:    400;
            }
        .basebox li cite {
            color:          #333;
            font-style:     italic;
            font-weight:    400;
        }
    .basebox li p {
        margin:         0 0 0.5em 0;
    }
/**
 *  Numbered basebox 
 *  @section    Numbered
 */
    .basebox ol, .basebox ol li {
        list-style-type:        decimal;
        list-style-position:    inside;
    }

/**
 *  Mehr zum Thema
 *
 *  Same as the normal basebox in all respects other than the color
 *  of the link text.  Subtitle (in a span) is blue, title is black.
 *
 *  @section    Mehr Zum Thema
 */
    .mehrzumthema li a {
        color:          #000;
    }
        .mehrzumthema li a span {
            color:      #024282;
        }

/**
 *  Sidebar modules
 *  @section    Sidebar
 */
.sidebar li a {
    color:          #024282;
    font-weight:    700;
}
    .sidebar .basebox li a strong {
        position:   absolute;
        left:       -999em;
    }

/**
 *  Modules in the Article Sidebar have a white background
 *  @section    Article Sidebar
 */
#articlesidebar .basebox {
    background: #FFF;
}
    #articlesidebar .basebox .header {
        margin-top:     0;
        padding-top:    0;
    }

/**
 * List item ancors containing right-pointing double angle quotation mark on the left
 *
 * @section  Sidebar related
 */
.sidebar .basebox .body .liststyle a {
    background:     transparent url(/static_assets/build/img/modules/basebox/sprite.39379fc6.png) no-repeat left -1px;
    padding-left:   10px;
}

/**
 * Link to related page in sidebar basebox footer
 *
 * @section  Sidebar related
 */
.sidebar .basebox .footer a.related {
    background:     transparent url(/static_assets/build/img/modules/basebox/sprite.39379fc6.png) no-repeat right -1px;
    padding-right:  10px;
}

.sidebar .basebox input.text {
    border-width:       1px;
    padding-bottom:     1px;
}

/* Begin: adbox.css */
/**
 *  Adbox Module
 *
 *  The adbox builds on the basebox framework, but visually presents the header
 *  as normal text (not bold), and removes the grey background in favour of a
 *  grey border around a white box to visually distinguish paid-for links from
 *  editorial links.
 *
 *      <div class="basebox adbox">
 *          <p class="header">Anzeige</p>
 *          <ul class="body">
 *              <li><a href="#LINK1">[TITLE1]</a></li>
 *              ...
 *              <li><a href="#LINKN">[TITLEN]</a></li>
 *          </ul>
 *      </div>
 *  
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_adbox
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.adbox {
    padding:    0;
}
.adbox .body, .adbox .header, .adbox .footer {
    background: #FFF;
    padding:    8px;
    margin:     0 2px 2px 2px;
}
    .adbox .header {
        font-weight:    400;
        margin:         2px 2px 0;
        padding:        8px 8px 0;
    }
    .adbox li {
        margin:     0 0 5px 0;
        padding:    0;
    }
        .adbox li.last {
            margin: 0;
        }
        .adbox li a {
            /* font-weight:    400; */
        }
            .sidebar .adbox .body a {
                color:          #000;
                font-size:      100%;
                font-weight:    700;
            }

/* Begin: adbox_marketoffer.css */
/**
 *  Adbox: Market Offer
 *
 *  A specialized adbox to display offers from the various bits of the
 *  SDE universe outside the six walls of the editorial IT department.
 *
 *      <div class="basebox adbox marketoffer">
 *          <p class="header">[MODULE TITLE]</p>
 *          <ul class="body">
 *              <li><a href="#LINK-1"><strong>[TITLE-1]</strong><span class="division">&ndash;</span> [OVERLINE]</a></li>
 *              ...
 *              <li><a href="#LINK-N"><strong>[TITLE-N]</strong><span class="division">&ndash;</span> [OVERLINE]</a></li>
 *          </ul>
 *          <div class="footer"><a href="[CATEGORY URL]">[CATEGORY TITLE]</a></div>
 *      </div>
 *  
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_adbox_marketoffer
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.marketoffer .body, .marketoffer .header, .marketoffer .footer {
    background: #EEE;
}

    .marketoffer .header {
        font-weight:    700;
        padding:        8px 8px 0;
        margin:         0 2px;
    }
    .marketoffer .body {
        margin-bottom:  0;
        padding:        8px 8px 0;
    }

    .marketoffer li {
        margin:         0 0 7px; 
    }
        .marketoffer li a {
            display:        block;
            font-size:      11px;
        }
            .marketoffer .division {
                position:   absolute;
                left:       -999em;
            }

    .marketoffer .footer {
        overflow:       hidden;
        padding:        0px 8px 8px;
    }
        .marketoffer .footer a {
            font-size:      11px;
            font-weight:    400;
            float:          right;
        }

/* Begin: cinemasearch.css */
/**
 *  SDE Kinosuche Module
 *
 *  Displays a cinema search form
 *
 *  <pre><code>
 *  <div class="basebox cinemasearch">
 *      <div class="header">
 *          <a href="%URL%">%MODULE_TITLE%</a>
 *          <img src="%MODULE_HEADER_IMAGE%" alt=""><!-- optional -->
 *      </div> 
 *      <div class="body">
 *          <img height="75" width="280" src="%MODULE_BODY_IMAGE%" alt="">
 *          <form method="post" action="%FORM_ACTION%">
 *              <fieldset>
 *                  <legend>%LEGEND%</legend>
 *                  <ul>
 *                      <li class="first">
 *                          <label for="event_movie_city">%LABEL_CITY%</label>
 *                          <select id="event_movie_city" name="%SELECT_NAME%">
 *                          ...
 *                          </select>
 *                      </li>
 *                      <!-- other selects will be generated by js -->
 *                      <li class="last">
 *                          <input type="submit" class="cta" name="event_movie_search" title="%INPUT_TITLE%" value="%INPUT_VALUE%">
 *                      </li>
 *                  </ul>
 *              </fieldset>
 *          </form>
 *      </div>
 *  </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_cinemasearch
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


.cinemasearch {
}

    /**
     * Module header
     *
     * @section header
     */
    .cinemasearch .header {
        clear:      both;
        position:   relative;
    }
    .ie6 .cinemasearch .header,
    .ie7 .cinemasearch .header {
        zoom:   1;
    }

        .cinemasearch .header img{
            display:    block;
            position:   absolute;
            right:      -10px;
            top:        0;
        }
        .ie6 .cinemasearch .header img,
        .ie7 .cinemasearch .header img{
            right:      -10px;
        }

    /**
     * Module body
     *
     * @section body
     */
    .cinemasearch .body {
    }

    .cinemasearch .body img {
        display:    block;
        width:      280px;
    }


    /**
     * Movie search form
     *
     * @section form
     */
    .cinemasearch .body form {
        padding-top:    7px;
    }

        .ie6 .cinemasearch .body legend,
        .ie7 .cinemasearch .body legend {
            position:    relative;
            left:        -7px;
        }
    
        .cinemasearch .body ul {
            padding-top:    7px;
        }

        .cinemasearch .body li {
            clear:              both;
            padding-bottom:     0;
        }
        .ie6 .cinemasearch .body li {
            position:   relative;
            zoom:       1;
        }

        .cinemasearch .body label {
            display:        block;
            float:          left;
            font-weight:    bold;
            padding-top:    2px;
            width:          30px;
        }

        .cinemasearch .body select {
            display:    block;
            float:      right;
            width:      233px;
        }

        .cinemasearch .body .cta {
            float:      right;
        }

        .ie .cinemasearch .body .cta {
            padding-right:    4px;
        }
 
/* Begin: columns.css */
/**
 *  SDE Columned Module
 *
 *  Displays links in multiple columns.
 *
 *  Based on `basebox`, HTML as follows:
 *
 *  <pre><code>
 *      <div class="linkbox columns">
 *          <div class="header"><a href="#TODO_%MODULE_URL%">%MODULE_TITLE%</a></div>
 *          <div class="body">
 *              <ul>
 *                  <li class="first"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  <li><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  ...
 *                  <li class="last"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_columns
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.columns {
    padding:    0;
}
    .columns .body ul {
        margin-left:    -10px;
    }
    .columns .body li {
        clear:          none;
        float:          left;
        margin:         0 0 5px 10px;
        overflow:       hidden;
        padding-bottom: 5px;
        width:          130px;
        white-space:    nowrap;
        
        /* I love browsers. */
        -o-text-overflow:       ellipsis;
        -ms-text-overflow:      ellipsis;
        -moz-text-overflow:     ellipsis;
        -webkit-text-overflow:  ellipsis;
        text-overflow:          ellipsis;
    }
        .ie .columns .body li {
            display:    inline;     /* @HACK: Avoid double margins in IE. */
        }
        .sidebar .columns .body a,
        .columns .body li a {
            font-size:      11px;
            font-weight:    400;
        }


/* Begin: columns_eventscalendar.css */
/* basebox/columns_eventscalendar.css */
/**
 *  SDE Veranstaltungskalender Module
 *
 *  Displays a events calendar links in multiple columns and a form which provides 
 *  a event search. The link columns are grouped in two areas (list of "what" and 
 *  "where"). Based on the `columns` module, which in turn is based on `basebox`, 
 *  HTML is as follows:
 *
 *  <pre><code>
 *  <div class="basebox columns eventscalendar">
 *      <div class="header"><a href="#TODO_Eventscalendar_Url">%TITLE%</a></div> 
 *      <div class="body">
 *          <p>%WHAT_HEADER%</p>
 *          <ul class="liststyle">
 *              <li class="first">
 *                  <a href="#TODO">%WHAT_ITEM%</a>
 *              </li>
 *              ...
 *          </ul>
 *          <p>%WHERE_HEADER%</p>
 *          <ul class="liststyle">
 *              <li class="first">
 *                  <a href="#TODO">%WHERE-ITEM%</a>
 *              </li>
 *              ...
 *          </ul>
 *      </div>
 *      <div class="footer">
 *          <form action="#TODO" method="post">
 *              <label for="eventq">%LABEL%</label>
 *              <input type="search" class="text" value="" placeholder="%PLACEHOLDER%" name="q" id="eventq">
 *              <input type="submit" class="cta" value="%VALUE%">
 *          </form>
 *      </div>
 *  </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_eventscalendar
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

/**
 * Events calendar body, contains the columns
 *
 * @section  body
 */
.eventscalendar .body {
    margin-bottom:    0;
}

    .eventscalendar .body p {
        font-size:      108%;
        font-weight:    700;
    }

    .eventscalendar .body ul {
        clear:          both;
        margin-top:     7px;
        margin-bottom:  14px;
        overflow:       hidden;
    }

    .ie6 .eventscalendar .body ul {
        zoom: 1;
    }

        .eventscalendar .body li {
            margin-bottom:  0;
            width:          135px;
        }

            /**
             * @deprecated  The list style image is set by basebox.css
             *              see format ".sidebar .basebox .body .liststyle a"
             *              in http://svn.sueddeutsche.de/repos/static_assets/branches/new-grid/src/css/modules/basebox.css
             */
            .eventscalendar .body li a {
                background:     transparent url(/static_assets/build/img/modules/eventscalendar/sprite.b210f392.png) no-repeat 2px 1px;
                padding-left:   11px;
            }


/**
 * Events calendar footer with the form
 *
 * @section  footer
 */
.eventscalendar .footer {
    margin-bottom:  10px;
    margin-top:     0;
}

.ie6 .eventscalendar .footer,
.ie7 .eventscalendar .footer {
    zoom:   1;
}

.ie7 .eventscalendar .footer {
    margin-bottom:  4px;
}

    .eventscalendar .footer form {
        clear:      both;
        overflow:   hidden;
    }

        .eventscalendar .footer label {
            display:        block;
            font-size:      108%;
            font-weight:    700;
            margin-bottom:  7px;
        }

        .eventscalendar .footer .text {
            float:      left;
            width:      215px;
        }


        .eventscalendar .footer .cta {
            float:      right;
        }

/* Begin: columns_infothek.css */
/**
 *  SDE Sparmeister Modules
 *
 *  Displays *meister links in multiple columns.  Based on the `columns`
 *  module, which in turn is based on `basebox`, HTML is as follows:
 *
 *  <pre><code>
 *      <div class="basebox infothek columns">
 *          <div class="header"><a href="#TODO_%MODULE_URL%">%MODULE_TITLE%</a></div>
 *          <div class="body">
 *              <ul>
 *                  <li class="first"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  <li><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  ...
 *                  <li class="last"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_infothek
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.infothek {
    background: #FFF;
    padding:    0;
}
    .infothek .header {
        margin-left:    0;
    }
    .infothek .body {
        margin:         5px 0;
    }
        .infothek .body li {
            margin:     0;
            width:      178px;
        }

/* Begin: columns_sparmeister.css */
/**
 *  SDE Sparmeister Modules
 *
 *  Displays *meister links in multiple columns.  Based on the `columns`
 *  module, which in turn is based on `basebox`, HTML as follows:
 *
 *  <pre><code>
 *      <div class="basebox columns sparmeister">
 *          <div class="header"><a href="#TODO_%MODULE_URL%">%MODULE_TITLE%</a></div>
 *          <div class="body">
 *              <ul>
 *                  <li class="first %ICON_CLASS%"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  <li class="%ICON_CLASS%"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  ...
 *                  <li class="last %ICON_CLASS%"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_sparmeister
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.sparmeister {
    clear:      both;
    margin-top: 2em;
}
    .sparmeister .body ul {
        margin-left:    -16px;
    }
    .sparmeister .body li {
        /* background:     url("/static_assets/build/img/site/sprite-infothek.4421cb28.png") no-repeat top left; */
        margin:         0 0 5px 16px;
        /* padding:        1px 0 1px 20px; */
        width:          135px;
    }

/* Begin: columns_themelist.css */
/**
 *  SDE Themelist Modules
 *
 *  Extends `columns` basebox module to display a three-column list of 
 *  themes in the main column of the "Theme Initial Letter Article" page.
 *  Which is horribly named. HTML is as follows:
 *
 *  <pre><code>
 *      <div class="basebox maincolumn columns themelist">
 *          <div class="header"><a href="#TODO_%MODULE_URL%">%MODULE_TITLE%</a></div>
 *          <div class="body">
 *              <ul>
 *                  <li class="first"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  <li><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *                  ...
 *                  <li class="last"><a href='%ITEM_URL%'>%ITEM_TITLE%</a></li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_themelist
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.themelist {
    background: #FFF;
    padding:    0;
    margin:     0;
}
    .themelist .header {
        border-bottom:  4px solid #999;
        color:          #000;
        font-size:      18px;
        font-weight:    700;
        margin:         0;
        text-transform: none;
    }
    .themelist .body {
        margin:         10px 0 0 -10px;
    }
        .themelist .body li {
            width:      172px;
        }
            .themelist .body a {
                color:  #024282;
            }
    .themelist .footer {
        margin:         0px;
        padding-bottom: 5px;
    }


/* Begin: columns_travelweather.css */
/* basebox/columns_travelweather.css */
/**
 *  SDE Reisewetter Module
 *
 *  Displays travel weather links in multiple columns. Based on the `columns`
 *  module, which in turn is based on `basebox`, HTML is as follows:
 *
 *  <pre><code>
 *   <div class="basebox columns travelweather">
 *      <div class="header"><a href="#URL">%MODULE_TITLE%</a></div> 
 *      <div class="body">
 *          <ul>
 *              <li class="first">
 *                  <p><a href="#TODO">
 *                      <span class="offscreen">%IN%</span> <span class="city">%CITYNAME%</span> <span class="audible icon %CSS_CLASSNAME%" title="%TIME_OF_DAY_AND_WEATHER_STATUS_TITLE%">%TIME_OF_DAY_AND_WEATHER_STATUS_TEXT%</span> <span class="degree">%DEGREE%&deg; C</span>
 *                  </a></p>
 *              </li>
 *              ...
 *              <li class="last">
 *                  <p><a href="#TODO">
 *                      <span class="offscreen">In</span> <span class="city">%CITYNAME%</span> <span class="audible icon %CSS_CLASSNAME%" title="%TIME_OF_DAY_AND_WEATHER_STATUS_TITLE%">%TIME_OF_DAY_AND_WEATHER_STATUS_TEXT%</span> <span class="degree">%DEGREE%&deg; C</span>
 *                  </a></p>
 *              </li>
 *          </ul>
 *      </div>
 *      <div class="footer">
 *          <form action="#TODO" method="post">
 *          <label for="travelweatherq">%LABEL%:
 *              <input type="search" class="q" value="" name="travelweather" id="travelweatherq">
 *              <input type="submit" class="submit" placeholder="%PLACEHOLDER%" value="%VALUE%">
 *          </label>
 *      </div>
 *  </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_travelweather
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


.ie .travelweather {
    zoom:    1;
}

/* Straighten out margin 3 px bug in IE 7 */
.ie7 .travelweather .body ul {
    float:    left;
    zoom:     1;
}

    .travelweather .body li {
        margin-bottom: 0;
        width:         135px;
    }


        .travelweather .body li p {
            margin:        0;
            padding-top:   5px;
        }

            /* reset parents (basebox) formatting */
            .travelweather li span {
                display:      block;
                font-weight:  400;
            }

            /* Teach IE pointer for anchors having floated childs */
            .ie .travelweather .body li a {
                cursor:    pointer;
                zoom:      1;
            }

                .travelweather .body .city {
                    float:       left;
                    overflow:    hidden;
                    width:       66px;
                }

                .travelweather .body .audible {
                    height: 0;
                }
                
                .travelweather .body .icon {
                    background-color:       #fff !important;
                    border:                 1px solid #BBB;
                    display:                block;
                    float:                  left;
                    height:                 23px;
                    width:                  23px;
                    -webkit-border-radius:  2px;
                    -moz-border-radius:     2px;
                    border-radius:          2px;
                }

                .travelweather .body .degree {
                    color:          #606060;
                    display:        block;
                    float:          left;
                    font-weight:    700;
                    padding-left:   5px;
                }

                /**
                 * Icon sprite to display weather status icons.
                 *
                 * @section  CSS sprite
                 */

                .travelweather .body .icon {
                   background:      url(/static_assets/build/img/modules/travelweather/sprite.7de1c9b0.png) no-repeat top left;
                   position:        relative;
                   top:             -5px;
                }
                
                    /**
                     * Following format definition are a addition to the sprite from above and the used 
                     * to reposition the sprite for all available weather type.
                     */

                    /* Day and sunny but (name it clear to be compatible to night classname) */
                    .travelweather .body .dclear {
                         background-position:    -3px 0;
                    }

                    /* Day and partly cloudy */
                    .travelweather .body .dpartlycloudy {
                         background-position:    -4px -72px;
                    }

                    /* Day and cloudy */
                    .travelweather .body .dcloudy {
                         background-position:    -2px -144px;
                    }

                    /* Day and overcast */
                    .travelweather .body .dovercast {
                         background-position:    0 -217px;
                    }

                    /* Day and foggy */
                    .travelweather .body .dfoggy {
                         background-position:    -3px -290px;
                    }

                    /* Day and drizzle */
                    .travelweather .body .ddrizzle {
                         background-position:    -2px -363px;
                    }

                    /* Day and rain */
                    .travelweather .body .drain {
                         background-position:    -2px -436px;
                    }

                    /* Day and snow */
                    .travelweather .body .dsnow {
                         background-position:    -2px -509px;
                    }

                    /* Day and shower */
                    .travelweather .body .dshower {
                         background-position:    -2px -582px;
                    }

                    /* Day and storm */
                    .travelweather .body .dstorm {
                         background-position:    -2px -655px;
                    }

                    /* Night and clear */
                    .travelweather .body .nclear {
                         background-position:    -4px -728px;
                    }

                    /* Night and partly cloudy */
                    .travelweather .body .npartlycloudy {
                         background-position:    -2px -801px;
                    }

                    /* Night and cloudy */
                    .travelweather .body .ncloudy {
                         background-position:    -2px -874px;
                    }

                    /* Night and overcast */
                    .travelweather .body .novercast {
                         background-position:    0 -947px;
                    }

                    /* Night and foggy */
                    .travelweather .body .nfoggy {
                         background-position:    -3px -1020px;
                    }

                    /* Night and drizzle */
                    .travelweather .body .ndrizzle {
                         background-position:    -2px -1093px;
                    }

                    /* Night and rain */
                    .travelweather .body .nrain {
                         background-position:    -2px -1166px;
                    }

                    /* Night and snow */
                    .travelweather .body .nsnow {
                         background-position:    -2px -1239px;
                    }

                    /* Night and shower */
                    .travelweather .body .nshower {
                         background-position:    -2px -1312px;
                    }

                    /* Night and storm */
                    .travelweather .body .nstorm {
                         background-position:    -2px -1385px;
                    }

    /**
     * Travel weather footer, contains search form.
     *
     * @section  Searchform
     */
    .travelweather .footer {
        margin-bottom:    10px;
    }

        .travelweather .footer fieldset {
            display:     block;
            overflow:    hidden;
        }

        .travelweather .footer label {
            color:       #606060;
            display:     block;
            float:       left;
            width:       280px;
        }

            /* Query field */
            .travelweather .footer .text {
                margin:         0 0 0 5px;
                width:          163px;
            }
            .ie .travelweather .footer .text {
                margin-left:    16px;
            }

            /* Submit button */
            .travelweather .footer .submit {
                background:     url(/static_assets/build/img/modules/travelweather/sprite.7de1c9b0.png) no-repeat 0px -1440px;
                border:         0;
                float:          right;
                height:         17px;
                padding:        0;
                position:       relative;
                text-indent:    -999em;
                top:            0;
                width:          17px;
                cursor:         pointer;
            }

            /* Some adaptiond 4 IE */
            .ie .travelweather .footer .submit {
                /*  @HACK: IE6/7 don't support text-indent in the way I need it here. */
                float:           none;
                font-size:       0;
                line-height:     0;
                top:             0px;
                vertical-align:  top;
            }
            .ie6 .travelweather .footer .submit {
                top:             1px;
            }

    /**
     * Travel weather styles, for the regional-portal.
     *
     */
    
    .regionalchannel .travelweather .body .icon {
      height: 28px;
      width:  28px;
    }

    /**
     * Following format definition are a addition to the sprite from above and the used 
     * to reposition the sprite for all available weather type.
     */

    /* Day and sunny but (name it clear to be compatible to night classname) */
    .regionalchannel .travelweather .body .dclear {
      background-position : 0 3px;
    }

    /* Day and partly cloudy */
    .regionalchannel .travelweather .body .dpartlycloudy {
      background-position : 0 -70px;
    }

    /* Day and cloudy */
    .regionalchannel .travelweather .body .dcloudy {
      background-position : 0 -142px;
    }

    /* Day and overcast */
    .regionalchannel .travelweather .body .dovercast {
      background-position : 0 -216px;
    }

    /* Day and foggy */
    .regionalchannel .travelweather .body .dfoggy {
      background-position : 0 -288px;
    }

    /* Day and drizzle */
    .regionalchannel .travelweather .body .ddrizzle {
      background-position : 0 -360px;
    }

    /* Day and rain */
    .regionalchannel .travelweather .body .drain {
      background-position : 0 -436px;
    }

    /* Day and snow */
    .regionalchannel .travelweather .body .dsnow {
      background-position : 0 -507px;
    }

    /* Day and shower */
    .regionalchannel .travelweather .body .dshower {
      background-position : 0 -580px;
    }

    /* Day and storm */
    .regionalchannel .travelweather .body .dstorm {
      background-position : 0 -653px;
    }

    /* Night and clear */
    .regionalchannel .travelweather .body .nclear {
      background-position : 0 -726px;
    }

    /* Night and partly cloudy */
    .regionalchannel .travelweather .body .npartlycloudy {
      background-position : 0 -799px;
    }

    /* Night and cloudy */
    .regionalchannel .travelweather .body .ncloudy {
      background-position : 0 -872px;
    }

    /* Night and overcast */
    .regionalchannel .travelweather .body .novercast {
      background-position : 0 -945px;
    }

    /* Night and foggy */
    .regionalchannel .travelweather .body .nfoggy {
      background-position : 0 -1019px;
    }

    /* Night and drizzle */
    .regionalchannel .travelweather .body .ndrizzle {
      background-position : 0 -1090px;
    }

    /* Night and rain */
    .regionalchannel .travelweather .body .nrain {
      background-position : 0 -1164px;
    }

    /* Night and snow */
    .regionalchannel .travelweather .body .nsnow {
      background-position : 0 -1237px;
    }

    /* Night and shower */
    .regionalchannel .travelweather .body .nshower {
      background-position : 0 -1309px;
    }

    /* Night and storm */
    .regionalchannel .travelweather .body .nstorm {
      background-position : 0 -1383px;
    }
/* Begin: comments.css */
/**
 *  SDE Article Comments Module
 *
 *  Article comments, based on `basebox`.
 *
 *  At its core, markup is as follows:
 *
 *  <pre><code>
 *      <div id="kommentare" class="basebox comments">
 *          <div class="header">
 *              <strong>Leserkommentare (%NUM_COMMENTS%)</strong>
 *              <p> 
 *                  <a href="%LOGIN_URL%">Bitte melden sie sich an</a>, um diesen Artikel zu
 *                  kommentieren, bestehende Kommentare zu bewerten und bei neuen Kommentaren
 *                  per Email benachrichtigt zu werden.
 *              </p>
 *          </div>
 *          <div class="body">
 *              <ul id="commentList">
 *                  <li id="kommentar39239">
 *                      <div class="text">
 *                          <a href="%PROFILE_URL%"><img src='%PROFILE_IMAGE_URL%' width='75' height='75' alt=''>
 *                              <cite>%PROFILE_NAME%</cite><span class="offscreen">schreibt </span>:
 *                          </a>
 *                          <strong>%COMMENT_TITLE%</strong>
 *                          <p>
 *                              %COMMENT_TEXT%
 *                          </p>
 *                      </div>
 *                      <div class="activity">
 *                          <div class="rating">
 *                              <span class="display %NEGATIVE_CLASS% %POSITIVE_CLASS%">
 *                                  Dieses Kommentar ist von %PERCENT_BAD_RATINGS%% unsere
 *                                  %NUM_RATINGS% Bewerter als schlecht gesehen, und von
 *                                  %PERCENT_GOOD_RATINGS%% als gut.  Wie sehen Sie das?
 *                              </span>
 *                              <form action="%SUBMIT_COMMENT_RATING_URL%" method="post">
 *                                  <input type="hidden" name="comment_id" value="%COMMENT_ID%">
 *                                  <input type="image" src="/static_assets/build/img/article/unsprited/rate-comment-bad.7c9e1705.gif" alt="Dieses Kommentar ist schlecht" name="rating" value="negative" class="negative">
 *                                  <input type="image" src="/static_assets/build/img/article/unsprited/rate-comment-good.1db227ce.gif" alt="Dieses Kommentar ist gut." name="rating" value="positive" class="positive">
 *                              </form>
 *                          </div>
 *                          <img src="http://pix.sueddeutsche.de/img/layout/btn_petzen1.gif" id="squel_%COMMENT_ID%" class="squel" alt="Diesen Kommentar melden ...">
 *                          <a href="#kommentar12345" class="published">
 *                              10.06.2010 um 12:34 Uhr
 *                          </a>
 *                      </div> 
                        <div id="squelform_39239" class="squelform"></div>
 *                  </li>
 *                  ...
 *              </ul>
 *          </div>
 *          <div class="footer">
 *              <p id="commentnavlabel" class="offscreen">Paging</p>
 *              <ul role="navigation" aria-labelledby="commentnavlabel">
 *                  <li class="first"><a href="#TODO"><span class="offscreen">Kommentarseite </span>1</a></li>
 *                  <li><a href="#TODO" rel="prev"><span class="prevpage">neuere Kommentare<span class="offscreen">: Seite</span></span>2</a></li>
 *                  <li><span class="offscreen">Sie lesen jetzt Kommentarseite </span>3</li>
 *                  <li><a href="#TODO" rel="next"><span class="nextpage">&auml;ltere Kommentare<span class="offscreen">: Seite</span></span>4</a></li>
 *                  <li class="last"><a href="#TODO"><span class="offscreen">Kommentarseite </span>5</a></li>
 *              </ul>
 *              <a class="loginlink" href="#TODO">Anmelden &amp; Kommentar schreiben</a>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_comments
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: basebox.css 303 2010-01-21 09:32:10Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/modules/basebox.css $
 */

/**
 *  We'll pull a link up from the footer to position it visually in the header.
 *  The entire block needs relative positioning so that that's possible.
 */
.comments {
    position:   relative;
}
    .comments .loginlink {
        position:   absolute;
        right:      10px;
        top:        10px;
    }

/**
 *  Comment box header
 *
 *  Contains a module title ("Leserkommentare"), and a bit of explanatory text.
 *  If the user is logged out, she'll be asked to log in in order to comment or
 *  rate comments.
 *
 *  @section    Header
 */
.comments .header {
    color:          #333;
    font-weight:    400;
    text-transform: none;
}
    .comments .header strong {
        color:          #333;
        font-size:      153.9%;
        font-weight:    700;
    }
    .comments .header p {
        margin: 1em 0;
    }
    .comments .header a, .article .comments .header a {
        background: none;
        color:      #024282;
        padding:    0;
    }

/**
 *  Pagination
 *  @section    Pagination
 */
.comments .footer {
    border-top:     1px solid #999;
    padding-top:    1em;
    text-align:     center;
}
.comments .footer ul {
    display:    inline;
    position:   relative;
}
.comments .footer a {
    color:      #024282;
}
.comments .footer li {
    border:         1px solid #999;
    border-width:   0 1px 0 0; 
    display:        inline;
    margin:         0;
    padding:        0 5px;
    position:       static;
}
    .comments .footer .last {
        border:     0;
    }
    .comments .footer .prevpage {
        background: url(/static_assets/build/img/article/unsprited/icon-arrow-left.da24f3d2.png) no-repeat top left;
        left:       -16em;
        padding:    2px 0 2px 20px;
        position:   absolute;
        top:        -1px;
    }
    .comments .footer .nextpage {
        background: url(/static_assets/build/img/article/unsprited/icon-arrow-right.68818f2d.png) no-repeat top right;
        padding:    2px 20px 2px 0;
        position:   absolute;
        right:      -15em;
        top:        -1px;
    }

/**
 *  Comment List, List Items
 *
 *  The list of comments contains a variety of comment items, each potentially
 *  containing an author (with name, image, and profile link), a title, and
 *  multiple paragraphs of text.  A comment rating is also included, ranging
 *  from `negative-1` to `negative-4`.  Positive ratings are also possible, if
 *  rare.
 *
 *  @section    List
 */
.comments .body p {
    margin-left: 85px;
}
    .comments .body .noimage p {
        margin-left: 0;
    }
.comments li {
    border-top:     1px solid #666;
    padding:        10px 0 0;
}
    .comments li a {
        color: #024282;
    }
    .comments li cite {
        font-style:     normal;
        font-weight:    700;
    }
        .comments li a cite {
            color:          #024282;
        }
    .comments li strong {
        color:      #333;
        display:    inline;
    }
    .comments li .published {
        /*
        bottom:     0;
        position:   absolute;
        right:      0;
        */
        left:       160px;
        position:   relative;
        top:        3px;
    }

.comments .text, .comments .activity {
  float: left;
  width: 500px;
}

/**
 *  Comment rating form
 *  @section    Ratings
 */
.comments .rating {
    border:     1px solid #BBB;
    clear:      both;
    float:      left;
    margin:     0 0 1px 67px;
    padding:    2px;
    position:   relative;
    width:      41px; 
}
    .rating .positive {
        height:     18px;
        position:   absolute;
        right:      -41px;
        top:        -2px;
        width:      41px;
    }
    .rating .negative {
        height:     18px;
        left:       -67px;
        position:   absolute;
        top:        -2px;
        width:      67px;
    }
    /**
     *  Rating Possibilities
     */
    .rating .display {
        background:     #BBB;
        border-left:    0px solid #B00;
        border-right:   0px solid #0B0;
        color:          #BBB;
        height:         10px;
        margin:         0 19px;
        overflow:       hidden;
        width:          3px;
    }
    .rating .negative1 {    margin-left:    15px;   border-left-width:  4px;    }
    .rating .negative2 {    margin-left:    10px;   border-left-width:  9px;    }
    .rating .negative3 {    margin-left:    5px;    border-left-width:  14px;   }
    .rating .negative4 {    margin-left:    0px;    border-left-width:  19px;   }
    .rating .positive1 {    margin-right:   15px;   border-right-width: 4px;    }
    .rating .positive2 {    margin-right:   10px;   border-right-width: 9px;    }
    .rating .positive3 {    margin-right:   5px;    border-right-width: 14px;   }
    .rating .positive4 {    margin-right:   0px;    border-right-width: 19px;   }
/**
 * comment report form
 * 
 */

.comments img.squel {
  height: 18px;
  left: 50px;
  position: relative;
  top: -1px;
}

.comments div.squelform {
  display: none;
}

.comments div.squelform textarea {
  width: 490px;
}

.comments div.squelform input {
  float: right;
  margin-top: 3px;
}

/* Begin: comments_form.css */
/**
 *  SDE Article Comments Form
 *
 *  Article comment form, also based on `basebox`.
 *
 *  At its core, markup is as follows:
 *
 *      <form class="basebox comments" action="#TODO" method="post">
 *          <p class="header">Kommentar Schreiben</p>
 *          <fieldset class="body">
 *              <input type="hidden" name="???" value="???">
 *              <input type="hidden" name="???" value="???">
 *              <input type="hidden" name="???" value="???">
 *              <label>
 *                  Betreff
 *                  <input type="text" id="comment_head" name="comment_head" placeholder="Bitte geben Sie Ihrem Kommentar eine aussagekr&auml;ftige &Uuml;berschrift" value="">
 *              </label>
 *              <label>
 *                  Ihr Beitrag
 *                  <span id="charsremaining" aria-live="off">Maximal 2500</span><span class="offscreen"> Buchstaben</span>
 *                  <textarea id="comment_body" name="comment_body" aria-controls="charsremaining"></textarea>
 *              </label>
 *              <input type="submit" class="submit cta" value="Abschicken">
 *          </fieldset>
 *      </form>
 *
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_comments
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: basebox.css 303 2010-01-21 09:32:10Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/modules/basebox.css $
 */
form.comments {
    
}
    form.comments .header {
        border-top: 1px solid #999;
        font-size:  118.18%;
        margin:     0 10px;
    }
    form.comments .body {
        margin:     0 10px;
    }
    form.comments .header {
        color:          #666;
        font-weight:    700;
    }
    form.comments label {
        display:        block;
        font-weight:    700;
        margin:         10px 0 0;
    }
    form.comments #comment_head,
    form.comments #comment_body {
        border:     1px inset #999;
        display:    block;
        font-size:  118.18%;
        padding:    3px 5px;
        margin:     5px 0;
        width:      506px;
    }
    form.comments #comment_body {
        height:     15em;
    }

/**
 *  Character count
 */
    .js form.comments #charsremaining {
        color:          #666;
        font-size:      118.18%; 
        font-weight:    700;
        position:       absolute;
        right:          10px; 
    }
    .js form.comments .extra {
        position:       absolute;
        left:           -999em;
    }

/* Begin: commentsinmunich.css */
/**
 *  SDE "Kommentare in München" Module
 *
 *  Displays a list of latest user comments in sidebar, based on 'basebox'.
 *
 *  <pre><code>
 *  <div class="basebox commentsinmunich">
 *      <div class="header">%HEADLINE%</div>
 *      <div class="body">
 *          <ul>
 *              <li class="first">
 *                  <span class="time">%DATE_TIME%</span>
 *                  <span class="user">%USER_NICKNAME%</span>
 *                  <p>%COMMENT_TEXT% <a href="#TODO_COMMENT_URL">%MORE% ...</a></p>
 *                  <span class="to">%TEXT%: <a href="#TODO_TOPIC_URL">%TOPIC_TITLE%</a></span>
 *              </li>
 *              ...
 *              <li class="last">
 *                  ...
 *              </li>
 *          </ul>
 *      </div>
 *  </div>
 *  </code></pre>
 * 
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_commentsinmunich
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


.commentsinmunich .body {
    background:     transparent url(/static_assets/build/img/modules/commentsinmunich/bg_comment.8b8f2756.png);
    font-size:      100%;
    padding:        5px;
}

    .ie6 .commentsinmunich .body li.last {
        zoom:   1;
    }

    .sidebar .commentsinmunich .body a {
        font-size:      100%;
        font-weight:    400;
    }

    .commentsinmunich .body span {
        font-weight: 400;
    }

    .commentsinmunich .body .time {
        color:          #666;
        display:        inline-block;
        padding:        0 15px 2px 0;
        background:     transparent url(/static_assets/build/img/modules/commentsinmunich/balloon.a802276a.png) no-repeat right 2px;
    }

    .commentsinmunich .body .user {
        color:              #000;
        font-weight:        700;
        padding-bottom:     2px;
    }

    .commentsinmunich .body p {
        margin-bottom:  2px;
    }

    .commentsinmunich .body .to {
        color:      #666;
    }

/* Begin: f1liveticker.css */
/**
 *  SDE Liveticker (Formel-1) Module
 *
 *  Displays F1 ticker news table, based on `basebox`, HTML is as follows:
 *
 *  <pre><code>
 *  <div class="basebox f1liveticker">
 *      <div class="header">
 *          <img src="%HEADER_IMAGE%" width="280" height="75" alt="%HEADER_IMAGE_ALT%">
 *          <a href="%HEADER_TITLE_URL%">%HEADER_TITLE%</a><br>
 *          <span>%HEADER_STATUS%</span>
 *      </div>
 *      <div class="body">
 *          <table>
 *              <thead>
 *              ...
 *              </thead>
 *              <tbody>
 *                  <tr class="odd">
 *                      <td>%ITEM_RANK%</td>
 *                      <td class="name">%ITEM_NAME%</td>
 *                      <td>%ITEM_TEAM%</td>
 *                      <td class="time">%ITEM_TIME%</td>
 *                  </tr>
 *                  <tr class="even">
 *                  ...
 *                  </tr>
 *                  ...
 *              </tbody>
 *          </table>
 *      </div>
 *      <div class="footer">
 *          <a class="related" href="%RELATED_URL%">%RELATED_TITLE%</a>
 *      </div>
 *  </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_f1liveticker
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


/**
 * Liveticker header
 *
 * @section  header
 */
.f1liveticker .header {
    color:              #000;
    font-weight:        400;
    text-transform:     none;
}

    .f1liveticker .header img{
        display:            block;
        margin-bottom:      10px;
    }

    /* Cast out the added 3px for IE6 */
    .ie6 .f1liveticker .header img{
        margin-bottom:      7px;
    }

/**
 * Liveticker body
 *
 * @todo     Basic table formats, usable for all tables in right column,
 *           should be outsourced to parents (basebox) css file
 *
 * @section  body
 */
.f1liveticker .body table {
    border-collapse:    collapse;
    border-spacing:     0;
    width:              280px;
}

    .f1liveticker .body th, 
    .f1liveticker .body td {
        padding:       2px 0 2px 5px;
        text-align:    left;
    }

    /* Zebra colors for odd/even entries */
    .f1liveticker .body .odd {
        background-color:       #fff;
    }
    .f1liveticker .body .even {
        background-color:       transparent;
    }

    .f1liveticker .body th {
        color:              #666;
        font-weight:        700;
    }
    .f1liveticker .body td {
        color:              #323232;
    }

    /* Some aadditional formats for columns */
    .f1liveticker .body .name {
        font-weight:    700;
    }
    .f1liveticker .body .time {
        text-align:         right;
        padding-right:      10px;
    }


/**
 * Liveticker footer
 *
 * @section  footer
 */
.f1liveticker .footer {
    margin-top:     7px;
    margin-bottom:  2px;
    text-align:     right;
}

/* Begin: impression.css */

/**
 *  SDE Impression Module
 *  
 *  Displays a single image, linked somewhere interesting.
 *
 *  Based on `basebox`, HTML as follows:
 *
 *  <pre><code>
 *  <div class="basebox impression">
 *      <div class="header"><a href="%MODULE_URL%">%MODULE_TITLE%</a></div>
 *      <div class="body">
 *          <a href="%MODULE_URL%">
 *              <img src="../static/placeholder.png#%ITEM_IMAGE_URL%" width="281" height="75" alt="%ITEM_TITLE%">
 *          </a>
 *      </div>
 *  </div>
 *  </code></pre>
 *  
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_impression
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
    .impression .body a {
        display:    block;
        margin:     0 auto;
        width:      280px;
    }

/* Begin: singlelink.css */
/**
 *  SDE Single-link module
 *
 *  Based on `basebox`, displays a single link.
 *  Markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox singlelink">
 *          <a href="#TODO" class="body">link text goes here</a>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_singlelink
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.singlelink {
    padding:    0;
}
    .singlelink .body {
        display:        block;
        font-weight:    400;
        padding:        7px 0 7px 10px;
        text-align:     left;
        width:          285px;
    }
    .singlelink strong {
        color:          #000;
        font-weight:    700;
    }

/* Begin: sponsored.css */
/**
 *  Sponsored Basebox Module
 *
 *  Baseboxes are sometimes sponsored by a particular company; we display
 *  their logo, and link to whatever page they've paid us to link up.
 *
 *      <div class="basebox">
 *          <div class="header">...[TITLE]...</div>
 *          <div class="body">...[CONTENT]...</div>
 *          <div class="footer sponsor">
 *              <a href="[SPONSOR_URL">
 *                  [SPONSOR_TEXT e.g. "Presented by"]
 *                  <img src="[SPONSOR_LOGO]" width="[WIDTH]" height="[HEIGHT]" alt="[SPONSOR_ALT_TEXT]">
 *              </a>
 *          </div>
 *      </div>
 *  
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_sponsored
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.basebox .sponsor {
    text-align: right;
}
    .basebox .sponsor a {
        color:          #666;
        font-size:      86%;
        font-weight:    400;
        vertical-align: top;
    }
    .basebox .sponsor img {
        margin-left:    5px;
    }

/* Begin: inlinevideo.css */
/**
 *  SDE Inline Video Module
 *
 *  <pre><code>
 *      <div class="basebox inlinevideo sidebar">
 *          <div class="header"><a href="/video/">Video</a></div>
 *          <div class="body">
 *              <a href="http://www.sueddeutsche.de/video/%VIDEO_ID%.html" data-be="http://sueddeutsche.de/">
 *                  <img src="%VIDEO_THUMBNAIL_URL%" width="280" height="179" alt="">
 *                  <span class="cta">Video abspielen</span>
 *                  <span class="title">%VIDEO_TITLE%</span>
 *              </a>
 *          </div>
 *          <div class="footer">
 *              <p>%TEASER_TEXT%</p>
 *          </div>
 *      </div> 
 *  </code></pre>
 *
 * @TODO: Some styles are identical with "tipsnear2you" module of Regionalchannel project,
 *        they should be merged!
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_inlinevideo
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.inlinevideo {
    margin:     1.5em 0;
    overflow:   visible;
    position:   relative;
}

    /* @todo: we need a classname for the video anchor */
    .inlinevideo .body a {
        display:        block;
        height:         158px;
        overflow:       hidden;
        padding-bottom: 0;
        position:       relative;
        width:          280px;
    }
        .maincolumn .inlinevideo .body a {
            height:     auto;
            width:      auto;
        }
        .ie6 .maincolumn .inlinevideo .body a {
            zoom:       1;
        }

        /* Reset width/height (formats from above) of anchors in lists */
        .inlinevideo .body ul a {
            height:     auto;
            overflow:   auto;
            width:      auto;
        }
    
    .inlinevideo img {
        display:    block;
    }
    .inlinevideo .cta {
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) left -300px no-repeat;
        display:        block;
        height:         35px;
        left:           212px;
        position:       absolute;
        text-indent:    -99em;
        top:            168px;
        width:          35px;

        /* Browser-specific Opacity */
        -moz-opacity:   0.4;
        opacity:        0.4;
    }
        .ie .inlinevideo .cta {
            filter:alpha(opacity=40);
            cursor: pointer;
        }
        .inlinevideo :hover .cta {
            -moz-opacity:0.6;
            opacity:    0.6;
        }
            .ie .inlinevideo :hover .cta {
                filter:alpha(opacity=60);
            }
        .headslotvideo .cta {
            top:    42%;
            left:   47%;
        }
    .inlinevideo .title {
        background: rgba( 0, 0, 0, 0.6 );
        bottom:     0px;
        color:      #FFF;
        display:    block;
        left:       0px;
        padding:    3px 5px;
        position:   absolute;
    }
        .inlinevideo :hover .title {
            background: rgba( 0, 0, 0, 1 );
        }
            .ie .inlinevideo :hover .title {
                filter:alpha(opacity=99);
            }
        .ie .inlinevideo .title {
            /* IE doesn't do rgba */
            background:     #000;
            cursor:         pointer;
            filter:alpha(opacity=60);
        }

/**
 *  Sidebar Videos (tiny!) (280x157)
 *  @section Sidebar
 */
.sidebar .inlinevideo {
    margin:     0;
}
    .sidebar .inlinevideo .body {
        overflow:   visible;
    }
        .sidebar .inlinevideo .body a {
            padding-bottom: 0;
            position:       relative;
        }
        .sidebar .inlinevideo .cta {
            left:   122px;
            top:    61px;
        }
        .sidebar .inlinevideo .title {
            width:  270px;
        }
    .sidebar .inlinevideo object {
        display:    block;
        height:     180px;
        width:      280px;
    }
    .inlinevideo .footer {
        display:    none;
    }

    .sidebar .inlinevideo .footer a {
        font-size:      107%;
        font-weight:    700;
        padding-bottom: 0;
    }
        .sidebar .inlinevideo li a strong {
            position:   static;
            left:       auto;
        }
/**
 *  Expanded Sidebar Video (big!!) (675x402)
 *  @section    Expanded
 */
.sidebar .expanded {
    background:     #000;
    border:         1px solid #000;
    left:           -500px;
    width:          675px;

    /**
     *  Browser-specific border radius
     */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius:  8px;
}
    .sidebar .expanded .teaserlist {
        display:    none;
    }
    #articlesidebar .expanded {
        background: #000;
    }
    .sidebar .expanded .header a {
        color:  #FFF;
    }
    .sidebar .expanded object {
        width:  675px;
        height: 402px;
    }
    .sidebar .expanded .footer {
        color:      #FFF;
        display:    block;
        font-size:  123.1%;
    }
        .sidebar .expanded .footer strong {
            font-weight:    700;
        }
        .sidebar .expanded .footer p {
            margin: 0;
        }

/* Begin: inlineflash.css */
/**
 *  SDE Inline Flash Module
 *
 *  <pre><code>
 *      <div class="basebox inlinevideo sidebar">
 *          <div class="header"><a href="/video/">Video</a></div>
 *          <div class="body">
 *              <a href="http://www.sueddeutsche.de/video/%VIDEO_ID%.html" data-be="http://sueddeutsche.de/">
 *                  <img src="%VIDEO_THUMBNAIL_URL%" width="280" height="179" alt="">
 *                  <span class="cta">Video abspielen</span>
 *                  <span class="title">%VIDEO_TITLE%</span>
 *              </a>
 *          </div>
 *          <div class="footer">
 *              <p>%TEASER_TEXT%</p>
 *          </div>
 *      </div> 
 *  </code></pre>
 *
 * @TODO: Some styles are identical with "tipsnear2you" module of Regionalchannel project,
 *        they should be merged!
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_inlinevideo
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.flashelement {
    margin:     1.5em 0;
    overflow:   visible;
    position:   relative;
}
    .flashelement a {
        display:        block;
        padding-bottom: 0;
        position:       relative;
    }
        .ie6 .maincolumn .flashelement a {
            zoom:       1;
        }
    
    .flashelement img {
        display:    block;
    }
    .flashelement a span {
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) left -300px no-repeat;
        display:        block;
        height:         35px;
        left:           47%;
        position:       absolute;
        text-indent:    -99em;
        top:            42%;
        width:          35px;

        /* Browser-specific Opacity */
        -moz-opacity:   0.4;
        opacity:        0.4;
    }
        .ie .flashelement a span {
            filter:alpha(opacity=40);
            cursor: pointer;
        }
        .flashelement a:hover span {
            -moz-opacity:0.6;
            opacity:    0.6;
        }
            .ie .flashelement a:hover span {
                filter:alpha(opacity=60);
            }

/* Begin: dynamiclist.css */
/**
 *  SDE Dynamic List Module Module
 *
 *  This module type displays a list of links, each with an image.  On load,
 *  the first link's image is displayed in the top-left corner of the module,
 *  and the first link is marked "active".  On mouseover of any other link in
 *  the list, the image is swapped out with the new link's image, and the new
 *  link is marked "active".
 *
 *  Based on `basebox`, the markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox dynamiclist [small/medium/large]">
 *          <div class="header">
 *              <a href="http://blogs.sueddeutsche.de/">Blogs</a>
 *          </div>
 *          <div class="body">
 *              <ul>
 *                  <li class="first active">
 *                      <a href="%URL%" rel="bookmark">
 *                          <img src="%IMAGE%" width="48" height="48" alt="">
 *                          <strong>%SUBTITLE%</strong>
 *                          %TITLE%
 *                      </a>
 *                  </li>
 *                  ...
 *                  <li class="last">
 *                      <a href="%URL%" rel="bookmark">
 *                          <img src="%IMAGE%" width="48" height="48" alt="">
 *                          <strong>%SUBTITLE%</strong>
 *                          %TITLE%
 *                      </a>
 *                  </li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @requires   sde.widget.dynamiclist
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_dynamiclist
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.dynamiclist .body {
    position:   relative;
}
.dynamiclist li {
    margin:     0;
    padding:    0;
    position:   static;
}
    .small li, .small li.last {
        margin-left:    60px;
    }
    .medium li, .medium li.last {
        margin-left:    90px;
    }
.dynamiclist .body strong {
    color:      #333;
    display:    inline;
}

.dynamiclist .body a,
.sidebar .dynamiclist .body a {
    color:          #333;
    font-size:      11px;
    font-weight:    400;
    display:        block;
    padding-bottom: 10px;
}
    .dynamiclist .last a,
    .sidebar .dynamiclist .last a {
        padding:    0;
    }
    .dynamiclist .active a strong {
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) -450px -21px;
        padding-left:   10px;
    }

.dynamiclist img {
    display:    none;
    left:       0;
    position:   absolute;
    top:        0;
}
    .dynamiclist .active img {
        display:    block;
    }

/* Begin: focusedteaser.css */
/**
 *  SDE Focused Teaser Basebox
 *
 *  Currently used to implement the "Quote of the Day"/"Image of the Day"
 *  modules on the SDE homepage, this module displays a teaser in a 
 *  "focused" format, either with large, serif text, or as a single large
 *  image.  The module uses the usual basebox layout, replacing the background
 *  color with flat white, removing the internal margins, and increasing the
 *  font size of both the header and internal text.
 *
 *  Markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox focusedteaser" role="complementary" aria-labelledby="[TYPE]label">
 *          <div class="header"><a href="%LINK_URL%">%MODULE_TITLE%</a></div>
 *          [Body goes here: markup for each type will be presented below]
 *          <div class="footer"><a href="%LINK_URL%">%LINK_TITLE%</a></div> <-- Optional.
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_focusedteaser
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.focusedteaser {
    background: #FFF;
    font-size:  100%;
    margin:     0 0 20px;
    position:   relative;
    width:      536px;
}
    .focusedteaser .header {
        font-size:      153.9%;
        margin:         0 0 5px;
        border-bottom:  1px solid #BBB;
    }
        .focusedteaser .header a {
            background:     none;
            font-weight:    400;
            text-transform: none;
        }
    .focusedteaser .footer a {
        background:     url(/static_assets/build/img/modules/basebox/unsprited/icon-arrow-next-small.ccc6d3b5.png) top right no-repeat;
        color:          #666;
        font-size:      85%;
        font-weight:    700;
        padding:        7px 30px 3px 0;
        position:       absolute;
        right:          0;
        top:            8px;
    }
/**
 *  Text format (Quote of the Day, for instance)
 *
 *  Markup for the module's body is as follows:
 *
 *  <pre><code>
 *      ...
 *          <p class="body">
 *              <img
 *                  src="%THUMBNAIL_IMAGE_SRC%"
 *                  width="100"     
 *                  height="100"    
 *                  alt=""
 *              >
 *              <span class="quote">&bdquo;</span>
 *              %TEASER_TEXT%
 *              <cite>%TEASER_CITATION%</cite>
 *          </p>
 *      ...
 *  </code></pre>
 *
 *  @section    Text
 */
.focusedteaser p.body {
    color:          #666;
    font-size:      123.1%;
    line-height:    1.6;
    font-family:    Georgia, 'Times New Roman', Serif;
}
    .focusedteaser p.body img {
        float:  left;
        margin: 0 1em 0 0;
    }
    .focusedteaser .quote {
        font-size:      187.5%;
        line-height:    0.4;
    }
    .focusedteaser cite {
        color:          #BBB;
        display:        block;
        font-family:    Aria, Helvetica, 'Sans Serif';
        font-size:      68.75%;
        margin-top:     0.5em;
    }

/**
 *  Image format (Quote of the Day, for instance)
 *
 *  Markup for the module's body is as follows:
 *
 *  <pre><code>
 *      ...
 *          <div class="body">
 *              <a href="%IMAGE_URL%">
 *                  <span id="dailyphotolabel">Bild des Tages</span>
 *                  <img src="%IMAGE_SRC%" width="536" height="402" alt="%IMAGE_ALT%">
 *                  <span class="offscreen">Call to action text, to be hidden offscreen</span>
 *              </a>
 *          </div>
 *      ...
 *  </code></pre>
 *
 *  @section    Text
 */
.focusedteaser div.body {
    margin: 0;
}

/* Begin: gallerylist.css */
/**
 *  SDE Gallery List module
 *
 *  Used (at the moment) only on the last page of image galleries,
 *  this module displays a series of `imageblock related` baseboxen
 *  across the page.  Markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox gallerylist">
 *          <p class="header">[TITLE]</p>
 *          <ul class="body">
 *              <li>[IMAGEBLOCK RELATED]</li>
 *              <li>[IMAGEBLOCK RELATED]</li>
 *              <li>[IMAGEBLOCK RELATED]</li>
 *              <li>[IMAGEBLOCK RELATED]</li>
 *          </ul>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.gallerylist {
    background: #FFF;
    margin-top: 1em;
}
    .gallerylist .header {
        margin-left:    0;
    }
    .gallerylist li {
        clear:  none;
        float:  left;
        width:  255px;
    }
    .gallerylist .newline {
        clear:          left;
        margin-right:   26px;
    }

/* Begin: imageblock.css */
/**
 *  SDE Image Block Module
 *
 *  A full-width module that displays images horizontally across the page, each
 *  with a title and subtitle.  The module can be used both as a selfcontained
 *  block across the entire page's width, or as part of a teaserlist.
 *
 *  Based on `basebox`, the markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox imageblock" role="complementary" aria-labelledby='imageblocklabel'>
 *          <div class="header"><a href="/bilder/" id="imageblocklabel">Bilder</a></div>
 *          <div class="body">
 *              <ul>
 *                  <li class="hentry first">
 *                      <a href="[TEASER URL]" class="entry-title" rel="bookmark">
 *                          <img
 *                              src="[IMAGE URL]"
 *                              width="152"
 *                              height="152"
 *                              alt=""
 *                          >
 *                          <strong>[OVERLINE]</strong>
 *                          [TITLE]
 *                      </a>
 *                  </li>
 *                  ...
 *                  <li class="hentry last">
 *                      <a href="[TEASER URL]" class="entry-title" rel="bookmark">
 *                          <img
 *                              src="[IMAGE URL]"
 *                              width="152"
 *                              height="152"
 *                              alt=""
 *                          >
 *                          <strong>[OVERLINE]</strong>
 *                          [TITLE]
 *                      </a>
 *                  </li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_imageblock
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.imageblock {
    border:     2px solid #E7E7E7;
    clear:      both;
    font-size:  100%;
}
    .imageblock .header {
        font-size:  93%;
        margin:     0 16px 10px;
    }
        .imageblock .header a {
            color:      #666;
            background: none;
        }
    .imageblock .body {
        font-size:  85%;
        margin: 5px 16px;
    }
        .teaserlist .imageblock .body {
            font-size:  100%;
        }
        .ie .imageblock .body {
            zoom:   1;
        }
    .imageblock li, .teaserlist .imageblock li {
        clear:      none;
        float:      left;
        margin:     0 16px 0 0;
        padding:    0;
        width:      152px;
    }
        
        .imageblock li a strong,
        .imageblock li a span {
            color:  #333;
        }
    .imageblock img, .teaserlist .imageblock img  {
        display:    block;
        float:      none;
        margin:     0 0 10px;
    }
/**
 *  When the imagblock is displayed in an article, the images are smaller,
 *  it doesn't span the whole width, and the images are smaller.
 *
 *  @section    Article
 */
.article .imageblock {
    border-color:   #BBB;
    float:          left;
    margin:         0 10px 10px 0;
    width:          300px;
}
    .article .imageblock .header,
    .article .imageblock .body {
        margin-left:    10px;
        margin-right:   10px;
    }
    .article .imageblock li {
        margin: 0 0 0 4px;
        width:  90px;
    }
        .article .imageblock .first {
            margin: 0;
        }
    .article .imageblock p {
        margin: 0;
    }
    .article .imageblock .footer a, .article .imageblock .footer strong {
        color:      #333;
        font-size:  85%;
    }
        .article .imageblock .footer strong {
            display:        block;
            font-size:      100%;
            font-weight:    700;
        }
/**
 *  When the imageblock is displayed inside of a teaserlist, it needs to be
 *  presented slightly differently.
 *  @section    TeaserList
 */
.teaserlist .imageblock {
    background: #FFF;
    border:     0;
    font-size:  100%;
    margin:     8px 0 0;
}
    .teaserlist .imageblock ul {
        margin-top: 10px;
    }
    .teaserlist .imageblock .header a,
    .teaserlist .imageblock .body {
        margin:     0;
        padding:    0;
    }
    .teaserlist .imageblock li {
        margin: 0 16px 0 0;
        width:  168px;
    }
        .teaserlist .imageblock li a {
            line-height:    1;
        }
            .teaserlist .imageblock li a strong {
                display:        block;
                padding-top:    0;
            }
        .teaserlist .imageblock .last {
            margin: 0;
        }


/* Begin: imageblock_related.css */
/**
 *  SDE Image Block Module: Related Lists
 *
 *  Image blocks displaying "related" content (for example, on the last
 *  page of image galleries) are displayed a bit differently, with a white
 *  background and only two-wide.
 *
 *  Based on `basebox imageblock`, the markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox imageblock related">
 *          <div class="body">
 *              <ul>
 *                  <li class="hentry first">
 *                      <a href="[TEASER URL]" class="entry-title" rel="bookmark">
 *                          <img
 *                              src="[IMAGE URL]"
 *                              width="152"
 *                              height="152"
 *                              alt=""
 *                          >
 *                          <strong>[OVERLINE]</strong>
 *                          [TITLE]
 *                      </a>
 *                  </li>
 *                  <li class="hentry last">
 *                      <a href="[TEASER URL]" class="entry-title" rel="bookmark">
 *                          <img
 *                              src="[IMAGE URL]"
 *                              width="152"
 *                              height="152"
 *                              alt=""
 *                          >
 *                          <strong>[OVERLINE]</strong>
 *                          [TITLE]
 *                      </a>
 *                  </li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_imageblock_related
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.related {
    background:     #FFF;
    border:         0;
    font-size:      100%;
    width:          255px;
}
    .article .related {
        margin-bottom:  0;
        width:          255px;
    }
    .article .related strong {
        display:    inline;
    }
    .related .body {
        margin: 0 0 5px 0;
    }
        .related .body li {
            border:         1px solid #999;
            height:         120px;
            width:          120px;
            margin-left:    10px;
            text-align:     center;
        }
        .related .body a {
            display:        block;
        }
        .related .body img {
            display:        block;
            float:          none;
            margin:         0 auto;
            padding:        0;
        }
    .related .footer {
        margin-left:    0;
    }

.article .related .body {
    margin: 0 0 5px 0;
}

/* Begin: infothek.css */
/**
 *  SDE Infothek Basebox Modules
 *
 *  Modules in the homepage's infothek box are special cases of the general
 *  basebox.  They require changes to basebox's margins and widths, as well
 *  as background colours, borders, and possibly icons.  Each box type will
 *  be detailed below.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_infothek
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

#infothek {
    border:         1px solid #BBB;
    border-width:   1px 0;
    clear:          both;
    margin:         20px 0 0;
    overflow:       hidden;
}

/**
 *  The basic `basebox` is one column wide in the Infothek region,
 *  168px.  It's header, body, and footer have 0px left-
 *  margin and padding.
 *
 *  @section    Basebox
 */
#infothek .basebox {
    background: none;
    width:      168px;
}
    #infothek .header,
    #infothek .body,
    #infothek .footer {
        margin-left:    0;
        padding-left:   0;
    }
    #infothek .basebox .header {
        color:  #000;
    }
    #infothek .basebox li {
        margin:         0 0 5px 0;
        padding:        1px 0;
    }
        #infothek .basebox li a {
            color:          #666;
            display:        block;
            height:         13px;
            margin-top:     0;
            overflow:       hidden;
            white-space:    nowrap;
            
            /* I love browsers. */
            -o-text-overflow:       ellipsis;
            -ms-text-overflow:      ellipsis;
            -moz-text-overflow:     ellipsis;
            -webkit-text-overflow:  ellipsis;
            text-overflow:          ellipsis;


        }

/**
 *  The last item in the Infothek region is a 'liveticker' module, which
 *  fills the 300px sidebar region of the page.
 *  @section    Liveticker
 */
#infothek .liveticker {
    margin-left:    8px;
    width:          300px;
}
    #infothek .liveticker li a {
        color:      #024282;
    }
    #infothek .liveticker span {
        color:      #666;
    }

/**
 *  Infothek Module is based on the typical `.basebox .columns` module,
 *  but has wider internal columns, a wider internal margin, and therefore
 *  a wider external width.
 *
 *  Each item in the columned list has an icon.  The sprite rules are all
 *  listed here.
 *
 *  @section    Infothek Module
 */
#infothek .columns {
    width:  352px;
}
    #infothek .columns ul {
        margin-left:    -16px;
    }
        .ie #infothek .columns ul {
            left:           -16px;
            margin-left:    0;
            position:       relative;
        }
    #infothek .columns li {
        /* background: url(/static_assets/build/img/site/sprite-infothek.4421cb28.png) no-repeat; */
        margin:     0 0 5px 16px;
        /* padding:    1px 0 1px 20px; */
        width:      138px;
    }
        #infothek .columns .icon_1       {   background-position:1px 0px;     }
        #infothek .columns .icon_2       {   background-position:1px -42px;     }
        #infothek .columns .icon_3       {   background-position:1px -82px;     }
        #infothek .columns .icon_4       {   background-position:1px -122px;     }
        #infothek .columns .icon_5       {   background-position:1px -163px;     }
        #infothek .columns .icon_6       {   background-position:1px -207px;     }
        #infothek .columns .icon_7       {   background-position:1px -246px;     }
        #infothek .columns .icon_8       {   background-position:1px -288px;     }
        #infothek .columns .icon_9       {   background-position:1px -329px;     }
        /*
        #infothek .columns .icon_document    {   background-position:1px -620px;     }
        #infothek .columns .icon_mail        {   background-position:1px -670px;     }
        #infothek .columns .icon_person      {   background-position:1px -720px;     }
        #infothek .columns .icon_telephone   {   background-position:2px -770px;     }
        #infothek .columns .icon_politbaro   {   background-position:2px -821px;     }
        #infothek .columns .icon_energie     {   background-position:4px -869px;     }
        #infothek .columns .icon_bmi         {   background-position:2px -920px;     }
        #infothek .columns .icon_kino        {   background-position:2px -970px;     }
        #infothek .columns .icon_gehaltst    {   background-position:3px -720px;     }
        #infothek .columns .icon_kfz         {   background-position:2px -1015px;    }
        #infothek .columns .icon_jobatlas    {   background-position:2px -1063px;    }
        #infothek .columns .icon_gehrechner  {   background-position:2px -1110px;    }
        #infothek .columns .icon_kredit      {   background-position:2px -1155px;    }
        #infothek .columns .icon_internet    {   background-position:1px -1200px;    }
        #infothek .columns .icon_musterver   {   background-position:2px -1247px;    }
        */
    #infothek .columns .last {
        margin:     0 0 0 16px;
    }


/* Begin: liveticker.css */
/**
 *  SDE Liveticker Module
 *
 *  The liveticker module displays a list of links (or paragraphs) in
 *  chronological order, along with their timestamps.
 *
 *  Based on `basebox`, markup is as follows:
 *
 *  <pre><code>
 *      <div class="basebox liveticker">
 *          <div class="header">Newsticker</div>
 *          <ol class="body">
 *              <li>
 *                  <span class="dtstart">
 *                      %ITEM_HUMAN_READABLE_TIME%
 *                      <span class="value">%ITEM_MACHINE_PARSABLE_TIME%</span>
 *                  </span>
 *                  <a href="%ITEM_URL%">%ITEM_TEXT%</a>
 *              </li>
 *              ...
 *              <li>
 *                  <span class="dtstart">
 *                      %ITEM_HUMAN_READABLE_TIME%
 *                      <span class="value">%ITEM_MACHINE_PARSABLE_TIME%</span>
 *                  </span>
 *                  <p>%ITEM_TEXT%</p>
 *              </li>
 *          </ol>
 *      </div>
 *  </code></pre>
 *
 *  @param  %ITEM_HUMAN_READABLE_TIME%      The human-readable time that
 *                                          ought be displayed to a user.
 *
 *  @param  %ITEM_MACHINE_PARSABLE_TIME%    The item's timestamp, encoded in ISO
 *                                          8601 format: `strftime(%Y-%m-%dT%H:%M:%S%z)`
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_liveticker
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.liveticker {
    font-size:      83%;
}
    .liveticker ol,
    .liveticker ol li {
        position:               relative;   /* So that I can absolutely position the span. */
        list-style:             none;
        list-style-position:    outside;
        margin:                 0;
    }
    .liveticker .value {
        display:        none;
    }
    .liveticker li {
        margin:         0.25em 0;
        position:       relative;
    }
        .ie6 .liveticker li {
            zoom:   1;
        }
        .liveticker li span {
            color:          #666;
            font-weight:    700;
            left:           0;
            margin-right:   10px;
            overflow:       hidden;
            position:       absolute;
            width:          30px;
        }
        .liveticker li a {
            display:        block;
            overflow:       hidden;
            margin-left:    35px;
            white-space:    nowrap;
            
            /* I love browsers. */
            -o-text-overflow:       ellipsis;
            -ms-text-overflow:      ellipsis;
            -moz-text-overflow:     ellipsis;
            -webkit-text-overflow:  ellipsis;
            text-overflow:          ellipsis;
        }

    .sidebar .liveticker .body a {
        font-size:      100%;
        font-weight:    400;
    }

/* Begin: opinion.css */
/**
 *  SDE Opinion Module
 *
 *  The opinion module is implemented as two seperate `basebox` modules, the
 *  first with an `opinion` class, the second with a `column` class.  I think
 *  we'll need to revisit this later, but that's how it's working for now:
 *
 *      <div class="basebox opinion">
 *          <div class="header"><a href="#MEINUNG OVERVIEW">Meinung</a></div>
 *          <div class="body">
 *              <ul>
 *                  <li class="first last">
 *                      <a href="#TODO" rel="bookmark">
 *                          <img src="%AUTHOR_IMAGE%" width="75" height="75" alt="">
 *                          <cite class="vcard fn">%AUTHOR%</cite>
 *                          <strong>%SUBTITLE%</strong>
 *                          %TITLE%
 *                      </a>
 *                  </li>
 *              </ul>
 *          </div>
 *      </div>
 *      <div class="basebox column">
 *          <div class="header"><a href="#KOLUMNE OVERVIEW">Kolumne</a></div>
 *          <div class="body">
 *              <ul>
 *                  <li class="first last">
 *                      <a href="#TODO" rel="bookmark">
 *                          <img src="%AUTHOR_IMAGE%" width="75" height="75" alt="">
 *                          <cite class="vcard fn">%AUTHOR%</cite>
 *                          <strong>%SUBTITLE%</strong>
 *                          %TITLE%
 *                      </a>
 *                  </li>
 *              </ul>
 *          </div>
 *      </div>
 *
 *  @link   ${VELOCITY_ROOT}/multiplebaseboxteaserlist.vm
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_opinion
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.column .header {
    border-top: 1px solid #DDD;
}
.opinion {
    padding-bottom: 0;
}

/* Bump font size down to 11px for links */
.sidebar .opinion .body a,
.sidebar .column .body a {
    font-size:      100%;
}
    /*  Set the colour of the opinion overline, and the column link */
    .opinion a strong {
        color:      #000;
        margin-top: 20px;
    }

    .column li a, .column li strong {
        color:      #000;
        display:    inline;
    }
        .column li strong {
            padding-right:  0.5em;
        }
        .column li a {
            font-weight:    400;
        }
/* Push the summary paragraph off the page to the left */
.opinion .entry-summary,
.column .entry-summary {
    top:        0px;
    position:   absolute;
    left:       -2000px;
}
    /* Bring the opinion module's author back */
    .opinion .entry-summary .author {
        font-size:  118.18%;
        position:   absolute;
        top:        0px;
        left:       2085px;
        width:      180px;
    }
        .ie6 .opinion .entry-summary .author {
            left:   2000px;
        }
        .opinion .noimage .entry-summary .author {
            left:   2000px;
            width:  280px;
        }

    .opinion li {
        position:   relative;
    }

/**
 *  Opinion and column modules need their overlines
 */
    .sidebar .opinion li a strong,
    .sidebar .column li a strong {
        position:   static;
        left:       auto;
    }

/* Begin: representativeswatch.css */
/**
 *  SDE Abgeordnetenwatch Module
 *
 *  Displays the representatives watch module, with the newest answer to an topic,
 *  a searchform with external destination url and a paragraph.
 *
 *  <pre><code>
 *  <div class="basebox representativeswatch">
 *      <div class="header"><a href="#TODO_Abgeordnetenwatch_Url">Politik transparent gemacht</a></div> 
 *      <div class="body">
 *          <div class="answeritem">
 *              <img src="%IMAGE%" alt="%IMAGE_ALT%">
 *              <strong class="title">Die neueste Antwort</strong>
 *              <a class="answer" href="#TODO_Antwort_URL">%MODULE_AUTHOR%</a>
 *              <span class="topic">antwortet zum Thema: <a href="#TODO_Thema_URL">%MODULE_TOPIC%</a></span>
 *          </div>
 *          <form action="http://www.abgeordnetenwatch.de" method="get">
 *              <label for="plz" class="offscreen">Postleitzahl oder Schlagwort:</label>
 *              <input type="text" class="input" value="" placeholder="Postleitzahl oder Schlagwort" name="plz">
 *              <input type="submit" class="cta" value="abschicken">
 *          </form>
 *  
 *          <p>%MODULE_TEXT%</p>
 *      </div>
 *      <div class="footer">
 *          <a href="http://www.abgeordnetenwatch.de" title="Link auf abgeordnetenwatch.de" target="_blank">abgeordnetenwatch.de</a>
 *      </div>
 *  </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_representativeswatch
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


/**
 *  Box representatives watch
 *  @section    representativeswatch
 */
.representativeswatch .body .answeritem {
    clear:       both;
    font-size:   100%;
    margin:      0 0 17px 0;
    overflow:    hidden;
    padding:     0;
}
.ie6 .representativeswatch .body .answeritem {
    zoom: 1;
}

    .representativeswatch .body .answeritem img {
        float:           left;
        margin-right:    8px;
    }

    .representativeswatch .body .answeritem a {
        font-size:        100%;
    }

    .representativeswatch .body .answeritem .title {
        color:            #000;
        display:          block;
        font-weight:      bold;
        margin-bottom:    6px;
    }

    .representativeswatch .body .answeritem .answer {
        display:          block;
        margin-bottom:    6px;
    }

    .representativeswatch .body .answeritem .topic {
        color:        #606060;
        display:      block;
    }

.representativeswatch .body form {
    clear:      both;
    overflow:   hidden;
    margin-top: 3px;
}
/* Set a border for IE so that IE 6 renders the distance to beneath element */
.ie6 .representativeswatch .body form {
    border:     1px solid #EEE;
}

    .representativeswatch .body form .text {
        float:      left;
        width:      190px;
    }

    .representativeswatch .body form .cta {
        background-color:       #606060;
        border:                 1px solid #606060;
        float:                  right;
        font-size:              100%;
        padding:                1px 6px;
        cursor:                 pointer;
    }
    .ie6 .representativeswatch .body form .cta,
    .ie7 .representativeswatch .body form .cta {
        padding:            0 6px;
        border-style:       none !important;
        border-width:       0 !important;
    }

.representativeswatch .body p {
        color:        #606060;
        margin-top:   14px;
}


.representativeswatch .footer a {
    background:         transparent url(/static_assets/build/img/modules/representativeswatch/logo_abgeordnetenwatch.7e256ae6.png) no-repeat left top;
    color:              #000;
    display:            block;
    font-weight:        400;
    font-size:          108%;
    height:             22px;
    margin-top:         10px;
    padding:            8px 0 0 37px;
    text-decoration:    none;
}

/* Begin: szpromo.css */
/**
 *  SDE SZ Verlag Promo module
 *
 *  Displays the stories coming up tomorrow (or today, after midnight) in the print
 *  edition, in the hopes that people will subscribe to the newspaper for these
 *  exciting stories.  Additionally, links off to a variety of Verlag-sites outside
 *  of sueddeutsche.de.  These are marked up as an unordered list, and transformed
 *  into a select box via javascript.
 *
 *  Based on `basebox`, markup is as follows:
 *
 *  <pre><code>
 *    <div id="szpromo" class="basebox">
 *          <div class="header">
 *              <a href="http://www.sueddeutsche.de/verlag/app/630/95535/">Seien Sie anspruchsvoll.</a>
 *          </div>
 *          <div class="body">
 *              <p><a href="https://service.sueddeutsche.de/index.htm">
 *                  Morgen in der SZ<span class="offscreen"> kommt:</span>
 *                  <span>%TEXT_1%</span>
 *                  <span>%TEXT_2%</span>
 *              </a></p>
 *              <p class="extra"><a href="[SOMEWHERE]">
 *                  <strong>[TEXT]</strong> [MORE TEXT]
 *              </a></p>
 *          </div>
 *          <div class="footer">
 *              <p>Weitere Services</p>
 *              <ul>
 *                  <li><a href="http://www.sueddeutsche.de/verlag/app/630/95535/#2">Abo - Angebote</a></li>
 *                  <li><a href="http://www.sueddeutsche.de/verlag/app/630/95535/#3">Abo - Service</a></li>
 *                  ...
 *                  <li><a href="http://www.sueddeutsche.de/verlag/app/630/95535/#8">Sonderthemen der SZ</a></li>
 *                  <li><a href="http://www.sueddeutscher-verlag.de/">S&uuml;ddeutscher Verlag</a></li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  JavaScript transforms the footer of this module into a select box:
 *
 *  <pre><code>
 *      ...
 *          <div class="footer">
 *              <form>
 *                  <label for="UNIQUEID">Weitere Services</label>
 *                  <select id="UNIQUEID">
 *                      <option value="http://www.sueddeutsche.de/verlag/app/630/95535/#2">Abo - Angebote</option>
 *                      ...
 *                  </select>
 *              </form>
 *          </div>
 *      ...
 *  </code></pre>
 *
 *  @link       ${VELOCITY_ROOT}/site/inthepaper.vm
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_singlelink
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
#szpromo {
    background: #EEE url(/static_assets/build/img/sdesiteheader/zeitungsbild.8dc6c608.png) no-repeat top left;
    margin-top: -5px;
    padding:    0;
}
#szpromo .header a {
    background:     none;
    text-transform: none;
}
#szpromo .body a {
    color:      #08AD9C;
    display:    block;
    font-size:  100%;
}
    #szpromo a span {
        color:          #000;
        display:        block;
        font-weight:    400;
        padding:        2px 0;
    }
    #szpromo .extra a {
        color:          #000;
        margin:         10px 0 5px;
    }
        #szpromo .extra strong {
            color:          #08AD9C;
        }
/**
 *  SZ Promo footer: links to exciting SV destinations!
 *  @section footer
 */
.js #szpromo .footer {
    background: #666;
    margin:     0;
    padding:    5px 10px;
}
    .js #szpromo .footer ul, .js #szpromo .footer p {
        display:    none;
    }
    .js #szpromo .footer label {
        color:          #FFF;
        display:        inline;
        font-weight:    700;
        margin-right:   10px;
    }
#szpromo select {
    display:    inline;
}

/* Begin: tagcloud.css */
/**
 *  SDE Tagcloud Basebox
 *
 *  Tag clouds display a list of tags for the current page in an unordered
 *  list, assigning a weight from `weight1` through `weight5` via a CSS class
 *  placed onto the list element.
 *
 *  Markup as follows:
 *
 *  <pre><code>
 *      <div class="basebox tagcloud">
 *          <div class="header">[TITLE]</div>
 *          <div class="body">
 *              <ul>
 *                  <li class="weight[WEIGHT]"><a href="#TODO" rel="tag">[TAG]</a></li>
 *                  <li class="weight[WEIGHT]"><a href="#TODO" rel="tag">[TAG]</a></li>
 *                  <li class="weight[WEIGHT]"><a href="#TODO" rel="tag">[TAG]</a></li>
 *                  ...
 *                  <li class="weight[WEIGHT]"><a href="#TODO" rel="tag">[TAG]</a></li>
 *                  <li class="weight[WEIGHT]"><a href="#TODO" rel="tag">[TAG]</a></li>
 *                  <li class="weight[WEIGHT]"><a href="#TODO" rel="tag">[TAG]</a></li>
 *              </ul>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_tagcloud
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.tagcloud li,
.tagcloud a {
    display:        inline;
    line-height:    22px;
    margin:         0 5px 0 0;
}
    .sidebar .tagcloud .weight1 a,
    .tagcloud .weight1 a {  font-size:  93%; font-weight: 400; }
    .sidebar .tagcloud .weight2 a,
    .tagcloud .weight2 a {  font-size:  93%; }
    /*
    .sidebar .tagcloud .weight3 a,
    .tagcloud .weight3 a {  font-size:  100%; }
     */
    .sidebar .tagcloud .weight4 a,
    .tagcloud .weight4 a {  font-size:  123.1%; }
    .sidebar .tagcloud .weight5 a,
    .tagcloud .weight5 a {  font-size:  146.5%; }

/* Begin: travelticker.css */
/**
 *  SDE Reiseticker Module
 *
 *  Displays a list of travel ticker news, based on `basebox`, HTML is as follows:
 *
 *  <pre><code>
 *   <div class="basebox travelticker">
 *      <div class="header"><a href="#URL">%MODULE_TITLE%</a></div> 
 *      <div class="body">
 *          <ul>
 *              <li class="first">
 *                  <p><a href="#TODO">
 *                      <span class="offscreen">%IN%</span> <span class="city">%CITYNAME%</span> <span class="offscreen2 icon %CSS_CLASSNAME%" title="%TIME_OF_DAY_AND_WEATHER_STATUS_TITLE%">%TIME_OF_DAY_AND_WEATHER_STATUS_TEXT%</span> <span class="degree">%DEGREE%&deg; C</span>
 *                  </a></p>
 *              </li>
 *              ...
 *              <li class="last">
 *                  <p><a href="#TODO">
 *                      <span class="offscreen">In</span> <span class="city">%CITYNAME%</span> <span class="offscreen2 icon %CSS_CLASSNAME%" title="%TIME_OF_DAY_AND_WEATHER_STATUS_TITLE%">%TIME_OF_DAY_AND_WEATHER_STATUS_TEXT%</span> <span class="degree">%DEGREE%&deg; C</span>
 *                  </a></p>
 *              </li>
 *          </ul>
 *      </div>
 *  </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_travelticker
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


.travelticker {
}

    /* Overwrite/Adapt parents (basebox) formats */
    .travelticker .body {
        font-size:    100%;
        font-weight:  normal;
    }
    .travelticker li {
        /* switch margin bottom to padding bottom, works better on most browsers... */
        margin-bottom:     0;
        padding-bottom:    7px;
    }
    .travelticker li span {
        color:          #000;
        font-weight:    400;
    }
    .sidebar .travelticker .body a {
        font-size:    100%;
        font-weight:  normal;
    }

    /* has layout for IE 6/7 */
    .ie6 .travelticker li,
    .ie7 .travelticker li {
        display:      inline;
        zoom:         1;
    }

    .travelticker li p {
        clear:          both;
        margin:         0;
    }

    /* Apapt font size in article pages */
    .article .sidebar .travelticker .body p {
        font-size:  100%;
    }

    .travelticker li p .time {
        display:    block;
        float:      left;
        width:      35px;
    }

    /* Correct 3px margin bug of IE 6 */
    .ie6 .travelticker li p .time {
        width:    32px;
    }

    .travelticker li p a {
        display:        block;
        overflow:       hidden;
        width:          245px;
        margin-left:    30px;
    }

    /* Adapt width for IE, otherwhise we get a unlovely break */
    .ie .travelticker li p a {
        width:    240px;
    }

/* Begin: overlaid.css */
/**
 *  SDE Overlaid Baseboxen
 *
 *  Baseboxen that are displayed in lightbox format recieve the
 *  class `overlaid`, and ought be rendered with a black background,
 *  rounded corners, shadows, and other prettynesses.
 *
 *  Markup is as follows:
 *
 *      <div class="basebox ... overlaid">
 *          [Optional header]
 *          [Optional body]
 *          [Optional footer]
 *          <button class="close">Schlie&szlig;en</button>
 *      </div>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
/**
 *  Overlaid modules sits on top of the `Overlay` div
 */
    .overlaid {
        background:             #000;
        outline:                0;
        padding:                0 20px;

        -webkit-box-shadow:     5px 5px 10px #333;
        -moz-box-shadow:        5px 5px 10px #333;
        box-shadow:             5px 5px 10px #333;

        -webkit-border-radius:  5px;
        -moz-border-radius:     5px;
        border-radius:          5px;

        z-index:                1000001; /*! I know this is absurd.  Sorry.  */
    }
        .overlaid .header {
            color:      #FFF;
            min-height: 1em;
            margin:     0 0 10px;
        }
        .overlaid .body {
            background:         #EEE;
            margin:             5px 0;
            /* padding:            10px; */
        }
        .overlaid .footer {
            color:      #FFF;
            font-size:  93%;
            margin:     10px 0;
        }
            .overlaid .footer strong {
                font-weight:    700;
            }
        .overlaid .close {
            background: #000 url(/static_assets/build/img/article/unsprited/icon-closelightbox.7cdc602c.png) top right no-repeat;
            border:     0;
            color:      #999;
            cursor:     pointer;
            min-height: 13px;
            padding:    0 20px 0 0;
            position:   absolute;
            right:      20px;
            text-align: right;
            top:        10px;
        }

/* Begin: mailtofriend.css */
/**
 *  SDE Mail to Friend Module
 *
 *  Mail to friend module, based on `basebox`, displays a form
 *  that enables users to mail articles to their friends and
 *  neighbors.  A service, which everyone will surely love.
 *
 *  Markup is as follows:
 *
 *  <pre><code>
 *      <div id="mailtofriend" class="basebox mailtofriend ${class}" aria-role="dialog" aria-hidden="${hidden}" aria-labelledby="mailtofriendlabel">
 *          <p id="mailtofriendlabel" class="header">Versenden Sie diesen Artikel per Email</p>
 *          <form action="${m.local.currentURL}" method="post" class="body"> 
 *              <label class="required ${recipientClass}">
 *                  E-Mail-Adresse des Empf&auml;ngers:
 *                  <input type="text" name="recipientEmail" id="recipientEmail" aria-required="true" value="$!{bouncedRequest.recipientAddress}">
 *              </label>
 *              <label>
 *                  Ihre Mitteilung (optional):
 *                  <textarea name="comment" id="comment">$!{bouncedRequest.comment}</textarea>
 *              </label>
 *              <label class="required ${senderClass}">
 *                  Ihre E-Mail-Adresse:
 *                  <input type="text" name="senderEmail" id="senderEmail" aria-required="true" value="$!{bouncedRequest.senderAddress}">
 *              </label>
 *              <label>
 *                  Ihr Vorname:
 *                  <input type="text" name="senderFirstName" id="senderFirstName" value="$!{bouncedRequest.senderFirstName}">
 *              </label>
 *              <label>
 *                  Ihr Nachname:
 *                  <input type="text" name="senderLastName" id="senderLastName" value="$!{bouncedRequest.senderLastName}">
 *              </label>
 *              <input type="hidden" name="sending" value="true">
 *              <input type="submit" value="Abschicken">
 *          </form>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_mailtofriend
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

/**
 *  @section Without JavaScript
 */
.mailtofriend {
    font-size:  93%;
    width:      450px;
}
    .mailtofriend .body {
        padding:    10px;
    }
    .mailtofriend form {
        overflow:   hidden;
    }
        .mailtofriend form p {
            color:      #666;
            font-size:  93%;
        }
        .mailtofriend label {
            color:          #666;
            clear:          both;
            display:        block;
            font-weight:    700;
            margin-bottom:  1em;
        }
            .mailtofriend #firstname, .mailtofriend #lastname {
                clear:  none;
                float:  left;
                width:  200px;
            }
                .mailtofriend #lastname {
                    float:  right;
                }
                .mailtofriend #firstname input, .mailtofriend #lastname input {
                    width:  188px;
                }
            .mailtofriend label.required {
                color:  #000;
            }
            .mailtofriend label input,
            .mailtofriend label textarea {
                border:     1px solid #999;
                display:    block;
                margin-top: 5px;
                padding:    2px 5px;
                width:      418px;
            }
            .mailtofriend label .notification {
                border:         none;
                background:     none;
                margin-bottom:  -6px;
                text-align:     right;

            }
                .mailtofriend .invalid input,
                .mailtofriend .invalid textarea {
                    background: #FCC;
                }
            .mailtofriend label textarea {
                height:     3em;
            }
        .mailtofriend .submit {
            float:  right;
        }
    .mailtofriend div.body {
        margin: 0;
    }
        .mailtofriend div.body p {
            margin:         0 0 1.5em;
        }
        .mailtofriend div.body strong {
            display:        block;
            font-weight:    700;
            margin:         0 0 0.5em;
        }
        .mailtofriend div.body .toggle {
            float:          left;
        }
/**
 *  @section JavaScript
 */
.js .mailtofriend {
    display:    none;
    overflow:   visible;
    position:   absolute;
}

/* Begin: poll.css */
/**
 *  SDE Poll Module
 *
 *  This module can only be displayed in an article's sidebar, and is
 *  styled either as a form with which a user can register her vote, 
 *  or a result list, displaying the poll's current statistics.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_poll
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

/**
 *  Styles used for both variants of the poll module
 *
 *  @section    Generic
 */
.poll {
    overflow:   hidden;
}
.poll .header span {
    color:          #000;
    display:        block;
    font-size:      84.6%;
    font-weight:    700;
    margin:         0 0 0.5em;
    text-transform: uppercase;
}
.poll .header p {
    color:          #A5A5A5;
    font-size:      118.2%;
    font-weight:    700;
    margin:         0;
    text-transform: none;
}
/**
 *  Styles used for the Form variant of the poll module
 *
 *  The poll form's HTML looks like:
 *
 *  <pre><code>
 *      <div class="poll">
 *          <div class="header">
 *              <p>
 *                  <span>Umfrage<span class="offscreen">: </span></span>
 *                  %POLL_TITLE%
 *              </p>
 *          </div>
 *          <form class="body" action="#TODO" method="post">
 *              <ul>
 *                  <li>
 *                      <input type="radio" name="pollXanswer" value="Y" id="pollX1">
 *                      <label for="pollX1">%POLL_ITEM_LABEL%</label>
 *                  </li>
 *                  ...
 *              </ul>
 *              <input type="submit" class="submit" value="Abstimmen">
 *          </form>
 *           <div class="footer">
 *              <a href="%POLL_URL%">zum Ergebnis</a>
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *
 *  @section    Form
 */
.poll .body {
    margin-top: 5px;
    overflow:   visible;
}
    .poll form li {
        border:     0;
        margin:     0;
        overflow:   hidden;
        padding:    5px 0 5px 10px;
    }
        .ie6 .poll form li {
            zoom:   1;
        }
        .poll form li:hover {
            background: #EEE;
        }
        .poll form li input {
            float:  left;
            width:  18px;
        }

        /* Another special treatment for IE */
        .ie .poll .body li input {
            position:       relative;
            margin:         -4px 0 0 0;
            overflow:       hidden;
        }

        .poll form li label {
            float:          left;
            margin-left:    5px;
            width:          265px;
        }
    .poll form .submit {
        float:      right;
        margin:     3px 0 0 5px;
    }
.poll .footer {
    float:      right;
    margin:     3px 10px 0 0;
    width:      280px;
}
    .poll .form {
        width:  auto;
    }
.ie .poll .footer {
    zoom:   1;
}

    .ie .sidebar .poll a.cta {
        padding:    2px 4px 2px 4px;
    }

    /* Remove block format for IE6/7, otherwhise it used full width! */
    .ie6 .poll .footer .cta,
    .ie7 .poll .footer .cta {
        display:    inline-block;
    }

/**
 *  Styles used for the Result variant of the poll module.
 *
 *  <pre><code>
 *      <div class="poll result">
 *          <div class="header">
 *              <p><span>Umfrage<span class="offscreen">: </span></span>Hier steht irgendeine aktuelle Umfrage?</p>
 *          </div>
 *          <ul class="body">
 *              <li>
 *                  <p>
 *                      <span class="percent" style="border-left-width:${percent * 75}px;padding-left:${75 - leftborder}px">23%</span>
 *                      <span>unsere Nutzter haben sich f&uuml;r "</span>
 *                      <span class="answer">Antwort 1 vielleicht ein bisschen l&auml;nger so dass es umbrechen musst, hoffe ich.</span>
 *                      <span>" abgestimmt.</span>
 *                  </p>
 *              </li>
 *              ...
 *          </ul>
 *          <div class="footer">
 *              <p class="notification {success|failure}">Notification message.</p>
 *              <p>
 *                  XXX abgegebenen Stimmen
 *                  <a href="#TODO_%POLL_OVERVIEW_URL%">weitere Umfragen&hellip;</a>
 *              </p>
 *              <p>Explanatory text goes here.</p>
 *          </div>
 *      </div>
 *  </code></pre>
 */
.poll ul.body {
    margin-left:    10px;
}
    .poll ul.body li {
        margin:     0;
        padding:    5px 0;
    }
    .poll ul.body p {
        margin: 0;
        font-size:100%;
    }
    .poll ul.body span {
        left:       -999em;
        position:   absolute;
    }
        .poll ul.body span.percent,
        .poll ul.body span.answer {
            color:      #000;
            float:      left;
            left:       0;
            position:   relative;
            text-align: right;
            width:      110px;
        }
        .poll ul.body span.percent span {
            background:     #EFEFEF;
            border-left:    0px solid #3d6d9d;
            float:          left;
            height:         1.5em;
            left:           0;
            padding-left:   75px;
            position:       static;
            width:          0;
        }
            .sidebar .poll ul.body span.percent span {
                background: #FFF;
            }
                #articlesidebar .poll ul.body span.percent span {
                    background: #EFEFEF;
                }
        .poll ul.body span.zerovotes span {
            border-left:    1px solid #900;
            padding-left:   74px;
        }
        .poll ul.body span.answer {
            font-weight:    400;
            margin-left:    10px;
            text-align:     left;
            width:          170px;
        }

        /* Hide spans for IE 6/7, but not the required one */
        .ie6 .poll ul.body span,
        .ie7 .poll ul.body span {
            font-size:  0;
        }
            .ie6 .poll ul.body span.percent,
            .ie6 .poll ul.body span.answer,
            .ie6 .poll ul.body span.zerovotes,
            .ie7 .poll ul.body span.percent,
            .ie7 .poll ul.body span.answer,
            .ie7 .poll ul.body span.zerovotes {
                font-size:  100%;
            }

.result {
    float:  none;
}
    .result span {
        font-weight:    700;
    }
    .result a {
        clear:      both;
        float:      right;
    }
    .result p {
        clear:      both;
        color:      #999;
        margin:     0 0 5px;

    }

.js .poll .result {
    display:        none;
    margin-left:    10px;
}

/* Begin: poll_resultmatrix.css */
/**
 *  SDE Poll Result Matrix
 *
 *  Displays the results from a series of polls, one after the other, with
 *  pretty bar graphs.  Rendered based on a tabular matrix, poll options
 *  across the top as columns, polls down the side as rows.  HTML looks like:
 *
 *      <table class="resultmatrix">
 *          <caption>Complete Results</caption>
 *          <thead>
 *              <tr>
 *                  <th scope="col">Label</th>
 *                  <th scope="col">[Option 1]</th>
 *                  <th scope="col">[Option 2]</th>
 *                  ...
 *                  <th scope="col">[Option N]</th>
 *                  <th scope="col">Total Votes</th>
 *              </tr>
 *          </thead>
 *          <tbody>
 *              <tr>
 *                  <th scope="row">
 *                      <span class="rank">[Ranking (1, 2, 3 ... )]</span>
 *                      [Poll Label: might be an image...]
 *                  </th>
 *                  <td>[% for Option 1]</td>
 *                  <td>[% for Option 2]</td>
 *                  ...
 *                  <td>[% for Option N]</td>
 *                  <td>[Total Votes for Poll]</td>
 *              </tr>
 *              ...
 *          </tbody>
 *      </table>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_poll_resultmatrix
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
/* Throw away table stylings, turn everything into blocks. */
.resultmatrix {
    overflow:   hidden;
    position:   relative;
    padding:    0 0 3em;
    margin:     0 0 2em;
}
.resultmatrix,
.resultmatrix .caption,
.resultmatrix .thead,
.resultmatrix .tbody,
.resultmatrix .tr,
.resultmatrix .th,
.resultmatrix .td {
    display:    block;
}
.resultmatrix .caption {
    border-bottom:  1px solid #CCC;
    color:          #666; 
    font-size:      138.5%;
    margin:         1em 0;
}
    .resultmatrix .caption p {
        font-size:  61.11%;
        position:   absolute;
        bottom:     0;
    }
.resultmatrix .tbody .tr {
    border-bottom:  1px solid #CCC;
    height:         120px;
    padding:        0 0 1em 0;
    margin:         0 0 1em 0;
    position:       relative;
}
    .resultmatrix .tbody .portrait {
        height:     125px;
    }

    .resultmatrix .tbody .th {
        position:   absolute;
        top:        0px;
        left:       0px;
        width:      165px;
    }
        .resultmatrix .rank {
            color:          #CCC;
            font-size:      30px;
            font-weight:    700;
            vertical-align: top;
        }
            .ie .resultmatrix .rank {
                float:      left;
            }
        .resultmatrix img {
            float:  right;
        }
            .resultmatrix .portrait img {
                margin-right:   20px;
            }
                .ie .resultmatrix .portrait img {
                    display:    inline; /*  Fixing double-margin bug */
                }
    .resultmatrix .tbody .td {
        margin-left:    175px;
    }
        .resultmatrix .count {
            color:      #666;
            font-size:  85%;
        }

/*  Legend styling */
.resultmatrix .thead {
    border:         1px solid #CCC;
    background:     #EEE;
    padding:        0.5em 1em;
    margin-bottom:  1.385em;
}
    .resultmatrix .thead .option {
        border-left-width:  15px;
        padding-left:       5px;
        font-weight:        400;
        margin:             5px 0;
    }

/*  Basic option styling */
.option {
    border:    0px solid #99F;
    font-size:      11px;
    font-weight:    700;
    margin:         5px 0;
    padding-left:   10px;
}
    .option1 {
        border-left-color:  #ABBDA3;
    }
    .option2 {
        border-left-color:  #B2E4C9;
    }
    .option3 {
        border-left-color:  #E7BD91;
    }
    .option4 {
        border-left-color:  #CC6C6E;
    }

/* Begin: themenbox.css */
/**
 *  SDE Themenbox Module
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_themenbox
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

.themenbox div {
    clear:      both;
    margin:     0.5em 0;
    overflow:   hidden;
}
/**
 *  Themembox Breadcrumb Trail
 *
 *  @section    Header
 */
    .themenbox .header li {
        padding:    0 10px 0 0;
    }
    .themenbox .header li, .themenbox .header a {
        color:          #000;
        display:        block;
        float:          left;
        font-weight:    700;
    }
    .themenbox .rss {
        background: url(/static_assets/build/img/article/sprite.b3d199b4.png) top right no-repeat;
        height:     12px;
        margin:     0 0 0 5px;
        width:      12px;
    }
/**
 *  Themenbox Links
 *
 *  @section    Body
 */
    .themenbox .body li {
        background: url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat 5px -943px;
        padding:    0 0 0 12px;
        margin:     0.25em 0;
    }
    .themenbox .body a {
        color:          #000;
        font-size:      11px;
        font-weight:    400;
    }
    .themenbox .body span {
        font-weight:    700;
    }
/**
 *  Themenbox Additional Topics
 *
 *  @section    Footer
 */
    .themenbox .footer li {
        display:    inline;
    }
    .themenbox .footer a {
        color:          #024282;
        font-size:      11px;
        font-weight:    700;
        margin:         0 1em 0 0;
    }

/* Begin: inlinemap.css */
/**
 *  SDE Inline Map Module
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_inlinemap
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

.inlinemap {
    background: #EEE;
    font-size:  11px;
    margin:     1.5em 0;
    overflow:   hidden;
    padding:    0 0 5px;
}

.inlinemapmeta {
    background: white;
    font-size:  11px;
    margin:     1.5em 0;
    overflow:   hidden;
    padding:    0 0 5px;
}

.inlinemapmeta .overline {
	text-transform: uppercase;
	font-weight: bold;
}

.inlinemapmeta .metadata {
	color: #666;	
}

    .inlinemap div {
        margin: 5px 10px;
    }
    .inlinemap .header {
        color:          #000;
        font-size:      11px;
        font-weight:    700;
        margin-bottom:  10px;
    }
        .inlinemap .header a {
            background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat right -22px;
            color:          #000;
            padding:        0 10px 0 0;
        }
    .inlinemap iframe {
        border: 1px solid #CCC;
        height: 160px;
        width:  100%; 
    }
    .inlinemap .footer {
        overflow:   hidden;
    }
        .inlinemap .footer a {
            background: #CCC;
            border:     1px solid #999;
            color:      #333;
            display:    block;
            float:      right;
            padding:    3px 5px;
        }

/* Begin: bildbanderolle.css */
/**
 *  SDE Bilderbanderolle Module
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_bildbanderolle
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

.bildbanderolle {
    background: #EEE;
    overflow:   hidden;
    margin:     0 0 10px;
    padding:    0 0 10px;
}
    .bildbanderolle div {
        margin: 7px 5px;
    }
    .bildbanderolle .header a {
        color:      #000;
        font-size:  11px;
    }
        .bildbanderolle .header a span {
            color:          #024282;
            font-weight:    700;
        }
    
    .bildbanderolle li {
        float:          left;
        padding-left:   7px;
    }
        .bildbanderolle .first {
            padding:    0px;
        }
        .bildbanderolle li a {
            display:    block;
            height:     51px;
            overflow:   hidden;
            text-align: center;
            width:      69px;

        }
        .bildbanderolle img {
            vertical-align: middle;
        }

/* Begin: breakingnewsletter.css */
/**
 *  Breaking News: Newsletter subscription in article.  HTML as follows:
 *
 *  <pre><code>
 *      <div class="breakingnewsletter">
 *          <p class="header">Eilmeldung</p>
 *          <p class="intro"><strong>Nichts mehr verpassen!</strong> Wenn Sie beim Erscheinen von Eilmeldungen benachrichtigt werden m&ouml;chten:</p>
 *          <form method="post" action="#@TODO">
 *              <div>
 *                  <input type="hidden" id="versandart" value="multipart" name="versandart">
 *                  <input type="hidden" id="action" value="doOptIn" name="action">
 *                  <input type="hidden" id="newsletter" value="3" name="newsletter">
 *                  <label for="email">Geben Sie hier Ihre <span>E-Mail</span>-Addresse ein&hellip;</label>
 *                  <input type="text" name="email" id="email" value="">
 *                  <input type="submit" id="eilmeldung-submit" value="bestellen">
 *              </div>
 *          </form>
 *          <p class="rss">
 *              &hellip;oder abonnieren Sie hier den <span>RSS-Feed</span>:
 *              <a href="http://suche.sueddeutsche.de/sort/-docdatetime/nav/&#xA7;documenthiddenattributes%3AEilmeldung?output=rss">
 *                  RSS Eilmeldung &raquo;
 *              </a>
 *          </p>
 *      </div> 
 *  </code></pre>
 *  
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_breakingnewsletter
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

    .breakingnewsletter {
        border:     1px solid #999;
        width:      100%;
        margin:     15px 0;
        overflow:   hidden;
    }
        .breakingnewsletter .header {
            font-size:      15px;
            text-transform: uppercase;
            color:          #FFF;
            padding:        5px 20px 5px 5px;
            margin:         10px 0 0 0;
            float:          left;
            width:          109px;
            background:     #C00 url(/static_assets/build/img/site/unsprited/breakingnews-arrow.6db969be.png) no-repeat right center;
        }
        .breakingnewsletter .intro {
            float:          right;
            width:          315px;
            font-size:      11px;
            line-height:    1.25;
            margin:         10px 0 0 0;
            padding:        0;
        }
        .breakingnewsletter form {
            float:      left;
            font-size:  11px;
            clear:      both;
            margin-top: 10px;
            width:      268px;
            background: url(/static_assets/build/img/article/unsprited/icon-at.15d71d0a.png) no-repeat 10px bottom;
        }
            .breakingnewsletter form div {
                margin-left:    10px;
            }
            .breakingnewsletter input {
                margin:         10px 0 0 10px;
            }
            #eilmeldung-submit {
                background: url(/static_assets/build/img/site/unsprited/button-order.96490b8e.png);
                height:     18px;
                width:      59px;
                border:         none;
                text-indent:    -999em;
                letter-spacing: -999em;
                
            }
            .breakingnewsletter #email {
                width:          125px;
                font-size:      12px;
            }
            .breakingnewsletter #email, .breakingnewsletter form a {
                margin:         10px 0 0 50px;
            }
            .breakingnewsletter form a {
                color:          #024282;
                display:        block;
            }
        .breakingnewsletter .rss {
            font-size:      11px;
            float:          right;
            width:          149px;
            border-left:    1px solid #BBB;
            padding-left:   20px;
            margin:         10px 10px 10px 0;
            background:     url(/static_assets/build/img/article/unsprited/icon-rss-32x32.52d02a04.png) no-repeat right bottom;
        }
            .breakingnewsletter .rss a {
                color:      #024282;
                display:    block;
                width:      100%;
                padding:    21px 0 0 0;
            }
            .breakingnewsletter label span, .breakingnewsletter .rss span {
                font-weight:    700;
            }

/* Begin: headslot.css */
/**
 *  SDE Article Head Slot
 *
 *  The head slot of an article appears after a paragraph or two, and can
 *  be filled with a few different things.  Basic markup is trivial, and
 *  the contents differ from type to type:
 *
 *  <pre><code>
 *      <div class="headslot [TYPE]">
 *          [CONTENT]
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_headslot
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.headslot {
    display:    block;
    margin:     0 0 1em 0;
}
    .headslot img {
        display:    block;
        border:    1px solid #999;
        margin:     0 auto;
    }
    .headslot p {
        color:      #999;
        font-size:  85%;
        margin:     5px 0;
    }

/* Begin: headslot_image.css */
/**
 *  SDE Article Head Slot: Images
 *
 *  Two different types, with styles that overlap enough to both
 *  be included in a single file:
 *
 *  Zoomable
 *  --------
 *
 *  A head slot, filled with an image that can be zoomed.  Markup is
 *  as follows:
 *
 *  <pre><code>
 *      <div class="headslot zoomable">
 *          <a href="%URL%">
 *              <img ...>
 *              <span>Embiggen!</span>
 *          </a>
 *          <p>%CAPTION% <cite>%SOURCE%</cite></p>
 *      </div>
 *  </code></pre>
 *
 *  Galleried
 *  ---------
 *
 *  A head slot, filled with the toptopteaser image from an image
 *  gallery, and linked to said gallery.  Markup is similar to the
 *  above:
 *
 *  <pre><code>
 *      <div class="headslot galleried">
 *          <a href="%URL%">
 *              <img ...>
 *              <span>To the gallery!</span>
 *          </a>
 *          <p class="title">%BILDSTRECKE_TITLE%</p>
 *          <ul>
 *              <li class="first"><a href="#TODO_%IMAGE_URL%" title="%IMAGE_TITLE%">1<span> %IMAGE_TITLE%</span></a></li>
 *              <li><a href="#TODO_%IMAGE_URL%" title="%IMAGE_TITLE%">2<span> %IMAGE_TITLE%</span></a></li>
 *              <li><a href="#TODO_%IMAGE_URL%" title="%IMAGE_TITLE%">3<span> %IMAGE_TITLE%</span></a></li>
 *              <li class="last"><a href="#TODO_%IMAGE_URL%" title="%IMAGE_TITLE%">18<span> %IMAGE_TITLE%</span></a></li>
 *          </ul>
 *          <p>%IMAGE_TEASER_TEXT% contains 11px, #666666 text that generally runs a sentence or so. <cite>(%IMAGE_SOURCE%)</cite></p>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_headslot_image
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.zoomable a, .galleried a {
    display:    block;
    overflow:   hidden;
    position:   relative;
}
    .ie .zoomable a, .ie .galleried a {
       zoom:    1;
    }
    /**
     *  The resizable image.
     */
    .zoomable img, .galleried img {
        display:    block;
    }
    /**
     *  The CTA icon.
     */
    .zoomable span, .galleried span {
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat left -200px;
        bottom:         0px;
        display:        block;
        height:         23px;
        opacity:        0.5;
        position:       absolute;
        right:          0px;
        text-indent:    -999em;
        width:          23px;
    }
        .ie .zoomable span, .ie .galleried span {
            filter:alpha(opacity=50);
        }
    .galleried span {
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat center right;
        height:         100%;
        width:          35px;
        opacity:        0.5;
    }
        .ie .galleried span {
            /*  Transparent PNG Bug + Weird 1px spacing bug */
            bottom:         50%;
            filter:alpha(opacity=0.5);
            height:         400px;
            margin-bottom:  -200px;
            right:          -1px;
        }
        .zoomable:hover span {
            opacity:    0.75;
        }
            .ie .zoomable:hover span {
                filter:alpha(opacity=75);
            }
        
        .galleried:hover span {
            opacity:    0.5;
        }
            .ie .galleried:hover span {
                filter:alpha(opacity=50);
            }

.galleried p {
    display:        inline;
}
    .galleried .title {
        display:    block;
    }
        .galleried .title a {
            color:          #000;
            display:        inline;
            margin:         0;
        }
.galleried li, .galleried ul {
    display:    inline;
}
    .galleried li a {
        color:      #000;
        font-size:  85%;
        display:    inline;
    }

/* Begin: mobileimagegallery.css */
/**
 *  SDE "Mobile (Bildergalerie)" Module
 *
 *  Displays a mobile image gallery list.
 *
 *  <pre><code>
 *  <div class="mobileimagegallery">
 *      <div class="header">%TITLE%</div>
 *      <div class="body">
 *          <ul>
 *              <li class="first">
 *                  <img src="%FIRST_IMAGE_URL%" alt="%FIRST_IMAGE_TITLE%">
 *              </li>
 *              ...
 *              <li class="last">
 *                  <img src="%LAST_IMAGE_URL%" alt="%LAST_IMAGE_TITLE%">
 *              </li>
 *          </ul>
 *      </div>
 *  </div>
 *  </code></pre>
 *
 *
 *  If enabled, JavaScript modifies markup by hiding all images other than the one 
 *  to display and generated a pager where the user is able to navigate between the 
 *  images.
 *
 *  <pre><code>
 *  <div class="mobileimagegallery">
 *      <div class="header">SZ und sueddeutsche.de Mobil Bildergalerie</div>
 *      <div class="body">
 *          <ul>
 *              <li class="first" style="display: block;">
 *                  <img src="%FIRST_IMAGE_URL%" alt="%FIRST_IMAGE_TITLE%">
 *              </li>
 *              ...
 *              <li class="last" style="display: none;">
 *                  <img src="%LAST_IMAGE_URL%" alt="%LAST_IMAGE_TITLE%">
 *              </li>
 *          </ul>
 *          <span class="subtitle">%SELECTED_IMAGE_TITLE%</span>
 *          <div class="pager">
 *              <p style="width: 109px;">
 *                  <a title="%FIRST_IMAGE_POS%" onclick="SDE.widget.MobileImageGallery.changeGallery(%FIRST_IMAGE_POS%);" class="active" href="javascript://">%FIRST_IMAGE_POS%</a>
 *                  ...
 *                  <a title="%LAST_IMAGE_URL%" onclick="SDE.widget.MobileImageGallery.changeGallery(%LAST_IMAGE_URL%);" href="javascript://" class="">%LAST_IMAGE_URL%</a>
 *              </p>
 *          </div>
 *      </div>
 *  </div>
 *  </code></pre>
 * 
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_mobileimagegallery
 *  @copyright  Sueddeutsche.de, (c) 2010
 *  @author     Murat Purc <Murat Purc @ Sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


/**
 * Mobile image gallery header
 *
 * @section  header
 */
.mobileimagegallery .header {
    color:              #000;
    font-size:          85%;
    font-weight:        700;
    margin:             0 0 9px 9px;
    padding-top:        10px;
    text-transform:     uppercase;
}


    /**
     * Mobile images list
     *
     * @section  Images list
     */
    .mobileimagegallery .body li {
        display:    block;
    }

        .mobileimagegallery .body li img {
            border:             none;
            height:             527px;
            margin-bottom:      5px;
            width:              300px;
        }


    /**
     * Image gallery generated by js
     *
     * @section  Gallery JS
     */

    .js .mobileimagegallery .body .subtitle {
        margin-bottom:      10px;
        display:            block;
        text-align:         center;
    }

    .js .mobileimagegallery .body .pager {
        height:             20px;
        text-align:         center;
    }

    .js .mobileimagegallery .body .pager p {
        clear:              both;
        display:            block;
        height:             20px;
        margin: 0 auto;
    }

    .js .mobileimagegallery .body .pager a {
        background:         url(/static_assets/build/img/modules/mobileimagegallery/sprite.37e91bff.png) no-repeat 0 0;
        color:              #fff;
        display:            block;
        float:              left;
        font-size:          12px;
        font-weight:        bold;
        height:             20px; 
        line-height:        1.3em;
        margin:             0 3px;
        padding-top:        3px;
        text-align:         center;
        width:              20px;
    }

    .js .mobileimagegallery .body .pager a.active {
        background-position:    -40px 0;
        color:                  #000;
    }

    .js .ie6 .mobileimagegallery .body .pager a {
        padding-top:        2px;
    }

/* Begin: projector.css */
/**
 *  SDE Projector Module
 *
 *  This module displays an arbitrary number of teasers, each containing
 *  an image, a title, and a paragraph or so of text.  If JavaScript is
 *  enabled, these teasers will be displayed one at a time, with animated
 *  transitions based on user interactions.  If JavaScript is not enabled,
 *  this module appears exactly like any other Linkbox module.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_projector
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.projector {
    position:   relative;
}
    .projector cite {
        position:   absolute;
        left:       -999em;
    }
/**
 *  Body
 *
 *  @section body
 */
.js .projector ul {
    height:     135px;
    overflow:   hidden;
    position:   relative;
}
.js .projector .body li {
    border:     0;
    left:       0;
    margin:     0;
    position:   absolute;
    top:        0;
    width:      100%;

    display:    none;
}
    .js .projector .body li .title {
        font-size:  118%;
    }
/**
 *  Navigation
 *
 *  @section nav
 */
.js .projector .footer ol {
    position:   absolute;
    right:      6px;
    top:        7px;
}
    .js .ie7 .projector .footer ol {
        right:  10px;   /*  TODO: Revisit this.  The number makes no sense at all. */
    }
    .js .ie6 .projector .footer ol {
        right:  22px;   /*  TODO: Revisit this.  The number makes no sense at all. */
    }
.js .projector .footer li {
    border:     0;
    clear:      none;
    display:    inline;
    padding:    0;
    margin:     0 4px 0 0;
}
.js .projector .footer button {
    background:     #CCC;
    border:         1px solid #CCC;
    cursor:         pointer;
    display:        inline-block;
    font-weight:    700;
    line-height:    1.3;
    padding:        0 4px;
    text-align:     center;
    vertical-align: middle;

    -webkit-border-radius:  3px;
    -moz-border-radius:     3px;
    border-radius:          3px;
}
    .js .projector .footer button:-moz-focus-inner {
        padding:    0;
        border:     0;
    }
    .js .ie .projector .footer button {
        display:        inline;
        padding:        1px 3px 2px;
        line-height:    1;
        zoom:           1;
    }
    .js .projector .footer .current button {
        background:     #FFF;
        border-color:   #999;
        font-weight:    400;
    }

/* Begin: tabbox.css */
/**
 *  SDE Tabbox Module
 *
 *  This module displays an arbitrary number of modules in a tabbed view
 *  If JavaScript is enabled, these teasers will be displayed one at a
 *  time, with animated transitions based on user interactions.  If
 *  JavaScript is not enabled, this module appears exactly like any other
 *  Linkbox module.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_tabbox
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.tabbox {
    background: #EEE;
    overflow:   hidden;
    padding:    0 0 5px;
    position:   relative;
}
    .tabbox .header {
        color:          #000;
        font-size:      11px;
        font-weight:    700;
        margin:         0 10px 3px 10px;
        padding-top:    10px;
        text-transform: uppercase;
    }
    .tabbox .header a {
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat right -22px;
        color:          #000;
        padding:        0 10px 0 0;
    }
/**
 *  Body
 *
 *  @section body
 */
.js .tabbox .body ul {
    overflow:       hidden;
    position:       relative;
    min-height:     100px;
    z-index:        2;

}
    .js .ie .tabbox .body ul {
        /* margin-top:    3px;       [> HACK: IE makes the tabs too wide, moving them down <] */
    }
.js .tabbox .body .header {
    position:   absolute;
    left:       -999em;
}
/**
 *  Navigation
 *
 *  @section nav
 */
.js .tabbox .body .footer {
    position:   absolute;
    left:       -999em;
}
.js .tabbox .footer ol {
    right:      7px;
    position:   absolute;
    top:        7px;
}
    /* HACK:    IE makes the tabs too wide, moving them down, and
     *          6 and 7 naturally require different levels of padding...
     */
    .js .ie7 .tabbox .footer ol {
        right:  6px;
    }
    .js .ie6 .tabbox .footer ol {
        top:    9px;
        right:  2px;
    }
.js .tabbox .footer li {
    background: #A1A09E url(/static_assets/build/img/sdesiteheader/tab-background.c933c043.png) no-repeat top left;
    border:     0;
    clear:      none;
    display:    block;
    font-size:  83%;
    float:      left;
    margin:     0 4px 0 5px;
    padding:    0 0 0 5px;
    width:      auto;
}
    /* HACK: IE _loves_ padding so much, that it makes everything HUGE. */
    .js .ie .tabbox .footer li {
        padding:    0;
    }
    .js .tabbox .footer li.current {
        background-color:   #FFF;
    }
.js .tabbox .footer button, .js .tabbox .footer a {
    background:     url(/static_assets/build/img/sdesiteheader/tab-background.c933c043.png) no-repeat top right;
    border:         0;
    color:          #FFF;
    cursor:         pointer;
    display:        block;
    font-weight:    700;
    height:         20px;
    text-align:     center;
    text-transform: capitalize;
    padding:        2px 5px 2px 0;
    z-index:        1;
}
    .js .tabbox .footer a {
        height:     auto;
        padding:    3px 5px 3px 0;
    }
    /* HACK: IE _loves_ padding so much, that it makes everything HUGE. */
    .js .ie .tabbox .footer button, .js .ie .tabbox .footer a {
        display:    inline;
        overflow:   visible; 
        padding:    2px 5px 2px 5px;
        position:   relative;
        zoom:       1;
    }

    .js .tabbox .footer .current button, .js .tabbox .footer .current a {
        color:      #000;
    }

/**
 *  Tabbox Contents ought have background colours, even in article sidebars
 */
#articlesidebar .tabbox .basebox {
    background: #EEE;
}

/**
 *  @TODO:  Be a little more clever about solving this bug.
 *          In short, the `toplist` is pushed over 6px when the
 *          `.js` class is set on the document element (in IE6 only)
 *          We're solving it for the moment by pulling the toplist
 *          back to the right, and resetting the margin when `domready`
 *          triggers.  It's not pretty, but it's good enough for the
 *          moment.  :)
 */
.js .ie6 .tabbox .toplist .body {
    margin-left: -6px;
}
    .domready .ie6 .tabbox .toplist .body {
        margin-left:    10px;
    }

/* Begin: socialbookmarking.css */
/**
 *  SDE Social Bookmarking Module
 *  
 *  If JavaScript isn't enabled, this module sits directly under the article
 *  footer, listing social bookmarking services horizontally across the page.
 *  Clicking "Bookmark this article" in either the article header or footer
 *  simply jumps to this module via an anchor.
 *
 *  If JavaScript is enabled, the module is hidden by default, and pops up
 *  directly under the mouse when either of the "bookmark" links are clicked.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_socialbookmarking
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
#bookmarking {
    background: #FFF;
    clear:      both;
    margin:     10px 0 0 0;
    overflow:   hidden;
    position:   relative;
    z-index:    2;
}
    #bookmarking p {
        font-size:      12px;
        font-weight:    700;
        margin:         0 0 5px 0;
    }
    #bookmarking a {
        height:         20px;
        float:          left;
        font-size:      11px;
        margin:         5px;
        padding:        5px 0;
        line-height:    1;
        vertical-align: middle;
    }
        #bookmarking .service {
            position:   relative;
            top:        1px;
        }
            #bookmarking a.service {
                top:    3px;
            }
        .ie #bookmarking a {
            display:    inline; /* Double margin bug */
        }
    #bookmarking img {
        margin:         0 5px 0 0;
        vertical-align: middle;
    }

/**
 *  With "Article 3.5", some social bookmarking links appear in the article
 *  footer: Facebook, MySpace, StudiVZ, and Twitter.
 *
 *  @section    Article Footer
 */
.articlefooter .social {
    margin-top: -3px;
}
    .articlefooter .social p {
        line-height:    1;
    }
    .articlefooter .social span {
        left:       -999em;
        position:   absolute;
    }
    .articlefooter .social a {
        background: 0;
        border:     0;
        display:    inline;
        padding:    0;
    }
/**
 *  JavaScript Enabled
 *  @section    JS Enabled
 */
.js #bookmarking {
    border:     1px solid #999;
    left:       -999em;
    padding:    5px 10px;
    position:   absolute;
    width:      220px;
}
    .js #bookmarking li {
        float:  left;
    }
    .js #bookmarking a {
        width:  100px;
    }
       .js #bookmarking .services a {
                width:  100px;
        }
    .js #bookmarking button {
        /**
         *  @TODO: This image has gone missing.  Find it.
         */
        background:     url(/static_assets/build/img/article/unsprited/close.131673fa.png) top left no-repeat;
        border:         0;
        height:         20px;
        position:       absolute;
        right:          5px;
        text-indent:    -99em;
        top:            5px;
        width:          20px;
    }

/* Begin: servicebox.css */
/**
 *  SDE Servicebox Module
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_servicebox
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
#container ul {
    clear:      both;
    display:    block;
    margin:     1em auto;
    text-align: left;
    width:      806px;
}

.columns #container.body li {
    width:  201px;
}

#sitefooter div.header a.servicebox{
    color:          #000000;
    font-size:      1.2em;
    font-weight:    700;
}

#sitefooter .basebox{
    margin-top:         10px;
    background-color:   transparent;
    border-bottom:      1px solid #999999;
}

#sitefooter .basebox .header {
    margin-bottom: 0;
}

#container ul li {
    margin:             2px 0;
    padding:            0;
    line-height:        22px;
    background-image:   url(/static_assets/build/img/site/sprite-servicebox.92903980.png);
    background-repeat:  no-repeat;
}

#container li a, #container li a:visited {
    color:              #999;
    padding-left:       20px;
    margin-top:         -7px;
}

.sprite-fitnesstrainer_icon_1 { background-position: 0 0; }
.sprite-fitnesstrainer_icon_10 { background-position: 0 -57px; }
.sprite-fitnesstrainer_icon_11 { background-position: 0 -120px; }
.sprite-fitnesstrainer_icon_12 { background-position: 0 -183px; }
.sprite-fitnesstrainer_icon_13 { background-position: 0 -247px; }
.sprite-fitnesstrainer_icon_14 { background-position: 0 -306px; }
.sprite-fitnesstrainer_icon_15 { background-position: 0 -370px; }
.sprite-fitnesstrainer_icon_16 { background-position: 0 -434px; }
.sprite-fitnesstrainer_icon_17 { background-position: 0 -498px; }
.sprite-fitnesstrainer_icon_18 { background-position: 0 -559px; }
.sprite-fitnesstrainer_icon_19 { background-position: 0 -623px; }
.sprite-fitnesstrainer_icon_2 { background-position: 0 -687px; }
.sprite-fitnesstrainer_icon_20 { background-position: 0 -749px; }
.sprite-fitnesstrainer_icon_21 { background-position: 0 -812px; }
.sprite-fitnesstrainer_icon_22 { background-position: 0 -875px; }
.sprite-fitnesstrainer_icon_23 { background-position: 0 -938px; }
.sprite-fitnesstrainer_icon_24 { background-position: 0 -1002px; }
.sprite-fitnesstrainer_icon_25 { background-position: 0 -1066px; }
.sprite-fitnesstrainer_icon_26 { background-position: 0 -1129px; }
.sprite-fitnesstrainer_icon_27 { background-position: 0 -1193px; }
.sprite-fitnesstrainer_icon_3 { background-position: 0 -1257px; }
.sprite-fitnesstrainer_icon_4 { background-position: 0 -1315px; }
.sprite-fitnesstrainer_icon_5 { background-position: 0 -1378px; }
.sprite-fitnesstrainer_icon_6 { background-position: 0 -1438px; }
.sprite-fitnesstrainer_icon_7 { background-position: 0 -1501px; }
.sprite-fitnesstrainer_icon_8 { background-position: 0 -1565px; }
.sprite-fitnesstrainer_icon_9 { background-position: 0 -1629px; }
.sprite-homeinfo_icon_1 { background-position: 0 -1691px; }
.sprite-homeinfo_icon_10 { background-position: 0 -1751px; }
.sprite-homeinfo_icon_11 { background-position: 0 -1811px; }
.sprite-homeinfo_icon_12 { background-position: 0 -1871px; }
.sprite-homeinfo_icon_13 { background-position: 0 -1931px; }
.sprite-homeinfo_icon_14 { background-position: 0 -1994px; }
.sprite-homeinfo_icon_15 { background-position: 0 -2057px; }
.sprite-homeinfo_icon_16 { background-position: 0 -2120px; }
.sprite-homeinfo_icon_17 { background-position: 0 -2183px; }
.sprite-homeinfo_icon_18 { background-position: 0 -2246px; }
.sprite-homeinfo_icon_19 { background-position: 0 -2309px; }
.sprite-homeinfo_icon_2 { background-position: 0 -2370px; }
.sprite-homeinfo_icon_20 { background-position: 0 -2429px; }
.sprite-homeinfo_icon_21 { background-position: 0 -2493px; }
.sprite-homeinfo_icon_22 { background-position: 0 -2554px; }
.sprite-homeinfo_icon_23 { background-position: 0 -2617px; }
.sprite-homeinfo_icon_24 { background-position: 0 -2679px; }
.sprite-homeinfo_icon_25 { background-position: 0 -2740px; }
.sprite-homeinfo_icon_26 { background-position: 0 -2802px; }
.sprite-homeinfo_icon_27 { background-position: 0 -2864px; }
.sprite-homeinfo_icon_28 { background-position: 0 -2925px; }
.sprite-homeinfo_icon_29 { background-position: 0 -2989px; }
.sprite-homeinfo_icon_3 { background-position: 0 -3049px; }
.sprite-homeinfo_icon_4 { background-position: 0 -3108px; }
.sprite-homeinfo_icon_5 { background-position: 0 -3171px; }
.sprite-homeinfo_icon_6 { background-position: 0 -3233px; }
.sprite-homeinfo_icon_7 { background-position: 0 -3296px; }
.sprite-homeinfo_icon_8 { background-position: 0 -3355px; }
.sprite-homeinfo_icon_9 { background-position: 0 -3418px; }
.sprite-sparmeister_icon_1 { background-position: 0 -3477px; }
.sprite-sparmeister_icon_10 { background-position: 0 -3540px; }
.sprite-sparmeister_icon_11 { background-position: 0 -3603px; }
.sprite-sparmeister_icon_12 { background-position: 0 -3667px; }
.sprite-sparmeister_icon_13 { background-position: 0 -3731px; }
.sprite-sparmeister_icon_14 { background-position: 0 -3795px; }
.sprite-sparmeister_icon_15 { background-position: 0 -3859px; }
.sprite-sparmeister_icon_16 { background-position: 0 -3923px; }
.sprite-sparmeister_icon_17 { background-position: 0 -3987px; }
.sprite-sparmeister_icon_18 { background-position: 0 -4051px; }
.sprite-sparmeister_icon_19 { background-position: 0 -4114px; }
.sprite-sparmeister_icon_2 { background-position: 0 -4177px; }
.sprite-sparmeister_icon_20 { background-position: 0 -4241px; }
.sprite-sparmeister_icon_21 { background-position: 0 -4303px; }
.sprite-sparmeister_icon_22 { background-position: 0 -4367px; }
.sprite-sparmeister_icon_23 { background-position: 0 -4431px; }
.sprite-sparmeister_icon_24 { background-position: 0 -4494px; }
.sprite-sparmeister_icon_25 { background-position: 0 -4558px; }
.sprite-sparmeister_icon_26 { background-position: 0 -4622px; }
.sprite-sparmeister_icon_3 { background-position: 0 -4686px; }
.sprite-sparmeister_icon_4 { background-position: 0 -4749px; }
.sprite-sparmeister_icon_5 { background-position: 0 -4813px; }
.sprite-sparmeister_icon_6 { background-position: 0 -4875px; }
.sprite-sparmeister_icon_7 { background-position: 0 -4938px; }
.sprite-sparmeister_icon_8 { background-position: 0 -5002px; }
.sprite-sparmeister_icon_9 { background-position: 0 -5066px; }
.sprite-spielemeister_icon_1 { background-position: 0 -5129px; }
.sprite-spielemeister_icon_10 { background-position: 0 -5192px; }
.sprite-spielemeister_icon_2 { background-position: 0 -5255px; }
.sprite-spielemeister_icon_3 { background-position: 0 -5318px; }
.sprite-spielemeister_icon_4 { background-position: 0 -5380px; }
.sprite-spielemeister_icon_5 { background-position: 0 -5442px; }
.sprite-spielemeister_icon_6 { background-position: 0 -5505px; }
.sprite-spielemeister_icon_7 { background-position: 0 -5568px; }
.sprite-spielemeister_icon_8 { background-position: 0 -5631px; }
.sprite-spielemeister_icon_9 { background-position: 0 -5690px; }

/* Begin: xlinks.css */
/**
 *  SDE XLinks Module
 *  
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_xlinks
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.xlinks {
    margin-bottom:  20px;
    overflow:       hidden;
}
.xlinks p {
    border-bottom:  1px solid #CCC;
    color:          #999;
    font-weight:    700;
    margin:         10px 0 5px 0;
}
    .xlinks p a {
        color:          #999;
        font-size:      13px;
        font-weight:    700;
    }
.xlinks a {
    color:          #000;
    font-size:      11px;
}
    .xlinks a strong {
        font-weight:    700;
    }

.xlinks .themen li {
    float:  left;
    margin: 0 10px 0 0;
}
    .xlinks .themen a {
        color:  #024282;
    }

/* Begin: toplisten.css */
/**
 *  SDE TopListen Module
 *
 *  This module displays a list of items in an `ol`, with a big fat number
 *  off to one side for easy viewing.
 *
 *      <div class="basebox toplist">
 *          <div class="header"><a href="[URL]">[TITLE]</a></div>
 *          <ol>
 *              <li>
 *                  <span class="number">1</span>
 *                  <a href="[URL]">
 *                      <strong>[OVERLINE]</strong>
 *                      [TITLE]
 *                  </a>
 *              </li>
 *              ...
 *          </ol>
 *      </div>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_toplisten
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

.toplist .body {
    background: #FFF;
    list-style: none;
    margin:     0 10px;
    padding:    10px 0 0 0;
    width:      280px;
}

    .toplist .body li {
        list-style:     none outside;
        padding-bottom: 0px;
    }
        .toplist .body li span {
            color:          #000;
            float:          left;
            font-size:      28px;
            font-weight:    700;
            line-height:    1;
            margin:         -1px 10px 0;
            padding-right:  2px;
        }
            .ie .toplist .body li span {
                display:    inline; /* Kill double margin bug */
            }   
        .sidebar .toplist .body li a {
            color:              #000;
            display:            block;
            float:              left;
            font-size:          11px;
            text-decoration:    none;
            width:              240px;
        }
            .toplist .body li a strong {
                color:          #024282;
                display:        block;
                font-weight:    700;
                left:           auto;
                position:       static;
            }

/* Begin: tabbox_finance.css */
/**
 *  SDE Finance Tabbed Module
 *
 *  The finance tabbed module is a special case of `tabbox` that contains
 *  `stockchart` and `stocklist` modules.
 *  
 *  Markup is as follows:
 *
 *  <pre><code>
 *      <div class="tabbox">
 *          <div class="header">[FINANCE MODULE TITLE]</div>
 *          <div class="body finance">
 *              <ul class="tabbox">
 *                  <li class="current">
 *                      [STOCKCHART MODULE {@see `.../css/modules/stockchart.css`}]
 *                  </li>
 *                  ...
 *                  <li>
 *                      [STOCKCHART MODULE {@see `.../css/modules/stockchart.css`}]
 *                  </li>
 *              </ul>
 *          </div>
 *          <div class="footer">
 *              [SEARCH MODULE]
 *          </div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_tabbox_finance
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.finance, .finance .body {
    background: #FFF;
}
    .finance .body .body {
        border:     1px solid #BBB;
    }
    .finance .body li {
        padding-left:   0;
    }
        .js .finance .body li {
            display:    none;
        }
        .js .finance .body .current {
            display:    block;
        }
    .js .finance .header {
        color:          #FFF;
    }
        .js .teaserlist .finance .header {
            padding-top:    0;
        }
    .js .finance .footer ol {
        left:   0;
        right:  auto;
    }
    .js .finance .footer li {
        margin-left:    0;
    }

.js .finance .footer li {
    background-color:   #DDD;
}
    .js .finance .footer li button {
        color:  #777;
    }
.js .finance .footer li.current {
    background-color: #999;
}
    .js .finance .footer li.current button {
        color:  #FFF;
    }

/**
 *  Search form: I've put this into a `complementary` div next to the normal
 *  `body`.  Might change that, but for now...
 *  @section Search Form
 */
.finance .complementary {
    border:         1px solid #BBB;
    border-width:   0 1px 1px;
    font-size:      85%;
    padding:        10px;
}
    .finance .complementary a {
        font-size:  100%;
        float:      right;
    }
    .finance .complementary form,
    .finance .complementary fieldset,
    .finance .complementary input {
        display:    inline;
    }
    .finance .complementary label {
        color:          #333;
        font-weight:    700;
        margin-right:   0.5em;
        text-transform: uppercase;
    }
    .finance .complementary input {
        margin-right:   0.5em;
    }

/* Begin: teaserlist.css */
/**
 *  SDE Teaser List
 *
 *  Contains an ordered list of the currently featured stories on
 *  sueddeutsche.de.  Really, just a special case of the `teaserlist`
 *  module.
 *
 *  Each story potentially contains:
 *      *   Title
 *      *   Subtitle
 *      *   URL
 *      *   Author + Author Prefix ( {"Mike West", "von"} oder {"Mike West", "ein Kommentar von"} )
 *      *   Image   (536x200 for the first item, 180x135 for the others)
 *      *   Teaser text
 *      *   Type ( "video", "image", etc. )
 *      *   A list of 0 to 3 related stories, each containing:
 *          *   Title
 *          *   Subtitle
 *          *   URL
 *          *   Type ( "video", "image", etc. )
 *
 *  Expected HTML is as follows:
 *
 *  <pre><code>
 *      <div id="[ID]" class="basebox teaserlist" aria-labelledby="[ID]label">
 *          <p class="offscreen header" id="[ID]label">[LABEL GOES HERE]</p>
 *          <ol class="body">
 *              <li>
 *                  <a href='%URL%'>
 *                      <!-- The following image's alt tag is empty.  On purpose. -->
 *                      <img src='%IMAGE%' alt='' width='536' height='200'>
 *                      <strong>%SUBTITLE%</strong>
 *                      %TITLE%
 *                  </a>
 *                  <p>
 *                      %TEASER%
 *                  </p>
 *                  <!-- If the article has a specified author... -->
 *                  <address>%AUTHOR_PREFIX% <span>%AUTHOR%</span></address>
 *                  <!-- Related stories -->
 *                  <ul class="oneline">
 *                      <li class="%TYPE%"><a href="%URL%"><strong>%SUBTITLE% </strong>&ndash; %TITLE%</a></li>
 *                      <li class="%TYPE%"><a href="%URL%"><strong>%SUBTITLE% </strong>&ndash; %TITLE%</a></li>
 *                      <li class="%TYPE%"><a href="%URL%"><strong>%SUBTITLE% </strong>&ndash; %TITLE%</a></li>
 *                  </ul>
 *              </li>
 *              ...
 *          </ol>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_teaserlist
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

.teaserlist {
    font-size:  100%;
}
    .maincolumn .teaserlist {
        background: #FFF;
    }
    .teaserlist .header {
        margin:     0;
    }
        .maincolumn .teaserlist .header {
            padding-top:    0;
        }
        .relatedcontent .teaserlist .header {
            margin-bottom:  10px;
        }
.teaserlist ol, .teaserlist ol li {
    list-style:             none;
    list-style-position:    outside;
}
/**
 *  CSS for generic teaser elements.
 *  @section    Teasers
 */
.teaserlist li {            /* Entry */
    border-top:     1px solid #BBB;
    clear:          both;
    overflow:       hidden;
    margin:         16px 0 0;
}
    .teaserlist .first {
        border:         0;
        margin-top:     0;
    }
.teaserlist li a {             /* Title */
    color:          #333;
    display:        block;
    font-size:      153.9%;
    margin:         16px 0 10px;
    margin-bottom:  11px;
    position:       relative;
}
    .teaserlist .first a {
        margin-top: 0;
    }
    .ie6 .teaserlist li a {
        padding-top:    1px;
    }
.teaserlist li strong {        /* Subtitle */
    color:          #024282;
    display:        block;
    font-size:      60%;
    font-weight:    700;
    padding:        0 0 1px;
    margin:         0;
}
    .ie6 .teaserlist li strong {
        padding-top:    5px;        /* Override padding for IE, then override the override for oneliners */
    }
        .ie6 li .oneline strong,
        .ie6 .teaserlist .oneline strong {
            padding-top:    0px;
        }
.teaserlist li img {           /* Teaser Image */
    float:  left;
    margin: 0 16px 12px 0;
}
.teaserlist li p,              /* Teaser Text */
.teaserlist li cite {       /* Author Information */
    color:      #333;
}
        .teaserlist .top p, .teaserlist li p {
            margin-left:    196px;
            width:          340px;
        }
        .teaserlist .standard p {
            margin-left:    151px;
            width:          385px;
        }
        .teaserlist .noimage p {
            margin-left:    0;
            width:          auto;
        }
    .teaserlist cite {
        font-style: italic;
    }

/**
 *  Teasers in "oneline" format (only Title + Subtitle, together on one line)
 *  @section    Oneline Teaser Format
 */
.oneline {
    border-top: 0;
}
.oneline a {        /*  Title       */
    font-size:      93%;
    font-weight:    400;
    margin:         16px 0px 0px;
}
.oneline strong {   /*  Subtitle    */
    display:        inline;
    font-size:      100%;
    font-weight:    700;
}
/**
 *  A teaser's related stories (need to overwrite a few styles...).  Teaser lists
 *  _inside_ baseboxen also take this form.
 *  @section    Related Stories
 */
.basebox ul.teaserlist {
    background: none;
}
.basebox ul.teaserlist,
.teaserlist ul {                    /* Related Stories List */
    clear:          both;
    margin-top:     12px;
    width:          auto;
}
    .basebox ul.teaserlist, 
    .teaserlist ul img {
        display:    block;   
    }
    .basebox ul.teaserlist li,
    .teaserlist ul li {             /* Each related story   */
        background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat 5px -943px;
        border:         0;
        padding:        0 0 0 12px;
        margin:         0;
    }
        .ie6 .basebox ul.teaserlist li,
        .ie6 .teaserlist ul li {
            background-position:    5px -942px;
        }
    .sidebar .basebox .oneline a,
    .teaserlist .oneline a,
    .teaserlist ul a {              /* -    Title           */
        color:          #333;
        display:        inline;
        font-size:      85%;
        line-height:    1.5;
        margin:         0;
    }
        .teaserlist .oneline a {
            font-weight:    400;
        }
        .sidebar .basebox .oneline a {
            font-size:  100%;
        }
    .basebox ul.teaserlist strong,
    .teaserlist ul strong {
        color:      #333;
        display:    inline;
        font-size:  100%;
    }
    .basebox ul.teaserlist .division,
    .teaserlist ul .division {
        position:   absolute;
        left:       -999em;
    }

/**
 *  Sidebar Teaserlists
 *
 *  Teaserlists in the sidebar have different size requirements than the same
 *  lists in the main column.
 *
 *
 */
.sidebar .teaserlist {
    font-size:  83%;
    width:      auto;
}
    .sidebar .basebox .teaserlist {
        font-size:  100%;
    }

    /* Adapt header style for sidebar */
    .sidebar .teaserlist .header {
        padding:     10px 10px 0 10px;
    }

    .sidebar .teaserlist li {
        border-top:     0;
        margin:         0;
        padding-bottom: 0;
    }
    .sidebar .teaserlist li a {
        font-size:      100%;
        color:          #024282;
        margin:         10px 0 5px;
    }
    .sidebar .teaserlist li.first a {
        margin-top:     5px;
    }
    .sidebar .teaserlist li strong {
        font-size:      100%;
        padding-top:    0;
    }
    .sidebar .teaserlist li p,
    .sidebar .teaserlist .top p,
    .sidebar .teaserlist .standard p {
        margin-bottom:  2px;
        margin-left:    0;
        width:          auto;
    }

    /* Remove margins in and inside last list item */
    .sidebar .teaserlist li.last,
    .sidebar .teaserlist li.last img,
    .sidebar .teaserlist li p {
        margin-bottom:    0;
        padding-bottom:   0;
    }

/**
 *  Story Types
 *
 *  
 *
 *  @section    Story Types
 */

.teaserlist .type {
    background:     url(/static_assets/build/img/site/sprite-articletypes.80f229d5.png) no-repeat 0 0;
    color:          #333;
    font-size:      83%;
    padding:        0 0 0 15px;
    text-transform: uppercase;
}
    .teaserlist a .type { font-size:    100%; }
    .teaserlist .image .type        {   background-position:    0 0;        }
    .teaserlist .video .type        {   background-position:    0 -49px;    }
    .teaserlist .audio .type        {   background-position:    0 -99px;   }
    .teaserlist .game  .type        {   background-position:    0 -149px;   }
    .teaserlist .external .type     {   background-position:    0 -199px;   }
    .teaserlist .opinion .type      {   background-position:    0 -249px;   }

/* Begin: teaserlist_breakingnews.css */
/**
 *  SDE Breaking News Teaser
 *
 *  "Top Themen" modules can contain "Breaking News" stories as their
 *  zeroth element.  These take exactly the same form as the other teaser
 *  types, but require a `breakingnews` class on their containing `li`.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_teaserlist_breakingnews
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: teaserlist_topthemen.css 332 2010-02-02 14:18:17Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/modules/teaserlist_topthemen.css $
 */
.teaserlist .breakingnews {
    border-top:     0;
    border-bottom:  3px solid #9C0000;
    margin-bottom:  16px;
    padding:        0 0 16px 0;
}
    .teaserlist #breakingnewslabel {
        background:     #9C0000;
        color:          #FFF;
        font-size:      12px;
        font-weight:    700;
        letter-spacing: 2px;
        margin:         0 0 4px;
        padding:        2px 0;
        text-align:     center;
        text-transform: uppercase;
        width:          auto;
    }
        .teaserlist .topteaser #breakingnewslabel {
            margin-bottom:  0;
        }
    .teaserlist .breakingnews strong,
    .teaserlist .breakingnews a:hover {
        color:      #9C0000;
    }
    .teaserlist .breakingnews a {
        margin-top: 0;
    }


/* Begin: teaserlist_metadata.css */
/**
 *  SDE Teaser List Metadata
 *
 *  Teaser lists can contain metadata: title, description, and image.  These
 *  are used, for example, on theme pages and specials to add exciting text
 *  that Google might enjoy.  Er... I mean... that _users_ might enjoy.  Because
 *  we care about our users.  Deeply.  *cough*
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_teaserlist_metadata
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: teaserlist_topthemen.css 332 2010-02-02 14:18:17Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/modules/teaserlist_topthemen.css $
 */
.teaserlist p.specialcolor,
.teaserlist .metadata {
    background:     #FFF;
    border-width:   0 0 4px 0;  /* Border color comes from `.ressort-color`. */
    border-style:   solid;
    margin-bottom:  1em;
}
    .teaserlist .metadata {
        border-width:   0;
        margin-bottom:  2em;
    }
    .teaserlist p.specialcolor {
        color:          #333;
        font-size:      20px;
        font-weight:    700;
        margin-top:     16px;
        margin-bottom:  16px;
        padding-bottom: 0;
    }
        .teaserlist p.specialcolor a {
            color:      #111;
        }
    .teaserlist .metadata h1 {
        color:          #666;
        font-size:      20px;
        margin:         0 0 0.5em;
    }
        .teaserlist .metadata h1 img  {
            float:      none;
            margin-top: 0.5em;
        }
    .teaserlist .metadata p {
        color:      #666;
        font-size:  93%;
        margin:     0 0 1em 0;
        width:      auto;
    }
        .teaserlist .metadata b, .teaserlist .metadata h3 {
            font-weight:    700;
        }
            .teaserlist .metadata h3 {
                display:    block;
            }
        .teaserlist .metadata i {
            font-style:     italic;
        }


/* Begin: teaserlist_paging.css */
/**
 *  SDE Teaser List Paging
 *
 *  Teaser lists might be spread over more than one page.  In that case, the 
 *  teaser list itself will be followed by the following HTML markup to link
 *  off to the other relevant pages (described in detail [here][1]):
 *
 *  <pre><code>
 *      <p id="paginglabel" class="audible">Pagination</p>
 *      <ul role="navigation" aria-labelledby="paginglabel">
 *          <li><a href="#"><span class="audible">%TYPE% Page</span>1</a></li>
 *          <li><a href="#" rel="prev"><span class="prev">Previous<span class="audible">: %TYPE% Page</span></span>2</a></li>
 *          <li><p><span class="audible">You're currently reading %TYPE% page </span>3</p></li>
 *          <li><a href="#" rel="next"><span class="next">Next<span class="audible">: %TYPE% Page</span></span>4</a></li>
 *          <li><a href="#"><span class="audible">%TYPE% Page </span>5</a></li>
 *      </ul> 
 *  </code></pre>
 *
 *  [1]:    http://mikewest.org/2010/02/an-accessible-pagination-pattern
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_teaserlist_paging
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id: teaserlist_topthemen.css 332 2010-02-02 14:18:17Z mwest $
 *  @url        $URL: http://svn.sznet.de/repos/static_assets/branches/new-grid/src/css/modules/teaserlist_topthemen.css $
 */
.themelist .footer {
    margin:         0;
    padding-bottom: 2px;
}
.teaserlist .paging, .themelist .paging {
    border-top:     1px solid #BBB;
    display:        block;
    padding-top:    1em;
    position:       relative;
    text-align:     center;
}
    .teaserlist .paging li, .themelist .paging li {
        background:     0;
        border-left:    1px solid #999;
        display:        inline;
        padding:        0 3px;
        position:       static;
    }
        .themelist .paging li {
            position:       static;
        }
        .teaserlist .paging .first, .themelist .paging .first {
            border: 0;
        }
    .teaserlist .paging a, .themelist .paging a {
        position:   static;
    }
        .teaserlist .paging .prev, .themelist .paging .prev {
            background: url(/static_assets/build/img/article/unsprited/icon-arrow-left.da24f3d2.png) no-repeat top left;
            padding:    0 0 1px 25px;
            position:   absolute;
            top:        7px;
            left:       0;
        }
        .teaserlist .paging .next, .themelist .paging .next {
            background: url(/static_assets/build/img/article/unsprited/icon-arrow-right.68818f2d.png) no-repeat top right;
            padding:    0 25px 1px 0;
            position:   absolute;
            top:        7px;
            right:      0;
        }
            .themelist .paging .prev,
            .themelist .paging .next {
                padding-top:    3px;
                padding-bottom: 3px;
            }
    .teaserlist .paging p, .themelist .paging p {
        display:        inline;
        font-size:      85%;
        font-weight:    700;
        margin:         0;
        width:          auto;
    }
        .themelist .paging p {
            font-size:  100%;
        }

/* Begin: teaserlist_topteaser.css */
/**
 *  SDE Top Themen Module
 *
 *  Teaserlists can display "Top" teasers with a full-width image,
 *  overlaid with the subtitle near its top-right corner.  The overlay is
 *  either white on black, or black on white, controlled via an `darkimage`
 *  class placed on the containing `li`.
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_teaserlist_topeaser
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.teaserlist {
    width:  536px;
}
.teaserlist .topteaser img {
    display:        block;
    float:          none;
    margin:         0 0 16px -3px;
}
.teaserlist .topteaser a {
    font-size:      167%;
    margin-bottom:  8px;
    padding-left:   3px;
}
    .teaserlist .topteaser a strong {
        color:    #FFF;
    }
    .teaserlist .topteaser ul a {
        padding-left:   0;
    }
.teaserlist .topteaser p,
.teaserlist .breakingnews p {
    margin: 3px;
    width:  auto;
}
.teaserlist .topteaser strong {
    background:     #000;
    background:     rgba( 0, 0, 0, 0.5 ) none;
    color:          #FFF;
    display:        block;
    font-size:      55.5%;
    font-weight:    700;
    left:           0;
    line-height:    1;
    padding:        4px 10px;
    position:       absolute;
    top:            1.5em;
}
    .ie678 .teaserlist .topteaser .entry-title strong {
        background: none;
        filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#80000000', EndColorStr='#80000000');
        zoom:       1;
    }
    .teaserlist .topteaser ul a {
        font-size:  85%;
        margin:     0;
    }
    .teaserlist .topteaser ul strong {   /* -    Dachzeile       */
        background: none;
        color:      #555;
        display:    inline;
        font-size:  100%;
        padding:    0;
        position:   relative;
        top:        0;
    }
    .teaserlist .darkimage a strong {
        background: #FFF;
        background: rgba( 255, 255, 255, 0.5 ) none;
        color:      #000;
    }
        .ie678 .teaserlist .darkimage .entry-title strong {
            background: none;
            filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#80FFFFFF',EndColorStr='#80FFFFFF');
            zoom:       1;
        }


/**
 *  Mouseover effects
 */
    .teaserlist a:hover,
    .teaserlist ul a:hover,
    .teaserlist ul a:hover strong {
        color:  #024282;  
    }

/* Begin: teaserlist_subtheme.css */
/**
 *  SDE Teaser Lists: Subthemes
 *
 *  Teaser lists can contain subtheme lists, which require slightly
 *  different styles, especially for oneliners.
 *  
 *      <div id="[ID]" class="basebox teaserlist" aria-labelledby="[ID]label">
 *          <p class="offscreen header" id="[ID]label">[LABEL GOES HERE]</p>
 *          ...
 *          <ol class="subtheme">
 *              <li>[TEASER]</li>
 *              <li>[ONELINER]</li>
 *              <li>[ONELINER]</li>
 *          </ol>
 *      </div>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_teaserlist_subtheme
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.subtheme li.oneline {
    background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat 5px -944px;
    border-top:     0;
    margin:         0;
    padding-left:   12px;
}
    .subtheme .oneline a {
        display:        block;
        font-weight:    700;
        margin:          0 0 4px;
    }
    .subtheme .oneline strong {
        display:        inline;
        font-size:      100%;
    }
    .subtheme .oneline .division {
        left:           -999em;
        position:       absolute;
    }

/* Begin: teaserlist_icons.css */
/**
 *  SDE Teaser List: Icons
 *
 *  Some types of teasers ought render with an icon (video, slideshows, etc.)
 *  These icons are based on the `class` set on the teaser's `li` (see markup
 *  below:
 *
 *
 *      <div id="[ID]" class="basebox teaserlist" aria-labelledby="[ID]label">
 *          <p class="offscreen header" id="[ID]label">[LABEL GOES HERE]</p>
 *          <ol class="body">
 *              <li>
 *                  <a href='%URL%'>
 *                      <!-- The following image's alt tag is empty.  On purpose. -->
 *                      <img src='%IMAGE%' alt='' width='536' height='200'>
 *                      <strong>%SUBTITLE%</strong>
 *                      %TITLE%
 *                  </a>
 *                  <p>
 *                      %TEASER%
 *                  </p>
 *                  <!-- If the article has a specified author... -->
 *                  <address>%AUTHOR_PREFIX% <span>%AUTHOR%</span></address>
 *                  <!-- Related stories -->
 *                  <ul>
 *                      <li class="%TYPE%"><a href="%URL%"><strong>%SUBTITLE% </strong>&ndash; %TITLE%</a></li>
 *                      <li class="%TYPE%"><a href="%URL%"><strong>%SUBTITLE% </strong>&ndash; %TITLE%</a></li>
 *                      <li class="%TYPE%"><a href="%URL%"><strong>%SUBTITLE% </strong>&ndash; %TITLE%</a></li>
 *                  </ul>
 *              </li>
 *              ...
 *          </ol>
 *      </div>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_teaserlist_icons
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */


/**
 *  Oneliners are trivial: each type has an icon stuck at the beginning of the `strong` element
 */
.oneline li strong,
.teaserlist .oneline strong,
.teaserlist .topteaser ul strong,
.teaserlist p.hasIcon .icon {
    background:     url(/static_assets/build/img/article/sprite-typeicons.c05e2dcf.png) no-repeat 0 0;
    padding-left:   15px;
}
    .teaserlist p.hasIcon .icon {
        display:        inline-block;
        padding-left:   0;
        height:         1em;
        width:          1em;
    }
    .oneline .plaintext strong,
    .teaserlist .plaintext strong,
    .teaserlist .topteaser .plaintext strong {
        background-image:   none;
        padding-left:       0;
    }

    .teaserlist li.Audio .hasIcon .icon,
    .subtheme li.Audio strong,
    .ressortblock li.Audio strong,
    .oneline .Audio strong,
    .oneline .topteaser .Audio strong       {    background-position:    0 2px;   }

    .teaserlist li.Photo .hasIcon .icon,
    .subtheme li.Photo strong,
    .ressortblock li.Photo strong,
    .oneline .Photo strong,
    .topteaser .oneline .Photo strong       {    background-position:    1px -328px;   }

    .teaserlist li.Video .hasIcon .icon,
    .subtheme li.Video strong,
    .ressortblock li.Video strong,
    .oneline .Video strong,
    .topteaser .oneline .Video strong       {    background-position:    0 -108px;   }

    .teaserlist li.Spiel .hasIcon .icon,
    .subtheme li.Spiel strong,
    .ressortblock li.Spiel strong,
    .oneline .Spiel strong,
    .topteaser .oneline .Spiel strong       {    background-position:    0 -218px;   }

    .teaserlist li.Interaktiv .hasIcon .icon,
    .subtheme li.Interaktiv strong,
    .ressortblock li.Interaktiv strong,
    .oneline .Interaktiv strong,
    .topteaser .oneline .Interaktiv strong  {    background-position:    1px -438px;   }

/* Begin: themehighlights.css */
/**
 *  SDE Theme Highlights
 *
 *  When applied to a container, `span` elements inside links and paragraphs
 *  are colored `#C00` to demarcate them from surrounding text.
 */

.themehighlights a span,
.themehighlights p span {
    color:  #C00;
}

/* Begin: ressortblock.css */
/**
 *  SDE Ressortblock Module
 *
 *  Displays each Ressort in a block on the homepage.  Each Ressort is
 *  a single `li`, containing a `teaserlist` of articles, and a list of up
 *  to three selected themes from the Ressort.
 *
 *  @TODO:  I've moved the `themen` block up to sit directly under the 
 *          `ressorttitle` block.  I don't like this source order, as it
 *          ends up reading as "Articles in X.  X Themes.  Theme 1,
 *          Theme 2.  Article 1 ...."  I don't see any good way of achieving
 *          the required layout with the source order I'd prefer, however.
 *          So, I'll run with it like this for now, with the hopes of fixing
 *          it up later.  See [SDE-275].
 *
 *  Markup is as follows:
 *
 *  <pre><code>
 *      <p class="offscreen" id="ressortblocklabel">Ressort Liste</p>
 *      <ul class="ressortblock" role="complementary" aria-labelledby="ressortblocklabel">
 *          <li class="first"><!-- Every other `li`, starting with the first, has class `first` -->
 *              <p class="ressorttitle">
 *                  <span class="offscreen">Artikel zum Thema </span><a href="/politik/">Politik</a><span class="offscreen">: </span>
 *              </p>
 *              <p class="offscreen">Politik Themen</p>
 *              <ul class="themen">
 *                  <li><a href="%URL%">Thema 1</a></li>
 *                  <li><a href="%URL%">Thema 2</a></li>
 *              </ul>
 *              <ul class="teaserlist hfeed">
 *                  <li class="hentry">
 *                      <a href='%URL%' class="entry-title" rel="bookmark">
 *                          <!-- The following image's alt tag is empty.  On purpose. -->
 *                          <img src='%IMAGE%' alt='' width='135' height='135'>
 *                          <strong>%SUBTITLE%</strong>
 *                          %TITLE%
 *                      </a>
 *                      <p class="entry-summary">
 *                          %TEASER%
 *                      </p>
 *                      <!-- If the article has a specified author... -->
 *                      <address class="vcard">%AUTHOR_PREFIX% <span class="author fn">%AUTHOR%</span></address>
 *                  </li>
 *                  <li class="oneline %TYPE% hentry"><a href="%URL%" class="entry-title" rel="bookmark"><strong>%SUBTITLE% </strong>&ndash; %TITLE%</a></li>
 *              </ul>
 *          </li>
 *      </ul>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_ressortblock
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.ressortblock {
    clear:          both;
    overflow:       hidden;
    margin-bottom:  60px;
}
    .ie6 .ressortblock {
        /*  A weird IE6 bug: the first item in the list will be
         *  offset from the second item in the list: applying
         *  padding to the top of the list itself snaps everything
         *  into place.
         *
         *  Applying the same fix in IE7 pushes everything down
         *  _except_ the second item in the list.  So, this rule is
         *  IE6-specific.  And doesn't make much sense, honestly.
         */
        padding-top:    5px;
    }
    .ressortblock ul {
        width:      auto;
    }
        .ressortblock .teaserlist {
            border-top:     1px solid #CCC;
            clear:          left;
            overflow:       auto;
            padding-top:    8px;
        }
    .ressortblock li {
        border:     0;
        clear:      none;
        float:      left;
        margin:     40px 0 0 24px;
        padding:    0;
        width:      418px;
    }
        .ie6 .ressortblock li,
        .ie7 .ressortblock li {
            float:          none;
            margin-left:    435px;
            zoom:           1;
        }
        .ressortblock li.ad {
            clear:  both;
            margin: 40px 66px 0;
            width:  auto;
        }
    .ressortblock .hentry p {
        width:          267px;
        margin-left:    151px;
        margin-bottom:  8px;
    }
        .ressortblock .noimage p {
            margin-left:    0;
            width:          auto;
        }
        .ressortblock .first {
            border:         0;
            clear:          both;
            margin-left:    0;
        }
            .ie6 .ressortblock .first,
            .ie7 .ressortblock .first {
                float:          left;
                margin-left:    0;
            }
        .ressortblock li li {
            list-style: none;
            margin:     0;
        }
            .ie6 .ressortblock li li,
            .ie7 .ressortblock li li {
                margin: 0;
            }

        .ressortblock .oneline a {
            background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat 5px -944px;
            font-size:      93%;
            font-weight:    700;
            margin-top:     0;
            padding-left:   12px;
        }
            .ressortblock .oneline strong {
                display:        inline;
                font-size:      100%;
                font-weight:    700;
            }
            .ressortblock .division {
                position:   absolute;
                left:       -999em;
            }
/**
 *  Mouseover effects
 */
    .ressortblock a:hover,
    .ressortblock .oneline a:hover {
        color:  #024282;  
    }
/**
 *  Ressort Title
 *  @section    title
 */
    .ressortblock .ressorttitle {
        text-transform: uppercase;
        width:          auto;
        float:          left;
    }
    .ressortblock .ressorttitle a {
        color:          #333;
        font-size:      138.5%;
    }
/**
 *  Ressort Subthemen
 *  @section    Subthemen
 */
    .ressortblock .themen {
        float:  left;
        margin: 4px 0 0 5px;
    }
        .ressortblock .themen li {
            border-left:    1px solid #999;
            float:          left;
            width:          auto;
        }
            .ressortblock .themen .first {
                border:     0;
            }
        .ressortblock .themen a {
            font-size:  93%;
            color:      #333;
            padding:    0 5px;
        }

/* Begin: stockchart.css */
/**
 *  SDE Stockchart Overview Module
 *
 *  The stock chart module displays two columns of information, the current
 *  price and change in price, along with a chart, on the left side, and a
 *  table of "Tops and Flops" on the right.
 *  
 *  Markup is as follows:
 *
 *  <pre><code>
 *      <div class="stockchart">
 *          <div class="header">[STOCK TITLE]</div>
 *          <div class="body">
 *              <p>
 *                  <span class="offscreen">Letzt Dow Jones</span>
 *                  <span class="label">Kurs</span>
 *                  <span class="offscreen">liegt bei</span>
 *                  <span class="value">10.389,88 Pkt</span>
 *                  <span class="offscreen">, eine Veränderung von</span>
 *                  <span class="change negative">-213.27 (-2.01%)</span>
 *                  <span class="offscreen">.</span>
 *                  <a href="#KURSLISTE">
 *                      <img
 *                          src="http://www.sueddeutsche.de/app/static/sdz.ariva.de/images/smallchart2895.png?secu=290"
 *                          width="180" height="100" alt=""
 *                      >
 *                      zur Kursliste&hellip;
 *                  </a>
 *              </p>
 *              <table>
 *                  <caption>Tops und Flops</caption>
 *                  <thead>
 *                      <tr class="offscreen">
 *                          <th>Name</th>
 *                          <th>Letzter Kurs</th>
 *                      </tr>
 *                  </thead>
 *                  <tbody class="tops">
 *                      <tr>
 *                          <td><a href="#TODO">%NAME%</a></td>
 *                          <td>%VALUE%</td>
 *                      </tr>
 *                      ...
 *                  </tbody>
 *                  <tbody class="flops">
 *                      <tr>
 *                          <td><a href="#TODO">%NAME%</a></td>
 *                          <td>%VALUE%</td>
 *                      </tr>
 *                      ...
 *                  </tbody>
 *              </table>
 *          </div>
 *          <div class="footer">[FOOTER]></div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_stockchart
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

/**
 *  Left Column:    Current stock information, plus a chart of the stock's
 *                  recent behavior, and a link to a more detailed view.
 *  @section    Detail Info Column
 */
.stockchart .body {
    font-size:  85%;
    overflow:   hidden;
    padding:    10px;
}
    .maincolumn .stockchart .body {
        width:  514px;
    }
.stockchart p, .teaserlist .stockchart p {
    float:          left;
    line-height:    1;
    margin:         0 12px 0 0;
    padding:        0;
    width:          180px;
}
    .stockchart .value {
        font-weight:    700;
    }
    .stockchart .change {
        float:      right;
        padding:    0 15px 0 0;
    }
    .stockchart .negative {
        background:     url('/static_assets/build/img/modules/stockchart/unsprited/change-negative.2619eed3.png') no-repeat right 1px;
        color:          #FF0000;
    }
    .stockchart .positive {
        background:     url('/static_assets/build/img/modules/stockchart/unsprited/change-positive.bd721ec0.png') no-repeat right 1px;
        color:          #609C53;
    }

    .stockchart p a {
        border-top:     1px solid #DDD;
        display:        block;
        font-weight:    400;
        margin-top:     5px;
        padding-top:    10px;
        text-align:     right;
    }

/**
 *  "Tops and Flops" Table
 *  @section    Tops and Flops
 */
.stockchart table {
    width:      204px;
}
    .stockchart col.value {
        width:  80px;
    }
.stockchart caption {
    font-weight:    700;
    padding-bottom: 3px;
}
    .stockchart .flops {
        border-top:     3px solid #BBB;
    }
    .stockchart tbody tr {
        height:         20px;
        border:         1px solid #DDD;
        border-width:   1px 0;
    }
    .stockchart tbody tr.odd {
        background:     #F5F5F5;    
    }
    .stockchart table a {
        margin-left:    5px;
    }
    /* Funky bar chart */
    .stockchart table span {
        border-left:    20px solid #FF0000;
        border-right:   20px solid #609c53;
        display:        block;
        text-align:     center;
        width:          35px;
    }
        .stockchart .tops span {
            border-left:    0;
            margin-left:    20px;
            padding-right:  4px;
            text-align:     right;

        }
        .stockchart .flops span {
            border-right:   0;
            margin-right:   20px;
            padding-left:   4px;
            text-align:     left;
        }


/* Begin: stockchart.css */
/**
 *  SDE Stockbox (as basebox)
 *
 *  The basebox variant of {@link 'stockbox.css'} is meant for display in
 *  the right column of articles.  The HTML is similar to the stand-alone
 *  stockbox module, with a tiny bit less information displayed:
 *
 *  <pre><code>
 *      <div class="basebox stockchart">
 *          <div class="header"><a href="#TODO">%COMPANY_NAME%</a></div>
 *          <p class="body">
 *              <span class="offscreen">Letzter Dow Jones</span>
 *              <span class="label">Kurs</span>
 *              <span class="offscreen">liegt bei</span>
 *              <span class="value">10.389,88 Punkten</span>
 *              <span class="offscreen">, dies entspricht einer Veränderung von</span>
 *              <span class="change negative">-2.01%</span>
 *              <span class="offscreen">.</span>
 *              <a href="#KURSLISTE">
 *                  <img
 *                      src="http://www.sueddeutsche.de/app/static/sdz.ariva.de/images/smallchartf0ee.png?secu=4325"
 *                      width="300" height="100" alt=""
 *                  >
 *                  <span class="offscreen">zur Kursliste&hellip;</span>
 *              </a>
 *          </p>
 *          <ul class="footer">
 *              <li><a href="%PROFILE_LINK%">Profil</a></li>
 *              <li><a href="%CHARTS_LINK%">Weitere Charts</a></li>
 *              <li><a href="%NEWS_LINK%">Nachrichten</a></li>
 *          </ul>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.sidebar .stockchart p {
    color:      #666;
    font-size:  100%;
    padding:    0 10px;
    width:      280px;
}
.sidebar .stockchart .change {
    float:          none;
    font-weight:    700;
    display:        inline;
    margin-left:    1em;
}
.sidebar .stockchart ul {
    display:    block;
    margin:     0 10px;
    text-align: right;
}
    .sidebar .stockchart li {
        display:        inline;
        margin-left:    1em;
    }
        .sidebar .stockchart li a {
            background:     url(/static_assets/build/img/article/sprite.b3d199b4.png) no-repeat right -22px;
            color:          #024282;
            font-weight:    400;
            padding:        0 10px 0 0;
        }

/* Begin: whisper.css */
/**
 *  SDE Whisper Article
 *
 *  When Whispers are rendered as articles, they look like this:
 *
 *  <pre><code>
 *      <div class="basebox">
 *          <div class="header">[TITLE]</div>
 *          <div class="body">[BODY]</div>
 *          <div class="footer">[FOOTER]></div>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_whisper
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.whisper {
    overflow:   hidden;
}
/**
 *  Whisper Article
 *  @section Article
 */
    .whisper .header {
        color:          #666;
        font-size:      93%;
        margin:         0;
        text-align:     right;
    }
    .whisper blockquote {
        background:     #F7F7F7;
        border:         1px solid #EEE;
        color:          #333;
        font:           25px Baskerville, Georgia, 'Times New Roman', Serif;
        padding:        10px;
        position:       relative;
        line-height:    1.5;
        text-indent:    40px;
    }
        .ie6 .whisper blockquote {
            zoom:   1;
        }
        .whisper blockquote .quote {
            background:     url(/static_assets/build/img/modules/whisper/speechbubble-articlesidebar.9853849a.png) no-repeat top right;
            color:          #BBB;
            font-family:    Arial, Helvetica, 'Sans-Serif';
            font-size:      125px;
            left:           10px;
            line-height:    35px;
            padding-top:    64px;
            position:       absolute;
            text-indent:    0;
            top:            -16px;
            width:          50px;
        }
    .whisper label {
        color:          #666;
        font-size:      85%;
        font-weight:    700;
    }
    .whisper .footer {
        overflow:       auto;
        padding-top:    5px;
    }
        .whisper .footer form {
            float:      left;
            margin-top: 0.75em;
        }
            .whisper .footer label input {
                margin: 0 0.5em;
                width:  2em;
            }
        .whisper .footer ul {
            float:      right;
            overflow:   hidden;
        }
        .whisper .footer li {
            float:          left;
            margin-left:    10px;
            overflow:       hidden;
            width:          36px;
        }
        .whisper .footer a {
            display:        block;
            height:         36px;
            padding-left:   36px;
        }
            .whisper .footer .prev a {
                background: url(/static_assets/build/img/article/unsprited/icon-arrow-36x36-left.e33def6c.png) no-repeat top left;
            }
            .whisper .footer .next a {
                background: url(/static_assets/build/img/article/unsprited/icon-arrow-36x36-right.a497d885.png) no-repeat top left;
            }
    .whisper .submission {
        clear:      both;
        margin-top: 2em;
    }
        .whisper .submission textarea {
            background: #FFF url(/static_assets/build/img/modules/whisper/background-textarea.2bdacfed.png);
            border:     1px inset #DDD;
            display:    block;
            font-size:  93%;
            height:     6em;
            width:      534px;
        }
        .whisper .submission input {
            float:      right;
            font-size:  85%;
            margin-top: 0.5em;
        }
    .whisper .disclaimer {
        color:          #666;
        clear:          both;
        font-size:      93%;
        margin:         5em 0 0 0;
    }
/**
 *  Response to whisper submission
 *  @section    Whisper Response
 */
.whisperresponse {
    color:          #666;
    font-size:      93%;
    font-weight:    700;
    margin:         1em 0;
}
    .whisperresponse p {
        margin: 0;
    }
    .whisperresponse .header {
        text-transform: uppercase; 
    }

/* Begin: whisper.css */
/**
 *  SDE Whisper Module
 *
 *  When Whisper articles are placed into the sidebar, they're based on `basebox`,
 *  and look like this (for the article version of whispers, see
 *  {@link `whisper.css`}:
 *
 *  <pre><code>
 *       <div class="basebox whisper">
 *          <p class="header">
 *              <span>${whisperArticle.overline}</span>
 *              ${whisperArticle.question}
 *          </p>
 *          <div class="body">
 *              <blockquote>
 *                  <span class="quote">"</span>${currentWhisperContent}
 *              </blockquote>
 *              <a rel="next" href="${whisperArticleURL}">mehr&hellip;</a>
 *          </div>
 *          <form method="post" action="${whisperArticleURL}" class="submission">
 *              <label>
 *                  Mein ${whisperArticle.whisperType} lautet:
 *                  <textarea name="newWhisper"></textarea>
 *              </label>
 *              <input type="submit" class="cta secondary submit" value="Abschicken">
 *          </form>
 *      </div>
 *  </code></pre>
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_basebox_whisper
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.sidebar .whisper {
    margin:             0;
    padding-bottom:     10px;
}
    .sidebar .whisper .header {
        color:          #A5A5A5;
        font-size:      118.2%;
        font-weight:    700;
        margin:         0 10px 15px;
        text-align:     left;
        text-transform: none;
    }
        #articlesidebar .whisper .header {
            margin:     0 0 15px;
        }
    .sidebar .whisper .header span {
        color:          #000;
        display:        block;
        font-size:      84.6%;
        font-weight:    700;
        margin:         0 0 0.5em;
        text-transform: uppercase;
    }
    .sidebar .whisper .body {
        overflow:       visible;
        margin:         5px 10px 0;
    }
        .sidebar .whisper .body a {
            font-size:      93%;
            font-weight:    400;
            float:          right;
            margin:         5px 0;
        }
        #articlesidebar .whisper .body {
            margin:         5px 0 0;
        }
    .sidebar .whisper blockquote {
        background:     #FFF;
        border-color:   #A5A5A5;
        color:          #666;
        font-family:    Arial, "Sans Serif";
        font-size:      109.09%;
        line-height:    1.8;
        text-indent:    25px;
        position:       relative;
    }
        #articlesidebar .whisper blockquote {
            background:     #F7F7F7;
            border-color:   #EEE;
        }

        .sidebar .whisper .body blockquote a {
            float:          none;
        }
        .sidebar .whisper blockquote .quote {
            background:     url(/static_assets/build/img/modules/whisper/speechbubble-sidebar.d4ce3dc3.png) no-repeat top right;
            font-size:      70px;
            padding-top:    40px;
        }
            .whisper blockquote .quote,
            #articlesidebar .whisper blockquote .quote {
                background:     url(/static_assets/build/img/modules/whisper/speechbubble-articlesidebar.9853849a.png) no-repeat top right;
            }
    .sidebar .whisper .submission {
        margin:         0 10px 10px;
    }
        #articlesidebar .whisper .submission {
            margin:     0;
        }
        .sidebar .whisper label {
            font-size:  100%;
        }
        .sidebar .whisper textarea {
            border:     1px inset #DDD;
            font-size:  118.18%;
            padding:    5px;
            width:      268px;
        }
            #articlesidebar .whisper textarea {
                width:      288px;
            }
        .sidebar .whisper input {
            float:      left;
            font-size:  100%;
        }

/* Begin: thumbnaillist.css */
/*****************************************************************************
 *  Thumbnail Tabs
 */
        #thumbnail_lists {
            position:   relative;
            height:     700px;
            margin:     10px 0 0 0;
            z-index:    1;
        }
        
        h2, h3 {
            color:      #111;
            font-size:  131%;
            clear:      both;
        }
        .tabbody {
            padding:        0 0 8px 0;
            width:          100%;
        }
        .content {
            overflow:       hidden;
            height:         670px;
        }
        .content .content {
            background: none;
            height:     auto;
            float:      left;
            width:      781px;
            zoom:       1;
            padding:    0;
        }
        .js #thumbnail_lists .current-info,
        .js #thumbnail_lists .accessibletabsanchor{
            position:absolute;
            left:-999em;
        }
            .js #thumbnail_lists .content .tabbody {
                position:   absolute;
                top:        25px;
                left:       0;
            }
            .js #thumbnail_lists .content .subtabbody {
                position:   absolute;
                top:        0;
                left:       219px;
                width:      641px;
            }
        .js .subtabbody {
            display: none;
        }
        /* Tabs */
        .tabs-list {
            border-left:    1px solid #CCC;
            border-bottom:  1px solid #CCC;
            height:         27px;
            margin:         0;
        }
        .tabs-list li {
            display:        inline-block;
            border-top:     1px solid #CCC;
            *display:       block;
            *float:         left;
        }
        .tabs-list a {
            display:        inline-block;
            font-size:      93%;
            height:         14px;
            color:          #999;
            border:         1px solid #999;
            border-width:   0 1px 0 0;
            padding:        6px 8px;
            font-weight:    700;

            *display:       block;
            *float:         left;
            *position:      relative;
            _top:           1px;        /* IE6 is annoying. */
        }
            .tabs-list a:hover, .tabs-list .current a {
                color:        #000;
                border:       1px solid #999;
                border-width: 0 1px 0 0;
                background:   #FFF;
            }
            .tabs-list .current a {
                border:         none;
                border-right:   1px solid #999;
                border-bottom:  1px solid #FFF;
            }
            
        /* Subtab Tablist */
        .tabbody .tabs-list {
            display:    block;
            width:      203px;
            float:      left;
            *display:   inline;
            border:     none;
            margin:     36px 7px 0 0;
            height:     590px;
            background: #FFF;
        }
            .tabbody .tabs-list li {
                display:    block;
                border:     none;
                background: none;
            }
                .tabbody .tabs-list li a {
                    display:        block;
                    color:          #111;
                    border-color:   #999;
                    border-width:   0 0 1px 0;
                    padding:        8px 10px;
                    width:          183px;
                    float:          none;
                    font-weight:    400;
                }
                    .tabbody .tabs-list li a:hover, .tabbody .tabs-list li.current a {
                        background:     #444;
                        color:          #FFF;
                        border:         1px solid #999;
                        border-width:   0 0 1px 0;
                        font-weight:    700;
                    }
                
        
        .pagination {
            display:        block;
            text-align:     center;
            padding:        5px 0 8px 0;
            margin:         10px 0;
            font-size:      83%;
            position:       relative;
            border-bottom:  1px solid #CCC;
            _zoom:          1;
        }
            .subtabbody .pagination {
                margin:     10px 0;
            }
            .pagination li {
                display:        inline;
                border-left:    1px solid #CCC;
                padding:        0 0.5em 0 0.55em;
                line-height:    0.5;
            }
                .pagination li.skip, .pagination li.prev {
                    padding: 0 0.5em 0 0;
                    _padding-left: 1em;
                }
                    .pagination li.skip:before {
                        content: '... ';
                        padding: 0 0.5em;
                    }
                .pagination .first, .pagination .prev, .pagination .next, .pagination .skip {
                    border:     0;

                }
            .pagination a, .pagination strong, .pagination {
                color:          #777;
                font-weight:    700;
            }
                .pagination strong span {
                    position:   absolute;
                    left:       -999em;
                }
                .pagination a:hover, .pagination strong {
                    color:  #333;
                }
            .pagination .previous, .pagination .next {
                border: none;
        }
            .pagination .previous a, .pagination .previous span {
                position:       absolute;
                left:           0px;
                top:            0px;
                color:          #039;
                border:         0;
                padding:        7px 0 5px 20px;
                background:     url(http://pix.sueddeutsche.de/img/layout/pagermodule_sprite.png) no-repeat top left;
            }
                .pagination .previous span {
                    color:      #999;
                }

            .pagination .next a, .pagination .next span {
                position:       absolute;
                right:          0;
                top:            0;
                color:          #039;
                border:         0;
                padding:        7px 20px 5px 0px;
                background:     url(http://pix.sueddeutsche.de/img/layout/pagermodule_sprite.png) no-repeat right -50px;
            }
                .pagination .next span {
                    color:      #999;
                }
                
        .thumbnail_list {
        }
            .subtabbody .thumbnail_list {
                margin:     5px 0 5px 0;
            }
        .thumbnail_list li {
            width:      203px;
            float:      left;
            _display:   inline; /* IE6: double margin hack */
            margin:     0 0 25px 16px;
        }
            .thumbnail_list li.newline {
                margin-left:    0;
            }
            .thumbnail_list a {
                position:   relative;
                overflow:   hidden;
                float:      left;
                width:      203px;
                height:     184px;
                padding:    0 0 5px 0;
                font-size:  83%;
                color:      #333;
            }
                .thumbnail_list a strong {
                    display:        block;
                    font-weight:    700;
                    overflow:       hidden;
                    white-space:    nowrap;
                    width:          203px;
                    
                    /* I love browsers. */
                    -o-text-overflow:       ellipsis;
                    -ms-text-overflow:      ellipsis;
                    -moz-text-overflow:     ellipsis;
                    -webkit-text-overflow:  ellipsis;
                    text-overflow:          ellipsis;
                }
                
                .thumbnail_list a:hover .published {
                    background: #000;
                }
                .thumbnail_list a .published {
                    font-weight: 200;
                    width:      203px;
                    position:   absolute;
                    top:        134px;
                    right:      0;
                    font-size:  93%;
                    text-align: right;
                    padding:    3px 5px;
                    color:      #EEE;
                    background: rgba( 0, 0, 0, 0.5 );
                    border-top: 1px solid #222;
                    font-style: italic;
                }
                    
                    .ie .thumbnail_list a .published{
                        background: none;
                        filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#80000000', EndColorStr='#80000000');
                    }
.hidey { display: none; }

/*****************************************************************************
 *  Loading
 */
#loading {
    display:    none;
    position:   absolute;
    top:        60px;
    left:       330px;
    background: #222;
    border:     1px solid #444;
    color:      #CCC;
    padding:    20px;
    text-align: center;
}
    #loading img {
        margin-top: 10px;
    }

/* Begin: focusedimage.css */
/**
 *  Focused Image Module
 *
 *  Used, for example, on the image gallery overview page, this module spans
 *  the entire width of the site, displaying 5 image gallery teasers.  Via
 *  JavaScript, one of the teasers is "focused", and the other four are
 *  revealed as the user mouses across them (or tabs across them with the
 *  keyboard).
 *
 *  Expected HTML is as follows:
 *
 *      <div class="focusedimage">
 *          <div class="header">[MODULE TITLE]</div>
 *          <ul class="body">
 *              <li class="current">
 *                  <a href="[TEASER URL]">
 *                      <img src="[TEASER THUMBNAIL SRC]" height="402" width="536" alt="">
 *                      <strong>[TEASER OVERLINE]</strong>
 *                      [TEASER TITLE]
 *                  </a>
 *                  <p>[TEASER TEXT]</p>
 *              </li> 
 *              ...
 *              <li>
 *                  <a href="[TEASER URL]">
 *                      <img src="[TEASER THUMBNAIL SRC]" height="402" width="536" alt="">
 *                      <strong>[TEASER OVERLINE]</strong>
 *                      [TEASER TITLE]
 *                  </a>
 *                  <p>[TEASER TEXT]</p>
 *              </li> 
 *          </ul>
 *      </div>
 *
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_modules_focusedimage
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.focusedimage {
    overflow:   hidden;
    position:   relative;
    width:      860px;
}
    .js .focusedimage {
        height: 398px;
    }
    .focusedimage .head {
        left:       -999em;
        position:   absolute;
    }
    .focusedimage a img {
        border:         1px solid #333;
    }
        .js .focusedimage a img {
            border-width:   1px 1px 0 1px;
            display:        none;
            left:           0;
            position:       absolute;
            top:            0;
        }
        .js .focusedimage .active img {
            display:    block;
        }
    .focusedimage li {
        background:     #FFF;
        border-left:    5px solid #CCC;
        vertical-align: middle;
    }
        .js .focusedimage li {
            height:         80px;
            margin-left:    538px;
        }
        .focusedimage li.active {
            border-left:    5px solid #333;
        }
    .focusedimage a {
        color:              #111;
        display:            block;
        font-size:          123.1%;
        padding:            20px 16px;
    }
        .js .focusedimage a {
            height:             40px;
        }
        .focusedimage a strong {
            color:          #003399;
            display:        block;
            font-size:      81.23%;
            font-weight:    bold;
        }
            .focusedimage .active a,
            .focusedimage .active a strong {
                background: #444;
                color:      #FFF;
            }
    .focusedimage p {
        background:     rgba( 0, 0, 0, 0.75 );
        border:         1px solid #333;
        border-top:     1px solid #666;
        bottom:         -1px;
        color:          #FFF;
        display:        none;
        font-size:      93%;
        left:           0;
        line-height:    1.3;
        padding:        8px 16px;
        position:       absolute;
        width:          504px;
    }
        /**
         *  Ugly hack for IE: We can't apply the "rgba" gradient to the
         *  paragraph itself, as it gets overwritten by the jQuery `opacity`
         *  animation.  Annoying.
         *
         *  So, we'll create a wrapper `b` element in JavaScript, and assign
         *  the gradient to that element.  Problem "solved".  Poorly.
         *
         *  See [SDE-1269].
         */
        .ie678 .focusedimage p {
            background: none;
            padding:    0;
            width:      536px;
        }
            .ie678 .focusedimage p b {
                display:    block;
                padding:    8px 16px;
            }
                .ie67 .focusedimage p b {
                    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#80000000', EndColorStr='#80000000');
                }
                .ie8 .focusedimage p b {
                    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#80000000', EndColorStr='#80000000')";
                }
        .focusedimage .active p {
            display:    block;
        }

/* Begin: yahoo.css */
/**
 *  SDE Yahoo Advertisements
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_advertisement_yahoo
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

.bannerAnzeige, .article .bannerAnzeige, .teaserlist .ad .bannerAnzeige {
    font-size:      85%;
    margin:         0 0 2px 5px;
    min-height:     0;
    text-transform: uppercase;
}
    .teaserlist .ad .bannerAnzeige {
        margin-top: 16px;
        min-height: 0;
    }

/**
 *  Inline LREC
 *  @section InlineLREC
 */
.bannerMiddle2 {
    border:         1px solid #AAA;
    margin-bottom:  1.5em;
    padding:        5px 0 10px;
}
    .bannerMiddle2 iframe, .bannerMiddle2 object, .bannerMiddle2 embed {
        display:    block;
        margin:     0 auto;
    }
.bannerMitte {
    margin: 0 -1px;
}
    /**
     * Textumflossenes ContentAd
     */

    #CAD_AD {
        clear:          both;
        margin:         0 0 15px 0;
        width:          auto;
    }

    #CAD_AD.left {
        float:          left; 
        margin:         0 16px 0 0;
    }
        #CAD_AD.left .bannerMiddle2 {
            border:     0;
            padding:    0;
            margin:     0 0 8px 0;
        }
        #CAD_AD.left .bannerMitte {
            margin:     0;
        }
    /**
     *  CAD inside teaserlists should be in the middle of the
     *  teaserlist column.
     */
    .teaserlist #CAD_AD, .teaserlist #CAD_AD.left {
        float:  none;
        margin: 0 auto;
        width:  300px;
    }
/**
 *  NORTH banner code
 *  @section North
 */
.bannerSuperBanner {
    display:  block;
    margin:   4px 0 0 10px;
    width:    856px;
}

/**
 *  SKY banner code
 *  @section Sky
 */
.bannerSky {
    top:      -96px;
    position: absolute;
    right:    -210px;
    width:    200px;
}


#LREC_AD, #LREC2_AD, #NT1_AD {
    margin-bottom:  15px;
}

/* Begin: google.css */
/**
 *  SDE Google Advertisements
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_advertisement_google
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */

/* Google Adsenseboxen */
.googlead {
    background: #FFF;
    border:     2px solid #EEE;
    font-size:  83%;
    margin:     15px 0;
    padding:    7px 10px;
}
    .googlead p.header {
        border:     0;
        font-size:  100%;
        margin:     0;
    }
        .googlead p.header a {
            color:          #000;
            font-weight:    400;
        }
    .googlead .body {
        background: #FFF;
    }
        .googlead li {
            padding:    7px 0 0 0;
        }
        .googlead li p {
            margin:         0 !important;
            line-height:    1.2;
        }
            .googlead p .line1 {
                color:              #024282;
                font-size:          13px;
                font-weight:        700;
                text-decoration:    underline;
            }
            .googlead p .line2,
            .googlead p .line3 {
                color:              #000;
                font-size:          11px;
                font-weight:        400;
            }
                .googlead p .line3 {
                    color:  #390;
                }
                    .googlead p .line3:hover {
                        text-decoration:    underline;
                    }
    .googlead .footer {
        padding:    7px 0 0 0;
    }

.teaserlist .googlead li {
    background:     none;
    padding:        0 0 10px;
}
    .teaserlist .googlead li a {
        line-height:    1.2;
    }
    .teaserlist .googlead li p {
        margin-left:    0px;
        width:          auto;
    }
/*
#googlead-home               {width:301px; background: #FFF;}
#googlead-home p             {font-size:11px; margin:0; padding:0;}
#googlead-home .marker       {margin:3px 0 2px 10px;}
#googlead-home .border       {width:301px; border:solid 2px #EEE; background-color:#fff;}
html>body #googlead-home .border {width:297px;}
#googlead-home .adbox        {padding:7px 0 0 5px;}
#googlead-home .last         {padding-bottom:7px;}
#googlead-home .line1        {font-size:13px; line-height:16px; font-weight:bold; color:#024282; text-decoration:underline;}
#googlead-home .line2        {font-size:11px; line-height:14px;}
#googlead-home .line3        {font-size:11px; line-height:14px; color:#390;}
#googlead-home .line3:hover  {text-decoration:underline;}
#googlead-home .abstand      {height:7px;}

#googlead-cont               {width:459px;}
#googlead-cont p             {font-size:11px; margin:0; padding:0;}
#googlead-cont .marker       {margin:3px 0 2px 5px;}
#googlead-cont .border       {width:459px; border:solid 2px #f2f2f2; background-color:#fff;}
html>body #googlead-cont .border {width:457px;}
#googlead-cont .adbox        {padding:7px 0 0 5px;}
#googlead-cont .last         {padding-bottom:7px;}
#googlead-cont .line1        {font-size:13px; line-height:16px; font-weight:bold; color:#024282; text-decoration:underline;}
#googlead-cont .line2        {font-size:11px; line-height:14px;}
#googlead-cont .line3        {font-size:11px; line-height:14px; color:#390;}
#googlead-cont .line3:hover  {text-decoration:underline;}
#googlead-cont .abstand      {height:7px;}

#googlead-search             {width:459px;}
#googlead-search p           {font-size:11px; margin:0; padding:0;}
#googlead-search .marker     {margin:3px 0 2px 5px;}
#googlead-search .border     {width:459px; border:solid 2px #fff8dd; background-color:#fff8dd;}
html>body #googlead-search .border {width:457px;}
#googlead-search .adbox      {padding:7px 0 0 5px;}
#googlead-search .last       {padding-bottom:7px;}
#googlead-search .line1      {font-size:13px; line-height:16px; font-weight:bold; color:#024282; text-decoration:underline;}
#googlead-search .line2      {font-size:11px; line-height:14px;}
#googlead-search .line3      {font-size:11px; line-height:14px; color:#390;}
#googlead-search .line3:hover{text-decoration:underline;}
#googlead-search .abstand    {height:7px;}

#googlead-super              {width:728px; height:90px; font-family:arial,verdana,sans-serif;}
#googlead-super p            {margin:0 0 3px 0; padding:0;}
#googlead-super .marker      {margin:3px 0 2px 5px; font-size:11px; color:#000; text-decoration:none;}
#googlead-super .border      {width:724px; height:86px; border:solid 2px #f2f2f2; background-color:#fff;}
#googlead-super .border p    {margin:0; padding:0;}
#googlead-super .adbox       {padding:3px 0 0 10px; width:165px; float:left;}
#googlead-super .last        {padding-right:10px;}
#googlead-super .line1       {font-size:13px; line-height:14px; color:#024282; font-weight:bold; text-decoration:underline;}
#googlead-super .line2       {font-size:11px; line-height:13px; color:#000; border:none; text-decoration:none;}
#googlead-super .line3       {font-size:11px; line-height:13px; color:#390; text-decoration:none;}
#googlead-super .line3:hover {text-decoration:underline;}
#googlead-super .abstand     {height:7px;}

#googlead-super .adbox_a       {padding:3px 0 0 10px; width:220px; float:left;}
#googlead-super .line1_a       {font-size:14px; line-height:15px; color:#024282; font-weight:bold; text-decoration:underline;}
#googlead-super .line2_a       {font-size:12px; line-height:14px; color:#000; border:none; text-decoration:none;}
#googlead-super .line3_a       {font-size:12px; line-height:14px; color:#390; text-decoration:none;}
#googlead-super .line3_a:hover {text-decoration:underline;}

#googlead-super .adbox_b       {padding:3px 0 0 10px; width:330px; float:left;}
#googlead-super .line1_b       {font-size:16px; line-height:18px; color:#024282; font-weight:bold; text-decoration:underline;}
#googlead-super .line2_b       {font-size:14px; line-height:17px; color:#000; border:none; text-decoration:none;}
#googlead-super .line3_b       {font-size:14px; line-height:17px; color:#390; text-decoration:none;}
#googlead-super .line3_b:hover {text-decoration:underline;}

#googlead-sky                {width:200px; height:600px; font-family:arial,verdana,sans-serif;}
#googlead-sky p              {margin:0 0 3px 0; padding:0;}
#googlead-sky .marker        {margin:3px 0 2px 5px; font-size:11px; color:#000; text-decoration:none;}
#googlead-sky .border        {width:196px;  height:596px; border:solid 2px #f2f2f2; background-color:#fff;}
#googlead-sky .border p      {margin:0; padding:0;}
#googlead-sky .adbox         {padding:14px 0 0 5px;}
#googlead-sky .last          {padding-bottom:7px;}
#googlead-sky .line1         {font-size:13px; line-height:16px; color:#024282; font-weight:bold; text-decoration:underline;}
#googlead-sky .line2         {font-size:11px; line-height:14px; color:#000; border:none; text-decoration:none;}
#googlead-sky .line3         {font-size:11px; line-height:14px; color:#390; text-decoration:none;}
#googlead-sky .line3:hover   {text-decoration:underline;}
#googlead-sky .abstand       {height:7px;}
*/

/* Begin: ivw.css */
/**
 *  SDE IVW Tracking Pixels
 *
 *  @project    Sueddeutsche.de
 *  @package    sde_advertisement_ivw
 *  @copyright  Sueddeutsche.de, (c) 2009
 *  @author     Mike West <Mike.West@sueddeutsche.de>
 *  @version    $Id$
 *  @url        $URL$
 */
.trackingBox {
    height:     20px;
    left:       0px;
    position:   absolute;
    top:        0px;
    width:      5px;
}

/* Begin: _inline_images.css */
/**
 *  These are images that are used inline on various pages.  We need to record
 *  here so that the build script pulls them in correctly; the extra code will
 *  be removed as part of the minification process:
 *
 *  Travel: World Map module in the sidebar
 *  ---------------------------------------------------------------------------
 *  url(/static_assets/build/img/modules/travel-continents/worldmap.5640e360.png)
 *
 */