/* Updated: 06.12.2024 */

/* Scouting 'Purple' 	= #490598 */
/* squirrels 'orange' 	= #CA190F */
/* beavers 'turquoise'	= #0060CE */
/* cubs 'green'			= #012f6b */
/* scouts				= #49059a */
/* explorers			= #012f6b */

:root
{	
	/* colours */							/* make available to all pages within this site */
	--scouting-bg-color		: #490598;		/* General Scouting topics */
	--squirrels-bg-color	: #CA190F;
	--beavers-bg-color		: #0060CE;
	--cubs-bg-color			: #012F6B;
	--scouts-bg-color		: #49059A;
	--explorers-bg-color	: #012F6B;
	--group-bg-color		: #f0E68C;		/* khaki, the 24th Group Colour */

	--site-bg-color			: #fff;		/* white background */
	--site-font-color		: #000;		/* bold text	= black */
	--site-font-low			: #303030;		/* normal font 	= grey */
	--site-menu-high		: #000;		/* active menu items */
	--site-menu-low			: #999;		/* inactive menu items */
	--site-dot-color		: var(--scouting-bg-color);	/* color if 'li' dot */
	--site-link-color		: #09F;		/* hyperlink colour */
	
	--text-shadow			: #000;		/* black */
	--box-shadow			: rgb(0,0,0,0.3);

	--ff					: 'Montserrat', verdana, arial, sans-serif;	/* font-family */	
	--table-border-color	: #A7A37E;		/* table border colour */
	--map-height			: 500px;		/* = 500px, google map window height */
	--section-border-color	: var(--scouting-bg-color);
	--border-radius			: 10px;
	--facebook-blue			: #09f;		/* #1778f2, FaceBook blue, but not quite sure! */

	--menu-icon-bg			: var(--scouting-bg-color);
	--menu-icon-color		: var(--group-bg-color);
	--menu-bg				: #000;

	--line          		: rgba(73,5,154,0.8);
	
}


@media (prefers-color-scheme:dark)	
  {
	:root 
	{
		--group-bg-color		: #f0E68C;						/* khaki, the 24th Group Colour */
		--site-bg-color			: #000;						/* black background */
		--site-font-color		: #fff;						/* bold text	= white */
		--site-font-low			: #CCC;						/* normal font 	= grey */
		--site-menu-high		: #fff;						/* active menu items */
		--site-menu-low			: #666;						/* inactive menu items */
		--site-dot-color		: var(--group-bg-color);		 /* color if 'li' dot */
		--site-link-color		: #09F;						/* hyperlink colour */
		--section-border-color	: var(--group-bg-color);
		--line          		: var(--group-bg-color);
	}
  }

.eco-green
{
	color : #67A778;
}


.parent-container
{
    display			: flex;
    flex-wrap		: wrap;
    gap				: 20px;
    justify-content	: center;
    align-items		: center;
	padding-top		: 30px;
	padding-bottom	: 30px;
}


.child-container-squirrels,
.child-container-beavers,
.child-container-cubs,
.child-container-scouts,
.child-container-explorers
{
	width			: 100%;
	max-width		: 300px;
	min-height		: 120px;
	text-align		: center;
	border			: solid 1px var(--section-border-color);
	border-radius	: var(--border-radius);
	
	/* padding-left	: 15px; */
}


.child-container-squirrels
{
	background		: var( --squirrels-bg-color );
}


.child-container-beavers
{
	background		: var( --beavers-bg-color );
}


.child-container-cubs
{
	background		: var( --cubs-bg-color );
}


.child-container-scouts
{
	background		: var( --scouts-bg-color );
}


.child-container-explorers
{
	background		: var( --explorers-bg-color );
}


#sliderFrame
{
	background-color	: var(--site-bg-color);	/* defined only to prevent 'flicker' when refreshing the screen */
}


