/* 
Document   : scroll-horizontal
Created on : 21 mars 2009, 11:41:08
Author     : Guizmo
Description:
 Purpose of the stylesheet follows.
*/

/* 
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/


/* this makes it possible to add next button beside scrollable */
div.scrollable {
float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
float:left;
display:block;
height:31px;
width:32px;
margin:0px 10px;
background:url(../gfx/scroll-profil/left.png) no-repeat;
cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
background-position:0px -31px;
}

/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}

/* next button uses another background image */
a.next, a.nextPage {
clear:right;
background-image:url(../gfx/scroll-profil/right.png);
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
height:20px;
width:200px;
margin-left:458px;
}


/* items inside navigator */
div.navi a {
float:left;
height:8px;
width:8px;
margin:3px;
background:url(../gfx/scroll-profil/navigator.png) 0 0 no-repeat;
cursor:pointer;
}

/* mouseover state */
div.navi a:hover {
background-position:0 -8px;
}

/* active state (current page state) */
div.navi a.active {
background-position:0 -16px;
}

div.scrollable {
width: 885px;
height:50px;
position:relative;
overflow:hidden;
}

/*
root element for scrollable items. It is
absolutely positioned with large width.
*/
#thumbs {
clear:both;
position:absolute;
width:10000em;
}

/* custom positioning for navigational links */
a.prev, a.next {
margin-top:5px;
}

/* single item */
#thumbs div {
float:left;
height:50px;
width:184px;
color:#fff;
cursor:pointer;
}

/* style when mouse is over the item */
#thumbs div.hover {
background-color:#444;
}

/* style when element is active (clicked) */
#thumbs div.active {
background-color:#444;
cursor:default;
}

#thumbs h3{
margin-top:2px;
margin-bottom:0px;
font-size:11px;
color:#fff;
}

#thumbs p{
margin-top:0px;
margin-bottom:0px;
font-size:11px;

}

#thumbs span{
margin-top:0px;
margin-bottom:0px;
font-size:11px;
color:#999;
}

#thumbs h3 em {
margin-top:5px;
padding-top:5px;
font-style:normal;
color:yellow;
}

#thumbs img {
float:left;
margin-right:5px;
border:none;
}

#thumbs img.image_rouge{
border:1px;
border-style:solid;
border-color:#cc3333;
}

#thumbs img.image_bleu{
border:1px;
border-style:solid;
border-color:#57bdf0;
}

#thumbs img.image_rose{
border:1px;
border-style:solid;
border-color:#eb3fa5;
}
#thumbs img.image_vert{
border:1px;
border-style:solid;
border-color:#42ca36;
}
#thumbs img.image_violet{
border:1px;
border-style:solid;
border-color:#9743dc;
}
#thumbs img.image_orange{
border:1px;
border-style:solid;
border-color:#eb853e;
}

#thumbs a{
color:#fff;
text-decoration: none;
}

#thumbs a:hover{
color:#cc3333;
text-decoration: none;
}

#thumbs .sous_categorie{
margin-left:25px;
}