div.vscroller {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	padding-top:0;
	position: relative;
	
	/* hauteur maxi du défilant */
	height: 350px;
	/* plus grand que images afin de contenir aussi la barre de défil */
	width: 100px;
	
	margin-top: 0;
	margin-bottom: 10px;
	
	/* sans javascript, active le défilement vertical et masque horizontal */
	overflow: auto;
	overflow-x: hidden;
	
	/* les disposer l'un a coté de l'autre sans ajouter de tableaux superflus */
	float:left;
}

/* conteneur */
div.scroller_content ul {
	border:0 none;
	margin:0;
	padding:0;
	list-style: none none outside;
	width:auto;
}
	div.scroller_content ul li {
		text-align:center;
	}
	
	
/*
contenu défilant a l'interieur du conteneur */
div.scroller_content {
	padding: 2px 0;
}

	/* chaque lien de la liste */
	.scroller_content li a {
		display: block;
		width: 80px;
		margin: 0 auto;
		text-align:center;
	}
	
	/* image base */
	.scroller_content li img {
		display: block;
		border: 2px solid;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;	
		margin: 0 auto 5px;
	}

	/* image survolé uniquement si entouré par un lien */
	.scroller_content li a img:hover {
		border-style: dotted;
	}
	
/* IE FIX */
* html .scroller_content li a  {
	width : 100px;
	max-width: 100px;
}


/** 
chargement */
.vscroller .charge {
  position: absolute;
  top: 50px;
  left: 5px;

  margin: 0 auto;
  padding: 10px 2px;

  width: 80px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;	

  text-align: center;
  border: 1px solid ;
}

/** 
info bulle */
.scroller_content_tp {
	display: block;
	position: absolute;
	
	padding: 3px;
	font-size: 11px;
	font-family:Arial, Helvetica, sans-serif;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
	
	border: 1px solid;
	max-width:75px;
	width:75px;
	white-space:normal;
	
	/* bg transp pour browsers recents */
	filter:alpha(opacity=50);/*This one you need for IE. */
	-moz-opacity: 0.5;/* moz */
	-khtml-opacity: 0.5; /* Safari (1.x) */
	opacity: 0.5;/*current standard in CSS*/
}

/** ******************************************
 * BOUTONS TOP/BOTTOM, propriétés communes
 */
.vscroller .top {
	display:none; /* rendu visible par JS only */
	background: transparent scroll no-repeat center top; 
	margin:0 auto;
	min-width : 78px;
	width : 78px;
	height : 19px;
	line-height : 19px;
	text-align : center;
}
.vscroller .bottom {
	display:none; /* rendu visible par JS only */
	background: transparent scroll no-repeat center top; 
	margin:0 auto;
	min-width : 78px;
	width : 78px;
	height : 19px;
	line-height : 19px;
	text-align : center;
}



/** ******************************************
 * COULEURS 
 */

/* chaque lien sur image */
.scroller_content {color: #000; background: #fff; }
.scroller_content li img { border-color: rgb(79, 79, 79); color: #fff; background: rgb(255, 255, 255); }
/* survolé */
.scroller_content li img:hover { border-color: rgb(130, 130, 130); }
/* chargement et bulle */
.vscroller .charge { color: #fff; border-color: rgb(79, 79, 79); }
.vscroller .charge, .scroller_content_tp {background: #009900; color: #fff; border-color: rgb(79, 79, 79); }

/* specifique 1er */
#vscroller1 .scroller_content_tp { background-color:#009900; color:#fff; }
#vscroller1 .charge  { background-color:#009900; color:#fff; }
/* boutons1 */
#vscroller1 .top    { background-image: url(../vscroller_top1.png); }
#vscroller1 .bottom { background-image: url(../vscroller_bot1.png); }

/* specifique 2nd */
#vscroller2 .scroller_content_tp { background-color:#000099; color:#fff; }
#vscroller2 .charge  { background-color:#000099; color:#fff; }
/* boutons2 */
#vscroller2 .top    { background-image: url(../vscroller_top2.png); }
#vscroller2 .bottom { background-image: url(../vscroller_bot2.png); }