.iframe-container
{
  	position		: relative;
  	width			: 100%;
  	aspect-ratio	: 16/9;		/* a much better way to retain the aspect ration */
  	border			: #000 1px solid;
  	/* 
	overflow		: hidden;  
  	padding-top		: 56.25%; 	/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625)
	*/
}


/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe
{
  	position	: absolute;
  	top			: 0;
  	left		: 0;
  	bottom		: 0;
  	right		: 0;
  	width		: 100%;
  	height		: 100%;
}


@viewport
{
  	width	: extend-to-zoom;
  	zoom	: 1.0; 
}


#info .page-update
{
	text-align	: center;
	font-family	: var(--ff);
	font-size	: 0.45rem;					/* = 12px */
	color		: var(--site-font-low);
}


sup
{
  	vertical-align	: super;
  	font-size		: 0.4rem;				/* superscript font height */
}


.khaki-background-bold
{
	color				: #000;			
	background-color	: var(--group-bg-color);
	font-weight			: bold;
	padding-left		: 10px;
	padding-right		: 10px;
	padding-top			: 2px;
	padding-bottom		: 2px;
	-webkit-box-shadow	: 3px 3px 5px var(--box-shadow);
	-moz-box-shadow		: 3px 3px 5px var(--box-shadow);
	box-shadow			: 3px 3px 5px var(--box-shadow);    
}


.copyright-string
{
	display: none;
}


#header-string
{
	display: none;
}


#strap-line
{
	padding				: 0; 
  	margin				: 0; 
  	font				: normal 15px/20px var(--ff);
  	color				: var(--site-font-color); 
  	text-shadow			: 2px 2px 5px var(--text-shadow);
	/* 
	text-transform		: uppercase;
	*/
}


@-ms-viewport
{
  	width	: extend-to-zoom; 
  	zoom	: 1.0; 
}


html, body
{
	font-family	: var(--ff);
	font-size	: 1.6rem; 				/* = 100% */
	padding		: 0; 
	margin		: 0;
	color		: var(--site-font-low );
	background	: var(--site-bg-color);
	min-width	: 320px;
}


body
{
	font	: 400 13px/2.0em var(--ff);	/* required? */
}


#wrapper
{
	width		: 100%; 
	position	: relative; 
	transition	: 0s 1s;
}


table {
	font				: normal 13px/18px var(--ff);
	border-collapse		: collapse;
	border-left			: 0px solid var(--border-color);
	border-right		: 0px solid var(--border-color);
	border-bottom		: 0px solid var(--border-color);
	page-break-inside	: avoid;								/* added, 08.04.2020 - interesting effect... */
	/*
	box-shadow		: 0 15px 10px -15px rgba(0,0,0,0.6);
	*/ 
}


#table-div
{
	margin-left		: 0px;
	margin-right	: 0px;
}


td
{ 
	border-left		: 0px solid var(--border-color);
	border-top		: 0px solid var(--border-color);
	padding-left	: 10px;
	padding-right	: 10px;
	padding-top		: 5px;
	padding-bottom	: 5px;
}


th
{
	font-weight			: bold !important;
	background-color	: var(--scouting-bg-color);
	padding-top			: 3px;
	padding-bottom		: 4px;
	padding-right		: 10px;
	padding-left		: 10px;	
	color				: var(--site-font-color);
	/* 
	background		: url(images/gradient_bar.png) repeat-x;
	border-top		: 1px solid #333333;
	border-bottom	: 1px solid #333333;
	border-left		: 0px solid #A7A37E;
	*/
}


