@charset "utf-8";



/********************************************************************
Great article on HTML and CSS basics
https://internetingishard.com/html-and-css/css-box-model/

Selectors
https://www.w3schools.com/cssref/css_selectors.asp

Misc
http://uniformjs.com/jquery-and-javascript-coding-examples-and-best-practices/
https://css-tricks.com/styling-a-select-like-its-2019/
https://www.w3schools.com/howto/howto_custom_select.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select


#abc = apply to elements with the abc id.
.abc = apply to elements with the abc class.

********************************************************************/





/*************************************************************************
** Import Fonts
*************************************************************************/

/*Fonts from Google Font API */
@import url(https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica); /*Default*/
@import url(https://fonts.googleapis.com/css?family=Jim+Nightshade);  /*Nightmare*/
@import url(https://fonts.googleapis.com/css?family=Special+Elite);  /*News Paper*/
@import url(https://fonts.googleapis.com/css?family=Satisfy); /*Hand Writing Nice*/
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker); /*Hand Writing OK, very bold*/
@import url(https://fonts.googleapis.com/css?family=Homemade+Apple);  /*Hand Writing, cursive, neat*/
@import url(https://fonts.googleapis.com/css?family=Nothing+You+Could+Do);  /*Hand Writing, easy to read, not too neat*/


@import url(https://fonts.googleapis.com/css?family=Rye); /*Old west backup font*/

@import url(https://fonts.googleapis.com/css?family=Lobster);  /*gardening font*/



@import url(https://fonts.googleapis.com/css?family=Cinzel);  /*Title Bar*/


/* Nightmare contendors
@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);  
@import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace);  
@import url(https://fonts.googleapis.com/css?family=Eater);  
@import url(https://fonts.googleapis.com/css?family=Sedgwick+Ave);  
@import url(https://fonts.googleapis.com/css?family=Julee);   */



/* Otto https://www.1001fonts.com/cursive-fonts.html?page=4
CoalhandLuke https://www.1001fonts.com/cursive-fonts.html?page=10
Sanddunes: https://www.1001fonts.com/cursive-fonts.html?page=47
Blackway Brush https://www.1001fonts.com/cursive-fonts.html?page=87
I looked at all cursive fonts thru: https://www.1001fonts.com/cursive-fonts.html?page=104 */



/* @import url(https://fonts.googleapis.com/css?family=Pacifico);   */


/*Fonts from Files */

/* ALternate Mediocre handwriting font. */
/* @font-face {
    font-family: "BlackwayBrush";
    src: url("https://glowingsaber.com/FONTS/BlackwayBrush.ttf") format("truetype");
} */

/* ALternate Mediocre handwriting font. */
/* @font-face {
    font-family: "Otto"; 
    src: url("https://glowingsaber.com/FONTS/Otto.ttf") format("truetype");
} */

/* handwriting, somewhat hard to read */
@font-face {
    font-family: "CoalhandLuke"; 
    src: url("https://glowingsaber.com/FONTS/CoalhandLukeTRIAL.ttf") format("truetype");
}

/* Computer Terminal */
@font-face {
    font-family: "FixedSys"; 
    src: url("https://glowingsaber.com/FONTS/FSEX300.ttf") format("truetype");
}

/* Fallout Font */
@font-face {
    font-family: "Overseer"; 
    src: url("https://glowingsaber.com/FONTS/Overseer.otf") format("truetype");
}

/* A clean typewriter font */
@font-face {
    font-family: "ChenierRegular"; 
    src: url("https://glowingsaber.com/FONTS/Chenier-Regular.ttf") format("truetype");
}

/*Battletech */
@font-face {
    font-family: "Steiner"; 
    src: url("https://glowingsaber.com/FONTS/Steiner-myjv.ttf") format("truetype");
}

/*Old West looking Font */
@font-face {
    font-family: "Klondike";
    src: url("https://glowingsaber.com/FONTS/CFKlondikePersonal-Regular.ttf") format("truetype");
}

/*GURPS */
@font-face {
    font-family: "Korinna";
	src: url("https://glowingsaber.com/FONTS/ITC-Korinna-Bold.ttf") format("truetype");  
}

/*GURPS Symbols */
@font-face {
    font-family: "gurpsSymbols";
	src: url("https://glowingsaber.com/FONTS/GURPSSymbols.ttf") format("truetype");  
}

/* Malifaux Font */
@font-face {
    font-family: "Bloodcrow";
	src: url("https://glowingsaber.com/FONTS/BloodCrow2.ttf") format("truetype");  
}

/* Malifaux Symbols */
@font-face {
    font-family: "MalifauxRodent";
    src: url("https://glowingsaber.com/FONTS/Malifaux-Rodent-Edition.ttf") format("truetype");
}

/* Car Wars */
@font-face {
    font-family: "StopN";
    src: url("https://glowingsaber.com/FONTS/Stopn.ttf") format("truetype");
}


/* STEM Script */
@font-face {
    font-family: "Astrolab";
    src: url("https://glowingsaber.com/FONTS/AstrolabRegular.ttf") format("truetype");
}


/* Nice fantasy fonts here: 
https://www.1001fonts.com/fantasy-fonts.html?page=3 
https://www.1001freefonts.com/fantasy-fonts.php
*/

/* Dark Fantasy Default */
@font-face {
    font-family: "AbaddonII";
    src: url("https://glowingsaber.com/FONTS/Abaddon ll jeda.ttf") format("truetype");
}

/* Dark Fantasy Default */
@font-face {
    font-family: "Immortal";
    src: url("https://glowingsaber.com/FONTS/IMMORTAL.ttf") format("truetype");
}

/* Dark Fantasy Icons */
@font-face {
    font-family: "VikingRunes";
    src: url("https://glowingsaber.com/FONTS/Viking Runes and Icons.otf") format("truetype");
}

/* Gloomhaven */
@font-face {
    font-family: "HighTower";
    src: url("https://glowingsaber.com/FONTS/HTOWERT.TTF") format("truetype");
}

/* Gloomhaven */
@font-face {
    font-family: "PirataOne";
    src: url("https://glowingsaber.com/FONTS/PirataOne-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "GloomHavenSymbols";
    src: url("https://glowingsaber.com/FONTS/gloomhaven-symbols.otf") format("truetype");
}





/*************************************************************************
** General Formatting
*************************************************************************/
* {
    padding: 0;
    margin: 0;
    border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: "IM Fell DW Pica", "Times New Roman", Times, serif;
	position: static;
	font-size: 15px;

	/* border: 1px solid green;       */

}

.clearAll {
	all: unset;
}



.body, .apBody, .cwBody, .btBody, .dfBody, .dlBody, .gardeningBody, .gloomhavenBody, .gurpsBody, .stemBody {
	margin: 0 auto;
	margin-top: 25px;
	background-image: url("https://glowingsaber.com/IMG/wallpaper-concrete.png");
	margin-bottom: 3%;
	--gsOffBlack: #232424;
	--gsLiteOffBlack: #2e3131;
	--gsDarkRed: rgb(148, 18, 16);
	--gsRed: #c3110F;
	--gsDarkPaleGreen: rgb(143, 150, 108);
	--gsPaleGreen: #AAB47E;
	--gsLitePaleGreen: #D1D1BA;
	--gsSuperLitePaleGreen: rgb(226, 226, 218);
	--gsCream: #eee;
	--gsLiteGardenGreen: #308844;
	--gsGardenGreen: #205f2f;
	--gsDarkGardenGreen: #164922;
	--gsLiteStemBlue: #3f26ad;
	--gsStemBlue: #4934a8;
	--gsDarkStemBlue: #4a3994;
}

.btBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-battletech25.jpg");
}
.cwBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-diamondplate.jpg");
}
.dfBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-linen.jpg");
}
.dlBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-linen.jpg");
}
.apBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-crackedEarth01.jpg");
}
.gardeningBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-plant1.jpg");
}
.gurpsBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-linen.jpg");
}
.stemBody {
	background-image: url("https://glowingsaber.com/IMG/wallpaper-hexes2.jpg");
}



/* iframe{
	border: 1px solid var(--gsPaleGreen);
	width: 100%;
	height: 200px;
} */


img.basic {
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 5%;
	max-width: 80%;
}


img.icon {
	width:0.9em;
	max-width:100%;
	height:auto;

}
img.thumbnail {
	border: 1px solid var(--gsPaleGreen);
	border-radius: 2px;
	margin: 5px;
	padding: 2px;
	width: 150px;
	float: right;
}
img.thumbnail:hover {
	border-color: var(--gsOffBlack);
}





/*  a:hover MUST come after a:link and a:visited
	a:active MUST come after a:hover */
a:link {
	color: var(--gsRed);
}
a:visited {
	color: var(--gsDarkRed);
}
a:hover {
	color: var(--gsOffBlack);
}
a:active {
	color: blue;
}

/* xxx default dive border color doesn't seem to work */
div {
	border-color: var(--gsDarkRed);
	position: relative;  /* Default is  position: static.   position: relative acts as  position: static unless a mofification to 
							the position is entered (e.g. top: 40px; left: 15px;    
							position: relative does at as an anchor point for sub items using position: abosolute. */
}
div.ctr {
	border: 1px solid green;     
	width: 100%;
	margin: 0;
	position: absolute;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}






h1, h2 {
	color: var(--gsDarkRed);
	text-shadow: 0px 0px 1px black;
}
h1 {
	font-size: 3em;
	margin: 45px 0px 0px 0px; 
	text-align: center; 
	/* text-decoration: underline; */
}
h2 {
	font-size: 2em;
	margin: 0.5em 0px 0px 0px;  
	border-bottom: 1px solid var(--gsDarkRed);
}
h3 {
	font-size: 1.5em; 
	margin: 15px 0px 0px 0px; 
	color: var(--gsOffBlack);
}
h4 {
	margin: 8px 0px 0px 0px; 
	color: var(--gsOffBlack);
}


@media (max-width: 620px) {
	/* For mobile phones: */
	.h1, .darkFantasy h1, .carWars h1, .gurps h1 {
		font-size: 1.5em;
	}
	.h2, .darkFantasy h2, .carWars h2, .gurps h2  {
		font-size: 1em;
	}
}


p {
	padding: 0;
	margin: 0px 0px 0px 0px; 
	width: 100%;
}
/* Used for the days without soda counter on the slink page */
.sodaCount {  
	font-size: 1.5em;
}


/* indentation for bullets */
ul {
	padding-left: 18px;
}




.page {
	margin: 0 auto;
	width: 100%;
	max-width: 1100px;
	min-height: 200;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.25), 6px 6px 20px 0 rgba(0,0,0,0.25);
	background-color: rgba(255,255,255,0.45);
}

