html { font-family: Sans; min-height: 256px; background: -webkit-linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat; background: -moz-linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat; background: linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat; text-align:center; } body { color:#f3f3f3; text-align:left; vertical-align:top; padding-left: 8px; padding-right: 160px; padding-bottom: 64px; min-height: 200px; max-width: 1024px; margin: 0 auto; text-align:left; } a { color:#f3f3f3; text-decoration:none; border-bottom: 1px dotted white; } a:hover { border-bottom: 1px solid white; } img { border:0; } #logo { position: absolute; /* left:1024px; */ /* float: right; */ /* clear:both; */ /* display: inline-block; */ right: 8px; top: 64px; width: 136px; } #c3d2 { margin-left: 32px; } header, #content, footer { padding: 8px; } header { padding-left: 144px; background:url("../images/logo.svg") no-repeat; background-size: 128px; background-position: 0 50%; height: 128px; } header a, header a:hover { vertical-align: middle; display: block; width:23em; margin-top:40px; border:0; } header h1, header h2 { font-weight: bold; letter-spacing: 1em; padding:0; margin:0; } header h1 {letter-spacing: 0.2em;} header h2 {letter-spacing: 0.15em;} header, aside { text-align: left; } aside { position:relative; float:right; text-align:right; margin-right: -152px; } #content { /* background:rgba(0,0,0,.1); */ margin-left:232px; position:relative; /* max-width:800px; */ padding: 16px 16px 16px 24px; } .summary { padding:0; margin:0; } .summary a { margin-left: -8px; border:0; } nav, #content { display: inline-block; } nav div > span a { margin: 0 8px 0 8px; } nav a, nav a:hover { border:0; } nav div > span a:first-child { margin-left: 0; } nav a:hover span, nav div > span a:hover, .summary a:hover { border-top: 2px dotted white; border-bottom: 2px dotted white; } nav img { vertical-align:middle; margin: 8px 8px 8px 0; border:0; } nav { padding-top: 16px; position:absolute; } nav > div { width: 224px; text-align:left; } date { float: right; clear: right; font-size: 0.8em; position:relative; } footer { text-align: center; margin-right: -160px; } footer ul, aside ul { list-style: none; padding:0; } footer li { display:inline-block; } footer li:after { content: "000"; } footer li:last-child:after { content: ""; } footer a, aside a, nav a, header a { border:0; } footer a:hover, aside a:hover { border-bottom:1px dashed white; } @media (max-width: 1008px) { aside { float:none; } nav { width: 100%; position: relative; display: block; -webkit-columns:auto; -moz-columns:auto; columns:auto; text-align:center; } nav > div { display: inline-block; } nav, #content, #c3d2 { margin-left: 0; } } @media (max-width: 612px) { body { padding-right: 8px; } aside { margin-right:8px; } footer { margin-right: -8px; } #logo { display:none; } } @media (max-width: 912px) { nav img { width:32px; height:32px; } #c3d2 img { width: 49px; height: 16px; } } @media (max-width: 480px) { nav img { width:64px; height:64px; } #c3d2 img { width: 98px; height: 32px; } }