/* CSS file for DragonMinis.com  -------------------------------------------------------*/
/* Properties for all ------------------------------------------------------------------*/
@font-face {font-family: Papyrus; src: url(../../_Fonts/PAPYRUS.TTF);}
* {box-sizing: border-box; font-family: Papyrus;}
body {
	background: url(/Cards/_Images/BodyBackground.svg) no-repeat center fixed; 
	background-size: contain;
	background-origin: border-box;
}








@media screen and (max-width: 10px) {

/* Variable Declarations ---------------------------------------------------------------*/
/* Variable use var(--varname) ---------------------------------------------------------*/
:root {
	--FullWidth: 100%;

	--GridGap: 8px;

	--WidthLeft: 128px; /* Logo */
	--WidthRight: 192px; /* Calendar */
/*	--WidthCenter: calc(100% - var(--WidthLeft) - var(--WidthRight) - var(--GridGap) - var(--GridGap) - var(--GridGap) - var(--GridGap)); /* Title/Quote */
	--WidthCenter: calc(var(--FullWidth) - var(--WidthLeft) - var(--WidthRight) - var(--GridGap) - var(--GridGap) - var(--GridGap) - var(--GridGap)); /* Title/Quote */
	--WidthBody: calc(var(--FullWidth) - var(--WidthLefta) - var(--WidthRight) - var(--GridGap) - var(--GridGap) - var(--GridGap)); /* Body */

	--HeightOne: 128px; /* Logo and Calendar */
	--HeightQuote: 32px; /* Quote */
	--HeightTitle: calc(var(--HeightOne) - var(--HeightQuote)); /* Title */

	--LayoutBorderW: 0px;

	--LayoutBGColor: rgba(128,128,128,0.125);
	--LayoutBGColorR: rgba(255,128,128,0.125);
	--LayoutBGColorG: rgba(128,255,128,0.125);
	--LayoutBGColorB: rgba(128,128,255,0.125);
}
/* text-align --------------------------------------------------------------------------*/
.l {text-align: left;}
.c {text-align: center;}
.r {text-align: right;}
.j {text-align: justify;}
/* text-weight -------------------------------------------------------------------------*/
.b {font-weight: bold;}
.w100 {width: 100%;}
/* Buttons -----------------------------------------------------------------------------*/
.RedButton, .GreenButton, .BlueButton, .YelllowButton, .AdminButton {
	display: inline-block;
	background: rgba(255,255,255,0.8);
	border: solid 1px rgba(0,0,0,1);
	border-radius: 16px;
	box-shadow: 4px 4px 8px rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.9);
	font-size: 9pt;
	height: 32px;
	width: 96px;
}
/* Small Buttons -----------------------------------------------------------------------*/
.SmRedButton, .SmGreenButton, .SmBlueButton, .SmYelllowButton, .SmAdminButton {
	display: inline-block;
	background: rgba(255,255,255,0.8);
	border: solid 1px rgba(0,0,0,1);
	border-radius: 12px;
	box-shadow: 4px 4px 8px rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.9);
	font-size: 8pt;
	height: 24px;
	width: 64px;
}
/* Color Buttons -----------------------------------------------------------------------*/
.RedButton, .SmRedButton {
	background-image: linear-gradient(to top, rgba(1226228,0,0,0.8), rgba(128,0,0,0.2));
}
.GreenButton, .SmGreenButton {
	background-image: linear-gradient(to top, rgba(0,128,0,0.8), rgba(0,128,0,0.2));
}
.YelllowButton, .SmYelllowButton {
	background-image: linear-gradient(to top, rgba(128,128,0.8), rgba(128,128,0.2));
}
.BlueButton, .SmBlueButton {
	background-image: linear-gradient(to top, rgba(0,0,128,0.8), rgba(0,0,128,0.2));
}
.AdminButton, .SmAdminButton {
	background-image: linear-gradient(to top, rgba(128,128,128,0.8), rgba(128,128,128,0.2));
}
/* Color Buttons - Hover ---------------------------------------------------------------*/
.RedButton:hover, .SmRedButton:hover, .GreenButton:hover, .SmGreenButton:hover,
.BlueButton:hover, .SmBlueButton:hover, .AdminButton:hover, .SmAdminButton:hover {
	background-image: linear-gradient(to top, rgba(0,0,128,0.8), rgba(0,0,128,0.2));
}
/* Color Buttons - Hover ---------------------------------------------------------------*/
.BlueButton:hover, .SmBlueButton:hover {
	background-image: linear-gradient(to top, rgba(128,128,0,0.8), rgba(128,128,0,0.2));
}

