html {
    min-height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: #323b52;
    color: #b0c2f1;
    font-size: 1em;
    font-family: sans-serif;
}

#home {
    padding: 15px 0 40px;
}

.gb {
    padding: 15px 0;
}

.gb li {
    list-style-type: none;
    background-image: url(images/contenu/bg_frame.png);
    margin-bottom: 15px;
    border: 1px solid #adb5b7;
    padding: 8px;
}

.gb h3 {
    font-weight: bold;
    color: #4f87b0;
    font-size: 100%;
    background-image: url(images/contenu/bub.gif);
    background-repeat: no-repeat;
    padding: 0 0 1px 17px;
    margin-bottom: 4px;
    border-bottom: 1px dashed #1A2530;
}

.gb li ol {
    margin-top: 10px;
}

.gb li ol li {
    border: 1px solid #ffad00;
}

.gb .comment {
    background-image: none !important;
    border: none !important;
    text-align: center;
    color: #fed15f;
}

#home, .gb {
    max-width: 471px;
    margin: auto;
    width: 100%; /* 471/1024 */
    background: url("images/contenu/bg_tile.png") repeat-y center;
    background-size: 100%;
    position: relative;
    -webkit-filter: drop-shadow( 0px 3px 5px #00000094 );
    filter: drop-shadow( 0px 3px 5px #00000094 );    
}

#home ul li img {
    max-width: 100%;
    height: auto;
}

#home_footer {
    background: url("images/contenu/bg_footer.png") no-repeat;
    background-size: 100% 100%; 
    width: 100%;
    max-width: 507px;
    height: 25px;
    margin-top: -10px;
    position: relative;
    margin: auto;
    top: -10px;
    z-index: -1;
    -webkit-filter: drop-shadow( 0px 3px 5px #00000094 );
    filter: drop-shadow( 0px 3px 5px #00000094 );
}

.gb ul {
    margin: 0 1em;
}

#home ul {
    text-align: center;
    background: url("images/contenu/bg_frame.png") center;
    border: 1px solid #adb5b7;
    margin: 0 1em;
    padding: 5px;
}

#home .updated {
    color: #fff;
}

#home li {
    list-style-type: none;
    padding-bottom: 10px;
    text-align: center;
}


@media screen and (max-width: 600px)
{
    #home
    {
        width: 85.63636363636364%; /* 471/550 */
        padding: 10px 0 5px;
    }
    #home_footer
    {
        width: 92.18181818181818%; /* 507/550 */
        background-size: 100% 80%; 
    }    
    #home ul {
        margin: 0 0.5em;
        padding: 5px;
    }
    #home li {
        padding-bottom: 4px;
    }
    .menu li a {
        padding: 0 0.2em !important;
    }
    #home ul li img {
       max-width: 50%;
       height: auto;
    }
}


/* Main menu
------------------------------------------- */
.menu {
    position: sticky;
    background: rgba(13, 29, 48, 0.95);
    display: flex;
    justify-content: center;
    top: 0;
    box-shadow: 0 3px 5px #00000094;
}

.menu , .menu ul {
    list-style: none;
    z-index: 999;
}

.menu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 0.6em;
    text-decoration: none;
}

.menu > li:hover > a {
    background: #0c0f17;
}


/* Submenu
------------------------------------------- */
.menu ul {
    position: absolute;
    display: none;
    z-index: 999;
    background: rgba(13, 29, 48, 0.95);
}

.menu ul li a {
    width: 130px;
    text-align: center;
}

.menu li:hover ul {
    display: block;
}

.menu ul li:hover a {
    background: #000;
}


/* Links
------------------------------------------- */
a:link {
    color: #b0c2f1;
}

a:visited {
    color: #b0c2f1;
}

a:hover {
    color: #fed15f;
}

a:active {
    color: #b0c2f1;
}

.selected {
    color: #ffffff !important;
}


/* Video
------------------------------------------- */
.container {
    margin: 15px 0;
}

