/* Feuille de style, Club de Montagne le Canadien, inc. 

import de feuilles de style	
*/


/* media non spécifié : s'applique à tous les médias */


/*	propriétés qui s'appliquent à l'ensemble de la page */
      body {	
			width : 100%;
            max-width : 1024px;
			min-width: 600px;
            height : 100%;
			margin-left:5%;
			margin-right:5%;
            font : 78% verdana, arial, helvetica, sans-serif;
			background-color : #FFF;
			color : black;
            text-align : justify ;
      }
      body {	/* css3 coupe mots très longs */
			word-wrap:  break-word;
      }
	  
/*	propriétés qui s'appliquent à l'ensemble de la page */
      body, #banniere img,  .w3c img {
	  margin : auto;
      }

/* Bannière au haut de l'écran */
      #banniere {	
            background-color : white ; /* #AABBBB ; */
      }
	  

/* section de gauche, contient le menu spécifique à une section du site */

      #gauche {
            float : left;
            left : 0;
            margin-left : 0.5%;
            margin-right : 0;
            width : 18.4%;
            margin-top : 0.8em;
            padding : 0.2em;
            font-size : 95%;
     }
  /*    #gauche:after, #centre:after, #droite:after {
            clear : both;
      }
*/

/* section de droite, contient la partie texte */ 

      #centre {
            float : right;
            border-left : 0.05em solid #066;
            padding : 0.5em;
			left:0.1em;
            width : 77.8%;
            top : 0.1em;
            margin-right : 0%;
            margin-top : 0.5em;
     }
	 /* version de centre sans spécifier la largeur - utilisé pour afficher photos notamment */
      #droite {
            float : right;
            border-left : 0.05em solid #066;
            padding : 0.5em;
			left:0.1em;
            top : 0.1em;
            margin-right : 0%;
            margin-top : 0.5em;
     }

      #centre .formulaire {
            width : 70%
      }
      #gauche .formulaire {
            width : 10%;
			font-size:1em;
      }
	  .retourligne {
			clear:both;
}	  
	  .retourdroite {
			clear:right;
}	  
      .formulaire label {
            font-weight : bold;
            color : #939;
      }
	  
/* subdivision de la section de droite en colonnes de dimensions variable
   sections flottantes , gauche , droite : permet de subdiver id=centre
   en deux sections de largeurs variables selon les besoins 
*/
      .flottant-gauche {
            position : relative;
            float : left;
            width : 65%;
            margin-top : 0.1em;
            padding-top : 0.2em;
      }
      .flottant-droite {
            position : relative;
            float : right;
			margin-right: 0.5%;
            width : 32.5%;
			page-break-inside: auto;
      }
      .cadre-pointille-rouge {
            border : 0.2em dotted red;
      }


#m1 {width:8.0%}
#m2 {width:4.6%}
/* #m3 {width:49.7%} */
#m4 {width:4.5%}
#m5 {width:7.8%}
#m6 {width:5.5%}
#m7 {width:6.0%}
#m8 {width:13.8%}
#p1 {width:9.0%}
#p2 {width:5%}
/* #p3 {width:50%} */
#p4 {width:5%}
#p5 {width:9%}
#p6 {width:6%}
#p7 {width:7%}
td#p5, td#p6, td#p7{text-align:right;}

#ph1 {width:14%;}
/* #ph2 {width:0px;} */
#ph3 {width:8%;}
#ph4 {width:8%;}
#ph5 {width:66%;}

#pe1 {width:20%;}
#pe2 {width:78%;}

#me1 {width:15%;}
#me2 {width:41%;}
#me3 {width:22%;}

#mh1 {width:12%;}
#mh2 {width:0;}
#mh3 {width:8%;}
#mh4 {width:8%;}
/* #mh5 {width:47%;} --> 53% */
 #mh6 {width:18%;} 

.m1 {width:8.0%}
.m2 {width:4.6%}
/* .m3 {width:49.7%} */
.m4 {width:4.5%}
.m5 {width:7.8%}
.m6 {width:5.5%}
.m7 {width:6.0%}
.m8 {width:13.8%}
.p1 {width:9.0%}
.p2 {width:5%}
/* .p3 {width:50%} */
.p4 {width:5%}
.p5 {width:9%}
.p6 {width:6%}
.p7 {width:7%}
td.p5, td.p6, td.p7{text-align:right;}

/* calendrier entretien */
.pe1 {width:12%;}
.pe2 {width:88%;}

