body{
	margin: 0 100px 0 50px;
	max-width: 800px; /*	background: #C6D6F6;	*/
	color: #339;
	font-size: 90%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	background: #EEF url(images/watermark.png) no-repeat fixed 30% 40%;
}
h1,h2,h3,h4,h5,h6 {
	margin: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #339;
}

h1 img, h2 img, h3 img, h4 img {
	vertical-align: middle;
}
h2 img,
h3 img {
	padding-right: 1em;
}
/*
h1 {
	font-size: 180%;
	text-shadow: 0.1em 0.1em 0.2em #00478a;
	margin: 10px -100px 0 -50px;
	text-align: center;
}
*/
h1 {
	font-size: 180%;
	text-shadow: 0.1em 0.1em 0.2em #00478a;
	text-align: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1rem;
}
h3>a {
	display: inline-block;
}

#homepagelinks, #pagelinks, li {
	margin: 0;
	padding: 0;
}

dl {
	padding-left: 4em;
}
dt {
	font-weight: bold;
}

#homepagelinks li {
	width: 400px;
	margin: 10px 0;
	font-weight: bold;
	list-style-type: none;
	position: relative;
	display: block;
	float: left;
}

#homepagelinks li span {	/* 	Used as a container for the image link so we can right-align it.
				Tables were easier (sigh)	*/
	display: inline-block;
	width: 105px;
	float: left;
}

#homepagelinks li a.textlink {
	display: inline-block;
	width: 270px;
	float: left;
	padding-left: 10px;
	position: relative;
	top: 20px;
}

#homepagelinks li a img {
	border: none;
	outline: none;
	float: right;
}

#homepagelinks li:hover {
	background: #FFC;
}

#navbar {
	width: 100%;
	margin: 1em 0;
	padding-top: 1em;
	border-top: 1px solid #999;
	clear: both;
}
#navbar h2 {
	font-size: 80%;
	font-weight: lighter;
	text-transform: uppercase;
	margin: 0 4em;
	padding: 0;
	font-style: italic;
}

#navbar>a {
	display: inline-block;
	float: left;
	width: 6em;
	height: 6em;
	padding: 5px;
	font-size: 70%;
	font-weight: normal;
	text-align: center;
	border: 1px solid #666;
	margin: 0 1px;
}

#navbar>a:hover {
	color: maroon;
	text-decoration: underline;
	background: #FFC;
}

#pagelinks {
	clear: both;
	display: block;
	margin: 0 .5em;
}

#puppy_overlay {
	position: absolute;
	width: 250px;
	left: 440px;
	top: 280px;
	border: 1px solid #339;
	background: #F7CBA8;
	font-size: 80%;
/*	opacity: 0.6;				/* standards-based */
/*	filter:alpha(opacity=60);	/* IE-based */
	padding: .5em;
	margin: .5em 1em .5em 1.5em;
}

#homepage #puppy_overlay {
	position: static;
	width: 90%;
	margin: 0 auto;
}

a, a:visited {
	color: #339;
	text-decoration: none;
	outline: none;
}

a:hover {
	background: #FFC;
	color: maroon;
}

a img {
	border: none;
	outline: none;
}

p a {
	border-bottom: 1px solid #999;
	display: inline-block;
}
p a:hover {
	border-bottom: 1px solid maroon;
}

#pagefooter {
	clear: both;
	text-align: center;
	padding-top: 2em;
}

#pagefooter>a {
	display: inline-block;
}

#pagefooter>a:hover {
	background: #FFC;
}

#pagefooter em {
	font-size: 70%;
}

#newslogo  {
	border: 1px solid grey;
	font-weight: bold;
	text-align: center;
	width: 80%;
	margin: .5ch auto;
	padding: .4ch;
	background: whitesmoke;
	font-style: italic;
	color: grey;
}

.details {
	border: 1px solid #339;
	background: #EEF url(images/test_watermark.png) no-repeat center;
	padding: .5em;
	margin: .5em 1em .5em 1.5em;
}

/*	'OLD' MESSAGE FORMATTING STYLES
*/

.message, .good_message, .info_message {
	border: 1px solid #339;
	background: #F7CBA8;
	font-size: 80%;
/*	opacity: 0.6;				/* standards-based */
/*	filter:alpha(opacity=60);	/* IE-based */
	padding: .5em;
	width: 90%;
	margin: .5em auto;
}

.message h2, .message p {
	text-align: center;
	background: transparent;
	color: #f00;
}

.good_message h2, .good_message h3, .good_message p {
	text-align: center;
	background: transparent;
	color: #060;
}

.info_message h2 {
	font-size: 110%;
}

/*	END 'OLD' MESSAGE FORMATTING STYLES
*/


