/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/* Ci dessous se trouve les style s'appliquant à tout le site.            */
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/

/* style définissant les caractéristiques du corps de la page */
body { background-color:#fcfcfc; /* page collée aux bords */margin: 0; font-family: verdana, arial, sans-serif;/* on définit la police de base dans la page */ }

/* styles définissant l'aspect général des titres */
h1,h2,h3,h4,h5,h6{ padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; color:#001E57; font-weight:bold; }

/* Les styles suivants définissent les particularités de plusieurs styles de titre différents */
h1 { font-size:120%;	/* la taille des titres H1 représente 120% de celle du texte normal */ }
h2 { font-size:160%; }
h3{ font-size:105%; color:#001E57; }
h4{ font-size:104%; font-weight:normal;	color:black; }
h5 { font-size:130%; font-weight:normal; }

/* définition des caractéristiques générales des liens */
a:link, a:visited, a:hover{
text-decoration: none;		/* on défini un lien basique comme étant non souligné */
color:#0469D0;  font-size:14px;	font-weight:bold; }

/* Maintenant on précise l'aspect des liens au survol */
a:hover { color:#58AEF0; /* Les liens se souligne */text-decoration: underline; }

/* Ce style défini l'aspect des liens contenu dans les presentation des logiciels */
#presentation a{
text-decoration: none;	/* sans soulignement */
color:#0469D0; font-weight:normal;/* les liens ne sont pas en gras */ }

/* Définition de l'aspect au survol des liens contenu dans les présentations des logiciels */
#presentation a:hover {
text-decoration: underline; /* les liens se soulignent */
color:#58AEF0;				/* les liens prennent la couleur #58AEF0 */
}

.separateur { height:5px; font-size:5px}
 
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/* Ici sont définies les caractéristiques du bloc du haut de la page. Il y a un bloc conteneur appelé '#haut' dans lequel se trouvent*/
/* un calque pour le logo, et un autre pour la bannière.                                                                             */
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/

#haut{ width: 760px; height: 98px; background-color:#FFFFFF;}
	.logo{ float: left;	border: 0; }
	.ban{ float: right;	}
	
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/* Ici sont définies les caractéristiques du bloc contenant la zone langues et la zone menu. '#horiz' est le conteneur, il contient*/
/* un 2e conteneur, '#menu' qui contient les zones langues et java.                                                                */
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/

#horiz{ width: 760px; height: 35px; background-color:#FFFFFF;}

	#menu{ position:absolute; border:0;	width:760px; }
		.langue{ float:left; width:138px; }
		.java{ float:right; padding-top:8px; margin-left:0px; }
	
	/* style qui modifie la police du menu, le modifier pourrait déformer le menu */
	#menu font{ font-size:12px;/* taille */ font-family:Arial, Helvetica, sans-serif;}	/* type de police */

/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/* Ici sont définies les caractéristiques de la zone gauche, contenant les news   */
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
                           
#gauche{ position:absolute;	left:0;	width:140px; background-color:#fcfcfc; /* défini la couleur du fond */ }

	.news{ margin: 10px 3px 10px 3px; /* Pour changer la police des news CB1624 */font-family:Arial, Helvetica, sans-serif; /*  Pour changer la taille de la police des news */font-size:13px; /*  Pour changer la couleur de la police des news */color:#E70808; padding: 0px 3px 0px 5px; }

	/* définition de l'aspect des liens présents dans la partie des news */
	#gauche a{ /* taille des liens */font-size:13px; /* les liens ne sont pas en gras */font-weight:normal;}	


/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/* Ici on gére contenu de la zone centrale. Il y a un bloc conteneur appellé '#contenu' . Dans se bloc s'imbriquent 3 autres blocs '#opti'   */
/* '#design' et '#calepi'. Ce sont les bandes blanches dans lesquelles se trouvent les images et les descriptions des logiciels... Pour      */
/* chacun des blocs cités précédemment, il y a 4 "calques" nommés '.calque' par exemple. Ce sont eux qui contiennent images et descriptions. */
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/

#centre{ /* couleur de fond */background-color:#fcfcfc;	width:760px; }

#contenu{
margin-left:140px; 				
width:590px;					
padding: 10px 10px 10px 15px;   
background-color:#f8f8f8;			/* couleur de fond */
border: 3px solid white;		
font-size:14px;						/* Taille du texte fixée à 14 pixels */
}

	/* définition de la taille des caractères présent dans les tableaux */
	#contenu td{ font-size:14px; /* taille fixée à 14 pixels */}
	
	/* début des styles spécifiques à la page index.htm */
		.txtopticoupe{ font-size:12px; width:150px;	height:99px;}
		.txtoptinest{ font-size:12px; width:150px; height:99px;}
		.txtpolyboard{ font-size:12px; width:150px; height:99px;}
		.txtstairdesigner{ font-size:12px; width:150px; height:99px;}
		.txtcalepinum{ font-size:12px; width:150px; height:99px;}
		.txtcalepilight{ font-size:12px; width:150px; height:99px;}
		
/* fin des style spécifiques à la page index.htm */
	
/* définition de l'aspect des noms de logiciels */	
	.img{ margin-top:5px;}
	
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/* Ici sont définies les caractéristiques de la zone de pied de page. On a défini le conteneur pied de page, puis deux zones : '.copy' qui*/
/* contiendra le copyright, et '.lienbas' qui contiendra le petit menu.                                                                   */
/* N.B : On a défini des caractéristiques spécifiques pour les liens contenu dans le pied de page (#pied a).                              */
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/

#pied{
width:760px;
height:13px;
font-family:Arial, Helvetica, sans-serif; /* police du menu de bas de page */
font-size:10px;							  /* taille de la police du menu de bas de page*/
color:#bcbcbc;							  /* couleur du texte */
background-color:#FFFFFF;				  /* couleur de fond */

}

	.copy{ float:left; }
	.lienbas{ float:right; }
	
	/* Aspect des liens du menu de bas de page */
	#pied a{ color:#bcbcbc; font-size:10px; }
	
	/* aspect des liens au survol */
	#pied a:hover{ text-decoration:underline; /* soulignement */}
	
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/
/* Ici sont définies les caractéristiques du menu déroulant. Tous les appelé '#menu quelquechose' sont des styles s'appliquant*/
/* uniquement dans le bloc menu.                                                                                              */
/*¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤*/

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
color: #1897FA;
font-weight:bold;
font-size:10px;
line-height:14px;
}

#menu dl { float: left; width:103px; /*Pour modifier la taille des cases du menu*/ }

#menu dt {
cursor: pointer; /* Pour modifier l'aspect du curseur */
text-align: center; /* Alignement du texte dans les cellules */
background: #F6F6F7;
border: 1px solid #aeaeae;
margin: 1px;
}

#menu dd { display:none; border: 1px solid #aeaeae; }

#menu li { text-align: center; background: #fff; }

#menu li a, #menu dt a {
color:#197FE7;                /*#0469D0;                   /*#1897FA;*/
font-weight:bold;
text-decoration: none;
/*height: 100%;*/
border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { color:#1897FA;/*  couleur du lien pendant le survol */ }

#site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid white; }