/* gradient horizontal rule, using css3 */
hr.style-one
{
	border				: 0; 
	height				: 1px; 
	background-image	: linear-gradient(to right, rgba(0,0,0,0), var(--line), rgba(0,0,0,0)); 
	
	/*
	background-image	: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(73,5,154,0.8), rgba(0,0,0,0)); 
	background-image	: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(73,5,154,0.8), rgba(0,0,0,0)); 
	background-image	: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(73,5,154,0.8), rgba(0,0,0,0)); 
	background-image	: -o-linear-gradient(left, rgba(0,0,0,0), rgba(73,5,154,0.8), rgba(0,0,0,0));
	*/
	/*
	background-image	: -webkit-linear-gradient(left, rgba(73,5,154,0.8), rgba(73,5,154,0.8), rgba(0,0,0,0)); 
	background-image	: -moz-linear-gradient(left, rgba(73,5,154,0.8), rgba(73,5,154,0.8), rgba(0,0,0,0)); 
	background-image	: -ms-linear-gradient(left, rgba(73,5,154,0.8), rgba(73,5,154,0.8), rgba(0,0,0,0)); 
	background-image	: -o-linear-gradient(left, rgba(73,5,154,0.8), rgba(73,5,154,0.8), rgba(0,0,0,0));
	*/
}


.image-shadow
{
	display			: block; 
	margin-left		: 10px; 
	margin-right	: 20px;
	margin-bottom	: 20px;
	float			: left; 
	box-shadow		: 0 15px 10px -15px var(--box-shadow);
	/*
	border		: 1px solid #ddd;
	*/
}


#activity-comment
{
	padding-right	: 20px;
	font			: var( --ff );
	font-size		: 0.938rem;						/* = 15px */
	font-weight		: normal;
	color			: var(--site-font-low);
}


.floatleft, .floatright
{
	max-width		: 365px;									/* no bigger than 400 pixels */
	display			: block;
	margin			: auto auto 1.5em;
	margin-top		: 15px;
	margin-bottom	: 15px;
	border			: 1px solid #000;
	box-shadow		: 0 15px 10px -15px var(--box-shadow);	/* drop shadow */
}


.floatleft
{
	float			: left;
	margin-right	: 0.938rem;		/* = 15px */
}


.floatright
{
	float			: right;	
	margin-left		: 0.938rem;		/* = 15px */
}


.greyed-text
{
	color: #666;
}


/*
.top-of-page-button
{
	background-color	:#069;
	color				: var(--site-font-color);
	text-decoration		: none;
	padding-top			: 5px;
	padding-bottom		: 5px;
	padding-left		: 7px;
	padding-right		: 7px;
	border-radius		: 4px;
	background-image	: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
	background-image	: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	background-image	: -o-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	background-image	: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	box-shadow			: 0 15px 10px -15px var(--box-shadow);
}
*/


.top-of-page a:hover
{
	text-decoration	:	none;	
}


#google-map-frame
{
	height			: var(--map-height);
	padding-left	: 5px;
	padding-right	: 5px;
	border			: 1px solid #000;
	box-shadow		: 0 15px 10px -15px var(--box-shadow);
}


.email-no-underline a
{
	text-decoration	: none;
}


.email-no-underline a:hover
{
	text-decoration	: none;
}


#sn_menu_icon,		/* hamburger button dimensions */
.sn_menu_open,
.sn_menu_close
{
	width	: 41px; 
	height	: 41px; 
}


#sn_menu_icon
{
	display		: block; 
	position	: absolute; 
	right		: 15px;	/* was 25px, moved left from it's original position, 06.01.2023 */ 
	top			: 25px; 
	z-index		: 100020;
}


#sn_menu_icon .sn_menu_open
{
	display		: block; 
	background 	: var(--menu-icon-bg);
	cursor		: pointer;
}


#sn_menu_icon .sn_menu_close
{
	display		: none;  
	background	: var(--group-bg); 		/* same colour as right menu background */
	cursor		: pointer; 
	position	: absolute; 
	left		: 0; 
	top			: 0; 
	z-index		: 10;
}


#sn_menu_icon .sn_menu_open .bar,		/* 3 bars within the hamburger button */
.sn_menu_open .bar::before,
.sn_menu_open .bar::after
{
	display		: block;
	background	: var(--group-bg-color);	/* font colour of hamburger */
	position	: absolute;  
	width		: 17px; 
	height		: 3px; 
}


