#container, .header{
	background-color: gray;
	margin-left: 10%;
	margin-right: 10%;
	float: left;
	clear: both;
	padding: 20px;
	border-radius: 25px;
}
#container{
	width: 80%;
}
.header{
	background-color: #696969;
	margin-left: 4%;
	margin-right: 5%;
	width: 87%;
	border: solid;
	border-radius: 15px;
}
/* styles the menu buttons in header.*/
.header .button{
	background-color:#A9A9A9;
	font-size: larger;
	width: 100px;
	height: 30px;
	text-align: center;
	border-radius: 10px;
	padding: 7px;
	border: solid;
	float: left;
	margin-top: 20px;
	margin-bottom: 15px;
	margin-right: 3px;
	margin-left: 3px;
}
/* Indicates the page title we are on */
.pageTitle{
	font-size: 30px;
	float: right;
	border: solid;
	border-radius: 10px;
	background-color: #A9A9A9;
	padding-left: 10px;
	padding-right: 10px;
}

/* logo dimensions and makes it on the left of subheading.*/
.logo{
	width: 100px;
	height: 100px;
	border-radius: 10px;
	float: left;
	margin-right: 15px;
}
.textarea{
	background-color: #A9A9A9;
	margin-left: 8%;
	margin-right: 10%;
	float: left;
	width: 80%;
	padding: 20px;
	border-radius: 25px;
}
/* Home page*/
	/*Border around the Image and text*/
.section{
	border: solid;
	border-radius: 10px;
	padding: 10px;

}
	/*Image of me in the home page*/
.imageMe {
	float:left;
	width:50%;
	margin-left:10%;
	margin-right: 5%;
	margin-bottom: 10px;
	margin-top: 10px;
	border-radius: 10px;
	}
.textHomePage{
	font-size: x-large;
	margin-bottom: 150px;
	padding: 10px;
}
/*End Home page stuff*/


/* Link that has never been clicked, un-visited link */
a:link {
	color: white;
	text-decoration: none;
	}
	
/* visited link */
a:visited {
	color: white;
	text-decoration: none;
}

/* mouse over link */
a:hover {
	text-decoration: none;
	color: hotpink;
}

/* selected link */
a:active {
	color: yellow;
	text-decoration: none;
}

body{
	background-color: #dbd7d2;
}
hr{
	background-color: black;
	height: 2px;
	border: none;
}
h2{
	text-align: center;
}
/* About me page */
	/* woodworking section. About Me page */
	/* Image width and height of the woodworking section*/
		.imageBubble1{
			width: 100px;
			height: 150px;
		}
		.imageBubble2{
			width: 125px;
			height: 150px;
		}
		.imageBubble3{
			width: 200px;
			height: 125px;
		}
	/*  End of Image width and height of the woodworking section*/
	/* Start Bubble hover woodworking section*/
	.imageBubble1:hover{
		width: 200px;
		height: 300px;
	}
	.imageBubble2:hover{
		width: 250px;
		height: 300px;
	}
	.imageBubble3:hover{
		width: 400px;
		height: 250px;
	}
	/* End Bubble Hover woodworking section*/
	/* Text in woodworking section */
	.woodworkingText{
		border: solid;
		border-radius: 10px;
		float: right;
		clear: both;
		width: 200px;
		margin: 10px;
		padding-left: 5px;
	}
	.woodworkingDIV, .outdoorsDIV{
		border: solid;
		border-radius: 10px;
	}

	/* Outdoors section */
		.imageBubble4, .imageBubble5,.imageBubble6,.imageBubble7,.imageBubble8,.imageBubble9{
		float: right;
		}
		/* Image width and height of the out door section */
			.imageBubble4{
				width: 50px;
				height: 100px;
			}
			.imageBubble5{
				width: 100px;
				height: 50px;
			}
			.imageBubble6 , .imageBubble9{
				width: 100px;
				height: 100px;
			}
			.imageBubble7, .imageBubble8{
				width: 80px;
				height: 100px;
			}
		/* End of Image width and height of the out door section */
		/* Hover outdoors section */
		.imageBubble4:hover{
			width: 100px;
			height: 200px;
		}
		.imageBubble5:hover{
			width: 200px;
			height: 100px;
		}
		.imageBubble6:hover , .imageBubble9:hover{
			width: 200px;
			height: 200px;
		}
		.imageBubble7:hover, .imageBubble8:hover{
			width: 160px;
			height: 200px;
		}
		/* End of Hover outdoors section */
		/* Text in outdoors section */
		.outdoorsText{
			border: solid;
			border-radius: 10px;
			float: left;
			clear: both;
			width: 200px;
			margin: 10px;
			padding-left: 5px;
		}
	/* End of Outdoor section */

	/* Transition, border-radius and margin of all imagees on the About me page */
	.imageBubble1, .imageBubble2, .imageBubble3,.imageBubble4, .imageBubble5,.imageBubble6,.imageBubble7,.imageBubble8,.imageBubble9{
		border-radius: 80px;
		transition: width 1.5s, height 1.5s;
		margin: 5px;
	}
/* End of About me page */

/* Education page*/


	#schoolImgText{
		text-align: center;
		font-size: 25px;
		font-style: oblique;
	}
		/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
	.flip-box {
		background-color: transparent;
		width: 500px;
		height: 350px;
		/*border: 1px solid #f1f1f1;*/
		perspective: 1000px; /* Remove this if you don't want the 3D effect */

		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 15px;
		width: 41%;
	}
	
	/* This container is needed to position the front and back side */
	.flip-box-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.8s;
		transform-style: preserve-3d;
	}
	
	/* Do an horizontal flip when you move the mouse over the flip box container */
	.flip-box:hover .flip-box-inner {
		transform: rotateY(180deg);
	}
	
	/* Position the front and back side */
	.flip-box-front, .flip-box-back {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden; /* Safari */
		backface-visibility: hidden;

		border-radius: 10px;
		border-style: solid;
	}
	
	/* Style the front side (fallback if image is missing) */
	.flip-box-front {
		color: black;
	}
	
	/* Style the back side */
	.flip-box-back {
		color: white;
		transform: rotateY(180deg);
	}
	/* End of Education page*/

	.schoolIframe{
		border-radius: 10px;
		float: right;
	}
	iframe{
		position:relative;
	}