/* STYLES DESIGNED BY AARON GUHIN
*/
/* CSS RESET */

	*{
		margin: 0;
		padding: 0;
	}

	main#canvas {
			width: 486px;
			height: 570px;
			background-color: #1f2b5d;
	}

			section {
			width:100%;
			height: 90%;
			}

				article {
				width: 43.75%;
				height: 100%;

			}

					figure {
						width: 75%;
						height: 90%;

					}

			.orangeleft {
				background-color: #ce5e2c;
				float: left;
			}

			.orangeright {
				background-color: #ce5e2c;
				float: right;
			}

			.limegreenleft {
				background-color: #8cb849;
				float: left;
			}

			.limegreenright {
				background-color: #8cb849;
				float: right;
				
			}

			.yellowleft {
				background-color: #edc518;
				float: left;
				width: 65%;
				height: 90%;
			}

			.yellowright {
				background-color: #edc518;
				float: right;
				width: 65%;
				height: 90%;			}

			.redleft {
				background-color: #ca454a;
				float: left;
				width: 50%;
				height: 88%;
			}

			.redright {
				background-color: #ca454a;
				float: right;
				width: 50%;
				height: 88%;			}	



/* HERE ARE MY PSUEDOCLASSES FOR USER INTERACTION */

			.orangeleft:hover {
				background-color: red;
			}
			.orangeright:hover {
				background-color: purple;
			}
			.redleft:hover {
				background-color: green;
			}
			.redright:hover {
				background-color: blue;
			}
			.limegreenleft:hover {
				background-color: pink;
			}
			.limegreenright:hover {
				background-color: black;
			}
			.yellowleft:hover {
				background-color: cyan;
			}
			.yellowright:hover {
				background-color: magenta;
			}
		#canvas:hover	{
				background-color: gold;
		}
					}