#sn_menu_icon .sn_menu_open .bar
{
	left		: 12px; 
	top			: 19px; 
	transition	: 0s 0.3s;			/* ':background 0s 0.3s' was originally (incorrectly) typed here */
}


#sn_menu_icon .sn_menu_open .bar::before
{
	content				: ""; 
	left				: 0; 
	top					: -6px; 
	transform-origin	: left top; 
	transition			: 0.3s;
}


#sn_menu_icon .sn_menu_open .bar::after
{
	content				:	"";   
	left				:	0; 
	top					:	6px; 
	transform-origin	:	left bottom; 
	transition			:	0.3s;
}


#sn_menu_panel
{
	width				:	100%; 
	height				:	100%; 
	position			:	fixed; 
	left				:	-100%; 
	top					:	0; 
	z-index				:	100010; 
	transition			:	0.5s 1s; 
	display				:	flex; 
	flex-direction		:	row; 
	flex-wrap			:	wrap; 
	justify-content		:	space-between;
}


#sn_menu_panel #sn_menu_left
{
	width				:	50%; 
	height				:	100%; 
	background			:	var(--scouting-bg-color);
	background-size		:	cover;
  	display				:	flex; 
	flex-direction		:	column; 
	flex-wrap			:	nowrap; 
	justify-content		:	center;
}


#sn_menu_panel #sn_menu_left h1
{
	text-align	:	center; 
	font		:	800 35px var(--ff);
	color		:	var(--group-bg-color);		/* khaki text within the left-slide menu */
	/*
	color		: 	#fff; 						/* white text within the left-slide menu */
}

/*
#sn_menu_panel #sn_menu_left #social { text-align :	center; width :	100%; }
#social-left-align { text-align	: left; padding-top	: 20px; padding-bottom : 20px; }
*/


#social-center-align
{
	text-align			: 	center;
	padding-top			: 	1.25rem;	/* = 20px */
	padding-bottom		:	1.25rem;	/* = 20px */
}


#sn_menu_panel #sn_menu_left .social
{
	color		:	var(--facebook-blue);
	display		:	inline-block; 
	font-size	:	1.25rem;						/* = 20px */ 
	margin		:	5px; 
	transition	:	0.2s;
	/*
	color		: 	#fff;							/* white social media icons within the left-slide menu */	
	/*
	color		:	var(--group-bg-color);			/* khaki social media icons within the left-slide menu */	
}


#sn_menu_left a
{
	color		:	var(--group-bg-color);			/* khaki anchor text within the left-slide menu */
}


#sn_menu_panel #sn_menu_left .social:hover
{
	color		:	var(--group-bg-color);			/* khaki text within the left-slide menu */	
}


#sn_menu_panel #sn_menu_left p
{
	font		:	300 14px/25px var(--ff);
	color		:	var(--group-bg-color);			/* khaki text within the left-slide menu */
	text-align	:	center;	
	/*
	color		:	var(--facebook-blue);
	color		: 	#fff;							/* white text within the left-slide menu */		
}


#sn_menu_panel #sn_menu_right
{
	order						:	2; 
	width						:	50%; 
	height						:	auto;		/* was 100% */ 
	background					:	var(--site-bg-color); 
	font						:	400 var(--ff);
	color						:	var(--site-menu-low); 
	overflow-y					:	auto;
	overflow-x					:	auto;		/* 26.02.2023 added */ 
	-webkit-overflow-scrolling	:	touch;
	display						:	flex; 
	flex-direction				:	column; 
	flex-wrap					:	nowrap; 
	justify-content				:	center;
}


#sn_menu_panel #sn_menu_right .social
{
	color		:	#aaa; 
	display		:	inline-block; 
	font-size	:	1.25rem;			/* = 20px */
	margin		:	5px; 
	width		:	25px; 
	text-align	:	left;
}


input[id*="sn_menu"]
{
	display	:	none;
}