.content {
	margin: auto;
	padding-top: 25px;
	padding-right: 5%;
	padding-bottom: 100px;
	padding-left: 5%;
	/* background-image: url('https://glowingsaber.com/IMG/wallpaper-oldPaper4.jpg'); */
	background-size: 100% 100%;
}

.shell {
	margin: auto;
	padding-top: 25px;
	padding-right: 5%;
	padding-bottom: 100px;
	padding-left: 5%;
}

.indent {
	margin-left: 25px;
}


.super {
	vertical-align: super;
	font-size: .65em;
}

.sub {
	vertical-align: sub;
	font-size: .75em;
}

.toc {
	text-align: center;
}

.fixedBottomRight {
	width: 2em;				/*	having a fixed with is a requirement for right justifcation.  I might try to see if can get calc to work with this
								for now use emW* settings to force non-default widths.*/
	position: fixed;
	z-index: 1;
	bottom: 1em;
	right: 2em;
	/* background: #eee; */
	overflow-x: hidden;
}

.emW2 {
	width: 2em;	
}




/*************************************************************************
** Q&A
*************************************************************************/
/* .newitem {
	font-weight:bold;
	color: var(--gsRed);
}
.question {
	display: inline-block;
	font-weight:bold;
	padding-bottom: 0px;
}
.answer {
	display: inline-block;
	padding-bottom: 0px;

}
.reference {
	display: inline-block;
	padding-bottom: 8px;
} */









