/*
Theme Name: 	Starkers
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	The totally nude Wordpress theme!
Version: 		4.0
Author: 		Elliot Jay Stocks & Keir Whitaker
Author URI: 	http://viewportindustries.com
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* @import "css/reset.css"; */



h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }



::selection
{
	color: white;
	background-color: #006587;
}
::-moz-selection
{
	color: white;
	background-color: #006587;
} 

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:0px) {

body {
		background-color: #ededed;
		background-image: url('Images/wwbkg3.jpg');
		margin: 0;
		padding: 0;
	}
	
a {
		color: #006587;
		text-decoration: none;
		transition: ease-in;
		transition-duration: 0.2s;
		transition-property: color;
		color: #006587;
	}
	
a:hover {
		color: #a6ce39;
		text-decoration: none;
	}
		
.floatLeft {
		float: left;
		
	}
	
.floatRight {
		float: right;
	}
	
.clear {
		clear: both;
	}
	
#header {
		background-color: white;
		height: 72px;
		width: 100%;
		margin: 0px auto;
		box-shadow: 0px 2px 8px #dbdbdb;
		position: fixed;
		z-index: 3;
	}
	
#blankDiv {
		height: 72px;
		width: 986px;
	}
	
#headerNavContainer {
		height: 72px;
		width: 750px;
		padding-top: 7px;
	}
	
#headerNavContainer a{
	transition: ease-in;
	transition-duration: 0.2s;
	transition-property: color;
	color: #006587;
}

#headerNavContainer a:hover{
	color: #a6ce39;
	text-decoration: none;
}
	
#headerNavContainer li{
		display: inline;
		padding-left: 25px;
		margin-top: 0px;
		color: #006587;
		text-align: center;
		font-family: 'oswald', sans-serif;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 1.4pt
	}
#headerNavContainer ul{
		margin: 0px;
		padding: 0px;
}
	
.headerNav {
		float: right;
		padding-left: 20px;
	
		height: 72px;
		width: auto;
		margin: 0px auto;

	}
	
.headerNavSpacer {
		float: left;
		background-color: white;
		height: 25px;
		width: 1px;
		opacity: .2;

	}
	
#headerContainer { 
		padding-top: 18px;
		height: 72px;
		width: 1100px;
		margin: 0px auto;
	}
	
#headerLogo {
		height: 51px;
		width: 175px;
		margin: -7px 0px 0px 0px;
		margin-left: 30px;
		background-image: url('Images/logo.png');
		background-repeat: no-repeat;
	}
	
#mainContainer {
		background-color: white;
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
		width: 1400px;
		margin: 0px auto;	
		box-shadow: 0px 2px 8px #757575;
	}
	
#centeredContent {
		width: 846px;
		margin: 0px auto;
	}

#rollingImage {
		background-image: url('http://wassonway.org/wp-content/uploads/2018/10/header.gif');
		background-repeat: no-repeat;
		height: 235px;
		width: 1400px;
		margin: 0px auto 0px auto;
	}
	
#rollingImageContainer {
	    background-image: url('http://wassonway.org/wp-content/uploads/2018/10/header.gif');
		height: 235px;
		width: 1400px;
		margin: 0px auto 0px auto;
		
	}
	
#rollingImageContainerSm {
		height: 610px;
		width: 1400px;
		margin: 0px auto 0px auto;
	}
	
#rollingMapContainer{
		height: 610px;
		width: 1400px;
		margin: 0px auto 0px auto;
}	
	
	
#rollingImageDonate {
		background-image: url('Images/banner_Donate.jpg');
		background-repeat: no-repeat;
		height: 436px;
		width: 1400px;
		margin: 0px auto 0px auto;
	}
	
#rollingImageFAQ {
		background-color: #006587;
		height: 436px;
		width: 100%;
		margin: 0px auto 0px auto;
		color: white;
	}
	
/*------------- About Section -------------*/

.sectionWrapper{
		width:100%;
		height:100%;
		margin-top: 20px;
		margin-bottom: 0px;
}

