January 25, 2014 21:20
diff --git a/dabblet.css b/dabblet.css
 * {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }

 body {
  width: 80%;
  max-width: 960px;
  margin: 30px auto;
  font: 16px Arial, sans-serif;
 }

 #flyer {
  width: 775px;
 }
 #flyer a.umdrehen {
  text-decoration: none;
  margin-top: 3px;
  color: #492A15;
  font-weight: bold;
  position: absolute;
  bottom: 5px;
  right: 5px;
 }

 #flyer_mediation {
  position: relative;
  width: 40%;
  height: 355px;
  float: left;
  background: #5a5a5a;
  color: white;
  text-align: right;
  padding: 5px;
 }
 #flyer_mediation hgroup {
  margin-top: 50px;
 }
 #flyer_mediation h1 {
  text-transform: uppercase;
  font-size: 260%;
  line-height: 0.8;
 }
 #flyer_mediation h1.lighter {
  color: #A1A1A1;
  font-size: 200%;
 }
 #flyer_mediation h3 {
  font: italic 130% 'Times New Roman', serif;
 }
 #flyer_mediation h2 {
  position: absolute;
  bottom: 5px;
  right: 5px;
 }

 #flyer_uebersetzung {
  position: relative;
  width: 60%;
  height: 355px;
  float: left;
  background: #DB7632;
  padding: 5px;
 }
 #flyer_uebersetzung h1 {
  margin-top: 50px;
  color: white;
  font-size: 300%;
 }
 #flyer_uebersetzung em {
  color: white;
 }
 #flyer_uebersetzung strong {
  color: #D20C0C;
  font-weight: bold;
 }
 #flyer_uebersetzung h3 {
  font: italic 130% 'Times New Roman', serif;
 }
 #flyer_uebersetzung h2 {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #D20C0C;
 }

 .back {
  box-shadow: 0 15px 15px -8px #444;
  color: black;
  background: #DB7632;
  font: 300 95% 'Open Sans', sans-serif;
  /* Flyer_back_header anfang */
  /* Flyer_back_header ende */
  /* Flyer_back_footer anfang */
  /* Flyer_back_footer ende */
 }
 .back #flyer_back_header {
  padding: 15px;
 }
 .back #flyer_back_header p {
  font-weight: bold;
  margin-top: 20px;
  font-family: Arial, sans-serif;
 }
 .back #flyer_back_header p:first-child {
  margin-top: 0;
 }
 .back #flyer_back_header ol {
  color: white;
  list-style-position: outside;
  list-style-type: disc;
  font-size: 90%;
 }
 .back #flyer_back_header ol li {
  margin-left: 40px;
 }
 .back #flyer_back_header #flyer_back_eins {
  float: left;
  width: 50%;
  padding: 5px;
 }
 .back #flyer_back_header #flyer_back_zwei {
  float: left;
  width: 50%;
  padding: 5px;
 }
 .back #flyer_back_footer {
  background: white;
  width: 100%;
  height: 100px;
  padding: 5px;
  clear: both;
  font-weight: 400;
  font-size: 85%;
  position: absolute;
  bottom: 0;
  left: 0;
 }
 .back #flyer_back_footer .relative {
  position: relative;
 }
 .back #flyer_back_footer address {
  font-style: normal;
 }
 .back #flyer_back_footer div[class*=col] {
  float: left;
  padding: 5px 10px;
 }
 .back #flyer_back_footer .col-1-4 {
  width: 25%;
 }
 .back #flyer_back_footer .col-1-3 {
  width: 33%;
 }
 .back #flyer_back_footer .col-1-25 {
  width: 40%;
 }
 .back #flyer_back_footer a {
  text-decoration: none;
  color: black;
  border-bottom: 1px dotted #555;
 }
 .back #flyer_back_footer a:hover {
  border-bottom: 1px solid #555;
 }
 .back #flyer_back_footer span.sign {
  font: 200%/90px Niconne, cursive;
 }

 /* === FLIP EFFECT === */
 .flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
 }

 .flip-container:hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
 }

 .flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
 }

 .front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  position: relative;
 }

 .back {
  position: absolute;
  top: 0;
  left: 0;
 }

 .front {
  z-index: 1;
 }

 .back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  width: 775px;
  height: 355px;
 }

 /* === CLEARFIX */
 .clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
 }

 .clearfix {
  display: inline-block;
 }

 html[xmlns] .clearfix {
  display: block;
 }

 * html .clearfix {
  height: 1%;
 }
