/*
	CSS Cartoons description
*/
#tabs div{
}
#cartoon{
	background: none;
	height: auto;
	overflow: visible;
}
#liste_personnages{
	width: 644px;
}
#liste_personnages li{
	list-style-type: none;
	display: inline-block;
	float: left;
	height: 154px;
}
#liste_personnages a{
	display: block;
	height: 154px;
	text-decoration: none;
	cursor: pointer;
}
#personnage{
	height: 400px;
	margin-left: 100px;
}
.personnage{
	background: url(../img/cartoons/personnages.png) no-repeat;
}
#poubelle{
	background: url(../img/trash.png) no-repeat;
	float: right;
	width: 128px;
	height: 128px;
}
#personnage .item{
	position: relative;
	top: 0;
	left: 0;
}

.thumbs{
	background: url(../img/cartoons/personnages_liste.png) no-repeat;
}

.size_yeux{
	width: 50px;
	height: 50px;
}
.size_bouches{
	width: 125px;
	height: 50px;
}
.size_accessoires{
	width: 200px;
	height: 75px;
}
.item{
	background: url(../img/cartoons/items.png) no-repeat;
}
.thumb01{ background-position: 0 0; width: 105px; }
.thumb02{ background-position: -105px 0; width: 139px; }
.thumb03{ background-position: -244px 0; width: 89px; }
.thumb04{ background-position: -333px 0; width: 96px; }
.thumb05{ background-position: -429px 0; width: 98px; }
.thumb06{ background-position: -527px 0; width: 117px; }

.perso_01{ background-position: 0 0; width: 275px; }
.perso_02{ background-position: -275px 0; width: 365px; }
.perso_03{ background-position: -635px 0; width: 220px; }
.perso_04{ background-position: -875px 0; width: 250px; }
.perso_05{ background-position: -1120px 0; width: 250px; }
.perso_06{ background-position: -1375px 0; width: 300px; }
.yeux_01{ background-position: 0 0; }
.yeux_02{ background-position: 0 -50px; }
.yeux_03{ background-position: 0 -100px; }
.yeux_04{ background-position: 0 -150px; }
.yeux_05{ background-position: -50px 0; }
.yeux_06{ background-position: -50px -50px; }
.yeux_07{ background-position: -50px -100px; }
.yeux_08{ background-position: -50px -150px; }
.yeux_09{ background-position: -100px 0; }
.yeux_10{ background-position: -100px -50px; }
.yeux_11{ background-position: -100px -100px; }
.yeux_12{ background-position: -100px -150px; }
.yeux_13{ background-position: -150px 0; }
.yeux_14{ background-position: -150px -50px; }
.yeux_15{ background-position: -150px -100px; }
.bouches_01{ background-position: 0 -200px; }
.bouches_02{ background-position: 0 -250px; }
.bouches_03{ background-position: 0 -300px; }
.bouches_04{ background-position: 0 -350px; }
.bouches_05{ background-position: -125px -200px; }
.bouches_06{ background-position: -125px -250px; }
.bouches_07{ background-position: -125px -300px; }
.bouches_08{ background-position: -125px -350px; }
.bouches_09{ background-position: -250px -200px; }
.bouches_10{ background-position: -250px -250px; }
.bouches_11{ background-position: -250px -300px; height: 75px; }
.accessoires_01{ background-position: -200px 0; }
.accessoires_02{ background-position: -200px -75px; }
.accessoires_03{ background-position: -400px 0; }
.accessoires_04{ background-position: -400px -75px; }
.accessoires_05{ background-position: -600px 0; width: 75px; height: 125px;  }
.accessoires_06{ background-position: -400px -150px; width: 150px; height: 175px; }
.accessoires_07{ background-position: -550px -150px; width: 150px; height: 175px; }
.accessoires_08{ background-position: -700px 0; width: 100px; }
.accessoires_09{ background-position: -700px -100px; width: 100px; }
.accessoires_10{ background-position: -800px 0; width: 150px; height: 175px; }
.accessoires_11{ background-position: -700px -175px; height: 150px; }
.accessoires_12{ background-position: -700px -325px; }



/* +++	jQuery UI definition 	+++ */
.scroll-pane-yeux,
	.scroll-pane-bouches,
	.scroll-pane-accessoires{
	overflow: auto;
}
.scroll-content-item-yeux,
	.scroll-content-item-bouches,
	.scroll-content-item-accessoires{
	float: left;
	margin: 5px;
}
* html .scroll-content-item-yeux,
	.scroll-content-item-bouches,
	.scroll-content-item-accessoires{
	display: inline;				 /* IE6 float double margin bug */
}
.scroll-bar-wrap-yeux,
	.scroll-bar-wrap-bouches,
	.scroll-bar-wrap-accessoires{
	clear: left;
	height: 31px;
	padding: 0 4px 0 2px;
	margin: 0 -1px -1px -1px;
}
.scroll-bar-wrap-yeux .ui-slider,
	scroll-bar-wrap-bouches .ui-slider,
	scroll-bar-wrap-accessoires .ui-slider{
	background: none;
	border: 0;
	width: 100%;
	margin: 10px auto 0 auto;
}
.scroll-bar-wrap-yeux .ui-handle-helper-parent,
	.scroll-bar-wrap-bouches .ui-handle-helper-parent,
	.scroll-bar-wrap-accessoires .ui-handle-helper-parent{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.scroll-bar-wrap-yeux .ui-slider-handle,
	.scroll-bar-wrap-bouches .ui-slider-handle,
	.scroll-bar-wrap-accessoires .ui-slider-handle{
	top: 5px;
	height: 31px;
}

.scroll-bar-wrap-yeux .ui-slider-handle .ui-icon,
	.scroll-bar-wrap-bouches .ui-slider-handle .ui-icon,
	.scroll-bar-wrap-accessoires .ui-slider-handle .ui-icon{
	margin: -8px auto 0;
	position: relative;
	top: 50%;
}

/* ***	YEUX	 *** */
.scroll-content-yeux{
	width: 900px;
	float: left;
}
/* ***	BOUCHES	 *** */
.scroll-content-bouches{
	width: 1485px;
	float: left;
}
/* ***	ACCESSOIRES	 *** */
.scroll-content-accessoires{
	width: 2050px;
	float: left;
}