/* Responsive Web Design Main CSS */
/* JW 20200820	Initial Design 
	JW 20200830	Added container id image handing and History Detail Page items.
	JW 20200906	Adjusted the Diary page dd and dt tags so that Firefox displays dates like 10th-19th correctly. Otherwise,
							unlike Safari and Chrome, it does not break the line on a hyphen resulting in such dates overprinting the event text.
	JW 20200911	Amended quoted_message class to keep photo in dotted border and 
							news_archive_photo_link text placement to be below when portrait thumbnail.
	JW 20200924	Added styles for Village News Page and history_image_panel class and history_detail_image in History Detail Page.
							Added flex columns to History Detail Page.
							Also removed the .links_panel class as the text is now placed at the bottom of the section not at the side.
	JW 20200926	Added centre_text class.
	JW 20201008	Added noticeboard id to allow posters to be seen side by side if enough space.
	JW 20201027	Added "clear: both;" to quoted_message class to stop elements overlapping.
	JW 20201106	Added .council_list_item li code to help tidy up the Council Agenda and Minute listings
	JW 20201213	Tweaked .waste_collection_dates caption margin.
	JW 20201222	Added xmas_greetings class
	JW 20210202	Tweaked rainfall items to split pages for millimetres and inches readings and for better presentation
	JW 20210324	Added news_detail_photo_left style and re-instated some Queen's Jubilee page styling bits from main.css
	JW 20220502	Added mi section code for Memorial Inscription pages 
							Added .history_page_nav_list and top level h3 attributes for modified History page associated with the mi additions
							Moved wi section code from Activities section to History section as Pillaton WI is history
	JW 20220605	Changed the colour scheme to try and give it a bit more zing! Greyish textured background with light grey outer margin,
							orange headers, double blue-grey borders to sections. Some index-files icons needed tweaking.
	JW 20220618	Added mi_index class items,
	JW 20220719	Added special icon for the Council Clerk "mailto" link.
	JW 20230131	Changed the dotted border for Village News calendar to solid as it was displaying a mix of solid and dotted at times
							depending on screen resolution.
	JW 20240810	Amended the Waste Collection table structure to reflect the collection arrangements introduced in 2024

*/

/*************************
      Initial Tag Values     
**************************/

/* Default font sizes set below to give approximately reasonable sizing for different viewport widths */
/* 		font-size: calc(16px + (24 - 16) * (100vw - 600px) / (2400 - 600));                                       */
/* 		16px = standard browser font size (=1 em or 1rem) 																*/
/* 		24 (px) = largest font size wanted, 16(px) = standard browser font size									*/
/* 		100vw = viewport size 																												*/
/* 		600px = width when font size should start to get larger															*/
/* 		2400 (px) = maximum screen width for font size increase														*/
/* 		600 (px) = minimum screen width for font size increase															*/


html {
	font-size: 1rem;
	background-color: #e8e8e8;  /* light grey */
	}
	
/* 50em = 800px */
/* 35em = 560px */
 @media screen and (min-width: 35em) {
	html { 
		font-size: calc(16px + (24 - 16) * (100vw - 600px) / (2400 - 600));
	}
}

