.videoBoxTop{    background:url(img/v_box_top.gif) no-repeat;     width:692px;     height:7px;     overflow:hidden;     margin-top:10px}
    .videoBoxBottom{    background:url(img/v_box_bottom.gif) no-repeat;  width:692px;  height:7px;  overflow:hidden}
    .videoFrame{ border-right:1px solid #ccc;  border-left:1px solid #ccc;  width:678px;  padding:0 6px}
    .p2container {border-left: 1px solid #ccc; border-right: 1px solid #ccc; width: 678px; background: #fff; padding: 6px;}
    
    .Vid_more {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:0px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:0px; height: 102px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;  border-left: 1px solid #ccc; float: left; background: #ebebeb; padding: 0px 3px;}
    .Vid_less {-moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:0px; -moz-border-radius-topright:5px; height: 102px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;  border-right: 1px solid #ccc; float: left; background: #ebebeb; padding: 0px 3px;}
    
    
    a.cthumb{border: 1px solid #ccc; background-color: #fff; padding: 4px; float: left; margin: 0;}
    a.cthumb:hover{border: 1px solid #369; background-color: #369;}
    
    #Videos .text{float: right; width: 100px; margin: 0px; padding: 0px; border-right: 0px !important; }
    #Videos .text p {font-size: 11px;}
    .newsitem {width: 198px; display: inline-block; border-right: 0px;}
    
/*
<!--  
Scrollable Minimal
root element for the scrollable. 
when scrolling occurs this element stays still. 
-->
    div.scrollable{  <!--  required settings --> height:90px;  overflow:hidden;  position:relative;  width:625px;  <!--  custom decorations --> background-color:#efefef;  border-right:1px solid #ccc;  border-left:1px solid #ccc;  padding:10px 0}

<!--  
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.
-->
    div.scrollable #Videos{ clear:both;  margin-left:10px;  position:absolute;  width:20000em}

<!--  single scrollable item -->
    div.scrollable #Videos div{ float:left;  <!--  custom decoration --> background-color:#ddd;  border:1px outset #ccc;  font-size:12px;  font-family:Arial;  margin-right:20px;  padding:25px 0px;  text-align:center;  width:185px;  -moz-border-radius:5px}

<!--  single scrollable item -->
    div.scrollable #Videos div.hover{ background-color:#444}

<!--  active item -->
    div.scrollable Videos div.active{ background-color:#fff;  border:1px inset #ccc}

<!-- =========================================-->
<!--  this makes it possible to add next button beside scrollable -->
    div.scrollable{ float:left}

<!--  prev, next, prevPage and nextPage buttons -->
    a.prev, a.next, a.prevPage, a.nextPage{    display:block;     width:18px;     height:18px;     background:url(../img/left.png) no-repeat;  float:left;  margin:43px 10px;  cursor:pointer}

<!--  mouseover state -->
    a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover{ background-position:0px -18px}

<!--  disabled navigational button -->
    a.disabled{ visibility:hidden !important}

<!--  next button uses another background image -->
    a.next, a.nextPage{    background-image:url(../img/right.png);  clear:right}

<!-- ********** navigator **********-->
<!--  position and dimensions of the navigator -->
    div.navi{ margin-left:328px;  width:200px;  height:20px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

<!--  items inside navigator -->
    div.navi a{    width:8px;     height:8px;     float:left;     margin:3px;     background:url(../img/navigator.png) 0 0 no-repeat;   cursor:pointer}

<!--  mouseover state -->
    div.navi a:hover{ background-position:0 -8px}

<!--  active state (current page state) -->
    div.navi a.active{ background-position:0 -16px}
*/