/* Global and page layout */
@font-face {
    font-family: RiffTraxFont;
    src: url(/fonts/LaffRiotNF.ttf);
}
body {
    font: 1.0em arial, verdana;
}
h1, h2 {
    margin: 0;
}
h1 {
    font-size: 1.2em;
}
h2 {
    font-size: 1.0em;
}
a {
    text-decoration: none;
    color: #0000FF;
}
a:hover {
    text-decoration: underline;
}
header {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: solid 1px #BBB;
}
header nav a#mainLink {
    font-size: 2.2em;
    font-family: RiffTraxFont;
}
header nav ul#nav {
    display: inline;
}
header nav ul#nav li {
    display: inline;
    margin-right: 25px;
    font-weight: bold;
}
header nav form {
    display: inline;
}
footer {
    font-size: 0.8em;
    font-weight: bold;
    margin-top: 5px;
}
#pageContainer {
    display: flex;
    height: 100%;
}
#pageContainer .pageCell {
    border-radius: 5px;
    border: solid 1px #000;
    background-color: #EEE;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

/* Icons */
.iconified {
    padding-left: 20px;
    background-position: left center;
    background-repeat: no-repeat;
}
.iconlink {
    background-image: url("/img/icons/link.png");
}
.icongraph {
    background-image: url("/img/icons/graph.png");
}
.iconstatus {
    background-image: url("/img/icons/status.png");
}
.iconupdated {
    background-image: url("/img/icons/updated.png");
}
.iconnotes {
    background-image: url("/img/icons/notes.png");
}
.iconriffrences {
    background-image: url("/img/icons/riffrence.png");
}
.iconriffrencedby {
    background-image: url("/img/icons/riffrencedby.png");
}

/* Index */
#indexMenu {
    width: 100%;
}
#indexContents {
    padding: 5px;
}
#indexStats li {
    margin-bottom: 5px;
}
.homepageTable {
    margin-left: 25px;
}

/* Methodology */
#methodMenu {
    width: 100%;
}
#methodContents {
    padding: 5px;
}

/* Stats */
#statsMenu {
    width: 100%;
}
#statsContents {
    padding: 5px;
}
.statsNumberCell {
    text-align: right !important;
}
.statsTable {
    display: table;
    width: 100%;
}
.statsTable > div {
    display: table-row;
}
.statsTable > div > div {
    display: table-cell;
    padding: 10px 10px 10px 0px;
    width: 25%;
}
.statsTable > div > div > table {
    width: 100%;
}

/* List View */
#listMenu {
    width: 15%;
    margin: 0 10px 0 0;
    overflow-y: auto;
}
#listMenu ul {
    padding: 0;
}
#listMenu li {
    list-style-type: none;
}
#listMenu li, #listDetail li {
    margin-bottom: 5px;
}
#listMenuContents {
    padding: 5px;
    margin: 0;
}
#listDetail {
    width: 85%;
    padding: 5px;
    margin: 0;
    overflow-y: auto;
}
#listViewList li {
    padding-bottom: 5px;
    font-weight: bold;
}
#listViewCollectionList li {
    padding: 0 0 5px 15px;
}
#browseListAlpha {
    margin: 0;
    padding: 0;
}
#browseListAlpha li {
    list-style-type: none;
    display: inline;
    margin-right: 5px;
    font-weight: bold;
}
#browseRiffList {
    border-collapse: separate;
    border-spacing: 0;
    border: solid 1px #000;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-radius: 5px;
    background-color: #FFF;
}
#browseRiffList th {
    text-align: left;
    border-bottom: solid 1px #000;
    padding: 5px;
    background-color: #CCC;
}
#browseRiffList td {
    padding: 5px;
}
#browseRiffList td:first-child {
    padding-right: 30px;
}
#browseRiffList tr:nth-child(2n) {
    background-color: #EEE;
}
#riffDetail {
    width: 85%;
    padding: 5px;
    margin: 0;
}
#riffDetail h1 {
    text-decoration: underline;
    margin-bottom: 20px;
}
#riffDetail h2 {
    margin-top: 20px;
}
#riffDetail ol {
    margin: 0;
    padding-left: 25px;
}
#riffDetail ol li {
    padding-bottom: 5px;
}

/* Graph View */
#nodeDetail {
    width: 20%;
    margin: 0 10px 0 0;
    overflow-y: auto;
}
#nodeDetail #nodeDetailContents {
    padding: 5px;
    margin: 0;
}
#nodeDetail #nodeDetailContents h1 {
    text-decoration: underline;
    margin-bottom: 20px;
}
#nodeDetail #nodeDetailContents h2 {
    margin-top: 20px;
}
#nodeDetail #nodeDetailContents ol {
    margin: 0;
    padding-left: 25px;
}
#nodeDetail #nodeDetailContents ol li {
    padding-bottom: 5px;
}
#nodeDetail #nodeDetailContents a:hover {
    cursor: pointer;
}
#graphDetail {
    width: 80%;
    margin: 0;
}
#noStorageMsg {
    font-weight: bold;
}
.InfoToggleButton {
    font-weight: bold;
    text-align: right;
    padding: 5px 7px 5px 0;
    background-color: #DDD;
}
.InfoToggleButton:hover {
    cursor: pointer;
}
.InfoPanelCollapsed {
    width: 25px !important;
}
.GraphPanelExpanded {
    width: 100% !important;
}
#graphCanvas h1 {
    padding: 5px;
}
.colorSelection {
    margin: 0;
    padding: 0;
}
.colorSelection li {
    list-style-type: none;
    display: inline;
}
.colorSelection li p {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: solid 1px #000;
    cursor: pointer;
    font-size: 0;
}
#collectionName {
    position: absolute;
    display: none;
}

/* Graph View Tabs */
#tabControl {
    margin-top: 5px;
    display: none;
}
.tab {
    display: inline;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 5px 5px 0 0;
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: #DDD;
}
.tabSelected {
    background-color: #ffd800;
}
.tabBody {
    border: solid 1px #000;
    padding: 5px;
    margin-top: 5px;
    display: none;
    background-color: #FFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.tabBodySelected {
    display: block;
}