/*
    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/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; margin: auto; background-image: url("../../design/cadre_fond_navigation.jpg"); background-repeat: no-repeat; }

#image { width: 950px; margin: auto; }
    #image img { display: block; margin: auto; border: black solid 1px; margin-bottom: 10px; }

#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/sprite_menu.jpg"); }
    #menu_bouton_1_accueil, #menu_bouton_1_accueil:visited { margin-left: 47px; width: 97px; background-position: 0px 0px;  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 -51px;  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_titre { clear: both; width: 950px; margin: auto; height: 110px; }
    #titre_page { clear: both; width: 159px; height: 57px; margin-left: 400px; background-image: url("../design/galerie/titre.jpg"); background-repeat: no-repeat; }
    #sous_menu { clear: both; width: 373px; height: 23px; margin-left: 285px; }
        #sous_menu p { text-align: center; font-size: 0.7em; color: white; font-family: Georgia, Arial; padding: 2px; }

#bloc_galerie { clear: both; width: 886px; height: 109px; margin: auto; }
    #bloc_galerie p { text-align: center; }
    .cadre_miniature_grand { display: inline-block; width: 153px; height: 109px; margin: 2px; margin-bottom: 0px; background-image: url("../../design/galerie/cadre_miniature_grand.gif"); background-repeat: no-repeat; vertical-align: bottom; }
    .cadre_miniature_petit { display: inline-block; width: 120px; height: 85px; margin: 2px; margin-bottom: 0px; background-image: url("../../design/galerie/cadre_miniature_petit.gif"); background-repeat: no-repeat; vertical-align: bottom; }
    .cadre_miniature_vide { display: inline-block; width: 120px; height: 85px; margin: 2px; margin-bottom: 0px; vertical-align: bottom; }
    #bloc_galerie .miniature_grand { display: block; margin: 10px; margin-bottom: 0px; }
    #bloc_galerie .miniature_petit { display: block; margin: 8px; margin-bottom: 0px; }

.bloc_message { clear: both; width: 794px; margin: auto; padding-bottom: 10px; }
    .titre_message { width: 794px; height: 57px; background-image: url("../../design/livreor/haut_cadre_commentaire.gif"); background-repeat: no-repeat; }
    .ligne_haut { clear: both; width: 794px; height: 20px; position: relative; top: 15px; }
    .ligne_bas { clear: both; width: 794px; height: 20px; position: relative; top: 15px; }
        .titre_message h4 { float: left; width: 364px; height: 20px; font-size: 0.9em; color: white; font-family: Georgia, Arial; padding: 0px; text-align: center; }
        .titre_message h5 { float: left; width: 364px; height: 20px; font-size: 0.9em; color: white; font-family: Georgia, Arial; padding: 0px; text-align: center; }
    .bloc_message .lien_haut_page, .bloc_message .lien_haut_page:visited, .bloc_message .lien_haut_page:visited:hover { display: block; float: left; width: 20px; height: 20px; background-image: url("../../design/sprite_haut_page.gif"); background-repeat: no-repeat; padding: 0px; margin-left: 172px; }
        .bloc_message .lien_haut_page:hover { background-position: center left; }
        .bloc_message .lien_haut_page:active, .bloc_message .lien_haut_page:focus { background-position: bottom left; }
    .bloc_message .lien_bas_page, .bloc_message .lien_bas_page:visited, .bloc_message .lien_bas_page:visited:hover { display: block; float: left; width: 20px; height: 20px; background-image: url("../../design/sprite_bas_page.gif"); background-repeat: no-repeat; padding: 0px; margin-left: 172px; }
        .bloc_message .lien_bas_page:hover { background-position: center left; }
        .bloc_message .lien_bas_page:active, .bloc_message .lien_bas_page:focus { background-position: bottom left; }
    .corps_message { width: 794px; background-image: url("../../design/livreor/texture_cadre_commentaire.jpg"); background-repeat: repeat-y; }
        .corps_message p { font-size: 0.9em; text-align: left; color: white; font-family: Georgia, Arial; padding-bottom: 5px; padding-left: 20px; padding-right: 20px; }
    .bas_message { width: 794px; height: 14px; background-image: url("../../design/livreor/bas_cadre_commentaire.gif"); background-repeat: no-repeat; }

    .texte_navig_precedentx10 { display: block; clear: both; width: 200px; height: 20px; float: left; padding: 0px; margin-left: 15px; text-align: left; font-size: 0.8em; color: white; font-family: Georgia, Arial; position: relative; bottom: 5px; }
    .texte_navig_suivantx10 { display: block; width: 200px; height: 20px; float: right; padding: 0px; margin-right: 15px; text-align: right; font-size: 0.8em; color: white; font-family: Georgia, Arial; position: relative; bottom: 5px; }
    .texte_navig_precedent { display: block; clear: both; width: 200px; height: 20px; float: left; padding: 0px; margin-left: 15px; text-align: left; font-size: 0.8em; color: white; font-family: Georgia, Arial; position: relative; bottom: 5px; }
    .texte_navig_suivant { display: block; width: 200px; height: 20px; float: right; padding: 0px; margin-right: 15px; text-align: right; font-size: 0.8em; color: white; font-family: Georgia, Arial; position: relative; bottom: 5px; }

    .navig_precedentx10, .navig_precedentx10:visited, .navig_precedentx10:visited:hover { display: inline-block; width: 28px; height: 20px; background-image: url("../../design/sprite_super_gauche_droite.gif"); background-repeat: no-repeat; background-position: top left; padding: 0px; margin: 0px; margin-right: 2px; position: relative; top: 5px; }
        .navig_precedentx10:hover { background-position: center left; }
        .navig_precedentx10:active, .navig_precedentx10:focus { background-position: bottom left; }
    .navig_suivantx10, .navig_suivantx10:visited, .navig_suivantx10:visited:hover { display: inline-block; width: 28px; height: 20px; background-image: url("../../design/sprite_super_gauche_droite.gif"); background-repeat: no-repeat; background-position: top right; padding: 0px; margin: 0px; margin-left: 2px; position: relative; top: 5px; }
        .navig_suivantx10:hover { background-position: center right; }
        .navig_suivantx10:active, .navig_suivantx10:focus { background-position: bottom right; }
    .navig_precedent, .navig_precedent:visited, .navig_precedent:visited:hover { display: inline-block; width: 20px; height: 20px; background-image: url("../../design/sprite_gauche_droite.gif"); background-repeat: no-repeat; background-position: top left; padding: 0px; margin: 0px; margin-right: 2px; position: relative; top: 5px; }
        .navig_precedent:hover { background-position: center left; }
        .navig_precedent:active, .navig_precedent:focus { background-position: bottom left; }
    .navig_suivant, .navig_suivant:visited, .navig_suivant:visited:hover { display: inline-block; width: 20px; height: 20px; background-image: url("../../design/sprite_gauche_droite.gif"); background-repeat: no-repeat; background-position: top right; padding: 0px; margin: 0px;  margin-left: 2px; position: relative; top: 5px; }
        .navig_suivant:hover { background-position: center right; }
        .navig_suivant:active, .navig_suivant:focus { background-position: bottom right; }