/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollerHotSpotLeft
{
	/* 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. */
	min-width: 45px;
	width: 45px;
	height: 92px;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 600;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(filmstrip/cursor_arrow_left.cur), url(filmstrip/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollerHotSpotLeftVisible
{
	background-image: url(arrow_left.png);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.70; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.70; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 70); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
	z-index: 600;
}
div.scrollerHotSpotLeftVisible:hover
{
	opacity: 0.85;
	filter: alpha(opacity = 85);
	-moz-opacity: 0.85;
}

/* Invisible right hotspot */
div.scrollerHotSpotRight
{
	min-width: 45px;
	width: 45px;
	height: 92px;
	background-image: url(big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 600;
	right: 0;
	cursor: url(filmstrip/cursor_arrow_right.cur), url(filmstrip/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollerHotSpotRightVisible
{
	background-image: url(arrow_right.png);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.70;
	filter: alpha(opacity = 70);
	-moz-opacity: 0.70;
	zoom: 1;
	z-index: 600;
}
div.scrollerHotSpotRightVisible:hover
{
	opacity: 0.85;
	filter: alpha(opacity = 85);
	-moz-opacity: 0.85;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width:100%;
	height:92px;
}

div.scrollableArea
{
	position: relative;
	width:100%;
	height:92px;
}
/* Filmstrip Style for pages */
#makeMeScrollable
{
    position: relative;
    background: #000;
    padding-top: 0px;
    width: 100%;
    height: 92px;
    font-family: arial, sans-serif;
    margin: 0 auto;
    margin-top:-15px;
}
#makeMeScrollable div.scrollableArea *
{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}
#holder
{
    position: relative;
    background: #fff;
    padding: 0px;
    padding-bottom: 2px;
    width: 100%;
    height: 110px;
    font-family: arial, sans-serif;
    margin: 0 auto;
}
#scrollContainer
{
    width: 100%;
    height: 110px;
    overflow: auto;
}
#scrollbox
{
    padding: 0;
    margin: 0;
    width: 3268px;
    list-style: none;
    height: 92px;
}
#scrollbox ul
{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: -9999px;
    top: -9999px;
}
#scrollbox li
{
    float: left;
    width: 86px;
    height: 92px;
    background: url(35mm.gif);
}
#scrollbox a
{
    display: block;
    color: #999;
    text-decoration: none;
    width: 86px;
    height: 92px;
    float: left;
}
#slidea
{
    background: url('pic_01vt.png') no-repeat center center;
}
#slideb
{
    background: url('pic_02ht.png') no-repeat center center;
}
#slidec
{
    background: url('pic_03vt.png') no-repeat center center;
}
#slided
{
    background: url('pic_04ht.png') no-repeat center center;
}
#slidee
{
    background: url('pic_05vt.png') no-repeat center center;
}
#slidef
{
    background: url('pic_06ht.png') no-repeat center center;
}
#slideg
{
    background: url('pic_07vt.png') no-repeat center center;
}
#slideh
{
    background: url('pic_08vt.png') no-repeat center center;
}
#slidei
{
    background: url('pic_09ht.png') no-repeat center center;
}
#slidej
{
    background: url('pic_10ht.png') no-repeat center center;
}
#slidek
{
    background: url('pic_11ht.png') no-repeat center center;
}
#slidel
{
    background: url('pic_12ht.png') no-repeat center center;
}
#slidem
{
    background: url('pic_13ht.png') no-repeat center center;
}
#sliden
{
    background: url('pic_14ht.png') no-repeat center center;
}
#slideo
{
    background: url('pic_15ht.png') no-repeat center center;
}
#slidep
{
    background: url('pic_16ht.png') no-repeat center center;
}
#slideq
{
    background: url('pic_17ht.png') no-repeat center center;
}
#slider
{
    background: url('pic_18ht.png') no-repeat center center;
}
#slides
{
    background: url('pic_19ht.png') no-repeat center center;
}
#slidet
{
    background: url('pic_20ht.png') no-repeat center center;
}
#slideu
{
    background: url('pic_21ht.png') no-repeat center center;
}
#slidev
{
    background: url('pic_22ht.png') no-repeat center center;
}
#slidew
{
    background: url('pic_23ht.png') no-repeat center center;
}
#slidex
{
    background: url('pic_24ht.png') no-repeat center center;
}
#slidey
{
    background: url('pic_25ht.png') no-repeat center center;
}
#slidez
{
    background: url('pic_26vt.png') no-repeat center center;
}
#slideaa
{
    background: url('pic_27vt.png') no-repeat center center;
}
#slideab
{
    background: url('pic_28vt.png') no-repeat center center;
}
#slideac
{
    background: url('pic_29vt.png') no-repeat center center;
}
#slidead
{
    background: url('pic_30ht.png') no-repeat center center;
}
#slideae
{
    background: url('pic_31vt.png') no-repeat center center;
}
#slideaf
{
    background: url('pic_32ht.png') no-repeat center center;
}
#slideag
{
    background: url('pic_33ht.png') no-repeat center center;
}
#slideah
{
    background: url('pic_34ht.png') no-repeat center center;
}
#slideai
{
    background: url('pic_35ht.png') no-repeat center center;
}
#slideaj
{
    background: url('pic_36ht.png') no-repeat center center;
}
#slideak
{
    background: url('pic_37vt.png') no-repeat center center;
}
#slideal
{
    background: url('pic_38vt.png') no-repeat center center;
}
#scrollbox a img.thumb
{
    width: 80px;
    height: 60px;
    display: block;
    padding: 16px 3px;
    border: 0;
}
#scrollbox a:hover
{
    border: 0;
}
#scrollbox a:hover img.thumb
{
    display: none;
}
#scrollbox :hover > a img.thumb
{
    display: none;
}
#scrollbox :hover ul
{
    width: 320px;
    height: 320px;
    left: 369px;
    top: 92px;
    padding-bottom: 0px;
    background: #fff;
    z-index: 100;
    -moz-box-shadow: 6px 6px 8px 2px #888;
    -webkit-box-shadow: 6px 6px 8px 2px #888;
    box-shadow: 6px 6px 8px 2px #888;
}
#scrollbox :hover ul li
{
    width: 320px;
    height: 320px;
    display: block;
    background: #fff;
}
#scrollbox :hover ul li a
{
    display: block;
    width: 320px;
    height: 320px;
}
#scrollbox :hover ul li a img
{
    display: block;
    border: 0;
    margin: 0 auto;
}
#scrollbox :hover ul li.landscape a img
{
    display: block;
    padding-top: 0px;
}