body { background-color:#DADADA }
.wrapper { margin: auto; width:100%; max-width:960px; position:relative }
#header-container { z-index:2; position:fixed; top:0; left:0; right:0; height:130px; background-color:#1873c7; box-shadow:0 5px 5px -2px rgba(0,0,0,0.5) }
#header-container>header>h1 { color:white; font-size:60px; margin-left:120px }
#header-container>header>h2 { color:white; font-size:40px; margin-left:40px }
#header-container>header>h2>a,#header-container>header>h2>a:visited { color:#ffffff }
#header-container>header>h2>a:hover { color:#FFA042 }
#myself { position:absolute; top:10px; left:45px; text-align:center; border: 5px solid white; border-radius: 5px 5px 5px 5px; box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.5); }
#header-container>header>nav { float:right; margin-top:-70px; margin-right:90px }
#header-container>header>nav>h1 { display:none; visibly:hidden }
#header-container>header>nav>ul>li { display:inline; margin-right:5px }
#header-container>header>nav>ul>li>a { color:#ffffff; padding:10px 20px; text-decoration:none; border-radius:5px; box-shadow:-5px -5px 5px -3px rgba(0, 0, 0, 0.5) inset;

background: rgb(41,149,228); /* Old browsers */
background: rgb(0,183,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(41,149,228,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,234,1)), color-stop(100%,rgba(41,149,228,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%,rgba(41,149,228,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,183,234,1) 0%,rgba(41,149,228,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%,rgba(41,149,228,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#2995e4',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(0,183,234,1) 0%,rgba(41,149,228,1) 100%); /* W3C */

 }
#header-container>header>nav>ul>li:hover>a { box-shadow:5px 5px 5px -3px rgba(0, 0, 0, 0.5) inset }

#main>article { z-index:1; background-color:#ffffff; color:#444444; padding:150px 5px 110px 5px; min-height:200px; border-left:4px solid #1873c7; border-right:4px solid #1873c7 }

#footer-container { position:relative; height:20px; background-color:#1873c7; text-align:right }
#HTML5-powered { position:absolute; right:25px; top:-16px }

#main>article h1 { font:20px/26px arial; padding:15px 0; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.4) }
#main>article h2 { font:16px/20px arial; padding:10px 0; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.4) }


@media screen and (max-device-width:480px) {
 .wrapper { margin:auto; width:100%; max-width:100%; position:relative }
 #header-container>header>h1 { font-size:40px; line-height:70px; margin-left:120px }
 #header-container>header>h2 { font-size:20px; margin-left:40px }
 #header-container>header>nav { float:none; text-align:center; margin:25px 0 0 0 }
}

@media screen and (max-width:750px) {
 #myself { display:none }
 #header-container>header>h1 { font-size:20px; line-height:70px; margin-left:5px }
 #header-container>header>h2 { font-size:15px; margin-left:5px }
 #header-container>header>nav { position:absolute; top:0; right:0; text-align:center; margin:0 }
 #header-container>header>nav>ul>li { display:block }
 #header-container>header>nav>ul>li>a { display:block; padding:5px 10px; margin:5px }
}