.ax {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    height: auto;
    box-shadow: 0px 3px 5px #00000094;
}

/*.video {
    width: 100%;
    height: 500px;
}*/

iframe {
    width: 100%;
    min-height: 40vh;
}

.video_box {
    max-width: 800px;
    /*position: relative;*/
    margin: 0 auto 75px;
}

/*.h_iframe {
    position: relative;
}

.h_iframe .ratio {
    display: block;
    width: 100%;
    height: auto;
}

.h_iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/

/* CSS Gallery Comics
------------------------------------------- */
.gallery_comics {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;  
    justify-content: center;
    list-style-type: none;
    flex-wrap: wrap;
    margin: 10px;
/*    padding: 30px 0 0; */   
}
.gallery_comics li {
    padding: 0 0 10px;
    width: 100%;
    text-align: center;
}
.gallery_comics img {
    max-width: 100%;
    vertical-align: bottom;
}
.gallery_comics a {
    text-decoration: none;
}

/* CSS Gallery Artworks
------------------------------------------- */
.gallery {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;  
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;  
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;
    max-width: 100%;
    list-style-type: none;
    margin: 10px;
}

.gallery li {
    margin: 0;
    padding: 1px;
}

.gallery a {
    display: block;
    position: relative;
    text-decoration: none;
}

.gallery img {
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    min-width: 0;
}

/* Button back to top 
------------------------------------------- */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 50%;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: rgba(254, 209, 95, 0.95);
    color: #000;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    margin-right: -16px;
    font-weight: bold;
    box-shadow: 0px 0px 10px 6px #000;
}

#back-to-top:hover {
    background: #000;
    color: #fed15f;
}

#back-to-top.show {
    opacity: 0.9;
}



/* Timeline - Chronologie
------------------------------------------- */

#switch {
    left: 305px;
    position: relative;
    font-size: 0.9em;
    top: -12px;
}

#ch_box_chrono {
    text-align: center;
    margin: 12px auto 0;
}

#ch_banner {
    margin: 20px auto 0;
    position: relative;
    display: inline-block;
    left: -60px;
    top: -25px;
}

#ch_content {
    background: url("chronologie/red_middle.png") repeat-y;
    background-position: bottom center;
    position: relative;
    left: -260px;
    top: -29px;
    }

#ch_box_chrono {
    margin: auto;
}

.ch_box_event {
    width: 451px;
    margin: 0 auto 4px auto;
    left: 314px;
    position: relative;
}

.ch_box_date {
    color: #FFF;
    float: left;
    font-family: tahoma;
    font-size: 9px;
    text-align: center;
    width: 131px;
    margin: 12px 0px 0px -158px;
    }
.ch_box_date span {
    font-size: 12px;
    font-weight: bolder;
    }   

/* All top boxes shares 
.ch_box_top_proph, .ch_box_top_fact, .ch_box_top_nf, .ch_box_top_all, .ch_box_top_charr, .ch_box_top_asu, .ch_box_top_sylv, .ch_box_top_norn {
    color: #193daa;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    }*/

