@charset "utf-8";
/* CSS Document */

/*********************** bouton promo **********************/
.nomville {
	font-size: 30px;
}



.image {/*margin-top: 5px;*/
	margin-bottom:10px;
	margin-top:10px; 
	margin-right:10px;
	margin-left:10px;
	padding-left:20px;
}


.exercicecompta2016 {
	background:blue url('') repeat-x;
	
	background-color:yellow;
}

#democompta2016{
	display:block;
	padding-bottom:10px;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	position:absolute;
	/*
	margin-top:-220px;
	margin-left:450px;
	*/
	color:white;
/* taille du bloc */
	height:170px; 
	width: 450px;
/*couleur de fond du bloc background-color:purple;*/
	background-color:purple;

/*nouvelle position*/
	margin-top:-450px; /*-450*/ /* ou -660 */
	margin-left:480px; /*480*/  /* ou 620 */

	
	/*border-bottom:5px solid white;*/
	
	border-radius: 20px; /*10px;*/
	
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	/* This will create a smooth transition for the opacity property */
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;
}




#demoprixcamera{
	display:block;
	padding-bottom:10px;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	position:absolute;
	color:white;
/* taille du bloc height:170px; width: 450px;*/
	height:210px; /*370*/
	width:500px;
/*couleur de fond du bloc background-color:purple;*/
	background-color:DarkOrchid; /*purple; gray;*/
/*nouvelle position*/
/*
margin-top:-450px; 	margin-left:880px; 
*/

	margin-top:-400px; /*-450*/ /* ou -660 */
	margin-left:820px; /*480*/  /* ou 620 */
	/*border-bottom:5px solid white;*/
	border-radius: 20px; /*10px;*/
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	/* This will create a smooth transition for the opacity property */
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;
}



.grislaurent{
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	/* This will create a smooth transition for the opacity property */
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;
}

#democompta2016 a:{color:white;}

#democompta2016 a:focus{color:white;}
#democompta2016 a:active{color:white;}

#democompta2016 a:link{color:white;}

#democompta2016 a:hover{color:yellow;}

.coin-arrondi{

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(/PIE.htc);

}

/*
.voyage a: {color:white;}
.voyage a:hover {color:pink;}
*/


/* source 
http://www.zonecss.fr/proprietes-css/hover-css.html 
*/

/*#democompta2016 a:link{color:white;}*/
/*
a:active{}
a:visited{}
a:hover{}
a:focus{}
a:link{}
*/

.demonstration {
		/*line-height: 28px; */
/*	background: url(espace/bouton/bouton.jpg) no-repeat;/* attention a la longueur du text  background: url(espace/bouton/bouton.jpg) no repeat;*/
	/*ATTENTION A L'ARBORESCENCE DES FICHERS IMAGES ON N EST DANS CSS ON DESCEND ET ON REMONTE VERS BOUTON RACINE ESPACE*/
/*	background: url(../bouton/bouton.jpg) no-repeat;*/ /* attention a la longueur du text*/
	/*
	background: url(../espace/bouton/bouton.jpg) repeat-x;
	*/
	/* attention a la longueur du text*/
	
	/*
	background:grey url('../bouton/bouton.jpg') repeat-x;
	*/
	
	/* couleur du bouton   */
	background:grey url('') repeat-x;
	background:grey url('http://www.espaceinformatique.net/espace/bouton/bouton.jpg') repeat-x;
	
	text-align: center;
	height:28px; /*height: 28px; avant*/
	width: 100px;/*width: 120px;  60px 56px*/ /* attention a la longueur du text*/
	margin-top: 5px; /*margin-top: 5px;*/
	margin-right:5pxy;
	margin-left:5px;
}

