html {
   padding:0;
   margin:0;
}

body {
	font-family: Tahoma, "Trebuchet MS", "Lucida Grande", Arial, Helvetica, Sans-Serif; 
	font-size: 0.8em; 
	text-decoration: none; 
	margin: 0;
	vertical-align: bottom;
	/*background: #999;*/
	background : url(../images/templates/body_background.jpg); 
}	

h1 {
	font-size: 1.8em; 
	color: #333;
}

h1:first-letter {
	color: #ff7f00;
}

h2 {
	font-size: 20px;
	text-decoration: underline;
	color: #8B0000;
	text-align: center;
	font-family: Arial;
	font-weight: bold;
	margin:5px 0 0;
}

h3 {
	font-size: 16px;
	text-align: left;
	color: #8B0000;
	font-family: Arial; 
	font-weight: bold;
	margin:10px 0 5px 20px;
}

h4 {
	font-size: 10px;
	color: #8B0000;
	text-align: left;
	font-family: Arial; 
	margin: 0;
	}

img { border: none; }

strong {font-weight: bold; }

b         { color: #333333; font-weight: bold; }
b.bleu    { color: #1A60A2; font-weight: bold; }
b.attente { color: #8B0000; font-weight: bold; }
b.erreur  { color: #FF0000; font-weight: bold; }
b.ok      { color: #00C000; font-weight: bold; }


p.center {
	text-align: center;
	margin: 0;
}

p.tbl {
	font-size: 0.8em;
	margin: 2px 0 0 4px;
}

p.tblr {
	text-align: right;
	margin: 2px 0 0 4px;
}

DIV.tbl p {
	text-align: left;
	margin: 0;
}

p.menu {
	font-size: 1em;
	text-align: center;
	margin: 5px 0 0 5px;
}

p.menu0 {
	font-size: 1.1em;
	text-align: left;
	margin: 5px 0 0 5px;
}

p.menu1 {
	font-size: 1.1em;
	text-align: left;
	margin: 5px 0 0 15px;
}

p.menu1:hover, p.menu2:hover, p.menu3:hover  {
	background : #F5AD0D;
}

p.menu2 {
	font-size: 1em;
	text-align: left;
	margin: 5px 0 0 35px;
}

p.menu3 {
	font-size: 1em;
	text-align: left;
	margin: 5px 0 0 55px;
}

a:link { 
	color: #1A60A2; 
	text-decoration: none;
	/*font-weight: bold;*/
}

a:visited { 
	color: #1A60A2; 
	text-decoration: none; 
	/*font-weight: bold;*/
}

tfoot {
	height: 542px;
	overflow: auto;
}

p.pdp  {
	text-align: center;
	margin: 5px 0 0 5px;
}

/**************** CSS MDO **********************/


.cache {
   display:none;
}

.hide {
	visibility:hidden;
}

.important {
   font-weight:bold;
   color:#ff7f00;
}

hr {
    border-style:dashed;
	border-color:#666666;
	border-width:1px;
}

a {
	color:#3468d2;
	/*font-weight:bold;*/
	text-decoration:none;
}

.aere li {
	padding-bottom:10px;
}


.bloc_centre {
	text-align:center;
}

a img {
	border:0;
}

.nolilipuce ul {
	padding-bottom:15px;
}

.nolilipuce li {
	vertical-align:middle;
}

.nolilipuce li li {
	list-style-type:none;
	clear:both;
}

.nopucetab, .nopucetab  li{ margin:0; padding:0}
.nopucetab li {
	list-style:none;
	min-height:120px;
}

/* CSS des cadres principaux*/
   /* Entete */
#header {
   background-image: url(../images/templates/fond_banniere.jpg);
   width : 990px;
   margin: auto;
}

/* Entete principal */
#mainHeader {
   background-image: url(../images/templates/banniere.jpg);
   background-repeat: no-repeat;
   height:150px;
   width: 990px;
   margin: auto;
}

/*========================================================================== Footer ============================================================================= */
#footer {
   background-image: url(../images/templates/pied_refonte_v2d.jpg);
   height: 160px;
   clear:both;
   width:990px;
   margin: auto;
}

#menu_pied {
	float: left;
	margin-top:15;
	margin-bottom:0;
	padding-top: 22px;
	width:150px;
}

#menu_pied li{
	line-height: 1.5;
	list-style-type: none;
	padding-left: 10px;
	background: url(../images/templates/puce_pied.png) no-repeat;
}

#menu_pied li:hover, #menu_pied li:focus{
	background: url(../images/templates/puce_pied_hover.png) no-repeat;
}

