/* #SAG scroller demo #1 */

div#mysagscroller{
width: 200px;  /*width of scroller*/
height:250px;
}

div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}

div#mysagscroller ul li:first-letter{
font-size:28px;


background:green;
color:black;
padding:0 2px;
margin-right:2px;
}


/* #SAG scroller demo #2 */

div#mysagscroller2{
width: 350px; /*width of scroller*/
height:400px;
border:5px solid #000000; text-align: justify;
}

div#mysagscroller2 ul li img{
border-width:0;
display:block; /*this causes each image to be flush against each other*/
}



/*default CSS for SAG scroller*/

.sagscroller{
width: 250px;  /*default width of scroller*/
height:250px;
overflow:hidden;
position:relative;
border:7px solid black;
border-radius: 5px; /*css3 round corners*/
-moz-border-radius: 5px; /*css3 round corners*/
-webkit-border-radius: 5px; /*css3 round corners*/
}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0;
padding:0;
background-color: #bfd255; // Old browsers
@include filter-gradient(#bfd255, #9ecb2d, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(linear-gradient(left top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%));
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block; width:300px;
}

.sagscroller ul li .rsscontent{ /*div containing body of each RSS entry*/
font-size:90%;
}

.sagscroller ul li .rsslabel{ /*div containing label of each RSS entry*/
margin-top:5px;
background: #eee;
font-size:13px;
clear: both;
}