.bouton_lien {
background-color:#808080;
  background-image:url(http://www.espaceinformatique.net/bouton/bouton.jpg);
  background-position:initial initial;
  background-repeat:repeat no-repeat;
  height:28px;
  line-height:28px;
  margin-left:5px;
  margin-top:5px;
  text-align:center;
  width:100px; /*120px*/ 
}

.demonstration_f {
	line-height: 28px;
/*	background: url(espace/bouton/bouton.jpg) no-repeat;/* attention a la longueur du text  background: url(espace/bouton/bouton.jpg) no repeat;*/
	/*ATTENTION A L'ARBORESCENCE DES FICHERS IMAGES ON N EST DANS CSS ON DESCEND ET ON REMONTE VERS BOUTON RACINE ESPACE*/
/*	background: url(../bouton/bouton.jpg) no-repeat;*/ /* attention a la longueur du text*/
	background: url(bouton/bouton.jpg) repeat-x;/* attention a la longueur du text*/
	text-align: center;
	height:28px; 
	width: 100px; /*120px;*/
	margin-top: 5px;
	margin-right:5px;
	margin-left:5px;
	color:#FFF;
}

.demonstration a{
	/*color:#FFF;*/
	color:white;
	}
.demonstration a:hover{
	/*color:#00F;*/
	color:white;
}

.infos {margin-top: 5px;}
/*********************** bouton promo **********************/

/***********************RESET**********************/

html, body{height:100%;}

html,body,div,span,h1,h2,h3,p,ul,ol,li,dl,dt,img,a,strong{margin:0; padding:0; border:0;}

object{display:block;}

ul{list-style:none;}

a{border:none; outline:none; text-decoration:none;color:white;}

img{border:none;}

.fondgris{background-color:#7f7575;}
.fondnoir{background-color:#000;}
.fondcouleur{
	background-color:#FC3;
}
.fondcouleur1{
	background-color:#F99;
}
.fondcouleur2{
	background-color:#FC0;
}


/**********************image des caméras ************/
.camera {/*margin-top: 5px;*/
display:block;
	margin-bottom:100px;
	margin-top:300px; 
	margin-right:350px;
	margin-left:850px;
	padding-left:200px;
	
	
}



/**********************GENERAL************/
/*
body{background-color:#000; font:normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff;}
*/

body{font:normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff;
background:#333d43 url('../espace/bouton/bg_tile.jpg');}

#header, #header h1{height:50px; background-color:#7f7575;}

#header{width:100%;}

#header h1{width:1000px; margin:0 auto; font:normal 30px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; text-align:right; line-height:1.5;}


/* lolo  #333d43 attention couleur du men  OU background:#333d43 url('../espace/bouton/bg_tile.jpg'); */ 
#menu{width:100%; overflow:hidden; /* background:#000; */ background:#333d43 url('../espace/bouton/bg_tile.jpg');}

/* #menu li{float:left;} */

#menu li{float:left;
	z-index:1;
	
	/* Gradients! */
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	/* This will create a smooth transition for the opacity property */
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;
}

/*
#menu li a{display:block; height:42px; width:155px; text-align:center; background:#000 url(images/bg_btn_navp.jpg) repeat-x; margin-right:1px; color:#fff; line-height:2.8;}
*/
/* menu avant */
/*width:125px;*/

#menu li a{display:block; height:42px; width:110px; /* width:125px; width:140px;*/ text-align:center; background:#333d43 url(/*../images/bg_btn_navp.jpg*/) repeat-x; margin-right:1px; color:#fff; line-height:2.8;}
/* espace/images/bg_btn_navp.jpg OU ../images/bg_btn_navp.jpg */
/* menu après */

#menu li a{display:block; height:42px; width:100px;/*width:125px;*/ text-align:center; background:#333d43 url(/*../images/bg_btn_navp.jpg*/) repeat-x; margin-right:1px; color:#fff; line-height:2.8;}
/* espace/images/bg_btn_navp.jpg OU ../images/bg_btn_navp.jpg */



#menu li a{display:block; height:42px; width:100px;/*width:125px; width:140px;*/  text-align:center; background:#333d43 url(/*../images/bg_btn_navp.jpg*/) repeat-x; margin-right:1px; color:#fff; line-height:2.8;

	/* Gradients! */
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	/* This will create a smooth transition for the opacity property */
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;


}

#menu li.last1 a{display:block; height:42px; width:100px;/*width:170px;*/ text-align:center; background:#333d43 url(/*../images/bg_btn_navp.jpg*/) repeat-x; margin-right:1px; color:#fff; line-height:2.8;}
/* espace/images/bg_btn_navp.jpg OU ../images/bg_btn_navp.jpg*/

#menu li.last a{width:100px;/*width:134px;*/ margin-right:0;}
/*#menu li.last1 a{width:154px; margin-right:0;}*/

/*#menu li a:hover{ background:#000 url(images/bg_btn_navh.jpg) repeat-x;}*/

#menu li a:hover{ height:37px; border-bottom:5px solid #ffc982;}

#conteneur{position:relative; width:920px; margin:2px auto;}

#logo{position:absolute; top:-52px; left:10px}

#pageaccueil{position:relative; width:920px; margin:2px auto;}

#logoaceuil{position:absolute; top:-52px; left:10px}

/* lolo */

#promo{
	position:absolute;
	width:195px;
	height:272px;
	top:-15px;/*-15px;*/
	right:-50px;/*12px;*/

}

/*#promo p{position:relative; font-size:14px; margin:30px 0 0 20px; }*/

#promo p{position:relative; font-size:14px; margin:15px 0 0 15px; }
/*ZONE 01*/
.details_promo{width:57px; height:28px; background-color: transparent url(../images/bg-details.jpg) repeat-x;}
.details_promo a{color:#fff; margin-left:6px; line-height:2;}
.localisation{text-transform:uppercase; font-size:30px;}
.tarifs{font-size:18px; margin-bottom:20px;}

#contenu{clear:both; padding:10px;}

/*
#contenu{clear:both; padding:10px; background-color:#313131;}
*/
#contenu{clear:both; padding:10px; background-color:#313131;}

.clear{clear:both;}

.details{position:absolute; top:147px; left:0; width:57px; height:28px; background:transparent url(../images/bg_btn_details.jpg) repeat-x;}
/* url(espace/images/bg_btn_details.jpg) OU url(../images/bg_btn_details.jpg) */
.details a{color:#fff; margin-left:6px; line-height:2;}

a.plus{font-size:14px; color:#f2b66b;}

/*lien hypertexte*/

.lien  a:hover{font-size:12px;color:red;}
.lien a:{font-size:10px;color:green;}
.lien  a:{display:block; font-size:11px; color:#f2b66b;}
.lien  a:hover{font-size:11px;color:#0cf;}
.spacer{height:1px; clear:both;}

#footer{height:40px; /*background-color:#3b3b3b; */ overflow:hidden; /*test transparence des liens*/
	/* Gradients! */
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	/* This will create a smooth transition for the opacity property */
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;

}

#footer ul{width:220px; margin:0 auto;}

#footer li{float:left; margin-top:12px;}

#footer li a{display:block; font-size:11px; text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;

	/* Gradients! */
	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	/* This will create a smooth transition for the opacity property */
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;

}

#footer li a:hover{color:#0cf;}

/* Menu démonstration pédagogie en ligne */

#pedagogie{height:40px; background-color:#3b3b3b; overflow:hidden;}

#pedagogie ul{width:600px; margin:0 auto;}/*taille par défaut widht:400px*/

#pedagogie li{float:left; margin-top:12px;}

#pedagogie li a{display:block; font-size:11px; text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;}

#pedagogie li a:hover{color:#0cf;}

/* Menu démonstration pédagogie en ligne */



#footer li a:hover{color:#0cf;}

/* Menu démonstration pédagogie en ligne */

#pedagogieenligne{height:40px; background-color:#3b3b3b; overflow:hidden;}

#pedagogieenligne ul{width:600px; margin:0 auto;}/*taille par défaut widht:400px*/

#pedagogieenligne li{float:left; margin-top:12px;}

#pedagogieenligne li a{display:block; font-size:11px; text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;}

#pedagogieenlgine li a:hover{color:#0cf;}

/* Menu démonstration pédagogie en ligne */


#footer li a:hover{color:#0cf;}

/* Menu maintenanceenligne */

#maintenanceenligne{height:40px; background-color:#3b3b3b; overflow:hidden;}

#maintenanceenligne ul{width:600px; margin:0 auto;}/*taille par défaut widht:400px*/

#maintenanceenligne li{float:left; margin-top:12px;}

#maintenanceenligne li a{display:block; font-size:11px; text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;}

#maintenanceenligne li a:hover{color:#0cf;}

/* Menu maintenanceenligne */






/* Menu démonstration pédagogie Menu 2 */
#footer li a:hover{color:#0cf;}

.pedagogiemenu2{height:40px; overflow:hidden;} /*background-color:#3b3b3b*/

.pedagogiemenu2 ul{width:400px; margin:0 auto;}

.pedagogiemenu2 li{float:left; margin-top:12px;}

.pedagogiemenu2 li a{display:block; font-size:14px; text-align:center; color:white; padding:0 5px; line-height:1.6;} /*color:#f2b66b;*/

.pedagogiemenu2 li a:hover{color:blue;font-size:18px;} /*color:#0cf;*/

/* Menu démonstration pédagogie Menu 2  */

/* Menu démonstration pédagogie Menu 3 */
#footer li a:hover{color:yellow;}

.pedagogiemenu3{height:40px; overflow:hidden;background-color:#3b3b3b;} /*background-color:#3b3b3b*/

.pedagogiemenu3 ul{width:400px; margin:0 auto;}

.pedagogiemenu3 li{float:left; margin-top:12px;}

.pedagogiemenu3 li a{display:block; font-size:12px; text-align:center; color:white; padding:0 5px; line-height:1.6;} /*color:#f2b66b;*/

.pedagogiemenu3 li a:hover{color:yellow;font-size:12px;} /*color:#0cf;*/

/* Menu démonstration pédagogie Menu 3  */


/* Menu maintenance toto */
.maintenancetoto{
background-color:grey;
}
/* Menu maintenance toto */


#centre{height: auto;width: 800px;}

#gauche{font-size:14px; margin:0 0 18px 8px;; padding:20px; height:208px; background-color:#313131;width:580px; float:left;}

#droite{font-size:14px; margin:0 0 18px 8px;; padding:20px; height:208px; background-color:#313131;width:580px; float:right;}

.image_tarif {
	margin: 10px;
	padding-top: 100px;
	padding-right: 50px;
	padding-bottom: 50px;
	padding-left: 150px;
	float: left;
}
.image_tarif_1 {
	margin: 0px;
	padding-top: 100px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 150px;
	float: left;
}

/* bouton dtails promos */
.promo {
	line-height: 28px;
	
	background: url(promo.png) no-repeat;
	background-color: red;
	text-align: center;
	height: 28px;
	width: 56px;
	margin-top: 5px;
}
/*
.promo img{
	display:block;
	margin-right:auto;
	margin-left:auto;
}
*/

/*			avant validation formulaire avec css			*/

#boutique {
margin-left:50px;
}

#seance{
padding:10px;height: auto;width: 800px;
}

#seance1{
font-size:14px; margin:0 0 18px 8px;; padding:50px; height:208px; /*background-color:#313131;*/
width:380px; float:left;
}

#seance2{
font-size:14px; margin:-120px 0 18px 8px;; padding:50px; height:208px;/* background-color:#313131;*/
width:380px; float:right;
}

#tarif2{
font-size:14px; margin:-50px 20px 18px 8px;; padding:20px; height:361px; /*background-color:#313131;*/
width:380px; float:left;
}