/*************************************************************************
** Topic Sidebar
*************************************************************************/

div.topicSidebar{
	border: 1px solid;
	border-color: var(--gsDarkRed);
	padding-left: 5%;
	padding-bottom: 5%;
	margin-right: 5%;

}









/*************************************************************************
** Control Rows
** Put controls inside divs to allow for vertical alignment
*************************************************************************/

/* div.controlRow {
	height: 35px;
} */

/*************************************************************************
** Control Row - Buttons
*************************************************************************/
button {
	font-family: "ChenierRegular", "Times New Roman", Times, serif;
	font-size: 1.1em;
	background-color: var(--gsLitePaleGreen);
	color: var(--gsOffBlack);
	height: 20px;
	line-height: 19px;
	padding: 0px 25px;
	text-decoration: none;
	display: inline;
	cursor: pointer;
	border: 1px solid var(--gsPaleGreen);
	border-radius: 2px;
	/** suposedly centers text veritically in button **/
	display: table-cell;
	vertical-align: middle;
	margin: 4px 2px 4px 2px;

	/** box-shadow: 0 8px 16px 0 rgba(0,0,0,0.25), 0 6px 20px 0 rgba(0,0,0,0.25); **/
}

@media (max-width: 620px) {
	button {
		font-size: 1em;
	}
}

button:hover {
	/*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0px 0px 15px 0px rgba(0,0,0,0.45);*/
	border-color: var(--gsOffBlack);
}

button:active {
	/*transform: translateY(3px);*/
	background-color: var(--gsSuperLitePaleGreen);
}

button.fullwidth {
	font-size: 1.3em;
	display: block;
	width: calc(100% - 4px);
	height: 25px;
	padding: 0px;
}

button.floatBottom {
	position: fixed;
	width: calc(100% - 4px);
	height: 25px;
	padding: 0px;
}

button.small {
	font-size: 1.3em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}




/*************************************************************************
Peak-a-boo Button
*************************************************************************/
button.peakabooDown, button.peakabooUp {
	display: block;
	width: calc(100% - 4px);
	height: 25px;
	margin: 4px 2px 4px 2px;
	border-radius: 0px;
	border-width: 1px 0px 1px 0px ;
	background-color: Transparent;

	background-repeat: no-repeat;
	background-position: left;	
	padding-left: 19px;
}
button.peakabooDown:hover, button.peakabooUp:hover {
	/*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0px 0px 15px 0px rgba(0,0,0,0.45);*/
	border-color: black;
}
button.peakabooDown {
	background-image: url('https://glowingsaber.com/ICO/ico_arrowDown.png');
}
button.peakabooUp {
	background-image: url('https://glowingsaber.com/ICO/ico_arrowUp.png');
}





