/* ==========================================================================
   David Parton -- Living with ME
   Standalone stylesheet, distilled from the "Catch Box" WordPress theme
   (genericons.css + style.css + blocks.css + blue.css color scheme),
   trimmed to only the rules this page actually uses.
   ========================================================================== */

/* ==========================================================================
   Colour scheme -- change any of these to re-theme the whole site.
   Everything below that uses the colour scheme refers to these variables
   instead of a hard-coded hex value, so this is the only place you need
   to edit.

   Header graphic
     Teal :          #036566
     Sand :          #ceb37e
     Maroon :        #a02c2c
 
   ========================================================================== */

:root {
	/* Site colour scheme -- teal/sand branding */
	--color-text: #373737;          /* Normal body text */
	--color-link: #024c4d;          /* Unselected / visited links (Dark Teal) */
	--color-link-hover: #a02c2c;    /* Link hover / focus / active (Maroon) */
	--color-menu-dark: #024c4d;     /* Menu bar gradient - dark stop */
	--color-menu-light: #047e7f;    /* Menu bar gradient - light stop */
	--color-menu-text-active: #ceb37e; /* Menu text on hover / current page (Sand) */
	--color-heading: #222;          /* Page title colour */
	--color-black: #000;            /* Main body heading (h1) colour */

	/* Neutral / supporting colours -- backgrounds, borders, form fields, footer text */
	--color-white: #fff;            /* Card/box backgrounds (header, content box, widgets, footer) */
	--color-grey-lighter: #eee;     /* Page wrapper & main-area background; light text on dark menu */
	--color-grey-light: #ccc;       /* Default borders (tables, cards, footer) */
	--color-grey: #aaaaaa;          /* Custom page background; footer bottom border accent */
	--color-grey-dark: #666;        /* Footer text */
	--color-grey-darker: #555;      /* Footer link text */
	--color-grey-darkest: #444;     /* Menu item divider */
	--color-grey-input: #888;       /* Default text colour in form fields */
	--color-input-bg: #fafafa;      /* Text-input field background */
	--color-grey-mobile-bg: #3d3d3d; /* Mobile nav background (small screens) */
	--color-grey-mobile-focus: #333; /* Mobile nav link focus background */
	--color-skiplink-bg: #f1f1f1;   /* "Skip to content" link background */
	--color-skiplink-text: #21759b; /* "Skip to content" link text */
}

/* CSS reset: strip default browser spacing/sizing from common elements */
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,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

/* Remove the default focus outline everywhere */
:focus {
	outline: 0;
}

/* Page base background and line-height reset */
body {
	background: var(--color-white);
	line-height: 1;
}

/* Remove default list bullets/numbers */
ol,
ul {
	list-style: none;
}

/* Reset table border model */
table {
	border-collapse: separate;
	border-spacing: 0;
}

/* Left-align and un-bold table headings/cells */
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

/* No border on images inside links */
a img {
	border: 0;
}

/* Make HTML5 layout elements behave like blocks (older-browser support) */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

/* Remove default figure margin */
figure {
	margin: 0;
}

/* Give buttons/button-like inputs a pointer cursor and native button look */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

/* Overall page wrapper: width, centering, and rounded light-grey background */
.site {
	width: 1000px;
	margin: 30px auto;
	background: var(--color-grey-lighter);
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* Main content column width, floated left of the sidebar */
#main-content {
	float: left;
	width: 694px;
}

/* Sidebar column width, floated to the right */
#sidebar {
	width: 216px;
	float: right;
}

/* Width of the footer's copyright/powered-by blocks */
#site-generator .copyright,
#site-generator .powered {
	width: 470px;
}

/* Main content area: padding and background */
#main {
	padding: 30px 30px 0;
	background-color: var(--color-grey-lighter);
	clear: both;
}

/* Side margins for header content and nav */
#header-content,
#primary-nav div {
	margin: 0 30px;
}

/* Vertical padding for the header content block */
#header-content {
	padding: 15px 0;
}

