@import url(//fonts.googleapis.com/css?family=Oxygen:300,400,700|EB+Garamond);

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family : "Oxygen",  Arial, sans-serif;
	font-size : 10px;
    line-height: 1.6em;
}

html.lt-ie9, html.lt-ie9 body {
    width  : auto;
    height : 100px;
}

.unsupported-browser {
    height      : 30px;
    line-height : 30px;
    padding     : 5px 0 5px 45px;
    margin      : 8px 8px 8px 100px;
    background  : url(ie-notice.png) no-repeat center left;
    display     : none;
}
html.lt-ie9 .unsupported-browser {
    display : block;
}

html.lt-ie9 #graph-container {
    display : none;
}

a {
    color : #333;
}
a:hover, a:focus, a:active {
    text-decoration : none;
    outline         : none;
}
.red, .active,
a:hover, a:focus, a:active,
.control.active, .control:hover {
    color : #7d0a0d;
}
.control {
    cursor : pointer;
    color  : #333;
}
.control.active {
    font-weight : bold;
}
.error {
    color : #c09089; /* http://meyerweb.com/eric/tools/color-blend/ ; #ccc and .red ; 5 midpoints */
}
.phonodia {
    color       : #8dc023;
    font-weight : bold;
}

#top {
    position    : absolute;
    top         : 0;
    left        : 0;
    right       : 0;
    height      : 48px;
    z-index     : 10;
    background  : rgb(255, 255, 255); /* fallback for browsers that don't support rgba */
    background  : rgba(255, 255, 255, 0.85);
}
#top-inner {
    margin   : 18px 18px 0 18px;
    position : relative;
}
#top .control {
    height : 30px; /* #top height minus #top-inner margin-top */
}

#top #show-all-poets {
    position : absolute;
    left     : 0;
    top      : 0;
}
#top #show-all-terms {
    position : absolute;
    left     : 115px;
    top      : 0;
}

#top .control.right {
    float       : right;
    margin-left : 8px;
}
#title {
    margin   : 0;
    padding  : 0;
    position : absolute;
    left     : 180px;
    height   : 30px; /* #top height minus #top-inner margin-top */
}

#graph {
    position   : absolute;
    top        : 50px;
    left       : 160px;
    right      : 8px;
    bottom     : 8px;
    z-index    : 1;
    visibility : hidden;
}

#poets {
    position    : absolute;
    top         : 100px;
    left        : 0;
    bottom      : 12px;
    width       : 160px;
    list-style  : none outside none;
    padding     : 0px 0px 0px 20px;
    overflow    : hidden;
    line-height : 24px;
    z-index     : 5;
}
#poets li {
    position    : relative;
    font-size   : 1.2em !important;
    line-height : 20px;
    height      : 20px;
}
#poets .poet {
    width   : 100%;
    color   : #333;
    display : inline-block;
}
#poets .poet:hover, #poets .poet.active {
    color : #7d0a0d;
}
#poets .cover {
    position   : absolute;
    background : #fff;
    left       : 0;
    right      : 0;
}
#poets .cover .border {
    position      : absolute;
    left          : 0;
    right         : 0;
    line-height   : 9px; /* 50% of #poets line-height */
    border-bottom : 1px solid #333;
}