/* Helpers */ @mixin font-family-sans-serif { font-family: Georgia, Times, "Times New Roman", serif; } /* Styles */ .sheet-section { /* Fields */ input, select { max-width: 100%; width: auto; } textarea { max-height: 75px; } img { height: auto; max-width: 100%; } table { width: 100%; tr { th, td { padding-top: 5px; padding-bottom: 5px; &:nth-child(1) { width: 52%; } &:nth-child(2) { width: 48%; } input { &[type="text"] { width: 100%; } } } } } .sheet-note { color: #999999; font-size: 8px; line-height: 125%; display: block; } /* Sections */ &.sheet-section-general { .sheet-logo { height: 38px; line-height: 38px; text-align: left; img { max-width: 100%; height: 28px; } } .sheet-callout { background: #EFEFEF; padding-left: 10px; padding-right: 10px; font-size: 9px; label { margin-bottom: 2px; } } .sheet-conditions { background: #EFEFEF; .sheet-field { overflow: hidden; } h4 { color: #FFFFFF; right: -10px; left: -10px; background: #666666; display: block; height: 20px; position: relative; text-align: center; line-height: 20px; margin-bottom: 5px; width: calc(100% + 20px); } table { tr { th, td { vertical-align: top; } } } input { &[type="checkbox"] { float: left; margin-right: 5px; } } } } &.sheet-section-traits { table { tr { th, td { text-align: left; vertical-align: top; &:nth-child(1) { width: 45%; } &:nth-child(2), &:nth-child(3), &:nth-child(4) { padding-left: 10px; padding-right: 10px; width: 20%; } &:nth-child(3) { width: 15%; } &:nth-child(4) { width: 20%; } select { width: 100%; } } th { @include font-family-sans-serif; font-size: 10px; text-align: left; text-transform: uppercase; &:nth-child(3), &:nth-child(4) { text-align: center; } } td { text-align: center; } } } } &.sheet-section-abilities { table { tr { th, td { text-align: left; vertical-align: top; &:nth-child(1) { padding-right: 10px; width: 35%; } &:nth-child(2) { width: 30%; } &:nth-child(3) { width: 35%; } } } thead { tr { th { @include font-family-sans-serif; font-size: 10px; text-transform: uppercase; } } } } } &.sheet-section-skills { table { tr { th, td { text-align: left; vertical-align: top; &:nth-child(1) { padding-right: 10px; width: 35%; } &:nth-child(2) { width: 30%; } &:nth-child(3) { width: 35%; } } } thead { tr { th { @include font-family-sans-serif; font-size: 10px; text-transform: uppercase; } } } } } }