.clearboth{
clear:both; padding:10px;
}

/* ***************************************************** */

#featured{ 
	width:400px; 
	padding-right:300px; 
	position:relative; 
	
	/* bordure grises */
/*	border:5px solid #ccc; 
*/	border:5px solid black; 
	
	
	height:250px; 
/*	background:#fff;*/
	background:#000;
}
#featured ul.ui-tabs-nav{ 
	position:absolute; 
	top:0; left:550px; /*position du menu*/
	list-style:none; 
	padding:0; margin:0; 
	width:300px; 
}
#featured ul.ui-tabs-nav li{ 
	padding:1px 0; padding-left:13px;  
	font-size:12px; 
	color:#666;
	
	color:#FFF; 

	background:#FFFFFF;
	background:#000;

}
#featured ul.ui-tabs-nav li img{ 
	float:left; margin:2px 5px; 
	/*background:#fff; */
	padding:2px; 
	border:1px solid #eee;

	/*background:#000;*/

}
#featured ul.ui-tabs-nav li span{ 
	font-size:11px; font-family:Verdana; 
	line-height:18px; 

	color:#FFF; 

}
#featured li.ui-tabs-nav-item a{ 
	display:block; 
	/* test */
	
	height:30px; /*40px*/
	color:#333;  background:#fff; 
	line-height:20px;

	background:#000;
	color:#FFF; 

	background:#FC6; 
	background:black; 

}
/*passage de la souris sur l'image fond jaune*/
#featured li.ui-tabs-nav-item a:hover{ 
	/*background:#f2f2f2; 
	background:#FC6; */
