Reduce ugly <div class=outer> markup

..and replace that "container" aproach by a padding-left/padding-right
calculated from viewportwidth aproach.

This optimization saves around 27bytes

3 files changed, 44 insertions, 51 deletions

diff --git a/style.css b/style.css
index 19cf013..1248305 100644
--- a/style.css
+++ b/style.css
@@ -44,9 +44,11 @@ footer:before {
 
 body > * {
         flex: none;
+        width: 100%;
+        padding: 0 calc(50vw - 32.5em);
 }
 
-body > .outer {
+body > main {
         flex: 1 0 auto;
 }
 
@@ -128,15 +130,10 @@ label {
 	min-width: 90px;
 }
 
-header, nav, main, footer {
-        width: 65em;
-	max-width: 65em;
-	margin: 0 auto;
-}
-
 header {
         margin-bottom: 1em;
-        padding: 2em 0 0.5em;
+        padding-top: 2em;
+        padding-bottom: 0.5em;
 }
 
 header .h1, header .h2 {
@@ -172,11 +169,6 @@ nav > ul:after {
         clear: both;
 }
 
-.outer {
-        background: white;
-	border-top: 2px var(--color-red) solid;
-        padding: 2em 0;
-}
 nav > ul {
         padding-left: 0;
         margin-left: 0;
@@ -214,6 +206,11 @@ nav > ul a.active {
 main {
         display: flex;
         flex-direction: row;
+        position: relative;
+        background: white;
+	border-top: 2px var(--color-red) solid;
+        padding-top: 2em;
+        padding-bottom: 2em;
 }
 
 article, aside {
@@ -296,9 +293,9 @@ footer p a {
 }
 
 @media (max-width: 75em) {
-        header, nav, main, footer {
-                width: 62em;
-                max-width: 62em;
+        body > * {
+                padding-left: calc(50vw - 31em);
+                padding-right: calc(50vw - 31em);
         }
         header .h1 {
                 font-size: 2.8em;
@@ -313,9 +310,7 @@ footer p a {
                 /* For google pagespeed */
                 line-height: 1.4;
         }
-        header, nav, main, footer {
-                width: 100%;
-                max-width: 100%;
+        body > * {
                 padding-left: 1em;
                 padding-right: 1em;
         }
diff --git a/style.min.css b/style.min.css
index 49fa597..439ac31 100644
--- a/style.min.css
+++ b/style.min.css
@@ -1 +1 @@
-h1,h2{font-weight:500}footer,header,header svg{position:relative}a,a:focus,a:hover,nav>ul>li a{text-decoration:none}.logos,footer,nav>ul>li a{text-align:center}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(fonts/Roboto_400.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_400.woff?v=1) format('woff'),url(fonts/Roboto_400.woff2?v=1) format('woff2'),url(fonts/Roboto_400.svg#Roboto) format('svg'),url(fonts/Roboto_400.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(fonts/Roboto_500.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_500.woff?v=1) format('woff'),url(fonts/Roboto_500.woff2?v=1) format('woff2'),url(fonts/Roboto_500.svg#Roboto) format('svg'),url(fonts/Roboto_500.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/Roboto_700.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_700.woff?v=1) format('woff'),url(fonts/Roboto_700.woff2?v=1) format('woff2'),url(fonts/Roboto_700.svg#Roboto) format('svg'),url(fonts/Roboto_700.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(fonts/Roboto_400italic.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_400italic.woff?v=1) format('woff'),url(fonts/Roboto_400italic.woff2?v=1) format('woff2'),url(fonts/Roboto_400italic.svg#Roboto) format('svg'),url(fonts/Roboto_400italic.ttf) format('truetype')}*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}body,html{height:100%}body{background:#eee;font-family:Roboto,sans-serif;font-size:16px;line-height:1.35;color:#333;display:flex;flex-direction:column;min-height:100vh}footer:before,header:before{position:absolute}body>*{flex:none}body>.outer{flex:1 0 auto}input,textarea{padding:2px 5px;color:#333;margin-bottom:15px}textarea{width:100%}h2,h3{margin-top:1.5em}h1{font-size:2em;margin-bottom:.67em}h2{font-size:1.5em;margin-bottom:.75em}h3{font-size:1.2em;font-weight:700;margin-bottom:.8em}ol,p,ul{margin-bottom:1em}ol,ul{margin-left:1.2em}blockquote{margin-left:3em;margin-right:3em}a{color:#973c39}a:focus,a:hover{color:#6e2c2a}a img{border:none}img.left{float:left;margin:5px 2em 0 0}img.right{float:right;margin:5px 0 2em 2em}label{display:inline-block;margin-left:20px;min-width:90px}footer,header,main,nav{width:65em;max-width:65em;margin:0 auto}header{margin-bottom:1em;padding:2em 0 .5em}header .h1,header .h2{margin:0;letter-spacing:-.025em;font-weight:400}header svg{bottom:-7px;margin-right:1em;width:3.5em;height:3.5em}header .h1{display:inline;font-size:3em;color:#444}header .h2{display:inline;padding-left:.5em;font-size:1.5em;color:#858585}nav>ul:after{content:'';display:block;clear:both}.outer{background:#fff;border-top:2px #973c39 solid;padding:2em 0}nav>ul{padding-left:0;margin-left:0}nav>ul>li{display:block;float:left;width:20%}nav>ul>li+li{padding-left:2px}nav>ul>li a{display:inline-block;padding:.7em 1.5em;background:#4c4d51;text-transform:uppercase;font-weight:700;color:#fff;letter-spacing:.05em;width:100%}.redbox,a.redbox:hover,nav>ul a.active,nav>ul a:focus,nav>ul a:hover{background:#973c39;color:#fff}main{display:flex;flex-direction:row}article,aside{margin:2em 0}article{flex:1 1 45em;padding-right:1em}aside{padding-left:1em;flex:1 1 18em}.redbox,a.redbox:hover{display:inline-block;text-decoration:none;width:100%;padding:1em;margin-top:.5em;margin-bottom:1em;border:2px solid rgba(0,0,0,.02)}article h1{color:#973c39}article .intro{font-size:1.1em;margin:10px 0}footer{margin:0 auto;padding:20px 0}footer p{margin:0;font-size:.8em;color:#666}footer p a{color:inherit}.logos{background:#fff}.logos img{vertical-align:middle;margin:1.5em 3em}.social-icon{width:auto;height:2em}.info:after{content:'*';display:inline}.small{font-size:.875em;color:#555}@media (max-width:75em){footer,header,main,nav{width:62em;max-width:62em}header .h1{font-size:2.8em}}@media (max-width:63em){body,main{display:block}body{line-height:1.4}footer,header,main,nav{width:100%;max-width:100%;padding-left:1em;padding-right:1em}header{padding-top:1em}header .h1{font-size:1.5em}header .h2{font-size:1.3em}header svg{width:3em;height:3em;float:left}aside,nav>ul>li+li{padding-left:0}nav>ul>li{float:none;width:100%}img.left{float:none;margin-right:0}img.right{float:none;margin-left:0}}
\ No newline at end of file
+body>*,textarea{width:100%}h1,h2{font-weight:500}a,a:focus,a:hover{text-decoration:none}footer,header,header svg,main{position:relative}.logos,footer,nav>ul>li a{text-align:center}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(fonts/Roboto_400.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_400.woff?v=1) format('woff'),url(fonts/Roboto_400.woff2?v=1) format('woff2'),url(fonts/Roboto_400.svg#Roboto) format('svg'),url(fonts/Roboto_400.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(fonts/Roboto_500.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_500.woff?v=1) format('woff'),url(fonts/Roboto_500.woff2?v=1) format('woff2'),url(fonts/Roboto_500.svg#Roboto) format('svg'),url(fonts/Roboto_500.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/Roboto_700.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_700.woff?v=1) format('woff'),url(fonts/Roboto_700.woff2?v=1) format('woff2'),url(fonts/Roboto_700.svg#Roboto) format('svg'),url(fonts/Roboto_700.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(fonts/Roboto_400italic.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_400italic.woff?v=1) format('woff'),url(fonts/Roboto_400italic.woff2?v=1) format('woff2'),url(fonts/Roboto_400italic.svg#Roboto) format('svg'),url(fonts/Roboto_400italic.ttf) format('truetype')}*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}body,html{height:100%}body{background:#eee;font-family:Roboto,sans-serif;font-size:16px;line-height:1.35;color:#333;display:flex;flex-direction:column;min-height:100vh}footer:before,header:before{position:absolute}body>*{flex:none;padding:0 calc(50vw - 32.5em)}input,textarea{padding:2px 5px;color:#333;margin-bottom:15px}h2,h3{margin-top:1.5em}h1{font-size:2em;margin-bottom:.67em}h2{font-size:1.5em;margin-bottom:.75em}h3{font-size:1.2em;font-weight:700;margin-bottom:.8em}ol,p,ul{margin-bottom:1em}ol,ul{margin-left:1.2em}blockquote{margin-left:3em;margin-right:3em}a{color:#973c39}a:focus,a:hover{color:#6e2c2a}a img{border:none}img.left{float:left;margin:5px 2em 0 0}img.right{float:right;margin:5px 0 2em 2em}label{display:inline-block;margin-left:20px;min-width:90px}header{margin-bottom:1em;padding-top:2em;padding-bottom:.5em}header .h1,header .h2{margin:0;letter-spacing:-.025em;font-weight:400}header svg{bottom:-7px;margin-right:1em;width:3.5em;height:3.5em}header .h1{display:inline;font-size:3em;color:#444}header .h2{display:inline;padding-left:.5em;font-size:1.5em;color:#858585}nav>ul:after{content:'';display:block;clear:both}nav>ul{padding-left:0;margin-left:0}nav>ul>li{display:block;float:left;width:20%}.redbox,a.redbox:hover,nav>ul>li a{text-decoration:none;width:100%;color:#fff}nav>ul>li+li{padding-left:2px}nav>ul>li a{display:inline-block;padding:.7em 1.5em;background:#4c4d51;text-transform:uppercase;font-weight:700;letter-spacing:.05em}nav>ul a.active,nav>ul a:focus,nav>ul a:hover{background:#973c39;color:#fff}main{display:flex;flex-direction:row;background:#fff;border-top:2px #973c39 solid;padding-top:2em;padding-bottom:2em}article,aside{margin:2em 0}article{flex:1 1 45em;padding-right:1em}aside{padding-left:1em;flex:1 1 18em}.redbox,a.redbox:hover{display:inline-block;padding:1em;margin-top:.5em;margin-bottom:1em;background:#973c39;border:2px solid rgba(0,0,0,.02)}article h1{color:#973c39}article .intro{font-size:1.1em;margin:10px 0}footer{margin:0 auto;padding:20px 0}footer p{margin:0;font-size:.8em;color:#666}footer p a{color:inherit}.logos{background:#fff}.logos img{vertical-align:middle;margin:1.5em 3em}.social-icon{width:auto;height:2em}.info:after{content:'*';display:inline}.small{font-size:.875em;color:#555}@media (max-width:75em){body>*{padding-left:calc(50vw - 31em);padding-right:calc(50vw - 31em)}header .h1{font-size:2.8em}}@media (max-width:63em){body,main{display:block}body{line-height:1.4}body>*{padding-left:1em;padding-right:1em}header{padding-top:1em}header .h1{font-size:1.5em}header .h2{font-size:1.3em}header svg{width:3em;height:3em;float:left}aside,nav>ul>li+li{padding-left:0}nav>ul>li{float:none;width:100%}img.left{float:none;margin-right:0}img.right{float:none;margin-left:0}}
\ No newline at end of file
diff --git a/xsl/layout.xsl b/xsl/layout.xsl
index 0e4b3fd..61eeaa5 100644
--- a/xsl/layout.xsl
+++ b/xsl/layout.xsl
@@ -30,38 +30,36 @@
             <xsl:call-template name="navigation" />
           </ul>
         </nav>
-        <div class="outer">
-          <main>
-            <article>
-              <xsl:apply-templates mode="html" />
-              <p class="small">
-                <xsl:text>* Meine Dienstleistung umfasst das Buchen der lfd. Geschäftsvorfälle und die lfd. Lohnabrechnung</xsl:text>
-              </p>
-            </article>
-            <aside>
-              <strong>Angelika Franzke</strong><br/>
-              <xsl:text>Tel: 038461/52053</xsl:text><br/>
-              <xsl:text>Fax: 038461/599811</xsl:text><br/>
-              <xsl:text>Mobil: 0172/9302774</xsl:text><br/>
-              <xsl:text>E-Mail: </xsl:text><a href="mailto:info@angelika-franzke.de">info@angelika-franzke.de</a>
-              <br/>
-              <br/>
-              <a href="https://plus.google.com/112211240794067152603">
-                      <img src="img/gplus32{$versioned_png}" width="32" height="32" class="social-icon" alt="Google Plus" />
-              </a>
+        <main>
+          <article>
+            <xsl:apply-templates mode="html" />
+            <p class="small">
+              <xsl:text>* Meine Dienstleistung umfasst das Buchen der lfd. Geschäftsvorfälle und die lfd. Lohnabrechnung</xsl:text>
+            </p>
+          </article>
+          <aside>
+            <strong>Angelika Franzke</strong><br/>
+            <xsl:text>Tel: 038461/52053</xsl:text><br/>
+            <xsl:text>Fax: 038461/599811</xsl:text><br/>
+            <xsl:text>Mobil: 0172/9302774</xsl:text><br/>
+            <xsl:text>E-Mail: </xsl:text><a href="mailto:info@angelika-franzke.de">info@angelika-franzke.de</a>
+            <br/>
+            <br/>
+            <a href="https://plus.google.com/112211240794067152603">
+                    <img src="img/gplus32{$versioned_png}" width="32" height="32" class="social-icon" alt="Google Plus" />
+            </a>
+            <br/>
+            <a href="contact{$suffix}" class="redbox">
+              <strong>Kostenlose Analyse Ihrer Gründungsidee.</strong>
               <br/>
-              <a href="contact{$suffix}" class="redbox">
-                <strong>Kostenlose Analyse Ihrer Gründungsidee.</strong>
-                <br/>
-                <xsl:text>Die Kostenlose Analyse schafft Klarheit darüber, welches Umsatzpotential Ihre Idee bietet.</xsl:text>
-              </a>
-              <a class="redbox" style="text-align:center"
-                href="https://beraterboerse.kfw.de/index.php?ac=consultant_projects&amp;id=100021">
-                <xsl:text>Referenzen</xsl:text>
-              </a>
-            </aside>
-          </main>
-        </div>
+              <xsl:text>Die Kostenlose Analyse schafft Klarheit darüber, welches Umsatzpotential Ihre Idee bietet.</xsl:text>
+            </a>
+            <a class="redbox" style="text-align:center"
+              href="https://beraterboerse.kfw.de/index.php?ac=consultant_projects&amp;id=100021">
+              <xsl:text>Referenzen</xsl:text>
+            </a>
+          </aside>
+        </main>
         <div class="logos">
           <a href="http://www.idz-zertifikat.de/voraussetzung-fachberater-existenzgruender" target="_blank">
             <img src="idz-siegel{$versioned_jpg}" width="190" height="79"