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

body {
	margin: 0;
	padding: 0; 
	/* background: #8a3335; */ /* Resene:oldbrick */
	background: #352235; /* Resene:mardigras */
	color: #222;
	font: 12pt 'PT Sans', sans-serif;
	text-align: center;
}

p      { margin-top: 0; margin-bottom: 1.5em; }
h1     { font: 34pt 'Playfair Display', serif; color: white; }
h2     { font: 24pt 'Playfair Display', serif; color: white; }
h3     { font: 12pt 'Playfair Display', serif; color: white; }
img    { border: 0; }
th, td { font-family: 'PT Sans', sans-serif; }
a         { color: #053; text-decoration: none; }
a:link    { color: #053; text-decoration: none; }
a:visited { color: #053; text-decoration: none; }
a:hover   { color: #029; 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;
}


#logo { position: absolute; }


#header {
	background: white;
	position: sticky;
	top: 0;
	padding: 0;
	margin-top: 3em;
	border-top: 2px solid #444;
	border-bottom: 2px solid #444;
	height: 96px;
	display: flex;
	align-items: center !important;
	z-index: 5;
}
#header #titles   { flex: 0 0 33.3%; max-width: 33.3%; margin: 1em auto; }
#header #title    { color: #900; font: bold 24pt 'Playfair Display', serif; }
#header #subtitle { color: #029; font: italic 14pt 'Playfair Display', serif; }

#header #menubar  {
	flex: 0 0 66.7%;
	max-width: 66.7%;
	color: #444;
	font-size: 12pt;
	font-weight: bold;
	text-align: right;
}
#header #menubar a         { color: #053; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; }
#header #menubar a:link    { color: #053; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; }
#header #menubar a:visited { color: #053; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; }
#header #menubar a:hover   { color: #029; border-top: 1px solid #029; border-bottom: 1px solid #029; }
#header #menubar a:active  { color: #222; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; }


#footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0;
	color: black;
	text-align: center;
	font-size: 0.8em;
}
#footer div { 
	padding: 1.0em 0;
	text-align: center;
	font-size: 0.75em;
	font-style: italic;
}
#footer #technote {
	grid-area: 1 / 1 / 1 / 1;
	background: #aaa;
	color: black;
	border-top: 2px solid #444;
	border-bottom: 2px solid #444;
	border-right: 1px dotted #444;
}
#footer #copyright {
	grid-area: 1 / 2 / 1 / 2;
	background: #aaa;
	color: black;
	border-top: 2px solid #444;
	border-bottom: 2px solid #444;
}


#maincol {
	position: relative;
	padding: 1em 3em 1.5em 3em;
	border: none;
	z-index: 0;
	clear: both;
}

.content {
	margin: 0;
	padding-top: 2em;
	font-size: 0.9em;
	text-align: left;
}

