a {
 outline: none;
}
body {
background-color:#e8e4de;

height:800px;
width:100%;
left:-4px;
}
#container {

width:1000px;
height:800px;
margin-left:auto;
margin-right:auto;
background-color:#fff;
background:url('../images/fond.png');
}
#iTvScroller { 
    background:#fff url('../images/black.jpg') repeat-x top left; 
    font:14px "Trebuchet MS", Tahoma, sans-serif; 
    margin:0; 
    width:100%; height:60px; 
    /* Position en bas de l'écran */ 
    position:fixed; left:0; bottom:0;  
} 
#iTvScroller dt { 
    color:#aaa; 
    font-weight:bold; 
    line-height:30px; 
    height:30px; 
    padding:0 20px 0 30px; 
    /* Les titres ont un fond noir */ 
    background:#fff url('../images/black-black.jpg') center left;   
    /* Les titres sont mis côte-à-côte */ 
    float:left;   
} 
#iTvScroller dd { 
    color:#aaa; 
    font-size:110%; 
    font-weight:normal; 
    height:40px; line-height:50px; 
    margin:0; 
    padding:0 30px; 
    position:absolute; bottom:0; left:0; 
    /* Les textes sont masqués par défaut */ 
    display:none; 
} 
#iTvScroller dt.first { 
    color:#666; 
    /* Le 1er titre aura un fond rouge */ 
    background:#fff url('../images/red.jpg'); 
} 
#iTvScroller dt.second { 
    /* Le 2ème titre aura un fond rouge et une partie noire */ 
    background:#fff url('../images/red-black.jpg') center left; 
} 

#D1{
position:relative;
height:160px;
width:160px;
background-color:#FFFFFF;
opacity:0.2;
-moz-opacity:0.2;
-ms-filter:"alpha(opacity=20)";
border-top-width:0;
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-style:initial;
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
left:0;
top:-30px;
}

#D2{
display:none;
position:relative;
height:160px;
width:160px;
background-color:#FFFFFF;
opacity:0.3;
-moz-opacity:0.3;
-ms-filter:"alpha(opacity=30)";
border-top-width:0;
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-style:initial;
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
left:160px; top:-190px;
}

#D3{
display:none;
position:relative;
width:160px;
height:160px;
background-color:#FFFFFF;
opacity:0.4;
-moz-opacity:0.4;
-ms-filter:"alpha(opacity=40)";
border-top-width:0;
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-style:initial;
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
left:320px;
top:-350px;
}

#D4{
display:none;
position:relative;
width:160px;
height:160px;
background-color:#FFFFFF;
opacity:0.5;
-moz-opacity:0.5;
-ms-filter:"alpha(opacity=50)";
border-top-width:0;
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-style:initial;
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
left:480px;
top:-510px;
}

#D2b{
display:none;
position:relative;
width:160px;
height:160px;
background-color:#FFFFFF;
opacity:0.3;
-moz-opacity:0.3;
-ms-filter:"alpha(opacity=30)";
border-top-width:0;
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-style:initial;
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
left:160px;
top:-510px;
}

#D3b{
display:none;
position:relative;
width:160px;
height:160px;
background-color:#FFFFFF;
opacity:0.4;
-moz-opacity:0.4;
-ms-filter:"alpha(opacity=40)";
border-top-width:0;
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-style:initial;
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
left:320px;
top:-990px;
}

#D4b{
display:none;
position:relative;
width:160px;
height:160px;
background-color:#FFFFFF;
opacity:0.5;
-moz-opacity:0.5;
-ms-filter:"alpha(opacity=50)";
border-top-width:0;
border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-style:initial;
border-top-color:#000000;
border-right-color:#000000;
border-bottom-color:#000000;
border-left-color:#000000;
left:480px;
top:-830px;
}

#OP{
position:relative;
width:600px;
height:160px;
margin-left:10px;
left:180px;
top:20px;
}

	.thumbnailWrapper {
			width:600px;
			margin:0px auto;
			} /* not important */
		
		.thumbnailWrapper ul { 
			list-style-type: none; /* remove the default style for list items (the circles) */ 
			margin:0px; /* remove default margin */
			padding:0px; /* remove default padding */
		}
		.thumbnailWrapper ul li { 
			float:left; /* important: left float */
			position:relative; /* so we can use top and left positioning */
			overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
		}
		.thumbnailWrapper ul li a img { 
			width:200px; /* not important, the pics we use here are too big */
			position:relative; /* so we can use top and left positioning */
			border:none; /* remove the default blue border */
		}
		.caption{
			position:absolute; /* needed for positioning */
			bottom:0px; /* bottom of the list item (container) */
			left:0px; /* start from left of the list item (container) */
			width:100%; /* stretch to the whole width of container */
			display:none; /* hide by default */
			/* styling bellow */
			background:#666;
			font-family:arial;
			text-align:center;
			color:white;
			opacity:1;
		}
		.caption .captionInside{
			/* just styling */
			padding:0px;
			margin:0px;
		}
		.clear { clear:both; } /* to clear the float after the last item */