/* dans la lune - Stéphane Dupas */

body {
	background-color: #000;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	background-image:url('../img/fond-degrade4.png');
	background-repeat:repeat-x;
	background-position:top;
}

a {
	text-decoration:none;
	color:#0099ff;

	/*CSS3*/
	color: rgba(0,153,255,1.0);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a:hover {
	color:#FFFFFF;
	
	/*CSS3*/
	color: rgba(255,255,255,1.0);
	text-shadow:0 0 9px rgba(0,153,255,1.0);
}

/*ENTETE*/
#danslalune {
	position:relative;
	left:50%;
	margin-left:-365px;
	margin-top:65px;
	margin-bottom:40px;
	width:730px;
}
#danslalune a img {
	border-style:none;
}

/*MENU HAUT*/
#menuborder, #menu {
	width : 710px;
	height : 15px;
	left : 50%;
	margin-left : -375px;
	padding: 10px 20px;
}
#menuborder {
	z-index:0;
	position : absolute;
	border-style:solid;
	border-width: 0 0 1px 0;
	border-color: #598bfc;
	border-color: rgba(0,153,255,1.0);

	/*CSS3*/
	border-radius: 0 0 17px 17px;
}
#menu {
	z-index:300;
	position : relative;
	
	/*CSS3*/
	/*text-shadow:0 0 5px rgba(0,153,255,1.0);*/
}
#menu .rubrique {
	float:left;
	margin-right:30px;
	color:#FFFFFF;/*1e3577*/
	font-size:12px;/*8pt;*/
	font-weight:bold;
}
#menu .rubrique a {
	text-decoration:none;
}

/*PAGE*/
#page {
	width : 710px;
	padding: 20px;
	position : relative;
	font-size: 12px;
	text-align:justify;
	left : 50%;
	margin-left: -375px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-top:20px;
	margin-bottom:20px;
}
#page h1 {
	color:#FFFFFF;
	font-size:36px;
	margin: 0 40px 24px 40px;/*margin: 0 20px 0 20px;*/
	font-weight: bold;
	letter-spacing:-1px;
	
	/*CSS3*/
	text-shadow:0 0 9px rgba(0,153,255,1.0);
}
#page h2 {
	color:#FFFFFF;
	font-size:21px;
	margin-bottom:0;
	letter-spacing:-1px;
	/*margin: 0 20px;*/
}
#page h3 {
	color:#FFFFFF;
	font-size:12px;
	font-style:italic;
	margin-bottom:10px;
}
#page .soustitre2 {
	font-size: 13px;
	font-weight: normal;
	color: #fff;
	margin: 5px 40px 20px 40px;/*margin: 5px 20px 20px 20px;*/
	
	/**/
	text-shadow: 0 0 9px rgba(0,153,255,1.0);
}
#page .menugauche {
	width: 240px;
	margin: 0 40px 40px 40px;
}
#page .menugauche a {
	display:block;
	font-size:20px;
	font-weight:bold;
	height:32px;
	letter-spacing:-1px;
}

