User:Alistair3149/sandbox/shiplisttest/styles.css

.card-table-header { margin-top: 1.6rem; font-weight: bold; }

.card-table-list { font-size: 0.875rem; }

display: block; border-spacing: 0; font-size: 0.875rem; }
 * 1) card-table {

display: block; margin: 0 auto; max-width: 860px; white-space: nowrap; overflow: auto; }
 * 1) card-table thead {

margin-bottom: 10px; display: flex; }
 * 1) card-table thead tr {

display: flex; flex-wrap: wrap; line-height: 1.2; justify-content: center; }
 * 1) card-table tbody {

.headerSort { margin-right: 6px; padding: 5px 21px 5px 12px; border: 1px solid #eaecf0; border-radius: 40px; background-color: white; display: block; }

.headerSort:hover { background-color: #eaecf0; }

.headerSort.headerSortUp, .headerSort.headerSortDown { background-color: #36c; border-color: #36c; color: white; }

.headerSort.headerSortUp:hover, .headerSort.headerSortDown:hover { background-color: #2a4b8d; }

padding: 0 15px; display: block; }
 * 1) card-table td {

margin: 10px; width: 302px; border: 1px solid #eaecf0; border-radius: 12px; box-sizing: border-box; font-weight: bold; background-color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06); display: flex; flex-wrap: wrap; }
 * 1) card-table tbody tr {

/* Name field */ width: 100%; margin-bottom: 0.2rem; padding-top: 15px; font-size: 1.25rem; font-weight: 600; }
 * 1) card-table tbody tr td:first-of-type {

margin-bottom: 15px; width: 100%; font-size: 0.825rem; font-weight: normal; }
 * 1) card-table .data-manufacturer {

.data-role, .data-status { margin-top: 5px; width: 100%; }

.data-standalonecost, .data-warbondcost { margin-top: 20px; width: calc(50% - 30px); }

.data-role:before, .data-status:before, .data-standalonecost:before, .data-warbondcost:before { color: #72777d; font-size: 0.8125rem; font-weight: normal; letter-spacing: .75px; }

.data-standalonecost:before, .data-warbondcost:before { margin-bottom: 4px; display: block; }

.data-role:before, .data-status:before { margin-right: 10px; }

.data-role:before { content: "Role"; }

.data-status:before { content: "Status"; }

.data-standalonecost:before { content: "Standalone"; }

.data-warbondcost:before { content: "Warbond"; }

.data-standalonecost-value, .data-warbondcost-value { font-size: 1.4rem; font-weight: bold; }

.mw-plusminus-pos { color: #006400; }

.mw-plusminus-neg { color: #8b0000; }

.mw-plusminus-null { color: #a2a9b1; }

width: 100%; margin-top: 10px; padding: 10px 15px; border-radius: 0 0 12px 12px; align-self: flex-end; font-size: 0.825rem; font-weight: normal; letter-spacing: .75px; text-align: center; background-color: #f8f9fa; }
 * 1) card-table .data-availability {

background-color: #00af89; color: white; }
 * 1) card-table .data-availability.data-availability-alwaysavailable {

background-color: #1155cc; color: white; }
 * 1) card-table .data-availability.data-availability-timelimited {

background-color: #d33; color: white; }
 * 1) card-table .data-availability.data-availability-quantitylimited {

/* This does not belong here but needed before the skin is updated */ @media only screen and (max-width: 720px) { .floatnone { margin: 0.6rem -20px !important; } }

@media only screen and (max-width: 684px) { #card-table tbody tr { width: 100%; } }

@media (prefers-color-scheme: dark) { .headerSort { border-color: #2b2f36; background-color: #24272f; }

.headerSort:hover { background-color: #2b2f36; }

#card-table tbody tr { border-color: #2b2f36; background-color: #24272f; }

.data-role:before, .data-status:before, .data-standalonecost:before, .data-warbondcost:before { color: #a0a1a5; }

#card-table .data-availability.data-availability-alwaysavailable { background-color: #14866d; }

#card-table .data-availability.data-availability-timelimited { background-color: #1155cc; }

#card-table .data-availability.data-availability-quantitylimited { background-color: #b32424; } }

max-width: 122px; overflow-wrap: break-word; }
 * 1) card-table tbody tr td:first-of-type,
 * 2) card-table .data-manufacturer,
 * 3) card-table .data-role {

padding: 0; position: absolute; margin-left: 150px; overflow: hidden; border-radius: 0 12px 0 12px; }
 * 1) card-table .data-image {

margin-right: 0; margin-bottom: 4px; display: block; }
 * 1) card-table .data-role:before,
 * 2) card-table .data-status:before {