@charset "UTF-8";
/* CSS Document */
/* Style definitions for Froghall Drive website superseding wade.css	*/



@font-face
{
	font-family: kohofont;
	src: url(fonts/KoHo-Medium.ttf);
}
@font-face
{
	font-family: anticfont;
	src: url(fonts/Antic-Regular.ttf);
}
@font-face
{
	font-family: parafont;
	src: url(fonts/Raleway-Regular.ttf);
}
@font-face
{
	font-family: headfont;
	src: url(fonts/JosefinSans-Regular.ttf);
}
@font-face
{
	font-family: oswaldfont;
	src: url(fonts/oswald-medium.ttf);
}
html{
	font-size: 100%;
}

html, body{
	height: 100%;
}

* { 
	box-sizing:border-box;
}

body {
	background-color: #eeeeee;	/* outside the #container */
	font-family: parafont, sans-serif;
	color: #000000;
	line-height: 1;
	font-size: 100%;
}

a, a:link, .linky {
	text-decoration: underline; 
	color: #0000dd;
	font-weight: bold;			
}

a.img	{
	text-decoration: none;
}

a:hover, .linky:hover {
	color: #dd0000;	 	
}

a:visited {
	color: #8800aa;
}

article	{
	border: 1px solid #000088;
	background-color: #eeeeff;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 1em;
	margin-top: 3em;
}
aside	{
	float: right;
	max-width: 40%;
	background-color: #eeffee;
	border: solid #007700 2px;
	padding: 1em;
	margin-left: 1em;
	margin-bottom: 1em;
}
dd	{
	margin-top: 0.3em;
	margin-left: 2%;
	line-height: 120%;
}

dt	{
	margin-top: 1em;
	margin-bottom: 0.7em;
	font-weight: 700;
}

em	{
	font-style: italic;	
}

figure	{
	margin-top: 1em;
}
#cpfmaps figure	{
	margin-top: 2.5em;
}

figcaption	{
	margin-top: 0.5em;
	margin-bottom: 2em;
	text-align: center;
	line-height: 130%;

}
figcaption.credit	{
	font-style: italic;
}
footer {	
	clear: both;
	margin-top: 2em;
}

h1	{
	font-family: headfont;
	color: #283891;			/* lighter blue */	
	font-size: 250%;
	margin-top: 1.0em;
	font-weight: 700;
	margin-bottom: 0.9em;
	text-align: center;
}

/* These #fhd-bkg no longer used with new tech for text overlay image
#fhd-bkg-spring, #fhd-bkg-summer, #fhd-bkg-autumn, #fhd-bkg-winter	{
	background-image: url("images/froghall-drive-spring.jpg");
	background-size: cover;
	background-size: contain;
	background-repeat: no-repeat;
}
#fhd-bkg-summer	{
	background-image: url("images/froghall-drive-summer.jpg");
}
#fhd-bkg-autumn	{
	background-image: url("images/froghall-drive-autumn.jpg");
}
#fhd-bkg-winter	{
	background-image: url("images/froghall-drive-winter.jpg");
}
h1.shadowy	{	
	text-shadow: 0 0 4px #000000;	
	font-size: 280%;
	color: #ffffff;
	margin-top: -5em;
	margin-bottom: 5em;
}
*/

h1.shadowynewtech	{
	text-shadow: 0 0 4px #000000;	
	font-size: 280%;
	color: #ffffff;
}

h2	{
	font-family: headfont;
	font-size: 180%;
	color: #262262;			/* v dark blue */
	font-weight: 600;
	padding-top: 50px;
	margin-bottom: 1.5em;
	text-align: center;
}

h3	{
	font-family: headfont;
	font-size: 165%;
	color: #262262;			/* v dark blue */
	text-align: center;
	font-weight: 400;
	padding-top: 50px;
	margin-bottom: 1em;
}
#inform h3	{
	text-align: left;
}

h4	{
	font-size: 130%;
	font-family: headfont;
	color: #262262;			/* v dark blue */
	text-align: center;
	font-weight: 400;
	margin-top: 0.9em;
	margin-bottom: 0.5em;
}