.me1 {width:15%;}
.me2 {width:41%;}
.me3 {width:22%;}

 
/* calendrier ski et raquette */
.ph1 {width:14%;}
/* .ph2 {width:0;} */
.ph3 {width:8%;}
.ph4 {width:8%;}
.ph5 {width:66%;}

.mh1 {width:11%;}
.mh2 {width:3.5;}
.mh3 {width:3.5%;}
.mh4 {width:7%;}
/* .mh5 {width:54%;} */
 .mh6 {width:20%;} 
 .co1 {width:25%;}
 .co2 {width:75%;align:right;}

/* --------------------------------------------------------------------
    Mise en page : Habillage du site , apparence, couleur, taille, etc
   -------------------------------------------------------------------- */
      .titreimage {
            border : 0.1em solid #066;
            text-align : center;
		margin-bottom: 1em;
     }
      .titreimage p {
		margin-top : 0.2em;
            text-align : center;
		margin-top : 0.3em;
     }

      img, img.image, .titreimage img, .encadreJaune img, .encadrejaune img {
		max-width : 100%;
        border : 0;
     }

      #banniere  > img {
			width : 100%;
			max-width:1024px;
      }


/* SOUS-TITRES , MENUS */

      #gauche .menu , *.bouton {
            border : 0.1em solid #a0a0d0; /* #a0a0d0;  #b08080 */
            border-top : none; 
            margin-top : 1em;
            padding-bottom : 0;
            margin-bottom  : 0; 
      }
      .boutongris {
            border : 0.1em solid #b08080;
            border-top : none; 
			background-color :#CCC;
            margin-top : 1em;
            padding : 0.2em;
      }
	  
	  
	 #gauche .menu ul {
            padding-top : 0;
            margin-top  : 0; 
	}


      #gauche .menu h1, #gauche .menu h1 a, #gauche  h1 {
            color : #eeeeee;
            background-color : #066;
            display : block;
            font-size : 95%;
            font-weight : bold;
            padding-top : 0.2em;
            padding-bottom : 0.2em;
            border-top : 0;
            border-bottom : 0;
			margin : 0;
			text-align : left;
      }
      #gauche .menu fondpourpre h1, #gauche .menu fondpourpre h1 a, #gauche .fonpourpre h1 {
            background-color : #929;
      }
      #gauche .menu h1 a  {
            color : #eeeeee;
            background-color : #066;
            text-decoration : none
			}

      #gauche .menu ul li {
            border-top : 0.1em solid #a0a0d0; /* #b08080 */
			/*             border-bottom : 0.1em inset #a0a0d0; */
            display : block;
			 padding :0;margin:0;
      }
	  
      #gauche .menu ul li a,#gauche .menu ul li a span, #gauche .menu ul li a:visited, #gauche .menu ul li b {
            background-color : #FFF;
            color : #066;
		list-style-type: square;
            font-size : 90%;
      }
	  
      #gauche .menu ul li span {
            color : #444;
            background-color : #FFF;
      }

      #gauche .menu ul li a:hover, #gauche .menu h1 a:hover {
            text-decoration : none;
			display: block; 
            color : #002222;
            background-color : #CDD;
      }
      div.breves  div p a:hover {
            color : #002222;
            background-color : #CDD;
      }
		  
       #gauche .menu ul li li a, #gauche .menu ul li li a:visited, #gauche .menu li span {
            background-color : #FFF;
            color : #066;
      }
     #gauche .menu ul {
            line-height : 1em;
            font-weight : normal;
            text-align : left;
            list-style-type : none;
            margin : 0;
            padding : 0;
      }
     #gauche .menu ul  ul li , .retrait, .formulaire  {
            list-style-type : square;
		list-style-position: outside;
	}
	  
	
     dl {
		list-style-position: outside;
		margin-left: 0;
	}
	  
	  
      #gauche .menu ul li {
            margin : 0;
            padding : 0;
      }
      #gauche .menu ul li a {
            text-decoration : none;
            display : block;
            padding : 0.3em 0 0.3em 0.4em;
      }
      #gauche .menu li span {
            display : block;
            font-style : italic;
      }
      #centre li  {
            text-align : justify ;
      }

	  thead   {
            display : table-header-group ;
      }
	  
	  
      p {
            text-align : justify;
            color : black;
            font-size : 100%;
        /*    background-color : #FFF;  hérite couleur */
            margin : 0.3em 0.8em 0.8em 0.3em;
      }
      #pied p, .centre {
            text-align : center;
		margin: auto;
      }

      .webding {
            font-family : webding;
	  }
	  
      ul li.listeformulaire {
			list-style-type:none;	  
            color : #939;
	  }
      h2.formulaire, h3.formulaire {
			margin-top:0.5em;
			margin-bottom:0.1em;
			text-align:center;
            color : #939;
			font-size: 80%;
            font-weight : bold;
	  }

      li.lien  {
           display : block;
		margin: 1em 0 1em 0;
		list-style-position: outside;
		list-style-type : disc;
	}
			
      .titre-1, h1 {
            display : block;
            font-size : 165%;
            font-weight : bold;
		font-variant: small-caps;
            color : #066;
            border-bottom : 0.11em solid #25619c;
			margin-top:0.5em;
      }
      #centre  h1 {
		text-transform : uppercase;
      }

      .titre-2, h2 {
            display : block;
            font-size : 145%;
            font-weight : bold;
			font-variant: small-caps;
            color : #550066;
        /*    background-color : #FFF;   hérite */
            padding : 0.5em;
      }
      h3{
            font-size : 115%;
      }
      .titre-article, #gauche .menu ul li.titre-article, .sous-titre {
            font-size : 90%;
			font-variant: small-caps;
            color : navy;
			background-color:#EEEEE0;
			/*
			border-top: thin solid #939;
			border-bottom: 0.3em solid purple;
			*/
			border-top: 0.4em solid #939;
			border-bottom: 0.1em dotted purple;
			padding-top:0.3em; padding-bottom:0.3em;
			line-height:130%;
		}
      #gauche .menu ul li.titre-article, .sous-titre {
			border-bottom: 0.2em solid #939;
			border-top: 0.1em dotted purple;
		}
      h4 {
            font-size : 100%;
      }
	  
      *.signature  {
            color : #939;
            font-style : italic;
      }
	  
	  .titreimage h2  {font-size:95%;
			font-weight : normal;
			font-variant: normal;}
	  
	  .titreimage h3  {font-size:100%;
			color : #000;
			font-weight: normal;
			font-variant: normal;
			margin-top:0em;}
	  
      .breves h2 {
            display : block;
            font-size : 100%;
            background-color : #eeebee;
            color : #550066;

			padding: 0.5em;
			margin-top:2em;
      }
      .breves {
            display : block;
            text-align : justify ;
		}
	  
	  
      .plan h1 {
            font-size : 145%;
	  }
      .plan h2, .plan h3 {
			margin : 0;
			padding : 0;
			line-height: 1em;
            font-size : 115%;
	  }
	  
      .plan ul li a{
            text-decoration : none;
			line-height: 1.5em;
      }
	  
       .plan * a, .plan * a:visited  {
            color : #939;
      }

	  
      .petites-majuscules {
			font-variant: small-caps
      }
      .justifie {
            text-align : justify;
      }
      *.album {
            margin-bottom : 0.5em;
      }
	  
	.niveau1 {
        padding-left:1em;
}
	  
	.niveau2 {
        padding-left:2em;
}

	  
      .fondblanc {
            background-color : #FFF;
	 }
     * .fondvert {
            background-color : #066;
            color : #FFF;
      }
     * .fondviolet {
            background-color : #EAE;
      }
      .fondgris , .encadregris,.encadregris > h2, .encadregris > p {
            background-color : #F0F0F0;  /*  padding: 0.5em; #E6E6Fa #DDEEED; */
      }
	  .fondgris  p { margin:0.5em; padding:0.5em;}
	  
	tr.fondgris, tr.fondgris td.fondgris {
		background-color : #FFD;
	}
	  
      .rss, #gauche .rss ul li a {
            color :  #DD6E2F; vertical-align : middle;
      }
      .vcentre {
            vertical-align : middle;
      }
      .gris {
            color :  #D3D3D3          /* #DDEEED; */
      }
      .bleu {
			color : navy;
      }
	  
      .fondpourpre , h2.fondpourpre, h1.menu fondpourpre {
            background-color : #929;
            color : #DDD;
			padding : 0.4em;
      }
     *.vert {
            color : #066;
      }
      *.pourpre  { /* css3 */
            color : #939;  text-shadow : 0px 0.0.1em 0.0.1em #555;
      }
      *.pourpre-ombre  { /* css3 */
            color : #939; text-shadow : 0px 0.1em 1.0.5em #555;
      }
	  
      *.signature  {
            color : #939;
            font-style : italic;
      }
	  
      .rouge {
            color : red;
      }
      .italique {
            font-style : italic;
      }
      .gras {
            font-weight : bold;
      }
      .ngras {
            font-weight : normal;
	  }
      .normal {
            font-variant : normal;
	  }
      .petite-capitale {
		font-variant: small-caps;
      }
      .titreimage {
		display : block;
		vertical-align: bottom;
            font-size : 90%;
            color : #044;
            text-align : center;
		margin-bottom : 0.5em;
      }

      DIV.contenu {
			padding : 3em 1em 1em 1em;
            margin-left : 15em;
            width : 60em;
            background-color : #FFF;
            color : #000000;
      }
      .colonneGauche {
            float : left;
            padding : 0.5em;
            width : 48%;
            vertical-align : top;
      }
      .colonneDroite {
            float : right;
            padding : 0.5em;
            width : 75%;
            vertical-align : top;
      }

	kbd {
			border: 0.2em outset;
			padding: 0.2em;
			background-color: #E5E5E5;
		}

      .cadre {
            display : block;
            border : 0.1em solid #929;
            padding : 0.5em;
            text-align : justify ;
      }
      .contour {
            border : 0.1em solid #929;
            padding : 0.5em;
            text-align : justify ;
      }
      .arrondi { /* css3 */
			-moz-border-radius: 0.5em; 
			-webkit-border-radius: 0.5em; 
      }
      .cadre .fondjaune, .cadre .fondjauneplus, .cadre .fondlavande {
            border : 0.1em solid #25619c;
      }

		
      .encadre-1 {
            display : block;
            color : #eeeeee;
            background-color : #066;
            padding : 0.5em;
      }
      .encadre-2 {
            display : block;
            color : #05619c;
            background-color : #effeff;
            padding : 0.5em;
      }
      .encadre-4 {
            color : #DDD;
            background-color : #9c6b98;
            padding : 0.5em;
      }
      *.encadreblanc {
            display : block;
            font-size : 100%;
            border : 0;
            color : #15212c;
            background-color : #FFF;
            border : 0.1em solid #25619c;
            padding : 0.5em;
            margin-top : 0;
      }

      *.encadreJaune, .encadrejaune, .encadrelavande {
            display : block;
            border : 0.1em solid #25619C;
            padding : 0.5em;
            text-align : justify ;
      }
	  
      .encadrerose, .encadrerosepale, .encadregris {
            display : block;
            border : 0.1em solid #929;
            padding : 0.5em;
            text-align : justify ;
      }
      .ej {
            display : block;
            border : 0.1em solid #929;
            padding : 0.5em;
            text-align : justify ;
      }
	  
       *.fondjaune, .fondjaune  p, .fondjaune  h2, .fondjaune  h3 {
            font-size : 100%;
            background-color : #FFFEEE !important; /* #FcFcEb #F3FAE1 #F9F9DC */
      }
      *.fondrose {
            background-color : #FDF  ;
      }
      .fondrosepale, .fondrosepale p {
            background-color : #FAF0E6  ; 
			  /*	      FAF0E6 #FFEEFF #FFF0F5 #FAF0FA #FAF0FA  #F3F0F3 */
      }
	  
