/**
 * Content CSS for Northern Greenhouse
 */



/** GLOBAL PROPERTIES **/

main a {
	color: rgb(18,106,135);
	text-decoration: none;
	border-bottom: 1px dotted rgb(18,106,135);
}

	main:not(.is-mobile) a:hover {
		color: rgb(8,79,102);
		text-decoration: none;
		border-bottom: 1px solid rgb(8,79,102);
	}


/* main header */
main > h1 {
	display: block;
	padding: 10px 0px 10px 0px;

	font-family: 'latobold';
	font-size: 22px;
	color: rgb(204,255,204);
	background-color: rgb(8,84,46);

	text-transform: capitalize;
}

	/* main content header */
	main .centering h2 {
		display: block;
		margin: 35px 0px 20px 0px;

		font-family: 'latolight';
		font-size: 40px;
		color: rgba(8,84,46,.85);
	}

	/* content sub-header */
	main .centering h3 {
		margin: -10px 0px 20px 0px;

		font-family: 'latobold';
		font-size: 15px;
		color: rgba(8,84,46,.65);
	}

	/* in-content / content section heading */
	main .centering h4 {
		margin: 25px 0px 10px 0px;

		font-family: 'latobold';
		font-size: 24px;
		color: rgba(0,0,0,.6);
		line-height: 1.5;

		text-transform: capitalize;
	}

	/* in-content / content section heading */
	main .centering h5 {
		margin: 30px 0px 20px 0px;

		font-family: 'latobold';
		font-size: 19px;
		color: rgba(0,0,0,.5);
		line-height: 1.5;
	}

	/* in-content / content section heading */
	main .centering h6 {
		margin: 15px 0px 5px 0px;

		font-family: 'latobold';
		font-size: 17px;
		color: rgba(0,0,0,.85);
		line-height: 1.5;
	}

	/* content paragraphs */
	main .centering p {
		margin-bottom: 15px;

		font-family: 'latoregular';
		font-size: 17px;
		color: rgba(0,0,0,.75);
		line-height: 1.75;
	}

		/* add margin for first-child paragraphs on pages with no header */
		main .centering > p:first-child {
			margin-top: 20px;
		}

		/* fraction notation */
		main .centering p span.frac {
			display: inline-block;
			margin: auto -2px auto -5px;
			transform: scale(0.75) scaleX(1.1);
		}

			/* supertext for fraction notation */
			main .centering p span.frac > sup {
				display: inline-block;
				vertical-align: super;
				font-size: 10px;
				margin-right: 3px;
			}

			/* subtext for fraction notation */
			main .centering p span.frac > sub {
				display: inline-block;
				vertical-align: sub;
				font-size: 10px;
			}

	/* signature paragraph */
	main .centering p.content-sign {
		margin-left: 20px;
		font-weight: bold;
	}
		/* signature second line */
		main .centering p.content-sign > span {
			font-size: 15px;
			font-weight: normal;
		}

	/* unordered lists */
	main .centering ul {
		display: block;
		margin-bottom: 15px;
	}

		/* list item */
		main .centering ul > li {
			margin-left: 35px;

			font-family: 'latoregular';
			font-size: 17px;
			color: rgba(0,0,0,.75);
			line-height: 1.75;
		}

			/* bullet image */
			main .centering ul > li:before {
				content: '';
				position: absolute;
				display: inline-block;
				margin: 10px 0px 0px -23px;
				width: 15px;
				height: 15px;
				background-image: url('/assets/images/arrow-bullet.png');
				background-size: 15px;
				background-repeat: no-repeat;
				opacity: 0.75;
			}

			main .centering ul > li:hover:before {
				opacity: 1;
			}

	/* address block */
	main .centering address {
		display: block;
		position: relative;
		width: 350px;

		font-family: 'latoregular';
		font-size: 19px;
		color: rgba(0,0,0,.65);
		line-height: 1.65;
		white-space: nowrap;
	}

		/* address indented */
		main .centering address.indent {
			margin: 25px;
			padding: 20px;
		}

		/* address with background pattern */
		main .centering address.bg {
			background-image: url('/assets/images/flowery-green-repating.jpg');
		}
			
			
	/* expandable/collapsable container with green leafy background */
	main .centering div.tidybox-collapsable {
		display: inline-block;
		padding: 10px;
		margin: 5px 5px 5px 0px;
		width: auto;
		/* height: 17px; */
		
		font-family: 'latoregular';
		font-size: 19px;
		color: rgba(0,0,0,.65);
		line-height: 1.65;
		
		background-image: url('/assets/images/flowery-green-repating.jpg');
		overflow: hidden;
		border: 1px solid transparent;
		
		transition: all 0.15s linear 0s;
	}
		main .centering div.tidybox-collapsable p {
			line-height: 1.65;
		}
	
		main .centering div.tidybox-collapsable.expanded,
		main .centering div.tidybox-collapsable.expanded > div.collapsable-contents {
			display: block;
		}
	
		main .centering div.tidybox-collapsable > div.collapsable-contents {
			display: none;
		}
	
		/* header inside exp/clsp container */
		main .centering div.tidybox-collapsable > h5 {
			margin: 0px;
		}
		
		main .centering div.tidybox-collapsable:hover {
			filter: brightness(.9) contrast(1.25);
			border: 1px solid rgba(0,0,0,.35);
			text-shadow: 1px 1px 0px white;
			color: black;
			cursor: pointer;
		}

	/* picture box default styling */
	main .centering .picbox {
		display: block;
		margin: 20px 0px 20px 0px;
		/* padding: 20px 0px 20px 0px; */
		padding: 20px;

		background-image: url('/assets/images/flowery-green-repating.jpg');
		background-repeat: repeat-x;
		background-size: cover;

		text-align: center;
		font-family: 'bodoni_btroman';
		font-size: 17px;
		color: rgba(0,0,0,.75);
		line-height: 1.5;

		clear: both;
	}

		/* caption */
		/* main .centering .picbox > figcaption {
			display: block;
			margin: 5px 0px 20px 0px;
			padding: 0px 15px 0px 15px;

			font-family: 'bodoni_btroman';
			font-size: 17px;
			color: rgba(0,0,0,.75);
			line-height: 1.5;
		} */

		/* picbox with no background */
		main .centering .picbox.blended {
			background-image: none;
		}

		/* picbox to the right */
		main .centering .picbox.side {
			display: inline-block;
			max-width: 300px;
			float: right;
			margin: 0px 0px 20px 20px;
		}

			/* image */
			main .centering .picbox img {
				position: relative;
				display: block;
				max-width: 800px;
				height: auto;
				margin-left: auto;
				margin-right: auto;
			}

				/* fill side containers */
				main .centering .picbox.side img {
					position: relative;
					width: 100%;
					height: auto;
					margin-bottom: 20px;
				}

			/* image in side container with caption */
			main .centering .picbox.captioned:not(.multiple) img {
				margin-bottom: 20px;
			}

			main .centering .picbox.captioned.multiple img:not(:first-child),
			main .centering .picbox.captioned.multiple a:not(:first-child):not(.nopic),
			main .centering .picbox.captioned.multiple a:not(:first-child):not(.nopic):hover {
				display: block;
				margin-top: 30px;
				text-decoration: none;
				border: none;
			}

	/* feature-box */
	main .centering div.feature-box {
		padding: 20px;
		background-image: url('/assets/images/flowery-green-repating.jpg');
	}
		/* headers in feature-box */
		main .centering div.feature-box h1:first-of-type,
		main .centering div.feature-box h2:first-of-type,
		main .centering div.feature-box h3:first-of-type,
		main .centering div.feature-box h4:first-of-type,
		main .centering div.feature-box h5:first-of-type,
		main .centering div.feature-box h6:first-of-type {
			margin-top: 0px;
		}

		/* feature box floated to right */
		main .centering div.feature-box.side {
			margin-top: 10px;
			width: 300px;
			float: right;
			clear: both;
		}

	/* fixed-width font */
	main .centering pre {
		display: inline-block;
		margin: 0px 15px 15px 15px;
		padding: 10px;

		font-family: 'ibm_plex_monoregular', monospace, Courier New;
		font-size: 16px;
		color: rgb(8,84,46);
		white-space: pre-wrap;
		line-height: 1.25;

		background-color: rgba(204,255,204,.5);
	}

	/* emphasized element */
	main .centering em {
		font-family: 'latobold';
	}

	/* button link */
	main .centering .button {
		display: inline-block;
		width: auto;
		margin: 50px auto 50px auto;
		padding: 10px 25px 10px 25px;

		font-family: 'latolight';
		font-size: 20px;
		color: black;
		line-height: 1.35;
		text-align: center;
		text-shadow: 1px 1px 0px rgba(255,255,255,.5);

		background: linear-gradient(rgb(132,216,222), rgb(54,149,156));
		background: -moz-linear-gradient(rgb(132,216,222), rgb(54,149,156));
		background: -webkit-linear-gradient(rgb(132,216,222), rgb(54,149,156));
		background: -o-linear-gradient(rgb(132,216,222), rgb(54,149,156));
		background: -ms-linear-gradient(rgb(132,216,222), rgb(54,149,156));

		border: 0px;
		border-radius: 3px;

		box-shadow: 1px 1px 1px rgba(0,0,0,.25);
	}

		/* emphasized button */
		main .centering .button.em {
			font-size: 25px;
			font-family: 'latobold';
		}

		/* button fills width */
		main .centering .button.block {
			display: block;
			position: relative;
			width: calc( 75% - 50px );
		}

		/* float button right */
		main .centering .button.side {
			float: right;
			margin-left: 25px;
		}

			/* effects */
			main .centering .button:not(:disabled):hover {
				color: white;
				background: rgb(44,123,129);
				text-shadow: 1px 1px 0px rgba(0,0,0,.5);
				box-shadow: 2px 2px 2px rgba(0,0,0,.25);
				border: none;
			}
			main .centering .button:not(:disabled):active {
				box-shadow: 0px 0px 50px rgba(0,0,0,.5) inset;
			}


		/* metadata */
		main .centering figure {
			display: block;
			margin-bottom: 15px;
			font-size: 16px;
			color: rgba(0,0,0,.5);
		}

			/* metadata in button link */
			main .centering .button > figure {
				display: block;
				margin-top: 10px;
				margin-bottom: 0px;

				text-align: center;
				color: rgba(0,0,0,.75);
				text-shadow: none;
			}
				main .centering .button:hover > figure {
					color: rgba(255,255,255,.75);
				}


		/* forms */
		main .centering form {
			display: block;
			position: relative;
			width: 80%;
			margin: 25px auto 0px auto;
			font-size: 0px; /* collapse spacing */
		}

			/* form that fills screen width */
			main .centering form.full-width {
				width: 100%;
			}

			/* form info text */
			main .centering form p.info {

			}

			/* payment method icon images container */
			main .centering form .payment-methods {
				float: right;
			}

				/* payment method icon images */
				main .centering form .payment-methods > img {
					margin-left: 5px;
				}

			/* success message (hidden by default) */
			main .centering form div#success {
				display: none;
			}

				/* success message shown */
				main .centering form div#success.show {
					display: block;
				}

			/* field label */
			main .centering form > label {
				display: block;
				position: relative;
				width: 100%;

				font-family: 'latoregular';
				font-size: 17px;
				margin-bottom: 35px;

				clear: both;
			}

				/* additional info */
				main .centering form p {
					display: block;
					margin-top: 10px;
					line-height: 1.25;
				}

					/* error containers */
					main .centering form p.error {
						padding: 15px;

						text-align: center;
						color: red;
						font-family: 'latobold';
						font-size: 18px;

						background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAP/GRiMqS7AwMAAAEA3BftfcZTcAAAAAElFTkSuQmCC);
					}

				/* field */
				main .centering form input[type="text"],
				main .centering form input[type="number"],
				main .centering form input[type="email"],
				main .centering form select,
				main .centering form textarea {
					display: block;
					position: relative;
					width: calc( 100% - 20px );
					padding: 10px;
					margin-top: 10px;

					font-family: 'latoregular';
					font-size: 17px;
					color: rgba(0,0,0,.85);

					border: 0px;
					background-color: rgba(84,187,194,.15);
					border-bottom: 1px solid rgb(8,84,46);
				}

					/* hide browser controls on number fields */
					main .centering form input[type="number"] {
						-webkit-appearance: none;
						-moz-appearance:textfield;
					}

					/* when focused */
					main .centering form input[type="text"]:focus,
					main .centering form input[type="number"]:focus,
					main .centering form input[type="email"]:focus,
					main .centering form textarea:focus {
						background-color: rgba(84,187,194,.35);
					}

				/* textarea */
				main .centering form textarea {
					height: 175px;
				}

				/* submit button */
				main .centering form input[type="submit"] {
					min-width: 250px;
					cursor: pointer;
				}

				/* disabled inputs */
				main .centering form input:disabled,
				main .centering form textarea:disabled,
				main .centering form select:disabled {
					background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAD0lEQVQImWNgwATGtBAAADM2AQCsBUIOAAAAAElFTkSuQmCC);
					cursor: not-allowed !important;
				}





