#slider{
	height:120px;
	width:310px;
			padding:5px;
			padding-top:20px;

}

	#buttonPrev {
		background:url(../../maj/phototheque/photos/dslider/prev.png) no-repeat top right;
		float:left;
		height:22px;
		margin-top:40px;
		width:22px;
		cursor:pointer;
		
	}
		#buttonPrev:hover {
			background:url(../../maj/phototheque/photos/dslider/prev.png) no-repeat top right;
			cursor:pointer;
		}
		
	#slideShow {
		float:left;			
		height:120px;
		overflow:hidden;		/*hides every child object that will overlap it's parent*/
		position:relative;		/*IE fix*/
		width:240px;

	}
		#slides {
			height:120px;
			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 {
				cursor:pointer;
				display:inline;
				float:left;
				height:120px;

				width:240px;
				color:#000000;

				font-size:11px;
				font-family:Verdana, Arial, Helvetica, sans-serif;		/*you can change the width of the a slide without changing the javascript because we've only used variables.*/
			}
	
	#buttonNext {
		background:url(../../maj/phototheque/photos/dslider/next.png) no-repeat top right;
		float:left;
		height:22px;
		margin-top:40px;
		width:22px;
		cursor:pointer;
	}
		#buttonNext:hover {
			background:url(../../maj/phototheque/photos/dslider/next.png) no-repeat top right;
			cursor:pointer;
		}