/* Bottom spacing under content blocks, paragraphs and lists */
.content-box,
p,
ul,
ol,
.widget {
	margin-bottom: 30px;
}

/* Indent for list content */
ul,
ol {
	margin-left: 25px;
}

/* Top padding above the page body text */
.page-body {
	padding: 1em 0 0;
}

/* Remove default spacing on the nav menu list */
#primary-nav ul.menu {
	margin: 0;
	padding: 0;
}

/* Padding inside sidebar widgets */
.widget {
	padding: 10px;
}

/* Base text colour, font family and sizing for the whole page */
body,
button,
input,
select,
textarea {
	color: var(--color-text);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.62em;
}

/* Heading spacing/line-height, and clear any floats above them */
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	line-height: 1.4;
}

/* Restore bullet points for unordered lists */
ul {
	list-style: disc;
}

/* No extra bottom margin on nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
}

/* Bold text stays bold */
strong {
	font-weight: bold;
}

/* Styling for text-style form fields (background, border, shadow, colour) */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
	background: var(--color-input-bg);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	border: 1px solid var(--color-grey-light);
	color: var(--color-grey-input);
	max-width: 97%;
}

/* Darken form field text when focused */
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
	color: var(--color-text);
}

/* Inner padding for text-style form fields */
input[type=text],
input[type=email],
input[type=url] {
	padding: 3px;
}

/* Default (unvisited/visited) link colour, no underline */
a,
a:visited {
	color: var(--color-link);
	text-decoration: none;
}

/* Underline links on focus/active/hover, and switch to the hover colour */
a:focus,
a:active,
a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* Visually hide content while keeping it available to screen readers */
.visually-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* "Skip to content" link: hidden off-screen until focused */
.skip-link {
	background-color: var(--color-skiplink-bg);
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	color: var(--color-skiplink-text);
	display: block;
	font: bold 14px/normal "Helvetica Neue", Helvetica, Arial, sans-serif;
	left: -9999em;
	outline: none;
	padding: 15px 23px 14px;
	text-decoration: none;
	text-transform: none;
	top: -9999em;
}

/* Bring the skip-link on screen when it receives keyboard focus */
.skip-link:focus {
	clip: auto;
	height: auto;
	left: 6px;
	top: 7px;
	width: auto;
	z-index: 100000;
}

/* Classic clearfix hack for containers with floated children */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* Clearfix display fallback */
.clearfix {
	display: inline-block;
}

/* IE6/7 "has layout" clearfix fix */
* html .clearfix {
	height: 1%;
}

/* Clearfix display override for modern browsers */
.clearfix {
	display: block;
}

/* Extra clearfix for widgets with floated content */
.widget:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Site header: white background, rounded top corners, sits above content */
#site-header {
	background-color: var(--color-white);
	position: relative;
	z-index: 51;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

/* Logo container floats left */
.logo-wrap {
	clear: both;
	display: inline-block;
	float: left;
	max-width: 100%;
}

/* Constrain header images to their container */
#site-header img {
	height: auto;
	max-width: 100%;
}

/* Remove extra line-height around the logo */
#site-logo {
	line-height: 0;
}

/* Fixed height for the site logo image */
#site-logo img {
	margin: 0;
	height: 96px;
	width: auto;
	max-width: 100%;
}

/* Primary nav bar: menu-colour gradient background, full width, bottom border */
#primary-nav {
	background: var(--color-menu-dark);
	background: -moz-linear-gradient(var(--color-menu-light), var(--color-menu-dark));
	background: -o-linear-gradient(var(--color-menu-light), var(--color-menu-dark));
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(var(--color-menu-light)), to(var(--color-menu-dark)));
	background: -webkit-linear-gradient(var(--color-menu-light), var(--color-menu-dark));
	clear: both;
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	border-bottom: 1px solid var(--color-menu-dark);
	margin-bottom: 0;
}

/* Nav menu font size, no bullets */
#primary-nav ul.menu {
	font-size: 14px;
	list-style: none;
}