.boxWrapper1{
		width:141px;
		height:141px;
		float:left;
		background-color: #006587;
}

.boxWrapper2{
		width:141px;
		height:141px;
		float:left;
		background-color: #FFF;
}
	
#aboutSection {
		font-family: Arial;
		width: auto;
		margin: 0px auto;
		
	}
	
#infoTitle {
		color: #006587;
		font-family: 'oswald', sans-serif;
		width: 846px;
		margin: 0px auto;
		text-align: center;
		
	}
	
h4 {
		color: #006587;
		font-family: 'oswald', sans-serif;
		font-size: 30px;
		line-height: 26px;
		font-weight: 400;
		letter-spacing: 2px;
	}
	
h3 {
		color: #006587;
		font-family: 'oswald', sans-serif;
		font-size: 45px;
		line-height: 26px;
		font-weight: 400;
		letter-spacing: 2px;
	}
	
h2 {
		color: #006587;
		font-family: 'oswald', sans-serif;
		font-size: 68px;
		line-height: 26px;
		font-weight: 400;
		letter-spacing: 2;
	}
	
#spacers {
		background-color: #e0e0df;
		height: 1px;
		width: 886;
		margin: -10px auto 20px auto;
	}
	
#choirLogo {
		width: 178px;
		height: 177px;
		background-image: url('Images/choirGamesLogo.png');
		background-repeat: no-repeat;
	}
	
#aboutInfo {
		width: auto;
		height: 200px;
		padding: 0px 50px 0px 50px;
		margin: 0px 0px 0px 0px;
		text-align: center;
		font-family: 'oswald', sans-serif;
	}

.centeredBodyCopy {
		font-family: Arial;
		color: #555555;
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 1.8pt;
		font-weight:100;
		width: auto;
		padding:0px 300px 0px 300px;
		margin: 0px 0px 80px 0px;
	}
	
.pageCopy {
		color: #58595b;
		font-family: Arial;
		line-height: 20pt;
	}
	
#donateButton:hover {
		background-position: 0px -68px;
	}
	
#donateButton span {
		display: none;
	}
	
#donateButton {
		display:block;
		width: 243px;
		margin: 50px auto 50px auto;
		height: 68px;
		background: url('Images/donate_btn.png');
	}
	
.shortDescriptionText {
		font-family: Arial;
		color: #555555;
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 1.8pt;
		font-weight:100;
		width: 750px;
		text-align: center;
		margin: 50px auto;
		color: #58595b;
	}

	
.infoBackground {
		background-color: white;
		height: 310px;
		width: 1400px;
		margin: 0px auto 0px auto;
		padding-top: 20px;
	}
	
.infoBackground1 {
		background-color: white;
		height: 310px;
		width: 1400px;
		margin: -60px auto 0px auto;
		padding-top: 20px;
	}
	
.infoBackgroundFAQ {
		background-color: white;
		height: 200px;
		width: 100%;
		margin: -60px auto 0px auto;
		padding-top: 20px;
	}
	
.infoBackground2 {
		background-color: white;
		height: 420px;
		width: 1400px;
		margin: -80px auto 0px auto;
		padding-top: 20px;
	}
	
#triangleBackground {
		background-image: url('Images/triangle.png');
		height: 18px;
		width: 986px;
		margin-bottom: 40px;
	}

#getInvolved {
		font-family: Arial;
		width: 846px;
		margin: 0px auto;
		text-align: center;
	}
	
#getInvolvedIconSection {
		font-family: 'oswald', sans-serif;
		width: 846px;
		margin: 0px auto;
		text-align: center;
		padding: 0px 200px 0px 200px;
	}
	
#getInvolvedIconSectionInternal {
		font-family: 'oswald', sans-serif;
		width: 600px;
		margin: 0px auto;
		text-align: center;
		padding: 0px 200px 0px 200px;
	}
	
.iconContainer {
		margin: 0px auto;
		width: 20%;
		height: 180px;

	}
	
.iconContainerInternal {
		margin: 0px auto;
		width: 33%;
		height: 180px;

	}