/*fond jaune hover*/
}
#featured li.ui-tabs-selected{ 
	/*
	background:url('espace/images/selected-item.gif') top left no-repeat;  
	background:url('../images/selected-item.gif') top left no-repeat;  
	*/
	/* ATTENTION A LA RACINE DES FICHIERS */
	background:url('../images/selected-item.gif') top left no-repeat;  
}
/* couleur de fond jaune*/
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
/*	background:#ccc; */
	/*fond sélection automatique*/
/*	background:#000; */
/* fond ecran jaune image automatique */	 
background:#ccc;
background:white;/* green case active */
width:28px;height:28px;
}
#featured .ui-tabs-panel{ /* arrière plan défilement des images */
	width:400px; height:50px; /* width:400px; height:50px; */ /*position du text en rapport avec l'image du slider */
	/*background:#999;*/
	position:relative;
	/* background:#ccc; */ /* lecture du texte sur fond gris en dessous de l'image*/

}
#featured .ui-tabs-panel .info{ 
	position:absolute; 
	/* top:180px; left:0; */
	top:200px; left:0; 
/*	height:70px; */
	height:50px;
	/*
	background: url('espace/images/transparent-bg.png'); 
	background: url('../images/transparent-bg.png'); 
	*/
	background: url('../images/transparent-bg.png'); 
	background:#ccc; /* #ccc; #002 couleur fond bleu sur texte blanc*/
	width:550px; /*largeur pour lire le texte qui défile en dessous de l'image */
}
#featured .info h2{ 
	font-size:18px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0;
	overflow:hidden; 
	
}
#featured .info p{ 
	margin:10px 5px;