/* Page background colour (WordPress "custom background" class) */
body.custom-background {
	background-color: var(--color-grey);
}

/* Top-level menu items sit side by side with a divider line */
#primary-nav ul.menu li {
	border-left: 1px solid var(--color-grey-darkest);
	float: left;
	position: relative;
}

/* Top-level menu link colour, spacing, no underline */
#primary-nav ul.menu a {
	color: var(--color-grey-lighter);
	line-height: 2.7em;
	padding: 0 1.2125em;
	text-decoration: none;
}

/* Make menu links fill their li as a block */
#primary-nav ul.menu a {
	display: block;
}

/* No left border on the first top-level item */
#primary-nav ul.menu li:first-child {
	border: none;
}

/* Top-level menu item hover/focus, and the current page's menu item: menu-colour gradient */
#primary-nav ul.menu li:hover > a,
#primary-nav ul.menu a:focus,
#primary-nav .menu .current-menu-item > a,
#primary-nav .menu .current_page_item > a {
	background: var(--color-menu-light);
	background: -moz-linear-gradient(var(--color-menu-dark), var(--color-menu-light));
	background: -o-linear-gradient(var(--color-menu-dark), var(--color-menu-light));
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(var(--color-menu-dark)), to(var(--color-menu-light)));
	background: -webkit-linear-gradient(var(--color-menu-dark), var(--color-menu-light));
}

/* Hover/focus text colour (Sand) */
#primary-nav ul.menu li:hover > a,
#primary-nav ul.menu a:focus {
	color: var(--color-menu-text-active);
}

/* Current page's menu item text colour */
#primary-nav .menu .current-menu-item > a,
#primary-nav .menu .current_page_item > a {
	color: var(--color-grey-lighter);
}

/* Bold the current page's menu link */
#primary-nav .menu .current-menu-item > a,
#primary-nav .menu .current_page_item > a {
	font-weight: bold;
}

/* Main content box: white card with rounded corners, bottom border, padding */
.content-box {
	background-color: var(--color-white);
	border-bottom: 2px solid var(--color-grey-light);
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	width: auto;
	word-wrap: break-word;
	padding: 10px 30px 30px;
}

/* Page title size/weight/line-height/padding */
.page-title {
	clear: both;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding: 10px 0 5px;
}

/* Page title colour, and colour for a linked page title */
.page-title,
.page-title a {
	color: var(--color-heading);
	text-decoration: none;
}

/* Page title link colour on hover/focus/active */
.page-title a:hover,
.page-title a:focus,
.page-title a:active {
	color: var(--color-link-hover);
}

/* Heading sizes within the page body */
.page-body h1 {
	font-size: 26px;
}

.page-body h2 {
	font-size: 20px;
	margin: 0 0 0.5em;
}

/* Main body heading colour, weight and bottom margin */
.page-body h1 {
	color: var(--color-black);
	font-weight: bold;
	margin: 0 0 .8125em;
}

/* Default table/cell border */
table,
th,
td {
	border: 1px solid var(--color-grey-light);
}

/* Table border model and outer spacing */
table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 28px;
	width: 100%;
}

/* Cell padding and border sides (collapsed-border look) */
table td {
	border-width: 0 1px 1px 0;
	padding: 7px;
	vertical-align: baseline;
}

/* Links table: fixed column widths so text wraps predictably */
.link-table.fixed-layout {
	table-layout: fixed;
	width: 100%;
}

/* Allow long link text to break within fixed-width cells */
.link-table.fixed-layout td,
.link-table.fixed-layout th {
	word-break: break-word;
}

/* Links table: subtle borders using a light grey */
.link-table,
.link-table th,
.link-table td {
	border-color: var(--color-grey-lighter);
}

/* Adjusts padding around table text. From Catch Box support forum */
.link-table td {
	padding: 4.5px;
}

/* Responsive images inside the page body */
.page-body img {
	max-width: 100%;
	height: auto;
}

