body {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	color: orange;
	background-color: #2A1E15;
	line-height: 125%;
	background-image: url(../../images/bg-tile.gif);
	background-repeat: repeat;
	font-size: 16px;
	}

#debugInfoDiv,
body>p,
body>pre {
	/* No text should appear directly in the body element so make it visible if it does. */
	color: magenta;
	background: #002;
	}

button	{
	outline: none;
	}

.yflButton {
	width: auto;
	padding: 4px 10px 4px 10px;
	margin-top: 12px;
	margin-left: 24px;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}


div#page_margins {
	border: solid 1px black;
	}

div#page {
	color: black;
	text-align: left;
	}

p {
	padding: 0 0 6px 0;
	}

p, li, li.leaf-bullet h4 {
	font-size: 14px;
	line-height: 19px;
	font-weight: normal;
	margin: 0;
	}

body#homePage #colMiddleContent > p {
	font-size: 13px;
	line-height: 21px;
	}

pre	{
	font-size: 14px;
	line-height: normal;
	/* Make pre text wrap. From https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
	 white-space: pre-wrap;       /* css-3 */
	 word-wrap: break-word;       /* Internet Explorer 5.5+ */
	}

#debugInfoDiv p,
#debugInfoDiv pre {
	color: white;
	font-size: 14px;
	}

form {
	padding-bottom: 8px;
	clear: both;
	}

fieldset {
	border: 1px solid #8E411D;
	padding: 4px 0;
	border-radius: 10px;
	}

.dropShadow {
	border: 1px solid #555;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

strong,
.bold {
	font-weight: bold;
	color: rgb(50,50,50);
	}

em,
.italic {
	font-style: italic;
	}

ol, ul {
	list-style: none;
	}

ul.leaf-bullet {
	margin-top: 0;
	margin-left: 48px;
	}

li {
	padding: 0 0 5px 23px;
	background-image: url(/images/bullet.gif);
	background-repeat: no-repeat;
	background-position: 10px 4px;
	line-height: 150%;
	}

/*li.leaf-bullet,
li.leaf-bullet h4 {*/
ul.leaf-bullet > li,
ul.leaf-bullet > li h4 {
	padding: 0 0 2px 0;
	margin: 0;
	background-image: none;
	list-style-image: url(/images/bullet-single-leaf.gif);
	list-style-type: disc;
	}

#benefits ul.leaf-bullet li {
	margin-bottom: 20px;
	}

.leaf-bullet p {
	margin: 0;
	padding: 0;
	}

a[href^="tel:"]:before {
	/* 2020-01-04:	Lifted from https://css-tricks.com/the-current-state-of-telephone-links/	*/
	/*		Prefix a <a href="tel:"...> link with a telephoen symbol.			*/
	content: "\260e ";
	color: #FF0000;
	margin-right: 4px;
	vertical-align: unset;
	}

a:link,
a:visited,
.leaf-bullet a:link,
.leaf-bullet a:visited {
	color: #597D35;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #526226;
	}

a:hover,
a:active {
	color: #526226;
	background-color: #E1ECD7;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #526226;
	}

a.noDecoration:link,
a.noDecoration:hover,
a.noDecoration:active {
	text-decoration: none;
	border: none;
	}

.space-after {
	margin-bottom: 15px;
	}

input	{
	padding-left: 4px;
	}

#menuDiv ul {
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: 0;
	padding: 0;
	font-style: italic;
	font-size: 1px;		/* IE bug fix */
	}

#menuDiv ul li {
	font-size: 13px;
	text-align: left;
	list-style: none;
	list-style-image: none;
	background-image: none;
	margin-left: 0;
	padding: 0 0 12px 0;
	border-style: none;
	position: relative;	/* Position the <li> element relative to its parent */
	}

#menuDiv div.menuSubDiv {	/* Pop-up sub-menu panel */
	position: absolute;
	left: 100px;
	top: -48px;
	width: 350px;
	z-index: 999;
	display: none;
	background-image: url("/images/subMenu_bg.jpg");
	padding: 10px 6px 10px 0;
	margin: 0;
	border: solid 2px #cdc2a0;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

#menuDiv div.menuSubDiv li {
	margin-left: 12px;
	padding: 0 0 6px 0;
	}

#menuDiv ul li a {
	display: block;
	font-weight: bold;
	text-decoration: none;
	padding: 0;
	border-style: none;
	background-color: transparent;
	color: #fff4de; /* cream */
	}

#menuDiv div.menuSubDiv ul {
	margin: 0;
	padding: 0;
	position: relative;
	}

#menuDiv ul li a:link,
#menuDiv ul li a:visited,
#menuDiv ul li a:active {
	color: #fff4de; /* cream */
	background-color: transparent;
	border-style: none;
	}

/* Special for National Yoga Month, September 2015. Different colour and size for emphasis. */
#menuDiv ul li a:link.NationalYogaMonth,
#menuDiv ul li a:visited.NationalYogaMonth,
#menuDiv ul li a:active.NationalYogaMonth {
	color: #ffd119;
	font-size: 18px;
	}

#menuDiv ul li.activePage,
#menuDiv div.menuSubDiv ul li.activePage {
	list-style-image: url(/images/bullet-menu-leaf.gif);
	}

#menuDiv div.menuSubDiv li a {
	color: #6e4d31; /* dark grey/brown */
	}

#menuDiv div.menuSubDiv li a:link,
#menuDiv div.menuSubDiv li a:visited,
#menuDiv div.menuSubDiv li a:active {
	color: #6e4d31; /* dark grey/brown */
	}

#menuDiv ul li:hover {
	list-style-image: url(/images/bullet-menu-leaf-hover.gif);
	list-style-type: none;
	background-color: transparent;
	}

