/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- STYLES DESIGNED AND BUILT BY IAN BESLER -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

/* -=-=-=-=-=-=-=-=-=-=
-=-=-= CSS RESET =-=-=-
=-=-=-=-=-=-=-=-=-=- */

	* {
		padding: 0;
		margin: 0;
	}

		a:link {
			color: #00f;
		}

		a:hover {
			background-color: #ff0;
		}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- HTML5 SEMANTIC TAGS -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* =-=-=-=-=-=-=-=-=
=-=-=- HEADER =-=-=-
-=-=-=-=-=-=-=-=- */

header {
	background-color: lightgray;
	padding: 2%;
	border-bottom: 0.1em solid #000;
	font-size: 1.5em;
}

	h1,h2,h3,h4,h6,form {
		font-family: sans-serif;
		font-weight: normal;
	}

/* =-=-=-=-=-=-=-=-=-
=-=-=- SECTION -=-=-=
-=-=-=-=-=-=-=-=-= */

	section {
		padding: 2%;
	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-= USER INPUT FORM LABELS -=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-= USER INPUT FORM FIELDS -=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

h4,form {
	text-align: center;
}

	ul {
		list-style-type: none;
	}

	h4,li {
		text-indent: 0;
		margin-bottom: 2vh;
	}

	input {
		padding: 0.5vh;
		color: black;
		font-weight: bold;
		border: 3px solid black;
		background-color: white;
	}

		input:hover {
			color: #000;
			border: 3px solid gray;
			background-color: #ff0;
		}

		input:focus { 
	    	background-color: yellow;
		}

/* =-=-=-=-=-=-=-=-=
=-=-=- FOOTER =-=-=-
-=-=-=-=-=-=-=-=- */

footer {
	background-color: lightgray;
	padding: 2%;
	font-size: 2em;
	border-top: 0.1em solid #000;
}

	footer img {
		width: 1em;
	}