body {
			background-image:url("cubes.jpg");
		}
		
		#logo {
			height:80px;
			border:1px solid black;
			background-image:url("cubes.jpg");
			color:#F0FA39;
			margin-left: 50px;
			margin-right: 50px;
		}
		


		#menu {
			float:left;
			width:160px;
			height:450px;
			border:1px solid black;
			background-color:#E6B1E2;
			margin-left: 50px;
		}
		


		#content {
			height:450px;
			border:1px solid black;	
			background-color:#71E3E1;
			overflow:auto; 
			color:#112BF0;
			margin-right: 50px;
			
		}
		


		#footer {
			height:80px;
			border:1px solid black;
			margin-left: 50px;
			margin-right: 50px;
		}
		
		#author {
			font-size:14px;
			padding:5px;
		}	
		


		p {
			font-family:serif;
			font-size:16px;		
			margin-left:2em;			
		}
		


		h1 {
			font-family:arial,helvetica,san-serif;
		}
		


		h2 {
			font-family:arial,helvetica,san-serif;
			margin-left:4em;
		}
		 
		
		h3 {
		    color:#112BF0
		}


		ul {
			font-family:arial,helvetica,san-serif;
			font-size:16px;
			margin-right:1em;
		}

/* --------------------------------------------
   < 1200px viewport
-------------------------------------------- */			
				
@media (max-width: 1200px) {

		#content {	
			background-color:red;
			
		}
		
		#menu {
			background-color:red;
		}
		
		

}


/* --------------------------------------------
  iPad in landscape
-------------------------------------------- */

/* 	
	TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
	@media (max-width: 1024px) {  } 
*/
	
@media (max-width: 1024px) {



		body {
			margin: auto;
		}
		
		#content {	
			background-color:white;
			margin:auto;
			width: 450px;
			
		}
		
		#menu {
			background-color:pink;
			height:380px;
			width:450px;
			border:1px solid black;
			text-align:center;
			margin:auto;
			float:none;
		}
		
		li {
			list-style-type: none;
		}

}


/* --------------------------------------------
  iPad in portrait
-------------------------------------------- */

/* 	
	TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
	@media (max-width: 768px) {  } 
*/

@media (max-width: 768px) {



		body {
			margin: auto;
		}
		
		#content {	
			background-color:white;
			margin:auto;
			width: 450px;
			
		}
		
		#menu {
			background-color:pink;
			height:380px;
			width:450px;
			border:1px solid black;
			text-align:center;
			margin:auto;
			float:none;
		}
		
		li {
			list-style-type: none;
		}

}


/* --------------------------------------------
  Mobile
-------------------------------------------- */

@media (max-width: 600px) {



		body {
			margin: auto;
		}
		
		#content {	
			background-color:white;
			margin:auto;
			width: 450px;
			
		}
		
		#menu {
			background-color:pink;
			height:380px;
			width:450px;
			border:1px solid black;
			text-align:center;
			margin:auto;
			float:none;
		}
		
		li {
			list-style-type: none;
		}

}