/*
Theme Name: Puddletown
Author: Murmur Creative
Author URI: http://murmurcreative.com
Description: Custom Wordpress theme built for Puddletown
Version: 0.9
License: GNU General Public License
Tags: Murmur Creative

This theme is built on top of a modified Toolbox 1.4 dev theme.
*/

/* =Clear Fix
-------------------------------------------------------------- */

.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

.cf {
    zoom:1;
}

.qa-faqs .cf:before,
.qa-faqs .cf:after {
    content:none;
    display:inherit;
}

/* =Type
-------------------------------------------------------------- */

body {
	font: 300 13px/18px "teimer-web", "ff-tisa-web-pro", Arial, "Helvetica Neue", Helvetica, sans-serif;
	color:#929293;
}

a, a:active, a:visited {
	color:#0092C8;
	text-decoration: none;

	-webkit-transition-property:color, background;
	-webkit-transition-duration: 0.25s, 0.5s;
	-webkit-transition-timing-function: linear, ease-in;
}

a:hover {
	color:#0092C8;
}

h1, h2, h3, h1 a, h2 a, h3 a, h1 a:visited, h2 a:visited, h3 a:visited{
	color:#0092C8;
	font-family: "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
}

h1 {
	border-bottom:4px solid #929293;
	padding:0 0 8px;
	text-transform: uppercase;
	letter-spacing:3px;
}
.blog h1 {
	border-bottom:2px solid #929293;
}
.widget h1 {
	border-bottom:none;
	color:#929293;
	font-size:14px;
	font-weight:normal;
	margin: .75em 0 .5em;
	letter-spacing:0;
}
.single-product h1 {
	font-size:14px;
}

hr {
	border-top: 2px solid #929293;
	border-left:none;
	border-right:none;
	border-bottom:none;
}

.cap {
	text-transform: uppercase;
}

strong {
	font-weight:bold;
}

/* =Structure
-------------------------------------------------------------- */

html, body {
	height: 100%;
}
body {
	margin: 1em 1em 0;
	background:#f4f3ef;
}

#page {
	display: block;
	max-width: 880px;
	position:relative;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

@media (min-width: 800px) {
	#page {
		margin-bottom: -252px;
	}
}
@media (min-width: 800px) {
	#primary {
		float: left;
		margin: 0 -240px 0 0;
		width: 100%;
	}
	#content {
		margin: 0 280px 0 0;
	}
	.blog #main,
	.archive #main,
	.single #main {
		float:left;
		width:100%;
		margin:65px 0 0;
	}
	#main .widget-area {
		float: right;
		overflow: hidden;
		width: 220px;
	}
}

#colophon {
	clear: both;
	display: block;
	padding: 10px 20px 20px 20px;
    border-top: 1px solid #999;
    margin: 10px 0 0 0;
	width: 100%;
}

@media(max-width: 660px) {
	#colophon {
		width: auto;
	}
}

/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}

/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* =Header
-------------------------------------------------------------- */

@media (min-width: 500px) {
	#branding {
		padding:91px 0 0;
	}
}

#site-logo {
	display:block;
	background:url(img/puddletown-school.png) 0 0 no-repeat;
	width:255px;
	height:70px;
	text-indent:-3200px
}
.home #site-logo {
	width:256px;
	height:162px;
	margin-top: -91px;
	background: none;
	text-indent: 0;
}
.blog #site-logo,
.archive #site-logo,
.single #site-logo {
	background-position: 0 -70px;
}

#site-mascot {
	display:block;
	background:url(img/puddletown-school-mascot.png) 0 0 no-repeat;
	width:176px;
	height:186px;
	text-indent:-3200px
}

#site-mascot.link-to-journal {
	background-position: 0 0; 
}

#site-mascot.link-to-home {
	background-position: 0 -186px;
}

@media (min-width: 500px) {
	#site-mascot {
		position:absolute;
		top:0;right:10px;
	}
}

/* styles here for small screen */
@media (max-width:500px) {
	#site-mascot {
		display: none;
	}
}


/* =Menu
-------------------------------------------------------------- */

