<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="Lange Zeilen umbrechen">
</head>
<body>
<pre><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="Lange Zeilen umbrechen">
</head>
<body>
<pre>html {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
body {
margin: 10px auto;
max-width: 60em;
font-family: sans-serif;
color: #333333;
}
header,
nav,
nav a,
main,
article,
section,
aside,
footer {
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
margin: 10px;
}
header {
background: #F1F3F4;
border-color: #d5d5d5;
}
header img {
width: 13em;
margin-right: 50px;
float: left;
}
nav {
font-size: 0.91em;
padding: 0;
background: #fffbf0;
border-color: #e7c157;
}
nav ul {
padding: 0;
}
nav li {
list-style: none;
margin: 0;
padding: 0.5em;
}
nav a {
display: block;
padding: 0.2em 10px;
font-weight: bold;
text-decoration: none;
background-color: #e7c157;
color: #333;
}
nav ul a:hover,
nav ul a:active {
color: #fffbf0;
background-color: #dfac20;
;
}
main {
display: block;
background: #c4ced3;
border-color: #8a9da8;
min-width: 16em;
/* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}
section {
background: #F1F3F4;
border-color: slateblue;
}
article {
background: #ffede0;
border-color: #df6c20;
}
aside {
background: #ebf5d7;
border-color: #8db243;
}
footer {
background: #e4ebf2;
border-color: #8a9da8;
}
footer p {
float: right;
margin: 0;
}
@media (min-width: 45em) {
/* mehrspaltiges Layout für breitere Viewports */
nav {
float: left;
width: 15em;
}
main {
margin-left: 15em;
}
}
</pre>
</body>
</html>
</pre>
</body>
</html>