
 
html, body{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	font-family: Verdana, Geneva, sans-serif;
}
/*html{
background-image:url(imgs/fonddefond.jpg);
	background-position:top left;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
}*/
a img{
text-decoration:none;
border:0;
}
#fond{
	background-image:url(imgs/pageaccueil.jpg);
	background-position:top left;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	height:100%;
	min-height:100%;
	width:100%;
	min-width:100%;
	filter : alpha(opacity=100);
	opacity : 1;
	position: absolute;
	z-index:-1;
	 animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
   -o-animation: fadein 2s; /* Opera */
	}

@keyframes fadein {
    from {
        opacity:0;
		
    }
    to {
        opacity:1;
		
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}	
#fond.handicap{background-image:url(imgs/pagehandicap.jpg);}
#fond.concept{background-image:url(imgs/pageconcept.jpg);}
#fond.generations{background-image:url(imgs/pagegenerations.jpg);}
#fond.jeu_generations{background-image:url(imgs/jeu_generations.jpg);}
#fond.contact{background-image:url(imgs/pagecontact.jpg);}	
#fond.egalite{background-image:url(imgs/pageegalite.jpg);}
#fond.interculturalite{background-image:url(imgs/pagediversite.jpg);}
#top{
	width:100%;
	height:32px;
	z-index:3;
	/*background-image:url(imgs/fonduni.png);
	background-repeat:repeat-x repeat-y;*/
	background-color:#000;
	padding-top:4px;
	color:#888;
	font-weight:bold;
	font-size:1em;
	text-align:center;
}

.cnam{
color:#cc0033;
}
#topbis{
	width:100%;
	height:30px;
	z-index:3;
	background-image:url(imgs/fondbloc.png);
	background-repeat:repeat-x repeat-y;
	padding-top:4px;
}
#topbis img{
float:right;
margin-right:1%;
}


#logoCNAM{
	position:absolute;
	width:250px;
	z-index:4;
	left:0%;
	top:90px;
	float:left;
	margin:0;
	padding:0;
	background-color:#000;
	}
#etiquettes{
	position:absolute;
	width:140px;
	z-index:4;
	top:188px;
	float:left;
	padding:0;
	
}
#menugauche{
	position:absolute;
	width:50px;
	z-index:4;
	left:0%;
	top:20%;
	float:left;
	margin:0;
	padding:0;
	}
/*************container principale*****************/	
#princip{
	display:bloc;
	margin:auto;
	width:800px;
	height:549px;
	max-width:800px;
	margin-top:2%;
	font-family: Verdana, Geneva, sans-serif;
	font-size:0.8em;
	background-image:url(imgs/fondblocbl.png);
	background-repeat:repeat-x repeat-y;
	z-index:2;
	padding:0px;
}
.credits{
color:#000;
}
#cc{
float:right;
margin-right:10px;
}
@media screen and (max-width: 1235px){
	#princip{
	margin-left:200px;
	}
}
/***************Container slide page 1****************/
.container {
    width:475px;
	float:left;
    font-size:1em;
    font-weight:bold;
    padding-left:50px;
    padding-top:50px;
	margin:0;
    }
.container a{
text-decoration:none;
color:#000;
}
.containerbas{
	width:475px;
	float:left;
    font-size:1em;
    font-weight:bold;
    padding-left:50px;
   	margin:0;
}
.containerbas a{
text-decoration:underline;
color:#000;
}
.containerbas img{
float:right;
}

a.slidesjs-next{
background-image:url(imgs/nextinfo.png);

width:100px;
height:24px;
}
a.slidesjs-previous{
background-image:url(imgs/prev.png);
width:20px;
height:24px;

}
a.slidesjs-navigation{
display:block;
float:right;
margin-left:3px;

}
/************page credits**************/
.ensemble{
margin-bottom:5px;
font-size:0.7em;
}
/***********MENU GAUCHE PAGE 1*********/
#illustration{
display:bloc;
float:right;
width:275px;
height:auto;
/*max-width:282px;*/
font-size:1.1em;
font-weight:bold;
padding:0;margin:0;
}

#illustration img{
display:bloc;
float:right;
}


/***************menu pour chaque page*****************/
#princip #menu{
width:400px;
float:left;
padding-left:50px;
}

#princip .onglet{
float:left;
margin-left:5px;
margin-bottom:5px;
z-index=3;
}
.onglet_handicap{background-color:#ea6119;}
.onglet_generations{background-color:#3789c3;}
.onglet_contact{background-color:#bb002b;}
.onglet_egalite{background-color:#becd00;}
.onglet_interculturalite{background-color:#c20444;}

.ongletinfo{
float:left;
width:0px;
margin-right:0px;
margin-bottom:5px;
opacity:0;
}
#info_onglet_1, #info_onglet_2, #info_onglet_3, #info_onglet_4{
display:none;
}


/***************menu logo secretcam*****************/
#logo{
width:300px;
float:right;
padding-left:15px;
padding-top:20px;
text-align:right;
}

/**************zone texte gauche***************/
#texte{
width:350px;
float:left;
font-size:1em;
padding:0;margin:0;
padding-left:50px;
padding-top:20px;

}
#texte img{
/*width:100%*/
}

/***Zone texte droit et image***/
#texte_bis{
display:bloc;
float:right;
width:350px;
font-size:1em;
padding-left:25px;
padding-right:25px;
padding-top:10px;
margin:0;

}
/**** les titres ****/
.titre{
font-size:1.1em;
font-weight:bold;
}
.important{
font-size:1.2em;
font-weight:bold;
border:2px solid #333;
color:#c00;
padding:2px;
}
.titre_concept{color:#000;}
.titre_handicap{color:#ea6119;}
.titre_generations{color:#3789c3;}
.titre_contact{color:#bb002b;}
.titre_egalite{color:#999900;}
.titre_interculturalite{color:#c20444;}

.titre2{
font-size:1.1em;
font-weight:bold;
color:#ea6119;
background-color:#000;
}
.home{color:#FFF;}

.image{
float:left;
margin-top:15px;
margin-left:5px;
}
/****les listes ***/
#princip ul {
list-style-type:circle;
padding-left:20px;
}


#footer{
	width:100%;
	height:20px;
	z-index:3;
	background-color:#000;
	padding-top:8px;
	color:#888;
	font-weight:bold;
	font-size:0.6em;
	text-align:center;
	position: absolute; bottom: 0;
	display:none;
}