/*	NEW MESSAGE FORMATTING STYLES BELOW
	Note that these are general for all pages but can be overridden by using
	the body id selector, eg #homepage

	The standard message types are:
			#puppy_mess,
			#alert_mess,
			#info_mess,
			#event_mess,
			#external_mess and
			#photo_mess

	The message blocks always have class .show_mess or .hide_mess

*/

#alert_mess {
	width: 80%;
	margin: auto;
	padding: 1ch;
	border: 1px solid darkblue;
	border-radius: 1ch;
	box-shadow: 1ch 1ch 1ch silver;
	background: whitesmoke;
	text-align: center;
}

.hide_mess {
	display: none;
}

.show_mess {
	display: block;
	
	& .ql-align-center {
		text-align: center;
	}
}

/*	#puppy_mess appears on both puppy pages and the #homepage

	#alert_mess and #info_mess appear on the #homepage and the #news page.

	#event_mess, #external_mess and #photo_mess all appear on the #news page too.

	#event_mess and #external_mess also appear on the #events page.
*/

/*	Special formatting for the #homepage
*/

#homepage #puppy_mess {
	position: static;
	width: 90%;
	margin: 0 auto;
	background: transparent;
}
#homepage #puppy_mess:before
{	content: "Puppy classes";
	font-weight: bold;
	text-align: center;
}

#homepage #alert_mess, #homepage #info_mess {
	border: 1px solid #339;
	background: #F7CBA8;
	font-size: 80%;
	padding: .5em;
	width: 90%;
	margin: .5em auto;
	text-align: center;
	background: transparent;
}

#homepage #alert_mess {
	color: #f00;
}

#homepage #info_mess {
	color: #060;
}

/*	Formatting for all other pages
*/

#puppy_mess {
	position: absolute;
	width: 20em;
	left: 40em;
	top: 22em;
	border: 1px solid #339;
	background: transparent;
	font-size: 80%;
	padding: 1ch;
	margin: .5em 1em .5em 1.5em;
	border-radius: 1ch;
}
#photo_mess:before {
	content: "Photographer";
	font-weight: bold;
	text-align: center;
}

#event_mess:before {
	content: "Club events";
	font-weight: bold;
	text-align: center;
}

#external_mess:before {
	content: "External events";
	font-weight: bold;
	text-align: center;
}

body:not(#homepage) #alert_mess:before {
	content: "Important";
	font-weight: bold;
	font-size: 110%;
	color: red;
}

body:not(#homepage) #info_mess:before {
	content: "For Information";
	font-weight: bold;
	font-size: 110%;
}

/*	END NEW MESSAGE FORMATTING STYLES
*/

#map {
	border: 10px groove #333399;
	position: relative;
	left: 170px;
	text-align: center;
	width: 427px;
}
#map iframe {
	display: block;
	padding: 0;
	margin: 0;
	border: 1px solid #339;
}

fieldset {
	border: 1px solid #CCF;
}

fieldset, .fieldblock {
	width: 80%;
	float: left;
	clear: both;
}
fieldset label,
.fieldblock label  {
	width: 12em;
	padding: 6px 1em 0 0;
	display: block;
	float: left;
	clear: left;
	font-size: 80%;
	font-style: italic;
	text-align: right;
	}

.fieldblock input, textarea {
	width: 300px;
	display: block;
	float: left;
	margin: 6px;
	}

textarea {
	height: 6em;
}

input.fld_err, textarea.fld_err {
	background: #FDD;
}
div.fld_err {
	color: red;
	font-style: italic;
	font-size: 80%;
	padding: 6px 0 0 0;
}

input[type="radio"] {
	float: left;
	margin-top: 6px;
}

legend {
	font-size: 80%;
}


.telluser {
	background: #FFE;
	border: 1px solid #339;
	padding: 0 6px;
}

/*	reCAPTCHA styles	*/
#recaptcha_container {
	width: 300px;
	float: left;
	border: 1px solid #99c;
	overflow: auto;
	font-size: 80%;
	background: #EEF;
	padding: 0;
	margin: 6px;
}
#recaptcha_container input {
	width: 280px;
	margin: 0 10px;
}
#recaptcha_image {
	border-bottom: 1px solid #99c;
	width: 300px;
	height: 57px;
}

#recaptcha_image img {
	/* for IE */
  filter: alpha(opacity=60);
  /* CSS3 standard */
  opacity: 0.6;
}


#recaptcha_container p {
	margin: 6px;
	text-align: center;
}
#recaptcha_container a {
	border: 1px solid #999;
	background: #eee;
}
#recaptcha_container a:hover {
	background: #FFC;
	border: 1px solid maroon;
	cursor: pointer;
}
#recaptcha_container.fld_err {
	background: #FDD;
}