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

/*
	RWP
	
	10-Apr-2012
	
	Commenting all of the old rules out and replacing with
	the rules being used on the Pearson Learning Solutions
	site. Not sure if any of the other HE sites are using
	the scrollable (jquery.tools) functionality.
	
.scrollable {
	position:relative;
	overflow:hidden;
	width: 163px;
	height: 155px;
}
.minheight {
	height: 92px;
}
.scrollable .items p {
	width: 163px;
	clear: both;
}
.ng_us_scrollableCaption p
{
    display: block;
}

.ng_us_scrollablePager 
{
    display: none;
    border-top: solid 1px #cacaca; 
    padding-top: 10px;
    
}
#ng_us_scrollablePager 
{
    float: left;
    margin: 0px 5px;
}
.scrollable .items {
	width:20000em;
	position:absolute;
}
.items div {
	float:left;
}
a.browse {
	background: url(../images/ted/img/scrollable_arrow.gif) 0px 0px no-repeat;
	display:block;
	width:16px;
	height:15px;
	margin:0px 0px;
	cursor:pointer;
	font-size:1px;
	float: left;
}
a.right 		{ background-position:-16px 0;  clear: right}
a.right:hover 	{ }
a.right:active 	{ } 

a.left			{ margin-left: 0px; } 
a.left:hover  	{ }
a.left:active  	{  }

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

/*
	RWP
	
	10-Apr-2012
	New rules from www.pearsonlearningsolutions.com
	version of scrollable css.
	URL:
	
*/
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
#ng_us_scrollableContainer 
{
    margin-bottom: 20px;
}

#ng_us_scrollableContainer .scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 561px;
	height: 240px;
	/*This line added to show background gradient */
	background:url(../images/item_bg.jpg) no-repeat 0px 0px;
}
#ng_us_sidebarScrollableContainer .scrollable 
{
    /* required settings */
	position:relative;
	overflow:hidden;
	width: 230px;
	height: 300px;
	
}
#ng_us_scrollableContainer .scrollable .items .item .itemContent 
{
    float: left;
    width: 230px;
	
}
#ng_us_scrollableContainer .scrollable .items .item .itemImage
{
    float: right;
    width: 270px;
    overflow: hidden;
}
#ng_us_scrollableContainer .scrollable .items > div.item
{
    width: 561px;
	/*This line added to show background gradient */
	background:url(../images/item_bg.jpg) no-repeat 0px 0px;
}
#ng_us_sidebarScrollableContainer .scrollable .items > div.item 
{
    width: 230px;
}

#ng_us_scrollableContainerTall .scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 561px;
	height: 421px;
}

.scrollable .items > div.item h1
{
    margin-top: 10px;
	/*This line added to make type smaller */
	font-size: 150%;
}
.scrollable .items p {
	clear: both;
	/*added to create white space to the right of text */
	padding-right: 5px;
	padding-left: 10px;
}
.scrollable .items img {
	border: none;
}

.ng_us_scrollablePager 
{
    border-top: solid 1px #cacaca;
    border-bottom: solid 1px #cacaca;
    height: 19px;
    padding: 5px 0px;
	margin-top:10px; /* RWP = new 10-Apr-2012 */
}
.ng_us_scrollablePager div
{
    float: left;
    margin-right: 5px;
}
.ng_us_fixedwidth 
{
    border-bottom: none;
}
.ng_us_fixedwidth div.button-number
{
    text-align: center;
    width: 390px;
}


.ng_us_fixedwidth div.next
{
    margin: 0px;
    float: right;
}
/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
}


/* prev, next, prevPage and nextPage buttons */
a.browse {
	background: url(../images/ted/img/scrollable_arrow.gif) 0px 0px no-repeat;
	display:block;
	width:16px;
	height:15px;
	margin:0px 0px;
	cursor:pointer;
	font-size:1px;
	float: left;
}

/* right */
a.right 		{ background-position:-16px 0;  clear: right}
a.right:hover 	{ }
a.right:active 	{ } 


/* left */
a.left			{ margin-left: 0px; } 
a.left:hover  	{ }
a.left:active  	{  }

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

/*
	RWP
	
	10-Apr-2012
	Defining the .scrollable element's
	.button children here rather than
	in the global.css file. Also: limiting
	them to the parent of '.button-number'
	
*/
.button-number .button{
	width:75px;
	height:19px;
	background:url('http://www.pearsonlearningsolutions.com/higher-education/assets/images/button.gif') no-repeat 0 19px;
	text-align:center;
}
.button-number .button-light{
	background-position:0 0;
}
.button-number .button-small{
	width:19px;
	height:19px;
	background:url('http://www.pearsonlearningsolutions.com/higher-education/assets/images/button_small.gif') no-repeat 0 0;
}
#ng_us_fuschia .button-number .button-active{
    background-position:0px -38px;
}
#ng_us_navy .button-number .button-active{
    background-position:0px -57px;
}
#ng_us_aqua .button-number .button-active{
    background-position:0px -76px;
}
#ng_us_orange .button-number .button-active{
    background-position:0px -95px;
}
.button-number .button-small-active{
    background-position:0px -19px;
}
.button-number .button a{
    padding-top:1px;
    color:#fff;
    display:block;
}
.button-number .button-large a{
    padding-left:5px;
}
.button-number .button a:hover{
    text-decoration:none;
}