/* 

 (                         *         (                                         
 )\ )                    (  `        )\ )                              )    )  
(()/(   (     )          )\))(      (()/(     (   (       )         ( /( ( /(  
 /(_)) ))\ ( /(   (     ((_)()\   (  /(_))   ))\  )(     (      (   )\()))\()) 
(_))  /((_))(_))  )\ )  (_()((_)  )\(_))_   /((_)(()\    )\  '  )\ (_))/(_))/  
/ __|(_)) ((_)_  _(_/(  |  \/  | ((_)|   \ (_))   ((_) _((_))  ((_)| |_ | |_   
\__ \/ -_)/ _` || ' \)) | |\/| |/ _| | |) |/ -_) | '_|| '  \()/ _ \|  _||  _|  
|___/\___|\__,_||_||_|  |_|  |_|\__| |___/ \___| |_|  |_|_|_| \___/ \__| \__|  

*/

/* css reset */

* {
	margin: 0;
	padding: 0;
	color: #000;
}


header {
	padding: 10px;
}

body {
	background-color: cyan;
	text-align: center;
}

h1 {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 34px;
	color: red;
	text-align: center;
}

h2 {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 28px;
	color: red;
	text-align: center;
}

h3 {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 23px;
	color: red;
	text-align: center;
}

p {
	font-family: "Helvetica", Arial, san-serif;
	font-size: 16px;
	color: red;
	text-align: center;
}

ul {
	list-style-type: none;
}

li {
	display: inline;
	background-color: limegreen;
	padding: 10px;
}

nav {
	width: 100%;
	height: 10%;
	padding: 10px;
}

head {
	width: 100%;
	height: 20%;
}



/* canvas */

main#canvas {
	width: 46.9vw;
	height: 47.1vw;
	margin: 5.6vh auto 0 auto;
}

/* HTML5 SEMANTIC TAGS */

section {
	width: 100%;
	float: left;
}

article {
	height: %;
	float: left;
	margin-top: %;
	margin-left: %;
}

figure {
	width: %;
	height: %;
	margin-top: %;
	margin-left: %;
	float: ;
}

/* color classes */ /* css pseudo-class hover states */

.yellow {
	background-color: #ffff00;
	height: 4%;
}
	.yellow:hover {
		background-color: #ff3333;
	}
.yellow2 {
	background-color: #ffff00;
	height: 100%;
	width: 84%;
	margin-left: 16%;
}
.yellow2:hover {
		background-color: #ff3333;
	}
.yellow3 {
	background-color: #ffff00;
	height: 100%;
	margin-left: 68%;
	width: 32%;
}
.yellow3:hover {
		background-color: #ff3333;
	}
.yellow4 {
	background-color: #ffff00;
	height: 100%;
	margin-left: 68%;
	width: 32%;
}
.yellow4:hover {
		background-color: #ff3333;
	}
.yellow5 {
	background-color: #ffff00;
	height: 100%;
	margin-left: 24%;
	width: 76%;
}
.yellow5:hover {
		background-color: #ff3333;
	}

.black {
	background-color: #000000;
	height: 100%;
	margin-left: 68%;
	width: 32%;
}
	.black:hover {
		background-color: #0099cc;
	}
.black2 {
	background-color: #000000;
	height: 25%;
}
	.black2:hover {
		background-color: #0099cc;
	}
.blue {
	background-color: #0099cc;
	height: 6%;
}
	.blue:hover {
		background-color: #000000;
	}
.blue2 {
	background-color: #0099cc;
	height: 2.1%;
	width: 100%;
}
	.blue2:hover {
		background-color: #000000;
	}
.blue3 {
	background-color: #0099cc;
	height: 14%;
}
	.blue3:hover {
		background-color: #000000;
	}
.blue4 {
	background-color: #0099cc;
	height: 23%;
}
	.blue4:hover {
		background-color: #000000;
	}
.blue5 {
	background-color: #0099cc;
	height: 2%;
}
	.blue5:hover {
		background-color: #000000;
	}
.blue6 {
	background-color: #0099cc;
	height: 14%;
}
	.blue6:hover {
		background-color: #000000;
	}
.blue7 {
	background-color: #0099cc;
	height: 2%;
}
	.blue7:hover {
		background-color: #000000;
	}
.red {
	background-color: #ff3333;
	height: 7%;
}
	.red:hover {
		background-color: #ffffff;
	}
.red2 {
	background-color: #ff3333;
	height: 100%;
	width: 85%;
	margin-left: 15%;
}
	.red2:hover {
		background-color: #ffffff;
	}
.white {
	background-color: #ffffff;
	height: 100%;
	width: 76%;
	margin-left: 24%;
}
	.white:hover {
		background-color: #ffff00;
	}
.white2 {
	background-color: #ffffff;
	height: 100%;
	width: 48%;
	margin-left: 52%;
}
	.white2:hover {
		background-color: #ffff00;
	}