@charset "utf-8";
body {
	background-color: #FFFFEE;
	background-repeat: no-repeat;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	padding: 0px;
	width: 100%;
	max-width: 1200px;
	background-size: cover;
	background-image: url(images/dawn-8361032.jpg);
	background-position: right 0%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

/* - nav Styles - */
nav  {
	width: 100%;
	margin: 0px;
	padding: 0.2em;
	height: 2em;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,238,1.00) 0%,rgba(255,255,238,0.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,238,1.00) 0%,rgba(255,255,238,0.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,238,1.00) 0%,rgba(255,255,238,0.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,238,1.00) 0%,rgba(255,255,238,0.00) 100%);
	display: flex;
	flex-flow: row nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	border-radius: 0px 0px 4em 4em;
}
nav a  {
	display: block;
	float: left;
	width: auto;
	margin: auto;
	padding: 0.5em;
	flex: 1 1 10em;
	border: none;
	text-align: center;
	text-decoration: none;
	color: #056839;
	font-weight: 600;
	font-size: 1em;
}
a.gci {
	width: 20em;
	flex: 1 2 20em;
}
nav a:hover{
	text-decoration: underline;
	background-repeat: no-repeat;
}

/* 	- main Structure 
		- header
		- article
			- form
			- text in h2 and p
	- */
main {
	width: 100%;
	margin: 0px;
	padding: 0px;
	height: auto;
}

/* - Header Styles - */
header {
	padding: 0px;
	margin: 0em;
	display: block;
}
header h1 {
	display: block;
	width: 100%;
	margin: 0px;
	padding-top: 0.4em;
	font-size: 4em;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-variant: small-caps;
	text-align: left;
}
header h2 {
	display: block;
	margin: 0px;
	padding-bottom: .75em;
	width: 100%;
	font-size: 2.4em;
	text-align: left;
	color: rgba(5,104,57,1.00);
}
.left-side {
	width: 20em;
	display: block;
	margin-top: 1em;
	margin-right: 2em;
	margin-left: 4em;
	margin-bottom: 0.5em;
	float: left;
}

/* - Form Grid Structure - */
form.grid-container {
	display: grid;
	grid-template-columns: 5em 8em 6em;
	grid-template-areas: 
		"form-head 			form-head 			form-head"
		"name-lab 			name 				name"
		"email-lab 			email 				email"
		"tel-lab 			tel 				tel"
		"addressLine1-lab 	addressLine1-lab 	addressLine1-lab"
		"addressLine1 		addressLine1 		addressLine1"
		"addressLine2-lab 	addressLine2-lab 	addressLine2-lab"
		"addressLine2 		addressLine2 		addressLine2"
		"city-lab 			city-lab 			city-lab"
		"city  				city 				city"
		"state-lab 			state-lab 			postalCode-lab"
		"state-zip  		state-zip 			state-zip"
		"country-lab 		country-lab 		country-lab"
		"country  			country 			country"
		"home-size-lab 		home-size-lab 		home-size"
		"income-lab 		income-lab 			income"
		"bill-lab 			bill-lab 			bill"
		"how-learn-lab 		how-learn-lab 		how-learn-lab"
		"how-learn 			how-learn 			how-learn"
		"interest-lab 		interest-lab 		interest-lab"
		"interest 			interest 			interest"
		"submit-but 		submit-but 			reset-but"
		;
	
}
.grid-container > label#form-head {
	grid-area: form-head;
}
.grid-container > label#name-lab {
	grid-area: name-lab;
}
.grid-container > input#name {
	grid-area: name;
}
.grid-container > label#email-lab {
	grid-area: email-lab;
}
.grid-container > input#email {
	grid-area: email;
}
.grid-container > label#tel-lab {
	grid-area: tel-lab;
}
.grid-container > input#tel {
	grid-area: tel;
}
.grid-container > label#addressLine1-lab {
	grid-area: addressLine1-lab;
}
.grid-container > input#addressLine1 {
	grid-area: addressLine1;
}
.grid-container > label#addressLine2-lab {
	grid-area: addressLine2-lab;
}
.grid-container > input#addressLine2 {
	grid-area: addressLine2;
}
.grid-container > label#city-lab {
	grid-area: city-lab;
}
.grid-container > input#city {
	grid-area: city;
}
.grid-container > label#state-lab {
	grid-area: state-lab;
}
.grid-container > label#postalCode-lab {
	grid-area: postalCode-lab;
}
#state-zip {
	grid-area: state-zip;
	width: 20em;
	margin: 0px;
	padding: 0px;
	display: block;
	text-align: left;
	font-size: 1em;
}
.grid-container input#state {
	grid-area: state;
	width: 8.5em;
	margin: 0em 0.5em 0em 0em;
	text-align: center;
}
.grid-container input#postalCode {
	grid-area: postalCode;
	width: 12em;
	margin: 0em 0em 0em 1em;
	text-align: center;
}
.grid-container > label#country-lab {
	grid-area: country-lab;
}
.grid-container > input#country {
	grid-area: country;
}
.grid-container > label#home-size-lab {
	grid-area: home-size-lab;
}
.grid-container > input#home-size {
	grid-area: home-size;
}
.grid-container > label#income-lab {
	grid-area: income-lab;
}
.grid-container > input#income {
	grid-area: income;
}
.grid-container > label#bill-lab {
	grid-area: bill-lab;
}
.grid-container > input#bill {
	grid-area: bill;
}
.grid-container > label#how-learn-lab {
	grid-area: how-learn-lab;
}
.grid-container > select#how-learn {
	grid-area: how-learn;
}
.grid-container > label#interest-lab {
	grid-area: interest-lab;
	text-align: center;
}
#interest-lab em {
	display: block;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-size: 0.75em;
	font-weight: bold;
}

