/*  site.css - The Brick Mill Games Primary CSS Settings.  */

body {
	margin: 0;
	padding: 0; 
	background: #445172;
	color: #222;
	font: 12pt 'PT Sans', sans-serif;
	text-align: center;
}

p      { margin-top: 0; margin-bottom: 1.5em; }
h1     { font: 24pt 'PT Sans'; color: black; text-decoration: underline}
h2     { font: 18pt 'PT Sans'; color: black; }
h3     { font: 12pt 'PT Sans'; color: black; }
img    { border: 0; }
th, td { font-family: 'PT Sans', sans-serif; }
a         { color: #369; text-decoration: none; }
a:link    { color: #369; text-decoration: none; }
a:visited { color: #369; text-decoration: none; }
a:hover   { color: #7ef; text-decoration: none; }
a:active  { color: #222; text-decoration: none; }

img.float_left { float: left; }
img.float_right { float: right; }

#page { width: 100%; margin: 0; padding: 0; border: none; text-align: left; }
#container { max-width: 100%; }
#columns {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

#sidebar {
    display: inline-grid;
    grid-template: auto auto 1fr / auto;
}
#logo { background: #222; padding: 0.5em 1em; font: 12pt 'PT Sans Narrow'; color: #99a; text-align: center; }
#sidemenu {
    width: 100%;
    min-height: 50px;
    background: #444;
}
#sidemenu > push-button {
    width: 100%;
}
#footer {
    border-top: 1px dotted black;
    color: #99a;
    padding: 0.5em;
    text-align: center;
    font-size: 0.75em;
    font-family: 'PT Sans Narrow';
}

#main { width: 100%; min-height: 100vh; background: #eef; overflow-y: auto; }

.switchable { display: none; box-sizing: border-box; height: 100vh; overflow: auto; }
.switchable vbox-pane { width: 100%; height: 100% }
.switchable .inset { box-sizing: border-box; margin: 0.25em; width: 100%; height: 100% }
.switchable-title { box-sizing: border-box; background: #446; color: #eee; padding: 0.25em; font-size: 20pt; font-weight: 700; text-align: center }
.switchable-content { box-sizing: border-box; padding: 0.5em; width: 100%; height: 100%; overflow: auto }


/* Roll Result Card Support */

.card-layout {
	display: flex;
	flex-flow: row wrap;
	overflow-y: auto;
	font: 10pt 'PT Sans Narrow', sans-serif;
}
.card-layout .card {
	background: #ccf;
	border: 1px dotted black;
	margin: 0 1em 1em 0;
	min-width: 15em;
	max-height: 25em;
	overflow-y: auto;
}
.card-layout .card > h2                       { background: linear-gradient(#88c,#aae); margin: 0; padding: 0.2em 0; font-size: 11pt; text-align: center; }
.card-layout .card > section                  { padding: 0.2em 0.1em; }
.card-layout .card > section:not(:last-child) { border-bottom: 1px dotted black; }
.card-layout .card > section > h3             { margin: 0; font-size: 10pt; font-style: italic; }
.card-layout .card > section > ul             { margin-block-start: 0.25em; margin-block-end: 0.25em; }

.log-index-jump       { cursor: pointer; }
.log-index-jump:hover { background: rgb(0,0,0, 0.1) }

.std-form-header     { background: #446; color: #eee; grid-column: 1 / span 2; font-weight: 700; text-align: center; padding: 0.25em }
.std-form-label      { text-align: right; padding: 0.25em }
.std-form-button-bar { background: #557; color: #eee; grid-column: 1 / span 2; text-align: center; padding: 0.25em }

.bbr-form-header      { background: #446; color: #eee; grid-column: 1 / span 4; font-weight: 700; text-align: center; padding: 0.25em }
.bbr-form-subheader   { background: #668; color: #eee; grid-column: 1 / span 4; font-weight: 700; text-align: center; padding: 0.125em }
.bbr-form-subheader-l { background: #668; color: #eee; grid-column: 1 / span 2; font-weight: 700; text-align: center; padding: 0.125em }
.bbr-form-subheader-r { background: #668; color: #eee; grid-column: 3 / span 2; font-weight: 700; text-align: center; padding: 0.125em }
.bbr-form-subarea-l   { grid-column: 1 / span 2; }
.bbr-form-subarea-r   { grid-column: 3 / span 2; }
.bbr-form-label       { text-align: right; padding: 0.25em }
.bbr-form-right-block { grid-column: 2 / span 3; font-weight: 700; }
.bbr-form-button-bar  { background: #557; color: #eee; grid-column: 1 / span 4; text-align: center; padding: 0.25em }

.flex-hide { display: none }

/* Log Support */

#log-info { width: 100% }
#log-list { width: 100% }
#log-report { width: 100% }
#log-body-container { width: 100% }
.dice-log-header { background: #446; color: #eee; grid-column: 1 / span 3; font-weight: 700; text-align: center; padding: 0.25em }
.dice-log-column-header { background: #779; color: #eee; font-weight: 700; text-align: center; padding: 0.125em }
.dice-log-id-data-cell { background: #ccd; color: #222; text-align: center; padding: 0.125em; cursor: pointer }
.dice-log-id-data-cell:hover { background: #aab }
.dice-log-data-cell { background: #ccd; color: #222; text-align: center; padding: 0.125em }
.dice-log-report-header { background: #446; color: #eee; font-weight: 700; text-align: center; padding: 0.25em }
.dice-log-report-data { background: #ccd; color: #222; padding: 0.125em }