body
{
background: url("images/bg_etoile.gif") repeat;
width:100%;
min-width:1048px;
margin:auto;
}


/****** En tete ******/

#entete
{
background: url("images/barre.gif") repeat-x bottom, url("images/nautilus.png") no-repeat top center ;
position:relative;
height:180px;
}

#logo
{
display:inline-block;
width:15%;
position:absolute;
bottom:10px;
}

header nav
{
display:inline-block;
position:absolute;
right:0px;
bottom:0px;
text-align:right;
}

header nav ul li
{
display:inline-block;
list-style:none;
margin-right:50px;
font-size:1.5em;
}

header nav a
{
text-decoration:none;
color:yellow;

}

header nav a:hover
{
border-bottom: 2px solid blue;
color:blue;
}
/*----- Fin En-tête -----*/

/****** Corps du site ******/

/****** Menu du site ******/
#menu { font-family: monotype corsiva, harlow solid italic, serif; display:inline-block; width:16%; vertical-align:top; border-radius: 10px; background: #2d247e; border: outset 2px #2d247f; margin-left:30px; margin-top:30px; }
#menu h1 { font-size:1.3em; text-align:center; color:red; }
#menu ul /* Mise en forme du block liste ul */ { width:auto; list-style:none; padding:0px; margin:auto; color:white; }
#menu ul li  /* mise en forme des élements de liste */ {  height:35px;  /* taille automatique */ background: url("images/menu.png") repeat-x #513ff4 ; box-shadow:2px 2px 5px black; border-radius:1px; margin:auto; margin-bottom:5px; text-align:center; }
#menu ul li a /* mise en forme des liens contenus dans les listes */ { text-decoration:none; display:block; color: white; text-align:center; font-size:25px; }
#menu ul li ul  /* Supprime l'affichage des sous-menu */ { display:none; }
#menu ul li:hover ul /* Fait apparaitre les sous-menu au passage de la souris */ { display:block; position:relative; background: url("images/menu_sel.png"); margin:0px; top:-30px; left:100%; z-index:1; }
#menu ul li:hover, #menu ul li:hover ul li:hover a /* Affichage d'un arrière plan coloré au passage de la souris sur un lien */ { background: url("images/menu_sel.png")  repeat-x;  }
#menu ul li:hover a p { margin:0px; font-size:18px; line-height:1.8em; }
#menu ul li:hover ul li { height:auto; width:90%; margin-bottom:0px; margin-right:0px;  }
#menu ul li:hover ul li a	/* suppression de l'arrière plan coloré à la disparition du passage de la souris */ { background: url("images/menu.png") repeat-x #513ff4 ; }
#menu ul li:hover ul li img { display:none; }
#menu ul li:hover ul li:hover img { position:absolute; left:0px; display:inline; margin-top:8px; }

#fb-page-avenir { display:flex; justify-content:center;}

@media all and (max-device-width:980px), all and (max-width:1280px)
{
    #fb-page-avenir { display:none; }
}

.fb-page { width:90%; }

#parrainage_1and1 { width:70%; margin:auto; margin-top: 20px; margin-bottom:20px; min-height:150px; display:flex; justify-content:center; border: 5px outset blue; border-radius: 0 0 10px 10px; box-shadow: 8px 8px 3px black; background: linear-gradient(0deg,#EEEEFF,darkblue); transition: transform 2s; }
#parrainage_1and1:hover { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
#parrainage_1and1 a { text-decoration: none; text-align: center; font-weight: bold; color:white; font-size:2em; }

#parrainage_titre { color:darkblue; }

#meteoConteneur { margin: auto; text-align: center; font-size: 1.4em; color: forestgreen; background: linear-gradient(0deg,#EEEEFF,darkblue); }

@media all and (max-device-width: 980px) , all and (max-width: 1280px)  
{
#menu { display:block; width:auto; margin:10px 10px 10px 10px; }
#menu h1 { display:none; }
#menu ul { min-width:620px; margin:20px;  }
#menu ul li { display:inline-block; vertical-align:top; height:auto; width:300px; }
#menu ul li a { font-size:4em; }
#menu ul li:hover ul { display:block; background:none; width:150px; left:0px;  margin-bottom:0px; top:10px;}
#menu ul li:hover ul li { display:block; margin-left:0px; width: 300px; }
    
#parrainage_1and1 { display:none; }
}

.heure a
{
text-decoration:none;
}