/*FENETRE TITRE*/
.fenetre-titre {
	background-position: bottom right;
	position:relative;
	width: 460px;/*670px*/
	height:80px;
	padding: 10px 40px;/*10px 20px*/
	margin: 10px 0;
	z-index:100;
	border-style:solid;
	border-width:2px;
	border-color: #001746;
	
	/*CSS3*/	
	border-color: rgba(0,153,255,0.3);/*#001746*/
	border-radius: 50px;
	
	-webkit-transition: all 0.5s ease;
	-moz-transition: width 0.5s ease, border 0.5s ease, -moz-box-shadow 0.5s ease, -moz-text-shadow 0.5s ease;
	-o-transition: all 0.5s ease;
	-khtml-transition: width 0.5s ease, border 0.5s ease, -khtml-box-shadow 0.5s ease, -khtml-text-shadow 0.5s ease;
	-ms-transition: width 0.5s ease, border 0.5s ease, -ms-box-shadow 0.5s ease, -ms-text-shadow 0.5s ease;
	-chrome-transition: all 0.5s ease;
	transition: width 0.5s ease, border 0.5s ease, box-shadow 0.5s ease, text-shadow 0.5s ease;
}
a .fenetre-titre {
	display:block;
}
a:hover .fenetre-titre {
	background-color: #112;
	background-color: rgba(0,153,255,0.1);
	border-color: #fff;
	width:626px;
	
	/*CSS3*/
	-webkit-box-shadow: 0 0 9px rgba(0,153,255,1.0);
	-moz-box-shadow: 0 0 9px rgba(0,153,255,1.0);
	-o-box-shadow: 0 0 9px rgba(0,153,255,1.0);
	-khtml-box-shadow: 0 0 9px rgba(0,153,255,1.0);
	-ms-box-shadow: 0 0 9px rgba(0,153,255,1.0);
	-chrome-box-shadow: 0 0 9px rgba(0,153,255,1.0);
	box-shadow: 0 0 9px rgba(0,153,255,1.0);
	
	-webkit-text-shadow: 0 0 9px rgba(0,153,255,1.0);
	-moz-text-shadow: 0 0 9px rgba(0,153,255,1.0);
	-o-text-shadow: 0 0 9px rgba(0,153,255,1.0);
	-khtml-text-shadow: 0 0 9px rgba(0,153,255,1.0);
	-ms-text-shadow: 0 0 9px rgba(0,153,255,1.0);
	-chrome-text-shadow: 0 0 9px rgba(0,153,255,1.0);
	text-shadow: 0 0 9px rgba(0,153,255,1.0);
}
.fenetre-titre .sous-titre {
	font-size:14px;
	color:#0099ff;
	margin: 0;
	
	/*CSS3*/
	color: rgba(0,153,255,1.0);
}
.link {/*Année*/
	position:absolute;
	right:45px;
	bottom:-9px;
	font-size:36px;
	color:#001746/*#64a7d7*/;
	
	/*CSS3*/
	color: rgba(0,153,255,0.3);
	-webkit-transition: color 0.5s ease;
	-moz-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	-ms-transition: color 0.5s ease;
	transition: color 0.5s ease;
}
a:hover .link {
	color: #FFF;
	
	/*CSS3*/
	color: rgba(255, 255, 255, 1.0);
	text-shadow: 0 0 3px rgba(0,153,255,1.0);
}

