/*---------- /GLOBAL STYLES ----------*/

#slider {
	height:300px;
		width:690px;
		margin-left:20px;

	
}
	#buttonPrev {
		background:url(../images/prev.gif) no-repeat top right;
		float:left;
		height:300px;

		width:30px;
		background-color:#000;
	}
	
		#buttonPrev:hover {
			background:url(../images/prev_hov.gif) no-repeat top right;
			background-color:#000;
		}
		
	#slideShow {
		background:url(../images/back.jpg) top;
			background-repeat:repeat-x;
			background-color:#000000;
			
		float:left;			
		height:300px;
		overflow:hidden;		/*hides every child object that will overlap it's parent*/
		position:relative;		/*IE fix*/
		width:600px;
		margin-left:-0px;
		
	}
		#slides {
			height:400px;	
			position:relative;		/*position the div (slides) relative to its parent (slideShow), by having it positioned to relative we're able to animate the left proporty*/
		}
			.slide {
			
			
			
			display:inline;
				float:left;
				height:360px;
				padding:20px;
				width:600px;		/*you can change the width of the a slide without changing the javascript because we've only used variables.*/
			}
	
	#buttonNext {
		background:url(../images/nxt.gif) no-repeat top right;
		float:left;
		height:300px;
		margin-top:0px;
		width:50px;
		display:block;
		margin-left:-22px;
		background-color:#000;
		
	}
		#buttonNext:hover {
			background:url(../images/nxt_hov.gif) no-repeat top right;
			background-color:#000000;
		}
		
	
	
.lft_floter{
float:left;
margin-left:15px;
margin-top:5px;
color:#FFFFFF;



}

.rt_floter{

float:right;
margin-top:-9px;
width:300px; 
margin-left:10px;
margin-right:30px;
}

.rt_floter p{
color:#FFFFFF;
text-align:justify;
font-weight:bold;
}

.rt_floter a, ul, li{
color:#FFFFFF;
}


.green{
color:#446029;
}

.red{
color:#FF0000;
}

.violet{
color:#7f04cb;
}

.light_blue{
color:#00b9da;
}

.darkred{
color:#e202fc;
}

.white{
color:#FFFFFF;
}

.yellow{
color:#fac801;
}