study-overview/test-page/index.css

a high-level summary of study accrual and data cleaning metrics

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans';
}
#title {
    width: 96%;
    padding: 0 0 12px 0;
    border-bottom: 2px solid lightgray;
    margin: 24px 2% 12px 2%;
    font-size: 32px;
    font-weight: normal;
}
#subtitle {
    width: 96%;
    margin: 0 2% 12px 2%;
    font-size: 24px;
    font-weight: lighter;
}
#container {
    width: 96%;
    margin: 12px 2%;
    display: inline-block;
}

/*
.study-overview {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.so-controls {
    width: calc(100% - 36px);
    margin: 0px 18px;
}
.so-control-group {
    display: inline-block;
}
.so-control-group--export {
    float: right;
    padding: 4px;
    border: 2px solid black;
    background: #aaa;
    color: black;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}
.so-control-group--export:hover {
    border: 2px solid #aaa;
    background: black;
    color: #aaa;
}
.so-control-group--export .so-control-group__label {
    margin-right: 0px;
}
.so-control-group__label {
    margin-right: 8px;
}
.so-card {
    display: flex;
    flex-basis: calc(50% - 40px);
    justify-content: top;
    flex-direction: column;
    display: inline-block;
    width: calc(50% - 40px);
    margin: 18px;
    border: 1px solid #aaa;
    border-radius: 4px;
    overflow-x: auto;
}
.so-card > * {
    width: 100%;
    vertical-align: top;
    display: table;
}
.so-card__header {
    font-size: 24px;
    margin: 4px 8px;
    padding: 4px 8px;
    font-weight: lighter;
    border-bottom: 1px solid #aaa;
}
.so-card__table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    margin: 4px 8px;
    padding: 4px 8px;
    width: calc(100% - 16px);
}
.so-card__table__header {
}
.so-card__table__header__cell {
    padding: .5em 1em;
}
.so-card__table__row {
}
.so-card__table__row:hover {
    outline: 1px solid blue;
}
.so-card__table__row:nth-child(2n) {
    background: #f2f2f2;
}
.so-card__table__row--by-group {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}
.so-card__table__row__cell {
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}
.so-card__table__row__cell:first-child {
    white-space: nowrap;
}
.so-card__table__row__cell:not(:first-child) {
    font-family: 'Lucida Console';
    white-space: pre;
}
.so-card__table__row--by-value .so-card__table__row__cell:first-child {
    padding-left: 3em;
}
*/