@font-face {
    font-family: 'lir';
    src: url('../fonts/livory_regular-webfont.eot');
    src: url('../fonts/livory_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/livory_regular-webfont.woff') format('woff'),
         url('../fonts/livory_regular-webfont.ttf') format('truetype'),
         url('../fonts/livory_regular-webfont.svg#livory_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */




#header{background: url(img/header_background.jpg) repeat-x 0 0; height: 165px;}
#header .header_container{position:relative; height: 100%; background: url(img/header_cover.jpg) no-repeat 0 0; width: 1129px; margin: 0 auto; }
#header .header_container a.logo_app{margin-top: 25px;float: left; width: 235px; height: 115px; background: url(img/logo_cite.png) no-repeat 0 0; content: ''; text-indent: -9999px; display: block;}
#header .header_container .middle_header{width: 620px; margin: 56px 0 0 56px; float: left;}
#header .header_container .middle_header h1{margin: 0; color: white; font-size: 32px; text-transform: uppercase; font-family: 'Lir', Arial, Helvetica; text-shadow: 1px 0px 1px #000; text-align: center; font-weight: normal;}
#header .header_container .middle_header h5{color: white;text-shadow: 0px 1px 1px black;text-align: center;margin: 3px 0px 0px 120px;width: 400px;}
#header .header_container .navigation{width: 100%; height: 28px; margin-top: 5px;}
#header .header_container .navigation ul{margin: 0; padding: 0; list-style: none; overflow: hidden}
#header .header_container .navigation ul li{float: left;padding: 0px 12px; background: black; -webkit-border-radius: 10px;margin: 0 5px;height: 32px;line-height: 28px;}
#header .header_container .navigation ul li:first-child{margin-left: 0;}
#header .header_container .navigation ul li a{font-size: 13px; font-family: 'Arial', sans-serif;color: white;text-decoration: none; font-weight: bold; }
#header .header_container .navigation ul li a:hover{}


#header .header_container .translations{float: right; width: 150px; height: 100px; overflow: hidden; margin-top: 51px;}
#header .header_container .translations a{-webkit-transition: 0.3s background ease-in-out; background: url(img/translations_picto.png) no-repeat 0 0;width: 45px; height: 45px; overflow: hidden; display: block; content: ''; text-indent: -9999px; float: left;margin-left: 7px;}
#header .header_container .translations a:first-child{margin-left: 0px;}
#header .header_container .translations a.french_translation{background-position: 0px 0px;}
#header .header_container .translations a.french_translation:hover, #header .header_container .translations a.french_translation.active{background-position: 0px -45px;}
#header .header_container .translations a.english_translation{background-position: -46px 0px;}
#header .header_container .translations a.english_translation:hover, #header .header_container .translations a.english_translation.active{background-position: -46px -45px;}
#header .header_container .translations a.italian_translation{background-position: -92px 0px;}
#header .header_container .translations a.italian_translation:hover, #header .header_container .translations a.italian_translation.active{background-position: -92px -45px;}


/* TIMEMAP CONTAINER */
.container_timemap{height: 100%; position: relative;}

/* ARROWS NAVIGATION */
.arrow_navigation{text-indent: -9999px; position: absolute; z-index: 1000; top: 200px; display: block; content: ''; width: 39px; height: 39px; background: url(img/arrows_navigation.png) no-repeat 0 0; overflow: hidden;}
.arrow_navigation#timearrowleft{background-position: 0px 0px; left: 30px;}
.arrow_navigation#timearrowleft:hover{background-position: 0px -40px}
.arrow_navigation#timearrowright{background-position: -41px 0px; right: 30px;}
.arrow_navigation#timearrowright:hover{background-position: -41px -40px}

#timemap{height:100%;margin:0!important;padding:0!important;background: #101010;} 
#timeline-band-1{bottom:0!important;height:72px!important;} 
#timeline-band-0{top:0px!important;} 
#timeline-band-1 .timeline-ether-highlight{opacity:1!important;background:#414050!important;border-right: 3px solid #A0A0A0!important;border-left: 3px solid #A0A0A0!important;border-bottom: 3px solid #A0A0A0!important;top:0px!important;height:75px!important;/*box-shadow: 0px 2px white inset;*/} 
#timeline-band-0 .timeline-ether-bg{/*background: url(img/background_timeline.png) repeat-x 0 0 !important;*/height: 325px !important; background: #414050 !important}

#categoryfilters{height: 72px; background: #101010; } 
#categoryfilters .categories_container{width: 1129px; margin: 0 auto; height: 32px;padding: 20px 0;}
#categoryfilters .categories_container > div {float: left; margin: 0 15px;}
#categoryfilters .categories_container span {color: white; font-weight: bold; font-size: 15px;}
#categoryfilters .categories_container span input {margin-right: 20px; position: relative; top: 0; left: 6px;}
#categoryfilters .categories_container .life{ }
#categoryfilters .categories_container .culture{}
#categoryfilters .categories_container .history{}
#categoryfilters .categories_container label{display:block;padding:2px; position: relative; height: 30px; line-height: 30px;cursor: pointer;font-family: 'Lir', Arial, Helvetica; font-weight: normal;font-size: 17px;}
#categoryfilters .categories_container .pellet{position: absolute; top: 0; left: 0; background: url(img/checkbox_pellets_categories.png) no-repeat 0 0; width: 30px; height: 30px; overflow: hidden;}
#categoryfilters .categories_container .life .pellet{background-position: -33px 0px }
#categoryfilters .categories_container .culture .pellet{background-position: 0px 0px}
#categoryfilters .categories_container .history .pellet{background-position: -66px 0px }

#categoryfilters .categories_container .top_home {float: right;width: 120px;height: 40%;margin-top: 2px;}
#categoryfilters .categories_container .top_home a{position: relative; display: block; color: white; font-family: 'Arial', sans-serif; font-size: 12px; text-decoration: none; margin-top: 9px; padding-left: 35px;}
#categoryfilters .categories_container .top_home .bottom_to_top{-webkit-transition: 0.3s background ease-in-out;position: absolute; top: -6px; left: 0; width: 26px; background: url(img/top_btn.png) no-repeat 0 0; height: 26px; overflow: hidden;}
#categoryfilters .categories_container .top_home a:hover .bottom_to_top{background-position: 0px -26px;}

.timeline-band-layer{}
#timeline > img{display:none;}
/*.timeline-event-label:focus,.timeline-event-label:active, .timeline-event-label.active{font-weight:700!important;color:#000;background:red;}*/
p.content{font-size:12px;width:30em;}
div#help{font-size:12px;width:45em;padding:1em;} 
div#timemap{padding:.5em;} 
div#timeline{width:100%;height:100%;font-size:12px;background:#CCC;} 
div#map{width:100%;height:100%;background:#EEE;} 
div.infotitle{font-size:14px;font-weight:700;} 
div.infodescription{font-size:14px;font-style:italic;} 
div.custominfostyle{font-family:Georgia, Garamond, serif;font-size:1.5em;font-style:italic;width:20em;} 
div#timelinecontainer{height: 397px;width:100%;/*border-top: 3px solid #101010;*/} 
div#mapcontainer{height: 600px;width:100%;} 
/*div#timelinecontainer,div#mapcontainer{height:50%!important;width:100%;} */
.timeline-date-label,.timeline-event-label{color:#FFF!important;text-align: left; padding: 0px 0 0 0;margin: 0px 0 0 0px;}
.timeline-event-icon{margin: -4px 0px 0 -6px;}
.timeline-event-label{border: none!important; background: none !important; font-weight: normal !important}
.timeline-event-label.active{font-weight: normal !important; outline: 0; text-align: left; color: #01CEC9 !important;}
.timeline-event-label.focus{outline: 1px dotted orange;}


#timeline-band-1 .timeline-ether-bg,#timeline{background:#000!important;}

#footer{background: #101010; height: 72px;}
#footer .footer_container{width: 1129px; margin: 0 auto; height: 100%;}
#footer .footer_container ul{margin: 0; padding: 0; list-style: none;}

#footer .footer_container .share_app{float: left; height: 40%;margin-top: 18px;border-right: 1px solid #BBB;padding-right: 30px;width: 90px;position: relative;}
#footer .footer_container .share_app a {font-weight: bold; color: white; font-family: 'Arial', sans-serif; font-size: 12px; display: block;margin-top: 10px; position: relative; text-decoration: none}
#footer .footer_container .share_app .addthis_toolbox .hover_menu a{margin-top: 7px;}
#footer .footer_container .share_app a span {display: inline-block;}
#footer .footer_container .share_app a b {position: absolute; top: -7px; right: 0; width: 25px; background: url(img/share_btn.png) no-repeat 0 0; height: 25px; overflow: hidden;}
#footer .footer_container .share_app ul{display: none;}

#footer .footer_container .footer_navigation{width: 430px; float: left; margin-top: 23px;margin-left: 210px;}
#footer .footer_container .footer_navigation ul{height: 20px;}
#footer .footer_container .footer_navigation li{float: left;height: 100%;}
#footer .footer_container .footer_navigation li.sep{margin: 8px 15px 0; width: 1px; height: 10px; background: #4D4D4D}
#footer .footer_container .footer_navigation li:first-child{margin-left: 0; }
#footer .footer_container .footer_navigation li a{color: white; font-family: 'Arial', sans-serif; font-size: 12px; text-decoration: none; }
#footer .footer_container .footer_navigation li a:hover{text-decoration: underline; }

#footer .footer_container .networks {float: left; width: 120px; margin-left: 60px;}
#footer .footer_container .networks span {color: white; font-family: 'Arial', sans-serif; font-size: 12px;margin-bottom: 6px; display: block; margin-top: 10px;}
#footer .footer_container .networks ul li {margin-left: 4px; float: left;}
#footer .footer_container .networks ul li:first-child{margin-left: 0}
#footer .footer_container .networks ul li a{width: 26px; height: 25px; overflow: hidden; background: url(img/networks.png) no-repeat 0 0; display: block; content: ''; text-indent: -9999px;}
#footer .footer_container .networks ul li a.fb_share{background-position: -78px 0px;}
#footer .footer_container .networks ul li a.dailymotion_share{background-position: -26px 0px;}
#footer .footer_container .networks ul li a.twitter_share{background-position: -52px 0px;}
#footer .footer_container .networks ul li a.flickr_share{background-position: 0px 0px;}

#footer .footer_container .top_home {float: right;width: 120px;height: 40%;margin-top: 18px;border-left: 1px solid #BBB;padding-left: 30px;}
#footer .footer_container .top_home a{position: relative; display: block; color: white; font-family: 'Arial', sans-serif; font-size: 12px; text-decoration: none; margin-top: 9px; padding-left: 35px;}
#footer .footer_container .top_home .bottom_to_top{-webkit-transition: 0.3s background ease-in-out;position: absolute; top: -6px; left: 0; width: 26px; background: url(img/top_btn.png) no-repeat 0 0; height: 26px; overflow: hidden;}
#footer .footer_container .top_home a:hover .bottom_to_top{background-position: 0px -26px;}




/* INFOBOX MAP POPUP */
.infoBox{-webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px;  background: #101010; box-shadow: 1px 1px 4px black; }
.infoxBoxPopup{ padding: 15px; }

/* POPUP MAP */
.infoxBoxPopup .infomapwindow{ position: relative; padding: 0 20px 0 30px;}
.infoxBoxPopup .infomapwindow .picto_categories{ width: 23px; height: 23px; display: block; position: absolute; top: 4px; left: -3px;}
.infoxBoxPopup .infomapwindow .infoBoxSep{ margin: 11px 0 0px;height: 1px;width: 25px;background: white;}
.infoxBoxPopup .infomapwindow .picto_categories.culture{ background: url(img/maps/yellow-full.png) no-repeat 0 0; }
.infoxBoxPopup .infomapwindow .picto_categories.history{ background: url(img/maps/blue-full.png) no-repeat 0 0; }
.infoxBoxPopup .infomapwindow .picto_categories.life{ background: url(img/maps/pink-full.png) no-repeat 0 0; }
.infoxBoxPopup .infomapwindow h3{ font-family: "Times New Roman"; font-size: 17px; color: white;margin: 6px 0 0;}
.infoxBoxPopup .infomapwindow small{color: #BBB; font-family: "Times New Roman"; font-size: 12px;}
.infoxBoxPopup .infomapwindow .sep_tiret{color: #BBB; font-family: "Times New Roman"; font-size: 11px;}
.infoxBoxPopup .infomapwindow .sep_pipe{color: #BBB; font-family: "Times New Roman"; font-size: 11px;margin: 0 3px;}
.infoxBoxPopup .infomapwindow em{ font-family:"Times New Roman";  font-size: 12px; color: #BBB; margin: 0;font-style: italic}
.infoxBoxPopup .infomapwindow .infoBoxContents p{ font-family: "Arial"; font-size: 12px; color: white; margin: 1em 0}
.infoxBoxPopup .infoBox_tip{ width: 30px;height: 45px;position: absolute;top: 4px;left: -29px;background: url(img/maps/tip.png) no-repeat 0 0;}



/* AddThis Vertical Hover Menu */

.addthis_toolbox .custom_hover {
    position: relative;
}

.addthis_toolbox .custom_hover .custom_button {
    font-weight: bold;
    padding: 0px;
    color: #00bff3;
    cursor: pointer;
    -moz-border-radius: 5px 5px 0 0;    
    -webkit-border-radius: 5px 5px 0 0;
}

.addthis_toolbox .custom_hover .custom_button.active a span{
    text-decoration: underline;
}

.addthis_toolbox .hover_menu  {
    display: none;
    position: absolute;
    background: #101010;
    top: -276px;
    left: 0;
}

.addthis_toolbox .custom_hover .tower {
    -webkit-border-radius: 0 5px 0 0;   
    -moz-border-radius-topleft: 0;
    
}
.addthis_toolbox .hover_menu  {
    width: 118px;
    padding: 4px 2px 14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .hover_menu a {    
    position: relative;
    display: block;
    padding: 4px 0 4px 34px;
    text-decoration: none;
    color: #00bff3;
}

.addthis_toolbox .hover_menu a:hover {    
    background: #fff;
    opacity: 1!important;
    color: #101010!important;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.addthis_toolbox .hover_menu span {
    position: absolute;
    left: 8px;
    top: 4px;
}

.addthis_toolbox .hover_menu .more {
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 10px 0 10px;
    text-align: center;
    display: none;
}

.addthis_toolbox .hover_menu .more a {
    padding: 4px 0;
    margin: 0;
}

.addthis_toolbox .hover_menu .more a:hover {
    background: none;
}
.addthis_toolbox .hover_menu .more span {
    display: none;
}


/* HELP POPUP */
.infos_accessibility{width: 45px; height: 30px; background: url(img/buttons.png) no-repeat 0 0; display: block; position: absolute; top: 137px; right: 55px;}
.help{position: absolute; right: 6px; top: 107px;width: 30px; height: 30px;}
.help > a {background: url(img/help2.png) no-repeat 0 0;display: block;width: 30px;height: 30px;}
.help > a:hover {}

.help_popup{position: fixed; top: 50%; left: 50%; width: 880px; height: 670px; background: white; margin: -300px 0 0 -440px;display: none;z-index: 8001; border: 1px solid white;}
.help_overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;display: none;z-index: 8000; background: #101010;}
.help_popup_container{position: relative; padding: 15px; width: 850px; height: 640px;background: #101010}
.help_popup_container h3{color: white;font-size: 26px; line-height: 26px; margin: 15px 0 15px 0; font-family: 'Lir', Arial, Helvetica;text-align: center;}
.help_popup_container h5{color: white; font-size: 16px; margin:8px 0 10px 0; line-height: 20px;font-style: italic; text-align: center;}
.help_popup_container ul li, .help_popup_container ul li ul li{color: white; font-size: 12px; margin-bottom: 8px; line-height: 16px;}
.help_popup_container ul{padding-left: 210px;}
.help_popup_container ul ul {padding-left: 40px;}
.help_close{position: absolute; top:20px; right: 23px;background: url(img/help_close.png) no-repeat 0 0; width: 20px; height: 20px; text-indent: -9999px; display: block; content: '';-webkit-transition: all 0.8s ease-in-out;}
.help_close:hover{-webkit-transform: rotate(360deg)}
/* / HELP POPUP */


/* CREDITS POPUP */
.credit_popup{position: fixed; top: 50%; left: 50%; width: 500px; height: 450px; background: white; margin: -225px 0 0 -250px;display: none;z-index: 8001; border: 1px solid white;}
.credit_overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;display: none;z-index: 8000; background: #101010;}
.credit_popup_container{position: relative; padding: 15px; width: 470px; height: 420px;background: #101010}
.credit_popup_container h3{color: white;font-size: 26px; line-height: 26px; margin: 25px 0 30px 0; font-family: 'Lir', Arial, Helvetica;text-align: center;}
.credit_popup_container h5{color: white; font-size: 16px; margin:8px 0 80px 0; line-height: 20px;font-style: italic; text-align: center;}
.credit_popup_container a{text-decoration: underline; color: white}
.credit_popup_container ul li, .credit_popup_container ul li ul li{color: white; font-size: 12px; margin-bottom: 8px; line-height: 16px;margin-left: 0; padding-left: 0; list-style: none;}
.credit_close{position: absolute; top:20px; right: 23px;background: url(img/help_close.png) no-repeat 0 0; width: 20px; height: 20px; text-indent: -9999px; display: block; content: '';-webkit-transition: all 0.8s ease-in-out;}
.credit_close:hover{-webkit-transform: rotate(360deg)}
/* / CREDITS POPUP */


/* / INFOBOX MAP POPUP */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}


/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #header .header_container{width: 100%}
    #header .header_container .logo_app{margin-left: 15px;}
    #header .header_container .middle_header{width: 450px}
    #header .header_container .middle_header h1{font-size: 25px;}
    #header .header_container .middle_header h5{margin-left: auto; margin-right: auto}
    #header .header_container .translations{margin-right: 15px;}

    #categoryfilters .categories_container{width: 100%;}
    #categoryfilters .categories_container span{font-size: 12px;}
    #categoryfilters .categories_container .top_home {margin-right: 15px;}
    #categoryfilters .categories_container label {font-size: 14px}

    
    #footer .footer_container{width: 100%}
    #footer .footer_container .share_app{width: 50px; position: relative;}
    #footer .footer_container .share_app a span{display: none;}
    #footer .footer_container .footer_navigation {width: 330px;}
    #footer .footer_container .footer_navigation ul li a{font-size: 10px;}
    #footer .footer_container .networks span{font-size: 10px}
    #footer .footer_container .top_home {margin-right: 15px;}
    .infos_accessibility{/*right: 70px*/; display: none; }

    .help_popup_container h3{font-weight: normal}
    .help_popup_container h5{font-weight: normal}
    .help{right: 25px;}
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    
}

@media (-webkit-device-pixel-ratio: 2) {
    /*#categoryfilters .categories_container{background:red}*/
}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}