body {
	font-family: Helvetica, Verdana, sans-serif; 
	margin: auto; 
	color: #000;
	background: url(https://www.pillaton.org.uk/index_files/texture_7.jpg);
	max-width: 1300px;
	border: 3px solid #000;
	}

h1 {
	color: #ff581c; /* orange */
	text-align: center;
	padding-top: 0.5em;
	}

h2 {
	color: #ff581c; /* orange */
	margin: 1em 0;
	}		
	
h3 {
	clear: both;
	color: #ff581c; /* orange */
	padding-top: 0.5em;
	}

a, button, dd, dt, li, p, td, th {
	line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif; 
	}

a:link  {
	color:#009cc9;
	}
	
	a:visited {
		color: #6c8cac;
	}

	a:hover {
		color:#0160a0;
	}

blockquote {
	background: url(https://www.pillaton.org.uk/index_files/open-quotes-2.gif) no-repeat left top;
	margin: 1em 0 0 0;
	padding: 0 0 0 3em;
	}

img	{
	max-width: 100%;
	}

/*************************
*    Text style changes    *
**************************/

.emphatic {
	font-size: 110%;
	font-weight: bold;
	font-style: italic;
	padding: 5px;
	}

.italic {
	font-style: italic;
	}

.strike_through {
	text-decoration: line-through;
	}

.author {
	font-style: italic;  
	}

.quote {
	font-style: italic;
	background: url(https://www.pillaton.org.uk/index_files/close-quotes-2.gif) no-repeat right bottom;
	margin: 0 2em 0 0;
	padding: 0 0 1em 0;
	}

.quoted_message {
	clear: both; 
	font-style: italic;
	margin: 0.25em;
	padding: 1em;
	background-color: #e8e8e8;  /* light grey */
	border: 1px solid #607087;	/* blue grey*/
	}

	.quoted_message img {
		float: left;
		padding: 1.5em 1em 0 0;
		}

.centre_text {
	text-align: center;
	}
	
/*************************
     Special Link Icons     
**************************/

a[href$='.pdf'] {
	background-image: url(index_files/pdficon_small.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding: 2px 20px 2px 2px;
	}
	
a[href^='http'] {
	background-image: url(index_files/ext_link.gif);
	background-repeat: no-repeat;
	background-position: right center;
	padding: 0 14px 0 0;
	margin: 0 2px 0 0;
	}

a[href^='mailto'] {
	background-image: url(https://www.pillaton.org.uk/index_files/envelope_black_on_clear.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding: 2px 30px 2px 2px;
	}

/*************************
     Header and . . .    
**************************/

#header {
	position: relative;
  	width: 100%;
  	max-width: 1300px;

	}
	
#logo_space {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width:17%;
	}
	
.header_image {
	width: 100%; 
	height: auto;
	border-bottom: 3px solid #000;
	}

#header img {
  width: 100%;
  height: auto;
}


/*************************
    . . . Navigation Menu    
**************************/

/*************************
   CSS Menu Toggle   
   adapted from: 
   https://codeburst.io/how-to-make-a-collapsible-menu-using-only-css-a1cd805b1390;
**************************/

.menu_content {
	position: relative;
	width: 6em;
}

.collapsible_menu {
	position: absolute;
	top: 0.6em;
	right: 1em;
	color: #fff;
    background-color: #000;
    width: 6em;
}

.collapsible_menu ul {
    list-style-type: none;
    padding: 0;
}

.collapsible_menu a {
    display:block;
    color: #fff;
    text-decoration: none;
    padding: 0 0 0 0.5em;
}

	.collapsible_menu a.active {
		color: #999999; /* grey */
		}

.collapsible_menu label {
    display: block;
    cursor: pointer;
	background: url(index_files/menu_white.gif) no-repeat left center; 
    padding: 0.35em 2em;
}

input#menu {
    display: none;
}

.menu_content {
    max-height: 0;
    overflow: hidden;
    width: 6em;
}

/* Toggle Effect */
input:checked ~ label {
	background-image: url(https://www.pillaton.org.uk/index_files/close_white.gif); 
}

input:checked ~ .menu_content {
    max-height: 100%;
}

/*************************
      Container     
**************************/	

#container {
	width: 1200px;
	max-width: 100%;
	margin-top: 0.5em;
	}
	
#container h2 {
	margin-top: 1em;
	}
	
.container_image {
	font-style: italic;
	text-align: center;
	margin-top: 1em;
	}

		.container_image img {
			display: block;
			margin: auto;
			border: 1px solid #000;
			border-radius: 0.25em; 
		}

@media screen and (max-width: 649px) {		
	#container {
		margin: auto;
		max-width: 98%; 
		}

	#container h1 {
		font-size: 1.75rem;
		margin: 0;
		}
		
	#container h2 {
		font-size: 1.25rem;
		border-bottom: 0px;
		}
}

