main.css

/* 
    Created on : Feb 15, 2015, 3:42:25 PM
    Author     : Dinesh
*/

/* So the HTML5 structural tags work in older browsers */
article, aside, figure, footer, header, nav, section {
    display: block;
}
/* the styles for the elements */
* {
    margin: 0;
    padding: 0;
}
html {
    background-color: white;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    width: 825px;
    margin: 0 auto;
    border: 2px solid #FF0000;
    background-color: #fffded;
}
a:focus, a:hover {
    font-style: italic;
    color: #FF0000;
}

header h1 {
    padding: 5px;
    color: #800000;
}
header h2 {
    font-style: italic;
}
header img {
    height: 110px;
    width: 315px;
    float: left;
    padding: 5px 10px;
}

/* the styles for the navigation bar */
nav {
    clear: both;
}
nav ul {
    list-style: none;
    padding: 1em 0;       /* padding above and below li elements */
    background-color: #006600; }
nav li  {
    display: inline;
}
nav a {
    padding: 1em 2em;
    text-decoration: none;
    color: #fffded;
    font-weight: bold;
    border-right: 2px solid #fffded; 
}

@media screen and (min-width: 500px){
    /* the styles for the section */
    section {
        padding: 0 20px;
        width: 60%;
        float: right;
    }
    section h1 {
        color: #000066;
        font-size: 150%;
        padding: .5em 0 .25em;
    }
    section h2 {
        font-size: 120%;
        padding-bottom: .25em;
    }
    section p {
        padding-bottom: .5em;
    }
    section blockquote {
        padding: 0 2em;
        font-style: italic;
    }
    section ul {
        padding: 0 0 1.5em 1.25em;
        list-style-type: circle;
    }
    section li {
        padding-bottom: .35em;
    }
    article {
        border-top: 2px solid #FF0000;	
        border-bottom: 2px solid #FF0000;
    }
    article h1 {
        color: black;
    }
    article img {
        float: right;
        margin: .5em 0 1em 1em;
        border: 1px solid black;
    }
    aside {
        width: 210px;
        float: left;
        padding-left: 20px;
    }

    aside h1 {
        color: #800000;
        font-size: 150%;
        padding: .5em 0 .25em;
    }
    aside h2{
        width: 100%;
        font-size: 120%;
        padding-bottom: .25em;
    }
    aside img {
        float: left;
        width: 80%;
        padding-bottom: 1em;
    }
}

footer {
    border-top: 2px solid #FF0000;
    clear: both;
}
footer p {
    padding: 1em 0;
    text-align: center;
}