@charset "UTF-8";
/* @import url(http://fonts.googleapis.com/css?family=Gochi+Hand);
Infos
Plan de cette feuille :
1. Structure, imports
2. Liens, html
3. Page
4. Haut de page
5. Wrapper, main, content
6. Billets
7. Commentaires et rétroliens
8. Sidebar
9. Footer
10. Classes communes
11. Pages spécifiques
12. Clearers
13. Ductile Focus Goodies

Thanks to:
Colorzilla wysiwyg gradient editor http://www.colorzilla.com/gradient-editor/
Micro clearfix by Nicolas Gallagher http://nicolasgallagher.com/
*/

/* -----------------------------------------------------------------
	1. STRUCTURE - TYPO
------------------------------------------------------------------ */
/* ------------------------------------------------------- body */
	
body { height:auto;
		margin: 0; /* pour éviter les marges */
  		text-align: center; /* pour corriger le bug de centrage IE */
  		background-color: #89C9D2;
  		background-image: url('../img/fond_eau_pave.jpg');
  		font: 1em "Helvetica Neue",Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;
	 }
#global {
		position:relative;
		top:0px;
		margin-left: auto;
  		margin-right: auto;
  		width: 1011px; /* largeur obligatoire pour être centré */
		text-align: left; /* on rétablit l'alignement normal du texte */
}
.wrap { 
	  	font-family: Arial sans-serif;
	  	margin:0 auto;position: absolute; 
		top: 100px;
		left: 75px;
		width: 650px;
		height: 400px;
		padding: 0;
		list-style: none;
		background: transparent url('../img/bgrdivliens.png') top left no-repeat; }
	  
.liens{margin:15px; padding: 8px 0 0 0;}
.liens ul li{margin:5px;}

#kalzalumG { position: absolute; 
	top: 0px;
	left: 0px;
	width: 305px;
	height: 194px;
	z-index: 1;
	}
	
#tog_kalzaG {position:absolute;
	top: 135px;
	left: 70px;
	/*background-image: transparent url(img/kalzadudG.png) top left no-repeat;
	border:1px solid black;display:none;*/
	height:434px;
	width:898px;
	margin: 0px 0 0 0px;
	padding: 0px;
	}
#tog_ActColG {position:absolute;
	top: 135px;
	left: 70px;
	height:136px;
	width:187px;
	margin: 0px 0 0 0px;
	padding: 0px;
	}	  	  
#tog_petaou_pod {position:absolute;
	top: 563px;
	left: 119px;
	height:144px;
	width:892px;
	margin: 0px 0 0 0px;
	padding: 0px;
	z-index: 10;
	}
	
#tog_pmarche_pod {position:absolute;
	top: 563px;
	left: -20px;
	height:144px;
	width:100%;
	margin: 0px 0 0 0px;
	padding: 0px;
	z-index: 10;
	}
#tog_liquidi_pod {position:absolute;
	top: 563px;
	left: -20px;
	height:144px;
	width:100%;
	margin: 0px 0 0 0px;
	padding: 0px;
	z-index: 10;
	}
	
#tog_parole {position:absolute;
	top: 265px;
	left: 193px;
	height:607px;
	width:511px;
	margin: 0px 0 0 0px;
	padding: 0px;
	background: transparent url('') no-repeat;
	/*z-index: 100;*/
	}
#tog_deroulAff{position:absolute;
	top: 20px;
	left: 0px;
	height:100px;
	width:109px;
	margin: 0px 0 0 0px;
	padding: 0px;
	/*background:url(img/bgrtogparole.jpg) no-repeat;
	z-index: 100;*/
	}				  	  	  
#tog_affiches{position:absolute;
	top: 80px;
	left: 4px;
	height:300px;
	width:109px;
	margin: 0px 0 0 0px;
	padding: 0px;
	/*background:url(img/bgrtogparole.jpg) no-repeat;
	z-index: 100;*/
	}		  	  	
	 
	  
/* Début button liens en sprite with jQuery (bloc à GAUCHE)*/



#blogaction {
 	margin:0 auto;
	position: absolute;
	padding: 0;
	list-style: none;
	cursor: pointer;
    height: 128px;
    width: 181px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    top: 140px;
    left: 30px; }		  