.iconContainer img {
		opacity: .8;
}	
	
.iconContainer img:hover {
		opacity: 1;
}

.blankSpacer {
		height: 82px;
	}
	
#dottedLine {
		margin: 0px 0px 0px 50px;
		height: 10px;
		background-image: url('Images/dottedLine.png');
		background-repeat: no-repeat;
		background-position: center;
	}
	
#dottedLineFirst {
		margin: 0px 0px 0px 0px;
		height: 10px;
		background-image: url('Images/dottedLine.png');
		background-repeat: no-repeat;
		background-position: center;
	}
	
.getInvolvedText {
		padding:10px 0px 10px 0px;
	}
	
.blueText {
		font-size: 14pt;
		color: #006587;
	}
	
#blueTextBold {
		color: #006587;
		font-weight: 700;
		letter-spacing: 1.4pt;
		font-size: 20pt;
	}
	
#limeTextBold {
		color: #a6ce39;
		font-weight: 700;
		letter-spacing: 1.4pt;
		font-size: 20pt;
	}
	
#limeTextBoldTwo {
		color: #a6ce39;
		font-weight: 700;
	}
	
#tealTextBold {
		color: #01b6b5;
		font-weight: 700;
		letter-spacing: 1.4pt;
		font-size: 20pt;
	}
	
#tealTextBoldSmall {
		color: #01b6b5;
		font-weight: 700;
	}
	
#tealTextBoldTwo {
		color: #01b6b5;
		font-weight: 700;
	}
	
.spacerBlue {
		width: 45%;
		height: 3px;
		background-color: #006587;
	}
	
.spacerMark {
		
		margin: 0px auto;
		width: 10%;
		height: 30px;
	}
	
.spacerMarkImage {
		width: auto;
		height: auto;
		margin-left: 17px;
		margin-top: -11px;
	}

.spacerContainer {
		width: 700px;
		margin: 0px auto 0px auto;
	}
	
.storyContainer {
		width: 846px;
		height: auto;
		margin: 80px auto;
	}
	
.storyImage {
		width: 308px;
		height: 190px;
	}
	
.briefDescriptionContainer {
		width: 500px;
		margin-left: 30px;
	}
	
.newsTitle {
		color: #006587;
		font-size: 18pt;
		font-family: 'oswald', sans-serif;
		letter-spacing: .4pt;

	}
	
.tealSpacer {
		height: 2px;
		width: 500px;
		background-color: #01b6b5;
		margin-top: 4px;
		margin-bottom: 6px;
	}
	
.newsContent {
		width: 500px;
		font-family: Arial;
		color: #555555;
		font-size: 11pt;
		line-height: 18pt;
		font-weight: 100;
	}
	
.readMore {
		width:110px;
		height: 30px;
		
	}

.readMoreText {
		font-family: Arial;
		color: #01b6b5;
		font-size: 11pt;
		font-weight: 100;
	}
	
.readMoreBtn {
		margin: -1px 0px 0px 15px;
	}

.tealSpacerFull {
		width: 846px;
		height: 2px;
		background-color: #01b6b5;
		margin: 0px auto;
	}
	
.footerIconContainer {
		width: 846px;
		height: auto;
		margin: 0px auto 0px auto;
	}

.footerIconContainerIndividual {
		width: 25%;
		height: 300px;
		margin: 0px auto;
		padding-top: 50px;
		transition-duration: 0.2s;
		transition-property: background-color;
	}
	
.footerIconContainerIndividual:hover {
		background-color: #f6f6f6;
	}

.footerIconLabel {
		color: #01b6b5;
		font-size: 14pt;
		font-family: 'oswald', sans-serif;
		letter-spacing: 1.4pt;
		text-align: center;
	}
	
	
.light {
		font-weight: 100;
	}
	
	
#dropPin {
		margin-left: 50px;
		height: 160px;
	}
	
#questionMark {
		margin-left: 80px;
		height: 160px;
	}
	
#pictureGallery {
		margin-left: 8px;
		height: 160px;
	}
	