#menu_pied a{
	font-size: 1.1em;
	color:#333;
	text-decoration: none;
}

#menu_pied a:hover, #menu_pied a:focus{
	color:#1A60A2;
	text-decoration: underline;
}
 
#haut_page{
	font-size: 1.1em;
	float: left;
	padding-top: 20px;
	margin-left: 455px;
}

#pied_centre{
	float:left;
	width:570px;	
}

#infos_pied{
	float: left;
	padding-top: 0px;
	margin-left: 100px;
	color: #333;
	font-size: 1.1em;
	font-weight: bold;
	text-align:center;
	line-height: 1.5; 
}

#infos_pied p{
	margin-bottom:0;
}

#infos_pied a{
	font-weight:normal;	
}

#haut_page a:hover, #haut_page a:focus, #infos_pied a:hover, #infos_pied a:focus{
	text-decoration: underline;	
}

#pied_droite{
	position: relative;
	float:left;
}

#bouton_participants{
	position: absolute;
	height: 130px;
	width:200px;
	margin-top: 20px;
	margin-left: 10px;
	background: url(../images/templates/bouton_participants.png) top left no-repeat;
}

#bouton_participants:hover, #bouton_participants:focus{
	background: url(../images/templates/bouton_participants.png) top right no-repeat;	
}

/* #bouton_part {
	width: 200px;
	background: url(../images/templates/balance.png) no-repeat;
} */
 
/*============================================================================== page principale ================================================================ */
#main {
	/*background:url(../images/templates/tuile_h_corps.jpg) repeat-y;*/
	/*overflow:hidden; 
	_overflow:visible;
	zoom:1;
	padding-top:2px;  on rajoute une marge en utilisant le padding car à cause du overflow:hidden on ne peut pas faire de marge negatives usr les colonnes */
	/*height: 1000px;*/
	width:990px;
	margin: auto;
    background-color : #fff;
}

#main h3 {
	text-align:center;
	color:#187037;
}

	/* blocs de la partie principale*/
   /* colonne de gauche */
div#navcol {
   /*font-size:11px;*/
   background : #fff;
/*   border-right : solid 1px #ccc;*/
   width: 190px;
   float: left;
   /*padding-left:5px;
   padding-right: 5px;*/
   /*min-height:500px;*/
   color:#333;
   /*margin-right: 5px;
   margin-top:-2px; marge negative sur la colonne de gauche pour la coller au header*/
}

#navcol p{
padding-left: 5px;
padding-right: 5px;
}

#navcol ul {
   margin:0;
   padding:0;
   padding-left:5px;
}

#navcol ul ul{
   border:0;
}

#navcol li {
    list-style-type:none;
   	padding-top: 2px;
	padding-bottom: 2px;
	margin:0;
	padding-left:0;
}

#navcol li li {
    padding-left:10px;
}
     
#navcol li a{
	text-decoration:none;
	display:block;
	padding-left:15px;
}

#navcol li img {
	vertical-align: middle;
	border:none;
	text-decoration:none;
	float:left;
	margin-top:2px;
}

#navcol h1 {
	font-size : 16px;
	font-weight:bold;
	color:#3468d2;
}

/* CSS pour le menu de gauche */
#navcol .open {
	display: block;
}
	
#navcol .closed {
	display: none;
}
	
#navcol a:hover {
	color: #8983DB;
}

#navcol a.nodeSelected {
	background-color: #c0d2ec;
}

div.first {
	float: left;
	color:#333;
	background-color:#FFFFFF;
   border-right : solid 1px #ccc;
   border-left : solid 1px #ccc;
/*	border: 1px solid #CCC;*/
	/*margin : 5px;
	margin-left: 0;*/
	text-align:justify;
	/*_overflow:visible; 
	zoom:1;
	padding:2px;*/	
	width:568px;
}

div.firstSSBorder {
	overflow:hidden; 
	_overflow:visible; 
	zoom:1;
}

div.second {
	color:#000000;
	border: thin solid #CCCCCC;
	margin : 5px;
	margin-left:10px;
	text-align:justify;
	padding:2px;
}

.blocHeader {
	background-image: url(../images/templates/header.jpg);
	color:#fff;
	font-weight:bold;
	font-size :13px;
	height:25px;
	line-height : 25px;
	vertical-align:middle;
	padding-left : 10px;
}

.blocTitle {
	background-image: url(../images/templates/title.jpg);
	color:#000000;
	font-weight:bold;
	font-size :13px;
	height:25px;
	line-height : 25px;
	vertical-align:middle;
	padding-left : 5px;
    min-width:2px;
}

