* {
			box-sizing: border-box;
		}
		.row::after {
			content: "";
			clear: both;
			display: table;
		}
		[class*="col-"] {
			float: left;
			padding: 15px;
		}
		html {
			font-family: "Lucida Sans", sans-serif;
		}
		.header {
			background-color: #9933cc;
			color: #ffffff;
			padding: 15px;
		}
		.menu {
			margin-top: 4px;		
			border: 1px solid black;
			text-align: left;
			padding: 3px;
			float: left;
		}
		.menu ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		.menu li {
			background-color: #fff;
			
		}
		.menu li:hover {
			
		}
		.content {
			margin-top: 4px;
			border: 1px solid black;
			text-align: left;
			padding: 3px;
			float: right;
		}
		.footer {
			text-align: center;
			font-size: 12px;
		}
		
		/* For mobile phones: */
		@media screen and (max-width: 800px) {
			[class*="col-"] {
				width: 100%;
			}
		}
		
		/* For tablets: */
		@media only screen and (min-width: 801px) {	
			.col-m-1 {width: 8.33%;}
			.col-m-2 {width: 16.4%;}
			.col-m-3 {width: 25%;}
			.col-m-4 {width: 33.33%;}
			.col-m-5 {width: 41.66%;}
			.col-m-6 {width: 50%;}
			.col-m-7 {width: 58.33%;}
			.col-m-8 {width: 66.66%;}
			.col-m-9 {width: 75%;}
			.col-m-10 {width: 83%;}
			.col-m-11 {width: 91.66%;}
			.col-m-12 {width: 100%;}
		}
		
		/* For desktop: */
		@media only screen and (min-width: 960px) {
			.col-1 {width: 8.33%;}
			.col-2 {width: 16.75%;}
			.col-3 {width: 25%;}
			.col-4 {width: 33.33%;} 
			.col-5 {width: 41.66%;}
			.col-6 {width: 50%;}
			.col-7 {width: 58.33%;}
			.col-8 {width: 66.66%;}
			.col-9 {width: 75%;}
			.col-10 {width: 83%;}
			.col-11 {width: 91.66%;}
			.col-12 {width: 100%;}
		}