@charset "utf-8";

/* CSS Document */


/* 
CSS Document   This document validates as CSS level 3 + SVG !   validated 14/08/2025 

HTML Document checking completed. No errors or warnings to show.  validated 14/08/2025 

*/

html
{
	box-sizing:border-box
}

*,
*:before,
*:after
{
	box-sizing:inherit
}

/*
html
{
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%
}
*/

.skip-link
{
	background: #fff;
	color: #00f;
	font-weight: 700;
	left: 0%;
	padding: 4px;
	position: absolute;
	transform: translateY(-100%);
	top: 0px;
	visibility: visible;
}

.skip-link:focus
{
	transform: translateY(0%);
	color: #060;
}


a:link {
	color: #00f;
}
a:visited {
	color: #909;
}
a:hover {
		color: #00f;
		background: #fff;
}
a:active {
	color: #00f;
	background: #fff;
}

a:focus {
			color: #060;
			background: #fff;
		}

#header
{
	font-family: Verdana;
	color: #363;
	background: #FDFDEA;
	text-align: center;
	border: 2px solid #060;
	border-radius: 1rem;	
	padding: 8px;
	width: 50%;
	margin: auto;
	
}

#container
{
		width: auto;
		text-align: center;
		margin: 0 auto;
}

#header h1
{
	margin: 0;
	padding: 10px 0;
}

#mainContent
{
	background: #fff;
	text-align: left;
	color: #000;
	width: 60%;
	border: 2px solid #666;
	border-radius: 1.25rem;
 	box-shadow: .6rem .6rem .6rem #6B8E23;
	padding: 2rem;
	overflow: auto;
	font: 1rem Verdana, Arial, Helvetica, sans-serif;
	margin-right: auto;
	margin-left: auto;
}

article
{
	font: 1rem Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background: #fff;
	text-align: left;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.groupname
{
		font: 1.5em Verdana, Arial, Helvetica, sans-serif;
		color: #060;
		background: #fff;
		text-align: center;
		width: 50%;
		border: medium inset #060;
		border-radius: 1rem;
		margin: auto;
		height: auto;
		padding: 1rem;
}


.motto
{
		text-align: center;
		border: 1px solid #063;
		border-radius: 1rem;
		background: #005000;
		font: oblique 1.2em Verdana, Arial, Helvetica, sans-serif;
		color: #FFFFC8;
		padding: 8px;
		width: 50%;
		margin-right: auto;
		margin-left: auto;
}

#workgroup
{
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding: 12px;
	list-style: none;
	color: #004000;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: thin solid #000;
	}
.normtxt {
		text-align: left;
		font: 16px/133% Verdana, Arial, Helvetica, sans-serif;
		color: #000;
}


h1
{
	font: 1.5em Verdana, Arial, Helvetica, sans-serif;
	color: #063;
	text-align: center;
	padding: 8px;
	width: auto;
	margin-right: 15%;
	margin-left: 15%;
	background: #FFFFF5;
}

h2
{
	font: 1.2em Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background: #fff;
	text-align: left;
	padding: 8px;
}

h3
{
	font: 1rem Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background: #fff;
	text-align: center;
	padding: 1em;
}

.terry
{
	font: 90% "Times New Roman", Times, serif;
	text-align: center;
	color: #000;
	background: #fff;
}

.middle
{
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		color: #000;
		background: inherit;
}


hr
{
	color: #000;
	background: #CCC;
	font-size: 2px;
	text-align: center;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
}

.clearsboth
{
	clear: both;
}

#footer
{
		clear: both;
		font: 16px/1.2 "Times New Roman", Times, serif;
		color: #000;
		background: #fff;
		text-align: center;
		width: 30em;
		margin-right: auto;
		margin-left: auto;
 		padding: .625rem;
		border-width: thin;
		border-style: solid;
}

#footer p
{
	margin: 0;
 	padding: .625rem;
}


ul		{
	text-align: left;
	width: 90%;
	list-style: disc;
	border-style: none;
	margin-right: auto;
	margin-left: auto;
}

li
{
	text-align: left;
	line-height: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
}


.meetat
{
	color: #060;
	padding: 16px;
	border: none;
	background: #fff;
	min-width: 180px;
	text-decoration: none;

	text-align: center;
	margin-right: 10%;
	margin-left: 10%;
	font: bold 18px Verdana, Arial, Helvetica, sans-serif;
	width: 80%;
}

#mainContent #workgroup h3
{
	text-align: center;
	font-size: 18px;
}

@media screen and (max-width: 480px) and (min-width: 240px) {
#footer		{margin:0; width:auto;}
}

@media screen and (max-width: 768px) and (min-width: 320px) {
 .groupname 	{
width: 100%;
padding: 1rem;
}
.motto	{
width: 100%;
padding: 1rem;
}
}

@media screen and (max-width: 900px) and (min-width: 769px) {
 .groupname	{
width: 80%;
padding: 1rem;
}
.motto	{
width: 80%;
padding: 1rem;
}
}

@media screen and (max-width: 1200px) and (min-width: 901px) {
  .groupname	{
width: 70%;
padding: 1rem;
}
.motto	{
width: 70%;
padding: 1rem;
}
}


@media screen and (max-width: 1600px) and (min-width: 901px) {
  .groupname	{
width: 50%;
padding: 1rem;
}
.motto	{
width: 50%;
padding: 1rem;
}
}


@media (min-width: 320px) {
#mainContent {
width: 100%;
padding: 1rem;
}
 #workgroup {
width: 100%;
}