@media screen and (min-width: 650px) {
	#container {
		max-width: 92%;
		margin: 0 auto;
		}
	}

@media screen and (min-width: 1200px) {
	#container {
		max-width: 80%;
		margin: 0 auto;
		}
	}


/*************************
Queen's Jubilee (2012) Bits
**************************/

th.tve_time {
	width: 15%;
	}

th.tve_venue {
	width: 20%;
	}

th.tve_event {
	width: 60%;
	}

.sponsor_logo {
	vertical-align: top;
	text-align: center;
	margin: 10px auto;
	padding: 0;
	}

	.sponsor_logo a[href^='http://'] {
		background: url(index_files/null.gif);
		}


/*************************
     Warning Splash 
**************************/
	
.warning_splash {
	line-height: 1.5em;
	text-align: center;
	margin: 1em;
	padding: 0.2em;
	border: 1px solid #ff0000; /* red */
	color: #ff0000; /* red */
	background: #ffffff; /* white */
	}

	.warning_splash h1, .warning_splash h2, .warning_splash h3, .warning_splash h4 {
	color: #ff0000; /* red */
	line-height: 1.5em;
	background: #ffffff; /* white */
	border: none;
	}

/*************************
     Xmas Greetings 
**************************/

.xmas_greetings {
	text-align: center;
	}

/*************************
      Index Page     
**************************/

#index_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.index_article {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 0 1em 1em 1em;
	border: double #607087;	/* blue grey*/
	}

.index_map {
	width: 250px;
	margin: 0 auto;
	border: 1px solid #000;
	}
	
		.index_map img {
			vertical-align: middle; /* Fixes gap at bottom of image problem in strict HTML5  */
			max-width: 100%;
			margin: 0;
		}

#welcome_links {
	list-style: none;
	}
		
/*************************
      News Page     
**************************/

#news_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.news_article {
	flex: 1 1 20em;
	margin: 0.5em;
	padding: 1em;
	border: double #607087;	/* blue grey*/

	}

.news_article_photo {
	float: left;
	margin: 0.3em 1em 1em 0;
	border: 1px solid #000;
	}
	
		.news_article_photo img {
			vertical-align: middle; 
			max-width: 100%;
			margin: 0;
		}

.news_article_date {
	float: right;
	font-style: italic;
	font-size: 0.75rem;
	margin-top: 1.5em;
	}

.news_archives {
	margin: 0 1em 3em 0;
	}
	
.news_archives_links {
	float: right;	
	}

/*************************
      News Detail Page     
**************************/

.news_detail_text {
	margin: 1em 0 2em 0;
	padding: 1em;
	border: double #607087;	/* blue grey*/
	}

.news_detail_photo {
	margin: 2em 0;
	padding-top: 1em;
	}

		.news_detail_photo p {
			font-style: italic;
			font-size: 0.75rem;
			text-align:center;
			margin: 2em;
		}
	
		.news_detail_photo img {
			display: block;
			vertical-align: middle; 
			max-width: 100%;
			margin: 1em auto;
			border: 1px solid #000;	
		}

.news_detail_photo_left {
	float: left;
	margin: 0.5em 1em 0.5em 0;
	border: 1px solid #000;
	}
	
		.news_detail_photo_left img {
			vertical-align: middle; 
			max-width: 100%;
			margin: 0;
		}


/*************************
 News Archives Link List     
**************************/

.news_archives_intro {
	margin: 0.5em;
	padding: 1em;
	border: double #607087;	/* blue grey*/
	}

#news_archives_rows {
	display: flex;
	flex-wrap: wrap;
	}

.news_archives_year {
	flex: 0 1 10em; 
	vertical-align: center; 
	text-align: center;
	margin: 0.5em;
	padding: 1em;
	border: double #607087;	/* blue grey*/
	}

	.news_archives_year img {
		display: block;
		vertical-align: middle; /* Fixes gap at bottom of image problem in strict HTML5  */
		max-width: 100%;
		margin: auto;
		margin-bottom: 1em;
	}