/** TESTIMONIALS **/

main#testimonials {

}

	/* testimonial block */
	main#testimonials > .centering > div.testimonial {
		display: block;
		margin: 20px 20px 50px 20px;
		padding: 20px;
		border-left: 2px solid rgba(8,84,46,.5);
	}

		/* testimonial title */
		main#testimonials > .centering > div.testimonial > h4 {
			margin: 0px 0px 10px 0px;

			font-family: 'latolight';
			color: rgb(8,84,46);
			font-size: 20px;
			line-height: 1.5;
		}

		/* customer name */
		main#testimonials > .centering > div.testimonial > p.customer {
			margin-bottom: 0px;
			font-family: 'latobold';
			font-size: 15px;
		}


/** PRODUCTS **/

main#products {
	font-size: 0px; /* collapse spacing */
}

	/* main with blended product image as background */
	main.product-image-blend-bg {
		background-position: top 40px right;
		background-repeat: no-repeat;
		background-size: 55vw;
	}
		/* main product image as floated image */
		main > img.product-image-blend {
			float: right;
			max-width: 40vw;
			margin: 0px 0px 20px 20px;
		}

			/* adjustment for pond liners page */
			main > img.product-image-blend#pond-liners {
				max-height: 450px;
			}

		/* add text shadow to elements to make easier to read over blended backgrounds */
		main.product-image-blend-bg .centering * {
			text-shadow: 1px 1px 0px rgba(255,255,255,.5), 0px 0px 75px white;
		}

	/* centering container */
	main#products > .centering {
		text-align: center;
	}

		/* product section */
		main#products > .centering > section {
			display: inline-block;
			vertical-align: top;
			width: 40%;
			min-width: 350px;
			text-align: left;
		}

			/* list containers */
			main#products > .centering > section > ul {
				margin-bottom: 35px;
			}

				/* first <li> (not a link) */
				main#products > .centering > section > ul > li:first-of-type {
					margin-left: 0px;

					margin: 25px 0px 10px 0px;

					font-family: 'latobold';
					font-size: 24px;
					color: rgba(0,0,0,.6);
					line-height: 1.5;

					text-transform: capitalize;
				}

					/* remove bullet */
					main#products > .centering > section > ul > li:first-of-type:before {
						display: none;
					}