.actionbutton {
	clear: both;
	position:relative;
	display:block;
	height: 128px;
	width: 181px;
	background:url(../img/sprite_action.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.actionbutton span.hover {
	position: absolute;
	display: block;
	height: 128px;
	width: 181px;
	background: url(../img/sprite_action.png) no-repeat;
	background-position: bottom;
}
#bloglabo {
 	margin:0 auto;
	position: absolute;
	padding: 0;
	list-style: none;
	cursor: pointer;
    height: 125px;
    width: 126px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    top: 450px;
    left: 70px; }		  
.labobutton {
	clear: both;
	position:relative;
	display:block;
	height: 125px;
	width: 126px;
	background:url(../img/sprite_labo.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.labobutton span.hover {
	position: absolute;
	display: block;
	height: 125px;
	width: 126px;
	background: url(../img/sprite_labo.png) no-repeat;
	background-position: bottom;
}
#blogcoeur {
 	margin:0 auto;
	position: absolute;
	padding: 0;
	list-style: none;
	cursor: pointer;
    height: 133px;
    width: 126px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    top: 285px;
    left: 0px; }		  
.coeurbutton {
	clear: both;
	position:relative;
	display:block;
	height: 133px;
	width: 126px;
	background:url(../img/sprite_coeur.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.coeurbutton span.hover {
	position: absolute;
	display: block;
	height: 133px;
	width: 126px;
	background: url(../img/sprite_coeur.png) no-repeat;
	background-position: bottom;
}
#blogcquoissa {
 	margin:0 auto;
	position: absolute;
	padding: 0;
	list-style: none;
	cursor: pointer;
    height: 40px;
    width: 143px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    top: 416px;
    left: 0px; }		  
.cquoissabutton {
	clear: both;
	position:relative;
	display:block;
	height: 40px;
	width: 143px;
	background:url(../img/sprite_cquoissa.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.cquoissabutton span.hover {
	position: absolute;
	display: block;
	height: 40px;
	width: 143px;
	background: url(../img/sprite_cquoissa.png) no-repeat;
	background-position: bottom;
}

#blogparole {
	margin:0 auto;
	position: absolute;
	padding: 0;
	list-style: none;
	cursor: pointer;
    height: 44px;
    width: 160px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    top: 313px;
    left: 490px;
	
	 }
/*
.paroleon {
	clear: both;
	position:relative;
	display:block;
	height: 104px;
	width: 100px;
	background:url(../img/sprite_bt_parole.png) no-repeat;
	background-position: bottom;
	cursor: pointer;
}*/ 
.parolebutton {
	clear: both;
	position:relative;
	display:block;
	height: 105px;
	width: 100px;
	background:url(../img/sprite_bt_parole.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.parolebutton span.hover {
	position: absolute;
	display: block;
	height: 105px;
	width: 100px;
	background: url(../img/sprite_bt_parole.png) no-repeat;
	background-position: bottom;
}	
	 
/*menu button Affiches dimension largeur 157px  hauteur 45px	*/
#page-wrap							{ width: 450px; margin: 5px auto; }
a									{ text-decoration: none; }
ul									{ list-style: none; }

.box								{ background: transparent; -moz-border-radius: 5px; 
									  -webkit-border-radius: 5px; 
									  padding: 10px; margin: 0 0 0 6px; }
.box ul li							{ font-size: 12px; margin: 0; border-bottom: 0px solid #666; height:96px; }
.box ul li a						{ color: #222; display: block; padding: 4px 4px 4px 4px; margin: 0; float: left; }

.box ul li:last-child, 
.box ul li:last-child a				{ border: none; }
.box ul li a:hover					{ opacity: 0.5; }

.box ul#catNav li:hover {
    background: -moz-linear-gradient(center top , #087997, #04586D) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.button {
	clear: both;
	position: relative;
    display:block;
	height: 44px;
	width: 157px;
	cursor: pointer;
}	
 
.parole {
	background:url(../img/bouton_parole.png) no-repeat;
	background-position: top;
	}	
.perche {
	background:url(../img/bouton_perche.png) no-repeat;
	background-position: top;
}	
.ppp {
	background:url(../img/bouton_ppp.png) no-repeat;
	background-position: top;
}
.digor {
	background:url(../img/bouton_digor.png) no-repeat;
	background-position: top;
}		
.coeur {
	background:url(../img/bouton_coeur.png) no-repeat;
	background-position: top;
}

.descriptif {
	/*font-family: 'Leckerli One', cursive;*/
	font-family: 'Gochi Hand', cursive;
	font-weight: 400;
    background: none repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    margin: 10px 0 10px 80px;
    overflow: hidden;
    padding: 5px;
    width: 318px;
    z-index: 50;
}
#descrip1 {
	position: absolute;
    top: 104px;
}
#descrip2 {
    position: absolute;
    top: 200px;
}
#descrip3 {
    position: absolute;
    top: 296px;
}

#catNav	{
		height: 30px;
    	margin-left: 70px;
    	padding: 7px 0;
 		}
#catNav li	{
	background: -moz-linear-gradient(center top , #49BED0 50%, #319DBA 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 2px solid #505052;
    border-radius: 10px 10px 0 0 / 30px 30px 0 0;
    box-shadow: 1px 1px 2px #336600 inset, 0 0 1px #000000, 0 -1px 1px #FFFFFF;
    float: left;
    height: 25px;
    list-style: none outside none; }
#catNav li a {
	color: rgba(255, 255, 255, 0.8);
    display: block;
    font-weight: bold;
    height: 25px;
    padding: 5px 20px 0;
    text-decoration: none;
    cursor: pointer; }
    

#catNav li:hover a {
	background: -moz-linear-gradient(center top , #087997, #04586D) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 10px 10px 0 0 / 30px 30px 0 0;
    height: 20px;
    float: left;
    font-weight: bold;
    text-shadow: 0 0 2px #003300;
}
.activeCatButton a {
    background: -moz-linear-gradient(center top , #C85749, #7E7E7E) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 10px 10px 0 0 / 30px 30px 0 0;
    float: left;
}

    
/*menu button Affiches	*/

/*.parolebutton span.hover {
	position: absolute;
	display: block;
	height: 44px;
	width: 157px;
	background: url(img/bouton_parole.png) no-repeat;
	background-position: bottom;
}*/	  
/* FIN button liens  à droite with jQuery */

	
	/*  #totoclic { margin:0 auto;position: absolute;
	  cursor:pointer;
top:485px; left:750px;
	width: 190px;
	height: 135px;
	padding: 0;
	list-style: none;
	background: transparent url(img/enregistrer.png) top left no-repeat; } */
	
	#footer{
	font-size:small;
	  font-family:fantasy;
	  margin:0 auto;
	  color:#87908d;
	  position: absolute;
	  top: 690px;
	  left:770px;
	  width: 350px;
	  height: 30px;
	  padding: 0;
	}