/* Colors */
/* Gold #c7994a */
/* WSNA red, and links #801517 */
/* Brown, titles #80491e */
/* Reddy orange #822f1a */
/* Orange #da491b */
/* lt Tan #ebd8c6 */

#home-page-top-banner {
	background-image: url("../images/WSNA-name_1200.png");
	background-repeat: no-repeat;
	background-position: bottom;
	position: relative;
	width: 1200px;
	height: 125px;
	border-bottom: 1px solid #c7994a;
}

/* For big image at top of home page */

#big-image-box {
	font-family: "Cinzel";
	padding: 5px 0;
	display: block;
}

#big-image {
	margin: 0 16px;
	border: 0px dashed pink;
}

#home-content {
	border: 0px solid blue;
	margin: auto;
}

/* Styles for arranging pieces on the home page. There are 2 row-cards per row-container or column-card. There are 2 column-cards per column-container. Style for .card and .rectangle-banner-card are in main-stylesheet.css */


/* A row-container holds 2 row-cards in horizontal alignment */

.row-container {
	width: 850px;
	min-height: 450px;
	float: left;
	padding-bottom: 5px;
	border-bottom: 1px solid #c7994a;
}

.row-container article {
	float: left;
	position: relative;
}

.column-container .column-card {
	float: right;
	position: relative;
	width: 330px;
	height: auto;
	margin: 10px 0 10px 10px;
	border: 0px solid green;
	overflow: auto;
}

/* This area could go below the banner(s) in the top column-container */

.socialmedia-area {
	text-align: center;
}

/* Used to hold the div that came with the FB code, so the FB box can be centered */
.fb-like-box-container {
	width: 330px;
	margin: auto;
}

/* The search area is a nav, and uses this h1 */

search-area h1 {
	font-size 1.1em;
	line-height: .2em;
}



/* Media queries */

@media screen and (max-width: 1200px) {

	#home-page-top-banner {
		background-image: url("../images/WSNA-name_850.png");
		width: 850px;
		height: 105px;
		float: none;
		margin: auto;
	}

	#home-content {
		width: 850px;
	}

	.search-area {
		display: none;
	}

	.column-container {
		width: 100%;
		float: left;
	}

	.column-container .column-card, .column-banner-card {
		float: left;
		width: 380px;
		height: 530px;
		margin: 10px;
	}
}
@media screen and (max-width: 850px) {
	#home-page-top-banner {
		background-image: url("../images/WSNA-name_728.png");
		width: 728px;
		height: 100px;
	}

	#home-content {
		width: 750px;
	}

	.row-container {
		width: 750px;
		border: 0px dashed purple;
	}

	.column-container .column-card, .column-banner-card {
		width: 330px;
		padding: 15px 10px 5px 10px;
	}
}

@media screen and (max-width: 728px) {

	#home-page-top-banner {
		background-image: url("../images/WSNA-name_600.png");
		width: 600px;
		height: 85px;
	}

	#home-content {
		width: 100%;
	}

	.row-container {
		width: 100%;
		border: 0px solid pink;
	}

	.column-container {
		width: 100%;
	}

	.row-card, .column-container .column-card {
		width: 93%;
		height: auto;
	}

	.column-banner-card {
		width: 93%;
		height: auto;
	}

	.column-banner-box {
		display: inline-block;
		margin-left: 5px;
	}

	.banner-container {
		width: 380px;
	}
}

@media screen and (max-width: 670px) {

	.column-banner-box {
		display: block;
		width: 300px;
		margin: auto;
	}
}

@media screen and (max-width: 600px) {

	#home-page-top-banner {
		background-image: url("../images/WSNA-name_475.png");
		width: 475px;
		height: 80px;
	}

	.row-card, .column-container .column-card {
		width: 90%;
	}

	.column-banner-card {
		width: 90%;
	}
}

@media screen and (max-width: 450px) {

	#home-page-top-banner {
		background-image: url("../images/WSNA-name_380.png");
		width: 380px;
		height: 75px;
	}

	.row-card, .column-container .column-card {
		width: 88%;
	}

	.column-banner-card {
		width: 88%;
	}

	.column-banner-card img {
		width: 280px;
		height: auto;
	}

	.row-container {
		border: 0px dashed purple;
		min-height: 0;
	}
}

@media screen and (max-width: 350px) {

	#home-page-top-banner {
		background-image: url("../images/WSNA-name_300.png");
		width: 300px;
		height: 85px;
	}
}