* {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;

    margin: 0;
    padding: 0;
}

ul, ol{
    list-style:none;
}

body{
    background-image: url('./Images/Background.png');
    background-position: center top;
    backgroud-size: cover;
    
    padding: 0 10%;
    padding-bottom: 100px;
}

header{
    background-image: url('./Images/Bandeau.png');
    background-position: center -60px;
    background-repeat: no-repeat;
    
    width: 100%;
    height: 350px;
}


.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10{
    background-position: center 50%;
    height: 70px;
    width: 35px;
}

.bb1, .bb2, .bb3, .bb4, .bb5, .bb6, .bb7, .bb8, .bb9, .bb10{
    background-position: center -35px;
    height: 140px;
    width: 70px;
}

.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10,
.bb1, .bb2, .bb3, .bb4, .bb5, .bb6, .bb7, .bb8, .bb9, .bb10{
    vertical-align:middle;
    background-repeat: no-repeat;
    padding: 5px;
}

.b1{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_1.png'); }
.b2{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_2.png'); }
.b3{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_3.png'); }
.b4{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_4.png'); }
.b5{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_5.png'); }
.b6{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_6.png'); }
.b7{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_7.png'); }
.b8{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_8.png'); }
.b9{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_9.png'); }
.b10{ background-image: url('./Images/Perso_ceinture/SMALL/Perso_small_10.png'); }

.bb1{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_1.png'); }
.bb2{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_2.png'); }
.bb3{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_3.png'); }
.bb4{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_4.png'); }
.bb5{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_5.png'); }
.bb6{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_6.png'); }
.bb7{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_7.png'); }
.bb8{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_8.png'); }
.bb9{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_9.png'); }
.bb10{ background-image: url('./Images/Perso_ceinture/BIG/Perso_big_10.png'); }

#mapcontainer{
    width: 100%;
    height: 550px;
    display: table-row
}

    #mapcontainer > *{
        margin: 0 auto;
        /*position: relative;*/
        display: table-cell;
        vertical-align: top;
    }

    #map{
        min-width: 567px; /* SVG width */
        width: 55%;
    }
    
    #info {
        position: relative;
        width: 45%;
        background-color: white;
        background-color: rgba(255, 255, 255, 0.8);
        height: 550px;
        /*overflow-y:scroll;*/
    }
    
        .info-commune{
            overflow-y: scroll;
            height: 100%;
        }
    
            .info-commune > *{
                padding: 0 0.4em;
            }
            
            .info-commune > img {
                margin: 0 5%;
            }
    
            .commune{
                display: block;
                /*position: absolute;*/
                right: 0;
                top: 0;
                background-color: white;
                background-color: rgba(255, 255, 255, 0.5);
                text-indent: 1em;
                
                padding: 0.2em;
                font-weight: bold;
                font-size: 1.3em;
                
            }
    
    
            .infoPiece{
                display: table-row;
            }
            
                .infoPiece > *{
                    display: table-cell;
                    vertical-align: middle;
                }
            
                .infoPiece .desc{
                    text-transform: uppercase;
                    color: #555;
                    font-size: 0.65em;
                }
            
                .infoPiece .value{
                    font-weight: bold;
                    font-size: 1.2em;
                }
            
            
            .bonhommes{
                display: table-row;
            }
                .bonhommes > *{
                    display: table-cell;
                }
                
            h1{
                font-size: 1.3em; 
            }
            
            h1, p{
                padding: 0.4em;
            }
            
            p{
                text-indent: 1em;
                line-height: 1.2em;
            }
        
        
#plus-loin{
    background-color: white;
    background-color: rgba(255, 255, 255, 0.8);
    margin-top: 1em;
    padding: 0.7em;
}

    #plus-loin .section{
        margin-bottom: 2em;
    }

        #plus-loin .section li{
            text-indent: 1.3em;
            margin: 0.5em 0;
        }
    
            .question{
                text-indent: 1.3em;
                font-weight: bold;
                display:block;
                padding: 0.2em 0;
            }
    
.hgroup > *{
    padding: 0.2em;
}
        
ol.interview{
    display: table;
    border-collapse: collapse;
    clear: both;
}

    ol.interview > li{
        display: table-row;
    }

        ol.interview > li > *{
            display: table-cell;
            vertical-align: middle;
            /*border: 1px solid black;*/
        }