hr	{
	border: solid black 1px;
}
img	{
	border-style: none;
	max-width: 100%;
}
#cpf-grid-hddr-3 img	{	/* frogs in CPF masthead */
	border: 5px outset #888888;
}
#cpf-grid-hddr-3 img:hover	{
	border-style:  double; 
}
#cpf-grid-hddr-3 img:active	{	/* frogs in CPF masthead */
	border-style:  inset;
}

p, dl	{
	margin-top: 0.6em;
	margin-bottom: 0.3em;
	line-height: 120%; 
}


table	{
	border: 2px solid #000000;
	border-collapse: collapse;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
}
th, td	{
	border: 1px solid #000000;
	border-collapse: collapse;
	padding: 5px;
}
th	{
	padding: 10px;
}
tr:nth-child(even)	{
	background-color:	#f8f8f8;
}
#closed td:nth-child(3), #walks td:nth-child(2)	{
	text-align: center;
}

ul,ol	{	
	margin-top: 0.7em;
	margin-left: 5%;
	margin-left: 0; 
	list-style-type: disc;
	color: #444444;
	line-height: 120%;	
	list-style-position: inside;
}
ul ul.indent	{
	list-style-type: circle;
	margin-left: 1em;
	margin-bottom: 1em;
}
ul.bullet	{
	font-size: 100%;
	margin-left: 1em;
}
ul.toc, ul.pubquiz	{
	list-style-type: none;
	line-height: 150%;
}
ul.pubtoc, ul.walktoc	{
	list-style-type: none;
	font-size: 90%;
}
ul.pubtoc li, ul.walktoc li	{
	float: left;
	width: 45%;
	margin-right: 2%;
	padding-top: 0.5em;
}
ul.walktoc li	{
	width: 9em;
}

ol	{
	list-style-type: decimal;
}
li {
	margin-top: 0.3em;
}
li.lino	{
	background-color: #bbbbbb;
	text-decoration: line-through;
}
li.liyes	{
	background-color: #ffffff;
}

ul.pubquiz li	{
	padding: 5px;
}
.qborder	{
	padding: 1em;
	font-family: sans-serif;
	border: 1px #008800 solid;
	border-radius: 5px;
	max-width: 50%;
	margin-bottom: 1em;
}
video	{
	max-width: 100%;
	height: auto;
	margin-top: 0.6em;
}

.attribution	{
	font-weight: 700;
	border-top: solid 2px #dd0000;
	border-bottom: solid 2px #dd3300;
	padding: 5px;
	float: left;
}
.bigdit	{	/* for big ditto */
	font-size: 200%;
	padding-left: 2em;
}
.bigstar	{
	font-size: 180%;
}
.border	{
	border: 2px solid #000000;
	padding: 5px;
}

