/**
* Dynamic Banner
* --------------
* This acts as an extenstion to the normal banner. If the size of the banner
* is smaller than the surrounding banner then the surrounding banner will be
* filled with the normal banner background. Ideally you want to make the banner
* the same size as the parent banner.
*
* The dynamic banner needs to be surrounded by either the large or small banner 
* classes
*/
div.banner-large .dynamic_banner,
div.banner-small .dynamic_banner{
	display: block;
	width:940px;
	height:350px;	
}

div.banner-large .inner,
div.banner-small .inner{
	position:absolute;
	top:0px;
}

div.banner-large .banner-buttons,
div.banner-small .banner-buttons{
	position:absolute;
	bottom:25px;
	left:25px;
	cursor:pointer;
	z-index: 3;
}

div.banner-large .banner-buttons div,
div.banner-small .banner-buttons div{
	float:left;
}

div.banner-large .banner-buttons a:hover,
div.banner-small .banner-buttons a:hover{
	text-decoration: none;
}

div.banner-large .banner-buttons a.previous,
div.banner-small .banner-buttons a.previous{
	background-image: url('../images/dynamic_banner/previous_banner.png');
	height:15px;
	width:11px;
	display:block;
}

div.banner-large .banner-buttons a.next,
div.banner-small .banner-buttons a.next{
	background-image: url('../images/dynamic_banner/next_banner.png');
	height:15px;
	width:11px;
	display:block;
}

div.banner-large .banner-buttons a.selected,
div.banner-small .banner-buttons a.selected{
	background-image: url('../images/dynamic_banner/selected_banner.png');
	height:15px;
	width:18px;
	display:block;
}

div.banner-large .banner-buttons a.unselected,
div.banner-small .banner-buttons a.unselected{
	background-image: url('../images/dynamic_banner/unselected_banner.png');
	height:15px;
	width:18px;
	display:block;
}

div.banner-large{
	position:relative;
}

div.banner-large #dynamic-banner-link{
	position:absolute;
	z-index: 2;
}