/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;/**/
	width: 660px;
	height:96px;
	/* custom decorations */
	
}


#mediaLightBoxMid .scrollable {
	width: 803px;  /*5 photos (140px each) + 20px right margin, last one has no right margin*/	
	height: 160px;
	
}

#mediaLightBox {
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	padding: 18px;
	margin-top: 100px;
	position:relative;
	
}

#mediaLightBoxLeft, #mediaLightBoxMid, #mediaLightBoxRight {
	position:relative;
	float:left;
}
#mediaLightBoxLeft, #mediaLightBoxRight {
	width:35px;
	margin-top:29px;
}
#mediaLightBoxLeft {
	margin-left: 10px;
}

#mediaLightBoxMid {
	width:855px;
	margin-bottom: 10px;
}
/*Full width scrollable for media lightbox*/


#homeHistoryScroll .scrollable {
	width: 593px;
	height:76px;/**/
}
#homeDontMissMid .scrollable {
	width: 812px;  /*5 photos (140px each) + 20px right margin, last one has no right margin*/	
	height: 120px;
	
}

#booksHistoryScroll .scrollable {
	width: 403px;  /*190px content + 12px right margin*/	
	height:76px;
	margin-left:10px;	
	margin-right:12px;
}
#historyEducationScroll .scrollable {
	width: 403px;  /*190px content + 12px right margin*/	
	height: 81px;
	margin-left:10px;	
	margin-right:12px;
}
#booksDontMissMid .scrollable {
	width: 798px;  /*5 photos (117px each) + 50px right margin, last one has no right margin*/	
	height: 175px;	
}	
.booksMediaScroller #mediaLightBoxMid .scrollable {
	height:185px;
}
.booksMediaScroller #mediaLightBoxLeft, .booksMediaScroller #mediaLightBoxRight {
	margin-top:39px;	
}

#eventScroll .scrollable {
	width: 415px;  
	height: 179px;	
}
#eventsPhotosMid .scrollable {
	width: 800px;  /*5 photos (117px each) + 50px right margin, last one has no right margin*/	
	height: 175px;
	
}
#educationScroll .scrollable {
	width: 804px;
	height: 294px;
	position: relative;
	left: 9px;
}
#theEducationFeatureNav .scrollable {
	width: 806px;
	height: 294px;
}

#travelPhotoScroll .scrollable {	
	width: 396px;  
	height: 315px;	
	margin-top: 20px;
}
#tradingPostPhotoScroll .scrollable {	
	width: 396px;  
	height: 422px;	
	margin-top: 20px;
}
/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;	
	position:absolute;	
	
	/*my custom*/	
	clear:both;/**/
	
}
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
	/*border-top:1px solid blue;*/
} 
 
#thumbs.items img {
	margin:0 15px;	
}

/* single scrollable item */
.scrollable img {
	/*float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	cursor:pointer;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;*/	
}
#homeDontMissMid .scrollable img {
	/*display:block;
	float:left; */    
	margin-top:0px;
}

/* active item */
div.items .active {
	/*border: 1px solid #6e1810;
	z-index:9999;
	position:relative;*/
}

/*** Education Feature Begins ***/

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.educationScrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 806px;
	height: 294px;
	margin-left: 10px;

	/* custom decorations */	
	/*background:url(/img/global/gradient/h300.png) repeat-x;*/
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.educationScrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.educationScrollable img {
	float:left;
	background-color:#fff;
	padding:2px;	
	cursor:pointer;
	width: 806px;
	height: 294px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.educationScrollable .active {	
	z-index:9999;
	position:relative;
}

/*** Education Feature Ends ***/