/*************************************************************************
** Control Row - textbox
** The vertical centering won't work properly for the textBoxLabel if these 
** are not in their own div.
*************************************************************************/
input[type=text] {
	height: 75%;
	width: 48%;
	border: 1px solid var(--gsPaleGreen);
	padding-left: 5px;
	margin: 2px 0px 2px 0px;
}
/*************************************************************************
** Control Row - label
** The vertical centering won't work properly for the textBoxLabel if these 
** are not in their own div.
*************************************************************************/

/* The line-height is tied to the size of the text box input above.  It is a 
** sloppy way of centering the text vertically to match the input box.*/
span.controlRowLabel {
	width: 35%;
	line-height: 35px;
}
/*************************************************************************
** checkbox
*************************************************************************/

input[type="checkbox"]:hover {
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.45);
	border-color: var(--gsOffBlack);
}
/*************************************************************************
** Select
*************************************************************************/
select {
	width: 60%;
	padding: 1px;
	border: 1px solid var(--gsOffBlack);
	border-radius: 2px;
}









/*************************************************************************
** Journal Table
*************************************************************************/
.journalTable {
	width: 100%;
	border: 0px solid var(--gsOffBlack);
}
.journalTable td {
	border: 0px solid var(--gsOffBlack);
}

/*************************************************************************
** Calendar Table
*************************************************************************/
.calendarTable {
	width: 100%;
	border: 1px solid var(--gsPaleGreen);
}
.calendarTable td {
	border: 0px solid var(--gsPaleGreen);
}
.calendarTable h3 {
	border-top: 1px solid var(--gsPaleGreen);
	border-bottom: 1px solid var(--gsPaleGreen);
}

/*************************************************************************
** SquareFoot Table
*************************************************************************/
.squareFootTable {
	width: 100%;
	border: 1px solid var(--gsPaleGreen);
}
.squareFootTable th {
	border: 0px solid var(--gsPaleGreen);
	border-bottom: 1px solid var(--gsPaleGreen);
}
.squareFootTable td {
	border: 0px solid var(--gsPaleGreen);
	border-bottom: 1px solid var(--gsPaleGreen);
}
.squareFootTable td.grnLob {
	font-family: "Lobster", "Times New Roman", Times, serif;
	color: var(--gsGardenGreen);
}
span.grnLob {
	font-family: "Lobster", "Times New Roman", Times, serif;
	color: var(--gsGardenGreen);
}


/*************************************************************************
** Data Table
*************************************************************************/




.dataTable {
	border-top: 0px solid var(--gsPaleGreen);
	border-bottom: 1px solid var(--gsPaleGreen);
	border-left: 0px solid var(--gsPaleGreen);
	border-right: 1px solid var(--gsPaleGreen);
	border-spacing: 0px;
}
.dataTable caption {
	font-family: "ChenierRegular", "Times New Roman", Times, serif;
	font-size: 1.2em;
	font-weight: bold;
	padding: 2px;
}
.dataTable th {
	font-size: .9em;
	text-align: left;
	border-top: 1px solid var(--gsPaleGreen);
	border-bottom: 0px solid var(--gsPaleGreen);
	border-left: 1px solid var(--gsPaleGreen);
	border-right: 0px solid var(--gsPaleGreen);

	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}
.dataTable th.lft {
	text-align: left;
}
.dataTable td {
	border-top: 1px solid var(--gsPaleGreen);
	border-bottom: 0px solid var(--gsPaleGreen);
	border-left: 1px solid var(--gsPaleGreen);
	border-right: 0px solid var(--gsPaleGreen);
	font-size: .9em;
	text-align: left;
	vertical-align: middle;
	padding: 1px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}
.dataTable td.sectionHeader {
	font-weight: bold;
	color: var(--gsLitePaleGreen);
	background-color: var(--gsLiteOffBlack);
	border-top: 1px solid var(--gsPaleGreen);
	border-bottom: 0px solid var(--gsPaleGreen);
	border-left: 1px solid var(--gsPaleGreen);
	border-right: 0px solid var(--gsPaleGreen);
}
.dataTable td.subSectionHeader {
	font-weight: bold;
	background-color: var(--gsLitePaleGreen);
	border-top: 1px solid var(--gsPaleGreen);
	border-bottom: 0px solid var(--gsPaleGreen);
	border-left: 1px solid var(--gsPaleGreen);
	border-right: 0px solid var(--gsPaleGreen);
}
.dataTable td.bld {
	font-weight: bold;
}
.dataTable td.cen {
	text-align: center;
}
.dataTable td.lft {
	text-align: left;
}
.dataTable td.ind {
	text-indent: 0.3em;
}
.dataTable td.bottomBorder {
	border-bottom:1px solid;
}
.dataTable tr:nth-child(even) {
    background-color: var(--gsCream);
}
.dataTable tr.bgcolored {
    background-color: var(--gsCream);
}
.dataTable tr.bgtrans {
    background-color: hsla(0, 0%, 0%, 0);
}






/*************************************************************************
** Simple Table
*************************************************************************/
.simpleTable {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--gsPaleGreen);
	border-spacing: 0px;
	padding: 2px;
	margin-left:auto; 
    margin-right:auto;
}
.simpleTable, th, td {
	border: 1px solid black;
	padding: 3px 10px 3px 10px;
}

