/* root element for scrollable */
div.scrollable {  
    
    /* required settings */
    position:relative;
    overflow:hidden;

    /* vertical scrollers have typically larger height than width */
    height: 228px;
    width: 206px;
    
    /* decoration */
    padding:0px;
    /*border:1px outset #ccc;*/
    /*background-color:#efefef;*/
}

/* root element for scrollable items */
div.scrollable div.items {
    position:absolute;
    
    /* this time we have very large space for height */	
    height:20000em;	
    
    /* decoration */
    /*margin-top:10px;*/
    cursor:pointer;
}

/* 
    same settings as in horizontal scroller except that these items 
    are not floated
*/
div.scrollable div.items div.scrlitem {
    background:url(images/storyitems.png) no-repeat;
    width:204px;
    height: 75px;
    /*
    text-align:center;
    height: 25px;
    padding:25px 0px;
    font-size:24px;
    font-family: 'bitstream vera sans';
    */
    border:1px outset #ccc;
    /*background-color: #ddd;*/
    -moz-border-radius:5px;
    /*margin-bottom:10px;*/
}

/* active item */
div.scrollable div.items div.active {
    border:1px inset #ccc;
    background-color:#fff;
    background-position:0px -75px;
}

div.home_branding, div.homeflash {
    width: 720px;
    height: 250px;
}

div.stories {
    display: none;
}

div.storeyimg{
    width: 275px;
    height: 250px;
    background-color: #fdd;
    padding: 0px;
    margin: 0px;
    float: left;
}

div.storydetails {
    float: right;
    background-color: #84b88b;
    margin: 0px;
    padding: 10px;
    width: 219px;
    height:230px;
    color: #fff;
    font-size: 14px;
}

div.scrollarea {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 250px;
    width: 206px;
}

div.prev, div.next {
    padding: 0px;
    width: 216px;
    text-align: center;
}
/*
div.prev {
    margin: 0px 0px 5px 0px;
    border-bottom:1px solid #ccc;
}
div.next {
    margin: 5px 0px 0px 0px;
    border-top:1px solid #ccc;
}
*/
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next {
    display:block;
    width:206px;
    height:11px;
    background:url(images/home-branding/prev.png) no-repeat;
    /*float:left;*/
    /*margin:43px 10px;*/
    cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover {
    background-position:0px -9px;		
}

/* next button uses another background image */
a.next {
    background-image:url(images/home-branding/next.png);
    clear:right;	
}


/* -- Scrollable items with color coding -- */
/*
div.scrollable div.items div.active div.scrlitemhdr,
div.scrollable div.items div.active div.scrlitemttl {
    border:1px inset #ccc;
    background-color:#fff;
}
*/

div.scrollable div.items div.scrlitem div.scrlitemhdr {
    margin: 5px;
    font-size:12px;
	width: 20px;
	float: right;
	text-align: center;
	color: #fff;
}

div.scrollable div.items div.scrlitem div.mhhdr {
	background: #89684d;
}

div.scrollable div.items div.scrlitem div.phhdr {
	background: #c08f2c;
}

div.scrollable div.items div.scrlitem div.hlhdr {
	background: #324f37;
}

div.scrollable div.items div.scrlitem div.scrlitemttl {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 22px;
    color: #666;
}


/* -- Stories -- */
div#homeflash div.storydetails div.hmpgstryreadmore {
    background: #D1D2D4 url(images/read-more-on.gif) no-repeat scroll 5px 5px;
    height: 18px;
    width: 200px;
    margin-top: 10px;
}

div#homeflash div.storydetails div.hmpgstrylnkwrpr {
    color: #ffffff;
    padding: 3px 0 3px 5px;
    width: 195px;
    font-size: 16px;
    font-weight: bold;
}

div.hmpgstrylnkwrpr a {
    text-decoration: none;
    color: #ffffff;
}

div#homeflash div.storydetails div.mhreadmore {
    background-color: #324f37;
}

div#homeflash div.storydetails div.phreadmore {
    background-color: #e9b371;
}

div#homeflash div.storydetails div.hlreadmore {
    background-color: #324f37;
}