/* Gemeinsame Basis für Unterseiten im echten 2012Metro-Look (Referenz: /02-HTML/2012Metro/
   about.html, project.html) — Seiten-Header + graue Musterfläche + Original-Schriftart
   1:1 aus dem Referenz-Template übernommen (Werte direkt aus css/style.css portiert),
   einzige bewusste Abweichung: Schwarz (#000) im Original wird auf den Seiten selbst
   zu Oliv #8C7B0F der Farbpalette (ursprünglich Dunkelblau, auf Gisberts Vorgabe
   04.09. zu Oliv geändert — Dunkelblau bleibt Textfarbe/Hover-Akzent, s. einzelne Seiten).
   Linksbündig statt zentriert (Gisberts Vorgabe 04.09.: 2012Metro-Templates sind
   linksbündig, nur die Startseite index.html bleibt mittig). */

@font-face{
  font-family:'districtregular';
  src:url('/02-HTML/2012Metro/fonts/distth__-webfont.woff') format('woff'),
      url('/02-HTML/2012Metro/fonts/distth__-webfont.ttf') format('truetype');
  font-weight:normal;font-style:normal;
}

*{box-sizing:border-box}
body{margin:0;
     background:#a8a8a8 url('/02-HTML/2012Metro/images/body-bg.png');
     color:#7f7f7f;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:18px}
a{color:#555;text-decoration:none}
a:hover{color:#959595}

/* ---- Seiten-Header: liegt direkt auf der grauen Musterfläche, kein eigener Hintergrund ---- */
.page-header{padding:42px 50px 50px 50px}
.page-header h1{color:#fff;font-family:'districtregular','arial';
     font-size:44px;font-weight:normal;line-height:50px;margin:0 0 10px}
.page-header p{color:#fff;line-height:14px;margin:0 0 0 3px;opacity:.85}

/* ---- Weißer Inhaltsblock ---- */
.white-container{background:#fff;padding:25px}
.list-wrap{background:#fff;margin:0 0 50px;padding:50px;clear:both}

hr.light{background:#ebebeb;border:0;height:1px;margin:40px 0}

/* ---- Zentrierte "X% width page" (Referenz: width_types.html) — Titel liegt wie
   .page-header direkt auf der grauen Musterfläche, Inhalt in weißer Box darunter. ---- */
.content80{width:80%;max-width:960px;margin:60px auto 80px}
.page-title{color:#fff;padding:10px 0 30px}
.page-title h2{margin:0;font-family:'districtregular','arial';font-weight:normal;
     font-size:36px;line-height:36px}
.page-content{background:#fff;padding:40px;overflow:hidden}

/* ---- 404-Seite (Referenz: /02-HTML/2012Metro/404.html, Werte 1:1 aus dessen css/style.css
   § "9. 404" portiert) — Text direkt auf der grauen Musterfläche, kein weißer Kasten,
   großes 404-Hintergrundbild unten rechts fix im Viewport, Links mit weißem Pfeil-Icon. ---- */
.fourofour-content{padding:50px 40px 40px 80px;color:#fff}
.fourofour-content h1{font-family:'districtregular','arial';font-weight:normal;
     font-size:100px;line-height:80px;margin:0 0 20px}
.fourofour-content h2{font-family:'districtregular','arial';font-weight:normal;
     font-size:28px;line-height:34px;margin:0 0 20px;color:#fff}
.fourofour-content h4{margin:0 0 20px;color:#fff;font-size:16px;font-weight:normal}
.fourofour-content p{color:#7f7f7f;font-size:13px;line-height:18px}
.fourofour-content ul.categories{list-style:none;margin:0;padding:0}
.fourofour-content ul.categories li{
     background:url('/02-HTML/2012Metro/images/news-list-ico.png') no-repeat scroll 0 14px transparent;
     display:block;padding:8px 0 5px 13px}
.fourofour-content ul.categories a{color:#fff}
.fourofour-content ul.categories a:hover{color:#8C7B0F}
#fourofour_bg img{bottom:0;right:0;display:block;position:fixed;width:50%;z-index:-1}
@media(max-width:900px){.fourofour-content h1{font-size:70px;line-height:80px}
     #fourofour_bg{display:none}}