.blocContent {
	padding:10px;
	color: #333;
	/*background: #fcfcfc;*/
}

.blocContent p {
	line-height : 1.5em;
}

.blocContent a:hover{
	text-decoration: underline;
}

#bloc_right {
	float:left;
	width:230px;
/*    border-left : solid 1px #ccc;*/
    background: #fff;
	/*min-height:500px;*/
}

#bloc_right a:hover {
	color: #ff7f00;
}

.little_right {
	width:205px;
	/*background : #fff;*/
	/*border: thin solid #CCCCCC;*/
	min-height:150px;
	padding:2px;
	margin-left: 5px;
	margin-top:5px;
	margin-right:10px;
}

#compte {
	color : #333333;
}

/*#navcol, #bloc_right, .first  {
	padding-bottom:100000px; 
	margin-bottom:-100000px;
}*/

.logoLeft {
	vertical-align:middle;
	float:left;
	width : 110px;
	padding-top:10px;
	text-align:center;
}

.textRight {
	text-align: justify;
	vertical-align:middle;
	overflow:hidden; 
	_overflow:visible;
	zoom:1;
	min-height:100px;
	_height:100px;
}

/* CSS du menu horizontal */
.menu {
	position:absolute;
	top:100px;
	left:120px;
	display:block;
	margin:0;
	padding:0;
}

.menu ul {
   position:absolute; /* pour sortir la liste du flux de donnée */
   display:block;
   /*width:120px;*/
   margin:0;
   padding:0;
}
    
.menu li {
   list-style:none;
   font-size:12px;
   height:23px;
   display:block;
   float:left;
   margin:0;
   padding-left:8px;
   padding-right:8px;
   margin:2px;
}

.menu .cat1:hover{
   /*background-color: #FFFFFF;*/
}

.menu a {
   text-align:left;
   color:#3126bf;
   display:block;
   height:18px;
   text-decoration:none;
   padding-left:10px;
   padding-right:10px;
}
    
.menu li a { 
   /*background-color: #9FFCCB;*/
   padding-top:4px;
}

.menu li a:hover { 
	background-color: #3468d2;
	color:#FFFFFF;
}

   /* for a mozilla better display with key nav */
.menu a:focus {
   background-color: #DDDD63;
}

   /* hide some accessibility stuff */
.menu span {
   display:none;
}

   /* correct a little IE bug */
* html .menu li li {
   display:inline;
}


/* css du tableau des auteurs */
#tabauteurs {
	width:100%;
	padding:1px;
   	margin:0;
	text-align : justify;
}

#tabauteurs td {
	border: 1px solid #CCCCCC; 
}

#tabauteurs .aut {
	vertical-align:top;
}

div#txt_hutopy {
	display: block;
	text-align: left;
}

div#ban_hutopy img {
	display: block;
	border: none;
	margin: 0 auto;
}

/*================================================ Partenaires ==============================================================================*/

#partenaires {
width : 132px;
/*margin : auto;*/
}

#partenaires li {
	list-style-type : none;
}

#partenaires ul {
width: 150px;
}

ul#partenaires li img{
	/*border: 1px solid #ccc; */
	padding: 4px;
}


/*================================================ Reportages ==============================================================================*/