/* Main Grid Layout --------------------------------------------------------------------*/
.MainLayout {
	display: grid;
/*	grid-auto-column: 128px;/**/
/*	grid-template-columns: calc(var(--WidthLeft) + var(--GRidGap)) auto auto auto auto auto calc(var(--WidthRight) + var(--GridGap));/**/
/*	grid-template-rows: var(--HeightTitle) var(--HeightQuote) 48px 128px auto auto 128px;/**/
	grid:
		'Logo Title Calendar'
		'Logo Quote Calendar'
		'Nav Nav Nav'
		'Ticker Ticker Ticker'
		'Body Body Summary'
		'Body Body History'
		'Footer Footer Footer'
	;
	gap: var(--GridGap);
	width: 100%;
	margin: 8px;
	border: var(--LayoutBorderW) solid black;
	background-color: var(--LayoutBGColor);
}
.MainLayout section, .MainLayout fieldset {
/*	border: var(--LayoutBorderW) solid black;/**/
	background-color: var(--LayoutBGColor);
}
/* Grid Layout -------------------------------------------------------------------------*/
.Logo {
	grid-area: Logo;
	width: var(--WidthLeft);
	height: var(--HeightOne);
}
#Logo {
	height: var(--HeightOne);
	width: var(--WidthLeft);
}
/* Grid Layout -------------------------------------------------------------------------*/
.Title {
	grid-area: Title;
	height: var(HeightTitle);
	width: var(--WidthCenter);
}
#Title {
	color: rgba(0,0,0,1);
	font-size: 2.5em;
	height: var(HeightTitle);
	width: var(--WidthCenter);
	text-decoration: none;
}
/* Grid Layout -------------------------------------------------------------------------*/
.Calendar {
	grid-area: Calendar;
	height: var(--HeightOne);
	width: var(--WidthRight);
	border: 1px solid black;
}
#Calendar {
	display: grid;
	padding: calc(var(--GridGap)/2);
	gap: calc(var(--GridGap)/2);
	grid-template-columns: auto auto auto auto auto auto auto;
}
#Calendar div {
	text-align: right;
	font-size: 10pt;
}
#Calendar div.wd {
	text-align: center;
	text-decoration: underline;
	font-size: 9pt;
	font-weight: bold;
}
/* Grid Layout -------------------------------------------------------------------------*/
.Quote {
	grid-area: Quote;
	height: var(--HeightQuote);
	width: var(--WidthCenter);
}
#Quote {
	height: var(--HeightQuote);
	width: var(--WidthCenter);
}
/* Grid Layout -------------------------------------------------------------------------*/
.Nav {
	grid-area: Nav;
}
#Nav {
	display: inline-grid;
	gap: var(--GridGap);
	grid-template-columns: auto auto auto auto auto auto auto auto;
}
/* Grid Layout -------------------------------------------------------------------------*/
.Ticker {
	grid-area: Ticker;
	height: var(--HeightOne);
	border: 1px solid black;
}
#Ticker {
	display: inline-grid;
}
#Ticker div {
	grid-row: 1;
}
/* Grid Layout -------------------------------------------------------------------------*/
.Summary {
	grid-area: Summary;
	border: 1px solid black;
}
#Summary {
	display: grid;
	grid-template-columns: auto 16px auto auto 16px;
}
/* Grid Layout -------------------------------------------------------------------------*/
.History {
	grid-area: History;
	border: 1px solid black;
}
#History {
	display: grid;
	grid-template-columns: auto 16px auto auto 16px;
	grid:
		'HDesc HDesc HDesc HDescR HDescR'
		'. . . . .'
	;
}
/* Grid Layout -------------------------------------------------------------------------*/
.Footer {grid-area: Footer;}
#Footer {
}
/* Grid Layout -------------------------------------------------------------------------*/
.Body {grid-area: Body;}
.Body .Ledger {
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
	gap: var(--GridGap);
}
.Body .Ledger .dim {background-color: rgba(192,192,192,0.5);}
.Body .Ledger .bright {background-color: rgba(255,255,255,0.8);}
/* Grid Layout -------------------------------------------------------------------------*/
/* , .PersonalInfo, .ContactInfo, .ShareInfo */
.PersonalInfo, .ContactInfo, .ShareInfo {
	display: grid;
	grid-template-columns: 128px auto 96px;
	gap: var(--GridGap);
}
.PersonalInfo input[type=text], .ContactInfo input[type=text], .ShareInfo input[type=text] {
	height: 24px;
	width: 192px;
}
.Body .Documents {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: var(--GridGap);
}

}