/* style.css */
body{
background-color:#f4f4f4;
color:#555;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}

.container{
width:80%;
margin:auto;

/* No scroll bar even if something goes outside the  container*/
overflow:hidden;
}

#main-header{
background-color:coral;
color:#fff;
}

#navbar{
background-color:#333;
color:#fff;
}

#navbar ul{
padding:0; /* overwrite default padding */
list-style: none; /* get rid of bullet points */
}

#navbar li{
display:inline; /* listed in the same line */
}

#navbar a{
color:#fff;
text-decoration: none;
font-size:18px;
padding-right:15px; /* custom padding */
}

#showcase{
/* seach for image: "light abstract corel" */
background-image:url('../images/showcase.jpg');
background-position:center right;
min-height:300px; /* make page responsive */
margin-bottom:30px; /* push everything up */
text-align: center;
}

#showcase h1{
color:#fff;
font-size:50px;
line-height: 1.6em;
padding-top:30px;
}

#main{
float:left;
width:70%;
padding:0 30px;
box-sizing: border-box; /* align with padding etc */
}

#sidebar{
float:right;
width:30%;
background: #333;
color:#fff;
padding:10px;
box-sizing: border-box; /* align with padding etc */
}

#main-footer{
background: #333;
color:#fff;
text-align: center;
padding:20px;
margin-top:40px;
}

/* Add media query to make the page responsive */
/* Styles put inside apply only if the width < 600px */
@media(max-width:600px){
#main{
width:100%; /* change width */

/* Remove float from main and sidebar so they go on top of each other */
float:none;
}

#sidebar{
width:100%;
float:none;
}
}