/*   Plugin TabberGuppY v1.0 (23/09/2014)
 *   For guppy 6.00.00 
 *   tabberguppy.css -> Dans dossier tabberguppy/ de chaque skin
 *   voir mode d'emploi et fichier CSS commenté pour l'explication et l'utilisation. 
 */



/* Onglets en haut */
/* le div class="tabber" doit contenir le terme : "haut" */

.tabberlive .tabbertabhide {
 display:none;
}

.tabber {
}

#wait_loading { /** div id wait_loading à supprimer des articles, obsolète. */
 display: none;
}
.tabberlive {
 margin-top:1em;
 padding-top: 3px;
 width:70%;
 margin-left: auto;
 margin-right: auto;
}

ul.tabbernav {
 margin:0;
 padding: 3px 0;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li {
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a {
 position: static;
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #C7C7C7;
 border-bottom: none;
 background-color: #EAEAEA;
 text-decoration: none;
 border-radius: 4px 4px 0 0;		
 -moz-border-radius: 4px 4px 0 0;
 -webkit-border-radius: 4px 4px 0 0;
 -khtml-border-radius: 4px 4px 0 0;
}

ul.tabbernav li a:link { color: #557A91; }

ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover {
 color: #000;
 background-color: #CECECE;
 border-color: #BABABA;
}

ul.tabbernav li.tabberactive a {
 background-color: #fff;
 border-bottom: 1px solid #fff;
 font-weight: bold;
}

ul.tabbernav li.tabberactive a:hover {
 color: #000;
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

.tabberlive .tabbertablive {
 padding:5px;
 border:1px solid #aaa;
 border-top:1px solid #B7B7B7;
 background-color: #fff;
 border-radius: 4px;					
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 -khtml-border-radius: 4px;
}

.tabberlive#tab1 {
}

.tabberlive#tab2 {
}

.tabberlive#tab2 .tabbertablive {
 height:200px;
 overflow:auto;
}

/* -----  personnalisation des onglets - exemple ----- 
 
	pour un onglet dont le div class tabbertab porterait l'id = test1
	l'onglet (<li> généré) aura pour id = test1tab
	le texte qui s'y rapporte (<div>) aura pour id = test1txt
	les styles ci-dessous personnalisent donc ces id
	
	Note : si vous souhaitez une largeur égale pour tous les onglets, utilisez des caractères "&nbsp;" (espace codé html)
	afin que chaque titre ait artificiellement le même nombre de caractères
*/
#test1tab a { background-color: #F07D71; color: #fff;}				/* onglet lorsqu'inactif */
#test1tab a:hover { background-color: #EB503F; color: #ECEAEE;}		/* onglet inactif au survol */
#test1tab.tabberactive a { background-color: #fff; color: #000;}		/* onglet actif */
#test1tab.tabberactive a:hover { background-color: #fff;}			/* onglet actif au survol */
#test1txt.tabbertablive { color: red; }                     /* conteneur de l'onglet actif (texte) */

/* -------------------------------- Onglets en bas ---------------------------- */


.tabberliveb .tabbertabhide {
 display:none;
}

.tabberliveb {
 margin-top:1em;
}

ul.tabbernavb {
 text-align:center;
 margin:auto;
 padding: 3px 0;
 border-top: 1px solid #B7B7B7;
 }

ul.tabbernavb li {
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernavb li a {
 position: static;
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #C7C7C7;
 border-top: none;
 background-color: #EAEAEA;
 text-decoration: none;
 border-radius: 0 0 4px 4px;			
 -moz-border-radius: 0 0 4px 4px;
 webkit-border-radius: 0 0 4px 4px;
 -khtml-border-radius: 0 0 4px 4px;
}

ul.tabbernavb li a:link { color: #557A91; }

ul.tabbernavb li a:visited { color: #667; }

ul.tabbernavb li a:hover {
 color: #000;
 background-color: #CECECE;
 border-color: #B7B7B7;
}

ul.tabbernavb li.tabberactiveb a {
 background-color: #fff;
 border-top: 1px solid #fff;
 border-left: 1px solid #B7B7B7;
 border-right: 1px solid #B7B7B7;
 border-bottom: 1px solid #B7B7B7;
 font-weight: bold;
}

ul.tabbernavb li.tabberactiveb a:hover {
 color: #000;
 background-color: #fff;
 border-top: 1px solid #fff;
}

.tabberliveb .tabbertabliveb {
 padding:5px;
 border:1px solid #FCFCFC;
 border-bottom:0;
 }
/* -------------------------------- Onglets latéraux ---------------------------- */
/* l'id du div class="tabber" doit contenir le terme : "lateral" */

 
.tabberlivel .tabbertabhide {
 display:none;
}
.tabberlivel .tabbertablivel {
 min-height:400px; /* ajuster cette hauteur minimum de la page en fonction du nombre d'onglets */
 margin-top: 15px;
 padding:5px;
 border:1px solid #aaa;
 border-right:1px solid #B7B7B7; /* Bord droit de la page */
 background-color: #fff; /* couleur de fond de la page */
 border-radius: 4px;					
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 -khtml-border-radius: 4px;
}
.tabberlivel {
 margin-right:1em;
 padding-right: 3px;
 width:70%;				/* largeur de la page */
 margin-left: auto;		/* centrage de la page */
 margin-right: auto;
}

div.tabbernavlat { /* le div contenant la liste ul des onglets - il est à l'intérieur du div tabberlive */
float:right; /* Pour être sur le bord droit du div tabberlive */
width: 0;
height: 0;
}
div.tabbernavlat ul { /* la liste est en position relative par rapport au div */
position: relative;
left: -1px; /* Pour coller la liste au div tabberlive */
top: 5px;
width: 0;		/* La liste n'a aucune épaisseur ni hauteur pour ne pas décaler le texte de la page */
height: 0;
margin: 0;
padding: 0;
}

div.tabbernavlat ul li { 
list-style: none outside none;
    margin: 0 0 2px 0; 
    overflow:hidden;             
    width:25px;
	height:76px;    /* Largeur et hauteur apparentes de chaque onglet */  
    position:relative;                /* Positionnement par rapport à la liste */  
    left:0px;
	top: 0px;	
}  
div.tabbernavlat ul li div{  
	overflow:hidden; 	
    border: 1px solid #C7C7C7;
	font-size:14px;                     /* Taille de la police */  
    color:#000;                     /* Couleur de la police */  
    text-align:center;                 /* Centrage de la police */  
    position:relative;                 /* Positionnement relatif au li */  
    left:-26px;                       /* Décalage pour un bon positionnement de l'onglet */  
    top:26px;                         /* Ce décalage tient compte de la rotation */  
    width:74px;                         /* Largeur du div */  
    height:22px;                     /* Hauteur du div */  
	background-image: -moz-linear-gradient(top, #d9d9d9, #f5f5f5); /* dégradé fond onglet (top car avant rotation ! ) */
	background-image: -ms-linear-gradient(top, #d9d9d9, #f5f5f5);
	background-image: -o-linear-gradient(top, #d9d9d9, #f5f5f5);
	background-image: -webkit-linear-gradient(top, #d9d9d9, #f5f5f5);
	background-image: linear-gradient(top, #d9d9d9, #f5f5f5);
    border-radius:0px 0px 8px 8px;   /* arrondi des coins inférieurs de l'onglet 8 px (avant rotation ! ) */   
    transform: rotate(270deg);         /* angle de rotation de l'onglet de 270° */  
    -ms-transform: rotate(270deg);   
    -webkit-transform: rotate(270deg);   
    -o-transform: rotate(270deg);   
    -moz-transform: rotate(270deg);   
	


}  
div.tabbernavlat ul li div a {
    color:#555;                     /* Couleur du lien */  
	text-decoration: none;
	display: block;  /* display block et height 100% = le lien occupe l'espace du div conteneur = l'onglet complet est cliquable */
    height: 100%;
	border-radius:0px 0px 8px 8px;   /* pour opéra qui ne répercute pas les arrondis du div sur le a contenu */   
left: 0;
top: 0;
}
div.tabbernavlat ul li div a:link { 
color: #555; 
}

div.tabbernavlat ul li div a:visited { 
color: #667; 
}
div.tabbernavlat ul.tabbernavl li div a:hover {
/*div.tabbernavlat ul li div a:hover { /* comportement onglet au survol */
left: 0;
top: 0;
 color: #000;
 background-image: none;
 background-color: #F5F5F5;
 border-color: #B7B7B7;
}
div.tabbernavlat ul.tabbernavl li.tabberactive div {
background-image: none;
 background-color: #fff;
 border-top: 1px solid #fff; /* bord gauche de l'onglet (et oui, il est top avant rotation !) */
 font-weight: bold;
}
div.tabbernavlat ul.tabbernavl li.tabberactive div a:hover {
left: 0;
top: 0;
 color: #555;
 background-color: #fff;
}
/* Fin onglets latéraux */

/* masque les titres <hx> récupérés pour titrer les onglets */
.hidehtitle { display: none; }

/* préchargement image loading */
.preload {
    display: none !important;
}