div#wrappablesections {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

/*    align-items: center; */
    align-items: flex-start;

    white-space: normal;
}

div#wrappablesections > * {
    margin: 20px;
}

div.cardspecarea, div.resultsarea {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    align-items: center;
}

div.queryresults {
    margin: 4px;
    padding: 8px;
    border: 2px solid darkgreen;
    position: static;
}

img.closeme {
/*    position: absolute; */
    right: 0px;
    top: 0px;

    width: 20px;
}

table.cardspectab, table.qresults {
    border: 2px solid black;
    border-collapse: collapse;

    margin: 10px;
}

table.cardspectab td, table.cardspectab th, table.qresults td, table.qresults th {
    border: 1px solid black;
    padding: 4px;
    text-align: center;
}

span.card {
    padding: 4px;
    border: 1px solid black;
}

.selected {
    background-color: yellow;
}

.starter, .tossed {
    background-color: lightblue;
}

.opponent {
    background-color: coral;
}

td.ctl {
    font-weight: bold;
    font-size: 20px;
    border: 2px solid red;
}

td.shorthand {
    white-space: nowrap;
}

div.comboinfo {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    align-items: center;
}

div.selectedcards {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    min-width: 80%;
    min-width: 98%;
    align-items: center;
    justify-content: space-around;
}

div.selectedcards span.card {
/*
    font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji";
    font-family: "Segoe UI Emoji";
*/
}

a.showthedocumentation {
    margin-top: 10px;
    padding: 10px;
    border: 2px solid dodgerblue;
}

div#combosdocumentationwrapper {
    display: none;
    padding: 10px;

    max-width: 80%;
    overflow: scroll;
    margin-bottom: 60px;
    padding: 20px;
}

.resultsexplainer {
    margin-top: 10px;
    font-style: italic;
    text-align: center;
}

table#discardadvice {
    border: 2px solid black;
    border-collapse: collapse;
    text-align: center;
}

table#discardadvice tr.major {
    border-top: 2px solid black;
}

table#discardadvice th, table#discardadvice td {
    border: 1px solid black;
}

table#discardadvice td.cutcard > .emoji {
/*
    font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji";
    font-family: "Segoe UI Emoji";
*/
}

label.cardemoji {
/*
    font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji";
    font-family: "Segoe UI Emoji";
*/
}

div.dchsearch {
}

div.dchhand {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    padding: 10px;
    border-bottom: 2px dashed green;

    align-items: center;

    white-space: nobreak;
}

div.dchhand > span {
    padding: 10px;
    text-align: center;
}

div.dchhandcards {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;
}

div.dchhandcards > span {
    padding-left: 2px;
    padding-right: 2px;
}

.war1812results {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;
}

span.cprolinks > * {
    margin: 10px;
}

span.cprodirectlinks, span.cproscores {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    margin-top: 10px;
}

span.cprodirectlinks > a, span.cproscores > * {
    padding: 10px;
}

h4.outcomelabel > label {
    padding: 2px;
}

canvas.graph {
    padding-bottom: 20px;
}

div.dchhandcards .emoji {
/*
    font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji";
    font-family: "Segoe UI Emoji";
*/
}

div.comboresult {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    padding: 4px;
    margin: 10px;
    border: 1px solid black;
    box-shadow: 5px 10px;
}

div.comboresult > div.header {
    font-weight: bold;
    width: 100%;
    text-align: center;

    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;
}

div.comboresult > div.header .cardgroup > * {
    margin: 8px;
    padding: 6px;
    border: 2px solid white;
}

div.comboresult > div.header > span {
/*
    font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji";
    font-family: "Segoe UI Emoji";
*/
}

div.comboresult.unresolved div.waiting {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;
    min-height: 30px;
}

div.comboresult.unresolved div.waiting > div {
    min-width: 30px;
    min-height: 60px;
}

div.comboresult.unresolved > div.waiting > div.current {
    background-color: yellow;
}

span.explanationtotal {
    font-size: 24px;
    color: darkgreen;
}

span.subexplanation {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

/*
    white-space: nowrap; 

*/
    font-size: 16px;

    align-items: center;
    justify-content: space-between;
}

span.subexplanation > .subcards, span.subexplanation > .subtext,  {
    padding: 10px;
}

span.subexplanation > .subscore {
    white-space: nowrap;
    width: 15%;
    text-align: left;
}

span.subexplanation > .subcards {
    white-space: nowrap;
    text-align: center;
    width: 35%;
    padding-left: 20px;
}

span.subexplanation > .subtext {
    text-align: right;
    width: 50%;
    padding-left: 20px;
}

span.subexplanation > .subtextexpand {
    margin-left: 6px;
    margin-right: 6px;
}

div.explanationset, div.deepexplanationset {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;
}

div.deepexplanationwrapper {
    display: none;
}

div.deepexplanationset {
    background-color: lightblue;
}

div.explanationset > * {
    border-bottom: 2px dashed dodgerblue;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 12px;
}

div.explanationset > *:first-child {
    border-top: 2px dashed dodgerblue;
}

div.explanationset .subtext {
    font-weight: bold;

    // somewhere: the last span in the group is being given the bulk of the width
    background-color: yellow;
}

span.subexplanation > * {
    margin-right: 4px;
}

.subscore {
    font-size: 20px;
    color: darkgreen;
}

div.cliamlinks {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;
}

div.cliamlinks a {
    text-decoration: none;
    color: maroon;
}

div#gamesituation {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    margin: 20px;
}

div.rowofcards {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    position: relative;
}

div.scoreline {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: space-around;
    font-size: 20px;
}

div.scoreline > * {
    padding: 20px 6px 20px 6px;
}

div.scorecol {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: center;
}

div.scorecol > * {
    margin-bottom: 6px;
}

.playerscore {
    background-color: white;
    font-size: 24px;
    color: darkgreen;
    border: 1px solid darkred;
}

div.rowofcards > * {
    margin-right: 10px;
}

div.rowofcards.northhand {
    position: relative;
    padding-bottom: 20px;
    border-bottom: 2px dashed blue;
}

div.rowofcards.southhand {
    position: relative;
    padding-top: 10px;
    border-top: 2px dashed blue;
}

div.cardholder {
    position: relative;
    min-height: 80px;
    min-width: 60px;
}

div.rowofcards.southhand div.cardholder {
}

.sequenceterminus {
    margin-left: 50px;
    border-left: 2px dashed darkgreen;
}

img.puzzcard {
    margin-top: 50px;
    width: 80px;
    position: relative;
}

div.pegtableau {
    min-height: 200px;
}

div.analysislinks > * {
    margin-left: 20px;
    padding: 10px;
}

alink.synced {
    border: 2px dashed darkgreen;
}

alink.notsynced {
    border: 2px dashed darkred;
}

div.handstats {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    font-size: 16px;
}

div.handstats > * {
    margin: 2px;
}

div.handstats label {
    font-weight: bold;
}

/* Discard Advice Styles */
table.discardoptionstab th {vertical-align: bottom; }
table.discardoptionstab th, table.discardoptionstab td {text-align: center; padding: 4px; border: 1px solid black;}
table.discardoptionstab td > label { padding: 4px; }
table.discardoptionstab .netfield { padding: 8px; white-space: nowrap; }

table.discardoptionstab {
    border: 1px solid black; 
    margin: 10px; 
    border-collapse: collapse;
    border-spacing: 0;
}
/* END Discard Advice Styles */