/*
 * The Piggery at Hole — single stylesheet.
 * Replaces bootstrap-3.3.7 + the WordPress "Twenty Thirteen" child-theme sheets
 * (style1/style2/style3.css) + genericons.css. Only the rules the live pages use
 * are kept, plus a small set of Bootstrap-3 form/grid classes the contact form needs.
 */

/* ------------------------------------------------------------------------ Font
 * The old theme asked for Open Sans via a hot-linked <link> to
 * http://fonts.googleapis.com — insecure, so it never loads on the live https
 * site. Every page therefore renders in the stack's fallback: Tahoma (Windows),
 * else Arial, else the platform sans. That fallback IS the site's real
 * appearance, so we reproduce it directly rather than self-hosting Open Sans.
 */

/* ---------------------------------------------------------------- Reset / base */
* { box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, nav, section, summary { display: block; }

html {
	font-size: 110%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

html, body, button, input, select, textarea {
	font-family: 'Tahoma', 'Arial', sans-serif;
}

body {
	overflow: hidden;
	color: #55626c;
	font-size: 14px;
	/* Theme used sub-400 weights, but the fallback face (Tahoma/Arial) has no
	   light weight, so the live site renders these as normal. */
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

a { color: #212b8d; text-decoration: none; }
a:focus { outline: thin dotted; }
a:active, a:hover { color: #6773bd; outline: 0; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Tahoma', 'Arial', sans-serif;
	line-height: 1.1;
	font-weight: 400;
	color: #717f8c;
}
h1 { font-size: 48px; margin: 33px 0; }
h2 { font-size: 30px; margin: 25px 0; }
h3 { font-size: 22px; margin: 22px 0; }
h4 { font-size: 20px; margin: 25px 0; }
h5 { font-size: 18px; margin: 30px 0; }
h6 { font-size: 16px; margin: 36px 0; }

p { margin: 0 0 24px; }

b, strong { font-weight: bold; }

menu, ol, ul { margin: 16px 0; padding: 0 0 0 40px; }
ul { list-style-type: square; }
nav ul, nav ol { list-style: none; list-style-image: none; }
li > ul, li > ol { margin: 0; }

img {
	border: 0;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

figure { margin: 0; }
form { margin: 0; }

table {
	border-bottom: 1px solid #ededed;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 14px;
	line-height: 2;
	margin: 0 0 20px;
	width: 100%;
}
caption, th, td { font-weight: normal; text-align: left; }
th { font-weight: bold; text-transform: uppercase; }
td { border-top: 1px solid #ededed; padding: 6px 10px 6px 0; }

/* Form fields */
button, input, select, textarea { font-size: 100%; margin: 0; max-width: 100%; vertical-align: baseline; }
button, input { line-height: normal; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
textarea { overflow: auto; vertical-align: top; }

button, input, textarea { border: 2px solid #d4d0ba; font-family: inherit; padding: 5px; }
input, textarea { color: #141412; }
input:focus, textarea:focus { border: 2px solid #c3c0ab; outline: 0; }

/* Buttons (Twenty Thirteen blue) */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #6a80bc;
	border: none;
	border-bottom: 3px solid #4b63a7;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 11px 24px 10px;
	text-decoration: none;
}
button:hover, button:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="button"]:hover, input[type="button"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus {
	background: linear-gradient(to bottom, #6a80bc 0%, #4b63a7 100%);
	outline: none;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	background: linear-gradient(to bottom, #4b63a7 0%, #6a80bc 100%);
	border: none;
	border-top: 3px solid #4b63a7;
	padding: 10px 24px 11px;
}

::-webkit-input-placeholder { color: #7d7b6d; }
:-ms-input-placeholder { color: #7d7b6d; }
::placeholder { color: #7d7b6d; }

/* Assistive text */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	left: 5px;
	top: 5px;
	text-decoration: none;
	width: auto;
	z-index: 100000;
}

/* -------------------------------------------------------- Images in content */
.entry-content img, .entry-summary img, .wp-caption { max-width: 100%; }
img[class*="align"], img[class*="size-"] { height: auto; }
img.size-full { height: auto; max-width: 100%; }

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.alignleft { margin: 5px 20px 5px 0; }
img.alignright { margin: 5px 0 5px 20px; }
img.aligncenter { margin: 5px auto; }
img.alignnone { margin: 5px 0; }

/* gallery.php inline helpers */
.fl-l { float: left; }
.fl-r { float: right; }
.mb { margin-bottom: 20px; }

/* ---------------------------------------------------------------- Structure */
.site {
	background-image: url(../imgs/daffodils-white-on-blue.jpg);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #ccdbf1;
	margin: 0 auto;
	max-width: 1600px;
	width: 100%;
}

.site-header {
	position: relative;
	background-color: #fffaf0;
	margin: 0;
	padding-bottom: 15px;
	background-image: url(../imgs/daffodils-blue-onwhite.jpg);
	background-repeat: no-repeat;
	background-position: right;
}
.site-header .home-link {
	display: block;
	margin: 0 auto;
	max-width: 1040px;
	min-height: 30px;
	padding: 0;
	text-decoration: none;
	width: 100%;
}
.site-title { margin: 0; padding: 5px 0; font-size: 70px; font-weight: 400; }
.site-description {
	margin: 0;
	font-family: 'Tahoma', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	padding-bottom: 5px;
}

.site-main {
	position: relative;
	margin: 0 auto;
	max-width: 1080px;
	padding: 0;
	width: 100%;
}
.site-main:after { content: ""; display: table; clear: both; }

/* ---------------------------------------------------------------- Navigation */
.navbar { max-width: 200px; float: left; margin: 0 10px 30px; }
.navbar ul { padding: 0; }
.navbar li { list-style: none; }

div.nav-menu { border-left: 5px solid #fffaf0; }
ul.nav-menu, div.nav-menu > ul { margin: 0; padding: 0; }
.nav-menu li { display: block; position: relative; }
.nav-menu li a { display: block; width: 100%; line-height: 1.1; padding: 10px 15px; text-decoration: none; }
.nav-menu .current_page_item > a { font-weight: bold; }

.menu-toggle { display: none; }

/* ---------------------------------------------------------------- Content */
.entry-header, .entry-content, .entry-meta {
	margin: 0 0 0 220px;
	padding: 10px;
	max-width: 804px;
	width: 100%;
}
.entry-header { background-color: #fffaf0; text-align: center; }
#entry-title, .entry-title { font-weight: 400; margin: 0; }

.entry-content { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; }
div.entry-content { background-color: #fffaf0; }
.entry-content:before, .entry-content:after { content: ""; display: table; }
.entry-content:after { clear: both; }
.entry-content a:hover { color: #ea9629; }

footer.entry-meta { margin-top: 24px; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background-color: #e3e3f9; color: #686758; font-size: 14px; text-align: center; }
.site-footer a { color: #686758; }
.site-info { margin: 0 auto; max-width: 1040px; padding: 30px 0; width: 100%; }

/* ---------------------------------------------- Bootstrap-3 shims (contact) */
.row { margin-left: -15px; margin-right: -15px; }
.row:before, .row:after,
.form-group:before, .form-group:after { content: " "; display: table; }
.row:after, .form-group:after { clear: both; }

.form-group { margin-bottom: 15px; }

.col-sm-1, .col-sm-4, .col-sm-12 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 768px) {
	.col-sm-1, .col-sm-4, .col-sm-12 { float: left; }
	.col-sm-12 { width: 100%; }
	.col-sm-4 { width: 33.33333333%; }
	.col-sm-1 { width: 8.33333333%; }
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.form-control:focus { border-color: #66afe9; outline: 0; }
textarea.form-control { height: auto; }

.input-group { position: relative; display: table; border-collapse: separate; }
.input-group .form-control { position: relative; z-index: 2; width: 100%; margin-bottom: 0; display: table-cell; }
.input-group-addon {
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
	display: table-cell;
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
}
.input-group-addon:first-child { border-right: 0; border-radius: 4px 0 0 4px; }
.input-group .form-control:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; }

.btn {
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- Media queries */
@media (max-width: 1599px) {
	.site { border: 0; }
	.site-header { padding-left: 10px; }
}

@media (max-width: 1069px) {
	.entry-header, .entry-content { max-width: 750px; }
}

@media (max-width: 999px) {
	.entry-header, .entry-content { max-width: 600px; }
}

@media (max-width: 821px) {
	.entry-header, .entry-content { max-width: 500px; }
}

@media (max-width: 767px) {
	.entry-content img.alignleft { margin-left: 0; }
	.entry-content img.alignright { margin-right: 0; }
	.entry-header, .entry-content { max-width: 400px; }
	.site-description { margin-right: 215px; }
}

@media (max-width: 643px) {
	.site-title { font-size: 30px; }

	.entry-header, .entry-content {
		margin: 0;
		max-width: 604px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.navbar { float: none; max-width: 604px; margin: 0 0 0 5px; }

	/* Small menu — every state identical so it never shifts on hover/tap */
	.menu-toggle,
	.menu-toggle:hover,
	.menu-toggle:focus,
	.menu-toggle:active {
		cursor: pointer;
		display: inline-block;
		font: bold 16px/1.3 'Tahoma', 'Arial', sans-serif;
		margin: 0;
		padding: 12px 0 12px 20px;
		background: none;
		border: 0;
		color: #717f8c;
		outline: none;
	}
	.menu-toggle:after { content: " \25BE"; font-size: 12px; }
	.toggled-on .menu-toggle:after { content: " \25B4"; }

	ul.nav-menu, div.nav-menu > ul { display: none; }
	.toggled-on .nav-menu, .toggled-on .nav-menu > ul { display: block; margin-left: 0; padding: 0; width: 100%; }
	.toggled-on .nav-menu li { display: block; }

	#entry-title, .entry-title { font-size: 22px; font-weight: bold; }
}

@media (max-width: 359px) {
	.site-title { font-size: 26px; }
	.site-description { margin-right: 130px; }
}

/* ---------------------------------------------------------------- Print */
@media print {
	body { background: none !important; color: #000; font-size: 10pt; }
	.site { max-width: 98%; }
	.site-header { background-image: none !important; }
	.site-footer, .navbar, .main-navigation { display: none; }
	.entry-header, .entry-content, .entry-meta { margin: 0; width: 100%; }
	#entry-title, .entry-title { font-size: 21pt; }
}