/** PROJECTS & IDEAS **/

main .centering a#customer-gallery-next {
	display: block;
	width: 150px;
	margin: 35px auto 20px auto;
	text-align: center;
	font-family: 'latolight';
	font-size: 35px;
	border: none;

	clear: both;
}





/** CONTACT **/

/* extra spacing on h2 */
main#contact > .centering h2:not(:first-of-type) {
	margin-top: 45px;
}

/* no forced captimization on h4's */
main#contact > .centering h4 {
	text-transform: none;
}

/* sections as columns */
main#contact > .centering > section {
	display: inline-block;
	vertical-align: top;
	width: 45%;
	min-width: 425px;
}
	main#contact > .centering > section:nth-of-type(odd) {
		width: 50%;
		margin-right: 5%;
	}

/* bob & marg pics */
main#contact > .centering > #owners {
	display: block;
	text-align: center;
}

	/* image & caption container */
	main#contact > .centering > #owners > div {
		display: inline-block;
		padding: 20px;
		margin: 10px;
		text-align: center;

		font-family: 'bodoni_btroman';
		font-size: 17px;
		color: rgba(0,0,0,.75);
		line-height: 1.5;

		background-color: rgb(204,255,204);
	}

		/* image */
		main#contact > .centering > #owners > div > img {
			display: block;
			width: 200px;
			height: auto;
			margin: 0px auto 20px auto;
		}