@charset "UTF-8";
/* CSS Document */
/* Copyright 2017 D&J Fox All rights reserved. */
/* Classes = '.'  IDs = '#' */

/* ------------------------------------------------------------------------------------ */
/* FONTS */

/* Define font */
@font-face {	   /* regular text (latin only) */
  	font-family:'Source Sans Pro';
  	font-style:normal;
  	font-weight:300;
  	src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(/_css/font-SourceSansPro-300-Latin.woff) format('woff');
  	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
	font-display: swap;
	}

@font-face {	   /* bold/semi-bold text (latin only) */
  	font-family: 'Source Sans Pro';
  	font-style: normal;
  	font-weight: 600;
  	src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(/_css/font-SourceSansPro-600-Latin.woff) format('woff');
  	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
	font-display: swap;
}

html,body, .bttn, .bttnRed {
	font-family:'Source Sans Pro', Arial, Helvetica, sans-serif;
	font-size:	17px}

#logo { 
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; 
	font-size:	2.25em}

#header-right {font-weight:bold}

h1 			{font-size:1.5em;text-align:center} 	/* page title */
h2 			{font-size:1.2em}    					/* sub-heading */ 
.bigprnt    {font-size:2.4em;z-index:10;}			/* z-index to ensure it is on top of images */				
.smlprnt 	{font-size:0.75em}						/* small text */
.adheader	{font-size:0.75em;text-align:left}  	/* outer box for adverts */

.centre 	{text-align:center}						/* center aligned text */

/* no link underlining (for hovers, headers and ads) */
A:hover, #header A, .ad A {text-decoration:none}



/* ------------------------------------------------------------------------------------ */
/* COLOURS & TEXTURES */

/* BLACK */
html, body, .ad A, .rcToggleLabel span, #header-right A:hover, #footer A:hover {color:black}
table, th, td {border:1px solid black}

/* WHITE */
#header, #footer, #header A, #footer A, .bttn, .bttnRed, .rcToggleLabel input:checked + span {color:white}

/* GREEN */
#header,#footer {background:#191}	/* slightly lighter to allow for the darkening effect of the texture */

