/* CREATIONS.CSS */
/* La page creations */

charset "utf-8";

#Contenu {
	width: 900px!important; /* Va savoir pourquoi, faut le repreciser... */
}



/* Navigations premier niveau - supports (PROJETS/WEB/PRINT/...)*/

#NavigationSupport {
	height:50px;
	background:#FFF;
	width:900px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	background-repeat: no-repeat;
	background-position: center 50px;
}

#NavigationSupport a {
	display:block;
	float:left;
	height:30px;
	width:224px;
	text-align:center;
	padding-top:15px;
	padding-bottom:5px;
	font-size:1.2em;
	background:url(../UI/CreationsNavigationOff.png);
	color:#000;
	letter-spacing:-0.05em;
	border-right:1px solid #CCC;
}

#NavigationSupport a:hover {
	text-decoration:none;
	background:url(../UI/CreationsNavigationOn.png);
	color:#FFF;
}

#NavigationSupport a.select {
	background:url(../UI/CreationsNavigationSelect.png);
	color:#FFF;
}

hr#NavigationSupportHr {
	background-image: url(../UI/CreationsNavigationFond.png);
	margin: 0px;
	height: 13px;
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-decoration: none;
}



/* Navigations second niveau - projets (Autresmondes,...)*/
.NavigationProjet { 
text-align:center;
background: url(../UI/CreationNavigationprojetOff.png) repeat-x center bottom #003847;

margin-top:20px;
height:90px;
width:300px; /*100x le nombre d'elements*/

padding-left:300px; /* (900 - width)/2*/
padding-right:300px;

margin-left:auto;
margin-right:auto;
margin-bottom:0!important;
}

.NavigationProjet li{ 
width:100px;
height:70px;
display:block;
float:left;
font-size:1.1em;
color:#FFF;

padding-top:10px;
padding-bottom:10px;
}


.NavigationProjet li:hover, .NavigationProjet .active { 
text-decoration:none;
background: url(../UI/CreationNavigationprojetOn.png) no-repeat center bottom;
}


	/* Pour les centrer, on doit faire ce petit calcul : */
	/* (Par défaut, c'est 3 elements */
	.NavigationProjet#Photos {
	width:500px; /*100 x le nombre d'elements*/
	padding-left:200px; /* (900 - width)/2*/
	padding-right:200px;

	}

	.NavigationProjet#Sites {
	width:400px; /*100 x le nombre d'elements*/
	padding-left:250px; /* (900 - width)/2*/
	padding-right:250px;

	}




/* Images liens dans les Items */
	.Item a img {
		border: 1px solid #CCCCCC;
		padding: 5px;
		margin: 10px;
		text-align: center;
	}
	.Item  a:hover img {
		border: 1px solid #CCCCCC;
		text-align: center;
	}

/* Les Showcase "scrollable" */

.Scroll {
	width: 900px;
	height: 2300px;
    position:relative;
	overflow:hidden;
}

.Items {
    position:absolute; 
    width:2000em;  
}

.Item {
	width: 900px;
	overflow:hidden;
	background-repeat:no-repeat;
	float:left;
	background-color:#FFF;
}

.Item big, .Item .grand { /* Un jour faudra remplacer les <P.grand> en <P> <BIG>. Un jour. */
	font-size:1.em;
	margin-bottom:50px;
	text-align:center!important;
}

.Item .Titre {
	text-align:center;
	
}
.Item .Gauche {
	width:420px;
	float:left;
}

.Item .Droite {
	width:420px;
	margin-left:430px;
}

hr.Clear {
	clear:both;
	border:none;
	background:none;
	color:#FFF; /* On prend la couleur du fond, pour masquer les HR à ce con d'IE6 */
}




/* 1. PROJETS  */
/* *********** */

#Projet .Item { /* Un seule crea */
	background-color: #FFFFFF;
	background-image: url(../UI/FaitsFond.jpg);
	background-position:center 400px;
	background-repeat:no-repeat;
	padding:20px;
}

	/* PROJETS - Gils  */
	
	#GILSCitation {
		width:200px;
		float:right;
		font-size:1.2em;
		font-style:italic;
		padding:20px;
	}


	/* PROJETS - Histoire */
	
	.Item#Histoire {
		background-color: #FFFFFF;
		background-image: url(../UI/CreationsSiteFond.jpg);
		background-repeat:no-repeat;
		background-position: 0 150px;
	}
	#Histoire #HistoireTitre {
		height:162px; /* Fait office de margin-top pour les captures */
		width:750px;
		margin-left:auto;
		margin-right:auto;
	}
	
	
	#Histoire #HistoirePowerpoint {
		width:527px;
		height:331px;
		margin-left:178px;
		margin-right:auto;
		margin-bottom:80px;
		overflow:hidden;
	}
	
	#HistoireConsulter {
		width:600px;
		margin:auto;
	}

	/* PROJETS - Socio */
	
	#SocioConsulter {
		width:600px;
		margin:auto;
	}

/* 2. SITES  */
/* ******** */
#Sites .Item { /* Un seul site */
	background-color: #FFFFFF;
	background-image: url(../UI/CreationsSiteFond.jpg);
	background-repeat:no-repeat;
	background-position: 0 150px;
}

.SiteTitre {
height:182px; /* Fait office de margin-top pour les captures */
width:750px;
margin-left:auto;
margin-right:auto;
}

.SiteCaptures {
width:527px;
height:331px;
margin-left:198px;
margin-right:auto;
margin-bottom:100px;
overflow:hidden;
}

.SiteDescription {
margin-top:50px;
padding:20px;
margin-bottom:50px;
}

/* 3. PRINT  */
/* ********* */

#Print .Item { /* Un seule crea */
	background-color: #FFFFFF;
	background-image: url(../UI/FaitsFond.jpg);
	background-position:center 400px;
	background-repeat:no-repeat;
	padding:20px;
	
	text-align:left;

}

	/* PRINT - Book */ 
	
	#Print .Item#Book {
		padding-bottom:210px;
		background:no-repeat bottom url(../creations/print/BookOuvert.jpg) #FFF!important;
	}
	
	#Print .Item#Book #Bookouvert {
		padding:0!important;
		margin:0;
	}

	/* PRINT - Flyers */
	
	#Print .Item#Flyers {
		background-image: url(../creations/print/FlyersFond.jpg);
		background-repeat:no-repeat;
		background-position:top left;
	}
	
	
	#Print .Item#Flyers p
	{
		padding-left:150px;
		padding-right:150px;
		text-align:center!important;
	}
	
	#Print .Item#Flyers #Titre {
		text-align:center;
		margin-top:180px;
		margin-bottom:50px;
	}

/* 4. PHOTOS  */
/* *********** */

#Photos .Item {
	padding:20px;
}

/* Une galerie */

#Photos .Item table {
margin-left:auto;
margin-right:auto;
}

#Photos .Item table td {
border:none!important;
}