body
{
top:30px;
font-family: Gill, Helvetica, sans-serif;
font-size:15px;
background: #6495ED; 
background: #C70034; 
position:relative;
_background-image: url("imagelaterale.jpeg");
}

flux
{
font-family: Gill, Helvetica, sans-serif;
font-size:0px;
margin:0px 0px;
top:300px;
left:450px;
width:30px;
height:30px;
position:absolute;
background : #FF5733;
}

#global
{
font-family: Gill, Helvetica, sans-serif;
width:970px;
height:680px;
margin:50px auto;
background: #6495ED ;
background: #C70039; 
position:relative;
border: 5px solid #FFC300;
_background-image: url("imagelaterale.jpeg");
}
#sousglobal
{
font-family: Gill, Helvetica, sans-serif;
}
#logo
{
font-family: Gill, Helvetica, sans-serif;
top:5px;
margin:10px 10px;
width:200px;
height:200px;
position:relative;
border: 0px solid red;
}




#Nlogo
{
font-family: Gill, Helvetica, sans-serif;
top:5px;
left:5px;
margin:0px 0px;
width:200px;
height:200px;
position:relative;
background:transparent;
}


#titre
{
font-family: Gill, Helvetica, sans-serif;
margin:2px 2px;
top:-10px;
left:240px;
width:650px;
height:140px;
position:absolute;
text-align:center;

}
#horloge
{
font-family: Gill, Helvetica, sans-serif;
top:80px;
left:225px;
width:50px;
height:50px;
position:absolute;
background:;
}


#video1
{
font-family: Gill, Helvetica, sans-serif;
top:85px;
left:380px;
width:50px;
height:50px;
position:absolute;
}

#video2
{
font-family: Gill, Helvetica, sans-serif;
top:85px;
left:580px;
width:50px;
height:50px;
position:absolute;
}

#video3
{
font-family: Gill, Helvetica, sans-serif;
top:85px;
left:780px;
width:50px;
height:50px;
position:absolute;
}



#compteurn
{
font-family: Gill, Helvetica, sans-serif;
margin:10px 10px;
top:390px;
width:200px;
height:40px;
position:absolute;
border: 5px solid #FFC300;
background:#FF5733;
color:#22427c;
font-size:15px;
}

#validator
{
font-family: Gill, Helvetica, sans-serif;
font-size:0px;
margin:0px 0px;
top:600px;
left:250px;
width:80px;
height:30px;
position:absolute;
}

#HTML5
{
font-family: Gill, Helvetica, sans-serif;
font-size:0px;
margin:0px 0px;
top:600px;
left:350px;
width:65px;
height:75px;
position:absolute;
border: 5px solid #FFC300;
}



#meteo
{
font-family: Gill, Helvetica, sans-serif;
top:80px;
left:380px;
width:10px;
height:10px;
position:absolute;
}


#nasa
{
left:200px;
top:300px;

width:200px;
height:200px;
}

#videobis
{
left:200px;
top:300px;

width:200px;
height:200px;
}


#menugauche
{
font-family: Gill, Helvetica, sans-serif;

margin:10px 10px;
padding:0px 0px;
top:220px;
left:0px;
width:200px;
height:150px;
position:absolute;
border: 5px solid #FFC300;
background:#FF5733;
}
#contenuhaut
{
font-family: Gill, Helvetica, sans-serif;
margin:0px 0px;
padding:0px 0px;
left:230px;
top:230px;
width:720px;
height:190px;
position:absolute;
border: 5px solid #FFC300;
background:#FF5733;

}
#nasa
{
left:350px;
top:370px;
width:512px;
height:332px;
position:absolute;
}

#contenuint2013
{
font-family: Gill, Helvetica, sans-serif;
margin:0px 0px;
padding:0px 0px;
left:230px;
top:440px;
width:720px;
height:100px;
position:absolute;
border: 5px solid #FFC300;
background:#FF5733;
}

#contenubas
{
font-family: Gill, Helvetica, sans-serif;
margin:0px 0px;
padding:0px 0px;
left:230px;
top:560px;
width:240px;
height:90px;
position:absolute;
border: 5px solid #FFC300;
background:#FF5733;
}
ul
{
font-family: Gill, Helvetica, sans-serif;
color:#FF5733;
list-style-type:square;
font-size:15px;
}
h1
{
font-family: Gill, Helvetica, sans-serif;
background-color:#FF5733;
color:#DAF7A6;
font-size:30px;
background: #FF5733;
}
h2
{
font-family: Gill, Helvetica, sans-serif;
background-color:#FF5733;
color:#DAF7A6;
font-size:25px;
text-align:center;
background: #FF5733;
  
}
h3
{
font-size:15px;
font-family: Gill, Helvetica, sans-serif;
color:#DAF7A6;
}
a
{
font-family: Gill, Helvetica, sans-serif;
text-decoration:none;
font-style:normal;
font-size:15px;
color:DAF7A6;
}
b
{

}
a:hover
{
font-family: Gill, Helvetica, sans-serif;
text-decoration:none;
font-style:italic;
color:white;
font-size:15px;

}