/*  pb 2010-03-15, enlevé semble orphelin    } */

      .fondlavande, .fondlavande  h2, .fondlavande p {
            background-color : #FAF6EA ; 
			  /* blanc de lin #FAF0E6  LavenderBlush  #FEE  FAF0E6 #FFEEFF #FFF0F5 #FAF0FA #FAF0FA  #F3F0F3     #FF00F5 */
      }

      .fondjauneplus, tbody.fondjauneplus > tr {
            background-color : #FFFF99 !important; /* #FFFF99  !important, écrasera tous les styles précédents.  #F3FAE1 #F9F9DC */
      }
      table > tbody.fondjauneplus {
            font-size : 110%;
            margin : 0.5em;
            padding : 0.5em;
            background-color : #FFFF99 !important; /* #FFFF99  !important, écrasera tous les styles précédents.  #F3FAE1 #F9F9DC */
      }

      .cadre .fondjauneplus {
            background-color : #FFFF99 !important; /* #FFFF99  !important, écrasera tous les styles précédents.  #F3FAE1 #F9F9DC */
      }
	  
/* ------ Encadres en dernier ------------ */	  

	  /*
      *.encadrelavande, .encadrelavande > h2, .encadrelavande > p, *.fondlavande, .fondlavande > p, .fondlavande > h2, .fondlavande > h3 {
            background-color : #FAF6EA ; 
			}  
		*/
			/* blanc de lin #FAF0E6  LavenderBlush  #FEE  FAF0E6 #FFEEFF #FFF0F5 #FAF0FA #FAF0FA  #F3F0F3     #FF00F5 */

      .encadrej  {
            background-color : #FDF  ;
      }
