/* hold div contains both scrolling contenu area and links in this example */

div#hold1, div#hold2, div#hold3, div#hold4, div#hold5 { 
	position:relative; overflow:hidden;
	width:300px; height:135px; z-index:100; 
	}
	
div.contenu { 
	position:absolute; visibility:hidden; 
	left:0px; top:0px; 
	z-index:2; 
	}

div#loading { visibility:visible; z-index:1 }

/* div.contenu1, div.contenu2, div.contenu3, div.contenu4, div.contenu5 {  */
/*	position:absolute; visibility:hidden;  */
/*	left:0px; top:0px;  */
/*	z-index:2;  */
/*	} */

div#lyr1, div#lyr2, div#lyr3, div#lyr4, div#lyr5 { width:300px }

div#linksLyr { position:absolute; right:10px; top:0; z-index:3 }
	/* position:absolute; left:210px; top:0; z-index:3 */
table#imgTbl { width:180px }
	/* width:720px */
table#imgTbl td { width:180px; height:180px; vertical-align:middle; text-align:center }

div#track1, div#track2, div#track3, div#track4, div#track5 { 
  position:absolute; left:2px; top:19px;
  padding:0 ;
  width:16px; height:72px;
  background: url('../nav/vertical_yattacier_background1.gif');
  z-index:1
  }
	/* width:11px; height:150px; */
	/* #E8E8E8 repeat; */

div#dragBar1, div#dragBar2, div#dragBar3, div#dragBar4, div#dragBar5 {
  padding: 0;
  margin: 0;
  position:absolute; left:0; top:0px;
  width:16px; height:16px;
  background: url('../nav/but-drag-bas.gif') no-repeat 0px bottom;
  z-index:1
  }

	/* position:absolute; left:0; top:0px; = curseur */
	/* #F0F0F0 background-color:#ceced6; */

div#up1, div#up2, div#up3, div#up4, div#up5 { position:absolute; left:2px; top:3px; z-index:2 }  
div#down1, div#down2, div#down3, div#down4, div#down5 { position:absolute; left:2px; bottom:2px; z-index:3 } 


/* Styles for demo, not necessary for scrolling layers */

body { overflow:hidden }
body, td { font: 12px verdana, arial, helvetica, sans-serif }
h1 { font-size:1.3em }	
a:link { color:#33c }	
a:visited { color:#339 }	

a img { border:none }
table#lnks th { text-align:left; border-bottom:1px dashed #676571 }
table#lnks td { text-align:center }