@charset "utf-8";

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	margin: 0;
	padding: 0;
}

html {
	min-height: 100%;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%;
    color: #fff;
    text-shadow: 0 0 10px #7C906A;
	overflow-y: scroll; /* Forces scroll bars to always appear */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
}

body {
	min-height: 100%;
    background: #3c4f14;
    background: -moz-linear-gradient(top,  #3c4f14 0%, #537507 50%, #576831 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c4f14), color-stop(50%,#537507), color-stop(100%,#576831));
    background: -webkit-linear-gradient(top,  #3c4f14 0%,#537507 50%,#576831 100%);
    background: -o-linear-gradient(top,  #3c4f14 0%,#537507 50%,#576831 100%);
    background: -ms-linear-gradient(top,  #3c4f14 0%,#537507 50%,#576831 100%);
    background: linear-gradient(to bottom,  #3c4f14 0%,#537507 50%,#576831 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c4f14', endColorstr='#576831',GradientType=0 );
}

#site-homepage {
	position: relative; /* required for IE 10 to display aside - disappears otherwise - just like the old days! */
	width: 840px;
	height: auto;
	margin: 50px auto;
	padding: 20px;
	text-align: left;
	background-color: #a1b751;
	box-shadow: 0 0 40px 1px #3c4f14;
}

a,
a:visited,
a:hover {
	padding: 0 5px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #f0edae;
}

h1 {
	font-size: 24px;
	font-style: italic;
}

h2 {
	margin: 0 0 20px 0;
	font-size: 14px;
	line-height: 14px;
	font-weight: normal;
}

p {
	margin: 20px 0;
}

ul {
    margin: 50px 0 30px 0;
}

li {
	display: inline;
	list-style-type: none;
}

.homepage-top {
    text-align: center;    
}

.homepage-top h2 {
    font-size: 14px;
    font-style: italic;
}
.homepage-top p {
    font-weight: bold;
    font-size: 16px;
}

.contact-info {
    width: 40%;
    float: right;
    line-height: 1.6em;
    text-align: center;
}

.contact-info a {
    font-weight: normal;
}

.content {
	position: absolute;
	top: 110px;
	right: 40px;
	/*width: 400px;*/
	background-color: rgba(255, 255, 255, .5);
	border-radius: 20px;
	padding: 20px 20px 30px 20px;
	text-align: center;
	color: #000;
}

/***************************** MEDIA QUERIES *****************************/
/***************************** MEDIA QUERY   __860PX__   *****************************/

@media (max-width: 860px) /* (max-device-width: 860px) */ { 
	#site-homepage {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 20px 0;

	}
	.background-image {
		background-position: center;
	}
	.content {
		position: relative;
		top: 30px;
		right: 0;
		margin: 0 auto;
		/*width: 400px;*/
	}
    img.seasons {
        
        width: 100%;
    }
    ul {
        margin: 50px 0 30px 0;
        width: 60%;
        text-align: center;
    }
}
/***************************** END MEDIA QUERY 860PX *****************************/
/***************************** MEDIA QUERY Media   __640PX__   *****************************/

/*@media screen and (max-width: 640px) { */
@media (max-width: 640px) {
	#site-homepage {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 20px 0 0 0;
	}
	.background-image {
		background-position: center 0;
	}
	.content {
		position: relative;
		top: 0;
		right: 0;
		width: 100%;
		margin: 0;
		padding: 30px 0 0 0;
		background-color: rgba(255, 255, 255, .5);
		border-radius: 0;
		text-align: center;
		color: #000;
	}
    .contact-info {
        width: 100%;
        float: none;
        line-height: 1.6em;
        text-align: center;
    }
	ul {
		background-color: rgba(0, 0, 0, .5);
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
	}
	li {
		display: block;
		border-bottom: 1px solid #000;
	}
	li:first-child {
		border-top: 1px solid #000;
	}
	li a,
	li a:visited,
	li a:hover {
		display: block;
		padding: 10px 30px;
		width: 100%;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
		background: -moz-linear-gradient(top, rgba(122,155,47,0.5) 0%, rgba(60,79,20,0.5) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,155,47,0.5)), color-stop(100%,rgba(60,79,20,0.5)));
		background: -webkit-linear-gradient(top, rgba(122,155,47,0.5) 0%,rgba(60,79,20,0.5) 100%);
		background: -o-linear-gradient(top, rgba(122,155,47,0.5) 0%,rgba(60,79,20,0.5) 100%);
		background: -ms-linear-gradient(top, rgba(122,155,47,0.5) 0%,rgba(60,79,20,0.5) 100%);
		background: linear-gradient(to bottom, rgba(122,155,47,0.5) 0%,rgba(60,79,20,0.5) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#807a9b2f', endColorstr='#803c4f14',GradientType=0 );
		text-shadow: 0 0 10px #000;
	}
	li a:hover {
		color: #ff6;
	}
}
/***************************** END MEDIA QUERY 480PX *****************************/