@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of reset code */

/* 
Default CSS which applies if no media queries match
Note that this example is Mobile First 
i.e. assume it is a mobile device unless a larger screen is detected 
*/

/* 
This box-sizing model includes border and padding in the overall width
which makes it easier to achieve responsive layouts
*/
*, *::before, *::after {
	box-sizing: border-box;
}

/* Class that can be used to force a newline by clearing floats (left & right)*/
.newline{
	clear:both;
}

html {
	min-height: 100%;
	padding: 0;
}


body {
	color: #435757;
	background-color:#ffffff;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1 em;
	padding: 0;
}

h1 {
	font-size: 2em;
	font-weight: bold;
	color: #27597D;  
}


h2 {
	font-size: 1.6em;
	font-style: normal;
	margin-bottom:1em;
	margin-left:1em;
}

p {
	line-height:125%;
	margin-left:1em;
	margin-right:1em;
}

/*Standard link anchors (normal colour coding)*/
a:link
{
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: small;
	color: blue;
	background-color: transparent;
}

a:visited
{
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: small;
	color: red;
	background-color: transparent;
}

a:hover
{
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: small;
	color: fuchsia;
	background-color: transparent;
}


main {
	max-width: 500px;
	margin: 0 auto; }

article {
	margin-top: 0.5rem;
	margin-right: 0.25rem;
	margin-bottom: 0.5rem;
	margin-left:0.25rem;
	border: 0px solid black;
	font-size:0.9em
  }
  
article.news{
	clear:both;
	border-top: 1px solid #ff0000;
}

article.news h1{
	text-align:left;
	padding-top:0.5rem;	
	margin-left:1rem;
	margin-right:1rem;
} 

article.news h2{
	text-align:left;
	padding-top:0.5rem;	
	margin-left:1rem;
	margin-right:1rem;
	margin-bottom:.5em;
	font-size:1.0em;
	font-weight:bold;
}

article.news h3{
	text-align:left;
	padding-top:0.5rem;	
	margin-left:1rem;
	margin-right:1rem;
	margin-bottom:0.5em;
	font-size:0.9rem;
	font-weight:bold;
} 


article.news img{
	width:calc(100% - 1.5rem);
	margin-left:1rem;
	margin-right:0rem;
	margin-bottom:0.5rem;
}

article.news img.icon{
	width:auto;
	max-height:220px;
	margin-left:1rem;
	margin-right:1rem;
	margin-bottom:0.5rem;
}


article p{
	margin-bottom: 0.5rem;
	margin-left:1rem;
	margin-right:1rem;
}

article p a:link, article p a:visited {
	font-size:0.9em;
}

.captioned {
	display:block;
}

.caption {
	background-color:#ffffff;
	font-style: italic;
	margin-bottom:1em;
}

header h1 {
	clear:both;
	margin-top:.25em;
	margin-bottom:.25em;
	display:block;
	margin-left:5%;
/*float:right;*/
	text-align:left;
	width:90%;
	font-size: 1.2em;

}

header img {
	float:left;
	width:40%;
}

main.homepage{
	clear:both;
}

@supports (display: grid) {
  main { 
    max-width: 10000px;
    margin: 0;
  }


  .homepage, .history, .wildlife {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
  }
}
/* 
styling used for articles with "tile" class
*/  
article.tile {
	display: flex;
	flex-flow: column;
	justify-content:space-between;
	border:  1px solid #000000;
	border-radius: 1rem;
	padding: 1rem;
	margin-top: 0.5rem;
	margin-right:0.25rem;
	margin-bottom:0rem;
    margin-left:0.25rem;

}
article.tile > h1 {
  margin: 1rem 1rem 0;
}

article.tile h2{
	text-align:center;
	font-size:1.0rem;
	font-weight:bold;
}
article.tile > ul {
  margin: 0 0 1rem;
}
article.tile > p {
  margin-top: 0.25rem;
  margin-right: 0rem;
  margin-bottom: 0.25rem;
  margin-left: 0rem;
  text-align:center;
  order:-1;
}
article.tile > img {
  width:100%;
  border-radius: 0.5rem;
  order: -2;
  align-self: center;
}

article.tile > p > a {
  display:block;
  text-decoration: none;
  font-size: 1.2rem;
  color: #ffffff;
  width: 100%;
  margin-top: auto;
  margin-left:0;
  margin-right:0;
  background: #188B55;
  color: #ffffff;
  padding: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.2rem;
}