#sn_menu_panel #sn_menu_right .menubox
{
	width		:	98%; 
	max-width	:	300px; 
	margin		:	0 auto;
}

	
#sn_menu_panel #sn_menu_right .menubox p
{
	padding		: 0 0 0 90px; 
	margin		: 0; 
	height		: 0; 
	overflow	: hidden; 
	font		: 300 var( --ff );
	font-size	: 25px;						/* = 25px, font height within menu, full screen */
	transition	: 0.5s;
}


#sn_menu_panel #sn_menu_right .menubox p a
{
	text-decoration	: none; 
	color			: var(--site-menu-low);	/* inactive menu item */
}


#sn_menu_panel #sn_menu_right .menubox p a:hover
{
	text-decoration	: none; 
	color			: var(--site-menu-high);	/* active menu item */
	/* font-weight	: bold; */
}


/* hamburger button */
input[class*="ip01"]:checked ~ #wrapper {height:100%; overflow:hidden; transition:0s;}
input[class*="ip01"]:checked ~ #sn_menu_icon {position:fixed;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar {background:transparent; transition:0s;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar::before {transform: rotate(45deg); width:18px; left:3px;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar::after {transform: rotate(-45deg); width:18px; left:3px;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_close {display:block;}
input[class*="ip01"]:checked ~ #sn_menu_panel {left:0; transition:0.5s;}

input[class*="ipXX"]:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p,
input[class*="ip00"]:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p {
	height:50px;	/* value 1 */
}

input#sn_menu_0:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p,
input#sn_menu_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_1 p,
input#sn_menu_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2 p,
input#sn_menu_3:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_3 p,
input#sn_menu_4:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4 p,
input#sn_menu_2_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_1 p,
input#sn_menu_2_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_2 p,
input#sn_menu_2_3:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_3 p,
input#sn_menu_2_1_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_1_1 p,
input#sn_menu_4_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_1 p,
input#sn_menu_4_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_2 p,
input#sn_menu_4_1_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_1_1 p {
	height:50px		/* keep this equal to value 1 above */
}


li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
	list-style-type	: decimal !important; 
	font			: var(--ff);
	font-size		: 16px;
	font-weight		: normal;
	color			: var(--site-menu-low) !important;
}


#info p ul li a
{
	font-size	:	100px;
}


#wrapper
{
	text-align	:	center;
}

/* page header */

header
{
  	height				:	80px; 
  	position			:	absolute; 
  	width				:	100%; 
  	top					:	0; 
  	left				:	0; 
  	background-color	:	var(--scouting-bg-color);
  	z-index				:	100002; 
 	text-align			:	center; 
  	backface-visibility	: 	hidden;
}


.menus header
{
	background	:	var(--scouting-bg-color);		/* background, header colour */
}	

	
header a
{
	text-decoration	:	none;	
}


header img
{
  	display		:	block; 
  	position	:	absolute; 
  	left		:	10px; 
  	top			:	10px;
}


header h1, h2, p
{
	font		: 	var(--ff);
	margin		:	0;
	font-style	: 	normal;
	color		: 	var(--group-bg-color);					/* Khaki */ 
}


header h1
{
  	padding		:	15px 0 0 0; 
  	font-size	: 	32px;										/* 23.08.2023, was 30px; */
  	font-weight	: 	bold;										/* 23.08.2023, was 'normal' */
  	text-shadow	: 	2px 2px 5px var(--text-shadow);
}


header h2
{
  	padding		:	3px 0 0 0;
	font-family	: 	'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  	font-size	: 	15px;
  	font-weight	: 	normal;
  	text-shadow	: 	2px 2px 5px var(--text-shadow);
}

bold-text
header p
{
  	padding				:	6px; 
  	font-size			: 	18px;
  	/* text-transform	:	uppercase; */
  	text-shadow			: 	2px 2px 5px var(--text-shadow);
}


/* end of page header */


#tutorial
{
	padding-top		:	110px;		/* was 160px */ 
	padding-bottom	:	30px;
}


