/* Invisible left hotspot */
div.scrollingHotSpotLeft {
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background: url(http://imagens.climatempo.com.br/site/css/divscroll/images/big_transparent.gif) center center repeat;
position: absolute;	z-index: 200; left: 0;
/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(http://imagens.climatempo.com.br/site/css/divscroll/images/cursors/cursor_arrow_left.png), url(http://imagens.climatempo.com.br/site/css/divscroll/images/cursors/cursor_arrow_left.cur),w-resize; }

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible { background: url(http://imagens.climatempo.com.br/site/css/divscroll/images/videonav.png) 0 0 no-repeat; width: 31px;	height: 113px; zoom: 1; }

/* Invisible right hotspot */
div.scrollingHotSpotRight {	width: 10%;	height: 100%; background: url(http://imagens.climatempo.com.br/site/css/divscroll/images/big_transparent.gif) center center repeat; position: absolute; z-index: 200;
right: 0; cursor: url(http://imagens.climatempo.com.br/site/css/divscroll/images/cursors/cursor_arrow_right.png), url(http://imagens.climatempo.com.br/site/css/divscroll/images/cursors/cursor_arrow_right.cur),e-resize; }

/* Visible right hotspot */
div.scrollingHotSpotRightVisible { background: url(http://imagens.climatempo.com.br/site/css/divscroll/images/videonav.png) -31px 0 no-repeat; width: 31px; height: 113px; zoom: 1; }
div.scrollWrapper { position: relative;	overflow: hidden; margin-left: 24px; width: 95%; height: 100%; }
div.scrollableArea { position: relative; width: auto; height: 100%; }