/*
   Ludovic AMATHIEU - www.f5swn.fr - octobre 2012
   
   Pour tabberguppy, découpe des articles en pages avec onglets.
   voir mode d'emploi et fichier CSS commenté pour l'explication et l'utilisation.
   
*/



/* Onglets en haut */

.tabberlive .tabbertabhide {
 display:none;
}

.tabber {
}

.tabberlive {
 margin-top:1em;
 padding-top: 3px;
 width:100%;
 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 #778;
 border-bottom: none;
 background-color: #DDE;
 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: #448; }

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

ul.tabbernav li a:hover {
 color: #000;
 background-color: #88ABD9;
 border-color: #227;
}

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 #778;
 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 #83A8D8;
 }

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 #778;
 border-top: none;
 background-color: #83A8D8;
 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: #448; }

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

ul.tabbernavb li a:hover {
 color: #000;
 background-color: #88ABD9;
 border-color: #227;
}

ul.tabbernavb li.tabberactiveb a {
 background-color: #fff;
 border-top: 1px solid #fff;
 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;
 }

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