#menuDiv ul li:hover > div.menuSubDiv {		/* Make the submenu div visible */
	display: block;
	}

#menuDiv ul li a:hover,
#menuDiv div.menuSubDiv li a:hover,
#menuDiv ul li a.activePage,
#menuDiv div.menuSubDiv li a.activePage {	/* Change the menu item colour on hover */
	color: #d16e2c; /* orangey/brown */
	}

#menuDiv ul li a.adminToolMenuItem {
	color: #fff4de;
	padding-left: 6px;
	}

#menuDiv ul.lclAdminTools li,
#menuDiv ul.lclAdminTools li a {
	padding: 0;
	font-weight: normal;
	}

#menuDiv div.menuSubDiv  ul.lclAdminTools li a:link,
#menuDiv div.menuSubDiv  ul.lclAdminTools li a:visited,
#menuDiv div.menuSubDiv  ul.lclAdminTools li a:active {
	font-weight: normal;
	color: black;
	}

#menuDiv div.menuSubDiv  ul.lclAdminTools li a:hover {
	color: red;
	}

/* The special (for lcl. sites) Admin, Database Admin and Tools special min-menu. */
#adminToolsMiniMenuItems {
	position: fixed;
	top: 0;
	right: 0;
	width: 100px;
	background-color: #004;
	}

#adminToolsMiniMenuItems ul {
	margin-bottom: 0;
	}

#adminToolsMiniMenuItems ul li {
	margin: 0;
	padding: 6px 0 6px 0;
	}

.followUs a:link,
.followUs a:visited {
	font-size: 11px;
	color: #FFF;
	text-align: left;
	vertical-align: middle;
	margin-left: 0;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-style: italic;
	text-decoration: none;
	border-style: none;
	}

.followUs a:hover {
	color: black;
	border-bottom: #FFF solid 1px;
	}

img.followUs {
	width: 24px;
	height: 24px;
	margin-right: 4px;
	vertical-align: middle;
	}

.about-us-photo {
	margin: 0;
	margin-bottom: 12px;
	width: 150px;
	vertical-align: text-top;
	border: solid 1px black;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

.float-left {
	float: left;
	margin-right: 12px;
	vertical-align: text-top;
	}

.float-right {
	float: right;
	margin-left: 12px;
	vertical-align: text-top;
	}

.floatRightImage {
	float: right;
	margin-left: 32px;
	vertical-align: text-top;
	}

#footer {
	height: 48px;
	background: #6f6259;
	color: #fff;
	border-top: solid 1px black;
	}

#footer p.address {
	font: 12px/18px Tahoma, Geneva, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 48px;
	text-align: center;
	}

#footnotes {
	margin-top: 4px;
	display:none;		/* 2016-02-06: Footnotes supressed for the moment */
	}

#footnotes p {
	font-size: 11px;
	color: #FFF;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	}

/*	#000000
			#0B0A09
			#161412
			#211D1B
			#2C2724
			#38312C
			#433B35
			#4E453E
			#594E47
			#645850
	#6f6259
			#7D726A
			#8C817A
			#9A918B
			#A9A19B
			#B7B0AC
			#C5C0BD
			#D4D0CD
			#E2E0DE
			#F1EFEE
			#FFFFFF	*/
#bottomNav {
	width: inherit;
	background-color: #8C817A;
	border-top: 1px solid black;
	padding: 16px 0 0 0;
	}

#bottomNav h3 {
	color: #333;
	font-weight: bold;
	font-size: 125%;
	border-bottom: 2px solid #8E411D; /* dark orangey/brown */
	margin-left: 160px;
	}

#bottomNav .bottomNavCol {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: white;
	display: block;
	float: left;
	padding: 6px;
	width: 210px;
	}

#bottomNav .bottomNavCol {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: white;
	display: block;
	float: left;
	padding: 6px 50px 6px 0;
	width: 160px;
	}

#bottomNav #bottomNavCol1 {
	margin-left: 160px;
	}

#bottomNav .bottomNavCol h4 {
	color: #333;
	font-weight: bold;
	text-decoration: underline;
	}

#bottomNav .bottomNavCol ul {
	list-style-type: none;
	margin-left: 0;
	}

#bottomNav .bottomNavCol li {
	padding-left: 0;
	background-image: none;
	}

#bottomNav a:link,
#bottomNav a:visited {
	font-size: 12px;
	color: #FFF;
	text-align: left;
	vertical-align: middle;
	margin-left: 0;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-style: normal;
	text-decoration: none;
	border-style: none;
	}

#bottomNav a:hover {
	color: black;
	background-color: transparent;
	border-bottom: black dotted 1px;
	}

.copyright {
	margin: 10px auto 0;
	}

.copyright p {
	font-size: 11px;
	color: whitesmoke;
	text-align: center;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	}

.copyright a,
.copyright a:link {
	color: #77aa00;
	}

.copyright a:hover {
	border-bottom: dotted 1px #fff;
	color: #000;
	}

h1, h2, h3, h4, h5, h6 {
	color: #6e4d31; /* dark grey/brown */
	margin: 0 0 2px 0;
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	font-weight: bold;
	}

h1 {
	font-size: 21px;
	line-height: 21px;
	font-weight: bold;
	color: #526226;
	margin-bottom: 16px;
	}

#homePage h1 {
	margin-bottom: 0;
	}

h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 21px;
	margin: 18px 0 6px 0;
	color: #8E411D;
	}

h2.rule-above {
	border-top: 1px solid #f0e8cc;
	padding-top: 6px;
	}

h2.expired {
	font-size: 200%;
	color: red;
	}

