roll20-character-sheets/Age of Ambition/aoa.css

/*
 * Universal
 */

.sheet-section {
    margin-bottom: 15px;
    width: 836px;
}

.sheet-line-input {
    display: inline-block;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: solid gray 1px;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

input.sheet-arrow-toggle {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    cursor: pointer;
    z-index: 1;
}

.sheet-arrow-label {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
}

input.sheet-arrow-toggle:checked ~ .sheet-arrow-label {
    display: inline-block;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);

}

input.sheet-arrow-toggle:not(:checked) ~ .sheet-skill-notes {
    display: none;
}

/*
 * Basics Section
 */

.sheet-basics-section {
    margin-top: 10px;
}

.sheet-basics-label {
    display: inline-block;
    width: 15%;
    text-align: right;
    font-size: 1em;
    margin-bottom: 5px;
}

input.sheet-name-input,
input.sheet-people-input,
input.sheet-creed-input,
input.sheet-idiosyncrasy-input {
    display: inline-block;
    width: 80%;
    height: 18px;
}

hr.sheet-basics-divider {
    margin: 10px;
}

.sheet-people-notes-input {
    width: 665px;
    height: 50px;
    margin-left: 135px;
    resize: vertical;
    border: 0 none;
    border-bottom: solid 1px gray;
}