.insets ul, li	{
margin-left: 0px;
}
}

@media (min-width: 480px) {
#mainContent {
width: 100%;
padding: 1rem;
}
 #workgroup {
width: 100%;
}

.insets ul, li	{
margin-left: 0px;
}

}
@media (min-width: 768px) {
#mainContent {
width: 95%;
margin:auto;
}
 #workgroup {
width: 95%;
}


}

@media screen and (max-width: 1202px) and (min-width: 901px) {


/*		@media (min-width: 1024px) {		*/
#mainContent {
width: 85%;
margin:auto;
}
 #workgroup {
width: 90%;
}

}
/*		@media (min-width: 1201px) {		
#mainContent {
width: 70%;
margin:auto;
}
#workgroup {
width: 80%;
}
*/

@media screen and (max-width: 1907px) and (min-width: 1202px) {


/*		@media (min-width: 1024px) {		*/
#mainContent {
width: 70%;
margin:auto;
}
 #workgroup {
width: 80%;
}

}

@media screen and (max-width: 3200px) and (min-width: 1900px) {
#mainContent {
width: 55%;
margin:auto;
}
#workgroup {
width: 70%;
}
}

.lynx { color: #00f; }

/* 
The following code was taken from the example page for the responsive topnav menu		
*/



*
{
	box-sizing: border-box;
}

body
{
		font: 1rem/1.33rem Verdana, Arial, Helvetica, sans-serif;
		color: #000;
		background: #FAFAE6 url(wcgbg.png) repeat-y fixed left top;
		text-align: center;
		margin: 0px;
		padding: 0px;
		border-style: none;
}


.topnav {
		overflow: hidden;
		background-color: #050;
}

.topnav a {
		float: left;
		display: block;
		color: #FFFFC8;
		text-align: center;
		padding: 14px 16px;
		font-size: 17px;
		background: #050;
		text-decoration: underline;
}

.topnav a:hover {
		background-color: #FFFFC8;
		color: #050;
}

.topnav a.active {
		background-color: #E9E9E9;
		color: #050;
}

.topnav a:focus {
		background-color: #FFFFC8;
		color: #050;
		text-decoration: underline;
}



.topnav .icon {
  display: none;
}

@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.fbook {
		text-align: left;
		text-indent: 2rem;
		border-style: none;
		vertical-align: middle;
}