h3 {
	font-size: 13px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #d3c9c1;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 6px;
	padding-bottom: 2px;
	font-family: Verdana, Geneva, sans-serif;
	/* 2022-08-16: Remove forced "uppercase" */
	/* text-transform: uppercase; */
	}

h4 {
	font-size: 12px;
	margin: 0 0 5px 0;
	}

h1.welcome,
h2.welcome {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	font-size: 21px;
	line-height: 21px;
	font-weight: bold;
	color: #526226;
	margin-bottom: 10px;
	}

h2.welcome {
	font-size: 14px;
	margin: 6px 0 10px 0;
	}

.sub-description {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	color: #8E411D;
	text-transform: none;
	border: none;
	margin: 0;
	font-size: 11px;
	}

a:active {
	outline: none;
	}

a { text-decoration:none;}

.event-title,
.event-subtitle {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 130%;
	font-weight: bold;
	color: #8E411D;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #d3c9c1;
	border-top-color: #404040;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #d3c9c1;
	border-bottom-color: #404040;
	margin: 16px 0 4px 0;
	padding-top: 10px;
	padding-bottom: 6px;
	text-transform: none;
	}

.redBox .event-title {
	margin: 2px 0 2px 0;
	border: none;
	background-color: #ddd;
	font-size: 75%;
	}

.redBox .event-title a {
	border: none;
	}

div.closureCancellationContent {
	border: 1px solid #d3c9c1;
	border-radius: 6px;
	box-shadow: 0 0 0 1px #fff;
	margin-bottom: 6px;
	padding: 6px;
	}

.event-subtitle {
	font-size: 12px;
	line-height: 120%;
	border: none;
	padding-top: 0;
	margin: 0;
	}

.event-title.expiredEvent {
	color: #6c4f41;
	}

.event-title.first {
	border: none;
	padding-top: 10px;
	margin-top: 0;
	}

#colRight {
	overflow: hidden;
	}

#colRightContent h2 {
	font-size: 11px;
	line-height: 17px;
	font-weight: bold;
	color: #FFF;
	background-color: #526226;
	width: 200px;
	text-transform: uppercase;
	padding: 0 4px 2px 4px;
	margin-top: 0px;
	margin-bottom: 0;
	}

#colRightContent p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	line-height: 16px;
	}

#colRightContent h2 {
	margin-bottom: 12px;
	}

#colRightContent h2,
#colRightContent p img {
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

#colRightContent h2 + p {
	margin-top: 12px;
	}

#colRightContent p img {
	width: 206px;
	border: solid 1px black;
	}

#colRightContent h4 {
	text-transform: none;
	}

#upcomingEvents .event-title {
	font-size: 12px;
	border: none;
	padding-top: 0;
	margin-top: 0;
	}

#upcomingEvents h3.event-title {
	margin-top: 0;
	margin-bottom: 4px;
	padding: 0;
	}

#upcomingEvents p {
	padding-bottom: 0px;
	}

#upcomingEvents .event-date {
	font-size: 11px;
	}

#upcomingEventsNonScroll .slide,
#upcomingEventsScroll .slide {
	margin-bottom: 10px;
	}

#upcomingEventsNonScroll h3,
#upcomingEventsScroll h3 {
	margin-top: 0;
	}

#upcomingEventsTestPage #upcomingEventsNonScroll .slide,
#upcomingEventsTestPage #upcomingEventsScroll .slide {
	background-color: #eee;
	}

.event-title a {
	color: #8E411D;
	border-bottom-color: #5a3214;
	}

.event-title a:hover {
	color: #82461e;
	background-color: #ebdcd2;
	}

.event-subtitle {
	color: #8E411D;
	font-size: 12px;
	font-weight: bold;
	}

.event-date,
.nextClass {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 17px;
	font-weight: bold;
	}

.nextClass {
	font-size: 6px;
	font-weight: normal;
	line-height: normal;
	}

.event-info {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	line-height: 15px;
	}

#promoBox {
	/*position: absolute; top: 78px; left: 20px; width: 470px;*/
	/* 2019-03-16: Centre it in a 762px space. */
	/* 2019-04-29: Make it wider as we've got rid of the right hand column. */
	/* Positioning for promoBox is done in index.php because that way it can be generated by PHP code from defined values. */
/*	   Comment out the positioning CSS in here.
	position: absolute;
	top: 78px;
	left: 24px;
	width: 700px;
	height: 136px;
*/
	background-image: url(/images/promo_box.jpg);
	background-repeat: repeat;
	background-position: left top;
	padding: 6px;
	margin: 0;
	border: 1px solid #000;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

#promoBox .slide {
	height: 128px;
	}

.noticeBox h4.event-title,
#promoBox h4.event-title,
#promoBox p.event-subtitle,
#promoBox p.event-date,
#promoBox p.event-info {
	border-style: none;
	padding: 0 0 2px 0;
	margin: 0 0 4px 0;
	}

.noticeBox h4.event-title,
#promoBox h4.event-title {
	font-size: 14px;
	}

#promoBox p.event-subtitle {
	font-size: 14px;
	}

#promoBox p.event-date {
	font-size: 13px;
	}

#promoBox p.event-info {
	line-height: 15px;
	font-size: 13px;
	margin: 0;
	}

/* Make some adjustments/overrides so that the promoBoxTest.php page shows the entire promoBox content. */
/* Don't show a background because this shows all slides in the one panel and the background etc. applies to the whole panel and not individual slides */
#promoBoxTestPage #promoBox {
	position: static;
	height: auto;
	overflow: visible;
	background-image: none;
	}

#promoBoxTestPage #promoBox .slide {
	background-color: #999;
	margin-top: 12px;
	}

#contactUs {
	margin: 1em 0 1em 0;
	padding: 0 4px;
	}

