* {
    font-family: Roboto;
}

#chart {
    width: 960px;
    height: 600px;
    background: #ddd;
    display: inline-block;
    float: left;
    margin-left: 50px;
    margin-right: 50px;
}

#page-title {
    text-align: center;
}

text {
    pointer-events: none;
}

.grandparent text {
    font-weight: bold;
}

rect {
    fill: none;
    stroke: #fff;
}

rect.parent,
.grandparent rect {
    stroke-width: 2px;
}

.grandparent rect {
    fill: orange;
}

.grandparent:hover rect {
    fill: #ee9700;
}

.children rect.parent,
.grandparent rect,
rect {
    cursor: pointer;
}

.children rect.parent {
    fill: #90EE90;
    fill-opacity: .5;
    stroke: green;
}

.children:hover rect.child {
    fill: #bbb;
    fill-opacity: .5;
}

#sidebar {
    display: inline-block;
    width: 400px;
}

li[class^="level-"] {
    padding: 6px;
    font-family: Arial;
}

.level-1 {
    background-color: #90EE90;
}

.level-2 {
    background-color: #E0FFFF;
}

.level-3 {
    background-color: #FFB6C1;
}

.level-4 {
    background-color: #DDA0DD;
}

#instructions {
    float:right;
}

.center{
    display: block;
    margin: auto;
}

#img-div {
    height: 240px;
}

img {
    height: 100%;
}

.terminal {
    stroke: red;
}

.has-image { 
    stroke: black;
    stroke-width: 10;
}

#levels, #requests {
}

#requested-list {
    
}

#levels {
    height: 350px;
}
/*
#levels {
    float: left;
}

#requests {
    float: right;
}

#requested-list {
    float: right;
}

#levels-list {
    float: left;
}
*/