.button	{	/* email send buttons */
	background-color: #262262;		/* v dark blue */
	color: #FFFFFF;
	border-width: 0.4em;
	cursor: pointer;
	float: left;
	padding: 6px;
	margin-left: 16px;
}
.button:hover {
	background-color: #9798c7;			/* pale mauve */
	color: #262262;						/* v dark blue */
}
.cpf-button	{
	border: 5px outset #888888;
	padding: 10px;
	background-color: #e5f3db;
	background-image: radial-gradient(#ffffff, #e5f3db);
	color: #660000;
}
.cpf-button:visited	{
	color: #660000;
}
.cpf-button:link	{
	text-decoration: none;
	color: #660000;
}
.cpf-button:hover	{
	border-style: double;
}
.cpf-button:active	{
	border-style: inset;
}
.centre	{
	text-align: center;
}

.checkboxes {
	float: left;
	padding-bottom: 0.7em;
	padding-left: 1em;
	width: 68%;
}

.clear	{
	clear: both;
}

.strong {
	font-weight: bold;
}

.flleft	{
	float: left;
}
.flcent	{
	clear: both;
	text-align: center;
	width: 100%;
}
.flright	{
	float: right;
}

.invisible	{
	visibility: hidden;
}
.quoted	{
	margin-left: 2em;
	font-family: sans-serif;
	font-size: 95%;
}
.redback	{
	background-color: #ffeeee;
	border-radius: 20px;
}
.greenback	{
	background-color: #eeffee;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 1em;
}
.blueback	{
	background-color: #eeeeff;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 1em;
}
.javawarn	{	/* style for warning about java */
	color: #ee0000;
}
.involve	{	/* style for normal inline use of name, may have embedded span */
	font-weight: 700;
}
.colourteal	{
	color: #55948f;	/* teal from logo */
}
.middleparent	{	/* vertical centring */
	display: table;
	width: 100%;
	margin-bottom: 0.4em;
}
.middlechild {
	display: table-cell;
	vertical-align: middle;
}
.whoknows	{
	font-size: 120%;
	font-family: oswaldfont;
	color: #007700;
}

/* These two classes are for 'new technology' centralising text over an image.
e.g.
	<div class="textimagecontain">
		<img  src="images/image.php" alt="background image" />	
		<h1 class="centredtext">Hello World</h1>	
	</div>
*/
.textimagecontain	{
	position: relative;
	text-align: center;
}
.centredtext	{
	position: absolute;
	top:  50%;
	left: 50%;
	width: 95%;
	transform: translate(-50%, -50%);
}


.redback, .greenback, .blueback	{
	background-color: #ffeeee;
	border-radius: 20px;
	margin-bottom: 1em;
	padding: 20px;
}
.greenback	{
	background-color: #eeffee;
}
.blueback	{
	background-color: #eeeeff;
}

/* Image support */

.img_l, .img_r {
	float: left;
	margin-left: 0;
	margin-top: 0.6em;
	margin-right: 2%;
	margin-bottom: 0.6em;
	text-align: center; 
	border-style: none;
	max-width: 50%;  
}
.img_r	{
	float: right;
	margin-left: 2%;
	margin-right: 0;
}
.img_l img, .img_r img	{
	max-width: 100%;
}

figure	img {
	width: 100%;
}

/* END Image support */
.ref	{
	font-weight: 700;
	color: #006600;
}

.relative {
	position: relative;
}
.strong 	{
	font-weight: 700;
}
.twothirds	{
	width: 70%;
}

.videoWrapper {	/* from CSS-tricks Fluid width video */
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;	/* in CSS-tricks code, but it bars result */
	padding-top: 0;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.videopubs	{
	width: 50%;
	margin-top: 1em; 
	margin-left: auto;
	margin-right: auto;
}

/*	Responsive classes */

.lt800show, .lt640show, .lt640ishow	{
	display: none;
}
.lt800vanish, .lt640vanish	{
	display: block;
}
.lt640ivanish	{
	display: inline;
}

/* END of responsive classes */


/* online form classes */

.label, .error	{	/* style for labels for online form */
	text-align: right;
	width: 28%;
	float: left;
	padding-top: 0.4em;
	padding-right: 1%;
	clear: both;
}
.error	{/* style for error label for online form */
	color: #ff0000;
}
.errormess	{	/* style for error message for online form */
	color: #ee0000;
	margin-top: 0;
}
.formnotes	{
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-style: italic;
	clear: both;
}
.msgtxt {	/* style for online form input and textarea field */
	margin-left: 2%;
}
.msgtxt:focus	{
	border: 2px solid #9798c7;
}

.nbitem		{	/* prevents break between checkbox - label or radiobutton - label */
	white-space: nowrap;
	display: inline;
	margin-right: 1em;
}
/* END of online form classes */

#container	{
	max-width: 1200px;
	background-color: #ffffff;
	width: 96%;
	margin-top: 1.5em;
	margin-bottom: 1.3em;	
	margin-left: auto;
	margin-right: auto;
	padding: 2%;
	padding: 1em;	 
	box-shadow: 0 0 15px #000066;	/* horiz vert blur colour */
	border-radius: 20px;
}


/* Social media */

#fbdiv	{
	width: 30px;
	height: 30px;
	background-image: url("structimages/fb_icon_30x30.png");
	background-size: cover;
	margin-top: 5px;
}
#fbdiv:hover	{
	background-image: url("structimages/fb_icon_30_hov.png");
}
#twdiv	{
	width: 40px;
	height: 40px;
	background-image: url("structimages/twitter-bird-40-transp.png");
}
#twdiv:hover	{
	background-image: url("structimages/twitter-bird-40-hover.png");
}