#contactForm input[type=checkbox] {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	}
#contactForm input[type=submit] {
	margin-left: 205px;
	padding: 4px 12px 4px 12px;
	}

/* Supress the display of the firstName question and field in the various forms that use it.	*/
/* The idea is that if this field is not empty after submission then it was probably completed	*/
/* by a bot and so we can dump the submission.							*/
#firstName {
	display: none;
	}

legend	{
	margin-left: 24px;
	padding-left: 12px;
	padding-right: 12px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	}

.note {
	margin: 6px 6px;
	padding: 6px 8px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: normal;
	background-color: #f0efe8;
	display: block;
	border-radius: 10px;
	}

pre.note {
	font-family: "Lucida Console", Consolas, "Courier New", Courier, monospace;
	}

.asterisk {
	color: #C30;
	font-weight: bold;
	padding-right: 4px;
	}

p.fieldsetPara {
	clear: both;
	}

label {
	display: block;
	float: left;
	width: 195px;
	text-align: right;
	margin-right: 10px;
	margin-bottom: 3px;
	font-size: 12px;
	clear: both;
	}

.textfield {
	color: #333;
	width: 420px;
	height: 18px;
	}

.textfield:focus,
textarea:focus {
	background-color: #FFC;
	}

.textfield,
#mailingList {
	margin: 0 0 6 0;
	}

textarea {
	color: #333;
	width: 420px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	line-height: normal;
	}

form#giftCertificateOrderForm fieldset {
	padding-bottom: 16px;
	}
form#giftCertificateOrderForm textarea,
form#giftCertificateOrderForm input[type=text],
form#giftCertificateOrderForm input[type=email],
form#giftCertificateOrderForm input[type=tel],
form#giftCertificateOrderForm input[type=number] {
	width: 480px;
	padding-left: 4px;
	}
form#giftCertificateOrderForm input[type=checkbox] {
	width: auto;
	transform: scale(1.25);
	margin-left: 2px;
	}

form#giftCertificateOrderForm input[type=submit],
form#giftCertificateOrderForm input[type=reset],
form#confirmPayPalPurchaseForm input[type=submit],
form#confirmPayPalPurchaseForm input[type=reset],
form#confirmPayPalPurchaseForm button {
	width: auto;
	padding: 4px 10px 4px 10px;
	margin-top: 12px;
	margin-left: 24px;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

form#giftCertificateOrderForm input[type=image] {
	width: auto;
	padding: 0;
	margin: 0;
	margin-left: 24px;
	vertical-align: bottom;
	}

form#confirmPayPalPurchaseForm input[type=submit] {
	margin-left: 12px;
	margin-bottom: 12px;
	background-color: #f3bd45;
	}

form#giftCertificateOrderForm span#submitButtons {
	margin-left: 176px;
	}

form#giftCertificateOrderForm span#submitButtons input {
	height: 25px;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

table {
	/* Applies to all tables */
	background: #fff;
	border: 1px solid #777;
	border-bottom: 3px solid #777;
	margin: 0;
	width: 100%;
	}

th,
td	{
	font-family: Verdana, Geneva, sans-serif;
	padding: 4px 3px;
	}

th {
	background-color: #B9AE8D;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	line-height: 19px;
	text-transform: capitalize;
	text-align: center;
	vertical-align: bottom;
	}

td {
	text-align: left;
	font-weight: normal;
	font-size: 11px;
	vertical-align: top;
	}

td a {
	color: #333;
	padding: 0;
	line-height: 12px;
	background-repeat: no-repeat;
	background-position: left center;
	}

td a:hover {
	border-bottom: dotted 1px #333;
	}

.evenRow {
	background-color: #F0EEE6;
	}

.oddRow {
	background-color: transparent;
	}

tr.oddRow:hover,
tr.evenRow:hover {
	background-color: #d8d6cf;
	}

#prices-and-etiquettePage td {
	border-bottom: 1px solid #CCB;
	}

#prices-and-etiquettePage td.classItem {
	background-color: #d5cebb;
	border-top: 1px solid #AA9;
	border-bottom: 1px solid #CCB;
	}

#prices-and-etiquettePage .priceItem {
	width: 95%;
	padding-left: 20pt;
	}

#prices-and-etiquettePage .price {
	padding-right: 16px;
	text-align: right;
	}

#prices-and-etiquettePage .paypal-buy-now-button {
	margin: 0;
	}

.leaf-divide {
	text-align: center;
	padding: 0;
	margin: 15px auto;
	}

.mission-statement {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	font-size: 14px;
	font-style: italic;
	line-height: 22px;
	color: #6e4d31; /* dark grey/brown */
	color: black; /* You can read! */
	margin-bottom: 6px;
	}

.event-instructor-bio {
	font-size: 11px;
	color: #35281E;
	}

.event-instructor-bio-box {
	background-color: #E3E1D5;
	margin: 15px 0 15px 0;
	padding: 10px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #d3c9c1;
	border-bottom-color: #d3c9c1;
	}

.event-instructor-bio-box h4 {
	border-bottom-style: none;
	margin-bottom: 0;
	}

.testimonial-name {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	line-height: 13px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: right;
	}

.testimonial-info {
	font-weight: normal;
	font-size: 10px;
	color: #333;
	}

div#giftCertificatesAvailable {
	/* The small panel advertising Gift Certificates */
	background-image: url("/images/giftCertificatesAvailable_bg.jpg");
	float: right;
	width: 190px;
	padding: 4pt 10pt;
	margin-left: 8px;
	margin-bottom: -20px;	/* Offset for top: -24px; in rule below */
	border: 1px solid #555;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}