.w3c_valid { text-align:center;}
.w3c_valid img { display:inline-block; }

.heure
{
font-size: 1.4em;
color:green;
margin:10px;
text-align:center;
}

/*----- Fin menu du site -----*/


/****** ELement commun ******/

#bloc_page 
{
display:inline-block;
width:75%;
font-family: monotype corsiva, harlow solid italic, serif;
min-height: 1000px;
margin: 30px 0px 30px 10px;
background: /*RGBa(91,169,202,0.6)*/ /* url("images/bg_section.jpg") */ rgb(15,15,15);
border: inset 1px RGBa(91,169,202,0.3);
border-radius: 8px 8px 0 0;
}

#bloc_page h1, aside h1 , header nav h1, nav h1
{
font-weight:normal;
font-size:2.5em;
text-transform:uppercase;
text-align:center;
font-family: monotype corsiva, DayRomanRegular, serif;
color:RGB(30,150,40);
clear:both;
}

@media all and (max-device-width: 980px) , all and (max-width: 1280px)  
{
#bloc_page { display:block; width:auto; margin-right:10px; }	
}

section { text-indent:15px; padding:10px; margin-bottom:10px; font-size:1.7em; }
section p { color: RGB(63,91,107); text-align:justify; margin: 10px 10px; }

h2
{
color:RGB(75,150,255);
font-family: monotype corsiva, DayRomanRegular, serif;
text-decoration: underline;
}

/*@media all and (max-device-width: 980px) , all and (max-width: 1280px) */

h3
{
margin:25px;
color: RGB(75,150,255);/* #756975; */
font-size:1em;
font-style:italic;
}

strong
{
color: #38883e;
}

em
{
color:yellow;
}

dt 
{
font-weight: bold; color: rgb(200,50,150);
}
dd
{
margin:20px; color: #999999;
}

.float_right
{
float:right;
margin-left:20px;
margin-bottom:20px;
}

.float_left
{
float:left;
margin-right:20px;
margin-bottom:20px;
}

.clear_float
{
clear:both;
}

.current
{
border-bottom: 2px solid blue;
}

/*----- Fin élement commun -----*/

/* Partie Actualités de la page d'accueil */

.actu table { border-collapse:collapse; border-radius:10px;  background: rgb(25,45,65); font-size:1em; display:block; }
.titre_actu  p  { width:100%; margin-right: 40px; font-size: 0.60em; color:rgb(230,170,230); }

.com_actu { border-bottom: 3px solid blue; }
.com_actu a { color:white; font-size:0.75em; padding:0px 5px; text-decoration:none; }
.com_actu a:hover { background: RGB(75,150,255); }

/* PAGE DES COMMENTAIRES DES ACTUALITES */