#reportage_ligne1 {
	margin-left:120px;
}
#reportage_ligne4 {
	margin-left:80px;
}
#reportage_ligne1 a, #reportage_ligne2 a, #reportage_ligne3 a, #reportage_ligne4 a {
	font-size: 11px;
}
.reportage_carte1 {
	float: left;
	background:transparent url(images/acceuil.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:35px;
width:60px;
	padding-left: 15px;
}
.reportage_carte2 {
	float: left;
	background:transparent url(images/soleil.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:35px;
	width:60px;
	padding-left: 15px;
}
.reportage_carte3 {
	float: left;
	background:transparent url(images/monde.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:100px;
	width:50px;
	padding-left: 15px;
}
.reportage_carte4 {
	float: left;
	background:transparent url(images/buvette.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 15px;
	margin-left: 35px;
}
.reportage_carte5 {
	float: left;
	background:transparent url(images/enfance.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 15px;
}
.reportage_carte6 {
	float: left;
	background:transparent url(images/cle.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:23px;
	width:50px;
	padding-left: 10px;
}
.reportage_carte7 {
	float: left;
	background:transparent url(images/animlibre.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:23px;
	width:50px;
	padding-left: 10px;
}
.reportage_carte8 {
	float: left;
	background:transparent url(images/figurines.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:45px;
	padding-left: 15px;
}
.reportage_carte9 {
	float: left;
	background:transparent url(images/cartes.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:15px;
	width:50px;
	padding-left: 5px;
}
.reportage_carte10 {
	float: left;
	background:transparent url(images/sarakro.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 15px;
	margin-left: 35px;
}
.reportage_carte11 {
	float: left;
	background:transparent url(images/geant.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 15px;
}
.reportage_carte12 {
	float: left;
	background:transparent url(images/tournoi.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:23px;
	width:50px;
	padding-left: 10px;
}
.reportage_carte13 {
	float: left;
	background:transparent url(images/animperm.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:23px;
	width:50px;
	padding-left: 10px;
}
.reportage_carte14 {
	float: left;
	background:transparent url(images/auteurs.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 15px;
}
.reportage_carte15 {
	float: left;
	background:transparent url(images/jdr.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:30px;
	width:50px;
	padding-left: 10px;
}
.reportage_carte16 {
	float: left;
	background:transparent url(images/gn.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 10px;
	margin-left: 35px;
}
.reportage_carte17 {
	float: left;
	background:transparent url(images/carrom.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 10px;
}
.reportage_carte18 {
	float: left;
	background:transparent url(images/boutique.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 10px;
}
.reportage_carte19 {
	float: left;
	background:transparent url(images/expo.jpg) no-repeat 0px 0px;
	padding-top:110px;
	padding-right:18px;
	width:50px;
	padding-left: 10px;
}
.reportage_spacer {
	clear: right;visibility:hidden;
}
.reportage_copy {
	position: relative;
	text-align: right;
	font-size:9px;
}
.reportage_thumbs img {
	padding:5px;
}
.reportage_retour {
	text-align:center;
}
ul.reportage {
	margin-left:150px;
	margin-top:50px;
}
li.reportage_logo {
	display : list-item;
	list-style-image : url(../images/historique_2010reportage/logos/mascotte.png);
}
li.reportage_stats {
	display : list-item;
	list-style-image : url(../images/historique_2010reportage/logos/chart_pie.png);
}
li.reportage_coeur {
	display : list-item;
	list-style-image : url(../images/historique_2010reportage/logos/heart.png);
}
li.reportage_video {
	display : list-item;
	list-style-image : url(../images/historique_2010reportage/logos/television.png);
}
li.reportage_presse {
	display : list-item;
	list-style-image : url(../images/historique_2010reportage/logos/book_open.png);
}
li.reportage_livre {
	display : list-item;
	list-style-image : url(../images/historique_2010reportage/logos/emoticon_grin.png);
}

.kwicks {
	/* recommended styles for kwicks ul container */
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
.kwicks li{
	/* these are required, but the values are up to you (must be pixel) */
	width: 110px;
	height: 335px;

	/*do not change these */
	display: block;
	overflow: hidden;
	padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
	/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	margin-right: 5px; /*Set to same as spacing option. */	
	float: left;
}
.kwicks.vertical  li{
	/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	margin-bottom: 5px; /*Set to same as spacing option. */	
}

#kwick_1 { 
	background : url(../images/accueil/animations_libres.jpg); 
}
#kwick_2 {
	background : url(../images/accueil/jeux_surdi_pingouins.jpg); 
}
#kwick_3 {
	background : url(../images/accueil/infos_pratiques.jpg); 
}
#kwick_4 { 
	background : url(../images/accueil/reportage.jpg); 
}
#kwick_5 { 
	background : url(../images/accueil/animateurs_groupe.jpg); 
}


.kwicks.horizontal #kwick_5 {
	margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_5 {
	margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}


 .kwicks .tout {  
     margin-top: 0px;
     margin-left: 0px;
	 width:335px;
	 height:310px;
 }  
 .kwicks .titrecourt {  
     font-size: 14px;  
     color: #31322D;  
     float: left;
     margin-top: 285px;
     margin-left: 5px;
 }  
 .kwicks .titre {  
	 display: none;
     font-size: 14px;  
     color: #31322D;  
     float: left;
     margin-top: 285px;
     margin-left: 5px;
 }  
 .kwicks .description {  
	 display: none;
	 font-size: 12px;  
     color: #31322D;  
     float: left;
     margin-left: 5px;
 }  

 .kwicks li.active .description {  
     display: block;  
 } 

  .kwicks li.active .titrecourt {  
     display: none;  
 } 

 .kwicks li.active .titre  {  
     display: block;  
 } 
# }