margin-bottom : 20px;
margin-top : 20px;	
	font-family:Verdana; font-size:18px;/*11px*/ 
	line-height:15px; color:#f0f0f0;/*15px*/
	color:green;
}
#featured .info a{ 
	text-decoration:none; 
	color:#fff;
	/*lien hypertexte info*/
	color:red;	
	
}
#featured .info a:hover{ 
	text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}



/* autres liens*/

.lien1 {
	text-align:center;
	font-size: 20px;
	width: 100px; height: 100px;
	background: black;/*#fff*/
	color:blue;
	border-radius: 5px;
	transition: border-radius 2s, border-color 3s; /* transition when the mouse leave */
}
.lien1:hover {
	font-size: 25px;
	color:white;/*#333;*/
	background: #555;/*#fff*/
	transition: all 2s; /* transition when the mouse over */
}

/* sorry, i need to play */
.lien1:after { 
	
	/*font-size: 1.25em;*/ 
	font-family: helvetica, arial, sans-serif; 
	font-size: 20px;
	color:white;/*#888*/
}
.lien1:hover:after {
	font-size: 20px;
	opacity: 1;
	transition: opacity 1s 1s;
}
.lien1 h1 {
  font-size: 20px;
  margin-top: 1em;
  color: #bbb;
}



/* autres liens 02*/

.liens2 {
  text-align:center;
}
.lien2 {
	width: 90px; height: 90px;
	margin: 3em auto;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 30px;
	transition: border-radius 2s, border-color 3s; /* transition when the mouse leave */
}
.lien2:hover {
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 50%;
	transition: all 2s; /* transition when the mouse over */
}

/* sorry, i need to play */
.lien2:after { 
	content: "CreativeJuiz";
	position:relative; 
	top: 120px; 
	left:-14px; 
	font-size: 1.25em; 
	font-family: helvetica, arial, sans-serif; 
	font-variant: small-caps; 
	color:#888;
	opacity:0; 
	transition: opacity 2s;
}
.lien2:hover:after {
	opacity: 1;
	transition: opacity 1s 1s;
}

