html {
    padding: 0 1% 0px;
}

body {
    position:left;
    background: #303030;
    font-family: Verdana, Arial, sans-serif;
    color: #cbcbcb;
    width: 800px;
    margin:0;
    font-size: 0.82em;
}

* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

img {
    max-width: 150%;
    height: auto;
}

header {
    width: 100%;
    height: 100px;
    margin: 0px auto 0px;
    color: white;
}

header h1 a{
    display:block;
    color: #cbcbcb;
    padding: 0px 0 0 0px;
}

.ribbon {
    margin: 0px 0 0px;
    position: fixed;
    background: #1c1c1c;
    opacity: .7;
    clear: both;
    text-align: left;
    padding: 15px 0px 15px 605px;
    width: 1000%;
    margin-left: -600px;
    z-index: 20;
}

/** CONTENT **/
main {
    float:left;
    width: 100%;
    margin: 0 0 0px 0;
}

h1 {
    font-family: Verdana, Arial;
    font-size: 2.10em;
    font-weight: bold;
    font-style: italic;
    padding-left: 0px;
    color: #4e68ad;
    border-left:0px solid #4e68ad;
}

a {
    color: #4e68ad;
    padding: 0px 0px;
    outline: none;
    text-decoration: none;
}
a:hover {
    color: #fff;
    text-decoration: none;
}

@media only screen and (max-width: 900px) {
    body{width:100%}
header h1.ribbon {
    width:100%;
    margin-left: -5px;
    text-align: left;
    padding: 15px 0px 15px 10px;
}
article {width:100%}

@media only screen and (max-width: 600px) {

header h1.ribbon {
    width:99%;
    margin-left: -4px;
    text-align: left;
    padding: 10px 0px 15px 10px;
}
article {width:100%}