#primary, #main {
	position: relative;
    width: 100%;
    min-height: 1000px;
}

#loading {
    text-align: center;
}


/* ========================= nav =========================== */
nav#links {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    padding: 8px 16px 32px 32px;
    background: url("../img/menu_bg.jpg") bottom right;
    background-size: cover;
    box-shadow: 4px 4px 32px -8px #000000;
    z-index: 10;

    transition: all .8s ease-in-out;
}

nav#links.closed {
    top: -270px;
}

body.admin-bar nav#links {
    margin-top: 32px;
}

nav#links span#close {
    position: absolute;
    display: block;
    cursor: pointer;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

nav#links span#close:after {
    position: absolute;
    content: "";
    bottom: 8px;
    left: 50%;
    width: 20px;
    height: 20px;
    background: url("../img/arrow.png") left center no-repeat;
    transform: rotate(270deg);
}

nav#links.closed span#close:after {
    transform: rotate(90deg);
}

nav#links ul {
    list-style-image: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}


nav#links ul h2 {
    position: relative;
    margin: 4px 0;
    font-size: 22px;
    line-height: 28px;
    padding-left: 24px;
    cursor: pointer;
}
  
nav#links ul h2:hover, 
nav#links ul h2.open {color: #444444; text-decoration: underline;}

nav#links ul h2:before  {
    position: absolute;
    left: 0px;
    top: 8px;
    content: "";
    width: 18px;
    height: 18px;
    background: url("../img/arrow.png") left center no-repeat;
    background-size: 18px 18px;
    transition: all .3s ease-in;
}

nav#links ul h2.open:before { 
    transform: rotate(90deg);
}

nav#links ul ul {
    width: 275px;
    padding: 8px;
    position: absolute;
    left: -80px;
    background: url("../img/text_bg.jpg") top right;
    box-shadow: 4px 4px 32px -8px #000000;
    z-index: 12;
}

nav#links ul ul li a {
    font-size: 18px;
    line-height: 18px;
}

/*=========================== map ============================== */

#map_container {
    display: none;
    position: relative;
	width: 1024px;
    height: 1151px;
    margin: 0 auto;
}

/*#map_container img {
    max-width: 1024px;
}*/

#map_container img#background {
	width: 1024px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    opacity: 0.8;
}

#map_container img#mask {
    width: 1024px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    z-index: 5;
}


/* ======================== Highlights ========================= */
img.highlight {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    z-index: 2;

    transition: opacity .2s;
}

body img.highlight.hover {
    opacity: 1 !important;
}

img#foret1 {top: 390px;left: 477px;}
img#foret2 {top: 447px;left: 290px;}
img#foret3 {top: 699px;left: 214px;}
img#foret4 {top: 541px;left: 510px;}

img#montagne1 {top: 332px; left: 285px;}
img#montagne2 {top: 266px; left: 281px;}
img#montagne3 {top: 456px; left: 352px;}
img#montagne4 {top: 607px; left: 709px;}
img#montagne5 {top: 827px; left: 414px;}

img#mer1 {top: 274px; left: 41px;}
img#mer2 {top: 243px; left: 280px;}
img#mer3 {top: 39px; left: 472px;}
img#mer4 {top: 69px; left: 824px;}
img#mer5 {top: 926px; left: 743px;}


img#fleuve1 {top: 405px; left: 293px;}
img#fleuve2 {top: 388px; left: 618px;}
img#fleuve3 {top: 568px; left: 532px;}
img#fleuve4 {top: 682px; left: 164px;}

img#cite1 {top: 317px; left: 427px;}
img#cite2 {top: 370px; left: 578px;}
img#cite3 {top: 366px; left: 842px;}
img#cite4 {top: 522px; left: 691px;}
img#cite5 {top: 523px; left: 447px;}
img#cite6 {top: 527px; left: 294px;}
img#cite7 {top: 593px; left: 207px;}
img#cite8 {top: 726px; left: 223px;}
img#cite9 {top: 824px; left: 271px;}
img#cite10 {top: 823px; left: 617px;}
img#cite11 {top: 753px; left: 691px;}

img#fort1 {top: 281px; left: 461px;}
img#fort2 {top: 242px; left: 684px;}
img#fort3 {top: 344px; left: 639px;}
img#fort4 {top: 378px; left: 403px;}
img#fort5 {top: 446px; left: 489px;}
img#fort6 {top: 495px; left: 347px;}
img#fort7 {top: 539px; left: 530px;}
img#fort8 {top: 483px; left: 695px;}
img#fort9 {top: 683px; left: 379px;}

img#region1 {top: 18px; left: 559px;}
img#region2 {top: 51px; left: 401px;}
img#region3 {top: 157px; left: 190px;}
img#region4 {top: 405px; left: 175px;}
img#region5 {top: 478px; left: 122px;}
img#region6 {top: 531px; left: 68px;}
img#region7 {top: 464px; left: 750px;}
img#region8 {top: 395px; left: 626px;}
img#region9 {top: 216px; left: 614px;}
img#region10 {top: 823px; left: 38px;}
img#region11 {top: 495px; left: 95px;}

img#royaume1 {top: 68px; left: 78px;}
img#royaume2 {top: 269px; left: 519px;}
img#royaume3 {top: 563px; left: 338px;}

@media only screen and (max-width: 1185px) {
    #map_container,
    #map_container img#background,
    #map_container img#mask {
        width: 100%;
        height: auto;
    }

    #map_container img#mask {
        position: relative;
    }

    body #map_container img.highlight {
        display: none;
    }
}