/* END Social media */

/* Navigation bar desktop */

#grid-container-nav	{
	border-top: #9798c7 5px solid;
	border-bottom: #9798c7 5px solid;
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	background-color: transparent; 
	list-style-type: none;
	margin-top: 2em;
}
#grid-container-nav li	{	/* top level menu item */
	position: relative;	 /* allows absolute positioning of dropdowns */
	padding: 0.7em 0 0.5em 0;  /*  top right bottom left */	
	background-color: #262262;
	margin-right: 2px;	/* separate the entries */
	margin-right: 0;	/* don't separate entries */
	margin-top: 0;
	text-align: center;
	font-size: 80%;
}
#grid-container-nav li:hover	{
	background-color: #9798c7;
}
#grid-container-nav a	{	/* top level menu text and dropdowns */
	color: #ffffff;
	text-decoration: none;
	font-size: 120%
}
#grid-container-nav a:hover	{	/*  hover top level menu text */
	color: #262262;
}
/* Dropdown structures - desktop only */

#grid-container-nav ul	{
	position: absolute;
	top: 1.6em;
	left: 0;
	margin-left: -1px;	/* compensate for border in owning li */
	display: none;	/* don't show dropdown until hover */
	list-style-type: none;
	font-size: 110%;
}
#grid-container-nav li:hover ul {
	display: block;
}
#grid-container-nav ul li	{	/* dropdown list item */
	border-right: 0;
	width: 12em; 
	white-space: nowrap; 
	opacity: 0.85;
	border: 1px #660000 solid;
	background-color: #660000;
	z-index: 1;
}

#grid-container-nav ul li:hover	{	/* dropdown list item */
	color: #660000;
	background-color: #ff8080;
}
#grid-container-nav ul li a	{
	font-size: 110%;
}
/* END of Navigation desktop */

/* Navigation phone */

.phonenavi 	{
	clear: both;
	background-color: #ffffff;
	list-style-type: none;
	margin-left: 0;
	padding-bottom: 20px;
	position: fixed;
	top: 40px;
	left: 0px;
}

.phonenavi li	{	
	float: left;
	background-color: #262262;		
	padding: 7px;
	margin-top: 0;
	margin-bottom: 2px;
	margin-right: 2px;
	border: 0;
	width: 9em;
	text-align: center;
}
.phonenavi li:hover	{
	background-color: #9798c7;
}
.phonenavi li a	{
	color: #ffffff;
	text-decoration: none;
}
.phonenavi li a:hover	{
	color: #262262; 
}

.inline	{	/* for construction of hamburger links */
	display: inline-block;
	white-space: nowrap;
}

#hamburgerbar	{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #262262;		/* Wade blue */
	text-align: left;
	padding-left: 2%;
	z-index: 10;
	color: #ffffff;
}
#hamburgerbar a	{
	color: #ffffff;
/*	float: left;	not sure why this was here */
}
#hamburgerbar a:active	{
	background-color: #ffffff;
	color: #262262;		/* Wade blue */
}
#hamburgerbar a#submenu	{	/* ellipsis symbol initially not displayed, turned on for individual pages */
	display: none;
}
#hamnav, #ellipsnav	{	/* compact menus for mobile devices, display property switched by js */
	display: none;
}

#ellipsnav ul	{	/* ellipsis submenu */
	position: fixed;
	top: 130px;
	left: 0px;
	list-style-type: none;
	background-color: #ffffff;
	padding-bottom: 5px;
	opacity: 1;
}
#ellipsnav ul li	{	/* ellipsis submenu */
	float: none;
	padding-left: 10px;
	padding-top: 7px;
	width: 11em;
	height: 2em;
	background-color: #660000;
}
#ellipsnav ul li:hover	{
	background-color: #ff8080;
}