div#giftCertificatesAvailable {
	position: relative;
	top: -24px;
	right: 0;
	}

.doubleSpace {
	line-height: 200%;
	}

.red,
.red * {
	color: #800000 !important;
	}

.thisMonthsTopic,
.thisMonthsTopic * {
	color: #8e411d;
	}

p.thisMonthsTopic {
	margin-left: 36px;
	}

.noticeBox,
.redBox {
	margin: 0;
	margin-top: 12px;
	margin-bottom: 18px;
	padding: 6px 12px;
	border-radius: 10px;
	background-image: url(/images/promo_box.jpg);
	background-repeat: repeat;
	background-position: left top;
	}

.noticeBox {
	border: solid 1px #000;
	box-shadow: 6px 6px 10px 0 #999;
	}

.redBox {
	width: 560px;
	color: #a55;
	background-color: #fff0f0;
	border: solid 1px #800000;
	box-shadow: 6px 6px 10px 0 #a55;
	}

#homePage .redBox {
	width: inherit;
	}

.redBox * {
	/* Everything in the redBox is red! */
	color: #800000 !important;
	}

div.notice *,
tr.notice * {
	font-family: Verdana, Geneva, sans-serif;
	font-style: italic;
	border: none;
	}

div.notice {
	margin: 6px 0 12px 0;
	}

div.notice .event-title {
	background: transparent;
	}

div.notice h3 {
	/* 2022-08-18: Remove underline because shouldn't underline and italicise. */
	/* text-decoration: underline;	*/
	margin-top: 0;
	}

div.notice h4 {
/*	font-size: 95%;	*/
	margin: 0;
	padding: 0;
	}

div.notice a,
tr.notice a {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #5A3214;
	}

div.notice div.close,
div.notice div.cancel {
	margin: 6px 0 0 0;
	}

div.notice div.cancelledList {
	margin-left: 24px;
	}

div.notice p.cancelledList {
	font-weight: bold;
	font-size: 95%;
	margin: 0;
	padding: 0;
	}

div.notice.red * {
	color: #800000 !important;
	}

/* Notice for display in colMiddleContent area. i.e. the main page. */
div#colMiddleContent > div.notice {
	margin: 0 0 12px 36px;
	}

#homePage div#colMiddleContent > div.notice {
	margin: 0 0 12px 0;
	}

div#colMiddleContent > div.notice p.event-info {
	margin-left: 24px;
	}

div#colMiddleContent > div.notice p.event-date + p.event-info {
	margin-top: 6px;
	}

/*div#colMiddleContent > div.notice h4.event-title,*/
div#colMiddleContent > div.notice p.event-date {
	display: inline;
/*		font-size: 100%;	*/
	margin: 0 0 6px 12px;
	padding: 0;
	}

div#colMiddleContent > div.notice p.event-date {
/*	font-size: 95%;	*/
	}

#schedulePage h2 {
	margin-top: 12px;
	}

#printScheduleButton {
	font-size: 16px;
	border: 1px solid #555;
	margin-top: 12px;
	padding: 6px;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

table.scheduleTable {
	border-top: none;
	margin-top: 12px;
	margin-bottom: 24px;
	border-collapse: collapse;
	width: 99%;
	}

table.scheduletable tr {
	width: 100%;
	}

table.scheduleTable .evenRow,
table.scheduleTable .oddRow,
table.scheduleTable tr.oddRow:hover,
table.scheduleTable tr.evenRow:hover {
	background-color: transparent;
	}

table.scheduleTable tr.notice {
	background-color: #fff0f0;
	}

table.scheduleTable tr.isToday {
	/* Provides styling for the whole row for events happening today */
	/* Obviously not doing anything except providing a placeholder   */
	}

table.scheduleTable th,
table.scheduleTable td {
	border: 1px solid #777;
	vertical-align: baseline;
	padding: 3px 3px;
	}

table.scheduleTable td.date {
	padding-right: 9px;
	}

table.scheduleTable td.isToday {
	/* Provides styling for the date column for events happening today */
	/* Obviously not doing anything except providing a placeholder     */
	}

table.scheduleTable h4,
table.scheduleTable p {
	font-family: Verdana, Geneva, sans-serif;
	padding: 0;
	margin: 0;
	border: none;
	font-size: 10px;
	font-weight: normal;
	}

table.scheduleTable .tableColumnSetter,
table.scheduleTable .tableColumnSetter td {
	/* Disappear it from sight. It's used to force column widths for the event and instructor columns and leave the rest to the date/time. */
	height: 0;
	line-height: 0;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: none;
	}

table.scheduleTable tr.dayOfWeekFiller,
table.scheduleTable td.dayOfWeekFiller {
	height: 3px;
	font-size: 0;
	line-height: 0;
	color: white;
	background-color: white;
	border: none;
	padding: 0;
	margin: 0;
	}

table.scheduleTable .schedule-day {
	color: #FFF;
	font-size: 12px;
	background-color: #35281E;
	font-weight: bold;
	padding: 4px 0 4px 4px;
	border: solid 1px #35281E;
	}

table.scheduleTable .schedule-blankRow {
	height: 2px;
	font-size: 2px;
	margin: 0;
	padding: 0;
	}

table.scheduleTable .scheduleDetail {
	/* Default is to hide the scheduleDetails */
	display: none;
	/* 2019-10-23: Make the default display: block for the moment. */
	display: block;
	}
table.scheduleTable tr.eventRow:hover .scheduleDetail {
	/* Make it visible when hovering on the row */
	/* 2019-10-23: Remove the hover effect for the moment. */
	/* display: block; */
	}

table.scheduleTable tr.weekly h4.event-title,
table.scheduleTable tr.weekly h4.event-title a {
	color: #526226;
	}