/* Boxes GW2 related */
.ch_box_top_gw2 {
    color: #193daa;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #e5e5e5;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_gw2 {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    }  

/* Boxes Prophecies related */
.ch_box_top_proph {
    color: #193daa;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #aac275;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_proph {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    } 

/* Boxes Factions related */
.ch_box_top_fact {
    color: #193daa;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #eaba90;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_fact {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    } 

/* Boxes Nightfall related */
.ch_box_top_nf {
    color: #193daa;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #e9d164;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_nf {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    }   

/* Boxes all related */
.ch_box_top_all {
    color: #193daa;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #8fa5ab;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_all {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    }

/* Images */    
.line {
    position: absolute;
    left: -26px;
    top: 16px;
}    
.ico {
    position: absolute;
    left: 3px;
}

/* Boxes Charr related */
.ch_box_top_charr {
    color: #041d68;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #928a7e;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_charr {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    }  

/* Boxes Asura related */
.ch_box_top_asu {
    color: #041d68;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #67d686;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_asu {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    }  

/* Boxes Sylvari related */
.ch_box_top_sylv {
    color: #193daa;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #87c5eb;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_sylv {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    }

/* Boxes Norn related */
.ch_box_top_norn {
    color: #041d68;
    font-family : Verdana, Georgia, Times New Roman;
    font-size: 0.7em;
    background-position: top;
    text-align: justify;
    border-radius: 12px;
    background: #9e96c9;
    padding: 2px 6px 2px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    }
.ch_box_middle_norn {
    position: relative;
    margin: 10px 0;
    padding: 0 5px 0 52px;
    }       

/* All images inside boxes shares */
.ch_box_middle_gw2 img, .ch_box_middle_proph img, .ch_box_middle_fact img, .ch_box_middle_nf img, .ch_box_middle_all img, .ch_box_middle_charr img, .ch_box_middle_asu img, .ch_box_middle_sylv img, .ch_box_middle_norn img {
    position: absolute;
    left: 20px;
    }

#red_footer {
    position: relative;
    top: 93px;
}


.cen {
    color: #ce9100;
    font-size: .7em;
    padding: 2px 5px;
}

.ch_table a:link, {
    color: ##0036c2;
}

.ch_table a:visited, {
    color: ##0036c2;
}

.ch_table a:hover, {
    color: ##0036c2;
}

.ch_table a:active, {
    color: ##0036c2;
}

/* détails pour le calendrier */
#legend_calendar {
    font-size: 0.6em;
    width: 500px;
    position: relative;
    margin: auto;
    left: 60px;
    top: -115px;
    color: #a47c5f;
}

/* Footer Arenat Net */
.ch_anet {
    width: 440px;
    margin: 10px auto;
    font-size: 0.6em;
    position: relative;
    left: 54px;
    top: -95px;
}

/* Sources */
#sources {
    position: relative;
    margin: 0 auto;
    font-size: 0.8em;
    top: -58px;
    background-color: #00000045;
    padding: 11px 10px 20px;
    border-radius: 12px;
    width: 590px;
    left: -26px;
}


/* Image hover text */
#peitha, #eparch, #janthirwilds, #aurene, #endofdragons, #secretoftheobscure, #jormag, #primordius, #epopee, #soowon, #drakkar, #smodur, #kralkatorrik, #palawa, #bangar, #almorra, #fraenir, #blish, #caudecus, #demmi, #saul, #path, #vlast, #brill, #balthazar, #heart, #eir, #faolain, #mordremoth, #trahearne, #braham, #desmina, #dhumm, #qadim, #ellen, #tequatl, #kuu, #koss, #lonai, #laz, #varesh, #lyssa, #grenth, #melandru {
    font-weight: bold;
}
#scarlet, #mordremoth, #scepteroforr, #jennah, #zommoros, #titan, #gw2, #gaheron, #kudu, #zhaitan, #dougal, #ronan, #ventari, #cadeyrn, #usoku, #kalla, #adelbern, #rurik, #salma, #destructeur, #reiko, #ashu, #kormir, #abaddon, #liche, #togo, #mhenlo, #khilbron, #terick, #razakel, #kisu, #vizu, #angsiyan, #turai, #meerak, #forgotten, #margonites, #pyre, #shiro, #gwen, #mursaat, #galrath, #qadim, #ulgoth, #cobiah, #zinn, #seer, #mad, #jadoh, #balt, #kryptis, #kodan {
    font-weight: bold;
}


#peitha img, #eparch img, #janthirwilds img, #scepteroforr img, #aurene img, #zommoros img, #titan img, #endofdragons img, #secretoftheobscure img, #jormag img, #primordius img, #epopee img, #soowon img, #drakkar img, #smodur img, #kralkatorrik img, #palawa img, #bangar img, #almorra img, #fraenir img, #blish img, #caudecus img, #demmi img, #galrath img, #braham img, #qadim img, #ellen img, #tequatl img, #kuu img, #laz img, #jadoh img, #balt img {
      position: absolute;
      left: 455px;
      top: -12px;
      display: none;
      border-radius: 12px;
}
#saul img, #path img, #vlast img, #brill img, #balthazar img, #heart img, #eir img, #faolain img, #mordremoth img, #trahearne img, #scarlet img, #mordremoth img, #jennah img, #gw2 img, #gaheron img, #kudu img, #zhaitan img, #dougal img, #ronan img, #ventari img, #cadeyrn img, #shiro img, #gwen img, #qadim img, #desmina img, #dhumm img, #cobiah img, #zinn img, #seer img, #mad img, #lyssa img, #melandru img {
      position: absolute;
      left: 455px;
      top: -12px;
      display: none;
      border-radius: 12px;
}
 #usoku img, #kalla img, #adelbern img, #rurik img, #salma img, #destructeur img, #reiko img, #ashu img, #kormir img, #abaddon img, #liche img, #togo img, #mhenlo img, #khilbron img, #terick img, #razakel img, #kisu img, #vizu img, #angsiyan img, #turai img, #meerak img, #forgotten img, #margonites img, #pyre img, #mursaat img, #ulgoth img, #koss img, #lonai img, #varesh img, #grenth img, #kryptis img, #kodan img {
      position: absolute;
      left: 455px;
      top: -12px;
      display: none;
      border-radius: 12px;
}