/* Responsive, centred images inside sidebar widgets */
.widget img {
	max-width: 100%;
	text-align: center;
}

/* Small top margin for images inside paragraphs */
p img {
	margin-top: 0.4em;
}

/* Sidebar text size/line-height */
.widget-area {
	font-size: 13px;
	line-height: 1.62em;
}

/* Sidebar widget box: white card with rounded corners and bottom border */
.widget {
	background-color: var(--color-white);
	border-bottom: 2px solid var(--color-grey-light);
	-moz-border-radius: 5px;
	border-radius: 5px;
	clear: both;
}

/* Widget link weight, no underline by default */
.widget a {
	font-weight: 400;
	text-decoration: none;
}

/* Underline widget links on hover/focus/active */
.widget a:hover,
.widget a:focus,
.widget a:active {
	text-decoration: underline;
}

/* Footer top border */
#site-footer {
	border-top: 1px solid var(--color-grey-light);
	clear: both;
}

/* Footer box styling: background, borders, rounded bottom corners, text, padding */
#site-generator {
	background-color: var(--color-white);
	border-top: 1px solid var(--color-grey-light);
	border-bottom: 2px solid var(--color-grey);
	clear: both;
	display: block;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	color: var(--color-grey-dark);
	font-size: 12px;
	line-height: 2.2em;
	text-align: center;
	padding: 25px 30px;
	word-wrap: break-word;
}

/* Footer link colour and weight */
#site-generator a {
	color: var(--color-grey-darker);
	font-weight: bold;
}

/* Footer link hover colour */
#site-generator a:hover {
	color: var(--color-link-hover);
}

/* Footer copyright block: floated left */
#site-generator .copyright {
	clear: both;
	display: inline;
	float: left;
	text-align: left;
}

/* Footer "powered by" block: floated right */
#site-generator .powered {
	display: inline;
	float: right;
	text-align: right;
	line-height: 1.3em;
}

/* Print styles: strip chrome (nav, header image, footer) and simplify layout */
@media print {
	body {
		background: none !important;
		font-size: 10pt;
	}

	.site {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}

	#site-header {
		border-top: none !important;
		padding: 0;
	}

	#header-content {
		margin: 0;
	}

	#site-header img {
		display: none;
	}

	#primary-nav {
		display: none;
	}

	#main {
		border-top: none;
		box-shadow: none;
	}

	#main-content {
		float: left;
		margin: 0;
		width: 100%;
	}

	.page-title {
		font-size: 21pt;
	}

	.widget-area {
		display: none;
	}

	#site-footer {
		display: none;
	}

}

/* Tell old IE/Windows Phone to size the viewport to the device width */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/* Responsive breakpoint: shrink page/content widths below 1024px */
@media screen and (max-width: 1024px) {
	.site {
		width: 960px;
	}

	#main-content {
		width: 669px;
	}

	#site-generator .copyright,
	#site-generator .powered {
		width: 445px;
	}

	.site {
		margin: 25px auto;
	}

	#main {
		padding: 25px 25px 0;
	}

	#header-content {
		margin: 0 25px;
	}

	#header-content {
		padding: 15px 0;
	}

	.content-box,
p,
ul,
ol,
.widget {
		margin-bottom: 25px;
	}

	.content-box {
		padding: 10px 25px 25px;
	}

	.page-title {
		padding: 10px 0 5px;
	}

	#site-generator {
		padding: 20px 25px;
	}

	.page-body {
		padding-top: 20px;
	}

}

/* Responsive breakpoint: shrink page/column widths below 990px */
@media screen and (max-width: 990px) {
	.site {
		width: 910px;
	}

	#main-content {
		width: 619px;
	}

	#site-generator .copyright,
	#site-generator .powered {
		width: 420px;
	}

}