/*  encadrejaune, enlevé          font-size : 100%; */
      .encadreJaune p, .encadreJaune  h2, .encadreJaune, .encadrejaune p, .encadrejaune  h2, .encadrejaune   {
            background-color : #FFFFCC !important; 
      }
      .encadrerose, .encadrerose  h2, .encadrerose  p {
            background-color : #FDF  ;
      }
      .ej, .ej h2, .ej p   {
            background-color : #FFFEEE ; 
      }
      .encadrelavande , .encadrelavande  h2, .encadrelavande  p {
            background-color : #FAF6EA ; 
			  /* blanc de lin #FAF0E6  LavenderBlush  #FEE  FAF0E6 #FFEEFF #FFF0F5 #FAF0FA #FAF0FA  #F3F0F3     #FF00F5 */
      }
	  
      .sejour {
            background-color : #CCFFCC  ; /* #CCFFCC #FFF0F5 #FAF0E6  #FEFEED #FFFF99 */
      }
	  
      a.lien-image {
			display : block;
			border-bottom : 0.5em ridge #939;
			padding-top:1em;
			padding-bottom:2em;
			outline-width:2em;
      }
	  
      a.lien-image:hover {
            background-color : #CCDDDD;
      }
	  
      a.lien-image img {
			display : block;
			padding-top: 1em; margin-left: auto; margin-right: auto;
      }
	  
      .photos {
		vertical-align:top;
            text-align : center;
			width:98%;
      }

       div.photodroite {
        	font-size: 85%;
        	text-align: center; 
        	float: right; 
	        margin: 0.3em; 
        	padding: 0.7em; 
          border : 0.1em solid #25619c;
        	background-color: #FFF;
  }

      div.photogauche {
    	   font-size: 80%;
 	       text-align: center; 
	       float: left; 
    	   margin: 0.3em; 
    	   padding: 0.6em; 
            border : 0.1em solid #25619c;
         background-color : #FFF;
  }

      pre {
            font : 90% verdana, arial, helvetica, sans-serif;
      }
      * form  {
    	   font-size: 100%;
		}
  
	#saisie input, #saisie select, #saisie textarea {
		font-family: Tahoma, Arial, sans-serif;
		font-size: 103%;
		color: #000000;
		background-color : #fcFcEb;  /* #ececd6 */
		border:0.12em solid #25619c;
		}
	form.google input {
		background:transparent; border : 0;
		}
	input.transparent {
		background:transparent;
		border:0;
		overflow : auto;
		}

	input {display : inline;
		padding-left: 1em;
		list-style-position: outside;
		}