#calendar {
		margin-left: 42px;
		height: 160px;
	}
	
.copyright {
		font-family: Arial;
		color: #006587;
		font-size: 11pt;
		line-height: 18pt;
		font-weight: 100;
		width: 846px;
		height: auto;
		margin: 10px auto 0px auto;
		padding-bottom: 30px;
		
	}
	
	
/* FAQ */

.faqContainer {
		width: 700px;
		height: auto;
		margin: 0px auto 80px auto;
	}
	
.faqTitle {
		width: auto;
		height: auto;
	}
.faqTitle h4{
		line-height: 37px;
}
	
.faqAnswer {
		width: auto;
		height: auto;
		color: #58595b;
		font-family: Arial;
		line-height: 20pt;
		margin-top: -15px;
		
	}

.limeArrow {
		width: 8px;
		height: 14px;
		background-image: url('Images/arrow_lime.png');
		margin-top: 21px;
		margin-right: 10px;
	}	
	
.backTop {
		width: auto;
		height: auto;
		color: #a6ce39;
		font-family: 'oswald', sans-serif;
		line-height: 21pt;
		margin-top: 15px;
	}
	
.backTop a {
		width: auto;
		height: auto;
		color: #a6ce39;
		font-family: 'oswald', sans-serif;
		line-height: 21pt;
		margin-top: 15px;
	}

.faqSpacer {
		width: 100%;
		height: 3px;
		background-color: #006587;
		margin-top: 30px;
	}
	
.faqLinksContainer {
		width: auto;
		height: auto;
		margin: 30px auto 0px auto;
	}
	
.faqLinksContainer2 {
		width: auto;
		height: auto;
		margin: 30px auto 0px 100px;
	}
	
.faqCentered {
		width: 700px;
		height: auto;
		margin: 0px auto;
	}

.faqLink {
		color: white;
		font-family: Arial;
		font-size: 11pt;
		margin-bottom: 15px;
		width: 300px;
		line-height: 18pt;
		letter-spacing: 1.3pt;
	}
	
.faqLink a {
		color: white;
		font-family: Arial;
		font-size: 12pt;
	}
	
.faqLink a:hover {
		text-decoration: none;
	}
	
.faqLink a:visited {
		text-decoration: none;
		color: white;
	}
	
	
.storyImage a:hover{
	opacity: .8;

}	

.number {
		width: 34px;
		height: 34px;
		margin: 37px 20px 0px 0px;
	}
	
.tealSpacerLong {
		height: 1px;
		width: 100%;
		background-color: #01b6b5;
}

.getInvolvedTextExplain {
		height: auto;
		width: 100%;
		margin: 0px 0px 20px 0px;
		
	}
	
.getInvolvedNumber {
		width: 80%;
		height: auto;
		margin: 0px auto;
	}
	
.getInvolvedTextExplain a {
		color: #01b6b5;
		font-weight: 700;
	}
	
.wholeGetInvolvedContainer {
		width: 100%;
		height: auto;
		margin-bottom: 50px;
	}
.em-booking-form label {
	width: 290px;
}

.em-booking-form-details input.input, .em-booking-form-details textarea {
    width: 290px;
    border: 1px solid #006587;
    padding: 5px;
    font-size: 14px;
    color: #006587;
}

.em-tickets-spaces {
	display: none;
}

}

#donateStatus {
	width: 255px;
	height: 615px;
}
#donateBody{
	width: 740px;
	padding-left: 30px;
	}
.donateHeader {
		color: #006587;
		font-family: 'oswald', sans-serif;
		font-size: 20px;
		line-height: 26px;
		font-weight: 400;
		letter-spacing: 2px;
		display:inline;
		letter-spacing: .05em;
}
.donateSubHeader {
		color: #03b6b5;
		font-family: 'oswald', sans-serif;
		font-size: 18px;
		line-height: 26px;
		font-weight: 100;
		letter-spacing: 2px;
		display:inline;
		letter-spacing: .05em;
		
}

