/*
    Document   : design_tft_fr_accueil
    Created on : 14 mai 2011, 12:08:03
    Author     : Nelth
    Description:
        Graphisme du site du Trône de Glace.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/* Réinitialisation */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: 0; }

/* Communs */
.cache { display: none; }
em { font-style: italic; }
strong { font-weight: bold; }
.center { text-align: center; }

/* Liens */
    a, a:visited { color: #bccbf5; text-decoration: none; }
    a:hover, a:visited:hover { color: white; }
    a:focus, a:active { color: #bccbf5; text-decoration: underline; }
    .lien_bloc { display: block; width: 100%; height: 100%; }

    .common { color: #bccbf5; font-weight: bold; }
    .common:hover { color: white; }
    .common:focus, .common:active, .common:visited { color: #bccbf5; text-decoration: none; }
    .common:visited:hover { color: white; text-decoration: none; }

/* Coeur du graphisme */
html { height: 100%; }
body {
    height : 100%;
    background-color: black;
    background-image: url("../../design/accueil/fond.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    color: white;
    font-family: Georgia, Arial; }

#hauteur_page { min-height: 100%; position: relative; }
#hauteur_contenu_page { min-height: 100% ; position: relative; padding-bottom: 353px; }

#cadre_fond { width: 950px; height: 970px; margin: auto; background-image: url("../design/accueil/cadre_fond.jpg"); background-repeat: no-repeat; }

#header { width: 950px; height: 53px; margin: auto; }
    #menu_langues { display: block; float: left; margin: 0px; padding: 0px; color: #d3edfd; font-family: Georgia, Arial; font-size: 0.7em; font-weight: bold; text-align: left; }
    #menu_langues li { display: block; float: left; margin: 0px; margin-left: 2px; margin-right: 2px; }
            #fr, #fr:focus, #fr:visited, #fr:hover { height: 23px; width: 31px; background-repeat: no-repeat; background-image: url("../../design/sprite_langue.png"); background-position: center right; }
            #en, #en:focus, #en:visited { height: 23px; width: 31px; background-repeat: no-repeat; background-image: url("../../design/sprite_langue.png"); background-position: top left; }
            #en:hover { background-position: center left; }
            #fr:active { background-position: bottom right; }
            #en:active { background-position: bottom left; }
    #menu_header { margin: 0px; padding: 2px; padding-right: 90px; color: white; font-family: Georgia, Arial; font-size: 0.7em; text-align: right; }

#bloc_menu { clear: both; width: 950px; height: 51px; margin: auto; padding: 0px; }
#menu { display: block; width: 950px; margin: 0px; padding: 0px; }
#menu li { float: left; display: block; height: 51px; background-image: url("../design/accueil/sprite_menu.jpg"); }
    #menu_bouton_1_accueil, #menu_bouton_1_accueil:visited { margin-left: 47px; width: 97px; background-position: 0px -51px;  background-repeat: no-repeat; }
        #menu_bouton_1_accueil:hover, #menu_bouton_1_accueil:focus, #menu_bouton_1_accueil:active { background-position: 0px -51px; }
    #menu_bouton_2_histoire, #menu_bouton_2_histoire:visited { width: 107px; background-position: -97px 0px;  background-repeat: no-repeat; }
        #menu_bouton_2_histoire:hover, #menu_bouton_2_histoire:focus, #menu_bouton_2_histoire:active { background-position: -97px -51px; }
    #menu_bouton_3_avancement, #menu_bouton_3_avancement:visited { width: 141px; background-position: -204px 0px;  background-repeat: no-repeat; }
        #menu_bouton_3_avancement:hover, #menu_bouton_3_avancement:focus, #menu_bouton_3_avancement:active { background-position: -204px -51px; }
    #menu_bouton_4_images, #menu_bouton_4_images:visited { width: 92px; background-position: -345px 0px;  background-repeat: no-repeat; }
        #menu_bouton_4_images:hover, #menu_bouton_4_images:focus, #menu_bouton_4_images:active { background-position: -345px -51px; }
    #menu_bouton_5_medias, #menu_bouton_5_medias:visited { width: 92px; background-position: -437px 0px;  background-repeat: no-repeat; }
        #menu_bouton_5_medias:hover, #menu_bouton_5_medias:focus, #menu_bouton_5_medias:active { background-position: -437px -51px; }
    #menu_bouton_6_faq, #menu_bouton_6_faq:visited { width: 88px; background-position: -529px 0px;  background-repeat: no-repeat; }
        #menu_bouton_6_faq:hover, #menu_bouton_6_faq:focus, #menu_bouton_6_faq:active { background-position: -529px -51px; }
    #menu_bouton_7_tutoriaux, #menu_bouton_7_tutoriaux:visited { width: 119px; background-position: -617px 0px;  background-repeat: no-repeat; }
        #menu_bouton_7_tutoriaux:hover, #menu_bouton_7_tutoriaux:focus, #menu_bouton_7_tutoriaux:active { background-position: -617px -51px; }
    #menu_bouton_8_livreor, #menu_bouton_8_livreor:visited { margin-right: 46px; width: 121px; background-position: -736px 0px;  background-repeat: no-repeat; }
        #menu_bouton_8_livreor:hover, #menu_bouton_8_livreor:focus, #menu_bouton_8_livreor:active { background-position: -736px -51px; }

#footer { width: 950px; height: 353px; font-size: 0.7em; text-align: center; background-image: url("../../design/footer.jpg"); background-repeat: no-repeat; position: absolute; bottom: 0px; left: 50%; margin-left: -475px; }
    #texte_footer { padding-top: 0px; }
    #footer p { margin-top : 5px; }
    #validation { width: 200px; margin-top: 67px; margin-left: 356px; }
        #validation p {float: left; width: 100px; height: 31px;}
    #copyright, .statistiques_page { clear: both; color: #8d8d8d; font-size: 0.9em; padding-top: 20px; }
    #cadre_don { clear: both; width: 169px; height: 93px; margin: auto; background-image: url("../../design/cadre_don.jpg"); background-position: top left; background-repeat: no-repeat; }
        #bouton_don { clear: both; width: 135px; height: 35px; background-image: url("../design/sprite_don.jpg"); background-position: top left; background-repeat: no-repeat; position: relative; left: 11px; top: 47px; }
            #bouton_don:hover, #bouton_don:visited:hover { background-position: center left; }
            #bouton_don:focus, #bouton_don:active { background-position: bottom left; }

#bloc_logo { float: left; width: 402px; height: 596px; margin: 0px; padding: 0px; }

#bloc_cadre { width: 548px; height: 606px; margin-left: 402px; }
    #haut_cadre { width: 548px; height: 83px; }
    #titre_cadre_presentation { width: 548px; height: 76px; }
    #texte_cadre_presentation { width: 548px; height: 306px; }
        #texte_cadre_presentation p { text-align: left; font-size: 0.9em; color: white; font-family: Georgia, Arial; padding: 5px; padding-top: 7px; padding-left: 15px; padding-right: 45px; margin-right: 95px; }
        #texte_cadre_presentation .signature { text-align: right; font-size: 0.9em; color: white; font-family: Georgia, Arial; padding: 5px; padding-top: 2px; padding-left: 15px; padding-right: 75px; }
    #haut_photos { width: 548px; height: 26px; }
    #miniatures_photos { width: 548px; height: 115px; margin: 0px; padding: 0px; }
        #menu_photos { display: block; width: 453px; margin: 0px; padding: 0px; }
        #menu_photos li { float: left; display: block; height: 115px; }
            #photo_1, #photo_1:visited { width: 153px; background-image: url("../../design/accueil/sprite_photo_1.jpg"); background-position: top left;  background-repeat: no-repeat; }
                #photo_1:hover, #photo_1:focus, #photo_1:active { background-position: bottom left; }
            #photo_2, #photo_2:visited { width: 148px; background-image: url("../../design/accueil/sprite_photo_2.jpg"); background-position: top left;  background-repeat: no-repeat; }
                #photo_2:hover, #photo_2:focus, #photo_2:active { background-position: bottom left; }
            #photo_3, #photo_3:visited { width: 152px; background-image: url("../../design/accueil/sprite_photo_3.jpg"); background-position: top left;  background-repeat: no-repeat; }
                #photo_3:hover, #photo_3:focus, #photo_3:active { background-position: bottom left; }