.news_archives_photo_link {;
	margin: 1em;
	}


/*************************
      Diary Page
**************************/

.diary_intro {
	margin: 0.5em;
	padding: 1em;
	border: double #607087;	/* blue grey*/
	}

#diary_by_month {
	display: flex;
	flex-wrap: wrap;
	}

.diary_block {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 1em;
	border: double #607087;	/* blue grey*/
	}

.diary_month {
	font-size: calc(1rem + 0.4vw);
	color: #ff581c;
	margin: 0;
	}

.diary_event {
	width: 100%;
	margin: 1em 0;
}

	.diary_event dt {
		position: relative;
		left: 0;
		top: 1.5em;
		width: 5em;
		margin: 0;
	}

	.diary_event dd {
		margin: 0 0 0 4em;
		padding: 0 0 0 1em;
	}

/*************************
  Notices Page Items 
**************************/

#notice_board {
	margin: auto;
	max-width: 98%; 
	}

.noticeboard_item {
	display: inline-block;
	vertical-align: top;
	font-size: 80%;
	font-style: italic;
	text-align: center;
	margin: 5px;
	padding: 5px;
	background-color: #eeeeee;
	border: 2px solid #333333;
	}

.noticeboard_item img {
	max-width: 100%;
	}

/*************************
  Activity Page Items 
**************************/

#activity_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.activity_article {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 0 1em 1em 1em;
	border: double #607087;	/* blue grey*/
	}

.activity_article h3 {
	margin-top: 2em;
	}

.activity_article_photo {
	float: left;
	margin: 0.3em 1em 1em 0;
	border: 1px solid #000;
	}
	
		.activity_article_photo img {
			vertical-align: middle; /* Fixes gap at bottom of image problem in strict HTML5  */
			max-width: 100%;
			margin: 0;
		}

.activity_page_nav_list {
	list-style: none;
	margin-left: -1.5em;
	}

.activity_page_link_list {
	list-style: none;
	margin-left: -1.5em;
	}


/*************************
  Amenity Page Items 
**************************/

#amenity_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.amenity_article {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 0 1em 1em 1em;
	border: double #607087;	/* blue grey*/
	}

.amenity_article_photo {
	float: left;
	margin: 0.3em 1em 1em 0;
	border: 1px solid #000;
	}
	
		.amenity_article_photo img {
			vertical-align: middle; /* Fixes gap at bottom of image problem in strict HTML5  */
			max-width: 100%;
			margin: 0;
		}

.amenity_page_nav_list {
	list-style: none;
	margin-left: -1.5em;
	}

.amenity_page_link_list {
	list-style: none;
	margin-left: -1.5em;
	}


.waste_collection_dates {
		table-layout: fixed;
		margin-left: 1em;
		background-color: #666;
	}

	.waste_collection_dates caption {
		font-weight: bold;
		color: #333;
		margin: 0.5em 0;
		}

	.waste_collection_dates tbody tr:nth-child(odd)  {
		background-color: #d8d8d8;  /* slightly darker than next */
		}

	.waste_collection_dates tbody tr:nth-child(even)  {
		background-color: #e8e8e8;  /* light grey */
		}

	.waste_collection_dates td {
		padding: 0 1em;
		}

/*************************
  History Page Items 
**************************/

#history_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.history_article {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 0 1em 1em 1em;
	border: double #607087;	/* blue grey*/
	}

.history_article_photo {
	float: left;
	margin: 0.3em 1em 1em 0;
	border: 1px solid #000;
	}
	
		.history_article_photo img {
			vertical-align: middle; /* Fixes gap at bottom of image problem in strict HTML5  */
			max-width: 100%;
			margin: 0;
		}

	.history_article_photo_centred img {
			display: block;
			vertical-align: middle; /* Fixes gap at bottom of image problem in strict HTML5  */
			max-width: 100%;
			margin: 0.5em auto;
			border: 1px solid #000;
		}