table.scheduleTable .event-title {
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 4px;
	color: #8E411D;
	}

table.scheduleTable p.event-subtitle {
	padding-bottom: 3px;
	}

table.scheduleTable p.event-date {
	font-size: 12px;
	font-weight: bold;
	color: #8E411D;
	padding-bottom: 3px;
	white-space: nowrap;
	}

td.nowrap {
	white-space: nowrap;
	}

table.scheduleTable p.event-time {
	font-size: 12px;
	white-space: nowrap;
	line-height: 120%;
	}

table.scheduleTable p.event-info {
	font-size: 10px;
	padding-bottom: 3px;
	}

table.scheduleTable p.event-instructor {
	text-align: left;
	line-height: 120%;
	}


table.scheduleTable td.event.eventType_online,
.superAccordion .accordionHeader h2.eventType_online,
.eventTypeFiltersFieldset label.yoga,
.eventTypeFiltersFieldset #eventTypeButton_online {
	background: #fbf1bb;
	}

/* 2020-08-10:	Yoga & Other classes panel remove at Rhonda's request. Mantis ID 915. Used Yoga colour for Online. */
table.scheduleTable td.event.eventType_yoga,
.superAccordion .accordionHeader h2.eventType_yoga,
.eventTypeFiltersFieldset label.yoga,
.eventTypeFiltersFieldset #eventTypeButton_yoga {
	background: #fbf1bb;
	}

table.scheduleTable td.event.eventType_mindfulness,
.superAccordion .accordionHeader h2.eventType_mindfulness,
.eventTypeFiltersFieldset label.mindfulness,
.eventTypeFiltersFieldset #eventTypeButton_mindfulness {
	/* background: #f1cfa2;	Karen's original */
	background: #ecd5ac;
	}
table.scheduleTable td.event.eventType_special,
.superAccordion .accordionHeader h2.eventType_special,
.eventTypeFiltersFieldset label.special,
.eventTypeFiltersFieldset #eventTypeButton_special {
	background: #ddd3ba;
	}

table.scheduleTable td.event.eventType_other,
.superAccordion .accordionHeader h2.eventType_other,
.eventTypeFiltersFieldset label.other,
.eventTypeFiltersFieldset #eventTypeButton_other {
	/* 'Other' is a darker version of yoga */
	background: #f9ec9f;
	}

table.scheduleTable td.event.eventType_all,
.superAccordion .accordionHeader h2.eventType_all,
.eventTypeFiltersFieldset label.other,
.eventTypeFiltersFieldset #eventTypeButton_all {
	background: #d2edc9;
	background: #cad9bf;
	}

.eventType_fakeEvent {
	display: block;
	}

/* Beginner classes are yoga, or midnfulness, or... They have their proper event type background. */
.superAccordion .accordionHeader h2.eventType_beginner,
.eventTypeFiltersFieldset label.beginner,
.eventTypeFiltersFieldset #eventTypeButton_beginner {
	background: #fff;
	}

div#sitemapDiv {
	margin-top: 24px;
	}

#sitemapDiv p.sitemapLink {
	display: inline;
	float: left;
	width: 30%;
	clear: both;
	}

#sitemapDiv p.sitemapDescription {
	display: inline;
	float: right;
	width: 68%;
	}

#sitemapDiv p.sitemapLink,
#sitemapDiv p.sitemapDescription {
	margin-top: 6px;
	}

sup,
.reg-tm	{
	font-size: 70%;
	vertical-align: top;
	bottom: 4px;
	}

p.beginnerFriendly {
	font-size: 100%;
	padding-top: 12px;
	}


span.beginnerFriendly img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 4px;
	}

.redBox span.beginnerFriendly img {
    	/* Remove the smiley from the title of cancellations and closures */
	display: none;
	}

sup.beginnerFriendly img {
	width: 10px;
	height: 10px;
	vertical-align: baseline;
	}


.danceVideo {
	margin-bottom: 6px;
	clear: both;
	}

form.paypal-buy-now {
	width: 120px;
	margin: 0 0 0 6px;
	padding: 0;
	float: right;
	clear: both;
	}

form.paypal-buy-now input {
	float: right;
	margin-top: 0;
	margin-bottom: 0;
	}

form.paypal-buy-now p {
	font-size: 11px;
	text-align: center;
	line-height: 12px;
	}

.paypal-buy-now-button {
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

#save-the-datesPage p.event-title {
	border: none;
	padding: 0;
	margin-top: 48px;
	}

#save-the-datesPage #colMiddle a {
	text-decoration: none;
	border: none;
	}

#save-the-datesPage p.event-date a:link,
#save-the-datesPage p.event-date a:visited,
#save-the-datesPage p.event-date a:hover,
#save-the-datesPage p.event-date a:active {
	color: black;
	}

.nextDate {
	font-weight: normal;
	font-size: 75%;
	padding-left: 16px;
	}

#partners-in-caringPage #colMiddleContent p img {
	margin: 14px 0 8px;
	width: 75%;
	border: 1px solid #555;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

.gotoTop {
	float: right;
	margin: 10px 0 0 12px;
	}

p.gotoTop img {
	height:16px;
	}

/*
 * Extra CSS to support the Spry Accordion panels. All that should be needed to turn off accordion support is to remove
 * the instantiation of the SpryAccordion at the end of the page source. The page should display correctly
 * (without accordions) if the SpryAccordion is not instantiated _or_ if JavaScript is disabled.
 */