#access, #subaccess {
	font: 13px/18px "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
	color:#929293;
	border-top: 4px solid #929293;
	display: block;
	margin: 16px auto 0;
	padding: .5em 0 0;
	width: 100%;
	text-transform: uppercase;
}
#subaccess {
	border-top: 2px solid #929293;
	margin:0 auto 1em;
}
#access ul, #subaccess ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	row-gap: 0;
}
#access ul {
	justify-content: space-between;
}
#subaccess ul {
	justify-content: start;
	column-gap: 12px;
}
#access a {
	display: block;
	xpadding: .5em 2.5em .75em 0;
	padding: 0;
	text-decoration: none;
	font-weight:bolder;
	color:#929293;

	-webkit-transition-property:color, background;
	-webkit-transition-duration: 0.25s, 0.5s;
	-webkit-transition-timing-function: linear, ease-in;
}
#subaccess a {
	display: block;
	xpadding: .5em .75em .75em 0;
	padding: 0;
	text-decoration: none;
	font-weight:normal;
	color:#929293;

	-webkit-transition-property:color, background;
	-webkit-transition-duration: 0.25s, 0.5s;
	-webkit-transition-timing-function: linear, ease-in;
}
#subaccess a:after { content: " / "; margin: 0 0 0 10px; }
#subaccess li:last-child a:after { content: "" }
#access li:last-child a,
#subaccess li:last-child a {
	padding-right:0;
}
#access a, #subaccess a,
#access a:active, #subaccess a:active,
#access a:visited, #subaccess a:visited {
	color:#929293;
}

#access a:hover,
#access .current_page_item a,
#access .current-page-ancestor a {
	color:#0092C8;
}
#subaccess a:hover,
#subaccess .current_page_item a {
	color:#5a5a5a;
}

@media (max-width:660px) {
	#access ul,
	#subaccess ul {
		justify-content: start;
	}
}

/* =Content
-------------------------------------------------------------- */

.page-template-page-secure-story-php .entry-content img,
.archive.date .entry-content img,
.blog .entry-content img,
.single .entry-content img {margin-right:0}

.post {
	clear:both;
	padding: 5em 0;
}
.entry-meta {
	clear: both;
	display: block;
}
.post-meta {
	font: 14px/18px "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
	color:#929293;
}
.single-author .entry-meta .byline {
	display: none;
}

@media (min-width: 800px) {
	.full-width .entry-content {
		margin:0 300px 0 0;
	}
	.entry-content img {margin-right:-300px}
	.post {
		padding: 0.5em 0 5em;
	}

	.page-id-6215 .full-width .entry-content {
		margin:0;
	}
	.page-id-6215 .full-width .entry-content img {margin-right:0}
}

#content nav {
	display: block;
	overflow: hidden;
}
#content nav .nav-previous {
	float: left;
	width: 50%;
}
#content nav .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#content #nav-above {
	display: none;
}
.paged #content #nav-above,
.single #content #nav-above {
	display: block;
}
#nav-below {
	margin: 1em 0 0;
}
.page-link {
	clear: both;
	margin: 0 0 1em;
}
.page .edit-link {
	clear: both;
	display: block;
}

/* 404 page */
.error404 .widget {
	float: left;
	width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
	margin-right: 1em;
}
.error404 .widget_tag_cloud {
	clear: both;
	float: none;
	width: 100%;
}

/* Notices */
.post .notice,
.error404 #searchform {
	background: #eee;
	display: block;
	padding: 1em;
}

/* Image Attachments */
.image-attachment div.entry-meta {
	float: left;
}
.image-attachment nav {
	float: right;
	margin: 0 0 1em 0;
}
.image-attachment .entry-content {
	clear: both;
}
.image-attachment .entry-content .entry-attachment {
	background: #eee;
	margin: 0 0 1em;
	padding: 1em;
	text-align: center;
}
.image-attachment .entry-content .attachment {
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* Aside Posts */
.format-aside .entry-header {
	display: none;
}
.single .format-aside .entry-header {
	display: block;
}
.format-aside .entry-content,
.format-aside .entry-summary {
	padding-top: 1em;
}
.single .format-aside .entry-content,
.single .format-aside .entry-summary {
	padding-top: 0;
}

/* Gallery Posts */
.format-gallery .gallery-thumb {
	float: left;
	margin: 0 1em 0 0;
}

/* Image Posts */
.format-image .entry-header {
	display: none;
}
.single .format-image .entry-header {
	display: block;
}
.format-image .entry-content,
.format-image .entry-summary {
	padding-top: 1em;
}
.single .format-image .entry-content,
.single .format-image .entry-summary {
	padding-top: 0;
}


/* =Images
-------------------------------------------------------------- */

a img {
	border: none;
}
p img {
	margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img,
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption,
img.alignleft,
img.alignright {
	max-width: 100% !important; /* When images are too wide for containing element, force them to fit. */
	height: auto !important; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin-right: 2em;
}
img.alignright {
	margin-left: 2em;
}
.wp-caption {
	padding: .5em;
	text-align: center;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	margin: .5em;
}
.gallery-caption {
}
.wp-smiley {
	margin: 0;
}

iframe {
	max-width: 100%;
}


/* =Forms
-------------------------------------------------------------- */

#searchform label {
	display: none;
}
#searchform input#s {
	width: 60%;
}
input#s, input#qasearch {
	margin: 0 .5em 0 0;
	width: 60%;
}


