/*.mapDiv {
    width: 1024px;
    height: 768px;
}*/



.highlight {
    /*what a nice way to highlight*/
    display: none;
}

.simu {
    background-color: blue;
}

.question {
    background-color: orange;
}

.image {
    background-color: green;
}

.audio {
    background-color: red;
}

.video {
    background-color: purple;
}

.other {
    background-color: brown;
}

.map {
    background-color: violet;
}

.error {
    background-color: grey;
}


.board {
    width: 32px;
    height: 32px;
    display: inline-block;
}

.board img {
    max-width: 32px;
    max-height: 32px;
    position: absolute;
    /*bottom: 0px;*/
}

.board:hover img{
    max-width: 205px;
    max-height: 295px;
    z-index: 99;
    top: 5px;
    right:0px;
}
ul {
    list-style-type: none;
    overflow: auto;
    overflow-y: hidden;
    display: inline-block;
    /*max-width:100%;
    margin: 0 0 1em;
    white-space: nowrap;
    height:200px;*/
}

li {
    display: inline-block;
    vertical-align: top;
    padding: 2px;
    margin-bottom: 2px;
}

body{
    height: 100%;
    padding:0;
    margin:0;
}

main{
    display: flex;
    flex-direction: column;
    height:100%;
}

.mapDiv {
    flex-grow:1;
}
.sequenceContainer{
    flex-grow: 0;
    min-height:300px;
    padding-right: 210px;
    position: relative;

}