/* style sheet for techprep */

/* makes the page load in the same place every time */
html {
	position: relative;
	min-height: 100%;
}
/* makes the page have the same first height */
html,body {
	height: 100%;
}
/* controls the background in the middle around the content */
.pagecontainer {
	width: 70%;
	min-width: 850px;
	height: auto;
	min-height: 300px;
	margin: auto;
	background-color: #eadcca; /*tan*/
	text-align: center;
	padding-left: 1%;
	padding-top: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	min-height: 100%;

	
}
/* underlying background */
body {
	background-color: #bf9e87;
}
/* controls the size of the buttons */
.header {
	padding: 5px;
	padding-bottom: 10px;
	text-align: center;
	font-family: Georgia;
	font-size: 40px;
	min-width: 800px;
}

/* controls the size of logo images */
.header img {
	position: relative;
	width: 10%;
	height: 10%;
	min-height: 50px;
	min-width: 50px;
}
/* controls some of the images */
.openIMG {
	padding: 1em;
}
/* indent on button spacing */
h4 {
	text-indent: 2em;
}
/* puts the buttons in the middle of the page */
ul.center-buttons {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: center;
}
/* makes it a bar instead of list */
li.btn-list {
	display: inline;	
}
/* controls button decoration */
.btn {
    background-color: #228b22; /* Green */
    border: 1px solid green;
    color: white;
    padding: 15px 20px;
    text-decoration: bold;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
	float: left;
	margin: auto;
	text-align: center;

}
/* changes background on hover */
.btn:hover {
    background-color: #4CAF50;	
}
/* text inside the button color */
.btn-info{
	color: white;
	text-decoration: none;
	text-align: center;
}
/* Makes the footer stick to the bottom */
footer{
	position: absolute;
	text-align: center;
	font-size: 14px;
	width: 100%;
	left: 0;
	bottom: -30;
	font-family: Georgia;

}

/* contact form */

/* controls the area around the contact form */
#page-wrap {
	width: 660px;
	background: #F5DEB3;
	padding: 20px 50px 20px 50px;
	margin: 20px auto;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}
/* adds the sizing to the contact form */
#contact-area {
	width: 600px;
	margin-top: 25px;
}
/* controls contact buttons */
#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 471px;
	font-family: Georgia;
	font-size: 1;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}
/* controls the contact message area */
#contact-area textarea {
	height: 90px;
}
/* makes the border light up when the messagebox is clicked on */
#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #228b22;
}
/* colors the contact buttons and aligns them to the right */
#contact-area input.submit-button {
	width: 100px;
    background-color: #228b22; /* Green */
    border: 1px solid green;
    color: white;
    padding: 10px 15px;
    text-decoration: bold;
    display: inline-block;
    font-size: 1em;
    cursor: pointer;
	float: right;
	margin: auto;
	text-align: center;
}
/* makes the labels stay to the left */
label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1em;
}