#info
{
	max-width		:	750px; 
	padding			:	0 10px 20px 10px;	/* 20px from the bottom/footer */ 
	display			:	inline-block; 
	vertical-align	:	top; 
	text-align		:	left; 
	background		:	var(--site-bg-color);
}


#info h1
{
	padding			: 	0;
	margin			: 	0;
	color			: 	var(--site-font-color);
	font-family		: 	var(--ff);
	font-size		: 	22px;
	font-style		: 	normal;
	line-height		: 	30px;
	font-weight		: 	normal;
	font-variant	: 	normal;
}


#info h2
{
	color			: 	var(--site-font-color);
	font-family		: 	var(--ff);
	margin			: 	0;
	padding-top		: 	25px;
	text-align		: 	left;
	font-size		: 	0.6rem;
	font-weight		: 	bold;
	font-variant	: 	normal;
}


#info h2 a
{
	color				:	var(--site-font-color); 
	text-decoration		:	none;
}


#info h3
{
	color			: 	var(--site-font-color);
	margin			: 	0;
	padding-top		: 	5px;
	padding-bottom	: 	15px;
	text-align		: 	left;
	font-family		: 	var(--ff);
	font-size		: 	13px;
	text-align		: 	center;
	font-weight		: 	normal;
	font-variant	: 	normal;	
}


#info h4
{
	padding		:	0; 
	margin		:	0; 
	font		:	normal 20px/25px var( --ff );
	color		:	var(--site-font-color);
}


#info h5
{
	padding		:	0; 
	margin		:	0; 
	font		:	normal 16px/20px var( --ff );
	color		:	var(--site-font-color);
}

#info h5.date
{
	color		:	#069;
}


#info .greyed-text
{
	color: #999;
}


#info .por-reference
{
	color		:	#666;
	font-style	:	italic;	
}


.por-reference::before
{
	content	:	"{";
}


.por-reference::after
{
	content	:	"}";
}


#info p
{
	padding			:	10px 0; 
	margin			:	0; 
	font			: 	var( --ff );
	font-size		:	15px;	/* paragraph font height */
	/* color		:	#333; */
	color			:	var(--site-font-low);
}


#info p a.link,
#info p a.link:visited
{
	color	:	#c00;
}


#info ul
{
	list-style-type	: 	none;
	font-size		:	0.55rem;	/* = 16px */
	color			:	var(--site-font-low);
}


#info li::before
{
	content		:	"\2022";  						/* Add content: \2022 is the CSS Code/unicode for a bullet */
	font-size	: 	200%;
  	color		:	var(--site-dot-color); 			/* Change the colour */
  	font-weight	: 	bold; 							/* If you want it to be bold */
  	display		:	inline-block; 					/* Needed to add space between the bullet and the text */
  	width		:	1em; 							/* Also needed for space (tweak if needed) */
  	margin-left	:	-1em; 							/* Also needed for space (tweak if needed) */	
}


#info .button a
{
	display				:	block;
	margin				: 	auto;
 	width				: 	50%;
  	margin-top			: 	20px;
	padding-left		:	10px;
	padding-right		:	10px;
	text-decoration		:	none; 
	text-align			:	center;
	color				:	var(--group-bg-color); 
	background-color	:	var(--scouting-bg-color);
	border-radius		:	var(--border-radius);    
	font				:	normal 18px/40px var(--ff);
	-webkit-box-shadow	: 	3px 3px 5px var(--box-shadow);
	-moz-box-shadow		: 	3px 3px 5px var(--box-shadow);
	box-shadow			: 	3px 3px 5px var(--box-shadow);
	
	/* float			:	right;  */
	/* width			:	100%; */	
	/* font-weight		: 	bold; */
	/* white-space		:	nowrap; */
	/* white-space		:	nowrap; */
}


#info .small-text
{
	font-size		: 	11px;
	color			: 	var(--site-font-color);
	font-family		: 	var(--ff);
	font-style		: 	italic;
}