thead { background-color: #3637A7; }
.tab_com  table { background: rgb(114,160,231); -webkit-filter: saturate(50%) brightness(0.75)/* hue-rotate(85deg)*/ ; border-collapse:collapse; font-size:0.75em;}
.tab_com td , th {border: 1px inset RGB(75,150,255);}
.tab_com table p { color:white; margin: 0px -5px;  text-align:center;}
.titre_actu { font-size:2em; }
.retour_actu { text-align:center;}
.retour_actu  img{ position:relative; top:8px;}

	
.form_commentaire { background: url("images/bg_livre_or1.jpg"); }

/*** Page accueil ***/

.boite_articles 
{
display:inline-block;
width:70%;
}

@media all and (max-device-width: 980px) , all and (max-width: 1280px)  
{
.boite_articles { width:100%;  }
}

.portrait h2
{
text-align:center;
text-decoration:none;
}
.portrait 
{
display:inline-block;
margin-left:1%;
width:20%;
padding:30px 5px;
border:inset 3px #dfca45;
border-radius: 70px;
font-size:1em;
vertical-align: top;
text-align:justify;
background: #dfca43;
overflow:auto;
color: #2a2461;
}

@media all and (max-device-width: 980px) , all and (max-width: 1280px)  
{
.portrait { display:block; width:auto; }
}

/*** Fin Page accueil ***/

#photo_auteur
{
text-align:center;
}

 


/****** Pied de page ******/ 

footer
{
position:relative;
min-height:150px;
background: url("images/barre.gif") repeat-x top;
}

.copyright
{
position: absolute;
bottom:0px;
right:0px;
color:red;
text-align: right;
}

#parrainage_1and1_footer { width:30%; margin:auto; margin-top: 20px; margin-bottom:20px; min-height:50px; display:flex; justify-content:center;  border: 5px outset blue; border-radius: 10px 10px 10px 10px; box-shadow: 8px 8px 3px black; background: linear-gradient(0deg,#EEEEFF,darkblue); }
#parrainage_1and1_footer:hover { transform: scale(1.1,1.1); }
#parrainage_1and1_footer a { text-decoration: none; text-align: center; font-weight: bold; color:white; font-size:1em; }

#parrainage_titre_footer { color:darkblue; }

/*----- Fin pied de page -----*/

/******** Livre d'or ********/

.form_livre_or label { color:RGB(75,150,255); vertical-align:top; margin-right:20px;}
.form_livre_or  { position:relative; margin:auto; width:80%; background: url("images/bg_livre_or.jpg"); box-shadow: 7px 7px 2px black;}
.form_livre_or input, .form_livre_or textarea { position: absolute; left:30%; }

.formulaire { margin:auto; width:90%; min-height:300px; margin-bottom:50px; }
.formulaire label { position:absolute; display:inline-block; width:19%; text-align:right; left:10%; }
.com_enregistre { text-align:center; margin-bottom:10px; color:red;}
#crypto { position:relative; left:24.5%; }
#com_afficher { position:relative; background: url("images/bg_livre_or.jpg") repeat-y; height:1050px; box-shadow: 7px 7px 2px black; margin:auto; margin-top:20px; margin-bottom:20px; padding-top:50px; padding-bottom:50px; width:80%; overflow-y: scroll; }
#com_afficher a { text-decoration: none; }
#com_afficher p { margin-left:25%; color:RGB(75,150,255); }
#com_afficher em { color:red; }
.page { display:block; /*position:absolute; left:50%; bottom:20px;*/ text-align:center; color:RGB(75,150,255); }
.img_livre_or { position:absolute; top:50px; left:0px; margin-left:20px; width:20%; }

#conteneurDefil {width:70%; margin:auto; margin-bottom:50px; overflow: hidden; border: inset #999900 8px; border-radius: 3px; box-shadow: 4px 3px 3px; background: linear-gradient(0deg,#999999,#222222); }
#textDefil { display:inline-block; position:relative; left:Opx; color:burlywood}

@media all and (max-device-width:980px), (max-width:1280px) {
    #conteneurDefil { }
}

/*----- Fin Livre d'or ------*/

/****** spécfique page sciences 1 ******/

.barre 	/* place une barre en travers d'un élement du texte */
{
text-decoration: line-through;
}
	/* Illustration en image avec sa légende -> méthode utilisée, propriété d'un tableau */
.illustration
{
 display:table;
 float:right;
 margin-top:0px;
 margin-right:100px;
 margin-left:20px;
 line-height:1em;
 width:250px;
}

.illustration p
{
margin:0px;
font-family: calibri, serif;
color:yellow;
margin-bottom:20px;
}

.tab_planete table{ margin:auto; border-collapse:collapse; border: 8px inset red; text-align:center; width:70%; }
.tab_planete table img { width:200px; margin:20px; margin-top:25%;}
.tab_planete table tbody td { background:black; border: 1px solid #756975; }
.tab_planete table thead, .tab_planete table tfoot { background: #756975; color:Blue;}

/*----- Fin page sciences 1 -----*/

/****** spécfique page sciences 2 ******/

.galaxie  { text-align:center; }
.galaxie table { border-collapse:collapse; }
.galaxie td { border:1px solid black; color: #B88; background: #111;}

.surligner { border-bottom: 1px dashed; }

.flottant 
{
width:30%;
margin:0 30px;
float:right;
}

.lien
{
text-decoration:none;
font-weight:bold;
color:white;
background: RGBa(154,45,200,0.2);
}

#zoom img:active
{
position:relative;
width:140%;
right:30%;
}
/*----- Fin page sciences 2 -----*/

/*----- Début page sciences: La Lune -----*/

.marge_sous_titre_lune
{
margin-left:30px;
}

.description h3
{
margin-left:10%;
}

.description img
{
border: dashed red 1px;
position:relative;
bottom:17px;
}
.gallerie_photo
{
background:grey;
position: relative;
left:30%;
border: inset 3px grey;
border-radius: 10px;
padding-right:10px;
height:125px;
width:30%;
overflow-x:scroll;
overflow-y:hidden;
}

.gallerie_photo p
{
width:620px;
}

.gallerie_photo img
{
border:none;
top:2px;
float:left;
margin-left:10px;
height:80px;
}

/*----- Fin page sciences: La Lune -----*/

/*----- Début page sciences: Les éclipses -----*/
.img_eclipse { margin:auto; border-collapse:collapse; caption-side:bottom; color:yellow; }
.img_eclipse tr td  { text-indent:0; line-height:0; border: 3px inset yellow; }
.img_eclipse caption { font-size: 0.75em; }

.illu_eclipse { float:right; margin-left:30px; }


/* Fin pages éclipses */

/*----- Spécifique Culture 1 -----*/

.quest_reponse p
{
text-align:justify;
margin: 10px 10px;
text-indent:15px;
padding:10px;
margin-bottom:10px;
font-size:1.7em;
}

.reponse 
{
color: rgb(200,156,226);
display:none;
}


/*----- Fin Culture 1 -----*/

/*----- Spécifique Culture nombre -----*/

#img_cheque { text-align:center; float:left; position:relative; top:10px; }
.cult_nombre table { margin-left:15%;  border-collapse:collapse; border-radius:10px; box-shadow: 2px 2px 5px rgb(60,60,250); background: rgb(60,60,250); }
.cult_nombre td , th { padding:0 10px 0 10px; border:1px solid blue;  border-left: none; border-right: none; text-align: center; }
.cult_nombre th { border-top: none; border-left: none; border-right: none; }
.cult_nombre tr:last-child td { border-bottom: none; border-left: none; border-right: none; }
.cult_nombre tr:last-child td:first-child { border-right: solid blue; }
.cult_nombre td:first-child , th:first-child { border-right: solid blue; }


/*----- Fin Culture nombre -----*/

/****** spécfique page humour 1 ******/

.bouton_retour
{
display:inline-block;
vertical-align:top;
padding:20px;
height:30px;
}

	/* Tableau de citation */

.tab_citation { text-align:center; }

.tab_citation caption
{
font-size:2em;
text-align:left;
font-family: BallparkWeiner, Serif;
color:Yellow;
}

.tab_citation table
{
display:inline-block;
margin-bottom:50px;
max-width:85%;
border-collapse: collapse;
border: 8px inset black;
}

.tab_citation table td
{
margin:0px;
text-align:center;
vertical-align:top;
width:400px;
color:#BBBBBB;
font: 18px bold;
border: 1px solid #756975;
}

	/* menu alphabétique */

.ancre_alphabetique
{
width:95%;
text-align:center;
overflow: auto;
letter-spacing:1em;
margin:auto;
}
.ancre_alphabetique  p
{
display:inline-block;
font-size:39px;
text-transform:uppercase;
font-family:BallparkWeiner, Serif;
}

.ancre_alphabetique a
{
text-decoration:none;
color:yellow;
}

/*----- Fin page humour 1 -----*/

/****** spécfique page BLAGUE ******/

.accueil_blague { text-indent:0;}
.accueil_blague p { display: inline-block; height:60px; width:47%; border: 3px solid black; background-image: url("images/bg_menu_blague.gif"); margin-left:4px; margin-right:4px; text-align:center; line-height:60px; }
.accueil_blague a , .accueil_blague a:visited  { display:block; text-decoration:none; color:purple; }
.accueil_blague a:hover { background-color:blue; }
.bloc_blague { width:70%; min-width:700px; margin:auto; color: #999999; margin-bottom:40px; }
.bloc_blague table { margin:auto; margin-top: 100px; margin-bottom: 50px; border-collapse: collapse; }
.bloc_blague table td { text-align:center; width:100px; border: 1px solid black; }
.bloc_blague table td:hover { background-color:blue; }
.bloc_blague table a { display:block; color:RGB(75,150,255); text-decoration:none; margin:20px;  font-size:1.1em; }
.bloc_blague table a:visited { color:RGB(75,150,255);}
.bloc_blague .sel { background: yellow; }


/*----- Fin page BLAGUE -----*/

/****** Partie CSS pour la page CONTACT.PHP ******/

.formulaire_contact
{
text-indent:0px;
width:37.2%;
margin:auto;
color: #999999;
}

input
{
margin-bottom:5px;
}

/*----- fin CSS de la page CONTACT.PHP -----*/

/** PAGE POUR L'INSERTION DE NOUVELLE ACTU "news.php" **/

.news
{
width:100%;
margin:auto;
}

.form_news textarea
{
width:70%;
}

.option_txt_actu 
{
display: inline-block;
width:25%;
vertical-align:top;
border: 1px solid black;
}



/** FIN PAGE news.php **/

/****** DIVERS ******/ 

.smiley
{
width:30px;
}

.en_travaux
{
text-align:center;
position:relative;
top:200px;
}

ul
{
color: rgb(89,120,20);
}

form label { color:RGB(75,150,255); margin-right:20px;}
form fieldset { color:RGB(75,150,255) }


/* Formulaire d'inscritpion */
.form_inscription fieldset { background: url("images/inscription.jpg") no-repeat top 10px right 20px, white; position:relative; color: rgb(10,20,30); border:3px outset rgb(217,159,74);   width:60%;  margin:auto;}
.form_inscription p { text-align:left;}
.form_inscription legend { background: rgb(217,159,74); border-radius:5px 5px 0 0; box-shadow:2px -10px 25px; }
.form_inscription input { position:absolute; margin-bottom:15px; left:25%; border: 1px solid blue;}
.form_inscription label { display:inline-block; position:relative; bottom:7px; width:20%; text-align:right; font-size: large; margin-bottom:10px; }
.form_inscription a:visited { color:blue; }

.asterisque { position:absolute; left:23%; width:11px;}
.petit_texte { font-size: medium; }
.message_err { text-align:left; width: 100%; position:relative; top:20px; color:red; }
.message_accueil { text-align:left; width: 100%; position:relative; top:20px; color:green; }

.message_validation {  position:relative; top:150px; color:red; width:68%; }

/* Partie pour l'authentification du visiteur */

.authentification { position:relative;  width:25%; min-width: 350px;  float:right; height:100px;}
.authentification ul { width:100%;  position:absolute; right:25px; background: #111; border-radius:5px; top:0px; padding:0 0 0 0px;}
.authentification ul li{ display:inline-block; font-size:1.1em; list-style: none;}
.authentification ul li:hover {background: #252525; border-radius:5px;}
.authentification ul li ul{ display:none;} 
.authentification ul li:hover ul {display:block; min-width:600px; background:none; position:absolute ; padding-top:10px; left:-90px; top:17px; }
.authentification ul li:hover ul li{background: #111; border-radius:5px; padding:0px;}
.authentification ul li ul li form { width:100%; margin:5px 0 0 0; padding-left:5px; font-size:0.5em;}
.authentification ul li label , .authentification ul li input { margin-right:5px; font-size:1.5em;}
.authentification a { padding-right: 25px; padding-left: 25px;  text-decoration:none; color:yellow;}
.triangle{ position:absolute; top:3px; left:150px;}

/* Message de bienvenue au visiteur */

.bienvenue { width: 20%; position:relative; float:right; left:35px; text-align:left; color: #CDCDCD; font-family: BallparkWeiner, serif; font-size: 1.5em; }
.bienvenue a { text-decoration:none; color:yellow; font-size:0.5em; padding:3px; font-family: serif;}

/*----- Fin DIVERS -----*/

/******		Partie Exercice		*******/
.tab_jeux { margin:auto; border-collapse: collapse; border: 1px solid black; }
.tab_jeux  td{ border:1px solid black; }

.minichat { margin:auto; text-align:center; }
.cadre_du_chat {  margin:auto; background:grey; width:40%; border: 1px solid black; }
.affichage_chat { background: white; text-align:left; margin:auto; margin-top:3%; margin-bottom:3%; width:90%; border:1px dotted green; }
/*------		Fin d'exercice		------*/


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 28, 2012 */

@font-face {
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark/ballpark-webfont.eot');
    src: url('polices/ballpark/ballpark-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark/ballpark-webfont.woff') format('woff'),
         url('polices/ballpark/ballpark-webfont.ttf') format('truetype'),
         url('polices/ballpark/ballpark-webfont.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DayRomanRegular';
    src: url('polices/dayrom/dayrom-webfont.eot');
    src: url('polices/dayrom/dayrom-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom/dayrom-webfont.woff') format('woff'),
         url('polices/dayrom/dayrom-webfont.ttf') format('truetype'),
         url('polices/dayrom/dayrom-webfont.svg#DayRomanRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}