/* Feuille de style rattachée à l'exposition virtuelle "Le Verrier : les coulisses de la découverte de Neptune"
*
* Réalisée entre mai et août 2011 par Cécile Cabantous, stagiaire de l'Ecole Nationale des Chartes
* 
* Le design a été testé sur Mozilla Firefox, Safari, Google Chrome, Chromium, et Internet Explorer version 8
* Editeur de texte utilisé: oXygen 12
* Sites de références utilisés: W3CSchool, le Site du Zero, Alsacreations, CSSBeauty
* Ouvrages de référence: le chapitre CSS de "XML en concentré" (éd. O'Reilly), "CSS par l'exemple" (éd. O'Reilly) et "Réussir son site web avec XHTML et CSS" de Mathieu Nebra
*/

/* Charte graphique*/

body {
    font-family : verdana, helvetica, arial, sans-serif;
    width : 100%;
    height : 100%;
    margin : 0;
    padding : 0;
    line-height:1.1em;
}
#charte-graphique {
    width : 1100px;
    height : 630px;
    margin : 20px auto;
    min-width : 600px;
    position : relative;
}
/* Couleurs */
body {
    background : #4B0E3B;
}
#charte-graphique {
    background-color : #FDFDFE;
}

#contenu {
    background-color : #FFFFFF;
    color:#333;
}

#ariane,
#ariane a,
#ariane li a {
    color : #811453;
}
#ariane a:hover,
.colonne4 a:hover{
    text-decoration:underline;
}
p a,
td a,
h6,
dt,
.ddp,
dfn,
#menu ul li a:hover,
#menu ul li a.en-cours,
#menu ul li a.en-cours:hover {
    color : #811453;
}
/* Apparence générale des pages */
#titre {
    display : block;
    float : left;
    height : 70px;
    width : 300px;
    margin : 10px 0 0 10px /*233px*/;
    overflow : hidden;
    line-height : 1000px;
    outline : 0;
}

#titre img {
    float : left;
}
#ariane {
    width : 1082px;
    height : 20px;
    margin : 5px 10px 0 10px;
    font-size : 11px;
    padding : 10px 0 0 0;
}

#contenu,
#contenuIntro {
    width : 1080px;
    height : 460px;
    margin : 0 10px 5px 10px;
    border : double;
    border-width : 0.1em;
    border-color : #EFEFEF;
}
#flecheg {
    width : 15px;
    float : left;
    margin : 175px 0 0 -20px;
}
#fleched {
    width : 15px;
    float : right;
    margin : -290px -20px 0 5px;
}
a,
img,
a img {
    text-decoration : none;
    border : none;
}
/* Pages de thèmes */

#contenuIntro p {
    width : 460px;
    float : left;
    margin : 60px 0 0 130px;
    padding : 15px;
    background-color : white;
}
#sous-titre {
    float : left;
    margin : 17px 0 15px 0; /*
    border-top : dotted;
    border-bottom : dotted;
    border-width : thin;*/
}
#sous-titre-1 {
    width : 460px;
    margin : 20px 0 20px 0;
    padding : 0; /*
    border-top : dotted;
    border-bottom : dotted;
    border-width : thin;*/
    /*background-color : #EFEFEF;*/
}
#sous-titre-2 {
    margin : 0;
    padding : 0; /*
    border-top : dotted;
    border-bottom : dotted;
    border-width : thin;*/
}
.sous-titre-2 p {
    margin : 0 0 0 80px;
    padding : 0;
    font-size : 17px;
}
/* Bandeau fil d'Ariane et pied-de-page */
#pied-de-page {
    width : 450px;
    height : 20px;
    margin : 10px 0 0 325px;
    padding : 0;
    color : gray;
}
.pages {
    float : right;
    margin : 2px 0 0 0;
    padding : 0;
}
.pages li,
.pdp-instit li {
    width : 25px;
    font-size : 10px;
    display : block;
    float : left;
}
.pages li a,
.pdp-instit li a {
    text-decoration : none;
    color : gray;
}
.pdp-instit {
    width : 500px;
    margin : 0 0 0 0;
}
.pdp-instit li {
    width : 150px;
}

