/* @override http://www.siloam.ca/wp-content/themes/siloam/includes/js/scrollable.css */

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}



/* root element for the whole scrollable setup */
div.scrollable {  
	position:relative;
	width: 960px;
	height: 515px;
	overflow: hidden;
	margin-top:16px;	
}


/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs {	
	position:absolute;
	width:960px;
	height: 515px;
}

/* single item */
#thumbs div {
	float:left;
	width:308px;
	height:270px;
	color:#0d0d0d;
	padding:0;
	padding-left:4px;
	padding-right:4px;
}

/* style when mouse is over the item */
/*#thumbs div.hover {
	background-color:#cccccc;	
} */

/* style when element is active (clicked) */
/*#thumbs div.active {
	background-color:#066;
	cursor:default;
}*/

#thumbs h3 {
	font-size:18px;
	color:#0d0d0d;	
	padding:0;
	margin:0;
	line-height:24px;
}

#thumbs p, #thumbs span {
	font-size:12px;
	color:#0d0d0d;	
	padding:0;
	margin:0;
	line-height:14px;
	width:287px;
}

#thumbs img {
border:solid #000000 3px;
}

/* 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:36px;
	height:32px;
	background:url(../../images/left-btn.png) no-repeat;
	float:left;
	margin:0;
	padding:0;
	cursor:pointer;
	font-size:1px;
	position: relative;
	z-index: 9;
	margin-top:-32px;
	bottom: 162px;
}


/* custom positioning for navigational links */
a.next, a.nextPage {
	left: 912px;
	display: none;
}

a.prev, a.prevPage {
	right: 11px;
	display: none;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -32px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../../images/right-btn.png);
	clear:right;	
}


/* define news scrolling element */
div.news {  
	position:relative;
	overflow:hidden;
	width: 870px;	 
	height:20px;
	margin:0;	
}

#news {	
	position:absolute;
	width:20000em;	
	clear:both;
}

/* single item */
#news div {
	float:left;
	width:870px;
	height:20px;
	color:#0d0d0d;
	padding:0;
	padding-left:4px;
	padding-right:4px;
}

/* style when mouse is over the item */
/*#news div.hover {
	background-color:#cccccc;	
} */

/* style when element is active (clicked) */
/*#news div.active {
	background-color:#066;
	cursor:default;
}*/

#news h3 {
	font-size:18px;
	color:#0d0d0d;	
	padding:0;
	margin:0;
}

#news p, #news span {
	font-size:12px;
	color:#0d0d0d;	
	padding:0;
	margin:0;
}

#news img {
border:solid #000000 3px;
}