/*************************************************************************
** Invisible Table
** Often used to display dynamic data with controls imbedded
*************************************************************************/
.invisibleTable {
	border:1px var(--gsPaleGreen) solid;
	/* padding-left: 2em;
	padding-right: 2em; */
	padding-top: 0px;
	padding-bottom: 0px;
	border-spacing: 0px;
	/* width: 100%; */
}
.invisibleTable.noBorder {
	border:0px var(--gsPaleGreen) solid;
}
.invisibleTable caption {
	font-family: "ChenierRegular", "Times New Roman", Times, serif;
	font-size: 1.2em;
	font-weight: bold;
}
.invisibleTable th {
	font-size: .9em;
	border: 0px;
	padding-left: 1em;
	padding-right: 1em;
	text-align: left;
}
.invisibleTable th.lft {
	text-align: left;
}
.invisibleTable th.ctr {
	text-align: center;
}
.invisibleTable th.lu {
	text-align: left;
	border-bottom: 1px solid var(--gsPaleGreen);
}
.invisibleTable th.und {
	border-bottom: 1px solid var(--gsPaleGreen);
}
.invisibleTable td {
	font-size: .9em;
	border: 0px;
	padding-left: 1em;
	padding-right: 1em;
	text-align: left;
}
.invisibleTable td.lft {
	text-align: left;
}
.invisibleTable td.ctr {
	text-align: center;
}
.invisibleTable td.bld {
	font-weight: bold;
}

.invisibleTable td.peakabooMatch {

	width: 100%;
	height: 25px;
	color: var(--gsOffBlack);
	font-family: "ChenierRegular", "Times New Roman", Times, serif;
	font-size: 1.25em;
	padding: 0px 25px;
	padding-left: 19px;
	line-height: 19px;
	text-decoration: none;
	cursor: pointer;
	border-color: var(--gsPaleGreen);
	border-style: solid;
	border-radius: 0px;
	border-width: 1px 0px 1px 0px ;
    vertical-align: middle;
	margin: 8px 0px 4px 0px;
	background-color: Transparent;
	background-repeat: no-repeat;
	background-position: left;	
}







/*************************************************************************
** Bottom Nav
*************************************************************************/
.bottomnav {
	overflow: hidden;
	width: 100%;
	bottom: 0;
    background-color: var(--gsOffBlack);
}

.bottomnav span {
    float: left;
    display: block;
    color: var(--gsLitePaleGreen);
	margin-top: 5px;
	margin-right: 10px;
    text-decoration: none;
    font-size: .9em;
}

.bottomnav input[type="text"] {
	float: right;
    color: var(--gsLitePaleGreen);
	background-color: rgb(50, 50, 50);
	border: 2px solid var(--gsOffBlack); 
	width: 20%;
}



/*************************************************************************
Side by side columns
The column divs need to be inside a 'listrow' div so the settings are cleared afterward.

	<div class="listRow">  <!-- split the controls into two columns -->
		<div class=listColumn50>
			Column 1
		</div>
		<div class=listColumn50>
			Column 2
		</div>
	</div>

*************************************************************************/

.list li {
	margin-left: 25px;
}

.listColumn20, .listColumn25, .listColumn33, .listColumn50, .listColumn66, .listColumn75, .listColumn80, .listColumn100 {
    float: left;
	padding: 0.5em;
	min-width: 300px;
}

.listColumn20 {
    width: 20%;
	min-width: 150px;
}

.listColumn25 {
    width: 25%;
	min-width: 150px;
}
.listColumn33 {
    width: 33%;
	min-width: 150px;
}

.listColumn50 {
	width: 50%;
}

.listColumn66 {
	width: 67%;
}

.listColumn75 {
    width: 75%;
}

.listColumn80 {
    width: 80%;
}

.listColumn100 {
    width: 100%;
}

/* Clear floats after the columns */
.listRow:after {
    content: "";
    display: table;
    clear: both;
}

.listRow li {
	margin-left: 25px;
}






/*************************************************************************
** Tools Divs
** http://alexking.org/blog/2005/07/18/css-checkbox-label-positioning
** https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css
*************************************************************************/

.tools {
	margin: auto;
	/*max-width: 400px;*/
	vertical-align: middle;
	color: var(--gsOffBlack);
	float: center;
	border: 1px solid var(--gsPaleGreen);
	padding: 0 1% 1% 1%;
}



.tools .tools-section {
	margin: auto;
	margin-top: 1%;
	vertical-align: middle;
	color: var(--gsOffBlack);
	float: center;
	border: 1px solid var(--gsPaleGreen);
	padding: 0 1% 1% 1%;
	background-color: rgba(255,255,255,0.25);


}

.tools .controlRow{
	width: 100%;
	display: flex;
	justify-content: stretch;
}

.tools .dataTable {
	width: 100%;
	margin: 0;
}

.tools label {
	flex-grow: 1;
	width: 25%;
}