/* Class for labelling required form items */
.required {
	color: #cc0033;
}

.woocommerce-ordering,
.woocommerce-result-count {
	display: none;
}



/* Additions by Kevin Bennett for online application form */
.enrollment{
    font: 16px "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
}
.enrollment label {
    text-transform: uppercase;
    font: 16px "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
    display: inline-block;
    margin-top: 2px;
}

.enrollment input,
.enrollment textarea,
.enrollment select {
    font: 16px "futura-pt", Futura, "Trebuchet MS", Arial, sans-serif;
}

.enrollment input[type=text],
.enrollment input[type=date],
.enrollment input[type=tel],
.enrollment input[type=email],
.enrollment select,
.enrollment input[type=submit]{
    min-height: 28px;
    padding-left: 8px;
}

.enrollment textarea{
    height: 5em;
}

.enrollment input[type=text],
.enrollment textarea{
    width: 100%;
}

.enrollment input[type=date],
.enrollment input[type=tel],
.enrollment input[type=email],
.enrollment select{
    width: 200px;
}

.enrollment input[type=submit]{
    height: 48px;
    padding: 0 20px;
    text-transform: uppercase;
    font-weight: bold;
    color: #0092C8;
    cursor: pointer;
}

.wpcf7-validation-errors{
    text-transform: uppercase;
    color: red;
    border: none !important;
}

.wpcf7-mail-sent-ok {
    text-transform: uppercase;
    color: #398f14;
    border: none !important;
    font-size: 24px;
}
.wpcf7-response-output{
    margin: 0 !important;
    padding: 0 !important;
}

a[href], input[type='submit'], input[type=checkbox], input[type='image'], label[for], select, button, .wpcf7-radio label {
    cursor: pointer;
}

.enrollment .wpcf7-list-item{
    margin-left: 0;
    margin-right: 8px;
}

/* =Comments
-------------------------------------------------------------- */

article.comment {
	display: block;
}
#respond input[type=text] {
	display: block;
	width: 60%;
}
#respond textarea {
	display: block;
	margin: 0 0 1em;
	width: 80%;
}
#respond .form-allowed-tags {
	clear: both;
	width: 80%;
}
#respond .form-allowed-tags code {
	display: block;
}


/* =Widgets
-------------------------------------------------------------- */

.widget {
	display: block;
	border-bottom: 2px solid #929293;
	padding:0 0 15px;
	margin:0 0 15px;
}
.widget a,
#secondary a h2 {
	color:#FBAE2E;
}
.widget-area .widget_search {
	overflow: hidden;
	color:#FBAE2E;
}
.widget-area .widget_search input {
	float: left;
}

.widget ul {
	padding:0;
	margin:0;
	list-style:none;
}

/* =Home Slide (SudoSlider)
-------------------------------------------------------------- */

#slideshow {
	max-width: 880px;
	position: relative;
	clear:both;
}

#slider {
	max-width: 880px;
}

.graphic,
.prevBtn,
.nextBtn{
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	text-indent: -8000px;
}