.history_page_nav_list {
	list-style: none;
	margin-left: -1.5em;
	}

.history_page_link_list {
	list-style: none;
	margin-left: -1.5em;
	}


.wi_report_list {
    width:100%;
	margin: 0;
	color: #333;
}

.wi_report_list h4 {
	margin: 0;
}

.wi_report_list ul {
	display: flex;
	flex-wrap: wrap;
    list-style-type: none;
    margin: 0 0 0.5em 0;
}

.wi_report_list li {
    flex: 1 1 3em; 
	margin: 0 0.25em;
}


/*************************
  History Detail Page 
**************************/

#history_detail_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.history_detail_section {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 0 1em 1em 1em;
	border: double #607087;	/* blue grey*/
	}

.pod_item  {
	font: 100% Georgia, "Times New Roman", serif;
	margin: 0.25em 0.25em 1em 0.25em; 
	padding: 1em;
	border: solid 1px #333;
	color: #333; 
	background: #e8e8e8; /* light grey */
	}
	
	.pod_item ul {
	list-style: none;
	line-height: 1.5em;
	margin-left: 0;
	padding-left: 1em;
	}
		
.history_image_panel {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-style: italic;
	text-align: center;
	margin: 0.5em;
	border: double #607087;	/* blue grey*/
	}

.history_detail_image {
	flex: 1 1 20em; 
	margin: 2em;
	}

.history_detail_photo_credit {
	display: block;
	float: right;
	margin: -2em 1em 0 0;
	font-style: italic;
	font-size: 0.75rem;
	}


/*************************
  Memorial Inscriptions 
**************************/	

.mi_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.mi {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 0 1em 1em 1em;
	border: double #607087;	/* blue grey*/
	}

.mi_links {
	text-align: center;
	font-size: 1rem;
	}
	
	.mi_links a {
		margin: 0.5em;
	}

	.mi_links a.active {
		color: #000;
		text-decoration: none;
	}
	
.mi_links_tail {
	margin: 1em 0;
	padding: 1em 0;
	}

.mi ul {
    list-style-type: none;
}
	
.mi p {
	clear: both;
	}

.mi_photo {
	float: left;
	margin: 0;
	}
	
		.mi_photo img {
			vertical-align: middle; 
			max-width: 100%;
			margin: 1em;
			border: 1px solid #000;
		}

.mi_note {
	font-style: italic;
	}


.mi_index {
	flex: 0 1 22em;
	justify-content: flex-start;
	}

.mi_index ul {
    list-style-type: none;
	margin: 0 0.5em;
	padding: 0;
}


/*************************
  Council Page Items 
**************************/

#council_items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.council_block {
	flex: 1 1 20em; 
	margin: 0.5em;
	padding: 0 1em 1em 1em;
	border: double #607087;	/* blue grey*/
	}

.councillor_list {
	list-style: none;
	}

.councillor_list li {
	line-height: 2em;
	margin-left: -1.25em;
	padding-left: 2em;
	background-image: url(index_files/stickman.gif);
	background-repeat: no-repeat;
	background-position: 0.5em 0.5em;
	}

.council_item_list {
    width:100%;
	margin: 2em 0;
	color: #333;
}

.council_item_list h3 {
	font-size: 1rem;
    color: #000;
    margin: 0;
    padding-bottom: 0.5em;
   	line-height: 1em;
}

.council_list_item {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
    margin:0;
    padding:0;
}

.council_list_item ul {
	display: flex;
	flex-wrap: wrap;
    list-style-type: none;
    margin: 0 0 0.5em 0;
}

.council_list_item li {
	flex: 0 1 7em; 
	}

.council_list_item div {
    flex: 1 1 3em; 
	margin: 0 0 0 0.5em;
}

.council_minutes_author {
	font-style: italic; 
	margin: 2em 0;
	}

/*************************
      Gallery Page      
**************************/
.gallery_intro {
	font-style: italic;
	text-align: center;
	}

.gallery_album {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	margin: 1em;
	}

	.gallery_album h2 {
		margin-bottom: 2em;
		}
	