/* Menu */
#menu {
    float : right;
    height : 35px;
    width : 670px;
    margin : 40px 20px 0 0;
    padding : 0 0 0 0;
    font-size : 13px;
    font-weight : bold;
    text-transform : uppercase;
    font-family : Georgia, "Times New Roman", Times, sans-serif;
}
#menu ul {
    margin : 0;
    padding : 0;
    list-style-type : none;
    width : auto;
    float : left;
}
#menu ul li {
    display : block;
    float : left;
    margin : 0;
}
#menu ul li a {
    display : block;
    float : left;
    color : black;
    text-decoration : none;
    padding : 5px 0 0 15px;
    height : 30px;
    line-height : 30px;
}
#menu ul li a span {
    display : block;
    float : left;
    padding : 0 15px 0 0;
    height : 31px;
    width : auto;
}
#menu ul li a:hover span {
    display : block;
    cursor : pointer;
}
#menu ul li a.en-cours,
#menu ul li a.en-cours:hover {
    font-size : 14px;
    font-weight : bolder;
    border : dotted;
    border-width : thin;
    background : transparent;
}
#menu ul li a.en-cours span {
    background : transparent;
    height : 43px;
}
/* Textes */


h4 {
    font-variant : small-caps;
    font-size : larger;
}
h3 {
    font-family : roman, 'times new roman', times, serif;
    display : block;
    text-align : center;
    margin : 0 0 0 50px;
    font-size : x-large;
}
h1,
h2,
h5 {
    display : none;
}
h6 {
    font-size : 11px;
    margin : 0 0 0 3px;
    padding : 0 0 0 0;
    text-decoration : underline;
}
p {
    font-size : 13px;
    width : 80%;
    margin : 20px 0 0 10%;
    float : left;
    text-indent : 20px;
    text-align : justify;
}
sup{
    font-size:0.6em;
}


/* Citations */

blockquote {
    color : gray;
    display : inline;
}
blockquote p {
    background-image : url(guillemet.png);
    background-position : left;
    background-repeat : no-repeat;
    font-size : 0.9em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    margin : 0 0 0 30px;
    padding : 15px;
    width : 430px;
}
#verticalTable tr td blockquote {
    margin : 0;
    padding : 0;
}
q:before {
    content : "« ";
}
q:after {
    content : " »";
}
.ref-biblio {
    display : inline;
    color : gray;
    font-size : 0.8em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    margin : 0;
    padding : 0;
    text-align : right;
}
.legende,
.legende1{
    color : gray;
    font-size : 0.7em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    text-align : center;
}
.legende2 {
    width : 200px;
    margin: 1px;
    color : gray;
    font-size : 0.7em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    text-align : left;
}
.legende3{
    width : 200px;
    margin : 0;
    padding: 0 0 0 80px;
    color : gray;
    font-size : 0.75em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    text-align : left;
    text-indent:0em;
}
.legende4{
    margin : 0;
    padding: 0 0 0 70px;
    color : gray;
    font-size : 0.75em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    text-align : center;
}
.legende5{
    margin : 0;
    padding: 0 0 0 10px;
    color : gray;
    font-size : 0.75em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    text-align : center;
}