.prevBtn, .nextBtn {
	display: block;
	width: 103px;
	height: 103px;
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -50px;
	z-index: 1000;
	background: url(img/slide-nav-left.png) no-repeat 0 0;
	cursor: pointer;
	 opacity: 0;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.prevBtn:hover,
.nextBtn:hover {
  opacity: 1;
}

.nextBtn {
	right: 20px;
	left: auto;
	background: url(img/slide-nav-right.png) no-repeat 0 0;
}

/* Numeric Navigation */
ol.numericControls {
  margin:1em 0;
  padding:0;
  height:28px;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: 10;
}
ol.numericControls li {
  margin:0 10px 0 0;
  padding:0;
  display: inline-block;
  height:28px;
  line-height:28px;
}
ol.numericControls li a {
  display: block;
  width: 16px;
  height: 10px;
  overflow: hidden;
  text-indent: -5150em;
  background: url('img/dot.png') no-repeat center center;
  transition: all 300ms ease-in;
}
ol.numericControls li.current a {
  background: url('img/dot-active.png') no-repeat center center
}
ol.numericControls li a:focus, .prevBtn a:focus, .nextBtn a:focus {
  outline:none;
}

/* =Bottom Buckets
-------------------------------------------------------------- */

.buckets {
	display: flex;
	justify-content: space-between;
	margin: 9px 0 0 0;
}

@media (max-width: 500px) {
	.buckets {
		flex-direction: column;
		gap: 10px;
		align-items: center;
	}
}

.buckets a {
	display:inline-block;
	width:280px;
	height:170px;
	overflow:hidden;
	position:relative;
}

.buckets a img {
	opacity:1;
	-webkit-transition: opacity 0.25s ease-in-out;
	-moz-transition: opacity 0.25s ease-in-out;
	-o-transition: opacity 0.25s ease-in-out;
	-ms-transition: opacity 0.25s ease-in-out;
	transition: opacity 0.25s ease-in-out;
}

.buckets a img:hover {
	opacity:.7;
}

#page .addthis {
	margin: 8px 0 0;
	display: block;
}
#page .addthis > span {
	float: none;
	display: inline-block;
}
#page .addthis .chicklets {
	width: 16px;
	overflow: hidden;
	padding: 0;
	text-indent: -5150em;
	margin: 0 0 9px;
}
@media (min-width: 900px) {
	#page .addthis {
		display: inline-block;
		width: 16px;
		margin: 0;
	}
	#page .addthis > span {
		display: block;
	}
	#page .addthis .chicklets {
		display: block;
	}
	.st_facebook {
		margin-top: 8px;
	}
}

.woocommerce-page .addthis_toolbox {
	display: none;
}


/* =Bottom Affiliate Logos
-------------------------------------------------------------- */
.affiliate-logos {
	margin: 0.5rem 0;
	text-align: center;
}

.affiliate-logos img {
  margin: 0.5rem;
}


/* =Footer
-------------------------------------------------------------- */

.footer-text {
	text-align: center;
	margin-top: 7px;
}

/* Footer redesign (2023) */
.pt-footer {
  clear: both;
  margin-top: 1em;
  border-top: 1px solid black;
  display: flex;
  flex-flow: column;
  text-align: center;
  gap: 2px;
  font-size: 12px;
  clear: both;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 480px) {
  .pt-footer {
    flex-flow: row;
    text-align: left;
  }
	.pt-footer__linkblock a {
		margin-left: 10px;
	}
}

.pt-footer__group {
  background-color: transparent;
  flex: 1;
  padding: 0 1em;
}

.pt-footer__group--social {
	flex: unset;
}

@media (max-width: 480px) {
	.pt-footer__group--disclaims {
		order: 3;
	}
	.pt-footer__group--social {
		order: 2;
	}
	.pt-footer__group--contact {
		order: 1;
	}
}

.pt-footer__social-link {
  display: block;
  padding: 5px 0;
}

.pt-footer__linkblock a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.pt-footer__linkblock a:hover {
  text-decoration: underline;
}

/* =Woo
-------------------------------------------------------------- */
.woocommerce #page ul.products li.product,
.woocommerce-page #page ul.products li.product {
	width: 250px;
	height: 340px;
}

.woocommerce #page ul.products li.product:nth-child(n+1),
.woocommerce-page #page ul.products li.product:nth-child(n+1) {
	background: #eee;
	margin-right: 36px;
	border: 1px solid #ddd;
	padding: 15px;
}

.woocommerce #page ul.products li.product:nth-child(2n+2),
.woocommerce-page #page ul.products li.product:nth-child(2n+2) {
	margin-right: 0;
}

.woocommerce #page ul.products li.product a img,
.woocommerce-page #page ul.products li.product a img {
	width: auto;
	max-width: 100%;
}

.page.woocommerce .col2-set .col-1,
.page.woocommerce-page .col2-set .col-1,
.page.woocommerce .col2-set .col-2,
.page.woocommerce-page .col2-set .col-2 {
	float: none;
	width: 100%;
}

@media (min-width: 800px) {
	.woocommerce #page div.product div.images,
	.woocommerce #page #content div.product div.images,
	.woocommerce-page #page div.product div.images,
	.woocommerce-page #page #content div.product div.images {
		width: 60%;
	}

	.woocommerce #page div.product div.summary,
	.woocommerce #page #content div.product div.summary,
	.woocommerce-page #page div.product div.summary,
	.woocommerce-page #page #content div.product div.summary {
		width: 36%;
	}

	.page.woocommerce .col2-set .col-1,
	.page.woocommerce-page .col2-set .col-1 {
		width: 48%;
		float: left;
	}
	.page.woocommerce .col2-set .col-2,
	.page.woocommerce-page .col2-set .col-2 {
		width: 48%;
		float: right;
	}
}