#globalcatext
{
font-family: Gill, Helvetica, sans-serif;
width:auto;
height:auto;
background-color:#6495ED;
position:absolute;
}
#logocatext
{
font-family: Gill, Helvetica, sans-serif;
margin:10px 10px;
width:50px;
height:50px;
position:absolute;
top:10px;
left:30px;
}
#retourcatext
{
font-family: Gill, Helvetica, sans-serif;
margin:10px 10px;
width:150px;
height:10px;
left:100px;
top:10px;
position:absolute;

}
#tableaucatext
{
font-family: Gill, Helvetica, sans-serif;
font-size:15px;
margin:10px 10px;
width:auto;
height:auto;
left:10px;
top:70px;
background-color:#C70039;
position:absolute;
}
table
{
font-family: Gill, Helvetica, sans-serif;
font-size:15px;
width:900px;
height:auto;
border-width:2px;
border-color:#9E9E9E;

}

caption
{
font-family: Gill, Helvetica, sans-serif;

color:white;
font-size:20px;
border-width:2px;
border-style:groove;
border-color:#048B9A;
}


td
{
font-family: Gill, Helvetica, sans-serif;
font-size:15px;
color:white;
border-width:2px;
border-style:groove;
border-color:#048B9A;
}

.blue {
 color:blue; 
 }
.red {
 color:red; 
 }
 
 
INPUT:hover
{
background-color: #0F056B;
 color:#FF0000;
} 
 
INPUT {
background-color: #666699;
 color: #ffffff; 
}


.Hdropdown_red_tab__menu {
font-weight:bold;
color:#111111;
}
.Hdropdown_red_tab__menu ul {
list-style-type:none; 
height:15px;
list-style:none;
margin:0;
padding:0;
}
.Hdropdown_red_tab__menu li {
list-style-type:none; 
float:left;
padding:0px 5px 0px 5px;
}
.Hdropdown_red_tab__menu li a {
color:#bbbbff;
display:block;
font-weight:bold;
line-height:15px;
padding:0px 15px;
text-align:center;
text-decoration:none;
}
.Hdropdown_red_tab__menu li a:hover {
color:#444466;
text-decoration:none;
}
.Hdropdown_red_tab__menu li ul {
background:#110000;
border-left:2px solid #434E54;
border-right:2px solid #434E54;
border-bottom:0px solid #434E54;
display:none;
height:auto;
position:absolute;
width:100px;
z-index:200;
}
.Hdropdown_red_tab__menu li:hover ul {
display:block;
}
.Hdropdown_red_tab__menu li li {
display:block;
float:none;
padding:0px;
width:100px; border-bottom:solid 2px #434E54;
}
.Hdropdown_red_tab__menu li ul a {
display:block;
font-size:12px;
font-style:normal;
padding:0px 12px 0px 15px; line-height:30px;
text-align:left;
}
.Hdropdown_red_tab__menu li ul a:hover {
background:#110000;
color:#8C8984;
}
.Hdropdown_red_tab__menu p {
clear:left;
}
.Hdropdown_red_tab__menu #current {
background:url(horloge_2012.gif) top left repeat-x;
color:#ffffff;
}






/* I'm using CSS to set the original width/height of the image */
img.resize{
	width:200px;
	height:200px;
	padding:2px;
	position:absolute;
	z-index:1;
}

/* Just a dummy filler to show that not all images have to succumb to the resize effect */
img.thumb{
	width:100px;
	height:67px;
	padding:2px;
	position:absolute;
	z-index:2;
}	

/* we give the p element some margin */
.text{
	margin-left:120px;
}



.diaporama
{
font-family: Gill, Helvetica, sans-serif;
font-size:0px;
margin:0px 0px;
top:455px;
left: -25px;
width:200px;
height:180px;
position: absolute;
}

.diaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
}

.diaporama ul{
    list-style-type:none;
	margin:0;
	padding:0;
	position:absolute;
}

.diaporama_controls{
	left: 80px;
	top:620px;
	
	margin:3px 0;
	padding:0px;
	clear:both;
	overflow:hidden;
	position:absolute;
}

.diaporama_controls .btns{
	float:right;
}

.diaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:inline-block;
	margin:0 3px;
}

.diaporama_controls .prev{
	background:url(fleches_diapo.png) no-repeat top right;
}

.diaporama_controls .next{
	background:url(fleches_diapo.png) no-repeat top left;
}

.diaporama_controls .pause{
	background:url(fleches_diapo.png) no-repeat bottom right;
}

.diaporama_controls .play{
	background:url(fleches_diapo.png) no-repeat bottom left;
}






.menuDeroulant
{
 width: 700px;
 list-style: none;
 margin: 0;
 padding: 0;
 border: 0;
 font-family: Gill, Helvetica, sans-serif;
}
.menuDeroulant td
{
font-family: Gill, Helvetica, sans-serif;
font-size:15px;
border-width:2px;
border-style:solid;
color:#FFC44F;
}	
.menuDeroulant td:hover
{
font-family: Gill, Helvetica, sans-serif;
font-size:15px;
border-width:5px;
border-style:solid;
color:#111111;
}	
	