.lien2 h1 {
  font-family: "Open Sans", "Segeo UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin-top: 1em;
  color: #aaa;
}




/* zone de liens pour les démonstrations */
#demoliens1{height:40px; background-color:#3b3b3b; overflow:hidden;}
#demoliens1 ul{width:220px; margin:0 auto;}
#demoliens1 li{float:left; margin-top:12px;}
#demoliens1 li a{display:block; font-size:11px; text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;}
#demoliens1 li a:hover{color:#0cf;}
/* zone de liens pour les démonstrations */

/* TEST DES LIENS */
/*
#liens_webs{height:40px; background-color:#3b3b3b; overflow:hidden;}
#liens_webs ul{width:220px; margin:0 auto;}
#liens_webs li{float:left; margin-top:12px;}
#liens_webs li a{display:block; font-size:11px; text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;}
#liens_webs li a:hover{color:#0cf;}
*/

#liens_webs{height:40px;height:70px; background-color:green; /*overflow:hidden; background-color:#3b3b3b; */}
#liens_webs ul{width:800px; height:100px; margin:0 auto;}/**/
#liens_webs li{float:left; margin-top:12px;}
#liens_webs li a{display:block; font-size:11px; text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;}
#liens_webs li a:hover{color:#0cf;}

/*
.spacer{height:1px; height:4px; clear:both;}
#footer{height:40px; background-color:#3b3b3b; overflow:hidden;}
#footer ul{width:220px; margin:0 auto;}
#footer li{float:left; margin-top:22px;height:20px;}
#footer li a{display:block; font-size:11px;  text-align:center; color:#f2b66b; padding:0 5px; line-height:1.6;line-height:2;}
#footer li a:hover{color:#0cf;font-size:14px;}
*/


.bgdetails {
	line-height: 28px;
	/*
	background: url(espace/bouton/bouton.jpg) no-repeat;
	*/
	/* attention a la longueur du text*/
	/*ATTENTION A L'ARBORESCENCE DES FICHERS IMAGES ON N EST DANS CSS ON DESCEND ET ON REMONTE VERS BOUTON RACINE ESPACE*/
	background-color: url('../espace/bouton/bouton.jpg') no-repeat;/* attention a la longueur du text*/
	text-align: center;
	height: 28px;
	width: 60px;/*56px*/ /* attention a la longueur du text*/
	margin-top: 5px;
	color:#FFF;
}
.bgdetails a{
	/*color:#FFF;*/
/*color:white;*/
	}
.bgdetails a:hover{
	/*color:#00F;*/
/*color:white;*/
}

.reglementation1{clear:both;
font-size:14px; margin:0 0 18px 8px;
padding:20px; height:208px; background-color:#313131;width:580px; float:left;/*;width:580px;*/
}


/*----- zone avec les 3 colonnes ----*/

.voyage{width:800px; float:left; /*width:295px; float:left;  width:450px;*/}

.voyage_centre{width:294px; float:left; margin:0 8px;/*width:294px;*/}

.voyage, .voyage_centre{position:relative;}

.voyage h2, .voyage_centre h2{width:295px; height:52px; background:#4c4c4a url(../images/puce_etoile.gif) 20px center no-repeat; line-height:2.2; text-indent:60px;/*width:295px;*/ }
/* url(espace/images/puce_etoile.gif OU url(../images/puce_etoile.gif */
.voyage img, .voyage_centre img{margin:18px 0 18px 8px;}

.voyage p.proposition, .voyage_centre p.proposition{font-size:14px; margin:0 0 18px 8px;}

.voyage p.infos, .voyage_centre p.infos{font-size:11px; margin:9px 0 18px 8px;}

.voyage br, .voyage_centre br{margin-bottom:20px;}


/*----- zone avec les 3 colonnes ----*/



.details{position:absolute; top:147px; left:0; width:57px; height:28px; background:transparent url(../images/bg_btn_details.jpg) repeat-x;}
/* url(espace/images/bg_btn_details.jpg) OU url(../images/bg_btn_details.jpg) */
.details a{color:#fff; margin-left:6px; line-height:2;}

a.plus{font-size:14px; color:#f2b66b;}



.arrondi{
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
height:100px;
width:100px;
background-color:blue;
}