#ellipsnav ul li a	{	/* ellipsis submenu */
	font-weight: bold;
	font-size: 100%;
	color: #ffffff;
	text-decoration: none;
	float: none;
	padding-top: 8px;
	padding-bottom: 6px;
	padding-left: 5px;
	padding-right: 5px;	
}
#ellipsnav ul li a:hover	{
	color: #660000;
}



/* END Navigation phone */

/* General grids */

.grid-container-widenarrow,	.grid-container-narrowwide	{
	display: grid;
	grid-template-columns: 70% 27%;
	grid-column-gap: 3%;
}
.grid-container-narrowwide	{
	grid-template-columns: 30% 67%;
}

.grid-container-3, .grid-container-2	{
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-column-gap: 1%;
	margin-bottom: 5px;
}
.grid-container-2	{
	grid-template-columns: 48% 48%;
	grid-column-gap: 4%;
}

.grid-container-3  h2	{
	height: 2em;	/* align the Wade pictures even if wrap by fixing heading height */
}

/* END general grids */

/* Custom grids */

#cpf-grid-hddr-3	{
	display: grid;
	grid-template-columns: 15% auto 15%;
	grid-template-areas: 'rfrog hddr lfrog';
	grid-column-gap: 2%;
}
#cpf-lfrog	{
	grid-area: lfrog;
}
#cpf-rfrog	{
	grid-area: rfrog;	
}
#cpf-hddr	{
	grid-area: hddr;
}
	

/* END custom grids */


@media only screen
	and (max-width: 800px)	{	/*  invokes hamburger navigation */

	.lt800show 	{
		display: block;
	}
	.lt800vanish	{
		display: none;
	}
	#container	{
		margin-top: 50px;	/* drop below hamburgerbar */
	}		
}	/* @media 800 */

@media only screen
	and (max-width: 680px)	{

	aside	{
		width: 100%;
	}
	.lt640vanish, .lt640ivanish {
	display: none;
	}
	.lt640show	{
	display: block;
	}
	.lt640ishow	{
	display: inline;
	}
	
	.label, .error, .msgtxt, .checkboxes {	/* these are classes for forms */
		margin-left: 0;
		float: none;
		margin-bottom: 0.5em;
	}
	.label, .error	{
		text-align: left;
		width: 95%;
	}
	.msgtxt	{
		max-width: 95%;
	}	
			
	.grid-container-3	{
		grid-template-columns: 100%;
	}
	.grid-container-2, .grid-container-narrowwide 	{
		grid-template-columns: 100%;	
	}
	.grid-container-widenarrow > div	{
		grid-column: 1 / span 2;
	}
/*	
	h1.shadowy	{
		font-size: 160%;
		margin-top: -3em;
		margin-bottom: 3em;
	}
*/
	h1.shadowynewtech	{
		font-size: 160%;	
	}
	
	#cpf-grid-hddr-3	{
		grid-template-columns: auto auto;
		grid-template-areas: 'rfrog lfrog'
							 'hddr hddr';
	}
	.qborder	{
		max-width: 100%;
	}
	ul.pubtoc li	{
		width: 95%;
		font-size: 85%;
	}
	.img_l, .img_r	{
	max-width: 100%;
	float: none;	
	}
	.videopubs	{
	width: 100%;
	}
				
}	/* @media 640 */


@media only screen
	and (max-width: 480px)	{
/*
	stop smallish text resizing on iPhone
*/	
	body	{
		-webkit-text-size-adjust: none;
	}

	#container	{
		box-shadow: none;	/* not cool on a narrow display */
	}
	
	aside {
		max-width: 100%;
	}
	p	{
		font-size: 100%;
	}
	th, td	{
		font-size: 80%;
	}
	.img_half img	{
	max-width: 95%;
	}
/*	
	.img_r, .img_l	{
	max-width: 95%;
	}
*/	
}	/* @media 480 */