fieldset	 {
		margin-top :2em;
		}
legend	 {
		color: #939;
		}

textarea 	{
		overflow: hidden;
		}
textarea.ascenseur	{
		overflow: auto;
		}

input:hover, input:focus, textarea:hover, textarea:focus {
		background-color :#FCFCEB ; /* #EaE5EA #FbF6Fb #339999;*/	
		color : navy;
/*		marker-offset : 2em; */
		}

form div {
		clear: left;
		display: block;
		width: 100%;
	/*	height: expression('20%'); */
		margin: .4em 0 0 0;
		padding: 0.1em 0.3em;
		overflow : hidden;
}  

      .mois  { font-size: 85%;
      }
      .tmois  { font-size: 130%;
            text-align : left;
				background-color : #F0F0F0;
				color : navy;
      }
      
	  
	  /*classe=w3c affiche les boutons, hyperliens, validation de page web  -  pour tester les pages, on indique : block, sinon on indique : none; */
	  
      .w3c-pale {
			display : inline;
			filter:alpha(opacity=85);  
                     -moz-opacity: 0.850;  
                     opacity: 0.850;
	  }
      .wif , #phpmyvisites , naffiche{
			display : none;
	  }
      
      .w3c img {
            width: 3em; 
            height: 2em; 
      }
      .w3c  { display : none
      }

/* formattage du texte dans les tableau d'activités
*/


      table.calendrier  {
			border : 0.2em solid #066;
			page-break-inside: avoid;
			empty-cells:show;
			width:100%;
			border-collapse:collapse; /* IE évite ligne en relief et épaisse */
			font-size: 88%;
		}