#peitha:hover img, #eparch:hover img, #scepteroforr:hover img, #janthirwilds:hover img, #zommoros:hover img, #titan:hover img, #aurene:hover img, #endofdragons:hover img, #secretoftheobscure:hover img, #jormag:hover img, #primordius:hover img, #epopee:hover img, #soowon:hover img, #drakkar:hover img, #smodur:hover img, #shiro:hover img, #gwen:hover img, #galrath:hover img, #braham:hover img, #qadim:hover img, #desmina:hover img, #dhumm:hover img, #kuu:hover img, #koss:hover img, #lonai:hover img {
    display: block;
    z-index: 100;
}
#kralkatorrik:hover img, #bangar:hover img, #palawa:hover img, #almorra:hover img, #fraenir:hover img, #blish:hover img, #caudecus:hover img, #demmi:hover img, #saul:hover img, #path:hover img, #vlast:hover img, #brill:hover img, #balthazar:hover img, #heart:hover img, #eir:hover img, #faolain:hover img, #mordremoth:hover img, #trahearne:hover img, #qadim:hover img, #cobiah:hover img, #laz:hover img, #jadoh:hover img, #balt:hover img, #kodan:hover img {
    display: block;
    z-index: 100;
}
#scarlet:hover img, #mordremoth:hover img, #jennah:hover img, #gw2:hover img, #gaheron:hover img, #kudu:hover img, #zhaitan:hover img, #dougal:hover img, #ronan:hover img, #ventari:hover img, #cadeyrn:hover img, #meerak:hover img, #forgotten:hover img, #margonites:hover img, #pyre:hover img, #mursaat:hover img, #ellen:hover img, #tequatl:hover img, #ulgoth:hover img, #zinn:hover img, #varesh:hover img, #lyssa:hover img, #melandru:hover img {
    display: block;
    z-index: 100;
}
#usoku:hover img, #kalla:hover img, #adelbern:hover img, #rurik:hover img, #salma:hover img, #destructeur:hover img, #reiko:hover img, #ashu:hover img, #kormir:hover img, #abaddon:hover img, #liche:hover img, #togo:hover img, #mhenlo:hover img, #khilbron:hover img, #terick:hover img, #razakel:hover img, #kisu:hover img, #vizu:hover img, #angsiyan:hover img, #turai:hover img, #seer:hover img, #mad:hover img, #grenth:hover img, #kryptis:hover img {
    display: block;
    z-index: 100;
}