/*FENETRE STANDARD*/
.fenetre_standard {
	position:relative;
	width: 626px;
	background-color: #112;
	border-style:solid;
	border-width:2px;
	border-color:#fff;
	padding: 40px;
	
	/*CSS3*/
	background-color: rgba(0,153,255,0.1);
	border-color: rgba(255,255,255,1.0);
	border-radius: 50px;
	box-shadow: 0 0 9px rgba(0,153,255,1.0);
}
.fenetre_standard p a, .fenetre_standard h3 a {
	color:#FFFFFF;
	padding:3px;
	border-style:solid;
	border-width:1px;
	border-color:transparent;
	
	/*CSS3*/
	border-color: rgba(0,153,255,0.3);
	border-radius: 5px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-khtml-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-chrome-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.fenetre_standard p a:hover, .fenetre_standard h3 a:hover {
	color:#223;
	text-decoration:none;
	background-color:#FFFFFF;
	border: 1px solid #223;
	
	/*CSS3*/
	border-color: rgba(0,153,255,1.0);
	box-shadow: 0 0 9px rgba(0,153,255,1.0);
}
.fenetre_standard .link {
	color:#FFF;
	
	/*CSS3*/
	color: rgba(255, 255, 255, 1.0);
}
.fenetre_standard h2 {
	margin:0;
	
	/*CSS3*/
	text-shadow:0 0 9px #0099ff;
}
.fenetre_standard a img {
	display:block;
	border-style:solid;
	border-width:10px;
	border-color:#555;
	
	/*CSS3*/
	border-color: rgba(154,154,154,1.0);
	border-radius: 0;
	
	-webkit-transition: -webkit-box-shadow 0.5s ease, -webkit-transform 0.5s ease;
	-moz-transition: -moz-box-shadow 0.5s ease, -moz-transform 0.5s ease;
	-o-transition: all 0.5s ease;
	-khtml-transition: -khtml-box-shadow 0.5s ease, -khtml-transform 0.5s ease;
	-ms-transition: -ms-box-shadow 0.5s ease, -ms-transform 0.5s ease;
	-chrome-transition: -chrome-box-shadow 0.5s ease, -chrome-transform 0.5s ease;
	transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.fenetre_standard a:hover img {
	
	/*CSS3*/
	
	/*Ombres*/
	-webkit-box-shadow: 0 10px 70px rgba(0,0,0,1.0);
	-moz-box-shadow: 0 10px 70px rgba(0,0,0,1.0);
	-o-box-shadow: 0 10px 70px rgba(0,0,0,1.0);
	-khtml-box-shadow: 0 10px 70px rgba(0,0,0,1.0);
	-ms-box-shadow: 0 10px 70px rgba(0,0,0,1.0);
	-chrome-box-shadow: 0 10px 70px rgba(0,0,0,1.0);
	box-shadow: 0 10px 70px rgba(0,0,0,1.0);
	/*Déformations*/
	-webkit-transform: scale(1.3) rotate(-1.5deg);
	-moz-transform: scale(1.3) rotate(-1.5deg);
	-o-transform: scale(1.3) rotate(-1.5deg);
	-khtml-transform: scale(1.3) rotate(-1.5deg);
	-ms-transform: scale(1.3) rotate(-1.5deg);
	-chrome-transform: scale(1.3) rotate(-1.5deg);
	transform: scale(1.3) rotate(-1.5deg);
}

/*PIED DE PAGE*/
#pied-page {
	position : relative;
	width : 710px;
	left : 50%;
	margin-left : -375px;
	padding: 10px 20px;
	font-size: 9px;
	
	border-style: solid;
	border-width: 1px 0 0 0;
	border-color: #598bfc;
	
	/*CSS3*/
	border-color: rgba(0,153,255,1.0);
	border-radius: 17px 17px 0 0;
}
#pied-page a {
	text-decoration:none;
}

/*formulaires*/
form {
	border: 2px dotted #FF0000;
	padding: 10px;
}

/**/
.attention {
	color:#F00;
}
.travaux {
	color:#FF0;
	font-weight:bold;
}

/**/
#outils-illustrations {
	position:absolute;
	top:-70px;
	left:280px;
}

/*---------------*/
/* ILLUSTRATIONS */
/*---------------*/

/* un blog dans la lune */
a #blog {
	background-image: url('../img/bandeau-nounours.png');
	background-position: -1000px -1000px;/* l'image est hors champ mais elle est chargée */
	background-repeat: no-repeat;
}
a:hover #blog {
	background-position: bottom right;
}
a:hover #unblogdanslalune {
	position:absolute;
	top:-85px;
	right:0;
	background-image:url('../img/bandeau-nounours.png');
	background-position: -410px -15px;
	width:300px;
	height:85px;
}

/* Le crieur sur les toits */
a #crieur1 {
	background-image: url('../img/bandeau-lecrieursurlestoits.png');
	background-position: -1000px -1000px;/* l'image est hors champ mais elle est chargée */
	background-repeat: no-repeat;
}
a:hover #crieur1 {
	background-position: bottom right;
}
a:hover #crieur2 {
	position:absolute;
	top:-85px;
	right:50px;
	background-image: url('../img/bandeau-lecrieursurlestoits.png');
	background-position: -390px -15px;
	width:270px;
	height:150px;
}

/* fnac - jardin culturel */
a #jardinculturel1 {
	background-image: url('../img/bandeau-fnacjardinculturel.png');
	background-position: -1000px -1000px;/* l'image est hors champ mais elle est chargée */
	background-repeat: no-repeat;
}
a:hover #jardinculturel1 {
	background-position: bottom right;
}
a:hover #jardinculturel2 {
	position:absolute;
	top:-85px;
	right:50px;
	background-image: url('../img/bandeau-fnacjardinculturel.png');
	background-position: -390px -15px;
	width:270px;
	height:150px;
}