/**GENERAL POSITIONING**/


div.left-media{
    float: left;
    width: 440px;
}

div.right-news{
    float: right;
    width: 190px;
}

/**********NEWSER **********/

#newser{
    float: left;
    position: relative;
    width: 640px;
    margin: 0; padding: 0;
}
#newser a{ text-decoration: none; }


#newser_images{
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}

#newser .credit{
    position: absolute;
    top: 0; right: 0;
    text-align: right;
    z-index: 2;
}

#newser_viewport{
    position: relative;
    width: 640px; height: 330px;
    overflow: hidden;
}

#newser_container{
    position: relative;
    /* width is set in the template */
}

#newser .newser_image{
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}

#newser .news_block{
    position: absolute; z-index: 2;
    width: 245px; height: 100%;
    top: 0;
    color: #FFF;
}

#newser_container .story{
    float: left;
    position: relative;
    width: 640px; height: 330px;
}

#newser .open, #newser .close{
    position: absolute; bottom: 10px; right: 5px;
}
#newser .open{ display: none; }

#newser .news_block .title{
    width: 85%; margin: 20px 0 0 10px;
    font-size: 1.8em; font-weight: bold; 
}

#newser .excerpt{
    display: block;
    margin: 0 0 0 10px;
    width: 90%;
}

#newser .date_share{
    width: 90%;
    float: left;
}
#newser .date{
    float: left;
    margin-left: 10px; color: #CCC;
}

#newser .share_this{
    float: left;
}

#newser .more_share{
    display: none;
    margin-top: 2px;
    height: 18px;
}


#newser .newser_selectors{
    width: 640px; height: 60px;
}
#newser .arrow, #newser .arrow_right {float: left; width: 20px; height: 100%; }
#newser .arrow_right{ float: right; text-align: right; }

#newser .newser_selector{
    float: left; 
    width: 133px; height: 47px;
    padding: 10px 7px 0 7px;
    background: #999;
    text-align: center;
    cursor: pointer;
}
#newser .newser_selector:hover, #newser .selected { }
#newser .newser_selector span{ color: #333; }

#newser_video_wrap{
    position: absolute;
    text-align: center;
    display: none;
    top: 0; left: 20px;
    height: 320px; width: 620px; /*height is offset by padding 320-10*/
    padding-top: 10px;
    background: #000;
    z-index: 3;
}

#newser .excerpt .full_story, #newser .excerpt .play_video {
    float: right; margin-right: 5px;
}

/*******HIGHLIGHT REEL*****/
#highlightReel{
    position: relative;
    float: left; margin: 0;
    width: 440px;
}

#highlightReel .header{
    float: left;
    width: 100%;
}
#highlightReel .header .title{
    float: left;
    font-size: 1.6em; font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
}

#highlightReel .videoplayer{
    float: left;
    width: 100%; height: 260px; /* on wireframe this was 280, but that's not 16:9 */
}

#highlightReel .tabs{
    float: right;
    list-style: none;
    margin: 2px 0 0 0; padding: 0;
    cursor: pointer;
}

#highlightReel .tabs li{
    float: left;
    display: block;
    padding: 2px 8px 2px 8px;
    color: #FFF;
}
#highlightReel .tabs li.selected{ background: #444; }
#highlightReel .tabs a{ color: #FFF; text-decoration: none; }

#highlightReel .viewport{
    float: left;
    width: 100%; height: auto;
    min-height: 152px;
    overflow: scroll;
    overflow-y: hidden;
}

#highlightReel .container{
    float: left;
    /* width is width of #highlightReel Channel Width X Tab Channels (432 x 3) */
    width: 1296px;
}

#highlightReel .container .channel{
    float: left;
    width: 440px; /* same as module width */
}

#highlightReel .container .channel .title{
    float: left;
    font-weight: bold; font-size: 1.2em;
    width: 100%;
    color: #FFF;
}

#highlightReel .thumb{
    float: left;
    width: 133px;
    margin: 10px 10px 0 0;
    text-align: center;
}
#highlightReel div.thumb:first-child{ margin-left: 10px; }

#highlightReel .thumb img.thumb{ height: 72px; width: 133px; }


/**********HEADLINES***************/

#headlines, #headlinesMore{
    float: left;
    width: 190px;
    margin: 0;
}
#headlines{ min-height: 200px; }
#headlinesMore{ min-height: 230px; }

#headlines .header, #headlinesMore .header{
    float: left;
    width: 100%;
    margin: 0px;
    background: #AAA;
}
#headlines .header .title, #headlinesMore .header .title{
    float: left;
    font-size: 1.6em; font-weight: bold;
    text-transform: uppercase;
}

#headlines .header .morenews{
    float: right;
    background: #DDD;
    text-align: right;
    margin: 9px 10px 9px 0;
    padding: 2px;
}

#headlines .small_icon{
    display: inline-block;
    margin-right: 0px;
    width: 16px; height: 100%;
    vertical-align: text-bottom;
}

#headlines .inline{
    float: left;
    display: block;
}

#headlines ul{
    float: left;
    list-style: none;
    margin: 5px 0 0 10px; padding: 0;
}
#headlines ul li{ padding: 0; margin-bottom: 10px; }
#headlines a, #headlinesMore a{ text-decoration: none; }

#headlines .morenews{ margin-left: 10px; }


/*headlines more*/
#headlinesMore ul{
    float: left;
    list-style: none;
    margin: 10px 0 0 0; padding: 0;
}
#headlinesMore li{
    margin: 5px 0 5px 5px;
    width: 94%;
}
#headlinesMore li a{ text-decoration: none; font-weight: bold;}
#headlinesMore .date{ color: #888; }

#headlinesMore .morenews{ margin: 0px 0 0 5px; }