.sousMenu.menuDeroulant td:hover
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}





.menuDeroulant.sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant.sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #0F056B; }
#menuDeroulant li a:active { background-color: #0F056B; }

#menuDeroulant.sousMenu li a:link,
#menuDeroulant.sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat;
}
#menuDeroulant.sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}			
#menuDeroulant.sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}	




CSS liste

#menu, #menu ul /* Liste */    
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
list-style-type: none;
        font-weight : bold; /* on met le texte en gras */
        font-family: Gill, Helvetica, sans-serif/* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
		text-align : center; /* on centre le texte qui se trouve dans la liste */

}
 
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 2px; /* aucune marge intérieure */
		margin : 2px; /* ni extérieure */
        background : #C70039; /* couleur de fond */       
       color : white; /*couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 150px; /* largeur */
}
 
#menu li /* Elements des listes */     
{
        float : left;
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{
        position: absolute; /* Position absolue */
        width: 130px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
 
#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li               
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul
{
        margin    : -30px 0 0 -165px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */     
}
 
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul               
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */   
{
        color: blue; /* On passe le texte en noir... */
        background: #DAF7A6; /* ... et au contraire, le fond en blanc */
		width : 150px;
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}




CSS liste

#menubis, #menubis ul /* Liste */    
{
        
		padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
		left : 0px;
}
 
#menubis /* Ensemble du menu */
{
list-style-type: none;
        font-weight : bold; /* on met le texte en gras */
       font-family: Gill, Helvetica, sans-serif; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 5px; /* hauteur du texte : 12 pixels */
		text-align : center; /* on centre le texte qui se trouve dans la liste */
		

}
 
#menubis a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 2px; /* aucune marge intérieure */
		margin : 2px; /* ni extérieure */
        background : #C70039; /* couleur de fond */       
        color : white;  /*couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 90px; /* largeur */
		
}
 
#menubis li /* Elements des listes */     
{
        float : left;
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
		
		}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menubis li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
#menubis li ul /* Sous-listes */
{
        position: absolute; /* Position absolue */
        width: 90px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
 
#menubis li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menubis li ul li               
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menubis li ul ul
{
        margin    : -32px 0 0 80px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */     
}
 
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menubis li ul ul               
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menubis a:hover /* Lorsque la souris passe sur un des liens */   
{
        color: blue; /* On passe le texte en noir... */
        background: #DAF7A6; /* ... et au contraire, le fond en blanc */
		width : 90px;
}
#menubis li:hover ul ul, #menubis li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
#menubis li:hover ul, #menubis li li:hover ul, #menubis li.sfhover ul, #menubis li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}







/* ================================
   ACCUEIL — THEME BLEU MODERNE
   Surcharge uniquement des couleurs
   (Aucune propriété de taille/position modifiée)
   ================================ */

/* Corps de la page */
body {
    background: #1e2a44 !important;
}

/* Conteneur principal */
#global {
    background: #24355c !important;
    border-color: #FFD700 !important;
}

/* Blocs principaux (remplacent les rouges d'origine) #3b4f7a*/
#menugauche,
#contenuhaut,
#contenuint2013,
#contenubas {
    background: #1e2a44 !important;
    border-color: #FFD700 !important;
}

/* Zones spécifiques */
#Nlogo {
    background: transparent !important;
}

/* Titres */
h1, h2 {
    background: #3b4f7a !important;
    color: #FFD700 !important;
}

h3 {
    color: #FFD700 !important;
}

/* Listes */
ul {
    color: #FFD700 !important;
}

/* Liens */
a {
    color: #FFD700 !important;
}

a:hover {
    color: #ffffff !important;
}

/* Compteur */
#compteurn {
    background: #3b4f7a !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
}

/* Inputs / boutons */
INPUT {
    background-color: #2f3f63 !important;
    color: #ffffff !important;
}

INPUT:hover {
    background-color: #1b2a4a !important;
    color: #FFD700 !important;
}

/* Tableaux et cellules */
table {
    border-color: #FFD700 !important;
}

td {
    border-color: #048B9A !important;
    color: #ffffff !important;
}

caption {
    border-color: #048B9A !important;
    color: #FFD700 !important;
}

/* Menus déroulants et barres */
#menu a,
#menubis a,
.Hdropdown_red_tab__menu li a,
.menuDeroulant td {
    background: #3b4f7a !important;
    color: #FFD700 !important;
}

#menu a:hover,
#menubis a:hover,
.Hdropdown_red_tab__menu li a:hover {
    background: #FFD700 !important;
    color: #1e2a44 !important;
}

/* Diaporama contrôles */
.diaporama_controls a {
    background-color: #3b4f7a !important;
}

.diaporama_controls a:hover {
    background-color: #FFD700 !important;
}

/* Classes utilitaires de couleur (si utilisées) */
.blue { color: #1e90ff !important; }
.red  { color: #ff4d4d !important; }

/* Petites zones spécifiques */
#globalcatext { background-color: #24355c !important; }
#tableaucatext { background-color: #2b3f63 !important; }