/* Paragraphes */
.colonne {
    width : 400px;
    margin : 25px 30px 0 55px;
    text-indent : 20px;
}
.colonne2 {
    width : 530px;
    float : left;
    margin : 30px 10px 0 15px;
}
.colonne2b{
    width : 530px;
    float : left;
    margin : 0;
}
.colonne3 {
    width : 340px;
    margin : 5px 0 5px 45px;
    padding : 0;
}
.colonne3b {
    width : 370px;
    margin : 0;
    padding : 5px 0 5px 10px;
}
.colonne4 {
    width : 640px;
    margin : 15px 0 0 45px;
    padding : 0;
}
.colonne4b {
    width : 560px;
    margin : 20px 0 0 90px;
    padding : 0;
}
.colonne5 {
    display : block;
    width : 280px;
    margin : 0;
    padding : 5px;
}
.colonne5b {
    width : 280px;
    margin : 0;
    padding : 5px;
}
.colonne6 {
    width : 660px;
    margin : 5px 0 0 30px;
    padding : 1px;
}
.colonne7 {
    width : 390px;
    margin : 0 0 0 0;
    padding : 0;
}
.colonne7b{
    width:480px;
    margin:0;
    padding:10px 0 0 25px;
}
.colonne8 {
    width : 620px;
    margin : 10px 0 0 30px;
    padding : 0;
}
.colonne9 {
    width : 300px;
    margin : 15px;
    padding : 0;
}
.colonne9b {
    width : 390px;
    margin : 15px;
    padding : 0;
}
.colonne10 {
    width : 1000px;
    margin : 0;
    padding : 5px 0 0 15px;
}
.legende {
    width : 235px;
    margin : 0;
    padding : 20px;
}
.legende1{
    width : 235px;
    margin : 0;
    padding : 5px 20px 0 0;
}

.colonne-legende p {
    width : 300px;
    padding:2px 10px 10px 10px;
    color : gray;
    font-size : 0.8em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    text-align : left;
    text-indent : 0;
}

.liste {
    width : 500px;
    text-decoration : none;
    font-size : 0.8em;
    margin : 2px 30px 0 60px;
    text-indent : 10px;
}
/* Mise en page des images */

#leverrier,
.leverrier {
   float : right;
    margin-right : 25px;
    padding : 2px 0 0 0;
}


#verticalTable,
.verticalTable {
    float : right;
    margin : 0;
    padding : 2px 0 0 0;
}
#verticalTableLeft {
    float : left;
    margin : 0;
    padding : 0;

}
#horizontalTable {
    margin : 2px 0 0 0;
    padding : 0 0 0 30px;
}
#horizontalTable2 {
	width : 650px;
    margin : 2px 0 0 0;
    padding : 0 0 0 30px;
}
.cellule {
    margin : 0;
    padding : 1px;
}
.cellule2 {
    margin : 0 0 0 0;
    padding : 20px 0 0 70px;
}
.cellule3 {
    margin : 0;
    padding : 10px 0 0 50px;
}
.cellule4 {
    margin : 0;
    padding : 10px 0 0 40px;
}

/* Listes d'items */
dl {
    display : inline;

    font-size : 0.9em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;

}
dt,
.ddp {
    font-weight : bolder;
    margin : 5px 5px 0 5px;
    padding : 0 5px 0 5px;
}
dd {
    text-align : justify;
}
#pds ul li a{
    font-size : 0.9em;
    font-family : Georgia, Times, "Times New Roman", serif;
    font-style : normal;
    color:gray;
}
#pds ul li a:hover{
    color:black;
}

/* Traitement des images*/
#gravure-nept {
    height : 460px;
    margin : 0 0 0 120px;
}
#img-gauche {
    float : left;
    height : 459px;
    margin : 0;
    padding : 0;
    border : none;
}
#img-gauche-montsouris {
    float : left;
    height : 150px;
    margin : 0;
    padding : 0;
    border : none;
}
.img-gauche2{
    float : left;
    margin : 0;
    padding : 0;
    border : none;
}
#chromo2, 
#caric {
    margin : 0 0 0 -45px;
    border : none;
    padding : 0;
}
.img-cell {
    margin : 0 0 0 50px;
}
#interp {
    margin : 0 0 0 -80px;
}
#img-droite {
    height : 460px;
    margin : 0 0 0 75px;
    padding : 0;
    border : none;
}
#img-droite2,
.img-droite2{
    float : right;
    margin : 0;
    padding : 0;
    border : none;
}
.img-dep {
    margin : 0 0 0 -30px;
}
#mlaplace {
    margin : 0 0 0 -85px;
}
#gravObs {
    height : 150px;
    margin : 20px 0 5px 130px;
}
#logoobs{
    float:right;
    height:50px;
    margin:-23px 0 0 0;
}
a.pers{
color:#333;
font-size : 13px;
}
a.pers:hover{
color:#333;
font-size : 13px;
}