.accordionPanel						{ clear: both; }
.accordionPanel .accordionHeader			{ clear: both; }
.accordionPanel .accordionHeader .event-title		{ background-color: #ddd; }
.accordionPanel .accordionPanelOpen .event-title	{ background-color: #999; }

/* 2019-05-11: Removed the dotted border below because the double dots didn't line up and it looked thick. */
.imagePanel						{ float: right; width: 135px; margin-top: 0; padding-top: 10px; border: none; /*border-top: 1px dotted #404040;*/ display: block; clear: both; }
.eventPageImage,
.imagePanel .youtube					{ float: right; max-width: 120px; width: auto; height: auto; }	/* YouTube embedded video. Not used any more. */

/* Style the "More..." and "Less..." elements so that they swap over when the panel is off and on. Default is display: none; so that they don't show up unless JavaScript and ACCORDION_ENABLE are enabled. */
.more, .less						{ color: #597d35; display: none; font-family: Verdana, Geneva, sans-serif; border-bottom: 1px dotted #526226; font-weight: bold; padding: 0;}
.more:hover, .less:hover				{ color: #597d35; background-color: #e1ecd7; }
.more.arrow, .less.arrow				{ color: #597d35; display: none; float: left; font-family: Verdana, Geneva, sans-serif; font-size: 20px; font-weight: bold; line-height: 18px; margin: 8px 4pt 0 0; padding: 0; border: none; text-shadow: 1px 3px #aaa; }


/* If the accordionEventPanel is open then hide More and show Less. If it is closed then show More and hide Less */
.accordionEventPanel.accordionPanelClosed .more,
.accordionEventPanel.accordionPanelOpen .less		{ display: inline; }
.accordionEventPanel.accordionPanelOpen .more,
.accordionEventPanel.accordionPanelClosed .less		{ display: none; }

/*
 * Set display and visibility for immediate children of .imagePanel (.imagePanel >*)
 * depending on the state (open, opening, closed, closing) of the AccordionPanel parent.
 * This controls how and when any child elements of .imagePanel get displayed during
 * open/close transitions.
 */
.accordionPanelOpening	.imagePanel > *			{ display: block; visibility: hidden; }				/* Displayable but invisible while opening */
.accordionPanelOpen	.imagePanel > *			{ display: block; visibility: visible; }			/* Displayable and visible when open */
.accordionPanelClosing	.imagePanel > *			{ display: block; visibility: hidden; }				/* Displayable but invisible when closing */
.accordionPanelClosed	.imagePanel > *			{ display: none;  visibility: hidden; }				/* Not displayable and invisible when closed */

/* All elements with an .imagePanel parent */
.imagePanel > * 					{ clear: right; float: right; padding: 0; width: 120px; }

/* Specific overrides for elements in the imagePanel */
.imagePanel p						{ text-align: center; }
.imagePanel a,
.imagePanel a:link,
.imagePanel a:visited,
.imagePanel a:hover,
.imagePanel a:active					{ text-decoration: none; border: none; background-color: transparent; }

.eventPageImage						{ margin-left: 6px; margin-bottom: 6px;}			/* Force a bit of space left and below to keep text clear */
.imagePanel form:first-of-type				{ margin-top: 6px; }						/* A bit of space above first button */
.imagePanel form:last-of-type				{ margin-bottom: 6px; }						/* A bit of space below last button */
.eventPageImage,
.imagePanel img						{ float: right; width: 120px; border: 1px solid #555; border-radius: 10px; box-shadow: 6px 6px 10px 0 #999;}
.imagePanel form input,
.imagePanel .paypalButton				{ float: right; width: 120px; border: none; box-shadow: none; border-radius: unset;}

/*
 *	Styles for when the accordionPanel is closed.
 *	Display the first img in the imagePanel at a reduced size when the accordion panel is closed.
 *	It's only eventPanels that contain the image in the header so make some rules specific to those.
 *	They could be more generic (.accordionPanel) but that might create confusion later if I add images to the group panel headers.
 *
 *	2016-08-10:	Added code to make the first image a possible link to the instructor in about-us.php. Need to make it visible too.
 *	2019-05-24:	Changed max-width and width from 80 to 120 for images on a closed panel.
 *	2019-07-04:	Make it smaller (even smaller) for the new infiniteScroll page.
 *			Later on, make this sensiitive to an infiniteScroll so that it's small only for infiniteScroll.
*/
.accordionEventPanel.accordionPanelClosed .imagePanel img:first-child
							{ display: block; visibility: visible; max-width: 120px; width: 120px; height: auto; }
/* Replace rule above if this is for the infinitescroll page. */
#accordionInfiniteScroll .accordionEventPanel.accordionPanelClosed .imagePanel img:first-child
							{ display: block; visibility: visible; max-width: 60px; width: 60px; height: auto; }
.accordionEventPanel.accordionPanelClosed .imagePanel a:first-child
							{ display: block; visibility: visible; }

/*
 * Add support for Rhonda's request that Buy Now buttons should show when the event panel is closed as well as open.
 * The lines below override the lines above and force the Buy Now forms in the imagePanel to not be shown when
 * the panel is closed and they have the buttonCountOverThreshold attribute. It needs !important to do that.
 * The PayPal forms are always visible if the panel is open.
 */
.accordionPanelClosed .imagePanel div.verticalButtons.notOverThreshold	{ display: block !important; visibility: visible !important; }
.accordionPanelClosed .imagePanel div.verticalButtons.overThreshold	{ display: none !important; }
.accordionPanelOpen   .imagePanel div.verticalButtons			{ display: block !important; visibility: visible !important; }

/*
 * Add support for the BuyNowAboveTheFold block of Buy Now buttons. This shows the Buy Now buttons in a horizontal
 * row, in the main body of the event. The intention that they show here and not in the imagePanel when there's
 * more than a certain number of them. The individual Buy Now forms are given a class asstribute:
 *
 *	notOverThreshold	The number of buttons does not exceed the display number threshold.
 *				They shoulnd't display. Neither should the <div>.
 *	overThreshold		The number of buttons does exceed the display number threshold so
 *				they should display in the <div>
 *
 * If the panel is open then don't display the <div> because the imagePanel is showing the Buy Now buttons.
 * If the panel is closed and there are more than threshold buttons then display them; if less then don't because
 * the imagePanel is displaying them.
 */
div.horizontalButtons form						{ float: left; clear: none; margin: 0 6px; }
div.horizontalButtons form p						{ text-align: center; width: 120px; }
.accordionPanelClosed div.horizontalButtons.notOverThreshold		{ display: none !important; visibility: visible !important; }
.accordionPanelClosed div.horizontalButtons.overThreshold		{ display: block !important; margin-top: 12px; }
.accordionPanelOpen   div.horizontalButtons				{ display: none !important; visibility: visible !important; }
div.horizontalButtons + p, div.horizontalButtons + div			{ clear: left; }

/* Set the more, less, clickTarget and toggle classed elements to have a pointer cursor. */
.less,
.more,
.toggle,
.clickTarget						{ cursor: pointer; }

/* Specials for mindfulness-for-school-students page */
#mindfulness-for-school-students h2 {
	font-size: 16px;
	font-weight: bold;
	color: #526226;
	margin: 16px 0 8px 0;
	}
#mindfulness-for-school-students img.youtubevideo,
#mindfulness-for-school-students iframe.youtubevideo {
	/* Width x height in ratio 560 x 315 */
	margin: 20px 0 0 40px;
	width: 300px;
	height: 168px;
	border: 1px solid #555;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}
#mindfulness-for-school-students p.youtubevideo {
	margin: 20px 0 0 40px;
	width: 300px;
	text-align: center;
	font-family: Verdana,Geneva,sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #526226;
	}
#mindfulness-for-school-students a.youtubevideo {
	border: none;
	}


/* Event filters CSS */
#eventFiltersForm {
	margin-top: 12px;
	}

#eventFiltersForm fieldset {
	font-family: Verdana, Geneva, sans-serif;
	border: none;
	margin: 0;
	padding: 12px 6px;
	}

#scheduleBPage fieldset {
	border: none;
	}

