/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 321px;	
	height:84px;
	
	/* custom decorations */
	padding:10px 0;			
}

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

/* single scrollable item */
div.scrollable div.items a {
	float:left;
	
	/* custom decoration */
	width: 73px;
	height: 82px;
	border: 1px solid #D4C697;
	margin-right: 7px;
}
div.scrollable div.items img {
	width: 73px;
	height: 82px;
}

/* active item */
div.scrollable div.items div.active {
	border:1px inset #ccc;		
	background-color:#fff;
}

/*************************************************************/
/* 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:13px;
	height:10px;
	background:url(../images/mandm/left-arrow.png) no-repeat;
	float:left;
	margin:49px 5px;
	cursor:pointer;
	font-size:1px;
	color: #f03;
}

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

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}
a.prevPage {
	margin: 49px 11px 49px 11px;
}
/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../images/mandm/right-arrow.png);
	margin: 49px 5px 49px 7px;
	clear:right;
}

#sbg {
	width: 393px;
	height: 108px;
	position: absolute;
	background: url(../images/mandm/scroller-bg.jpg);
	top: 476px;
	left: 42px;
}

/********************************/
body#media-marketing #content {
	position: relative;
	width: 910px;
	height: 610px;
	background: url(../images/mandm/background2.jpg);
	margin: 0;
}
#left-page {
	margin-left: 45px;
	padding-top: 43px;
	width: 390px;
	float: left;
}
#left-page h1 {
	margin: 0 0 7px;
	line-height: 34px;
	font-size: 24px;
}
#left-page p, #left-page ul {
	margin: 0;
	padding-bottom: 16px;
	line-height: 18px;
}
#mandm-featurelogo {
	float: right;
	margin: 0 7px 10px 15px;
}
#left-page li {
	padding-bottom: 2px;
}

#right-page {
	position: relative;
	float: left;
	width: 390px;
	margin-left: 61px;
}

#mm-cs {
	margin-top: 53px;
}
#mm-cs h2 {
	color: #e4dbd1;
	margin-left: 6px;
	letter-spacing: -1px;
	font-weight:  normal;
	font-size: 20px
}
#mm-cs img {
	float: left;
	margin-top: 3px;
}
#mm-cs-content {
	margin-left: 116px;
	line-height: 17px;
	width: 240px;
	font-size: 13px;
}
#mm-cs p {
	margin: 3px 0;
}
#mm-cs-link {
	clear: left;
	position: absolute;
	top: 209px;
	left: 4px;
	font-weight: bold;
}
#mm-news {
	position: absolute;
	top: 265px;
	width: 340px;
}
#mm-news h3 {
	margin-top: 67px;
}
#mm-news p {
	margin: 0;
	padding-bottom: 12px;
	line-height: 20px;
}

#mm-blogentries p {
	line-height: 18px;
	padding-bottom: 10px;
	font-size: 13px;
}

#mm-ad {
	background-position: -700px;
}

#mm-blogicon {
	float: right;
	margin: 23px -12px 0 10px;
}