#info .small-grey-text
{
	font-size		: 	12px;
	line-height		: 	80%;
	color			: 	var(--site-font-low);
	font-family		: 	var(--ff);
	font-style		: 	italic;
}


#squirrels-title-bar, #beavers-title-bar, #cubs-title-bar, #scouts-title-bar, #scouting-title-bar, #explorers-title-bar
{
	margin-top		: 	25px;
	width			:	98%;			/* don't understand why this is required, but it is! */
	text-align		:	left;
	font-weight		:	bold;
	padding-left	:	10px;
	color			: 	var(--group-bg-color);		/* khaki */
}


#squirrels-page-bar h1, #beavers-page-bar h1, #cubs-page-bar h1, #scouts-page-bar h1, #explorers-page-bar h1, #scouting-page-bar h1
{
	width			:	100%;
	text-align		:	left;
	font-weight		:	bold;
	padding-left	:	10px;
	color			: 	var(--group-bg-color);				/* khaki */
}


#squirrels-title-bar, #squirrels-page-bar
{
	color				: 	var(--group-bg-color);			/* khaki */
	background-color	: 	var(--squirrels-bg-color);	
}


#beavers-title-bar, #beavers-page-bar
{
	color				: 	var(--group-bg-color);			/* khaki */
	background-color	: 	var(--beavers-bg-color);	
}


#cubs-title-bar, #cubs-page-bar
{
	color				: 	var(--group-bg-color);		/* khaki */
	background-color	: 	var(--cubs-bg-color);
}


#scouts-title-bar, #scouts-page-bar
{
	color				: 	var(--group-bg-color);		/* khaki */
	background-color	:	var(--scouts-bg-color);
}


#scouting-title-bar, #scouting-page-bar
{ 
	color				: 	var(--group-bg-color);		/* khaki */
	background-color	:	var(--scouting-bg-color);
}


#explorers-title-bar, #explorers-page-bar
{
	color				: 	var(--group-bg-color);		/* khaki */
	background-color	: 	var(--explorers-bg-color);
}


.center-img-container
{
    text-align	:	center;
    /* border	:	1px solid var(--border-color); */
}


.center-img
{
    display		:	inline-block;
    margin		:	0px 5px;
    padding		:	0px;  
    /* border	:	1px solid #CCC; */
}


#centred-div
{
	display			: 	flex;
	justify-content	: 	center;
}


.footer
{
	text-align			:	center;
	color				: 	var(--group-bg-color);			/* khaki */
	background-color	: 	var(--scouting-bg-color);	  	/* scout 'purple' background */
	position			: 	fixed;							/* 28.03.2023 - fixed the footer to the bottom of the screen */
	left				: 	0;
  	bottom				: 	0;
  	width				: 	100%;
}

.footer p
{
	padding			:	10px 0; 
	margin			:	0; 
	font-family		: 	var(--ff);
	font-size		: 	0.6rem;						/* = 16px (default) */
	color			: 	var(--group-bg-color);		/* khaki */
	text-shadow		: 	2px 2px 5px var(--text-shadow);
}


.footer p a
{
	color	: 	var(--group-bg-color);		/* khaki */
}


@media only screen and (max-width:1150px)
{
}


@media only screen and (max-width:1024px)and(orientation:portrait)
{
	#sliderFrame {
		display: none;
	}
}


/* tablets, portrait mode */
@media only screen and (max-width: 840px)	
{
	#sliderFrame
	{
		display: none;
	}
	
	header h1
	{
    	font-size: 20px;
	}
	
	header h2
	{
		padding: 0 0 0 0; 
    	font-size: 13px;
	}
}


@media only screen and (max-width: 640px)
{
	/*
	#header #sn_menu_icon {
		right:15px;
	}
	*/
	
	#sn_menu_panel #sn_menu_left
	{
		width:0; 
		display:none;
	}

	#sn_menu_panel #sn_menu_right
	{
		width:100%; 
		min-width:320px;
	}

	#sliderFrame
	{
		display: none;
	}
}