.content a         { color: #053; text-decoration: underline; }
.content a:link    { color: #053; text-decoration: underline; }
.content a:visited { color: #053; text-decoration: underline; }
.content a:hover   { color: #029; text-decoration: underline; }
.content a:active  { color: #222; text-decoration: underline; }

.content .grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 3em;
}
.grid > .col1 { grid-area: 1 / 1 / 1 / 1; margin-left: 0; margin-top: 0; margin-bottom: 0; }
.grid > .col2 { grid-area: 1 / 2 / 1 / 2; margin-right: 0; margin-top: 0; margin-bottom: 0; }

.content section:not(:first-child) { margin-top: 3em }
.content section > h1 {
	border-bottom: 3px double #222;
	margin: 0 0 1em 0;
	padding: 8px;
	color: white;
	font-size: 16pt;
	font-weight: bold;
	text-align: center;
}
.content section div > h2 {
	font-size: 14pt;
	font-style: italic;
}

.content .session { color: #222; font-size: 0.9em; margin-bottom: 1em; }

.content .inset {
	background: #eee;
	border: 6px inset #999;
	padding: 0.5em;
	line-height: 1.5em;
}

.content .inset > section:not(:first-child) { padding-top: 2em; }
.content .inset h1,h2,h3 { color: black; }
.content .inset h3 { font-style: italic; }
.content .inset > section > h1 {
	margin: 0;
	padding: 0 0 3px 0;
	color: #bdd;
	font-size: 1.5em;
	text-decoration: underline;
}

.content .inset .tabbar {
	background: #053;
	overflow: hidden;
	border: 3px solid black;
}
.content .inset .tabbar > button {
	float: left;
	background: inherit;
	color: white;
	font: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 0.75em 1.5em;
}
.content .inset .tabbar > button:hover {
	background: #029;
	color: white;
}
.content .inset .tabbar > button.current_tab {
	background: black;
	font-weight: bold;
	color: white;
}

.content #rss_items                            { color: #444; }
.content #rss_items div.item                   { padding: 1em; word-wrap: normal; text-overflow: ellipsis; overflow-y: hidden; }
.content #rss_items div.item:not(:first-child) { border-top: 1px dotted #9aa; }
.content #rss_items div.item div.summary       { padding-top: 0.5em; }

.content #rss_items div.item div.title         { font-size: 1.4em; }
.content #rss_items div.item span.title        { color: #900; cursor: pointer; }
.content #rss_items div.item span.title:hover  { color: #029; }
.content #rss_items div.item div.info          { font-size: 0.8em; }
.content #rss_items div.item span.info         { color: #676; }

.content #commlinks { background: #ddd; }

.content .inset .tool_content {
	background: #ddd;
	padding: 1em;
	border: 1px solid black;
}

.tool_content button {
	background: #053;
	color: white;
	font: inherit;
	border: 2px solid black;
	border-radius: 15px;
	outline: none;
	cursor: pointer;
	padding: 0.5em 1.0em;
}
.tool_content button:hover {
	background: #029;
	color: white;
}
.tool_content button:disabled {
	color: #888;
	background: #555;
}

.tool_content .request_grid {
	display: inline-grid;
	grid-template-columns: auto auto;
	grid-gap: 0.25em;
	border: 1px solid black;
	background: #ddd;
	color: #222;
}
.request_grid > div {
	padding: 0.25em 0.5em;
}

.request_grid .separator {
	grid-column: 1 / span 2;
	background: #321;
	font-weight: bold;
	color: white;
	text-align: center;
	padding: 0.5em;
}
.request_grid .separator2 {
	grid-column: 1 / span 2;
	background: #543;
	font-weight: bold;
	color: white;
	text-align: center;
}
.request_grid .col1  { display: flex; grid-column: 1; justify-content: right; align-items: center; }
.request_grid .col2  { display: flex; grid-column: 2; justify-content: left; align-items: center; }
/*.request_grid .col3  { display: flex; grid-column: 3; justify-content: left; align-items: center; }*/

#dice .inset .results_content {
	padding: 1em;
	border: 1px solid black;
}

#dice .inset .results_content span.error {
	color: red;
}

.tool_content #logs_grid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1em;
	border: 1px solid black;
	height: 35em;
	margin-top: 1em;
	overflow-y: scroll;
}

#logs_grid #toc {
	display: flex;
	grid-column: 1;
	max-height: 100vh;
	overflow: auto;
	box-sizing: border-box;
	border: 1px solid black;
}
#logs_grid #report {
	display: flex;
	grid-column: 2;
	max-height: 100vh;
	overflow: auto;
	box-sizing: border-box;
	border: 1px solid black;
}