.gallery_album_event {
	flex: 0 1 10em; 
	vertical-align: center; 
	font-style: italic;
	text-align: center;
	margin: 0.5em;
	padding: 0.5em;
	border: double #607087;	/* blue grey*/
	}

.gallery_album_photo {
	display: block;
	margin: 1em auto;
	}
	
		.gallery_album_photo img {
			max-width: 100%;
			margin: 0;
			border: 1px solid #000;
		}

/*************************
  Gallery Collection Page      
**************************/

#gallery_collection {
	margin: 1em 0 3em 0;
	padding: 1em;
	border: double #607087;	/* blue grey*/
	}

#gallery_collection  p {
	font-style: italic;
	text-align: center;	
	margin-bottom: 4em;
	}
	
.gallery_collection_image {
	font-style: italic;
	text-align: center;
	margin-top: 3em;
	}

		.gallery_collection_image img {
			display: block;
			margin: auto;
			border: 1px solid #000;
			border-radius: 0.25em; 
		}

.photo_credit {
	display: block;
	float: right;
	margin: -2em 1em 0 0;
	font-style: italic;
	font-size: 0.75rem;
	}

.photo_date {
	display: block;
	float: left;
	margin: -2em 0 0 1em;
	font-style: italic;
	font-size: 0.75rem;
	}


/*************************
     Village News Page     
**************************/

.village_news_year_list {
    width:90%;
	margin: 0;
	color: #333;
	}

.village_news_year_list h3 {
	margin: 2em 0 0 0;
	}

.village_news_year_list ul {
	display: flex;
	flex-wrap: wrap;
    list-style-type: none;
    text-align: center;
    margin: 0.5em 1em;
    padding: 1em 0;
    border: double #607087;	/* blue grey*/

	}

.village_news_year_list li {
    flex: 0 1 5em; 
	margin: 1em;
	}

.village_news_calendar {
	border: 1px solid black;
	margin: 1em 0;
	}

	.village_news_calendar th {
		padding: 2px 10px 0 10px;
		border: 1px solid black;
		text-align: center;
		}

	.village_news_calendar td {
		padding: 2px 10px 0 10px;
		border: 1px solid black;
		text-align: center;
		}

/*************************
      Rainfall    
**************************/		

.rainfall_tables {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	margin: 1em;
	}
	
.rainfall_graph {
	max-width: 100%;
	margin: 1em;
	}

	.rainfall_graph img {
		display: block;
		margin: auto;
		max-width: 100%;
		border: 1px solid #000;
		}

.rainfall_table {
	flex: 0 1 20em;
	text-align: center;
	font-size: 0.7em;
	line-height: 0.5em;
	margin: 0.5em;
	background-color: #666; 
	}

	.rainfall_table th {	
		color: #333;
		font-weight: bold;
		width: 3em;
		padding: 0.25em;
		border-bottom: 1px solid  #666; /* grey */
		}
		
	.rainfall_table caption {
		color: #333;
		font-weight: bold;
		margin: 0.75em 0;
	}

	.rainfall_table tbody tr:nth-child(odd)  {
		background-color: #ccffff;
		}

	.rainfall_table tbody tr:nth-child(even)  {
		background-color: #eeffff;
		}
	
.rainfall_table_total {
	font-weight: bold;
	border-top: 1px solid  #666666; /* grey */
	}


/*************************
  Footer/Tailpiece 
**************************/

#footer {  
	margin: 0;
	padding: 0.5em;
	background-color: #000;
	}
	
.contact {
	text-align: right;
	font-size: 0.75rem;
	}
				
	.contact a {
		color: #fff;
		background: url(https://www.pillaton.org.uk/index_files/envelope_white_on_black.gif) no-repeat left center;
		padding-left: 2.5em;
		}

.updated {
	font-style: italic;
	font-size: 0.75rem;
	color: #fff;
	text-align: left; 
	margin-top: -2.5em;
	}

	
/* end of CSS */