A, .bttnLink {color:#080; text-decoration:underline}
input[type="range"], .bttn, .rcToggleLabel input:checked + span {background-color:#080}
.bordercolour, .rcToggleLabel span, input[type="range"] {border:1px solid #080}
.bttn	 {border:2px solid #080}


/* LIGHT BROWN */
.bnnrbox100, .bnnrboxreg {background-color:#f9f3e7}		/* #fbf2d9 */

/* PALER BROWN */
.adinner, .tile:hover, .rcToggleLabel span {background-color:#fff9f4}

/* RED */
A:hover, .bttnLink:hover {color:#ff4500} 			/* link hovers */
.bttnRed {background-color:#ff4500}
.bttnRed {border:2px solid #ff4500}

/* GREYS */
.adheader {color:#777}

/* box shadow buttons for tab focus and hover */	/* {box-shadow: 0 0 9px rgba(0,0,0,0.15)} */
.rcToggleLabel span:hover, .rcToggleLabel input:focus + span, .bttn:hover, .bttnRed:hover,
button:focus {box-shadow:0 0 9px #aaa;
		 -moz-box-shadow:0 0 9px #aaa;
	  -webkit-box-shadow:0 0 9px #aaa}

.borderlight, .tile {border:1px solid #ececec}        /* was light grey: d3d3d3 & silver: c0c0c0  resp. */


/* Traffic light colours (choice grid) */
#grn {background-color:#dbffdb}				/* aaffaa bfb */
#ylw {background-color:#ffffd8}				/* ff8 */
#red {background-color:#ffe1e8}				/* ffd8ff faa */
/* #blu {background-color:#d8ffff} */

/* Traffic light highlights (em@wk) */
#grn-HL{background #dbffdb; 				/* For browsers that do not support gradients */
	background:-webkit-radial-gradient(#dbffdb, white); 		/* Safari 5.1 to 6.0 */
	background:-o-radial-gradient(#dbffdb, white); 				/* For Opera 11.6 to 12.0 */
	background:-moz-radial-gradient(#dbffdb, white); 			/* For Firefox 3.6 to 15 */
	background:radial-gradient(#dbffdb, white)} 				/* Standard syntax */

#ylw-HL{background: #ffffd8;
	background:-webkit-radial-gradient(#ffffd8, white);
	background:-o-radial-gradient(#ffffd8, white);
	background:-moz-radial-gradient(#ffffd8, white);
	background:radial-gradient(#ffffd8, white)}

#red-HL{
	background:#ffe1e8;
	background:-webkit-radial-gradient(#ffe1e8, white);
	background:-o-radial-gradient(#ffe1e8, white);
	background:-moz-radial-gradient(#ffe1e8, white);
	background:radial-gradient(#ffe1e8, white)}

#blu-HL{background:#d8ffff;
	background:-webkit-radial-gradient(#d8ffff, white);
	background:-o-radial-gradient(#d8ffff, white);
	background:-moz-radial-gradient(#d8ffff, white);
	background:radial-gradient(#d8ffff, white)}




/* TEXTURES and BACKDROPS */
#header,#footer {background-image:url('/_images/txtr-45-degree-fabric-dark.png')}
.bnnrbox100		{background-image:url('/_images/yellowbrickroad.jpg')}
.bnnrboxreg 	{background-image:url('/_images/txtr-natural-paper.png')}

#container:before {		/* fixed background texture */
    content: ' ';
	width: 100%; height: 100%;
    top: 0; left: 0; position: absolute; display: block;
    z-index: -1;
    background-image: url('/_images/txtr-topogmod.png');
    background-repeat: repeat;
	background-attachment:fixed;
}


/* ------------------------------------------------------------------------------------ */
/* BOXES, BANNERS & TABLES */

img {border:0}				/* start with no image borders */
table, th, td {border-collapse:collapse; padding:3px}

.borderlight  {padding:0.25em; margin:0.25em 0em}

.bordercolour {margin:0 auto; padding:0.75em; display:table} /* 'display:table' allows the box to be centered. */

/* BANNERS that hold images (front page) */
.bnnrboxreg, .bnnrbox100 {width:100%; text-align:center; min-height:200px; padding-bottom:1em}

.bnnrbox100 {background-size:100% 100%; -moz-background-size:100% 100%; 
	-ms-background-size:100% 100%; -o-background-size:100% 100%; -webkit-background-size:100% 100%}


/* TILE: clickable tiles used on front page */
.tile {	width:160px; height:210px;
		margin:1em;  padding:0.5em; 
		display:inline-block; position:relative}

.tile:hover {cursor:pointer}

a.tilelink {
    	height: 100%; width: 100%;		/* make the link fill the whole span/div */
    	top: 0; left: 0;
    	z-index: 10;		    		/* raise the link tag above everything else in div */
    	position: absolute;
    	text-decoration:none}  			/* make sure the link doesn't get underlined or coloured */


/* ------------------------------------------------------------------------------------ */
/* ++PRINTOUTS++ COLOURS, TEXTURES, BOXES, BANNERS, TABLES, TILES */

@media print {

	html, body { font-size: 12px; }

	/* force back text on white background */
	html, body *, A, #header, #footer, #footer A, .bnnrbox100, .bnnrboxreg, .adinner, #container,
	input[type="range"], .rcToggleLabel input:checked + span {color:black; background-color:white}

	/* add pale border to areas previously defined by just a background color */
	.bnnrbox100, .adinner {border:0.5px solid #ececec; min-height:30px}

	/* Remove textures */
	#header, #footer, .bnnrbox100, .bnnrboxreg, #container {background-image:none}

	a.tilelink {display:none}
}



/* ------------------------------------------------------------------------------------ */
/* FORM ELEMENTS */								   /* see also ie.css for ie alternates */

/* Standard input field widths */
input[type="text"], input[type="email"], input[type="tel"] {width:250px}
select, option {max-width:250px}
textarea {width:400px; height:150px}

/* SLIDERS */
input[type="range"]{
	height:11px; width:12em;         
	border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;
	-webkit-appearance:none;
	cursor:ew-resize}		/* col-resize, pointer */

.SliderLabel {
	height:1.2em; width:17em;
	padding:0.1em 0.4em; 
	display:inline-block}


/*  RADIO/CHECKBOX BOX TOGGLE BUTTONS */
.rcToggleWrap { 
	margin:0.1em;
	left:0.75em; position:relative;
	display:inline-block; 
	text-align:left}

.rcToggleLabel span {
	min-width:9em; height:1.4em;
	left:-1.5em; 
	position:relative; display:inline-block;
	padding:0.1em 0.4em; 
	text-align:center;
	cursor:pointer}

.rcToggleLabel input { z-index:-2 }				/* hide the original checkbox */

.rcToggleLabel input:checked + span {border-style:inset}


/* SUBMIT & RESET BUTTONS */
.bttn, .bttnRed {
	min-width:8em; height:1.8em;
	margin:0.2em;  padding:0.1em 1em 0.2em;
	border-radius:1.2em; -moz-border-radius:1.2em; -webkit-border-radius:1.2em;
	text-align:center;
	font-size:1em;
	cursor:pointer}

.bttn:active, .bttnRed:active {border-style:inset}

.bttnLink {									/* display a button as a link */
	background:none!important;
	border:none; 
	padding:0!important;
	font-size:1em;
	cursor:pointer}


/* MULTIPLE SUBMIT BUTTONS:
When more than one submit button is used (eg. 'back' and 'next', pressing Enter will 
activate the first submit listed (in the html). Therefore, the default submit button 
(e.g. next) should be listed first (in html). In order to correct the order for the 
user and display the buttons logically, the following #buttons container is used:
Each button is floated right to reverse the order back to what it should be, then
a containing div is used to help re-center the pair in the page, using inline-block. */	
.buttons {display:inline-block}
.buttons .bttn {float:right}		/* only apply to class 'bttn' when contained within 'buttons' */

/* THREE SUBMIT BUTTONS IN A ROW:
When there are three submit buttons at the bottom of the page, then the order needs
changing again to ensure that the middle button is placed above the other 2 (typically
'back' and 'next') on small screens. If not then the buttons are displayed in an odd order. 
To do this, order the buttons in html as follows: 
middle button, hidden div, next button, back button. 
Initially, the div is hidden and has no effect, and the back button is floated to the
left of the middle. On small screens, the div is activated, forcing the next and back 
buttons onto a new line: */
#btnmid 	{float:none}
#btnleft 	{float:left}
#forceline 	{display:none}

/* --PHONE SCREENS-- */
@media only screen and (max-device-width:480px), screen and (max-width:480px){
	#forceline {display:block}	/* 3 button reordering for - see above */
	textarea {width:280px}  	/* shrink the text area width */
	.SliderLabel {width:13em}	/* reduce slider width */
}

/* ++PRINTOUTS++ FORM ELEMENTS */
@media print {
	/* Remove unneeded elements: page navigation buttons, Social media buttons */
	.buttons, .bttn, .bttnRed, #smlinks {display:none}
	
	/* Radio/Check toggle buttons: remove inset border & underline text to show selection */
	.rcToggleLabel input:checked + span {text-decoration:underline; border:1px solid black}
}



/* ------------------------------------------------------------------------------------ */
/* BASIC HTML SPACING & ALIGNMENTS */
html,body {margin:0; padding:0; height:100%}
/* @media only screen{ body{min-width:0} } */
p 		  {margin:0; padding:0.3em 0}				/* pad top and bottom */
h1, h2	  {margin:0; padding:0.8em 0 0.1em}
ul		  {padding-left:4em}

/* Alignments */
#smlinks img {vertical-align:middle}				/* social media link images */

/* IMAGE ON THE LEFT: used to push an image to the left - see also sml screen section */
.imgnowrap {margin:8px; float:left}

/* NO TEXT WRAPPING: prevents text wrapping round an image */
.nowrapping {display:block; overflow:hidden; padding-left:1em}	


/* ------------------------------------------------------------------------------------ */
/* LAYOUT */
/* This layout is for a two column, 'fluid' (across browsers) format, with a fixed width 
right column (primarily for adverts of 250px wide), that automatically flows under the 
left when the screen width is reduced. There is also an option for a single column format. */
/* Margins and padding format: top right bottom left / top sides bottom / top&bottom sides / all */

#container {
   	min-height:100%;			/* Set this to ensure the footer sticks at the bottom
    [if IE 6] height:100%;		/* For IE6 use a different attribute */
	height: auto !important;    /* This is needed to ensure footer sticks to the bottom in safari */
	height:100%;				
   	position:relative}

	#header {height:50px; padding:5px 15px 5px}

		#header-right{
			float:right; position:absolute;
			top:8px; right:18px;  z-index:2;
			padding:10px;
			text-align:right}

 	#middle {padding-bottom:3.5em}			/* height of footer */

	#singlecol{margin:0; padding:20px}		/* replaces: leftcol, main & rightcol */
												 
	/* float col left, create a neg margin equal to the width of the right column */
	#leftcol{width:100%; margin-right:-270px; float:left}
	
		/* create a box within the left col to automatically fill the whole column to allow
		centralised text. Right margin must equal width of right column. */
		#main {margin-right:270px; padding:20px}

	/* Width = width of advert + padding and borders + a bit extra for scroll bar etc...
	Use overflow to stop any images from breaking the format by going over the width. */
	#rightcol{width:270px; float:right; overflow:hidden !important; padding-bottom:1em}
		
		.ad{
			min-height:5em; max-height:400px;
			width:252px;				/* = ad width + border */
			overflow:hidden;
			margin: 0 2px 10px;
			font-size:0.75em;  			/* font-size:small; */
			text-align:center;
			vertical-align:top} 		/* this ensures the tops of each ad are level when at the bottom */
		
		.ad img{width:250px}			/* = ad width to stop image truncation */

		.ad p  {padding:0.25em}			/* for text based ads */


	#footer-space {clear:both}
	
#footer {   							/* To ensure the footer sticks to the bottom of the page */
		width:100%; height:3.5em;			/* Height must match the bottom padding of the middle section */
		bottom:0; position:absolute;
		padding:0.5em 0;
		text-align:center}

/* colours for debugging */
/* #middle   	{background:#ffeeaa}  /* orange */
/* #leftcol  	{background:#eeffaa}  /* yellow */
/* #rightcol 	{background:#eeaaff}  /* pink */
/* .ad		 	{background:#e9eaa9}  /* brown */



/* ------------------------------------------------------------------------------------ */
/* Resolutions: (Width x Height)
	- Smart Phones: 320 x 480, 480 x 800
	- Tablets: 768 x 1024
	- Old desktop/laptop: 800 x 600
	- Modern desktop/laptop: 1024 x 768, 1280 x 800   */

/* --SMALL SCREENS & ++PRINT++ : LAYOUT */
/* If the screen is less than 843px then put the ads at the bottom
/* the 'only' blocks older browsers from seeing this iphone/android styling
NB. If for ipads with 768px width screen and displaying 3 ads at the bottom: 
768 = 3 x (ad width + margin + border)  ie. with a 250 width ad, + 1px border, margin =< 4px */
@media only screen and (max-device-width:480px),screen and (max-width:800px), print {

	/* remove the floats off both columns, so they are one on top of another */
	#leftcol, #rightcol {float:none; width:auto}

	/* remove the right margin for the leftcolumn and its inner */
	#leftcol, #main   	{margin-right:0 !important}

	/* centre all the ads and display them such that they flow neatly onto the next line if required */
	#rightcol 	{text-align:center}
	.ad			{display:inline-block; margin:10px 2px 10px 2px} 
	
	/* allow the wrapping of text around images where previously prevented */
	.nowrapping	 {display:inline; overflow:visible; padding-left:0}
	
}

/* ++PRINTOUTS++ : LAYOUT */
@media print {
	body {width:99%} 			/* make sure the printout does not get truncated on the right */
	#footer {margin-top:20px}	/* Put some extra space before the footer */
}

/* --PHONE SCREENS-- LAYOUT */
/* Adjust paddings/margins on the sides to maximise screen width on smart phones */
/* @media only screen and (max-device-width:480px), screen and (max-width:480px){ */
@media only screen and (max-device-width:480px), screen and (max-width:512px){

	#singlecol, #main	{padding:10px}			/* decrease the side padding to allow more text */
 	#middle {padding-bottom:5.5em}				/* increase height of footer */
	#footer {height:5.5em}
 	.ad			{float:none; margin:5px auto}	/* display ads one above the other in the center */
	.bigprnt 	{font-size:1.9em} 				/* shrink the size of this print slightly */

	/* for left aligned images, re-align in the centre, don't let text wrap */
	.imgnowrap 	{float:none; text-align:center}
	
	.bnnrbox100 {min-height:135px}

 }

/* Adjustment of text size on the iphone */
/* @media only screen and (max-device-width:480px){ */
/* 	body {-webkit-text-size-adjust:100%} */
/* } */

/*  * * * END OF FILE * * *  */