/* 
Class used to prevent some images being 100% width on mobile screens
For example phone & image icons on Contact page
*/
.icon
{
width:20%;
border:0;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:1em;
padding-right:1em;
padding-left:0;
}

/*
Class to put border round image thumbnail
*/
.button {
	border: 1px solid #000000;
	border-radius:0.5em;
}

/*
Workaround to allow Google Map to resize with browser window
Source: https://www.labnol.org/internet/embed-responsive-google-maps/28333/
*/
.google-maps {
    position: relative;
    padding-bottom: 75%; /* This is the aspect ratio*/
    height: 0;
    overflow: hidden;
    }
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }

/*
Ensures that a paragraph directly after an iframe (often used in 3rd party code)
will start on a new line and not wrap around the iframe
*/
iframe > p {
	clear:both;
}

/*
Small amount of padding to avoid text touching
side of mobile screen. Text justified for neatness.
*/
section p{
	padding-left:2%;
	padding-right:2%;
	text-align:justify;
	margin-bottom:1em;	
}

/* Default value for mobile is that the menu is hidden */
nav {
	display: none;
}

/*
Hides the checkbox that controls the menu display
Try changing the left value to, say, 300px to see the checkbox working
*/
input {
  position: absolute;
  left: -9999px;
}

/*
This creates the menu button itself i.e. size, shape, colour and border
The text on the button is in the HTML
The hamburger lines are created in the label span CSS below
*/
label[for="menutoggle"]{
/*  display: block;*/
  display: inline-block;
  position: fixed;
  top: 0;
  right:0;
  margin: 0px;
/*  padding: 15px 65px 15px 30px;*/
  padding: 10px 50px 10px 15px;
  border: 0px solid #fff;
/*  border-radius: 100px;*/
  border-radius: 0px 0px 0px 20px;
  color: #ffffff;
  background-color: #6a8494;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}

label span { position: absolute; right: 5%; top: 45%; }

/* Creates the top line of hamburger */
label span:before {
  cursor: pointer;
  border-radius: 3px;
  height: 5px;
  width: 30px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
  top: -10px;
}

/* Creates middle line of hamburger */
label span {
  cursor: pointer;
  border-radius: 3px;
  height: 5px;
  width: 30px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
}

/* Creates bottom line of hamburger */
label span:after {
  cursor: pointer;
  border-radius: 3px;
  height: 5px;
  width: 30px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
  top: +10px; 
}

/* Puts a small shadow on the menu button when hovered over */
label:hover, input#menutoggle:focus + label {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
}

/* Changes menu button background colour when the menu is visible */
input#menutoggle:checked + label {
  background-color: #ff0000;
}

/* Rotate top line of hamburger to form cross*/
input#menutoggle:checked + label span:before {
  top: 0;
  transform: rotate(45deg);
}

/* Hide middle line of hamburger */
input#menutoggle:checked + label  span{
  background-color: transparent;
}

/* Rotate bottom line of hamburger to form cross*/
input#menutoggle:checked + label span:after {
  top: 0;
  transform: rotate(-45deg);
}

/* Displays the menu when the menu button clicked */
input#menutoggle:checked ~ nav {
	display: block;
    transition: all 500ms ease-in-out;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	border-top: solid 1px #cccccc;
	border-right: none;
	border-bottom: solid 1px #cccccc;
	border-left: none;
	background-color: #f0f0f0;
}

/* Formats the links in the nav bar */
nav a {
	display: block;
	width:100%;
	border-top: solid 2px #888888;
	border-bottom: solid 1px #eeeeee;
	padding: 5px 0px 5px 10px;
	background-color: #aaaaaa;
	color: #ffffff;
	text-decoration: none;
	text-align:center;
}

nav ul{
	margin-left:0;
}

nav ul li{
	list-style-type:none;
}
nav a:hover {
	text-decoration: none;
	font-weight: bold;
}

/* Formats the footer of the page */
footer
{
	background-color: #ffffff;
	border-top: 1px solid #ff0000;
	color: #27597D;
	text-align: center;
	margin-top:0.5rem;
	font-size:0.6rem;
}

footer p
{
	text-align: center;
	font-size:0.8 rem;
}


