body {
    background-color: #F0F8FF;
    padding: 16px;
    font-size: 18px;
    font-family: 'Inconsolata','Consolas','Bitstream Vera Sans Mono','Courier New',Courier,monospace;
    /*font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;*/
    color: black;
    font-size: 20px;
}

h1 {
    text-decoration: underline;
    font-size: 2.25em;
}

h2 {
    font-size: 1.44em;
}

h3 {
    padding-left:25px;
}

h4 {
    padding-left:36px;
}

a{
    color: black;
    text-decoration: underline;
}

a:hover{
    color: blue;
}

.papertitle {
    font-style: italic;
    text-decoration: underline;
}

dl {
    padding-left:16px;
}
/* main page css*/

#nameplate {
    text-align: center;
}

#name {
    font-size: 2.25em;
}

#email {
    font-size: 1.25em;
    //font-style: italic;
    color: black;
}

#splash {
    min-height: 250px;
}


/* canvas, img {
    vertical-align: middle;
    padding: 10px;
} */

canvas {
    vertical-align: middle;
    padding: 10px;
}

.container {
    position: relative;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.25em;
}

.left {
    position: absolute;
    top: 5%;
    left: 5%;
    transform: translate(-5%, -5%);
/*    top: 8px;
    left: 16px;
*/
    font-size: 0.8em;
}

img {
    max-width: 100%;
    border-radius: 8px;
    opacity: 0.7;
    margin: auto;
    height: auto;
    display: block;
}

/* css for visualization */

rect.onPath {
    fill: green;
}
rect.unavailable {
    fill: #CBA;
}
rect.available {
    fill: #ABC;
}
rect.neighbor {
    fill: blue;
}
rect.restricted {
    fill: black;
}
rect.generic {
    fill: green;
}