/******* FONTS **********/
/* ScoutsLite*/
@font-face 
{
  font-family: 'ScoutsLite';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ScoutsRegular*/
@font-face 
{
  font-family: 'ScoutsRegular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ScoutsBold*/
@font-face 
{
  font-family: 'ScoutsBold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ScoutsBlack */
@font-face 
{
  font-family: 'ScoutsBlack';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Nunito Sans Black'), local('NunitoSans-Black'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8-BM5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/******* VARIABLES **********/
:root 
{
	--ScoutsPurple: rgb(116,20,220);
	--ScoutsTeal: rgb(0,167,148);
	--ScoutsRed: rgb(226,46,18);
  	--ScoutsGreen: rgb(35,169,80);
	--ScoutsNavy: rgb(0,58,130);
	--ScoutsBlue: rgb(0,110,224);
	--ScoutsYellow: rgb(255,230,39);
	--ScoutsGrey: #f7f8f3;


	--ScoutsHeadingSize: 34pt;
	--ScoutsHeadingSizeSml: 24pt;

	--ScoutsSubHeadingSize: 16pt;
	--ScoutsSubHeadingSizeSml: 12pt;

	--ScoutsBodySize: 12pt;
	--ScoutsBodySizeSml: 10pt;

	--InfoBoxThree: 31%;
	--InfoBoxThreeInner: 29%;

	--InfoBoxTwo: 47%;
	--InfoBoxTwoInner: 45%;

	--InfoBoxOne: 98%;
	--InfoBoxOneInner: 95%;

	--Full: 100%;
}
/******** Core ********/
html
{	
	width: var(--InfoBoxOne);; 
	scroll-behavior: smooth;
}
body 
{	
	width: var(--InfoBoxOne);; 
	scroll-behavior: smooth;
}
p 
{ 
	margin:0; 
}
/******** ATOMS ********/
.Pre 
{ 
	white-space: pre-line; 
	font-family: "Courier New", Courier, monospace;
	margin-left:10px;
	font-weight:bold;
}
.Normal 
{ 
	color: black; 
}
.White 
{ 
	color: white; }
/******** LINKS ********/
a:link.Normal 
{ 
	color:black; 
}
a:visited.Normal 
{ 
	color:black; 
}
a:hover.Normal
{
	xdisplay:inline-block;
	background-color: var(--ScoutsGreen);
	color: white;
	xfont-weight:bold;
	xtext-decoration:none;
}
a:active.Normal 
{ 
	color:black; 
}
a:link.White 
{ 
	color:white; 
}
a:visited.White 
{ 
	color:white; 
}
a:hover.White
{
	display:inline-block;
	background-color:white;
	color: var(--ScoutsRed);
	text-decoration:none;
}
a:active.White 
{ 
	color:white; 
}
/******** MAIN LOGO ********/
.ScoutsLogo
{
	background-color: var(--ScoutsPurple);
	background-image: url("scouts-logo.png");
	background-position: left;
	background-repeat: no-repeat;
	color: white;
	font-family: 'ScoutsBlack', sans-serif;
	font-size: var(--ScoutsHeadingSize);
	height: 150px;
	margin:0 auto;
	margin-bottom:10px;
	width: 300px;
}
/******** HEADERS ********/
/* Used for both page header and section headers */
.ScoutsHeaderMain
{
	text-align:center;
	color: var(--ScoutsGreen);
	font-family: 'ScoutsBlack', sans-serif;
	font-size: var(--ScoutsHeadingSize);
	margin-bottom:5px;	
}

.ScoutsHeaderBox
{
	width: var(--InfoBoxOne); 
	margin:0 auto;
	max-width:1500px; 
	text-align:center;
	margin-bottom:10px;
	margin-top:20px;
}
.ScoutsSubHeaderBody
{
	color: black;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:20px;
}

.ScoutsHeaderWelcome
{
	color: var(--ScoutsGreen);
	font-family: 'ScoutsBlack', sans-serif;
	font-size: var(--ScoutsHeadingSizeSml);
	margin-top:20px;
	margin-bottom:5px;
	text-decoration:underline;

}
.ScoutsHeaderWelcomeDate
{
	color: var(--ScoutsGreen);
	font-family: 'ScoutsBlack', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:20px;
}


/* Included for all headers */
.ScoutsHeader 
{
	color: black;
	font-family: 'ScoutsBlack', sans-serif;
	font-size: var(--ScoutsHeadingSizeSml);
	margin-bottom:5px;
}
.ScoutsSubHeader 
{
	color: black;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsSubHeadingSizeSml);
	margin-bottom:5px;
}
.ScoutsHeaderTask
{
	color: black;
	font-family: 'ScoutsBlack', sans-serif;
	font-size: var(--ScoutsHeadingSizeSml);
	margin-bottom:5px;
	color: black;
}

.ScoutsSubHeaderTask 
{
	color: black;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsSubHeadingSizeSml);
	margin-bottom:5px;
}
.ScoutsHeaderIntro, 
.ScoutsHeaderUpcoming, 
.ScoutsHeaderGreen, 
.ScoutsHeaderQA, 
.ScoutsHeaderFooter
{
	color: var(--ScoutsGreen);
}
.ScoutsSubHeaderIntro, 
.ScoutsSubHeaderUpcoming, 
.ScoutsSubHeaderGreen,
.ScoutsSubHeaderQA, 
.ScoutsSubHeaderFooter
{
	color: black;
}
.ScoutsHeaderPuzzle, 
.ScoutsHeaderPuzzles, 
.ScoutsHeaderRed
{
	color: var(--ScoutsRed);
}
.ScoutsSubHeaderPuzzle, 
.ScoutsSubHeaderPuzzles, 
.ScoutsSubHeaderRed
{
	color: black;
}
.ScoutsHeaderDone, 
.ScoutsHeaderBlue, 
.ScoutsHeaderUpdate
{
	color: var(--ScoutsBlue);
}
.ScoutsSubHeaderDone, 
.ScoutsSubHeaderBlue, 
.ScoutsSubHeaderUpdate
{
	color: black;
}
.ScoutsHeaderInfo, 
.ScoutsHeaderPurple
{
	color: var(--ScoutsPurple);
}
.ScoutsSubHeaderInfo,
.ScoutsSubHeaderPurple
{
	color: black;
}
.ScoutsHeaderInfo, 
.ScoutsHeaderNavy
{
	color: var(--ScoutsNavy);
}
.ScoutsHeaderInfo, 
.ScoutsHeaderTeal
{
	color: var(--ScoutsTeal);
}
.ScoutsHeaderInfo, 
.ScoutsHeaderYellow
{
	color: var(--ScoutsYellow);
}
/******** MAIN CONTENT ********/
/* Flex Box Storing InfoBox or PuzzleBox */
.ScoutsMainContent
{
	order:1; 
	x_width: var(--InfoBoxOne); 
	width: 100%; 
	max-width:1500px; 
	margin:0 auto;
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:space-between;
}
/******** INFOBOX ********/
.ScoutsInfoBox 
{	
	background:#fff; 
	border-width:2px;
	border-style:solid;
	border-color: var(--ScoutsGreen);
	margin-bottom:20px; 
	padding:8px; 
	position:relative;
	width: var(--InfoBoxOne); 
	max-width:1500px; 
}
/* NOT USED */
.ScoutsBoxHeaderNormal, 
.ScoutsBoxHeaderBlack
{
	color: black;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsBoxHeaderWhite
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsBoxHeaderDate, 
.ScoutsBoxHeaderDateBlack, 
.ScoutsBoxHeaderDateNormal
{
	color: black;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
.ScoutsBoxHeaderDateWhite 
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
.ScoutsInfoBoxQA
{	
	border-color: var(--ScoutsGreen);
	margin-bottom:10px; 
	padding:4px; 
}
.ScoutsBoxHeaderQA
{
	color: var(--ScoutsGreen);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:3px;
}
.ScoutsBoxHeaderDateQA
{
	color: black;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySizeSml);
	margin-bottom:3px;
}
.ScoutsBoxBodyTextQA
{
	color: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySizeSml);
	margin-bottom:3px;
}
.ScoutsInfoBoxIntro, 
.ScoutsInfoBoxGreenFill,
.ScoutsInfoBoxFooter
{	
	border-color: var(--ScoutsGreen);
	background-color: var(--ScoutsGreen);
}
.ScoutsBoxHeaderGreenFill,
.ScoutsBoxHeaderIntro, 
.ScoutsBoxHeaderFooter
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxUpcoming, 
.ScoutsInfoBoxGreen
{	
	border-color: var(--ScoutsGreen);
}
.ScoutsBoxHeaderUpcoming, 
.ScoutsBoxHeaderGreen
{

	color: var(--ScoutsGreen);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxUpdate, 
.ScoutsInfoBoxBlueFill
{
	border-color: var(--ScoutsBlue);
	background-color: var(--ScoutsBlue);
}
.ScoutsBoxHeaderBlueFill,
.ScoutsBoxHeaderUpdate
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxDone, 
.ScoutsInfoBoxBlue, 
.ScoutsInfoBoxDoneMain
{	
	border-color: var(--ScoutsBlue);
}
.ScoutsBoxHeaderDone, 
.ScoutsBoxHeaderDoneMain, 
.ScoutsBoxHeaderBlue
{
	color: var(--ScoutsBlue);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxRedFill
{	
	border-color: var(--ScoutsRed);
	background-color: var(--ScoutsRed);
}
.ScoutsBoxHeaderRedFill
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxPuzzles, 
.ScoutsInfoBoxRed
{	
	border-color: var(--ScoutsRed);
}

/* Reserved for Special Puzzle Box*/
/* .ScoutsInfoBoxPuzzle*/
.ScoutsBoxHeaderPuzzle, 
.ScoutsBoxHeaderPuzzles, 
.ScoutsBoxHeaderRed
{
	color: var(--ScoutsRed);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
	width:98%;
}
.ScoutsInfoBoxTask, 
.ScoutsInfoBoxYellowFill
{	
	border-color: var(--ScoutsYellow);
	background-color: var(--ScoutsYellow);
}
.ScoutsBoxHeaderTask,
.ScoutsBoxHeaderYellowFill
{
	color: black;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxYellow
{	
	border-color: var(--ScoutsYellow);
}
.ScoutsBoxHeaderYellow
{

	color: var(--ScoutsYellow);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxNavyFill
{	
	border-color: var(--ScoutsNavy);
	background-color: var(--ScoutsNavy);
}
.ScoutsBoxHeaderNavyFill
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxNavy
{	
	border-color: var(--ScoutsNavy);
}
.ScoutsBoxHeaderNavy
{

	color: var(--ScoutsNavy);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxTealFill
{	
	border-color: var(--ScoutsTeal);
	background-color: var(--ScoutsTeal);
}
.ScoutsBoxHeaderTealFill
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxTeal
{	
	border-color: var(--ScoutsTeal);
}
.ScoutsBoxHeaderTeal
{

	color: var(--ScoutsTeal);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxPurpleFill
{	
	border-color: var(--ScoutsPurple);
	background-color: var(--ScoutsPurple);
}
.ScoutsBoxHeaderPurpleFill
{
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxInfo, 
.ScoutsInfoBoxPurple
{	
	border-color: var(--ScoutsPurple);
}
.ScoutsBoxHeaderInfo, 
.ScoutsBoxHeaderPurple
{

	color: var(--ScoutsPurple);
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsSubHeadingSize);
	margin-bottom:5px;
}
.ScoutsInfoBoxTOC
{	
	border-color: var(--ScoutsGreen);
	max-width:1000px;
	width:1000px;
	padding:20px;
	margin:0 auto; 
	margin-bottom:10px; 
}
/******** INFOBOX | COLLAPSE BOX ********/
/* .ScoutsCollapseBox  *:nth-child(n+2) */
.ScoutsCollapseBoxShow > *:first-child
{
	cursor:pointer;
}
.ScoutsCollapseBoxShow > *
{
	x_display:block;
	max-height:4000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.ScoutsCollapseBoxHide > *:first-child
{
	cursor:pointer;
}
.ScoutsCollapseBoxHide > *:not(:first-child)
{
	x_display:none;
	overflow:hidden;
	max-height:0px;
	margin:0px;
	opacity:0;
	transition: opacity 0.25s, max-height 0.5s;
}
.ScoutsInfoBoxPuzzle
{
	border-color: var(--ScoutsRed);
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:space-between;
	width: var(--InfoBoxOne); 
	max-width:1500px; 
}
.ScoutsPuzzleLeftSide 
{
	width: width: var(--InfoBoxOneInner);
}
.ScoutsPuzzleRightSide 
{
	width: width: var(--InfoBoxOneInner);
}
.ScoutsPuzzleQuestionHeading
{
	background-color: var(--ScoutsRed);
	color:white;
	cursor:pointer;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-top:5px;
	margin-bottom:5px;
	padding:2px;
}
.ScoutsPuzzleAnswerHeading
{
	background-color: var(--ScoutsGreen);
	color:white;
	cursor:pointer;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-top:5px;
	margin-bottom:5px;
	padding:2px;
}
.ScoutsPuzzleReasonHeading
{
	background-color: var(--ScoutsNavy);
	color:white;
	cursor:pointer;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-top:5px;
	margin-bottom:5px;
	padding:2px;
}
.ScoutsPuzzleText
{
	overflow:hidden;
	max-height:0px;
	opacity:0;
	transition: opacity 0.25s, max-height 0.5s;
}

/* Container box for the reveal*/
.ScoutsPuzzleTextShow
{
	display:block;
	max-height:10000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.ScoutsRadio
{
	cursor: pointer;
	color: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin:5px;
	x_border:1px solid light-grey;
	max-width:400px;
}

.ScoutsRadio > label
{
	cursor: pointer;
	color: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySize);
}
.ScoutsOptionWrong
{
	background-color: #ECC5C0;
	width:95%;
	padding:10px;
	margin:10px;
	display:none;
	color:white;
}
.ScoutsOptionRight
{
	background-color: lightgreen;
	width:95%;
	padding:10px;
	margin: 10px;
	display:none;
}
/******** Box | Content ********/
/******** Box | Content | Flex  ********/
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items */

/* Radio,Flex, Img max width 300 so ensure 3 by limiting to 1000px */

.ScoutsSimpleFlex
{
	border-color: none;
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:flex-start;
	x_justify-content:space-between;
	x_justify-content:center;
	x_justify-content:justify-content;
	max-width:2000px; 
	gap:3px;
}

/* 
{_FLEX }
Use for images gallery, quotes, etc within a box 
*/
.ScoutsSimpleFlexCol
{
	border-color: none;
	display:flex; 
	flex-direction:column; 
	flex-wrap:wrap; 
	justify-content:flex-start;
	x_justify-content:justify-content;
	max-width:950px; 
	height:300px;
}


.ScoutsSimpleFlexCol100
{
	height:100px;
}

.ScoutsSimpleFlexCol200
{
	height:200px;
}

.ScoutsSimpleFlexCol300
{
	height:300px;
}

.ScoutsSimpleFlexCol400
{
	height:400px;
}

.ScoutsSimpleFlexCol500
{
	height:500px;
}

.ScoutsComplexFlexRow
{
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	x_justify-content:space-between; 
	x_justify-content:center;
	justify-content:flex-start;
	gap:5px;
}

.ScoutsFlexTOC
{
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:center;
	gap:5px;
	width:100%;
}

.ScoutsFlexTOCCol
{
	width:30%; 
	padding:5px; 
	text-align:center;
}


/******** Box | Content | Body Text ********/
.ScoutsBoxBodyText
{
	color: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}

.ScoutsBoxBodyTextNormal, 
.ScoutsInfoBoxBodyTextBlack
{
	xcolor: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}

.ScoutsBoxBodyTextNormal a
{
	font-weight:bold;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}


.ScoutsBoxBodyTextComment
{
	background-color: var(--ScoutsGrey);
	margin-left:20px;
	margin-top:5px;
	margin-right:5px;
	margin-bottom:5px;
	padding: 10px;
	color: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySizeSml);
}

.ScoutsBoxBodyTextWhite
{
	color: white;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
.ScoutsBoxBodyTextBoldNormal, .ScoutsBoxBodyTextBoldBlack 
{
	color: black;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
.ScoutsBoxBodyTextBoldWhite
{
	color: white;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
/* https://css-tricks.com/adaptive-photo-layout-with-flexbox/*/

.ScoutsImg
{
	display:block;
	width: 95%;
	max-width:400px;
	padding-left: 0px;

	x_box-shadow: 5px 5px 15px 5px grey;
	x_align-self: left;
	
	position:relative;
}

.ScoutsImgText
{
	position: absolute;
    left: 10px;
    top: 10px;
	color: white;
	font-family:'ScoutsRegular', sans-serif;
	font-weight:bold;
}



.ScoutsImg > img { width:100%; }
.ScoutsVid
{
	display:block;
	width: 95%;
	max-width:400px;
	margin-left: 0px;
	margin-bottom: 10px;
}

/******** Box | Content | Quotes  ********/
.ScoutsBodyTextQuote
{
	color: black;
	background-color: lightyellow;
	font-family: 'Courier New', sans-serif;
	margin-bottom:10px;
	margin-left:0px;
	padding:10px;
}
.ScoutsBodyTextQuoteNormal, 
.ScoutsBodyTextQuoteBlack
{
	color: black;
	background-color: lightyellow;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySizeSml);
	font-style:italic;
	width: 300px;
	margin-bottom:10px;
	margin-left:10px;
	padding:10px;
}
.ScoutsBodyTextQuoteWhite
{
	color: white;
	border:1px solid white;
	font-family: 'Courier New', sans-serif;
	margin:5px;
	padding:10px;
}

.ScoutsBodyTextQuoteWhite
{
	color: white;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsBodySizeSml);
	font-style:italic;
	width: 300px;
	margin-bottom:10px;
	margin-left:10px;
}
.ScoutsBodyTextLetter
{
	color: black;
	background-color: lightyellow;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: 12pt;
	max-width: 500px;
	padding:10px;
	margin-bottom:10px;
	margin-left:0px;
}
/******** Box | Content | Table ********/

/*** https://css-tricks.com/complete-guide-table-element/ ***/
.ScoutsBoxTable 
{
	border-collapse: collapse;
	border-spacing: 0;
	border:1px solid gray;
	table-layout: fixed;
	vertical-align: top;	
	width:95%;
}
.ScoutsBoxTable td
{
	 vertical-align: middle;
	 border:1px solid gray;
	padding:5px;

}
.ScoutsBoxTable img
{
	 max-width:100px;	
}
.ScoutsBoxTable td:nth-child(2) 
{
		
}
/******** Box | Content | TOC ********/
.ScoutsBoxBodyTextTOC1
{
	color: black;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
.ScoutsBoxBodyTextTOC2
{
	color: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySizeSml);
	margin-bottom:5px;
	padding-left:5px;
}
.ScoutsSubBox
{
	border: 1px solid var(--ScoutsNavy);
	padding: 5px;
	margin: 5px 0 0px 0;
}
/******** Content | Box | QA ********/
.ScoutsSimpleQABox
{
	xbackground-color: var(--ScoutsTeal);
	margin:5px 0 5px 0;
	padding:5px;
	xborder:2px solid var(--ScoutsTeal);
}

/* QA Box (e.g. for jokes) */
.ScoutsSimpleQuestionBox
{
	background-color: var(--ScoutsTeal);
	padding:5px;
}
.ScoutsSimpleQuestionText
{
	color: white;
	cursor: pointer;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:0px;
}
.ScoutsSimpleAnswerBox
{
	background-color: var(--ScoutsGrey);
	overflow:hidden;
	max-height:0px;
	opacity:0;
	padding:5px;
	transition: opacity 0.25s, max-height 0.5s;
}
.ScoutsSimpleAnswerBoxShow
{
	display:block;
	max-height:2000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.ScoutsSimpleAnswerText
{
	color: black;
	font-family: 'ScoutsRegular', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
/******** Content | Box | Choice 



<div class="ScoutsChoiceBox">
	<div  class="ScoutsChoiceItem">
		<p class="ScoutsChoiceHeading">Yes</p>
		<div class="ScoutsChoiceBody">
			<p class="ScoutsBodyTextNormal">Sheep – with the letter "H" replaced by the letter "L"</p>
		</div>
	</div>
	<div  class="ScoutsChoiceItem">
		<p class="ScoutsChoiceHeading">No</p>
		<div class="ScoutsChoiceBody">
			<p class="ScoutsBodyTextNormal">Nope!</p>
		</div>
	</div>
</div>


********/
.ScoutsChoiceBox
{
	border: 1px solid var(--ScoutsNavy);
	padding: 5px;
	margin: 5px 0 0px 0;
}
.ScoutsChoiceItem:not(:last-child) 
{
	margin-bottom: 5px;
}
.ScoutsChoiceHeading
{
	cursor: pointer;
	background-color: var(--ScoutsNavy);
	padding: 5px;
	color: white;
	font-family: 'ScoutsBold', sans-serif;
	font-size: var(--ScoutsBodySize);
}
.ScoutsChoiceBody
{
	background-color: var(--ScoutsGrey);	
	margin-top: 5px;
	padding: 5px;
	xdisplay: none;

	overflow:hidden;
	max-height:0px;
	opacity:0;
	transition: opacity 0.25s, max-height 0.5s;
}
.ScoutsChoiceBodyShow
{
	display:block;
	max-height:2000px;
	opacity:100;
	transition: max-height 2s, opacity 1s;
}
.ScoutsGuessBox
{
}

.ScoutsGuessBox *
{
	color: black;
	font-family: 'ScoutsLite', sans-serif;
	font-size: var(--ScoutsBodySize);
	margin-bottom:5px;
}
.ScoutGuessItem
{
	border: 1px solid var(--ScoutsNavy);
	padding: 5px;
	margin: 5px 0 0px 0;
}
/******** Content | Box | Video ********/
.embed-container 
{ 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	height: auto; 
}
.embed-container iframe, .embed-container object, .embed-container embed 
{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}
.embed-container-outer
{ 
	width:70%;
	x_margin: 0 auto;
	x_border:1px solid red;
}

.embed-container-inner
{
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	xoverflow: hidden;
	xborder:1px solid blue;
}

.embed-container-inner iframe
{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 	
}

.embed-container-inner > .embed-container-toggle
{ 
	cursor:pointer;
	font-family: 'ScoutsRegular', sans-serif;
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 150px; 
	height: 20px;
	background-color: red;
	color:white;
	z-index:2;
}
.video-embed
{ 
	position: relative; 
	width:95%;
	max-width:500px;
	x_margin: 0 auto;
}

.ScoutsSimpleFlex .video-embed,
.ScoutsComplexFlexRow .video-embed
{
	margin:0;
}


.video-embed-toggle
{ 
	text-align:right;
	cursor:pointer;
	font-family: 'ScoutsRegular', sans-serif;
	position: absolute; 
	top: 0; 
	right: 0; 
	width: 60px; 
	height: 20px;
	background-color: red;
	color:white;
	z-index:2;
}

.video-embed video
{ 
	width:100%;
	object-fit:fill;
}

.video-embed-title
{ 
	x_cursor:pointer;
	font-family: 'ScoutsRegular', sans-serif;
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 150px; 
	height: 20px;
	background-color: var(--ScoutsBlue);
	color:white;
	z-index:3;
}
/******** Content | Box | Escape Room ********/
.AnswerInput {
	font-family: 'ScoutsBlack', sans-serif;
	font-size: 16px;
	padding:5px;
	border-radius:5px;
}
.AnswerButton {
	color:white;
	cursor:pointer;
	display:inline-block;
	font-size: 16px;
	margin-left:5px;
	padding:5px;
	background-color:var(--ScoutsTeal);
	border:1px solid var(--ScoutsTeal);
	border-radius:3px;
	text-align:center;
	font-family: 'ScoutsBlack', sans-serif;
}
.AnswerButton:hover{
	color:white;
	cursor:pointer;
	display:inline-block;
	font-size: 16px;
	margin-left:5px;
	padding:5px;
	background-color:var(--ScoutsRed);
	border:1px solid var(--ScoutsRed);
	border-radius:3px;
	text-align:center;
	font-family: 'ScoutsBlack', sans-serif;
}
.AnswerWrong {
	margin:10px;
	color:var(--ScoutsRed);
	font-size: 30px;
	padding:10px;
	border:3px solid var(--ScoutsRed);
	border-radius:3px;
	width:300px;
	font-family: 'ScoutsBlack', sans-serif;
	text-align:center;
}
.AnswerCorrect {
	margin:10px;
	color:var(--ScoutsGreen);
	font-size: 30px;
	padding:10px;
	border:3px solid var(--ScoutsGreen);
	border-radius:3px;
	width:300px;
	font-family: 'ScoutsBlack', sans-serif;
	text-align:center;
}
.ScoutsEscapeStage 
{
	display: none;
}
.ScoutsImageCoverContainer
{
	border:1px solid black;
	position:relative;
	width:95%; 
}
.ScoutsImageCoverContainer > img
{
	width:100%;
}
.ScoutsImageCover
{
	background-color: var(--ScoutsBlue); 
	border:1px solid white;
	color:white;
	cursor:pointer;
	display:table-cell;
	font-weight:bold;
	opacity:100;
	position:absolute;
	transition: opacity 0.25s;
	vertical-align:middle;
}
.ScoutsImageUncover
{  
	background-color: var(--ScoutsBlue); 
	border:1px solid white;
	color:white;
	cursor:pointer;
	display:table-cell;
	font-weight:bold;
	opacity:0;
	position:absolute;
	transition: opacity 1s;
}
.ScoutsImageCover > p
{
	height:100%;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ScoutsImageUncover > p
{
	height:100%;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ScoutsCodeEditor
{
	height:300px; 
	margin-bottom:10px;
}
.ScoutsCodeOutput
{
	height:300px; 
	width:90%; 
	padding:5px; 
	background-color:lightgrey; 	
	overflow:auto;
}

/******** FLEX | SCREEN WIDTH  ********/
@media only screen and (max-width: 3000px) 
{
	/*********/
	/* Boxes */
	/*********/

	/* Three */
	.ScoutsInfoBox,
	.ScoutsInfoBoxBlue, 	
	.ScoutsInfoBoxDone, 
	.ScoutsInfoBoxDoneMain, 
	.ScoutsInfoBoxRed,		
	.ScoutsInfoBoxPuzzles, 
	.ScoutsInfoBoxYellow,
	.ScoutsInfoBoxNavy,
	.ScoutsInfoBoxTeal,
	.ScoutsInfoBoxPurple,
	.ScoutsInfoBoxInfo 
	{ width: var(--InfoBoxThree); }

	/* Two*/
	.ScoutsInfoBoxGreenFill,
	.ScoutsInfoBoxIntro, 
	.ScoutsInfoBoxGreen,
	.ScoutsInfoBoxUpcoming, 
	.ScoutsInfoBoxBlueFill,
	.ScoutsInfoBoxUpdate, 
	.ScoutsInfoBoxRedFill,
	.ScoutsInfoBoxYellowFill,
	.ScoutsInfoBoxTask,
	.ScoutsInfoBoxNavyFill,
	.ScoutsInfoBoxTealFill,
	.ScoutsInfoBoxPurpleFill,
	.ScoutsInfoBoxFooter
	{ width: var(--InfoBoxTwo);}

	/* Manual Three */
	.ManualThree { width: var(--InfoBoxThree); }

	/* Two Override */
	.ScoutsInfoBox:nth-child(1):nth-last-child(2):not(.ManualOne) { width: var(--InfoBoxTwo); }
	.ScoutsInfoBox:nth-child(2):nth-last-child(1):not(.ManualOne) { width: var(--InfoBoxTwo); }

	/* One */
	.ScoutsInfoBoxPuzzle { width: var(--InfoBoxOne); }

	/* Manual Two*/
	.ManualTwo { width: var(--InfoBoxTwo);}

  	/* One Override */
	.ScoutsInfoBox:only-child { width: var(--InfoBoxOne); }
	.FlexOverride { width: var(--InfoBoxOne); }

	/* Manual One*/
	.ManualOne { width: var(--InfoBoxOne); }


	/***************/
	/* Box Content */
	/***************/

	/* Puzzle Interior */
	.ScoutsPuzzleLeftSide { width: var(--InfoBoxTwo); }
	.ScoutsPuzzleRightSide { width: var(--InfoBoxTwo); }

	.ScoutsSimpleFlex { width:var(--InfoBoxOneInner); }
	.ScoutsSimpleFlex > * { width:var(--InfoBoxThree); min-width:200px;}

	/* Satisfies both */
	.ScoutsSimpleFlex .ScoutsImg:nth-child(1):nth-last-child(2),
	.ScoutsSimpleFlex .ScoutsImg:nth-child(2):nth-last-child(1),
	.ScoutsSimpleFlex .ScoutsVid:nth-child(1):nth-last-child(2),
	.ScoutsSimpleFlex .ScoutsVid:nth-child(2):nth-last-child(1)
	{
		width:var(--InfoBoxTwo); 
		min-width:200px;
	}

	.ScoutsSimpleFlex > *:only-child { width:var(--InfoBoxOne); min-width:200px;}

	/*.ScoutsSimpleFlex { width:95%; }*/
	/*.ScoutsSimpleFlex .ScoutsImg 	{ width:300px; }*/

	.ScoutsComplexFlexRow { width:var(--InfoBoxOneInner); }
	.ScoutsComplexFlexRow[cols="1"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.ScoutsComplexFlexRow[cols="2"] > * { width:var(--InfoBoxTwo); min-width:200px; max-width:500px;}
	.ScoutsComplexFlexRow[cols="3"] > * { width:var(--InfoBoxThree); min-width:200px; max-width:500px;}

	/***************/
	/* TOC */
	/***************/

	.ScoutsInfoBoxTOC { width : 1000px;}
	.ScoutsSimpleFlexCol { width: 950px; margin:0 auto;} 
	.ScoutsSimpleFlexCol { height: 300px; } 
	.ScoutsSimpleFlexCol100{ height:100px; }
	.ScoutsSimpleFlexCol200{ height:200px; }
	.ScoutsSimpleFlexCol300 { height:300px; }
	.ScoutsSimpleFlexCol400 { height:400px }
	.ScoutsSimpleFlexCol500 { height:500px; }
}
@media only screen and (max-width: 1200px) 
{
	/*********/
	/* Boxes */
	/*********/
	
	/* Two (Was Three)*/
	.ScoutsInfoBox,
	.ScoutsInfoBoxBlue, 	
	.ScoutsInfoBoxDone, 
	.ScoutsInfoBoxDoneMain, 
	.ScoutsInfoBoxRed,		
	.ScoutsInfoBoxPuzzles, 
	.ScoutsInfoBoxYellow,
	.ScoutsInfoBoxNavy,
	.ScoutsInfoBoxTeal,
	.ScoutsInfoBoxPurple,
	.ScoutsInfoBoxInfo
	{ width: var(--InfoBoxTwo); }

	/* Two (No Change)*/
	.ScoutsInfoBoxGreenFill,
	.ScoutsInfoBoxIntro, 
	.ScoutsInfoBoxGreen,
	.ScoutsInfoBoxUpcoming, 
	.ScoutsInfoBoxBlueFill,
	.ScoutsInfoBoxUpdate, 
	.ScoutsInfoBoxRedFill,
	.ScoutsInfoBoxYellowFill,
	.ScoutsInfoBoxTask,
	.ScoutsInfoBoxNavyFill,
	.ScoutsInfoBoxTealFill,
	.ScoutsInfoBoxPurpleFill,
	{ width: var(--InfoBoxTwo);}

	/* Manual Three (Now Two) */
	.ManualThree { width: var(--InfoBoxTwo); }

	/* Two Override */
	.ScoutsInfoBox:nth-child(1):nth-last-child(2):not(.ManualOne) { width: var(--InfoBoxOne); }
	.ScoutsInfoBox:nth-child(2):nth-last-child(1):not(.ManualOne) { width: var(--InfoBoxOne); }

	/* One */
	.ScoutsInfoBoxPuzzle, 
	.ScoutsInfoBoxFooter	
	{ width: var(--InfoBoxOne); }
 
	/* Manual Two*/
	.ManualTwo { width: var(--InfoBoxTwo);}

	/* Manual One*/
	.ManualOne { width: var(--InfoBoxOne); }

  	/* One Override */
	.ScoutsInfoBox:only-child { width: var(--InfoBoxOne); }
	.FlexOverride { width: var(--InfoBoxOne); }


	/***************/
	/* Box Content */
	/***************/

	/* Puzzle Interior */
	.ScoutsPuzzleLeftSide { width: var(--InfoBoxOne); }
	.ScoutsPuzzleRightSide { width: var(--InfoBoxOne); }

	.ScoutsSimpleFlex { width:var(--InfoBoxOneInner); }
	.ScoutsSimpleFlex > * { width:var(--InfoBoxTwo); min-width:200px; }

	/* Satisfies both */
	.ScoutsSimpleFlex .ScoutsImg:nth-child(1):nth-last-child(2),
	.ScoutsSimpleFlex .ScoutsImg:nth-child(2):nth-last-child(1),
	.ScoutsSimpleFlex .ScoutsVid:nth-child(1):nth-last-child(2),
	.ScoutsSimpleFlex .ScoutsVid:nth-child(2):nth-last-child(1)
	{
		width:var(--InfoBoxOne); 
		min-width:200px;
	}

	.ScoutsSimpleFlex > *:only-child { width:var(--InfoBoxOne); min-width:200px;}

	/*.ScoutsSimpleFlex { width:95%; }*/
	/*.ScoutsSimpleFlex .ScoutsImg 	{ width:300px; }*/


	.ScoutsComplexFlexRow { width:var(--InfoBoxOneInner); }
	.ScoutsComplexFlexRow[cols="1"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.ScoutsComplexFlexRow[cols="2"] > * { width:var(--InfoBoxTwo); min-width:200px; max-width:500px;}
	.ScoutsComplexFlexRow[cols="3"] > * { width:var(--InfoBoxTwo); min-width:200px; max-width:500px;}


	/***************/
	/* TOC */
	/***************/

	.ScoutsInfoBoxTOC { width : 750px;}
	.ScoutsSimpleFlexCol { width: 700px; margin:0 auto;} 
	.ScoutsSimpleFlexCol { height:600px; } 
	.ScoutsSimpleFlexCol100{ height:200px; }
	.ScoutsSimpleFlexCol200{ height:400px; }
	.ScoutsSimpleFlexCol300 { height:500px; }
	.ScoutsSimpleFlexCol400 { height:800px }
	.ScoutsSimpleFlexCol500 { height:1000px; }

}
@media only screen and (max-width: 800px) 
{
	/*********/
	/* Boxes */
	/*********/
	
	/* One (Was Three)*/
	.ScoutsInfoBox,
	.ScoutsInfoBoxBlue, 	
	.ScoutsInfoBoxDone, 
	.ScoutsInfoBoxDoneMain, 
	.ScoutsInfoBoxRed,		
	.ScoutsInfoBoxPuzzles, 
	.ScoutsInfoBoxYellow,
	.ScoutsInfoBoxNavy,
	.ScoutsInfoBoxTeal,
	.ScoutsInfoBoxPurple,
	.ScoutsInfoBoxInfo
	{ width: var(--InfoBoxOne); }

	/* One(Was Two)*/
	.ScoutsInfoBoxGreenFill,
	.ScoutsInfoBoxIntro, 
	.ScoutsInfoBoxGreen,
	.ScoutsInfoBoxUpcoming, 
	.ScoutsInfoBoxBlueFill,
	.ScoutsInfoBoxUpdate, 
	.ScoutsInfoBoxRedFill,
	.ScoutsInfoBoxYellowFill,
	.ScoutsInfoBoxTask,
	.ScoutsInfoBoxNavyFill,
	.ScoutsInfoBoxTealFill,
	.ScoutsInfoBoxPurpleFill,
	.ScoutsInfoBoxFooter
	{ width: var(--InfoBoxOne);}

	/* Manual Three (Now One) */
	.ManualThree { width: var(--InfoBoxOne); }

	/* One */
	.ScoutsInfoBoxPuzzle { width: var(--InfoBoxOne); }

	/* Manual Two (Now One)*/
	.ManualTwo { width: var(--InfoBoxOne);}

	/* Manual One*/
	.ManualOne { width: var(--InfoBoxOne); }

  	/* One Override */
	.ScoutsInfoBox:only-child { width: var(--InfoBoxOne); }
	.FlexOverride { width: var(--InfoBoxOne); }

	/***************/
	/* Box Content */
	/***************/

	/* Puzzle Interior */
	.ScoutsPuzzleLeftSide { width: var(--InfoBoxOne); }
	.ScoutsPuzzleRightSide { width: var(--InfoBoxOne); }

	.ScoutsSimpleFlex { width:var(--InfoBoxOneInner); }
	.ScoutsSimpleFlex > * { width:var(--InfoBoxOne); min-width:200px; }

	/* Satisfies both */
	.ScoutsSimpleFlex .ScoutsImg:nth-child(1):nth-last-child(2),
	.ScoutsSimpleFlex .ScoutsImg:nth-child(2):nth-last-child(1),
	.ScoutsSimpleFlex .ScoutsVid:nth-child(1):nth-last-child(2),
	.ScoutsSimpleFlex .ScoutsVid:nth-child(2):nth-last-child(1)
	{
		width:var(--InfoBoxOne); 
		min-width:200px;
	}

	.ScoutsSimpleFlex > *:only-child { width:var(--InfoBoxOne); min-width:200px;}

	/*.ScoutsSimpleFlex { width:95%; }*/
	/*.ScoutsSimpleFlex .ScoutsImg 	{ width:300px; }*/

	.ScoutsComplexFlexRow { width:var(--InfoBoxOneInner); }
	.ScoutsComplexFlexRow[cols="1"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.ScoutsComplexFlexRow[cols="2"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}
	.ScoutsComplexFlexRow[cols="3"] > * { width:var(--InfoBoxOne); min-width:200px; max-width:500px;}

	.ScoutsInfoBoxTOC { width:98%; padding:5px;}
	.ScoutsSimpleFlexCol { width:90%; margin:0 auto;} 
	.ScoutsSimpleFlexCol { height:auto; }
	.ScoutsSimpleFlexCol100{ height:auto; }
	.ScoutsSimpleFlexCol200{ height:auto; }
	.ScoutsSimpleFlexCol300{ height:auto; }
	.ScoutsSimpleFlexCol400{ height:auto; }
	.ScoutsSimpleFlexCol500{ height:auto; }

}
/*'' https://medium.com/better-programming/introduction-to-nth-child-css-selector-9a94c9f00268#:~:text=With%20combined%20child%20ranges%2C%20you%20can%20apply%20multiple,accomplish%20this%20by%20writing%20a%20combined%20nth-child%20selection.
'' It satisfies both criteria*/

.test:nth-child(1):nth-last-child(2)
{
	color:red;
}
.test:nth-child(2):nth-last-child(1)
{
	color:red;	
}
.SquareTable 
{
	box-sizing:border-box;
	width: 200px;
}

/* https://absolide.tumblr.com/post/7317210512/full-css-fluid-squares*/
.SquareTable *
{
	font-size:20pt;
	box-sizing:border-box;
}
.SquareTable td
{
	width: 25%;
	position: relative;
	padding-bottom:25%; /* % is based on the tr wierdly */

	height:0;

	/*
    &:after, &:before {
        content: '';
	}
	*/

	/*
    display: block;
    padding-bottom: calc(25% - 0.25em);
	*/
}
.SquareTable td:after 
{
	content: '';

	/*
	display: block;
	margin-top: 100%;
	*/
}
.SquareTable td > div 
{
	border: 4px solid var(--ScoutsTeal); 
	color:black;
	cursor:pointer;	
	font-weight:bold;
	opacity:100;

	/*
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	*/
	
	height:100%;
	width:100%;
	
	position: absolute;
	transition: opacity 0.25s;

	text-align:center;	
}
.SquareTable td > div:hover
{
	border: 4px solid var(--ScoutsRed);
}
.SquareTable td > div > div
{
	display:table;
	height:100%;
	width:100%;
}
.SquareTable td > div > div:nth-of-type(2)
{
	background-color: var(--ScoutsBlue);
	opacity:0.5;
}
.SquareTable td > div > div:nth-of-type(3)
{
	background-color: var(--ScoutsRed);
	opacity:0.5;
}
.SquareTable td > div > div > div
{
	display:table-cell;
	height:100%;
	width:100%;
	vertical-align:middle;	
}
/********  ********/