.tv2topstories{
    position: relative;
    min-height: 345px;
}

.tv2topstories, .tv2topstories .feed-content{
    background: #000;
}

.tv2topstories{

    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#262626), to(#000000),
        color-stop(0.75, #000000)
    );

    border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
}
    .tv2topstories .feed-content{ margin: 3px 0; }

.tv2topstories h2{
    /* The headline says Tophistorier, then the list of stories will make
     * sense if the site is visited with css disabled.
     *
     * If it is a UA with CSS (and javascript enabled) the topstories box
     * will turn into a javascript carousel, but the initialization of the
     * table of contents can be slow (e.g. if the ads hang). To work around
     * this we will place a black box where the javascript will print the TOC.
     * I use the otherwise hidden h2 element to perform this duty.
     *
     * Tested and works in ie7+, safari 3+, firefox 3+ and opera 10.10
     */
    position: absolute; right: 0; top: 3px; bottom: 3px; z-index: 2;
    width: 249px;

    background: #000;
    text-indent: -9999px;
}

.tv2topstories .feed-content,
.tv2topstories .feed-content li{
    width: 249px;
}
.tv2topstories .feed-content{
    position: absolute; right: 0; top: 0; bottom: 0;
    border-left: 1px solid #000;
    z-index: 3;
}

    .tv2topstories .feed-content li{
        display: block; float: left;
        width: 249px;
    }

    .tv2topstories .feed-content li{
        background-color: #000;
        background: url('topstoryteaser/itembg.png');
        background-repeat: repeat-x;
        background-position: 0 0;
    }

    .tv2topstories .feed-content li.current {
        background-color: #808080;
        background-position: -249px 0;
    }

    .tv2topstories .feed-content li.breaking.current {
        background-color: #ffc800;
        background-position: -498px 0;
    }
        .tv2topstories .feed-content li a {
            display: block;
            color: #fff;

            font-family: sans-serif; font-size: 16px; font-weight: bold;
            line-height: 22px;
            text-decoration: none;
            padding: 7px;
            padding-left: 28px;
            min-height: 54px;
        }
        .tv2topstories .feed-content li.current a {
            color: #000;
        }

        .tv2topstories .feed-content li.breaking strong{
            display: block;
            color: #ffc800;
            font-size: 10px; font-weight: bold; line-height: 13px;
            text-transform: uppercase;
        }
            .tv2topstories .feed-content li.breaking.current strong{
                color: #000;
            }

        .tv2topstories .feed-content .current a{
            background-image: url('topstoryteaser/current.png');
            background-repeat: no-repeat;
            background-position: left center;
        }
        .tv2topstories .feed-content .breaking a{
            background-position: center right;
        }

    /* hover states */
    .tv2topstories .feed-content a:focus,
    .tv2topstories .feed-content a:hover{ color: #ccc; }
    /* hover states on current */
    .tv2topstories .feed-content .current a:focus,
    .tv2topstories .feed-content .current a:hover{ color: #111; }

.tv2topstories .hfeed{
    width: 99999px;
    margin-left: 0px;
    z-index: 1;
}

/**/
.tv2topstories .hentry{
    display: block; width: 415px; overflow: hidden;
    position: relative; bottom: 0; float: left;
    padding-bottom: 26px;
    font-size: 12px; line-height: 16px; color: #fff;
    z-index: 1;
}

.tv2topstories .hentry .entry-title,
.tv2topstories .hentry .entry-summary,
.tv2topstories .hentry .related{
    width: 388px;
    padding: 0 22px 0 5px;
    color: #fff;
}

.tv2topstories .hentry .related{ padding-left: 0;}

.tv2topstories .hentry .related{
    position: absolute; bottom: 0;
    border-top: 1px dotted #555;
}

.tv2topstories .hentry .entry-title{
    font-size: 20px; line-height: 30px;
    font-weight: bold;
}

    .tv2topstories .hentry .entry-title a{
        color: #fff; font-weight: bold;
        text-decoration: none;
    }

    .tv2topstories .hentry .entry-summary{
        font-size: 14px; line-height: 19px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* related stories */
    .tv2topstories .hentry .related{
        float: left; width: 9999px; overflow: hidden;
        padding-top: 2px;
        padding-bottom: 5px;
    }

    .tv2topstories .hentry .related h4{
        position:relative;
        float: left;
        z-index: 100;
        padding: 1px 5px 1px 0;
        font-weight: bold;
    }

    .tv2topstories .hentry .related ul{
        float: left; overflow: hidden; background: #000;
    }
    .tv2topstories .hentry .related li{
        float: left; font-weight: normal; z-index: 30;
        margin-right: 10px;
    }
    .tv2topstories .hentry .related a{
        text-decoration: none;
        color: #fff;
        padding: 0 6px 0 8px;
        font-size: 12px;
        line-height: 16px;
        background: url('topstoryteaser/story.png') no-repeat center left;
    }

/* previous used to dim the non-current related link a little, helping the
 * user to distinct between the current and the next. */
    .tv2topstories .hentry .related .current a{ color: #fff; }
    .tv2topstories .hentry .related .current a:hover{ color: #aaa; }
    /* the non-current is dimmer */
    .tv2topstories .hentry .related a{ color: #aaa; }
    .tv2topstories .hentry .related a:hover{ color: #ccc; }
/**/

    .tv2topstories .hentry .related h4{
        background: #000; z-index: 20; display: block;
        line-height: 16px;
        padding-left: 5px;
    }

    .tv2topstories .hentry .related .pagination{
        position: absolute; display: block; top: 2px;
        background-image: url('topstoryteaser/paginate-related.png');
        background-repeat: no-repeat;
    }
    .tv2topstories .hentry .related .next{
        left: 380px;
        background-position: top right;
    }
        .tv2topstories .hentry .related .next:hover{
            background-position: bottom right;
        }
    .tv2topstories .hentry .related .previous{
        position:relative; margin-top: -2px;
        float:left;
    }
        .tv2topstories .hentry .related .previous:hover{
            background-position: bottom left;
        }
    .tv2topstories .hentry .related .pagination button{
        border: none;
        cursor: pointer;
        width: 18px; height: 18px;
        opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0);
    }

.tv2topstories .feed-content li{
    position:relative;
}

    .tv2topstories .feed-content .count-down{
        display: block; width: 34px; height: 6px;
        position: absolute; bottom: 4px; right: 10px;
        background: #747677 url('topstoryteaser/bg.png') top left repeat-x;
    }
    .tv2topstories .feed-content .count-down .interval{
        display: block; width: 32px; height: 4px;
        position: relative; top: 1px; left: 1px;
        background: transparent url('topstoryteaser/interval.png') 0 0 repeat-x;
    }

    .tv2topstories .feed-content .breaking .count-down .interval{
        background-image: url('topstoryteaser/breaking.interval.png');
    }
    .tv2topstories .feed-content .breaking .count-down{
        background-position: bottom left;
    }

.tv2topstories .media{
    position: relative;
    height: 222px; width:394px; margin: 3px 0 5px 3px;
    background-position: center center;
    background-color: #555;
    background-repeat: no-repeat;
}
    /* this will not work in legacy browsers */
    .tv2topstories .media.video{ cursor: pointer; }

    .tv2topstories .video .play{
        position: absolute; /* absolute to .tv2topstories .media */
        left: 50%; top: 50%;
        width: 50px; height: 50px; margin: -25px 0 0 -25px;
        background: transparent url('/img/play-btn.png') no-repeat;
        opacity: 0.75; -moz-opacity: 0.75; filter:alpha(opacity=75);
    }

    /* target ie7 with a non-alpha transperent play button */
    body .tv2topstories .video .ie7{ background-image: url('/img/play.gif'); }