diff --git a/dabblet.html b/dabblet.html
 <body>
 <div id="flyer" class="clearfix flip-container">
 <div class="flipper">
  <div class="front">
  <div id="flyer_mediation">
    <h3>Mediazione</h3>
    <h3>Mediación</h3>
    <h3>Mediation</h3>
    <h3>Медиация</h3>
    
    <hgroup>
      <h1>Mediation</h1>
      <h1 class="lighter">Vermittlung</h1>
    </hgroup>
    
    <h2>Bürger</h2>
  </div>
  
  <div id="flyer_uebersetzung">
    <h3><em>=</em> suppertonella gestione positiva di <strong>conflitti</strong></h3>
    <h3><em>=</em> ayuda en <strong>conflictos</strong></h3>
    <h3><em>=</em> kavgada ve <strong>anlaşmasızlıklarda çözüm yolları</strong></h3>
    <h3><em>=</em> поддержка npu <strong>paзpeшeнии конфликтов</strong></h3>
    
    <h1>= Hilfe bei <strong>STREIT</strong>
      
      <h2>helfen Bürgern</h2>
      
      <a href="#0" class="umdrehen">
  
        <img src="http://s1.directupload.net/images/140123/7ovczudh.png">
        Umdrehen
      </a>
  </div>
    </div> <!-- front -->
    
    <div class="back"> 
      <div id="flyer_back_header">
        
        <div id="flyer_back_eins">
        <p>Wir helfen Ihnen:</p>
        <ol>
          <li>bei Streit mit Nachbarn</li>
          <li>bei Streit am Arbeitsplatz</li>
          <li>bei Streit zu Hause</li>
        </ol>
        
        <p>Wie helfen wir?</p>
        <ol>
          <li>Wir vermitteln durch ein klar strukturiertes, freiwilliges Verfahren.</li>
          <li>Alle Beteiligten sollten im besten Fall mit einer gemeinsam erarbeiteten Vereinbarung zufrieden aus dem Streit hervorgehen.</li>
        </ol>
        </div>
        
        <div id="flyer_back_zwei">
          <p>Wer hilft?</p>
          <ol>
            <li>Wir arbeiten ehrenamtlich als Mediatoren.</li>
            <li>Wir sind Frauen und Männer unterschiedlicher Alters- und Berufsgruppen und Herkunft.</li>
          </ol>
          
          <p>Bitte beachten Sie:</p>
          <ol>
            <li>Das Angebot ist kostenlos.</li>
            <li>Die Teilnahme ist freiwillig.</li>
            <li>Ihre Anliegen werden vertraulich behandelt.</li>
            <li>Rechtsberatung ist nicht möglich.</li>
          </ol>
        </div>
        
      </div> <!-- Ende Flyer_back_header -->
      
      <footer id="flyer_back_footer" class="clearfix">
        <div class="relative">
        <div class="col-1-4">
          <address>
          Stadtteilbüro BauHof<br>
          Teplitzstraße 17<br>
          (Eingang Andreasstraße)<br>
          65203 Wiesbaden-Biebrich
          </address>
        </div>
        
        <div class="col-1-25">
          <strong>Ansprechpartner:</strong><br>
          <table>
            <tr>
              <td>Walter Barth</td>
              <td>Tel.: (0611) 4 11 ** **</td>
            </tr>
            <tr>
              <td>Monika Wagner</td>
              <td>Tel.: (0611) 6 09 ** **</td>
            </tr>
            <tr><td><a href="http://www.caritas-wirt.de">www.caritas-wirt.de</a></td></tr>
          </table>
        </div>
        
        <div class="col-1-3">
          <span class="sign">BauHof</span> 
          <img src="http://upload.wikimedia.org/wikipedia/de/e/e5/Caritas_logo.svg" width="35">
          <img src="http://upload.wikimedia.org/wikipedia/de/3/32/Wiesbaden_logo.svg" width="60">
        </div>
        </div> <!-- Ende .relative -->
      </footer>
      
    </div> 
 </div> <!-- flipper -->
 </div>
 </body>
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	body {
	width: 80%;
	max-width: 960px;
	margin: 30px auto;
	font: 16px Arial, sans-serif;
	}

	#flyer {
	width: 775px;
	}
	#flyer a.umdrehen {
	text-decoration: none;
	margin-top: 3px;
	color: #492A15;
	font-weight: bold;
	position: absolute;
	bottom: 5px;
	right: 5px;
	}

	#flyer_mediation {
	position: relative;
	width: 40%;
	height: 355px;
	float: left;
	background: #5a5a5a;
	color: white;
	text-align: right;
	padding: 5px;
	}
	#flyer_mediation hgroup {
	margin-top: 50px;
	}
	#flyer_mediation h1 {
	text-transform: uppercase;
	font-size: 260%;
	line-height: 0.8;
	}
	#flyer_mediation h1.lighter {
	color: #A1A1A1;
	font-size: 200%;
	}
	#flyer_mediation h3 {
	font: italic 130% 'Times New Roman', serif;
	}
	#flyer_mediation h2 {
	position: absolute;
	bottom: 5px;
	right: 5px;
	}

	#flyer_uebersetzung {
	position: relative;
	width: 60%;
	height: 355px;
	float: left;
	background: #DB7632;
	padding: 5px;
	}
	#flyer_uebersetzung h1 {
	margin-top: 50px;
	color: white;
	font-size: 300%;
	}
	#flyer_uebersetzung em {
	color: white;
	}
	#flyer_uebersetzung strong {
	color: #D20C0C;
	font-weight: bold;
	}
	#flyer_uebersetzung h3 {
	font: italic 130% 'Times New Roman', serif;
	}
	#flyer_uebersetzung h2 {
	position: absolute;
	bottom: 5px;
	left: 5px;
	color: #D20C0C;
	}

	.back {
	box-shadow: 0 15px 15px -8px #444;
	color: black;
	background: #DB7632;
	font: 300 95% 'Open Sans', sans-serif;
	/* Flyer_back_header anfang */
	/* Flyer_back_header ende */
	/* Flyer_back_footer anfang */
	/* Flyer_back_footer ende */
	}
	.back #flyer_back_header {
	padding: 15px;
	}
	.back #flyer_back_header p {
	font-weight: bold;
	margin-top: 20px;
	font-family: Arial, sans-serif;
	}
	.back #flyer_back_header p:first-child {
	margin-top: 0;
	}
	.back #flyer_back_header ol {
	color: white;
	list-style-position: outside;
	list-style-type: disc;
	font-size: 90%;
	}
	.back #flyer_back_header ol li {
	margin-left: 40px;
	}
	.back #flyer_back_header #flyer_back_eins {
	float: left;
	width: 50%;
	padding: 5px;
	}
	.back #flyer_back_header #flyer_back_zwei {
	float: left;
	width: 50%;
	padding: 5px;
	}
	.back #flyer_back_footer {
	background: white;
	width: 100%;
	height: 100px;
	padding: 5px;
	clear: both;
	font-weight: 400;
	font-size: 85%;
	position: absolute;
	bottom: 0;
	left: 0;
	}
	.back #flyer_back_footer .relative {
	position: relative;
	}
	.back #flyer_back_footer address {
	font-style: normal;
	}
	.back #flyer_back_footer div[class*=col] {
	float: left;
	padding: 5px 10px;
	}
	.back #flyer_back_footer .col-1-4 {
	width: 25%;
	}
	.back #flyer_back_footer .col-1-3 {
	width: 33%;
	}
	.back #flyer_back_footer .col-1-25 {
	width: 40%;
	}
	.back #flyer_back_footer a {
	text-decoration: none;
	color: black;
	border-bottom: 1px dotted #555;
	}
	.back #flyer_back_footer a:hover {
	border-bottom: 1px solid #555;
	}
	.back #flyer_back_footer span.sign {
	font: 200%/90px Niconne, cursive;
	}

	/* === FLIP EFFECT === */
	.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	}

	.flip-container:hover .flipper {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	}

	.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	}

	.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	position: relative;
	}

	.back {
	position: absolute;
	top: 0;
	left: 0;
	}

	.front {
	z-index: 1;
	}

	.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	width: 775px;
	height: 355px;
	}

	/* === CLEARFIX */
	.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}

	.clearfix {
	display: inline-block;
	}

	html[xmlns] .clearfix {
	display: block;
	}

	* html .clearfix {
	height: 1%;
	}
	<body>
	<div id="flyer" class="clearfix flip-container">
	<div class="flipper">
	<div class="front">
	<div id="flyer_mediation">
	<h3>Mediazione</h3>
	<h3>Mediación</h3>
	<h3>Mediation</h3>
	<h3>Медиация</h3>

	<hgroup>
	<h1>Mediation</h1>
	<h1 class="lighter">Vermittlung</h1>
	</hgroup>

	<h2>Bürger</h2>
	</div>

	<div id="flyer_uebersetzung">
	<h3><em>=</em> suppertonella gestione positiva di <strong>conflitti</strong></h3>
	<h3><em>=</em> ayuda en <strong>conflictos</strong></h3>
	<h3><em>=</em> kavgada ve <strong>anlaşmasızlıklarda çözüm yolları</strong></h3>
	<h3><em>=</em> поддержка npu <strong>paзpeшeнии конфликтов</strong></h3>

	<h1>= Hilfe bei <strong>STREIT</strong>

	<h2>helfen Bürgern</h2>

	<a href="#0" class="umdrehen">

	<img src="http://s1.directupload.net/images/140123/7ovczudh.png">
	Umdrehen
	</a>
	</div>
	</div> <!-- front -->

	<div class="back">
	<div id="flyer_back_header">

	<div id="flyer_back_eins">
	<p>Wir helfen Ihnen:</p>
	<ol>
	<li>bei Streit mit Nachbarn</li>
	<li>bei Streit am Arbeitsplatz</li>
	<li>bei Streit zu Hause</li>
	</ol>

	<p>Wie helfen wir?</p>
	<ol>
	<li>Wir vermitteln durch ein klar strukturiertes, freiwilliges Verfahren.</li>
	<li>Alle Beteiligten sollten im besten Fall mit einer gemeinsam erarbeiteten Vereinbarung zufrieden aus dem Streit hervorgehen.</li>
	</ol>
	</div>

	<div id="flyer_back_zwei">
	<p>Wer hilft?</p>
	<ol>
	<li>Wir arbeiten ehrenamtlich als Mediatoren.</li>
	<li>Wir sind Frauen und Männer unterschiedlicher Alters- und Berufsgruppen und Herkunft.</li>
	</ol>

	<p>Bitte beachten Sie:</p>
	<ol>
	<li>Das Angebot ist kostenlos.</li>
	<li>Die Teilnahme ist freiwillig.</li>
	<li>Ihre Anliegen werden vertraulich behandelt.</li>
	<li>Rechtsberatung ist nicht möglich.</li>
	</ol>
	</div>

	</div> <!-- Ende Flyer_back_header -->

	<footer id="flyer_back_footer" class="clearfix">
	<div class="relative">
	<div class="col-1-4">
	<address>
	Stadtteilbüro BauHof<br>
	Teplitzstraße 17<br>
	(Eingang Andreasstraße)<br>
	65203 Wiesbaden-Biebrich
	</address>
	</div>

	<div class="col-1-25">
	<strong>Ansprechpartner:</strong><br>
	<table>
	<tr>
	<td>Walter Barth</td>
	<td>Tel.: (0611) 4 11 </td>
	</tr>
	<tr>
	<td>Monika Wagner</td>
	<td>Tel.: (0611) 6 09 </td>
	</tr>
	<tr><td><a href="http://www.caritas-wirt.de">www.caritas-wirt.de</a></td></tr>
	</table>
	</div>

	<div class="col-1-3">
	<span class="sign">BauHof</span>
	<img src="http://upload.wikimedia.org/wikipedia/de/e/e5/Caritas_logo.svg" width="35">
	<img src="http://upload.wikimedia.org/wikipedia/de/3/32/Wiesbaden_logo.svg" width="60">
	</div>
	</div> <!-- Ende .relative -->
	</footer>

	</div>
	</div> <!-- flipper -->
	</div>
	</body>