*{
		margin: 0;
		padding: 0;
	}

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

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

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

			}

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

					}

/*CSS COLOR CLASSES */

			.orange-left {
				background-color: chocolate	;
				float: left;
			}

			.orange-right {
				background-color: chocolate;
				float: right;
			}

			.limegreen-left {
				background-color: lightgreen;
				float: left;
			}

			.limegreen-right {
				background-color: lightgreen;
				float: right;
				
			}

			.yellow-left {
				background-color: yellow;
				float: left;
				width: 65%;
				height: 90%;
			}

			.yellow-right {
				background-color: yellow;
				float: right;
				width: 65%;
				height: 90%;			
			}

			.red-left {
				background-color: indianred;
				float: left;
				width: 50%;
				height: 88%;
			}

			.red-right {
				background-color: indianred;
				float: right;
				width: 50%;
				height: 88%;			
			}	



/* CSS COLOR CLASS HOVER STATES */

			#canvas:hover	{
				background-color: palevioletred;
		}
					}
			.orange-left:hover {
				background-color: pink;
			}

			.orange-right:hover {
				background-color: blue;
			}

			.red-left:hover {
				background-color: cyan;
			}

			.red-right:hover {
				background-color: limegreen;
			}

			.limegreen-left:hover {
				background-color: purple;
			}

			.limegreen-right:hover {
				background-color: orange;
			}

			.yellow-left:hover {
				background-color: cadetblue;
			}

			.yellow-right:hover {
				background-color: maroon;
			}