/* mobiles */
@media only screen and (max-height:680px) {

	#sn_menu_panel #sn_menu_right .menubox p {
		font-size: 20px;	/* font height within menu, 31.07.2023 was 22px, explorers added & reduced from 22 to 20px */
	}
}


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

	header {position:absolute;}
	ul.main {position:absolute;}
	span.break {display:block;}

	header h1 {
    	font-size: 18px;	/* is normally 20px */
	}
	
	header p {
		font-size: 16px;
	}
	
	#sn_menu_panel #sn_menu_right .menubox p {
		font-size: 20px;	/* font height within menu, 31.07.2023 was 22px, explorers added & reduced from 22 to 20px */
	}
	
	/* hamburger button */
input[class*="ip01"]:checked ~ #wrapper {height:100%; overflow:hidden; transition:0s;}
input[class*="ip01"]:checked ~ #sn_menu_icon {position:fixed;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar {background:transparent; transition:0s;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar::before {transform: rotate(45deg); width:18px; left:3px;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar::after {transform: rotate(-45deg); width:18px; left:3px;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_close {display:block;}
input[class*="ip01"]:checked ~ #sn_menu_panel {left:0; transition:0.5s;}

input[class*="ipXX"]:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p,
input[class*="ip00"]:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p {
	height:40px;	/* value 1 */
}

input#sn_menu_0:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p,
input#sn_menu_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_1 p,
input#sn_menu_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2 p,
input#sn_menu_3:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_3 p,
input#sn_menu_4:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4 p,
input#sn_menu_2_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_1 p,
input#sn_menu_2_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_2 p,
input#sn_menu_2_3:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_3 p,
input#sn_menu_2_1_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_1_1 p,
input#sn_menu_4_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_1 p,
input#sn_menu_4_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_2 p,
input#sn_menu_4_1_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_1_1 p {
	height:40px		/* keep this equal to value 1 above */
}
}


@media only screen and (max-width:320px) 
{
/* #info .top-banner h1 {font:normal 13px/16px 'Montserrat', arial, sans-serif;} */
}


@media only screen and (min-width:320px) {
/*.adslot_1 {width:300px; height:250px; margin:0 auto;} */

/*
.width480 {display:none;}
.width800 {display:none;}
.width320 {display:block;}
*/
}


@media only screen and (min-width:480px) {
/* .adslot_1 {width:468px; height:60px; margin:0 auto;} */

/*
.width480 {display:block;}
.width800 {display:none;}
.width320 {display:none;}
*/
}


@media only screen and (min-width:760px) {
/* .adslot_1 {width:728px; height:90px; margin:0;} */

/*
.width480 {display:none;}
.width800 {display:block;}
.width320 {display:none;}
*/
}


#info .webmaster
{
	color		:	#F00;
	font-size	:	0.5rem;
	font-family	: 	var( --ff );
	font-style	:	italic;
}


#info .red, .red-indicator
{
	color		:	#F00;
	font-weight : 	bold;
}


#info a, a:hover, a:visited
{
	color : var(--site-link-color);
}

#info a:hover
{
	font-weight : bold;
}


#info .bold-text
{
	color		: var(--site-font-color);	/* dependant on the colour scheme */
	font-weight	: bold;
}


#info .white-bold-text	/* always white colour */
{
	color		: #fff;
	font-weight	: bold;
}


#info .text
{
	color	: var(--site-font-low);		/* dependant on the colour scheme */
}


#info .white-text
{
	color	: #fff;
}


#opening-times, #contact-names, #solid-title-bar
{
	padding-top	: 1.25rem;		/* = 20px */
}


.center-align
{
	text-align: center;
}


.right-align
{
	text-align: right;
}


.left-align
{
	text-align: left;
}


.grey-row
{
	background-color: #666;
}

.grey-italic
{
	color: #666;
	font-style: italic;
}