/*		
      table.calendrier {
			border-width : 1; 
			padding: 0; border-spacing: 0;
			color : 006666;
			border-color : #066;
			font-size: 88%;
          }
*/
      table.calendrier caption {
			caption-side: top;
            color : #eeeeee;
            background-color : #066;
            text-decoration : none;
			margin :0 ;
            font-weight : bold;
		}

		table.calendrier   tbody  td   {
		vertical-align:top; 
		}

      table.calendrier  tbody.fondjauneplus {
			border : 2.0.2em solid #066;
		}
      table.calendrier > tbody > tr:last-of-type { /* last-of-type : css3 */
			margin-bottom:0.6em;
			padding-bottom:0.6em;
		}
		

        th {
			background-color : #066;
			color : #EEEEEE;
            font-weight : bold;
          }
			tr.total   {
					background-color : #FFD;
					color : #066;
					border-top : 0.1em solid #066;
					margin-top: 2em;
					padding-top: 2em;
					font-weight : bold;
			}

		.xxpetit {font-size: xx-small}
		.xpetit {font-size: x-small}
		.petit {font-size: small}
		
        .pct70 {
            font-size : 70%;
          }
        .pct80 {
            font-size : 80%;
          }
        .pct90 {
            font-size : 90%;
          }
        .pct105 {
            font-size : 105%;
          }
        .pct110 {
            font-size : 110%;
          }
        .pct120 {
            font-size : 120%;
          }
        .pct130 {
            font-size : 130%;
          }
        .pct150 {
            font-size : 150%;
          }

        .nombre {
            text-align : right;
          }
        .pct200 {
            font-size : 200%;
          }
        .pct250 {
            font-size : 250%;
          }
        .pct300 {
            font-size : 300%;
          }
		  
        th, td {
			padding : 0.2em;
          }
		  
        .tab_activ_lieu {
			margin-top:0.2em;
			margin-bottom:0.2em;
			color : #066;
            font-weight : bold;
			font-size : 110%;
			font-variant: small-caps;
			border-collapse:collapse;
          }
		  

a.opaque img {filter:alpha(opacity=100);
				/* css3 */
               -moz-opacity: 1.0;
               opacity: 1.0;}

a.opaque:hover img {filter:alpha(opacity=75);  
				/* css3 */
                     -moz-opacity: 0.75;  
                     opacity: 0.75;}

/*  a.info pour afficher infobulle - portion du texte dans balise span est affiché dans la bulle */					 
a.bulle{
    position:relative; 
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none;
	-moz-border-radius: 0.5em; /* this works only in camino/firefox */
	-webkit-border-radius: 0.5em; /* this is just for Safari */
	}

a.bulle:hover{z-index:25; background-color:#ff0; display: block;}

a.bulle span{display: none}

a.bulle:hover span{ /* la portion span  contient display:none, avec attribut Hover: s'affiche lors du passage de la souris */
    display:block;
    position:absolute;
    top:3em; left:3em; width:15em;
    border:0.1em solid #0cf;
/*    background-color:#cff; color:#000; */
    background-color:#929; color:#FFD;
    text-align: justify;}

/* infobulle source  SelfHtml 

.infobulle {margin:5em 0 0 5em;}

a.infobulle  {
color:#FFF;
background:#b3b06c;
font:bold 10.6em verdana, sans-serif;
text-decoration:none;
display:none;
width:15em;
padding:0.5em;
border:0.1em solid black;}

*/	

a.infobulle  {
display:block;
}

a.infobulle:hover {
color:black;
background-color :#ddd8b7;}

a.infobulle:link span, a.infobulle:visited span {display:none;}

a.infobulle:hover span {
position:absolute; top:3em;right:3em;z-index:3;
display:block;
width:25em;
color:black;
background-color :#FFF;
font:normal 10.6em courier, sans-serif;
border:0.1em solid black;
padding:1em;}

a.xinfobulle:hover span {
position:absolute; top:1em;right:1em;z-index:3;
display:block;
width:30em;
color:black;
background-color :#FFF;
font:normal 10.6em courier, sans-serif;
border:0.1em solid black;
padding:1em;}

			
a.tip { position: relative;  z-index:10;}

a.tip:hover { 	z-index:100;}

a.tip span { display: none;   
visibility:  hidden;
font-size : 0; 
height : 0;
/*top: 20px; left: -10px; width: 120.5em; 
*/
 }

 
a.tip:hover span {
/* font-size: 99%;    clear:right; */
	z-index:100; 
visibility:  visible;
height : auto;
    display:block;
	position: absolute;
    top:3em; left:3em; width:25em;
    border:0.1em solid #066;
	padding: 0.5em; z-index: 100; color: #fff; background-color : #000; font: 1em "Arial"; 
	text-align: justify; 
	-moz-border-radius: 0.5em; 
	-webkit-border-radius: 0.5em; 
	}


a.xtip:link span, a.xtip:visited span {display:none;   }


a:hover.xtip span {
	position: relative;
/*	top: 20px;
	left: -10px;
	width: 120.5em;
*/	
	display:block;
    top:2em; left:2em; width:15em;
    border:0.1em solid #0cf;
	padding: 0.5em;
	z-index: 100;
	background-color : #000;
	color: #fff;
	-moz-border-radius: 0.5em; /* this works only in camino/firefox */
	-webkit-border-radius: 0.5em; /* this is just for Safari */
}


a:hover.xtip {
	font-size: 99%; /* this is just for IE */
}

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:0.1em solid #0cf;
    background-color:#cff; color:#000;
    text-align: justify;
	}

		  
	.invisible {visibility : hidden ; height : 0; display : inline;} 


/* ----------- menu onglet ----------------------------------------------*/

/*  contient les onglets, permettant de sélectionner une section du site
  ie. Randonnée, ski de fond, etc.  
  on utilisela méthode des portes coulissantes (  voir Les Portes Coulissantes de CSS par Douglas Bowman site http://pompage.net/pompe/portescoulissantes/). 
 Lorsque css3 sera reconnu par les navigateurs, on pourra utiliser la fonctionnalité css3 >  border-radius
*/

/*	  
      #entete {
		width : 100%;
		float: center;
		margin-right:5em;
		padding-right:5em;
     }
      #banniere:after, #entete:after, #gauche:after, #centre:after {
            clear : both;
      }
*/
      #entete {
		float: right;
        /*margin-left : 11%;*/  margin-right:8%;  margin-top: 0.15em;
      }
      #entete.membres {
            margin-right : 0; 
      }
	  

      #banniere:after, #entete:after,  #centre:after, #pied:after {
            clear : both;
      }
	  
