Instructions for "Out of This Word"

1.  Finish "Out of this World" markup.

2.  Styles
    Create a directory called /stylesheets
    In your /stylesheets directory, create a stylesheet called styles.css
    In your index.html, link to your styles.css.
    
    Style the layout (do not touch the markup[HTML]).
    
    
    You can use my example as a guideline, or your own images/styles.
    - use at least 1 Google font in your document.
    - use at least 1 background image
    - use a border somewhere
    - add some styles to some hover states of items
    - advanced: add animations/transitions

    Not allowed: Float Property.
    
    Links to Images:
    https://s3.amazonaws.com/uploads.hipchat.com/54891/839336/izh6wkhViIjdYPK/The%20Cosmos%21%20%281%29.png
    https://s3.amazonaws.com/uploads.hipchat.com/54891/839336/7xnCvHKv2RtUof4/The%20Cosmos%21%20%282%29.png
    https://s3.amazonaws.com/uploads.hipchat.com/54891/839336/xo8IXUd4c7PLMrr/The%20Cosmos%21%20%283%29.png
    
3.  [ NEW BRANCH ] Nav & Dropdown Subnav
    Create a new branch called 'subnav'
    Add a CSS Reset at the TOP of your styles.css (after the @import and before all your other code)
    Style the Nav (you can adjust the markup if you need to)
    
    Advanced: Make a dropdown nav. (No copying from the internet!)
    Superadvanced: Make a fancy dropdown nav with an animation/transition.

    Not allowed: Float Property.
    
4.  [ NEW BRANCH ] Multi-Column Layouts
    - remove all padding, border, and margin styles from <section> and <aside>
    - Add a clearfix hack to the top of your stylesheet.
    - Add markup to your index.html to make sure <section> and <aside> are contained inside a parent div.
    - Apply the clearfix hack to the parent div.
    - Make the a 2-column layout.
    
5.  [ NEW BRANCH ] Mobile-Responsive Layouts (using media queries)
    - add the viewport meta tag in the head of your html markup:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    - add media query ranges to the end of your styles.css file:
    
    /* MOBILE ONLY */
    @media only screen and (max-width: 480px){
    
    }
    
    /* TABLET ONLY */
    @media only screen and (min-width: 481px) and (max-width: 768px){
    
    }
    
    /* DESKTOP ONLY */
    @media only screen and (min-width: 769px){
    
    }
    
    - create media-specific styles for each media range.