Web Design for Everybody

	    			 
  					
header{
	padding: 5px;
	background-color: #999999;
	background-image: url("../images/flywheel.jpg");
	background-size: 100%;
}

body{
	padding: 10px 5px;
	margin: 5px 1%;
}

h1{
	display: flex;
	color: #FFFFFF;
	text-transform: uppercase;
	height: 40px;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

h2{
	color: #000000;
}

nav a{
	display: inline-flex;
	color: #000000;	
	background-color: rgba(252,252,252,0.3);
	border-radius: 5px;
	height: 40px;
	width: 20%;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 1px;
	margin: 0px 0px 40px 3.5%;
}

.active{
	background-color: #FFFFFF;
	opacity: 1;
}

a:focus{
	border: solid;
}

a:hover{
	background: #C8C8C8;
}

.left{
	float: left;
	background-color: #787613;
}

aside{
	display: inline-block;
	width: 22%;
	height: 100vh;
	overflow: auto;
}

aside img{
	display: block;
	border: solid 2px #000000;
	width: 75%;
	margin: 30px 10% 0px 12% ;
}

section{
	display: inline-block; 
	width: 70%;
	float: left;
	padding: 0px 10px 0px 10px;
}

table{
	display: inline-block;
	font-family: sans-serif;
	font-size: 75%;
	text-align: center;
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

tr{
	opacity: .7;
	background-color: #E4F5D4;}

tr:first-child{
	opacity: 1.0;
}

tr:hover{
	opacity: 1.0;
}

th:first-child{
	text-align: left;
	border-top-left-radius: 5px;
}

th:last-child{
	border-top-right-radius: 5px;
}

th{
	color: #FFFFFF;
	background-color: #91A655;
	background-image: linear-gradient(#C5E2AA, #91A655);
	padding: 15px;
	font-size: 125%;
	border-bottom: thick solid #667539;
}

tr td{
	padding: 15px;
}

td{
	width: 25%;
	text-shadow: 2px 2px #E0E0E0;
	background-image: radial-gradient(#FFFFFF, #E4F5D4);
}

td:first-child{
	text-align: left;
	width: 50%;
}