/* Responsive breakpoint: switch to a stacked single-column, mobile-menu layout below 960px */
@media screen and (max-width: 960px) {
	.site {
		width: 720px;
	}

	#main-content,
	#sidebar,
	#site-generator .copyright,
	#site-generator .powered {
		display: block;
		float: none;
		width: 100%;
	}

	#site-generator .copyright,
	#site-generator .powered {
		text-align: center;
	}

	#primary-nav ul.menu a {
		font-size: 15px;
		line-height: 2.7em;
		padding: 0 20px;
		text-align: left;
	}

	.menu-access-wrap {
		background-color: var(--color-grey-mobile-bg);
		clear: both;
		display: block;
		padding: 0;
		position: relative;
	}

	#primary-nav {
		background: none;
		background-color: var(--color-grey-mobile-bg);
		color: var(--color-grey-lighter);
		border: none;
	}

	#primary-nav ul.menu li:hover > a,
#primary-nav ul.menu a:focus {
		background: none;
		background-color: var(--color-grey-mobile-focus);
		color: var(--color-white);
	}

	#primary-nav ul.menu li {
		border-left: none;
		float: none;
	}

	.menu-access-wrap #primary-nav ul.menu li {
		border-bottom: 1px dotted var(--color-grey-light);
	}

	.site {
		margin: 20px auto;
	}

	#main {
		padding: 20px 20px 0;
	}

	#header-content {
		margin: 0 20px;
	}

	#primary-nav div {
		margin: 0;
	}

	#header-content {
		padding: 15px 0;
	}

	.content-box,
p,
ul,
ol,
.widget {
		margin-bottom: 20px;
	}

	.content-box {
		padding: 10px 20px 20px;
	}

	#site-generator {
		padding: 20px;
	}

	.page-body {
		padding-top: 20px;
	}

}

/* Responsive breakpoint: tighten sizing/spacing further below 767px (tablet) */
@media screen and (max-width: 767px) {
	.site {
		width: 600px;
	}

	.logo-wrap {
		display: block;
		float: none;
		text-align: center;
	}

	#header-content {
		text-align: center;
	}

	#site-generator {
		padding: 1em 0.5em;
	}

	#primary-nav ul {
		font-size: 12px;
	}

	.page-title,
	.page-body h1 {
		font-size: 22px;
	}

	.page-body h2 {
		font-size: 16px;
	}

	#site-generator {
		font-size: 11px;
	}

}

/* Responsive breakpoint: shrink page width further below 640px */
@media screen and (max-width: 640px) {
	.site {
		width: 460px;
	}

}

/* Responsive breakpoint: full-width layout with square corners below 479px (phone) */
@media screen and (max-width: 479px) {
	.site {
		width: 100%;
	}

	#site-header,
	#site-generator {
		border-radius: 0;
	}

	#site-generator {
		font-size: 10px;
	}

	.site {
		margin: 0 auto;
	}

	#main {
		padding: 15px 15px 0;
	}

	#header-content {
		margin: 0 15px;
	}

	#header-content {
		padding: 15px 0;
	}

	#site-generator {
		padding: 15px;
	}

	.content-box,
p,
ul,
ol,
.widget {
		margin-bottom: 15px;
	}

	.content-box {
		padding: 10px 15px 15px;
	}

	.page-title {
		padding: 10px 0 5px;
	}

	.page-body {
		padding-top: 15px;
	}

}

/* Responsive breakpoint: tighten spacing to the minimum below 320px (smallest phones) */
@media screen and (max-width: 320px) {
	input[type="text"] {
		width: 98%;
	}

	.page-body img {
		max-width: 92%;
		padding: 3%;
	}

	.content-box,
.widget {
		border-radius: 0;
	}

	#main {
		padding: 10px 0 0;
	}

	#header-content {
		margin: 0 10px;
	}

	#header-content {
		padding: 10px 0;
	}

	#site-generator {
		padding: 10px;
	}

	.content-box,
p,
ul,
ol,
.widget {
		margin-bottom: 10px;
	}

	.content-box {
		padding: 5px 10px 10px;
	}

	.page-title {
		padding: 8px 0 4px;
	}

}

/* Mobile menu bar background colour */
.menu-access-wrap {
	background-color: var(--color-menu-dark);
}