body{
background-color:#f4f4f4;
color:#555;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
 
}
h1{margin:10px;}
ul{margin:10px;}
.container{
			width:80%
			margin:auto;
			overflow:hidden;
			}
			
#main-header{
				background-color:coral;
				color:#fff;
				}

#navbar{
		background-color:#333;
		color:#fff;
		
		}
		
#navbar ul{
			padding:0;
			list-style:none;
			}
			
#navbar li{
			display:inline;
			}
			
#navbar a{
			color:#fff;
			text-decoration:none;
			font-size:18px;
			padding-right:15px;
			}
#showcase{
			background-image:url('../images/showcase1.jpg');
			backround-position: centre;
			height:200px;
			margin-bottom:30px;
			text-align:center;
			}
#showcase h1{
			color: white; /*#fff;*/
			font-size:40px;
			line-height:1.6em;
			padding-top:30px;
			}
			
#main{
			float:left;
			width:70%;
			padding:0 30px;
			box-sizing: border-box;
			}
#sidebar{
			float:right;
			width:30%;
			background: #333;
			color:#fff;
			padding:10px;
			box-sizing: border-box;/* box-sizing: border-box enables the box to move when screeen is small */
			}
						
#main-footer{
				background: #333;
				color:#fff;
				font-size:10px;
				text-align: right;
				padding:20px;
				margin-top:40px;
				}
				
	@media(max-width:600px){
							#main{width:100%;
								float:none;
								}
							#sidebar{
									width:100%
				
				float:none;
									}
										
/*-- css crash course travesty --> */