.optionsDiv {
	justify-content: space-around;
	}

#schedulePage .eventTypeFiltersFieldset .optionsDiv {
	/* Div that applies flex layout to contained elements */
	display: flex;
	}

.optionsDiv button {
	font-size: 14px;
	padding: 4px 8px;
	margin: 2px 12px 4px 0;
	line-height: 24px;
	cursor: pointer;
	background: white;
	border: 1px solid #555;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

.optionsDiv button:last-child {
	/* Last button needs a zero right margin. */
	margin-right: 0;
	}

#eventFiltersForm label.disabled {
	color: rgb(128, 128, 128);
	}

#eventFiltersForm input:disabled[type="checkbox"] {
	/* According to Chrome DevTools this rule gets applied to the checkbox when it's disabled but it doesn't show up */
	color: rgb(128, 128, 128);
	color: blueviolet;
	}

#eventFiltersForm input[type="checkbox"] {
	margin-right: 6px;
	vertical-align: middle;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

/* Type filters */
.eventTypeFiltersFieldset input[type="checkbox"] {
	margin-left: 0;
	}

.eventTypeFiltersFieldset label {
	width: auto;
	float: left;
	text-align: left;
	margin-right: 6px
	}

.eventTypeFiltersFieldset label,
.eventTypeFiltersFieldset input[type="checkbox"] {
	display: inline-flex;
	}

.eventTypeFiltersFieldset button img,
.eventTimeOfDayFiltersFieldset button img {
	/* 2019-09-23: Not used now for eventTimeOfDayFiltersFieldset as replaced by Font Awesome */
	padding: 0 6px 0 0;
	margin: 0;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	}
.eventTimeOfDayFiltersFieldset button i {
	/* 2019-09-23: Replaces img above for for eventTimeOfDayFiltersFieldset */
	font-size: 150%;
	vertical-align: middle;
	}

/* More filters. Includes Day filters. */
#moreFiltersFieldset p.fieldsetPara label:first-child {
	/* Day of week row label */
	width: 100px;
	margin-right: 10px;
	margin-left: 24px;
	}
#moreFiltersFieldset p label ~ label {
	width: auto;
	margin: 0 16px 0 0;
	}

/* The event filter form buttons */
.eventFormButtons {
	padding-bottom: 12px;
	}

/* The SuperAccordion on the Schedule page */
.superAccordion .accordionBody {
	overflow: hidden;
	display: none;
/*	display: inline;	/* Temporarily set them all visible on start up for debugging porpoises. */
	}
.superAccordion .accordionGroupPanel > .accordionHeader {
	padding-top: 24px;
	}
.superAccordion .accordionHeader h2 {
	border: 1px solid #555;
	padding: 4px 6px;
	border-radius: 10px;
	box-shadow: 6px 6px 10px 0 #999;
	}

.superAccordion .accordionPanelClosed .more,
.superAccordion .accordionPanelOpen .less {
	display: inline;
	}

.superAccordion .accordionPanelOpen .more,
.superAccordion .accordionPanelClosed .less {
	display: none;
	}

.superAccordion .moreArrow,
.superAccordion .lessArrow {
	font-size: 150%;
	border: none;
	margin-right: 6px;
	float: right;
	}

.eventTypeCheckbox,
.eventTimeOfDayCheckbox,
.eventFilterCheckbox {
	/* The check boxes for the event type  and the time of day butons */
	font-size: 24px;
	margin-right: 6px;
	vertical-align: middle;
	}