/* liScroll styles */

.tickercontainer { /* the outer div with the black border */
border: none;
background: #189DBF; 
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
height: 45px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer span{
    color: #ffffff;
    position: absolute;
    top: 0px;
    right: 0px;
    padding-right: 44px;
    padding-left: 10px;
    height: 45px;
    font-family: "Ara-Hamah-1964-B";
    font-size: 18pt;
    background-color: #189DBF;
    padding-top: 3px;
}

.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
float: left;
margin-left: 20px;
width:calc(100% - 140px);

top: 5px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: -10%;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
}
ul.newsticker a {
    white-space: nowrap;
    padding: 0;
    color: #ffffff;
    font-family: 'Ara-Hamah-1964-R';
    font-size: 12pt;
    margin: 7px 0 15px 0;
    position: relative;
    float: left;
} 
ul.newsticker span {
margin: 0 10px 0 0;
} 

.tickercontainer .breaking-news-separator{
    width: 7px;
    height: 7px;
    background-color: #FFAD03;
    border-radius: 50%;
    -webkit-border-radius:50%;
    position: relative;
    float: right;
    margin-left: 10px;
    margin-top: 15px;
}