/* Pied de page */
      #pied {
            width : 100%;
            float : left;
            padding-bottom : 0;
            margin-bottom : 1em;
            color : #006666;
			background : transparent;
            border-top : 0.2em solid #006666;
            text-align : center;
      }
	  
/*  onglets menus */

/* onglets, technique des portes coulissantes  (deux images qui se superposent) */

      ul.onglet, li.onglet {
			display : inline;
      }

      #entete ul {
			display : inline;
            margin : 0;
            padding : 0.35em 0 0 0;
            list-style : none;
      }
      #entete li {
			display : inline;
            margin : 0;
            padding : 0;
      }	  
	  
      #entete a {
            float : left;
            background : transparent url("onglet-gauche-beige.jpg") no-repeat left top;
			color : black;
            margin : 0;
            padding : 0 0.1em 0 0 ;
 /*           border-bottom : 0.1em solid #765;
*/			
            text-decoration : none;
            white-space : nowrap;
			border-right: 0.1em;
      }
      #entete.membres a {
            background : transparent url("onglet-gauche-bleu.jpg") no-repeat left top;
      }
	  /*  #B8E6AC #002222 */
      #entete a span {
            display : block;
            background : /*#D8DDD1*/ transparent url("onglet-droit-beige.jpg") no-repeat right top;
/*
            padding : .25em .24em .25em .25em; 
*/
            padding : .25em .8em .6em .5em; 
            font : 74% verdana, helvetica, arial, sans-serif;
            color : #003333;
            text-align : center;
			font-weight: 600;
      }
      #entete.membres a span {
            color : #FFFFEE;
      }

      #entete.membres a span {
            background : transparent url("onglet-droit-bleu.jpg") no-repeat right top;  /*#D8DDD1*/
            padding : .25em .8em .6em .5em; 
      }
	  
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#entete a span {float:none;}
/* End IE5-Mac hack */

/* #B8E6AC */
      #entete a:hover span {
            color : #333;
            background :  transparent url("onglet-droit-beige.jpg")  no-repeat right top;  /*#AADDDD*/
			-moz-border-radius-topleft :0.4em; 
			-moz-border-radius-topright :0.4em; 
      }

	  
      #entete.membres a:hover  {
            color : navy;
            background-image :  none;
      }
      #entete .membres a:hover, #entete.membres a:hover span 
	  {
            color : #993399;
			-moz-border-radius-topleft :0.4em; 
			-moz-border-radius-topright :0.4em; 
            background : #CCDDDD; 
/*			background : transparent url("onglet-droit-pourpre.jpg") ; no-repeat right top;  */
      }

      #entete .espace a:hover, #entete .espace a:hover span 
	   {
            color : #993399;
      }
	  
      #entete li.espace  {
		   background-image : none;
	  }
	#entete .espace a {
		   background-image : none;
		   padding-left:0.25em;
      }
      #entete .espace a span , #entete .espace a:hover span {
            display : block;
		   background-image : none;
		   color : #0060AB;
            padding-left : .25em;
      }
      #entete li.vide  {
		   background-image : none;
		   background-color : white;
		   width:4%;
	  }

