/* 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: 30px;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	/*background-image: url(/i/design/transparent.gif);*/
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0px;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(/i/design/cursors/cursor_arrow_left.png), url(/i/design/cursors/cursor_arrow_left.cur),w-resize;
	opacity: 0.35;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(/i/design/arrow_left_sm.gif);				
	background-color: #ffffff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
	opacity: 0.35;
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	width: 30px;
	height: 100%;
	/*background-image: url(/i/design/transparent.gif);*/
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right:0px;
	margin-left: -191px;
	cursor: url(/i/design/cursors/cursor_arrow_right.png), url(/i/design/cursors/cursor_arrow_right.cur),e-resize;
	opacity: 0.35;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(/i/design/arrow_right_sm.gif);
	background-color: #ffffff;
	background-repeat: no-repeat;
	opacity: 0.35;
	-moz-opacity: 0.35;
	filter: alpha(opacity = 35);
	zoom: 1;
}

/* 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: 100%;
	cursor:url(/_images/cursors/cursor-bothways.gif), url(/_images/cursors/cursor-bothways.png), url(/_images/cursors/cursor-bothways.cur), move;
	/*cursor: */
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

#scroll, #scroll2, #scrollCal {
	height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#drag, #drag2, #dragCal {
    overflow-x: visible;
    overflow-y: hidden;
    padding: 0 !important;
	max-width:100%;
	margin-left:0px;
	margin-right:0px;
}

div.oneWideColumn {
	width:150px;
	display:inline-block;
	position:relative;
	padding: 0 2px; 
	float:left;
    overflow-x: hidden;
}
div.oneWideColumn img {
height:auto; 
height:185px; 
margin: 0px; 
margin-bottom:0px; 
width:auto}

#scrollCal div.oneWideColumn { width:160px;}
#scrollCal div.oneWideColumn img { height:168px; }

.oneWideColumn p{
	font-size: 12px;
	line-height:normal;
	margin:6px 2px 2px 6px;
 
 }
.oneWideColumn a { color:#4a90e2; }
.oneWideColumn a:hover{
	color:#161a4f;
	text-decoration:none;
}
@media only screen and (max-width: 900px) {
div.scrollingHotSpotRight { width: 50px; right:30px; }
}
@media only screen and (max-width: 860px) {
div.scrollingHotSpotRight {right:60px; }
}
@media only screen and (max-width: 830px) {
div.scrollingHotSpotRight {right:90px; }
}
@media only screen and (max-width: 800px) {
div.scrollingHotSpotRight
{
	width: 30px;
	right:0px;
}
div.oneWideColumn {
	width:150px;
}
div.oneWideColumn img {
height:170px;
}
#scrollCal div.oneWideColumn { width:144px; }
#scrollCal div.oneWideColumn img { height:151px; }

}
@media only screen and (max-width: 640px) {
div.oneWideColumn {
	width:130px;
}
div.oneWideColumn img {
height:150px; 
}
#scrollCal div.oneWideColumn { width:128px;}
#scrollCal div.oneWideColumn img { height:134px; }
}
@media only screen and (max-width: 480px) {
div.oneWideColumn {
	width:120px;
}
div.oneWideColumn img {
	height:135px; 
}
#scrollCal div.oneWideColumn { width:112px;}
#scrollCal div.oneWideColumn img { height:117px; }
}