/* 

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

*/

/* 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: 40vw;
	height: 40vw;
	margin: 5.6vh auto 0 auto;
}

/* HTML5 SEMANTIC TAGS */

section {
	width: 25%;
	height: 25%;
	float: left;
}

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

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

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

.light-yellow {
	background-color: #ffff66;
}
	.light-yellow:hover {
		background-color: #ff6600;
	}

.light-blue {
	background-color: #6666cc;
}
	.light-blue:hover {
		background-color: #336666;
	}

.teal {
	background-color: #336666;
}
	.teal:hover {
		background-color: #6666cc;
	}

.orange {
	background-color: #ff6600;
}
	.orange:hover {
		background-color: #ffff66;
	}

.yellow {
	background-color: #cccc00;
}
	.yellow:hover {
		background-color: #ff6600;
	}

.dark-orange {
	background-color: #663300;
}
	.dark-orange:hover {
		background-color: #336666;
	}

.dark-blue {
	background-color: #333333;
}
	.dark-blue:hover {
		background-color: #6666cc;
	}

.very-orange {
	background-color: #cc3300;
}
	.very-orange:hover {
		background-color: #ffff66;
	}