/*
    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/
*/

/* Communs */
.cache { display: none; }
em { font-style: italic; }
strong { font-weight: bold; }
.center { text-align: center; }
.borders { border: 1px solid grey;  }

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

    .common, .common:visited, .common:focus, .common:active { color: black; font-weight: bold; text-decoration: none; }
    .common:hover, .common:visited:hover { color: grey; }

    #connexion_texte .common, #connexion_texte .common:visited, #connexion_texte .common:focus, #connexion_texte .common:active { color: grey; font-weight: normal; text-decoration: none; }
    #connexion_texte .common:hover, #connexion_texte .common:visited:hover { color: black; }

    .menu_texte { display: block; text-align: center; height: 18px; padding-top: 65px; color: #b10000; }
    .menu_texte, .menu_texte:visited { color: #b10000; font-weight: bold; text-decoration: none; }
    .menu_texte:hover, .menu_texte:visited:hover { color: black; font-weight: bold; text-decoration: none; }
    .menu_texte:focus, .menu_texte:active { color:black; text-decoration: none; }

    #menu_bouton_1_accueil_selected .menu_texte, #menu_bouton_1_accueil_selected .menu_texte:visited { color: black; font-weight: bold; text-decoration: none; }
    #menu_bouton_2_vielocale_selected .menu_texte, #menu_bouton_2_vielocale_selected .menu_texte:visited { color: black; font-weight: bold; text-decoration: none; }
    #menu_bouton_3_voyages_selected .menu_texte, #menu_bouton_3_voyages_selected .menu_texte:visited { color: black; font-weight: bold; text-decoration: none; }
    #menu_bouton_4_galerie_selected .menu_texte, #menu_bouton_4_galerie_selected .menu_texte:visited { color: black; font-weight: bold; text-decoration: none; }
    #menu_bouton_5_apropos_selected .menu_texte, #menu_bouton_5_apropos_selected .menu_texte:visited { color: black; font-weight: bold; text-decoration: none; }

/* Coeur du graphisme */
html { height: 100%; }
body {
    height : 100%;
    background-color: #949494;
    background-image: url("../design/texture_fond_site.jpg");
    background-position: top center;
    background-repeat: repeat-y;
    color: grey;
    font-family: Georgia, Arial; }

#hauteur_page { min-height: 100%; position: relative; background-image: url("../design/fond.jpg"); background-position: top center; background-repeat: no-repeat; }
#hauteur_contenu_page { min-height: 100% ; position: relative; padding-bottom: 185px; }

#cadre_fond { width: 952px; margin: auto; }

#header, header { width: 952px; height: 149px; margin: auto; margin-top: 0px; background-image: url("../design/bloc_haut.jpg"); font-family: Georgia, Arial; font-size: 0.7em; }
    #bloc_logo { float: left; width: 398px; height: 149px; margin: 0px; padding: 0px; background-image: url("../design/sprite_logo.jpg"); background-position: 0px 0px;  background-repeat: no-repeat; }
        #bloc_logo:hover { background-position: 0px -149px; }
    #menu_header { margin: 0px; padding: 5px; padding-right: 20px; color: grey; text-align: right; }
    #connexion_texte { margin: 0px; margin-left: 398px; padding-top: 20px; padding-right: 30px; color: grey; text-align: right; }
    #bloc_menu { display: block; width: 540px; height: 83px; margin: 0px; margin-left: 398px; padding: 0px; }
        #bloc_menu li { float: left; display: block; width: 108px; height: 83px; background-image: url("../design/sprite_menu.jpg"); background-repeat: no-repeat; margin-top: 8px;}
            #menu_bouton_1_accueil, #menu_bouton_1_accueil:visited { background-position: 0px 0px; }
                #menu_bouton_1_accueil:hover { background-position: 0px -83px; }
                #menu_bouton_1_accueil:focus, #menu_bouton_1_accueil:active { background-position: 0px -166px; }
            #menu_bouton_2_vielocale, #menu_bouton_2_vielocale:visited { background-position: -108px 0px; }
                #menu_bouton_2_vielocale:hover { background-position: -108px -83px; }
                #menu_bouton_2_vielocale:focus, #menu_bouton_2_vielocale:active { background-position: -108px -166px; }
            #menu_bouton_3_voyages, #menu_bouton_3_voyages:visited { background-position: -216px 0px; }
                #menu_bouton_3_voyages:hover { background-position: -216px -83px; }
                #menu_bouton_3_voyages:focus, #menu_bouton_3_voyages:active { background-position: -216px -166px; }
            #menu_bouton_4_galerie, #menu_bouton_4_galerie:visited { background-position: -324px 0px; }
                #menu_bouton_4_galerie:hover { background-position: -324px -83px; }
                #menu_bouton_4_galerie:focus, #menu_bouton_4_galerie:active { background-position: -324px -166px; }
            #menu_bouton_5_apropos, #menu_bouton_5_apropos:visited { background-position: -432px 0px; }
                #menu_bouton_5_apropos:hover { background-position: -432px -83px; }
                #menu_bouton_5_apropos:focus, #menu_bouton_5_apropos:active { background-position: -432px -166px; }

                #menu_bouton_1_accueil_selected:hover { background-position: 0px -83px; }
                #menu_bouton_1_accueil_selected, #menu_bouton_1_accueil_selected:visited, #menu_bouton_1_accueil_selected:focus, #menu_bouton_1_accueil_selected:active { background-position: 0px -166px; }
                #menu_bouton_2_vielocale_selected:hover { background-position: -108px -83px; }
                #menu_bouton_2_vielocale_selected, #menu_bouton_2_vielocale_selected:visited, #menu_bouton_2_vielocale_selected:focus, #menu_bouton_2_vielocale_selected:active { background-position: -108px -166px; }
                #menu_bouton_3_voyages_selected:hover { background-position: -216px -83px; }
                #menu_bouton_3_voyages_selected, #menu_bouton_3_voyages_selected:visited, #menu_bouton_3_voyages_selected:focus, #menu_bouton_3_voyages_selected:active { background-position: -216px -166px; }
                #menu_bouton_4_galerie_selected:hover { background-position: -324px -83px; }
                #menu_bouton_4_galerie_selected, #menu_bouton_4_galerie_selected:visited, #menu_bouton_4_galerie_selected:focus, #menu_bouton_4_galerie_selected:active { background-position: -324px -166px; }
                #menu_bouton_5_apropos_selected:hover { background-position: -432px -83px; }
                #menu_bouton_5_apropos_selected, #menu_bouton_5_apropos_selected:visited, #menu_bouton_5_apropos_selected:focus, #menu_bouton_5_apropos_selected:active { background-position: -432px -166px; }

#bloc_navigation { float: right; width: 202px; }
#bloc_navigation_haut { float: right; width: 202px; height: 37px; margin-left: 750px; background-image: url("../design/haut_bloc_menu.png"); background-position: 0px 0px;  background-repeat: no-repeat; }
    #bloc_navigation_haut h2 { text-align: center; font-size: 1.2em; color: #b10000; font-weight: bold; font-style: italic; text-decoration: none; padding-top: 9px; }
#bloc_navigation_centre { float: right; width: 202px; margin-left: 750px; background-image: url("../design/texture_bloc_menu.png"); background-position: 0px 0px;  background-repeat: repeat-y; }
    #bloc_navigation_centre p { width: 202px; background-image: url("../design/separateur_titre_bloc_menu.png"); background-position: top center;  background-repeat: no-repeat; }
    #bloc_navigation_centre ul { list-style: disc; color: black; font-size: 0.7em; text-align: left; margin-left: 22px; margin-right: 5px; margin-top: 0px; margin-bottom: 5px; }
            #bloc_navigation_centre li { margin-bottom: 2px; }
            #bloc_navigation_centre li ul { list-style: none; color: black; font-size: 1em; text-align: left; margin-left: 5px; margin-right: 0px; margin-top: 0px; margin-bottom: 5px; }
    .bloc_navigation_titre { width: 202px; height: 33px; background-image: url("../design/separateur_texte_bloc_menu.png"); background-position: bottom center;  background-repeat: no-repeat; }
        .bloc_navigation_titre h2 { text-align: center; font-size: 1.2em; color: #b10000; font-weight: bold; font-style: italic; text-decoration: none; padding-top: 5px; }
        .bloc_navigation_titre h2 a, .bloc_navigation_titre h2 a:visited { color: #b10000; }
        .bloc_navigation_titre h2 a:hover, .bloc_navigation_titre h2 a:visited:hover { color: grey; }
        .bloc_navigation_titre h2 a:focus, .bloc_navigation_titre h2 a:active { color: #b10000; text-decoration: none; }
    .carte_curseur { width: 16px; height: 16px; background-image: url("../design/sprite_carte.png"); background-position: top center;  background-repeat: no-repeat; }
    .raleigh { float: left; position: relative; top: 103px; left: 66px; }
    .charlotte { float: right; position: relative; top: 113px; left: -132px; }
    .charleston { float: left; position: relative; top: 134px; left: 44px; }
    .washgton { float: right; position: relative; top: 71px; left: -100px; }
    .panama { float: left;  position: relative; top: 136px; left: 12px; }
    .orlando { float: right;  position: relative; top: 148px; left: -130px; }
    .miamib { float: left;  position: relative; top: 170px; left: 52px; }
    .keywest { float: left; position: relative; top: 186px; left: 24px; }
    .nassau { float: left; position: relative; top: 180px; left: 32px; }
    .cococay { float: left; position: relative; top: 196px; left: 63px; }
    .nyc { float: right; position: relative; top: 46px; left: -63px; }
        .carte_curseur:hover { background-position: bottom center; }
#bloc_navigation_bas { float: right; width: 202px; height: 45px; margin-left: 750px; background-image: url("../design/bas_bloc_menu.png"); background-position: 0px 0px;  background-repeat: no-repeat; }

#footer, footer { width: 952px; height: 185px; font-size: 0.8em; position: absolute; bottom: 0px; left: 50%; margin-left: -476px; }
    #footer_plan_site { float: left; width: 120px; margin-left: 20px; }
    #footer_plan_reseau { float: left; width: 190px; margin-left: 10px; }
    #footer_compte { float: left; width: 140px; margin-left: 10px; }
    #footer_autres_domaines { float:left; width: 176px; margin-left: 10px; }
    .footer_separateur { float: left; width: 2px; height: 126px; margin: 5px; margin-top: 0px; background-image: url("../design/separateur_footer.png"); background-position: 0px 0px;  background-repeat: no-repeat; }
    #footer div p, footer div p { color: #b10000; }
    #footer ul, footer ul { font-size: 0.9em; margin-top: 5px; }
    #footer ul li, footer ul li { margin-top: 2px; }
    .footer_icone { display: inline-block; width: 15px; height: 15px; margin: 2px; margin-right: 5px; background-image: url("../design/sprite_icones.png"); background-repeat: no-repeat; position: relative; top: 3px; left: 0px;}
        #footer_plan_site .footer_icone { background-position: 0px 0px;  }
        #footer_plan_reseau .footer_icone { background-position: 0px -15px;  }
        #footer_compte .footer_icone { background-position: 0px -30px;  }
        #footer_autres_domaines .footer_icone { background-position: 0px -45px;  }
    #copyright, .statistiques_page { clear: both; text-align: left; color: grey; font-size: 0.8em; padding-bottom: 0px; }

#bloc_flash_accueil { clear: both; width: 952px; height: 250px; background-image: url("../design/bloc_flash.jpg"); background-position: top left; background-repeat: no-repeat; }
    #bloc_flash_accueil .image_flash { position: relative;  top: -232px; left: 1px; }
    #bloc_flash_accueil img { z-index: 1; width: 950px; height: 250px; }
    #bloc_flash_accueil .hot_spot { z-index: 4; width: 297px; height: 179px; position: relative; left: 630px; top: -20px; }
    #bloc_flash_accueil .hot_spot_texte { float: left; width: 227px; height: 179px; background-image: url("../design/cadre_infos.png"); background-position: top left; background-repeat: no-repeat; }
    .hot_spot_texte .haut_bloc_flash { width: 227px; height: 40px; }
        .haut_bloc_flash h2 { text-align: center; font-size: 1.2em; color: #b10000; font-weight: bold; font-style: italic; text-decoration: none; padding-top: 11px; }
        .haut_bloc_flash h2 a, .haut_bloc_flash h2 a:visited { color: #b10000; }
        .haut_bloc_flash h2 a:hover, .haut_bloc_flash h2 a:visited:hover { color: grey; }
        .haut_bloc_flash h2 a:focus, .haut_bloc_flash h2 a:active { color: #b10000; text-decoration: none; }
    .hot_spot_texte .milieu_bloc_flash { width: 227px; height: 100px; }
        .milieu_bloc_flash p { color: black; font-size: 0.9em; text-align: left; text-indent: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 5px; }
    .hot_spot_texte .bas_bloc_flash { width: 227px; height: 19px; }
        .bas_bloc_flash p { color: grey; font-size: 0.9em; text-align: center; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; }
    .navig_flash_gauche, .navig_flash_droite { display: none; z-index: 3; width: 35px; height: 125px; background-image: url("../design/sprite_navig_cadre_infos.png"); background-repeat: no-repeat; margin-top: 25px; }
        .navig_flash_gauche p, .navig_flash_droite p { width: 35px; height: 125px; }
    .navig_flash_droite { float: left; background-position: top right; }
        .navig_flash_droite:hover { background-position: center right; }
        .navig_flash_droite:focus, .navig_flash_droite:active { background-position: bottom right; }
    .navig_flash_gauche { float: left; background-position: top left; }
        .navig_flash_gauche:hover { background-position: center left; }
        .navig_flash_gauche:focus, .navig_flash_gauche:active { background-position: bottom left; }
#bloc_flash_vielocale { clear: both; width: 952px; height: 55px; background-image: url("../design/bloc_flash_vielocale.jpg"); background-position: top left; background-repeat: no-repeat; }
#bloc_flash_voyages { clear: both; width: 952px; height: 55px; background-image: url("../design/bloc_flash_voyages.jpg"); background-position: top left; background-repeat: no-repeat; }
#bloc_flash_galerie { clear: both; width: 952px; height: 55px; background-image: url("../design/bloc_flash_galerie.jpg"); background-position: top left; background-repeat: no-repeat; }
#bloc_flash_apropos { clear: both; width: 952px; height: 55px; background-image: url("../design/bloc_flash_apropos.jpg"); background-position: top left; background-repeat: no-repeat; }
#bloc_flash_compte { clear: both; width: 952px; height: 55px; background-image: url("../design/bloc_flash_compte.jpg"); background-position: top left; background-repeat: no-repeat; }
#bloc_flash { clear: both; width: 952px; height: 55px; background-image: url("../design/bloc_flash_autres_pages.jpg"); background-position: top left; background-repeat: no-repeat; }
    #bas_logo { z-index: 2; width: 132px; height: 53px; background-image: url("../design/bas_logo.png"); background-position: top left; background-repeat: no-repeat; position: relative; top: 0px; left: 35px;}