.tools input[type=text] {
	height: 75%;
	width: 25%;
	border: 1px solid var(--gsPaleGreen);
	padding-left: 5px;
	margin: 2px 0px 2px 0px;
	flex-grow: 1;
}

.tools select {
	float: right;
	height: 19px;
	width: 65%;
	border: 1px solid var(--gsPaleGreen);
	padding: 0px 6px;
}


.tools select.fullwidth {
	float: none;
	background-color: var(--gsLitePaleGreen);
	color: var(--gsOffBlack);
	height: 25px;
	width: 100%;
	margin: 8px 0px 0px 0px;
	padding: 0px;

}


.tools h2 {
	text-align: center;
}

.tools h3 {
	text-align: center;
}




/* xxx What does this apply to? */
hr {
	width: 90%;
	height: 1px;
	margin-left: auto;
	margin-right: auto;
	background-color:var(--gsPaleGreen);
	border: 0 none;
	margin-top: 2px;
	margin-bottom:2px;

}






/*************************************************************************
** Banners
*************************************************************************/


.banner, .apBanner, .btBanner, .cookingBanner, .cwBanner, .dfBanner, .dlBanner, .gardeningBanner, .gloomhavenBanner, .gurpsBanner, .stemBanner {
    position: relative;
    width: 100%;
	height: calc(22vw);
	max-height: 200px;
	min-height: 100px;
    text-align: center;
    background: url(https://glowingsaber.com/IMG/banner_mcCabeBox.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
	display: flex;
	border-bottom: 1px solid var(--gsLiteOffBlack);
}
.btBanner {
    background: url(https://glowingsaber.com/IMG/banner_atlas.jpg);
    background-size: cover;
}
.cookingBanner {
	background: url(https://glowingsaber.com/IMG/banner_bbq1.jpg);
    background-size: cover;
}
.cwBanner {
    background: url(https://glowingsaber.com/IMG/banner_carwars1.jpg);
    background-size: cover;
}
.dfBanner {
    background: url(https://glowingsaber.com/IMG/banner_darkforest1.jpg);
    background-size: cover;
}
.dlBanner {
    background: url(https://glowingsaber.com/IMG/banner_deadlands1.jpg);
    background-size: cover;
}
.apBanner {
    background: url(https://glowingsaber.com/IMG/banner_apocalypse.jpg);
    background-size: cover;
}
.gardeningBanner {
	background: url(https://glowingsaber.com/IMG/banner_gardening3.jpg);
    background-size: cover;
}
.gurpsBanner {
    background: url(https://glowingsaber.com/IMG/banner_darkforest1.jpg);
    background-size: cover;
}
.stemBanner {
	background: url(https://glowingsaber.com/IMG/banner_stem.jpg);
    background-size: cover;
}


.bannerText, .apBannerText, .btBannerText, .cookingBannerText, .cwBannerText, .dfBannerText, .dlBannerText, .gardeningBannerText, .gloomhavenBannerText, .gurpsBannerText, .malifauxBannerText, .stemBannerText {
	font-family: "Cinzel", "Times New Roman", Times, serif;
	text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 3px white, 0px 0px 3px white;
	font-size: 4.5em;
	font-weight: bold;
	color: var(--gsRed);
	margin: 20px auto;
    letter-spacing: 1px;
	width: 100%;
    position: absolute;
}
.btBannerText {
	font-family: "Steiner", "Times New Roman", Times, serif;
	font-weight: normal;
}
.cookingBannerText {
	font-family: "Klondike", "Times New Roman", Times, serif;
	font-weight: normal;
}
.cwBannerText {
	font-family: "StopN", "Times New Roman", Times, serif;
	font-weight: normal;
}
.dfBannerText {
	font-family: "AbaddonII", "Times New Roman", Times, serif;
	font-weight: normal;
}
.dlBannerText {
	font-family: "Klondike", "Rye", "Times New Roman", Times, serif;
	font-weight: normal;
}
.apBannerText {
	font-family: "Overseer", "Rye", "Times New Roman", Times, serif;
	font-weight: normal;
}
.gardeningBannerText {
	font-family: "Lobster", "Times New Roman", Times, serif;
	color: var(--gsLiteGardenGreen);
	font-weight: normal;
}
.gloomhavenBannerText {
	font-family: "PirataOne", "Times New Roman", Times, serif;
}
.gurpsBannerText {
	font-family: "Korinna", "Times New Roman", Times, serif;
	font-weight: normal;
}
.malifauxBannerText {
	font-family: "Bloodcrow", "Times New Roman", Times, serif;
	font-weight: normal;
}
.stemBannerText {
	font-family: "Astrolab", "Times New Roman", Times, serif;
	font-weight: normal;
	color: var(--gsLiteStemBlue);
	font-size: 3.5em;
}



@media only screen and (max-width: 900px) {
	.bannerText, .apBannerText, .btBannerText, .cookingBannerText, .cwBannerText, .dfBannerText, .dlBannerText, .gardeningBannerText, .gurpsBannerText, .gloomhavenBannerText, .malifauxBannerText, .stemBannerText {
			font-size: 8vw;
	}
}




/*************************************************************************
** Top navBar drop downs
*************************************************************************/
div.NavBar {
	/* background-color: var(--gsOffBlack);  */
	/* border: 2px solid var(--gsOffBlack);  */
    width: 100%;
	color: var(--gsRed);
    position: absolute;
    letter-spacing: 1px;
	bottom: 0px;
	font-family: "Satisfy", "Times New Roman", Times, serif;
}

div.NavBar select {
	color: var(--gsLitePaleGreen);
	background-color: var(--gsOffBlack); 
	border: 2px solid var(--gsLiteOffBlack);
	width: 100%;
	font-size: 1.1em;
	appearance: none;
	background-repeat: no-repeat, repeat;
	background-position: left .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

div.NavBar select option {
	font-size: .9em;
	background-color: var(--gsOffBlack); 
}

div.NavBar .listColumn50 {
    float: left;
	width: 50%;
	padding: 5px 5px;
}


@media (max-width: 620px) {
	div.NavBar select {
		font-size: .8em;
	}
}




/*************************************************************************
**Themes
*************************************************************************/



/* Age pages */
span.greyedOut {
	color: #666666;
}



/* Dark Fantasy pages */
.darkFantasy * {
	font-family: "Immortal", Courier, monospace;
}
.darkFantasy h1, .darkFantasy h2, .darkFantasy h3, .darkFantasy h4, .darkFantasy button, .darkFantasy select {
	font-family: "AbaddonII", "Times New Roman", Times, serif;
}
.darkFantasy button, .darkFantasy select {
	font-weight:bold;
	background-color: lightgrey;
	border: 1px solid var(--gsLiteOffBlack);
}


/* Battletech pages */
.battletech h1, .battletech h2, .battletech h3, .battletech h4, .battletech button {
	font-family: "Steiner", "Times New Roman", Times, serif;
}
.battletech button {
	background-color: gray;
	background-color: lightgrey;
	border: 1px solid var(--gsLiteOffBlack);
}



/* Car Wars pages */
.carWars h1, .carWars h2, .carWars h3, .carWars h4, .carWars button {
	font-family: "StopN", "Times New Roman", Times, serif;
}
.carWars button {
	background-color: gray;
	background-color: lightgrey;
	border: 1px solid var(--gsLiteOffBlack);
}

/* age pages */
.age p {
	text-indent: 15px;
	margin-bottom: 2px;
}



/* Deadlands pages */
.deadlands h1, .deadlands h2, .deadlands h3, .deadlands h4, .deadlands button, .deadlands select {
	font-family: "Klondike", "Rye", "Times New Roman", Times, serif;
}
.deadlands h1 {
}
.deadlands button, .deadlands select {
}

/* Apocalypse pages */
.apocalypse h1, .apocalypse h2, .apocalypse h3, .apocalypse h4, .apocalypse button, .apocalypse select {
	font-family: "Overseer", "Times New Roman", Times, serif;
	color: var(--gsLiteOffBlack);
}
.apocalypse h1 {
}
.apocalypse h2 {
	border-color: var(--gsLiteOffBlack);
}
.apocalypse button, .apocalypse select {
}
.apocalypse button {
	border-color: var(--gsLiteOffBlack);
}



/* Gardening pages */
.gardening h1, .gardening h2, .gardening h3, .gardening h4, .gardening button {
	font-family: "Lobster", "Times New Roman", Times, serif;
	color: var(--gsGardenGreen);
}
.gardening h2 {
	border-bottom: 1px solid var(--gsGardenGreen);
}
/*  a:hover MUST come after a:link and a:visited
	a:active MUST come after a:hover */
.gardening a:link {
	color: var(--gsGardenGreen);
}
.gardening a:visited {
	color: var(--gsLiteGardenGreen);
}
.gardening a:hover {
	color: var(--gsDarkGardenGreen);
}
.gardening a:active {
	color: blue;
}
.gardening .gardeningMaps img {
	border: 1px solid #ada3a3;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}
.gardening .gardeningMaps h2 {
	text-align: center; 
    border: 0;
}
.gardening input[type=text] {
	border: 1px solid var(--gsPaleGreen);
}
.gardening topic {
	font-family: "Lobster", "Times New Roman", Times, serif;
	color: var(--gsGardenGreen);
	text-decoration: underline;
}


/* Gloomhaven */
.gloomhaven * {
	font-family: "HighTower", "Times New Roman", Times, serif;
}
.gloomhaven h1, .gloomhaven h2, .gloomhaven h3, .gloomhaven h4, .gloomhaven button {
	font-family: "PirataOne", "Times New Roman", Times, serif;
}
.gloomhavenSymbols {
	font-family: "GloomhavenSymbols", "Times New Roman", Times, serif;
}



/* GURPS pages */
.gurps h1, .gurps h2, .gurps h3, .gurps h4, .gurps button {
	font-family: "Korinna", "Times New Roman", Times, serif;
}
/* GURPS Symbols */
.gurpsSymbols {
	font-family: "GURPSSymbols", "Times New Roman", Times, serif;
}




/* Journal */
.journal * {
	/* font-family: "Nothing You Could Do", Courier, monospace;
	font-weight: bold;  */
}
.journal .handWritingOK * {
	/* font-family: "Permanent Marker", Courier, monospace; */
}
.journal p {
	/* font-size: 1.2em; */
	text-indent: 1.2em;
	/* padding-bottom: 0.2em; */
}







/* Letter - Cursive letter with background. */
.letter * {
	font-family: "Nothing You Could Do", "Permanent Marker", "Homemade Apple", Courier, monospace;
}
.letter p{
	font-size: 1.1em;
	margin: 0, 0, 2em, 0;
}
.letter div {
	border: 1px solid #ada3a3;
	padding: 25px;
	background-image: url('https://glowingsaber.com/IMG/wallpaper-oldPaper4.jpg');
	background-size: 100% 100%;
	margin: 25px;
}



/* Malifaux pages */
.malifaux h1, .malifaux h2, .malifaux h3, .malifaux h4, .malifaux button {
	font-family: "Bloodcrow", "IM Fell DW Pica", "Times New Roman", Times, serif;
}
.malifaux h1 {
	font-size: 4em;
}
.malifaux button {
}
span.malifauxIcon{
	font-family: "MalifauxRodent", Times, serif;
}


/* Newspaper article with background. */
.newsPaper * {
	font-family: "Special Elite", Courier, monospace;
}
.newsPaper p {
}
.newsPaper div {
	border: 1px solid #ada3a3;
	padding: 25px;
	background-image: url('https://glowingsaber.com/IMG/wallpaper-oldPaper5.jpg');
	background-size: 100% 100%;
	margin: 25px;
}


/* Terminal */
.terminal * {
	font-family: "FixedSys", Courier, monospace;
	color: var(--gsLiteGardenGreen);
}
.terminal p{
	font-size: 1.1em;
	margin: 0, 0, 2em, 0;
}
.terminal div{
	border: 1px solid #ada3a3;
	padding: 25px;
	background-image: url('https://glowingsaber.com/IMG/wallpaper-terminal02.png');
	background-size: 100% 100%;
	margin: 25px;
}


/* Nightmares */
.nightMare * {
	font-family:  "Jim Nightshade", "Julee", "Sedgwick Ave", "Eater", "Covered By Your Grace", "Reenie Beanie", cursive, serif;
}
.nightMare h3 {
}
.nightMare p {
}





/* STEM pages */
.stem h1, .stem h2, .stem h3, .stem h4, .stem button {
	font-family: "Astrolab", "Times New Roman", Times, serif;
	color: var(--gsStemBlue);
}
.stem h1 {
	font-size: 2em;
}
.stem h2 {
	border-bottom: 1px solid var(--gsStemBlue);
	font-size: 1.5em;
}
.stem h3 {
	font-size: 1.1em;
}
.stem button {
	font-size: 0.8em;
}

/*  a:hover MUST come after a:link and a:visited
	a:active MUST come after a:hover */
.stem a:link {
	color: var(--gsStemBlue);
}
.stem a:visited {
	color: var(--gsLiteStemBlue);
}
.stem a:hover {
	color: var(--gsDarkStemBlue);
}
.stem a:active {
	color: red;
}












/*************************************************************************
Dynamically adust margins
p + hx selects all <hx> elements that are placed immediately after <p> elements 
*************************************************************************/

p + h1 	 	{margin: 0.5em 0px 0px 0px;}
p + h2 	 	{margin: 0.5em 0px 0px 0px;}
p + h3 	 	{margin: 0.5em 0px 0px 0px;}
p + h4 	 	{margin: 0.5em 0px 0px 0px;}

/* div + h1 	{margin: 0px 0px 0px 0px;}
div + h2  	{margin: 0px 0px 0px 0px;}
div + h3  	{margin: 0px 0px 0px 0px;}
div + h4  	{margin: 0px 0px 0px 0px;} */

h1 + h1 	{margin: 3px 0px 0px 0px;}
h1 + h2 	{margin: 3px 0px 0px 0px;}
h1 + h3 	{margin: 3px 0px 0px 0px;}
h1 + h4 	{margin: 3px 0px 0px 0px;}
h1 + p 	 	{margin: 0px 0px 0px 0px;}

h2 + h2 	{margin: 3px 0px 0px 0px;}
h2 + h3 	{margin: 3px 0px 0px 0px;}
h2 + h4 	{margin: 3px 0px 0px 0px;}
h2 + p 	 	{margin: 0px 0px 0px 0px;}

h3 + h3 	{margin: 3px 0px 0px 0px;}
h3 + h4 	{margin: 3px 0px 0px 0px;}
h3 + p 	 	{margin: 0px 0px 0px 0px;}

h4 + h4 	{margin: 3px 0px 0px 0px;}
h4 + p 	 	{margin: 0px 0px 0px 0px;}





/*************************************************************************
Testing
*************************************************************************/

/* div {
	border: 1px solid green;
} */