.sheet-luck-box {
    width: 415px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.sheet-ambition-input {
    width: 100%;
}

.sheet-experiences-box {
    width: 415px;
    display: inline-block;
    vertical-align: top;
}

.sheet-experience-input {
    width: 360px;
}

select.sheet-experience-stat {
    width: 100px;
    border: none;
    border-bottom: solid 1px gray;
    font-weight: bold;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.sheet-experience-stat::-ms-expand {
    display: none;
}

/*
 * Stats Section
 */

.sheet-stats-section {
    margin-top: 10px;
}

.sheet-stats-box {
    display: inline-block;
    width: 99px;
    border: solid gray 1px;
    padding-top: 5px;
    text-align: center;
}

.sheet-stat-label {
    text-align: center;
    font-weight: bold;
    font-size: 1em;
}

input[type=number].sheet-stat-input,
input[type=text].sheet-stat-input{
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    border: none;
    background: white;
}

/*
 * Tabs section
 */

.sheet-tab-button {
    position: relative;
    width: 80px;
    height: 22px;
    margin: 0;
    opacity: 0;
    z-index: 9999;
    border: none;
}

.sheet-tab {
    display: inline-block;
    position: relative;
    width: 78px;
    height: 23px;
    margin: 0 0 0 -80px;
    padding: 0 0 0 0;
    cursor: pointer;
    border: 1px solid lightgray;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    line-height: 23px;
    color: lightgray;
}

input.sheet-tab-button:checked + .sheet-tab {
    border: 1px solid gray;
    border-bottom-color: white;
    color: #333;
}

.sheet-tabs-hr {
    border-bottom: solid gray 1px;
    margin-top: -1px;
}

input.sheet-tab-button.sheet-basics-tab:not(:checked) ~ .sheet-basics-section,
input.sheet-tab-button.sheet-skills-tab:not(:checked) ~ .sheet-skills-section,
input.sheet-tab-button.sheet-traits-tab:not(:checked) ~ .sheet-traits-section,
input.sheet-tab-button.sheet-combat-tab:not(:checked) ~ .sheet-combat-section,
input.sheet-tab-button.sheet-social-tab:not(:checked) ~ .sheet-social-section,
input.sheet-tab-button.sheet-inventory-tab:not(:checked) ~ .sheet-inventory-section,
input.sheet-tab-button.sheet-lifepath-tab:not(:checked) ~ .sheet-lifepath-section {
    display: none;
}

/*
 * Skills section
 */

.sheet-skill-column {
    width: 32%;
    margin-top: 10px;
    margin-right: 10px;
    display: inline-block;
    float: left;
}

.sheet-skill-header {
    text-align: center;
    border-bottom: solid 1px gray;
    margin-bottom: 10px;
}

.sheet-skill-input {
    margin-left: 22px;
    width: 210px;
}

select.sheet-skill-rank {
    width: 30px;
    height: 24px;
    font-size: 0.9em;
    border: none;
    border-bottom: solid 1px gray;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    top: 3px;
}

.sheet-skill-notes-input {
    width: 260px;
    height: 50px;
    resize: vertical;
    border: 0 none;
    border-bottom: solid 1px gray;
}

/*
 * Traits section
 */

.sheet-traits-section {
    padding-top: 10px;
}

.sheet-traits-header {
    text-align: center;
    margin-bottom: 5px;
}

.sheet-traits-input {
    width: 100%;
    height: 200px;
    resize: vertical;
    border: solid 1px gray;
}

/*
 * Combat section
 */

.sheet-combat-section {
    padding-top: 10px;
}

.sheet-combat-modifiers-box {
    margin-top: 10px;
    margin-bottom: 5px;
}

.sheet-combat-mod-header {
    font-weight: bold;
    margin-left: 25px;
    font-size: 1.2em
}

.sheet-invisible-box {
    visibility: hidden;
}

.sheet-attack-label {
    display: inline-block;
    padding-right: 0;
}

.sheet-attack-input {
    margin-left: 22px;
    width: 180px;
}

.sheet-attack-properties {
    width: 390px;
}

label.sheet-attack-array {
    width: 25px;
    text-align: center;
    font-size: 0.9em;
}

input[type="number"].sheet-attack-array {
    width: 25px;
    text-align: center;
}

.sheet-attack-damage {
    text-align: center;
    width: 90px;
}

select.sheet-attack-damage {
    width: 90px;
    font-size: 0.9em;
    text-align: center;
    border: none;
    border-bottom: solid 1px gray;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.sheet-attack-damage::-ms-expand {
    display: none;
}

/*
 * Social section
 */

.sheet-social-section {
    margin-top: 10px;
}

.sheet-social-box {
    width: 403px;
    display: inline-block;
    padding-right: 10px;
    vertical-align: top;
}

.sheet-influence-header {
    font-weight: bold;
    font-size: 1.1em;
}

.sheet-influence-source {
    display: inline-block;
    width: 345px;
}

.sheet-influence-spent {
    display: inline-block;
    width: 50px;
    text-align: center;
}

input[type=text].sheet-title-input {
    width: 160px;
}

select.sheet-strata-input {
    border: none;
    border-bottom: solid 1px gray;
    font-weight: bold;
    width: 80px;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.sheet-strata-input::-ms-expand {
    display: none;
}

input.sheet-standing-input[type=number] {
    width: 72px;
    text-align: center;
    font-weight: bold;
}

.sheet-standing-influence {
    width: 75px;
    text-align: center;
}

.sheet-influence-input {
    width: 320px;
}

.sheet-bond-target {
    display: inline-block;
    width: 187px;
    margin-left: 25px;
}

.sheet-bond-type {
    display: inline-block;
    width: 105px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.sheet-bond-type::-ms-expand {
    display: none;
}

.sheet-bond-exhausted {
    display: inline-block;
    text-align: center;
    width: 75px;
}

.sheet-bond-line {
    margin-left: 25px;
    width: 100%;
}

.sheet-bond-input {
    width: 187px;
}

.sheet-social-divider {
    margin: 5px;
}

/*
 * Inventory section
 */

.sheet-inventory-section {
    margin-top: 10px;
}

.sheet-inventory-wealth-box {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.sheet-inventory-wealth-label {
    display: inline-block;
    width: 100px;
}

.sheet-wealth-label {
    text-align: center;
}

.sheet-wealth-box {
    display: inline-block;
    width: 95px;
    height: 60px;
    border: solid gray 1px;
    padding-top: 5px;
    text-align: center;
}

.sheet-wealth-input {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    border: none;
    background: white;
}

.sheet-inventory-quick {
    width: 100%;
    height: 100px;
    resize: vertical;
    border: solid 1px gray;
}

.sheet-item-name {
    width: 275px;
    margin-left: 25px;
}

.sheet-item-properties {
    width: 420px;
}

.sheet-item-number {
    width: 50px;
    text-align: center;
}

.sheet-item-page {
    width: 50px;
    text-align: center;
}

.sheet-item-notes-input {
    width: 100%;
    height: 50px;
    resize: vertical;
    border: 0 none;
    border-bottom: solid 1px gray;
}

/*
 * Lifepath section
 */

.sheet-lifepath-section {
    margin-top: 10px;
}

.sheet-training-boxes {
    text-align: center;
    padding-bottom: 10px;
}

.sheet-lifepath-input {
    width: 100%;
    margin-bottom: 10px;
}

.sheet-lifepath-textarea {
    height: 50px;
    width: 393px;
    border: solid 1px gray;
}

.sheet-attempt {
    border: solid 1px gray;
    margin-bottom: 10px;
    padding: 5px;
}

.sheet-attempt > textarea.sheet-lifepath-textarea {
    width: 381px;
}

.sheet-career-age {
    margin-right: 20px;
    text-align: center;
    margin-bottom: 10px;
}

.sheet-lifepath-career {
    width: 320px;
    margin-bottom: 10px;
}

select.sheet-career-strata {
    width: 100px;
}

.sheet-lifepath-title {
    width: 208px;
}

.sheet-lifepath-age {
    margin-right: 30px;
    position: relative;
    text-align: center;
    margin-bottom: 10px;
    top: 5px;
}

.sheet-lifepath-wealth-box {
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 10px;
}

.sheet-lifepath-wealth-box .sheet-wealth-box {
    width: 95px;
    height: 45px;
}

.sheet-lifepath-wealth-box label {
    text-align: center;
    margin: 0;
}