/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 

/* HEADLINES ------------------- */

div.headlines {
    position:relative; 
    overflow:hidden; 
    height:200px;
    background:#222;
    color:white;    
}

div.headline {
    padding:30px 0 0 38px;
}

div.headline h2 {
    margin-bottom:0.5em;
    font-size:30px;
    font-weight:bold;
    width:580px;
    text-shadow:#000 1px 1px 2px;
}

div.headline p {
    font-size:15px;
    width:580px;
    line-height:1.25em;
    color:#e0e0e0;
    font-weight:bold;
    text-shadow:#000 1px 1px 2px;
}

div.headlines div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.headlines div.items div { 
    float:left; 
    width:960px;
    height:200px;
} 

/* NEWS TICKER ---------------- */

div#news-ticker-container {
    border-bottom:1px solid #ddd; 
    height:3em;
}

div#news-ticker-container h3 {
    padding:1em 1.5em 1em 0;
    background:#eee;    
    float:left;
    font-size:12px;
    font-weight:normal;
    color:#444;
    width:110px;
    text-align:right;
}

div#news-ticker { 
    position:relative; 
    overflow:hidden; 
    width:740px; 
    height:37px;
    float:left;
} 
 
div#news-ticker ul.items { 
    /* this cannot be too large */ 
    height:20000em; 
    position:absolute;
    top:0px; 
} 

div#news-ticker ul.items li { 
    width:880px;
    height:3em;
    padding:1em 0 0.5em 1.5em;
    font-size:12px;
}

div#news-ticker a {
    text-decoration:none;
    color:purple;	
    font-size:12px;
}

div#news-ticker a:hover {
    border-bottom:1px solid purple;	
}

div#news-ticker span.date {
    color:#888;	
}