body
{
	margin:0;
	padding:0;
}

body,td
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:8.5pt;
	color:#000000;
	line-height:1.5;
}

a:link {
	color: #999999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #999;
}

.navigation
{
	font-family:Helvetica,Arial,sans-serif;
	font-size:9px;
	text-transform:uppercase;
	margin-bottom:3px;
}

.active
{
color:#000000;
}

.active a
{
color:#000000;
}

#content
{
text-align:justify;
width:580px;
}

.scrollpane
{
	width: 580px;
	height: 320px;
	overflow: auto;
}
.horizontal-only
{
	height: auto;
	max-height: 200px;
}

#nav a { margin-left:5px;font-size:8pt;  }
#nav a.activeSlide { color:#000000;}
#nav a:focus { outline: none;}


#makeMeScrollable
		{
			width:420px;
			height: 100px;
			position: relative;
		}
		
		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}