#donateInstructions {
		width: 350px;
		font-family: 'oswald', sans-serif;
		font-size: 16px;
		line-height: 26px;
		font-weight: 100;
		letter-spacing: 2px;
		letter-spacing: .0em;
		margin-bottom: 45px;
}
#donateButton2 {
	margin-left: 25px;

}

#donateImage {
	background-image: url('http://wassonway.org/wp-content/uploads/2016/11/MAP1.jpg');
	width: 800px;
	height: 400px;
	background-position: center center;
	background-size: cover;

}

.boardContent {
	width: 500px;
	height: 100%;
	padding-left: 45px;
	
}

.boardImage {
	height: 250px;
	width: 225px;
	background-color: gray;
}

.boardContainer {
	padding-bottom: 55px;
}

.boardName {
		color: #006587;
		font-family: 'oswald', sans-serif;
		font-size: 20px;
		line-height: 26px;
		font-weight: 400;
		letter-spacing: 2px;
		letter-spacing: .05em;
}
.boardTitle {
		color: #03b6b5;
		font-family: 'oswald', sans-serif;
		font-size: 18px;
		line-height: 26px;
		font-weight: 100;
		letter-spacing: 2px;
		letter-spacing: .05em;
		
}

.boardHeader {
	background-color: #006587;
	height: 10px;
}

#b01 {
	background-image: url('Images/board/wwboard_susan.jpg')
}

#b02 {
	background-image: url('Images/board/wwboard_Ariosa.jpg')
}

#b03 {
	background-image: url('Images/board/wwboard_anne.jpg')
}

#b04 {
	background-image: url('Images/board/wwboard_elizabeth.jpg')
}

#b04b {
	background-image: url('Images/board/wwboard_koklew.jpg')
}

#b05 {
	background-image: url('Images/board/wwboard_jay.jpg')
}

#b06 {
	
}

#b07 {
	background-image: url('Images/board/wwboard_Draugelis.jpg')
}

#b08 {
	background-image: url('Images/board/wwboard_Daily.jpg')
}

#b09 {
	background-image: url('Images/board/wwboard_Henson.jpg')
}

.aboutSubNav {
	background-color: #fafafa;
	height: 70px;
	margin-top: 30px;
}

.aSubContainer {
	width: 600px;
	margin: 0 auto;
}

.aSubItem {
	width: 200px;
	color: #03b6b5;
	height: 48px;
	padding-top: 22px;
		font-family: 'oswald', sans-serif;
		font-size: 18px;
		line-height: 26px;
		font-weight: 100;
		letter-spacing: 2px;
		letter-spacing: .05em;
		align-content: center;
		text-align: center;
}

.aSubItem:hover{
	background-color: #03b6b5;
	color: white;
	transition: ease-in;
	transition-duration: 0.2s;
	transition-property: color background-color;
}


/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {
					{ /* Place your styles here for all 'Retina' screens */ }

}

@media screen and (-webkit-min-device-pixel-ratio:2) {
					{ /* Place your styles here for all 'Retina' screens */ }



}


/* Normal Display */
@media (max-width: 1400px) {


		#mainContainer {
			background-color: white;
			border-left: 1px solid #e0e0e0;
			border-right: 1px solid #e0e0e0;
			width: 1100px;
			margin: 0px auto;	
			box-shadow: 0px 2px 8px #757575;
		}
		
		.infoBackground {
			width: 1100px;
			margin: 0px auto;
			
		}
		
		.centeredBodyCopy {
			padding: 0px 150px;
			}

		
		#getInvolvedIconSection {
			padding: 0px 100px;
		}

		
		
		
		#rollingImage {
			width: 1100px;
			overflow: hidden;
			
		}
		
		#rollingImageContainer {
		width: 1100px;
			overflow: hidden;
		
			
		}
		
		#rollingImageContainerSm {
		width: 1100px;
			overflow: hidden;
			
		
		}
		
		
		
		#rollingMapContainer{
		width: 1100px;
			overflow: hidden;
		}	
		
		.aboutSubNav {
		margin-top: 0px;
}

		
		
}