.grid-container > input#interest {
	grid-area: interest;
}
.grid-container > button#submit-but {
	grid-area: submit-but;
}
.grid-container > input#reset {
	grid-area: reset-but;
}
/*

*/

/* - Form Styles - */
form#my-solar-info {
	width: 20em;
	float: left;
	clear: both;
	background-color: rgba(255,255,238,0.50);
	border-radius: 4em;
	padding: 2em 2em;
	margin-top: 1em;
	margin-right: 2em;
	margin-bottom: 2em;
	margin-left: 1em;
	-webkit-box-shadow: -1em 2em 1em rgba(0,0,0,0.50);
	box-shadow: -1em 2em 1em rgba(0,0,0,0.50);
	color: rgba(5,104,57,1.00);
	border: 1px solid rgba(5,104,57,0.42);
}
#my-solar-info > label, .headspace {
	margin-top: 0.25em;
	padding: 0.25em;
	text-align: left;
	width: 100%;
}.footroom {
	margin-bottom: 0.25em;
	padding: 0.25em;
	text-align: left;
	width: 100%;
}
.bottomline {
	margin-bottom: 1em;
	padding: 0.25em;
	text-align: left;
	width: 100%;
	border-bottom: 1px solid rgba(5,104,57,1.00);
}
.topline {
	margin-top: 1em;
	border-top: 1px solid rgba(5,104,57,1.00);
}
.button {
	text-align: center;
	margin: 0.5em;
	padding: 0.5em;
}
#my-solar-info > label#form-head {
	grid-area: form-head;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0.5em;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0.5em;
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
}

/* - article container and text Styles - */
article {
	background-color: rgba(255,255,238,0.50);
	border-radius: 4em;
	padding: 1em;
	margin: 2em;
	clear: both;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,238,0.25) 0%,rgba(255,255,238,0.50) 78.75%,rgba(255,255,238,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,238,0.25) 0%,rgba(255,255,238,0.50) 78.75%,rgba(255,255,238,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,238,0.25) 0%,rgba(255,255,238,0.50) 78.75%,rgba(255,255,238,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,238,0.25) 0%,rgba(255,255,238,0.50) 78.75%,rgba(255,255,238,1.00) 100%);
	min-height: 56em;
}
article h2 {
	font-size: 1.5em;
	margin-top: 1em;
	margin-right: 1em;
	margin-bottom: 0em;
	margin-left: 1em;
	display: block;
}
article p, ol , em{
	font-size: 1em;
	margin-top: 0em;
	margin-right: 2em;
	margin-bottom: 0em;
	margin-left: 3em;
	display: block;
}
article p em {
	padding-bottom: 1em;
}

/* - footer Styles - */
footer  {
	margin: 3em;
	color: #FFFFEE;
}
footer h3 {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	display: block;
	text-align: center;
}
footer p {
	margin: 0px;
	width: 100%;
	display: block;
	text-align: center;
}
footer p a {
	text-decoration: none;
	color: #FFFFEE;
}
footer p a:hover {
	text-decoration: underline;
}