.white-text {
	color: #f2f2f2;
}


/* special cases */
.brush-background {
	background: url('../images/backgrounds/brush_bg.png') center/100% auto no-repeat transparent;
}

.blue-splats-background {
	/*background: url('../images/backgrounds/splats_bg.png') center bottom/cover no-repeat transparent;*/
	background: url('../images/backgrounds/blue_splats_bg_canoe.svg') center bottom no-repeat,
				url('../images/backgrounds/blue_splats_bg.jpg') center bottom 1.9em no-repeat,
				url('../images/backgrounds/blue_splats_bg_footer.png') center top 100% no-repeat;
	background-size: 100% auto, 100% auto, 100% 2em;
	color: #FFFFFF;
}



/* combine with backgrounds to apply torn edges */
.overlap-top {
	margin-top: -2.6em; /* used to be 2em, but 2.6em hides incidents where the next element has a clashing torn top */
}
.overlap-bottom {
	margin-bottom: -2.6em;
	position: relative;
	z-index: 404;
}
.overlap-top.overlap-bottom {
	background-position: center;
	background-size: 100% calc(100% - 4em);
}



/* backgrounds */
.blue-background {
	background-color: #004c91 !important;
	color: #f2f2f2;
}
.blue-brush-background {
	background: url('../images/backgrounds/blue_brush_bg.png') center top/100% auto repeat-y transparent;
	color: #FFFFFF;
	position: relative;
}
.blue-brush-background.overlap-top,
.blue-background.overlap-top {
	background-color: transparent !important;
	background: url('../images/backgrounds/blue_brush_bg.png') center top 1.9em no-repeat,
				url('../images/backgrounds/blue_brush_bg_header.png') center bottom 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
	z-index: 403;
}
.blue-brush-background.overlap-bottom,
.blue-background.overlap-bottom {
	background-color: transparent !important;
	background: url('../images/backgrounds/blue_brush_bg.png') center top no-repeat,
				url('../images/backgrounds/blue_brush_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
}
.blue-brush-background.overlap-top.overlap-bottom,
.blue-background.overlap-top.overlap-bottom {
	background: url('../images/backgrounds/blue_brush_bg.png') center top 1.9em no-repeat,
				url('../images/backgrounds/blue_brush_bg_header.png') center bottom 100% no-repeat,
				url('../images/backgrounds/blue_brush_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 3.8em), 100% 2em, 100% 2em;
}

.green-background {
	background-color: #80bc00 !important;
	color: #f2f2f2;
}
.green-background.overlap-top {
	background-color: transparent !important;
	background: url('../images/backgrounds/green_bg.png') center top 1.9em no-repeat,
				url('../images/backgrounds/green_bg_header.png') center bottom 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
	z-index: 403;
}
.green-background.overlap-bottom {
	background-color: transparent !important;
	background: url('../images/backgrounds/green_bg.png') center top no-repeat,
				url('../images/backgrounds/green_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
}
.green-background.overlap-top.overlap-bottom {
	background: url('../images/backgrounds/green_bg.png') center top 1.9em no-repeat,
				url('../images/backgrounds/green_bg_header.png') center bottom 100% no-repeat,
				url('../images/backgrounds/green_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 3.8em), 100% 2em, 100% 2em;
}

.orange-background {
	background-color: #c17536 !important;
	color: #f2f2f2;
}
.orange-background.overlap-top {
	background-color: transparent !important;
	background: url('../images/backgrounds/orange_brush_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/orange_bg_header.png') center bottom 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
	z-index: 403;
}
.orange-background.overlap-bottom {
	background-color: transparent !important;
	background: url('../images/backgrounds/orange_brush_bg.jpg') center top no-repeat,
				url('../images/backgrounds/orange_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
}
.orange-background.overlap-top.overlap-bottom {
	background: url('../images/backgrounds/orange_brush_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/orange_bg_header.png') center bottom 100% no-repeat,
				url('../images/backgrounds/orange_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 3.8em), 100% 2em, 100% 2em;
}

.purple-background {
	background-color: #802489 !important;
	color: #f2f2f2;
}
.purple-background.overlap-top {
	background-color: transparent !important;
	background: url('../images/backgrounds/purple_brush_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/purple_bg_header.png') center bottom 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
	z-index: 403;
}
.purple-background.overlap-bottom {
	background-color: transparent !important;
	background: url('../images/backgrounds/purple_brush_bg.jpg') center top no-repeat,
				url('../images/backgrounds/purple_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
}
.purple-background.overlap-top.overlap-bottom {
	background: url('../images/backgrounds/purple_brush_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/purple_bg_header.png') center bottom 100% no-repeat,
				url('../images/backgrounds/purple_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 3.8em), 100% 2em, 100% 2em;
}
	/* */
	.blue-brush-background:after,
	.orange-background:after,
	.purple-background:after {
		background: url('../images/backgrounds/tree_bg.png') center bottom/contain no-repeat;
		content: '';
		display: block;
		position: absolute; bottom: 0; right: 10%;
		width: 25%; height: 100%;
	}

.grey-background {
	background-color: #eaeaea !important;
}
	.grey-background input[type="text"],
	.grey-background input[type="number"], 
	.grey-background input[type="email"], 
	.grey-background input[type="search"], 
	.grey-background input[type="password"],
	.grey-background input[type="tel"],
	.grey-background .select-style,
	.grey-background textarea {
		background-color: #FFFFFF;
	}

.cream-texture-background {
	background: url('../images/backgrounds/cream_texture_bg.jpg') center top/100% auto repeat-y transparent;
	position: relative;
}
.cream-texture-background.overlap-top {
	background: url('../images/backgrounds/cream_texture_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/cream_texture_bg_header.png') center bottom 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
	z-index: 403;
}
.cream-texture-background.overlap-bottom {
	background: url('../images/backgrounds/cream_texture_bg.jpg') center top no-repeat,
				url('../images/backgrounds/cream_texture_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
}
.cream-texture-background.overlap-top.overlap-bottom {
	background: url('../images/backgrounds/cream_texture_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/cream_texture_bg_header.png') center bottom 100% no-repeat,
				url('../images/backgrounds/cream_texture_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 3.8em), 100% 2em, 100% 2em;
}

.white-grain-background {
	background: url('../images/backgrounds/white_grain_bg.jpg') center top/100% auto repeat-y transparent;
	position: relative;
}
.white-grain-background.overlap-top {
	background: url('../images/backgrounds/white_grain_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/white_grain_bg_header.png') center bottom 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
	z-index: 403;
}
.white-grain-background.overlap-bottom {
	background: url('../images/backgrounds/white_grain_bg.jpg') center top no-repeat,
				url('../images/backgrounds/white_grain_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 1.9em), 100% 2em;
}
.white-grain-background.overlap-top.overlap-bottom {
	background: url('../images/backgrounds/white_grain_bg.jpg') center top 1.9em no-repeat,
				url('../images/backgrounds/white_grain_bg_header.png') center bottom 100% no-repeat,
				url('../images/backgrounds/white_grain_bg_footer.png') center top 100% no-repeat;
	background-size: 100% calc(100% - 3.8em), 100% 2em, 100% 2em;
}