#logs_grid table {
	border-bottom: 1px solid black;
	border-collapse: collapse;
	width: 100%;
}
#logs_grid table caption {
	font-weight: bold;
	text-align: center;
	background: #321;
	color: white;
	padding: 1em;
	padding: 0.5em 2em;
	border-bottom: 1px solid black;
}
#logs_grid table th {
	font-weight: normal;
	text-align: center;
	background: #543;
	color: white;
	padding: 0.5em 2em;
	border-bottom: 1px solid black;
}
#logs_grid table tr:nth-child(2) { border-top: none; }
#logs_grid table tr { border-top: 1px dotted black; }
#logs_grid table td:first-child { border-left: none; }
#logs_grid table td {
	text-align: center;
	padding: 0.25em 2em;
	border-left: 1px dotted black;
}
#logs_grid table td.clickable:hover {
	background: #029;
	color: white;
	cursor: pointer;
}
#logs_grid table td.report {
	text-align: left;
	font-family: 'PT Mono', monospace;
}

/* Custom Selector Properties */
#qd_selector .select-selected { background: #053; padding: 0.5em 1.0em; border-radius: 15px; border: 2px solid black; }
#qd_selector .select-selected:hover { background: #029; }
#qd_selector .select-selected:after { top: 16px; }
#qd_selector .select-selected.select-arrow-active:after { top: 9px; }
#qd_selector .select-items { background-color: #445; }
#qd_selector .same-as-selected { background-color: #029; }
#qd_selector .select-items div:hover { background-color: #029; }

.request_grid .select-selected { background: #053; padding: 0.5em 1.0em; font-size: 0.8em; border-radius: 5px; border: 1px solid black; }
.request_grid .select-selected:hover { background: #029; }
.request_grid .select-selected:after { top: 13px; }
.request_grid .select-selected.select-arrow-active:after { top: 6px; }
.request_grid .select-items { background-color: #445; font-size: 0.8em; }
.request_grid .same-as-selected { background-color: #029; }
.request_grid .select-items div:hover { background-color: #029; }


.content .inset .portfolio_content {
	background: #ddd;
	padding: 1em;
	border: 1px solid black;
}

.portfolio_content table {
	border: 1px solid black;
	border-collapse: collapse;
	width: 100%;
}
.portfolio_content table caption {
	font-weight: bold;
	text-align: center;
	background: #321;
	color: white;
	padding: 1em;
	padding: 0.5em 2em;
	border-bottom: 1px solid black;
}
.portfolio_content table th {
	font-weight: normal;
	text-align: center;
	background: #543;
	color: white;
	padding: 0.5em 2em;
	border-bottom: 1px solid black;
}
.portfolio_content table tr:nth-child(2) { border-top: none; }
.portfolio_content table tr { border-top: 1px dotted black; }
.portfolio_content table td:first-child { border-left: none; }
.portfolio_content table td {
	text-align: center;
	padding: 0.25em 2em;
	border-left: 1px dotted black;
}
.portfolio_content table td.description { text-align: left; padding: 0; }
.portfolio_content table td span.game_info { font-size: 0.8em; }
.portfolio_content table td.description .desc_grid {
	display: grid;
	grid-template-rows: auto auto;
}
.desc_grid .teaser { grid-area: 1 / 1 / 1 / 1; padding: 0.25em 0.5em; }
.desc_grid .sku    { grid-area: 2 / 1 / 2 / 1; padding: 0.25em; font-size: 0.8em; text-align: right; border-top: 1px dotted #222; background-color: #ccc; }

.login_content .login_grid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 0.25em;
	border: 1px solid black;
	background: #ddd;
	color: #222;
}
.login_grid > div {
	padding: 0.25em 0.5em;
}
.login_grid .separator {
	grid-column: 1 / span 2;
	background: #321;
	font-weight: bold;
	color: white;
	text-align: center;
	padding: 0.5em;
}
.login_grid .col1  { display: flex; grid-column: 1; justify-content: right; align-items: center; }
.login_grid .col2  { display: flex; grid-column: 2; justify-content: left; align-items: center; }

.login_content button {
	background: #053;
	color: white;
	font: inherit;
	border: 2px solid black;
	border-radius: 15px;
	outline: none;
	cursor: pointer;
	padding: 0.5em 1.0em;
}
.login_content button:hover {
	background: #029;
	color: white;
}
.login_content button:disabled {
	color: #888;
	background: #555;
}