/* General */

body {margin:0; padding:0; border:0; width:100%; background:#6E8648; font-size:110%; font-family: vegurregular,arial,helvetica,sans-serif;}
h1, h2, h3, h4 {padding:0; clear:both;}
p {margin:10px 0; padding:0;}
img {margin:0; border:0;}
.clearfloats, #content .clearfloats {clear: both; margin:0;}
table { border-collapse: collapse }
ul li { margin-top: 5px }

@media (max-width: 500px)
{
  ul { padding-left: 20px }
}
	
#screenTooSmallMessage {display:none;}

h1 { text-align: center; margin-top: 0 }
@media (max-width: 500px)
{
  h1 
  { 
    font-size: 150%;
    margin: 10px 0;
  }
}

/* Header */
div.wholepage
{
  width: 95%;
  max-width: 1200px;
  min-width: 800px;
  margin: 20px auto;
}

@media (max-width: 800px)
{
  div.wholepage 
  { 
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

header 
{
  display: flex; 
  gap: 50px;
  background-color:#5185bf; 
  height:250px; 
  justify-content: space-between;
  align-items: center;
}

header p { margin: 0 }

div.headerLeft
{
  flex-basis: 400px;
  flex-shrink: 1;
  font-size: clamp(150%, 4vw, 250%);
  font-weight: bold;
  padding: 20px;
  text-align: right;
}
div.headerLeft p.headerWelcome { font-weight: normal; font-size: 80% }

div.headerMiddle 
{ 
  flex-basis: 300px; 
  flex-shrink: 0;
  font-size:110%;
  font-weight:normal;
  font-style: italic; 
  color:#fbf2b9;
  text-align: left;
}

div.headerRight img { height: 250px }

div.headerTag1, div.headerTag2, div.headerTag3
{
  display: inline-block;
  text-align: center;
  height: 50px;
  width: 80px;
  padding-top: 25px;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center;
}

div.headerTag1 
{ 
  background-image: url(/images/bookOutline.png);
}
div.headerTag2 
{ 
  background-image: url(/images/heartOutline.png); 
  padding-top: 20px;
  height: 55px;
}
div.headerTag3 
{ 
  background-image: url(/images/arrowOutline.png);
  padding-right: 10px;
}

div.headerRight { flex-basis: 200px; flex-shrink: 1 }
div.headerRight img {height:250px; margin:0; padding: 0;}

@media (max-width: 1160px)
{
  header { height: 200px }
  div.headerMiddle { flex-basis: 100px; }
  div.headerTag1, div.headerTag2, div.headerTag3
  {
    display: block;
    background-size: 80%;
    height: 45px;
    font-size: 90%;
  }
  div.headerTag2 { padding-top: 10px; }
  div.headerRight img {height:200px; margin:0; padding: 0;}
}


@media (max-width: 800px)
{
  header { height: 200px }
  div.headerMiddle { display: none; }
  div.headerRight img {height:200px;}
}

@media (max-width: 600px)
{
  header {height: 150px;}
  div.headerRight img {height:150px;}
}

@media (max-width: 500px)
{
  header { height: 100px }
  div.headerRight { display: none }
  div.headerLeft 
  { 
    flex-basis: 100%; 
    text-align: center;
    padding: 0;
  }
}


/****** navigation menus ****/

/***** smallscreen vs bigscreen  ****/

div.bigscreenmenu { display: block }
div.smallscreenmenu { display: none }
a.navmenuicon { display: none }

@media (max-width: 700px)
{
  div.bigscreenmenu { display: none }
  div.smallscreenmenu  { display: grid; grid-template-columns: 1fr; }
  div.smallscreenmenu.volunteer { grid-template-columns: 1fr 1fr; }
  div.smallscreenmenu.admin { grid-template-columns: 1fr 1fr 1fr; }
  a.navmenuicon 
  { 
    display: inline;
    position: absolute;
    top: 10px;
    left: 10px;
    text-decoration: none;
    color: white;
    font-size: 90%;
  }
}


/* the three nav menu lines */
div.bigscreenmenu nav.public, 
div.bigscreenmenu nav.volunteer, 
div.bigscreenmenu nav.admin
{
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  background: #fbf2b9;
}

div.smallscreenmenu nav.public, 
div.smallscreenmenu nav.volunteer, 
div.smallscreenmenu nav.admin
{
  display: flex;
  flex-direction: column;
  background: #fbf2b9;
}


nav a
{
  flex-basis: 100px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:arial,helvetica,sans-serif;
  padding: 10px 1px;
  line-height: 1.1; 
  min-height: 40px;
  text-align:center;
  margin: 1px;
  text-decoration: none;
}

nav a div.label
{
  color:#fbf2b9; 
  font-size: clamp(90%, 2.2vw, 115%); 
  text-decoration: none; 
}

div.smallscreenmenu nav a 
{ 
  font-size: 100%; padding: 5px 0;
  min-height: 30px;
  flex-basis: 0;
}




/* menu buttons */
nav.public a.b1 {background-color:#023C0C; }
nav.public a.b2 {background-color:#e56292; }
nav.public a.b3 {background-color: #787570; }
nav.public a.b4 {background-color: #5626a7; }
nav.public a.b5 {background-color: #fb8800; }
nav.public a.b6 {background-color: #ec001d; }

nav.volunteer a.b1 {background-color: #567b24; }
nav.volunteer a.b2 {background-color: #b31e54; }
nav.volunteer a.b3 {background-color: #278f9f; }
nav.volunteer a.b4 {background-color: #2b1354; }
nav.volunteer a.b5 {background-color: #b76300; }
nav.volunteer a.b6 {background-color: #a73313; }
nav.volunteer a.b7 {background-color: #970013; }
nav.volunteer a.b8 {background-color: #901e80; }

nav.admin a.b1 {background-color: #1f2c0d; }
nav.admin a.b2 {background-color: #5b0f2b; }
nav.admin a.b3 {background-color: #17525b; }
nav.admin a.b4 {background-color: #160a2a }
nav.admin a.b5 {background-color: #733e00; }
nav.admin a.b6 {background-color: #53000a; }

nav.public a:hover, nav.volunteer a:hover, nav.admin a:hover
{ background-color: /* #5e9fe1*/ #6bf; color:#000; text-decoration: none}
nav.public a:hover div.label, nav.volunteer a:hover div.label, 
nav.admin a:hover div.label
{
  color: black;
}

/**** form buttons ******/

form.inlinebutton { display: inline-block; margin: 0 10px }
form.delbutton input[type=submit] 
{ background: linear-gradient(white, #f66)}
form.delbutton input[type=submit]:hover
{ background: linear-gradient(#fee, #f00)}

form.spacedbutton { margin: 10px 0; }

form.datarec_form input[type=submit],
form.editbutton input[type=submit]
{ background: linear-gradient(white, #3e3); }
form.datarec_form input[type=submit]:hover,
form.editbutton input[type=submit]:hover
{ background: linear-gradient(#dfd, #0c0); }



/* test mode banner under menu */
.testmodebanner 
{
  background: red; color:white; margin: 0; text-align: center; 
  font-weight: bold; padding: 5px;
  clear: both;
}

/* debug info */
table.reqvars tr td
{
  border: 1px solid #ccc;
  font-family: monospace;
  font-size: 90%;
  color: black;
  background: white;
  vertical-align: top;
  padding: 2px 5px;
}

/* MOBILE ICON OPTIONS */
.mobileIcons {display:none;}
/* MOBILE MENU FOR JAVASCRIPT ENABLED DEVICES */
#mobileMenuWrapperJS-nav {display:none; padding:0; position:relative; }
#mobileMenuWrapperJS-nav ul{font-size:130%; font-weight:normal; text-align:center; list-style-type:none; padding:0; margin:0;}
#mobileMenuWrapperJS-nav ul li {padding:0; }
#mobileMenuWrapperJS-nav ul li a, #mobileMenuWrapperJS-nav ul li a:link, #mobileMenuWrapperJS-nav ul li a:visited  {display:block; padding:2% 0; color:#fbf2b9; text-decoration:none; }
#mobileMenuWrapperJS-nav ul li a:active, #mobileMenuWrapperJS-nav ul li a:hover {background: #83a8d1; text-decoration:underline; color:#000; padding:2% 0;}



#mobileMenuWrapperJS-phone {display:none; background-color:#d4e5a5; padding:3% 0; border-bottom:5px #fff solid; position:relative; }
#mobileMenuWrapperJS-phone h2{color:#38348b; font-size:140%; font-weight:bold; text-align:center; padding:1% 5%; }
#mobileMenuWrapperJS-phone p{color:#38348b; font-size:120%; font-weight:bold; text-align:center; padding:1% 5%; }
#mobileMenuWrapperJS-phone p a, #mobileMenuWrapperJS-phone p a:link, #mobileMenuWrapperJS-phone p a:visited{color:#ee3d97; text-decoration:none; font-weight:bold; }
#mobileMenuWrapperJS-phone p a:hover, #mobileMenuWrapperJS-phone p a:active{color:#38348b; text-decoration:underline; font-weight:bold; }

#mobileMenuWrapperJS-nav img.mobileMenuClose{position:absolute; top:2%; right:1%; cursor: pointer; cursor: hand; }
#mobileMenuWrapperJS-phone img.mobileMenuClose {position:absolute; top:6%; right:1.666666666666%/* 10/600 */; cursor: pointer; cursor: hand; }

/* MOBILE MENU FOR JAVASCRIPT DISABLED DEVICES */
#mobileMenuWrapperNoJS-nav {background-color:#d4e5a5; padding:3% 0; border-bottom:5px #fff solid; position:relative; }
#mobileMenuWrapperNoJS-nav p{font-size:120%; font-weight:bold; text-align:center; padding:1% 5%; }
#mobileMenuWrapperNoJS-nav p a, #mobileMenuWrapperJS-nav p a:link, #mobileMenuWrapperJS-nav p a:visited  {color:#38348b; text-decoration:none; }
#mobileMenuWrapperNoJS-nav p a:active, #mobileMenuWrapperJS-nav p a:hover {color:#ee3d97; text-decoration:underline; }

#mobileMenuWrapperNoJS-phone {background-color:#d4e5a5; padding:3% 0; border-bottom:5px #fff solid; position:relative; }
#mobileMenuWrapperNoJS-phone h2{color:#38348b; font-size:140%; font-weight:bold; text-align:center; padding:1% 5%; }
#mobileMenuWrapperNoJS-phone p{color:#38348b; font-size:120%; font-weight:bold; text-align:center; padding:1% 5%; }
#mobileMenuWrapperNoJS-phone p a, #mobileMenuWrapperJS-phone p a:link, #mobileMenuWrapperJS-phone p a:visited{color:#ee3d97; text-decoration:none; font-weight:bold; }
#mobileMenuWrapperNoJS-phone p a:hover, #mobileMenuWrapperJS-phone p a:active{color:#38348b; text-decoration:underline; font-weight:bold; }

#mobileMenuWrapperNoJS-nav img.mobileMenuArrow{position:absolute; top:4%; right:1.666666666666%/* 10/600 */; cursor: pointer; cursor: hand; }
#mobileMenuWrapperNoJS-phone img.mobileMenuArrow {position:absolute; top:6%; right:1.666666666666%/* 10/600 */; cursor: pointer; cursor: hand; }


/****** text and columns on content pages ******/

/* single column text: limit width for readability */
div.text 
{ 
  width: 95%;
  max-width: 700px;
  margin: 0 auto;
}

/* two columns where width allows */

div.twocolumns
{
  display: flex;
  gap: 40px;
  justify-content: space-between;
  width: 95%;
  margin: auto;
}

@media (max-width: 700px)
{
  div.twocolumns { display: block; }
}

div.col1, div.col2
{ 
  flex-basis: 50%;
  flex-shrink: 1;
}

/* Footer */

footer {background-color:#7ad; margin:0 auto;text-align:center; }
footer p a, footer p a:link, footer p a:visited {color:#000; text-decoration:underline;}
footer p a:hover, footer p a:active { color:#fbf2b9; text-decoration:none;}
.footerText-link {font-size:120%;}
.footerText-title {font-size:130%; font-weight:bold;}
.footerText-address {font-size:110%; margin-top:10px;}
.footerText-phone {font-size:120%; margin-top:10px;}
.footerText-email {font-size:110%;}
.footerText-copyright {font-size:80%; margin-top:20px; font-weight:bold;}

div.treewind-link 
{
  background: #7ad;
  text-align: center; 
  font-size: 80%;
  padding: 5px 2px;
}

/* Content */
main  
{
  background-color:#fbf2b9; 
  padding: 40px 2%; 
  margin:0 auto;
  line-height: 1.3;
} 
@media ( max-width: 500px )
{
  main { padding: 10px 1% }
}
#content{clear:both; padding:40px 100px;overflow:hidden;} 
#content h1 {text-align:center; margin:0 0 20px 0; font-size:240%;}
#content h2 {text-align:left; margin:20px 0; font-size:180%;}
#content h3 {text-align:left; margin:15px 0;font-size:140%;}
#content h4 {text-align:left; margin:10px 0;font-size:120%;}
#content a, #content a:link, #content a:visited{font-weight:normal; color:#000; text-decoration:underline;}
#content a:hover, #content a:active {color:#5185bf; text-decoration:none; font-weight:normal;}
#content p {text-align:left; margin:15px 0;}
#content p.center {text-align:center;}
#content ul {text-align:left; padding: 0 150px;}
#content li {padding: 2px 5px;}
#content h2.mapContent {font-size:150%;}
#content p.mapContent {font-size:120%;}
#content p.mapContent a, #content p.mapContent a:link, #content p.mapContent a:visited{font-weight:bold;color:#000; text-decoration:underline;}
#content p.mapContent a:hover, #content p.mapContent a:active {color:#5185bf; text-decoration:none;font-weight:normal;}
#map {height: 400px; width: 100%;}

#content #contentColumn1 {width:47%; float:left; }
#content #contentColumn2 {width:47%; float:right; }

#content #contentColumn1 h3, #content #contentColumn2 h3 {text-align:center;}
#content #contentColumn1 ul, #content #contentColumn2 ul {padding: 0 50px;}

/* Home page */
ul.openingtimes li span.today { background: #fdb; }
iframe.googlemap { display: block; width: 100%; height: 300px}

/* CALENDAR  - PAGE BODY */
#pageBodyCalendar {width:100%; color:grey;}
#pageBodyCalendarForm {text-align:center; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; font-size:100%;}
#pageBodyCalendarForm form {font-size:90%;}		
form.dutyForm, form.dutyForm h3 {text-align:center;}
form.dutyForm h3 {margin:0 0 .8em 0;}
form.dutyForm fieldset{margin: 0 auto 15px; text-align: center; width: 80%;}
#pageBodyCalendar .previousMonthLink {float:left; margin-top:10px; margin-bottom:10px; width:100px; text-align:left;}
#pageBodyCalendar .nextMonthLink {float:right; margin-top:10px; margin-bottom:10px; width:100px; text-align:right;}
	
#pageBodyCalendar .previousMonthLink a, #pageBodyCalendar .previousMonthLink a:link, #pageBodyCalendar .previousMonthLink a:visited,
#pageBodyCalendar .nextMonthLink a, #pageBodyCalendar .nextMonthLink a:link, #pageBodyCalendar .nextMonthLink a:visited
{text-decoration:underline; color:#50496B;}
	
#pageBodyCalendar .previousMonthLink a:hover, #pageBodyCalendar .previousMonthLink a:active,
#pageBodyCalendar .nextMonthLink a:hover, #pageBodyCalendar .nextMonthLink a:active
{text-decoration: none; color:#CAD2D5;}	
	
#pageBodyCalendar ul {width:92%; margin:0 auto; padding:0; display: block; overflow: hidden; border-bottom: 1px solid #50496B;}		
#pageBodyCalendar ul li {margin:0; width:/*68px*/14.13%; border-top:1px solid #50496B; padding:0; border-left:1px solid #50496B; list-style:none; position: relative; display:block; float:left;}
		
.dutyBlank {color:#fff; font-variant: small-caps;background-color:red;font-weight:bold;}

form.dutyForm input[type=text]:placeholder-shown
{
  color:#fff; 
  font-variant: small-caps;
  background-color:red;
  font-weight:bold;
}

form.dutyForm div.duty_input
{
  display: inline-block;
  width: max-content;
  margin: 10px 20px 0 0;
}

form.dutyForm input::placeholder { opacity: 1 }
		
#pageBodyCalendar ul li.previousMonth, #pageBodyCalendar ul li.currentMonth, #pageBodyCalendar ul li.nextMonth {float: left; margin-bottom: -99999px; padding-bottom: 99999px;}  
#pageBodyCalendar ul.calendar > li:nth-child(7n+1) {clear: both;}
#pageBodyCalendar .count7, #pageBodyCalendar .count14, #pageBodyCalendar .count21, #pageBodyCalendar .count28, #pageBodyCalendar .count35, #pageBodyCalendar .count42 {border-right:1px solid #50496B;}
		
#pageBodyCalendar ul li.title {background:#FCF5EB; border-top:1px solid #50496B; color:#50496B; font-weight:bold; height:20px; min-height:20px; font-size:100%; text-align:center;}


		#pageBodyCalendar ul li.currentMonth span, #pageBodyCalendar ul li.previousMonth span, #pageBodyCalendar ul li.nextMonth span {
			display:block;
			}

		#pageBodyCalendar ul li.currentMonth span.dayNumberCurrent, #pageBodyCalendar ul li.previousMonth span.dayNumberPrevious, #pageBodyCalendar ul li.nextMonth span.dayNumberNext {
			text-align:center;
			}
		
		
#pageBodyCalendar span.dayNumberPrevious, #pageBodyCalendar span.dayNumberNext {
			text-decoration:none;
			display:block;
			font-style:italic;
			font-weight:normal;
			font-size:120%;
			padding:5px;
		}
		
		
#pageBodyCalendar span.dayNumberCurrent{
	font-weight:bold;
	font-size:120%;
	padding:5px;
	color:#000;
}

#pageBodyCalendar ul li.closed span.closed {
text-align:center;
padding-bottom:10px;
}

#pageBodyCalendar ul li.todayDate span.dayNumberCurrent {
color:red;
font-size:200%;
}

#pageBodyCalendar ul li.todayDate span.dayNumberCurrent a {
color:red;
}

#pageBodyCalendar span.dayNumberCurrent a, #pageBodyCalendar span.dayNumberCurrent a:link, #pageBodyCalendar span.dayNumberCurrent a:visited {
text-decoration:underline;
	color:#000;
	border:none;
}

		
#pageBodyCalendar span.dayNumberCurrent a:hover, #pageBodyCalendar span.dayNumberCurrent a:active {
	text-decoration:none;
}		
		
#pageBodyCalendar span.dutyIcon{
margin:3px 0;
padding:1px;
font-size:80%;
}

#pageBodyCalendar a {
text-decoration:none;
}

#pageBodyCalendar a span.dutyIcon, #pageBodyCalendar a:link span.dutyIcon, #pageBodyCalendar a:visited span.dutyIcon {
color:#fff;
text-decoration:none;
}

#pageBodyCalendar a:hover span.dutyIcon, #pageBodyCalendar a:active span.dutyIcon {
color:#fff;
text-decoration:underline;
}

#pageBodyCalendar span.dutyIcon.dutyEmpty {
background:red;
overflow:hidden;
}

#pageBodyCalendar span.dutyIcon.dutyFull {
	overflow:hidden;
background:green;
}

#pageBodyCalendar span.dutyIcon img.dutyMessageIcon{float:right;}
/* general forms */


.unBold {
font-weight:normal;
}

.italic {
font-style:italic;
}

#content .phpErrorText-Intro {
color:#cc0000;
font-weight:bold;
text-align:center;
}

.phpErrorText-Form {
color:red;
}


.requiredField {
color:#50496B;
font-size:120%;
font-weight:bold;
}

#formDiv fieldset {
margin:15px;
}

#formDiv .formLabel {
    float: left;
    margin-right: 10px;
    margin-top: 0;
    text-align: right;
    width: 300px;
}

#formDiv .formGroupButtons {
    margin-left: 310px; 
}

#formDiv .inputSpan {
margin-right:10px;font-style:normal;font-size:100%;
}

#formDiv input.error{  
    background: #f8dbdb;  
    border-color: #e77776;  
}  

#formDiv textarea.error{  
    background: #f8dbdb;  
    border-color: #e77776;  
}  

#formDiv div{  
    margin: 15px 0;  
 
} 

#formDiv div p{  
    margin-left: 310px; 
    font-size: 80%;  
    font-style: italic;
	margin-bottom:0;
} 



#formDiv div p.hintText {
color:#50496B;
font-style: normal;
font-weight:bold;
display:none;
}


#formDiv div p.error{  
    color: #cc0000;  
font-weight:bold;
    font-style: normal;
margin-bottom:5px;
}  

#formDiv div p.phpErrorText-Form {
color: #cc0000; 
font-weight:bold;
    font-style: normal;
margin-bottom:5px;
}

#error{  
    margin-bottom: 20px;  
    border: 1px solid #efefef;  
}  
#error ul{  
    list-style: square;  
    padding: 5px;  
    font-size: 11px;  
}  
#error ul li{  
    list-style-position: inside;  
    line-height: 1.6em;  
}  
#error ul li strong{  
    color: #e46c6d;  
}  
#error.valid ul li strong{  
    color: #93d72e;  
}  


.formDetails {
margin-top:5px;
}


.formDetailsTitle {
font-weight:bold;
float:left;
width:125px;
text-align:right;
}

.formDetailsSubmitted {
float:right;
text-align:left;
width:360px;
}

div.errorbox, div.msg
{
  background: white;
  padding: 5px;
  width: auto; 
  max-width: 600px;
  margin: 5px auto;
}

div.errormsg, div.errorbox
{ 
  border: 2px solid #c00; 
  color: #c00; 
}

div.msg, div.msgbox 
{ 
  border: 2px solid #0c0; 
  color: #090; 
}

/* login honeypot spamtrap */
div.hp_st { display: none; }


/* datarec forms */
form.datarec_form 
{ 
  background: transparent; 
  margin: 5px; 
  padding: 10px; 
}
div.form_input_pair 
{ display: grid; grid-template-columns: 1fr 3fr; margin: 10px 0;}
div.form_input_pair div.input input[type=text],
div.form_input_pair div.input input[type=password],
div.form_input_pair div.input textarea { width: 99% }


/* closures editor */
table.closuredates
{
  margin: 10px auto;
  background: white;
  border: 1px solid black;
}
table.closuredates tr td
{ border-top: 1px solid black; padding: 2px 5px; text-align: right }

form.datarec_form.closures
{
  width: 400px;
}

form.datarec_form div.error code
{
  font-style: normal;
  background: white;
  color: black;
  padding: 0 5px;
}

input.closure_button { margin-left: 10px; }
@media screen and (max-width: 400px)
{
  table.closuredates tr td { padding: 2px 1px }
  input.closure_button { margin-left: 1px; padding: 1px; }
  form.datarec.closures { width: 100% }
  form.datarec_form.closures div.form_input_pair div.label,
  form.datarec_form.closures div.form_input_pair div.input
  { display: block;  }
}

/*********/
/* Volunteer contact details */

#content h3.volName {margin:15px 0 5px 0;}
#content .volPhone, #content .volEmail {width:45%; float:left; margin:5px 0 5px 5%;}
#content .volDays, #content .volDuty {width:45%; float:left; margin:5px 0 5px 5%;}
#content .volAddress {width:95%; float:left; margin:5px 0 5px 5%;}
#content p.volunteerDetailsEnd {width:40%; margin:25px auto 0; border:1px #5185bf solid;}




/*=========PHONES, PROTRAIT MODE @ 0 - 299==========*/
@media all and (min-width: 0px) and (max-width: 299px) {
header, #main, footer, .publicMenu, .extranetMenu, .adminMenu {display:none;}
body{background-color:#FBF2B9;}
#screenTooSmallMessage {display:block;}
#screenTooSmallMessage h1 {font-size:169%; text-align:center;}
#screenTooSmallMessage p {font-size:120%; text-align:center; padding:2% 4%;}
}