#entete #courant a {
           background-position : 0 -40.2em;
      }
      /* #D8DDD1 */
      #entete #courant a span {
/*            padding : .45em .8em .6em .5em; */
            font-weight : 600;
            color : #993399;
		 background-position:100% -40.2em;
/*		background-image : url("right_on.gif");
		background-position : right top;
		background-repeat : no-repeat; */
      }
      #entete a:hover {
            background-position : 0 -40.2em;
      }
      #entete a:hover span {
            background-position : 100% -40.2em;
      }
	  
/*  onglets menus */

/*
      #entete {
			width:100%;
            background :  url("bg.gif") repeat-x bottom; 
      }


			text-align:center; 
*/			
		/* couleurs pour entete bg.gif e9f0f0 75AAAA CADDDD 559999 url("bg.gif") repeat-x bottom; */


/* Feuille de style, Club de Montagne le Canadien, inc. 

style_cmc_impression.css 
	print 
	
	@page : propriétés spécifiques à l'impression size : largeur hauteur (11po 8.5po)  ou encore papier orientation (letter landscape) 
*/
		
      @media print {
	  
			@page { size:8.5in 11in; margin: 1cm; }
	  
			table.calendrier thead th   {
					margin-top: 2em;
					padding-top: 2em;
			}
			
			img { overflow : hidden;}
			
	  
            body, #gauche {
			background-color : #FFFFFF;
            }
            #entete {
                  display : none;
				  height : 0;
            }
      #gauche {
			display : none;
            width : 0%;
			height: 0;
     }
      #centre {
            width : 98%;
			border-left: 0;
     }
      #centre.wimpcentreo, div.wimpc2o, .wimp {
            width : 97%; ;
     }
			
      div.flottant-gauche {
            width : 64.5%;
      }
      div.flottant-droite {
            width : 32%;
      }
      div.flottant-gauche implarge {
            width : 84.5%;
      }
	.demi-gauche {float:left;width:49%;margin :0.2em;
	}
	.demi-droite {float:right;width:49%;margin :0.2em;
	}
			
      table.calendrier caption {
			caption-side: top;
            background-color : #eeeeee;
            color : #006666;
            text-decoration : none;
			margin :0 ;
            font-weight : bold;
            font-style : italic;
            width : 120%;
		}
	  
	  #banniere *.formulaire, #entete *.formulaire, #gauche *.formulaire  {
                  display : none;
            }
			
	.logocmc:before {
		content: url(../images/l.jpg) ;
	}
			
      .wimp, .wif {
			display : block;
	  }
			
	  *.formulaire {
			font-size: 90%;
            }
      * form  {
    	   font-size: 87%;
  }
			

			*.wimpc2o, *.wimpcentreo {
				  width: 95%;
            }
	  

			.nonimprimable, .impwif, .w3c  {
                  display : none;
				  width: 0;
				  height: 0;
            }
        .ipct70 {
            font-size : 70%;
          }
        .ipct80 {
            font-size : 80%;
          }
        .ipct90 {
            font-size : 90%;
          }
        .ipct105 {
            font-size : 105%;
          }
        .ipct110 {
            font-size : 110%;
          }
        .ipct120 {
            font-size : 120%;
          }
        .ipct130 {
            font-size : 130%;
          }
        .ipct150 {
            font-size : 150%;
          }
			
      }

/* Feuille de style, Club de Montagne le Canadien, inc. 

style_cmc_petit_ecran.css
	handheld
	only screen and (max-device-width:480px
*/

	
		/* telephones - images non affichées - handheld n-est pas reconnu par tous, on utilise donc largeur maxi*/
      @media handheld, screen and (max-device-width: 480px) 
		{
			#banniere  > img, img.photos { width:0; height:0; display: none; }
			img {height:auto;}
		}

		/* banniere pour largeur écran 800 ou moins*/
      @media only screen and (max-device-width: 850px) 
		{
      #entete {
            margin-left : 1%; margin-top: 0.15em;
      }
		}