/*
Formats bulleted lists 
Default settings cleared by reset code
*/
ul{
	margin-left:2rem;
	margin-bottom:1em;
}

ul li{
	list-style-type:disc;
	line-height:125%;
}

ol {
	margin-left:2rem;
	margin-right:1rem;
	font-size: 1em;
	list-style-type:decimal;
}
/*
Start of code to format the page when the width of the browser window is over 768px
NOTE: Attributes set in earlier (mobile first) defaults will apply unless overwritten here
*/
@media only screen and (min-width: 768px) {

html {
	background-color: #ffffff;
/*	background-color: #cccccc;*/
}


body
{
	font-family: verdana, arial, helvetica, sans-serif;
	background-color: #ffffff;
	color: #666666;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}


/* Hides the hamburger menu button on larger screens */
label[for="menutoggle"]{
	display: none;
}

/*Special paragraph style for PCN Systems tagline*/
header p
{
	position:relative;
	left:5%;
	top:-5em;
	width:40%;
	z-index:2;
	font-weight: bold;
	font-size: large;
	background-color: rgba(238,238,238,0.5);
}

article.news img.left{
	float:left;
	width:auto;
	padding-top:0;
	padding-bottom:1rem;
	padding-right:2.5%;
	padding-left:0;
}

article.news img.right{
	float:right;
	width: auto;
	padding-top:0;
	padding-bottom:1rem;
	padding-right:0;
	margin-left:1rem;
}


/*Classes used to align images left or right*/
/*Only applies to desktop view. In mobile all images are full width*/
.right
{
	float:right;
	width: auto;
	padding-top:0;
	padding-bottom:1rem;
	padding-right:0;
	margin-left:1rem;
}

.left
{
	float:left;
	width:auto;
	padding-top:0;
	padding-bottom:1rem;
	padding-right:2.5%;
	padding-left:0;
}

.center {
	text-align:center;
}




/*Highlights current section on nav bar*/
body#home a#homenav,
body#news a#newsnav,
body#donate a#donatenav,
body#theplan a#theplannav,
body#getinvolved a#getinvolvednav, 
body#history a#historynav,
body#wildlife a#wildlifenav,
body#sharedspace a#sharedspacenav,
body#about a#aboutnav

{
color:#ffffff;
background-color:#188B55;
}

/*Sets the attributes for the navigation bar*/
nav{
	clear:both;
	display: block;
}

nav ul
{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	flex-wrap:nowrap;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul li{
/*	float: left;
	width: 10%;*/
	flex-grow:1;
	flex-basis:auto;
	align-self:stretch;
	list-style-type: none;
}
nav ul li a
{
	display: block;
	padding: 10px;
	background-color:#ffffff;
	margin-right:5px;
	text-align: center;
	text-decoration: none;
	font-size: medium;
	font-weight: bold;
	border: 1px solid #ff0000;
/*	border-top: 0px solid #ff0000;
	border-bottom: 0px solid #ff0000;*/
	border-radius: .25rem;
}

nav ul li a:link,nav ul li a:visited
{
	color:#188B55;
	background-color:#ffffff;

}

nav ul li a:hover,nav ul li a:active
{
	color:#ffffff;
	background-color:#188B55;
}



section
{
	padding-left: 1%;
	padding-right: 1%;
}

p
{
	font-size: small;
	text-align: justify;
}

p.quote
{
	margin-top:1em;
	margin-bottom:1em;
	margin-left:10%;
	width: 80%;
	font-style:italic;
	font-weight: bold;
	color: #ff9900;
}

h1
{
/*	clear: both;*/
	font-size: xx-large;
	font-weight: bold;
	text-align: center;
	padding-top: 1em;
}

header h1{
	margin-right:0;
	margin-top:0;
	font-size:2em;
}

h2
{
	font-size: medium;
	font-weight: bold;
	color: #27597D;
	background-color: transparent;
	text-align: left;
}

h3
{
	margin-left: 1em;
	font-size: small;
	font-weight: bold;
	color: #ff9900;
	text-align: left;
}

footer
{
	clear:both;
	background-color: #ffffff;
	color: #27597D;
	text-align: center;
}

footer p
{
	text-align: center;
}



ul{
	margin-left:10%;
	margin-bottom:1em;
}

ul li {
	font-size:small;
	list-style-type:square;
}



/* End of larger screen media query */
}