Animate Schritt-transitions

author: erdgeist <erdgeist@bauklotz.fritz.box> 2016-08-07 15:01:10 +0200
committer: erdgeist <erdgeist@bauklotz.fritz.box> 2016-08-07 15:01:10 +0200
commit: be65e80a5eb077ff8d9a765852c3ea6a1ff716f3 (patch)
tree: 11e0464ab8097f36042a728a5e0b86f4388be09f
parent: 45d5e6f1878c57709ab2064b46bb9eef5ef770ee (diff)
3 files changed, 84 insertions, 69 deletions
diff --git a/index.html b/index.html
index 7835320..576843b 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,10 @@
    <script src="js/abmahn.js"></script>
  </head>
  <body>
-    <div id="wrapper" class="wrapper step1">
+    <div id="wrapper" class="step1">
      <div class="collapsable block-step1">
        <div onclick="step0_done()" class="block-header">
-          <h1>Abmahnbeantworter</h1>
+          <h1 id="head1">Abmahnbeantworter</h1>
        </div>
        <div class="juice">
          <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
@@ -20,12 +20,12 @@
          <p><strong>Sie sind sicher, diese angebliche Urheberrechtsverletzung nicht begangen zu haben?</strong></p>
          <div class="two-buttons">
            <div class="button button-green" onclick="step1_done()">Ja, los!</div>
-            <div class="button button-red" onclick="step1_cancel()">Hm, nein.</div>
+            <div class="button button-red" onclick="step0_cancel()">Hm, nein.</div>
          </div>
        </div>
      </div>
-      <div class="collapsable" id="unsicher">
+      <div class="collapsable block-stepcancel" id="unsicher">
-        <div class="juice block-stepcancel">
+        <div class="juice">
          <p>Bitte benutzen Sie diesen Vordruck nur, wenn Sie tatsächlich nicht für die abgemahnte Verletzung verantwortlich sind. Sollte dies doch der Fall sein, oder wenn Sie sich <b>nicht</b> sicher sind, dann suchen Sie bitte einen Anwalt auf.</p>
          <p>Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Dadurch können erhebliche Kosten entstehen.</p>
          <div class="one-button">
@@ -38,7 +38,7 @@
      <div class="collapsable block-step2">
        <div onclick="step1_done()" class="block-header">
          <div class="done">&#x2713;</div>
-          <h2>Schritt 1: Fakten sammeln</h2>
+          <h2 id="head2">Schritt 1: Fakten sammeln</h2>
        </div>
        <div class="juice">
          <p>Bevor wir loslegen, sammeln wir alle Informationen ein, die der abmahnenden Kanzlei verdeutlichen, warum die Abmahnung unberechtigt ist.</p>
@@ -74,7 +74,7 @@
      <div class="collapsable block-step3">
        <div onclick="step2_done()" class="block-header">
          <div class="done">&#x2713;</div>
-          <h2>Schritt 2: Daten des Abgemahnten</h2>
+          <h2 id="head3">Schritt 2: Daten des Abgemahnten</h2>
        </div>
        <div class="juice">
           <div><a href="javascript:ausfuellen()" class="button">Debug: pre-fill</a></div>
@@ -100,7 +100,7 @@
      <div class="collapsable block-step4">
        <div onclick="step3_done()" class="block-header">
          <div class="done">&#x2713;</div>
-          <h2>Schritt 3: Daten der Abmahner</h2>
+          <h2 id="head4">Schritt 3: Daten der Abmahner</h2>
        </div>
        <div class="juice">
          <p>Ist der Abmahner eine der folgenden Kanzleien? Dann können wir die Adresse gleich per Click übernehmen.</p>
@@ -130,7 +130,7 @@
      <div class="collapsable block-step5">
        <div onclick="step4_done()" class="block-header">
          <div class="done">&#x2713;</div>
-          <h2>Schritt 4: Aktenzeichen und Datum</h2>
+          <h2 id="head5">Schritt 4: Aktenzeichen und Datum</h2>
        </div>
        <div class="juice">
          <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, um die Antwort der Abmahnung zuordnen zu können.</p>
@@ -150,7 +150,7 @@
      <div class="collapsable block-step6">
        <div onclick="step5_done()" class="block-header">
          <div class="done">&#x2713;</div>
-          <h2>Schritt 5: Antwortschreiben erzeugen</h2>
+          <h2 id="head6">Schritt 5: Antwortschreiben erzeugen</h2>
        </div>
        <div class="juice">
          <p>Wir haben nun alle Informationen, um das Antwortschreiben erzeugen zu können:</p>
@@ -160,9 +160,9 @@
          <p class="hint">Drucken Sie das Schreiben aus und schicken Sie es per Post an die abmahnende Kanzlei. Optional können Sie zur Wahrung der Frist das Schreiben auch vorab <span id="faxempfaenger"></span>faxen.</p>
        </div>
      </div>
-      <div class="hidden collapsable block-step7">
+      <div class="collapsable block-step7">
        <div class="block-header">
-          <h2>Und jetzt?</h2>
+          <h2 id="head7">Und jetzt?</h2>
        </div>
        <div class="juice">
          <p>Nimmt die abmahnende Kanzlei ihre Forderung nicht innerhalb unserer Frist (14 Tage) zurück, steht Ihnen eine gerichtliche Klärung zu.</p>
diff --git a/js/abmahn.js b/js/abmahn.js
index 353111b..6b26e0b 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -12,14 +12,22 @@ function setText(input, text) {
  document.getElementById(input).value = text;
 }
-function step0_done()   { document.getElementById('wrapper').className = 'wrapper step1'; }
+function scroll(id) {
-function step1_cancel() { document.getElementById('wrapper').className = 'wrapper stepcancel'; }
+   document.getElementById(id).scrollIntoView();
-function step1_done()   { document.getElementById('wrapper').className = 'wrapper step2'; }
+}
-function step2_done()   { document.getElementById('wrapper').className = 'wrapper step3'; }
-function step3_done()   { document.getElementById('wrapper').className = 'wrapper step4'; }
+function setClass(id, classes) {
-function step4_done()   { document.getElementById('wrapper').className = 'wrapper step5'; }
+  document.getElementById(id).className = classes;
-function step5_done()   { document.getElementById('wrapper').className = 'wrapper step6'; }
+}
-function step6_done()   { document.getElementById('wrapper').className = 'wrapper step7'; }
+function step0_cancel() { setClass('wrapper', 'stepcancel'); }
+function step0_done()   { setClass('wrapper', 'step1'); scroll('head1'); }
+function step1_done()   { setClass('wrapper', 'step2'); scroll('head1'); }
+function step2_done()   { setClass('wrapper', 'step3'); scroll('head2'); }
+function step3_done()   { setClass('wrapper', 'step4'); scroll('head3'); }
+function step4_done()   { setClass('wrapper', 'step5'); scroll('head4'); }
+function step5_done()   { setClass('wrapper', 'step6'); scroll('head5'); }
+function step6_done()   { setClass('wrapper', 'step7'); scroll('head6'); }
 function waldorff() {
  setText('abmahnender_kanzlei', 'Waldorff & Frommer RAe');
diff --git a/style.css b/style.css
index 7563b8f..8cfcd9c 100644
--- a/style.css
+++ b/style.css
@@ -43,7 +43,7 @@ html {
  overflow-y: scroll;
 }
-.wrapper {
+#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
@@ -69,7 +69,12 @@ h2 {
  margin: 0.5em auto 0 auto;
 }
-.wrapper.step1 .block-header {
+.juice {
+  font-size: 14pt;
+  font-weight: 300;
+}
+#wrapper.step1 .block-header {
  pointer-events: none;
 }
@@ -78,27 +83,24 @@ h2 {
  font-weight: 300;
 }
-.juice {
+#unsicher,
-  font-size: 14pt;
+.block-step7 {
-  font-weight: 300;
+  padding: 0;
-  overflow: hidden;
-  max-height: 0px;
-  transition: max-height 0.25s ease-in;
 }
+#wrapper.stepcancel #unsicher,
-.hidden,
+#wrapper-step7 .block-step7 {
-#unsicher {
+  padding: auto;
-  visibility: hidden;
-  transition: visibility 0.25s ease-in;
 }
-.hidden,
+.block-step7,
-#unsicher,
+.juice,
-.wrapper.stepcancel h2 {
+#wrapper.stepcancel h2 {
  overflow: hidden;
  max-height: 0px;
-  transition: max-height 0.25s ease-in;
+  transition: max-height, height;
+  transition-timing-function: ease;
+  transition-duration: 0.5s;
+  transition-delay: 0s;
 }
 .block-step1 {
@@ -257,44 +259,49 @@ ul {
  float: right;
  font-size: 24pt;
  margin-top: -0.2em;
-  display: none;
  visibility: hidden;
 }
+#wrapper.step3 .block-step2 .done,
+#wrapper.step4 .block-step2 .done,
+#wrapper.step5 .block-step2 .done,
+#wrapper.step6 .block-step2 .done,
+#wrapper.step7 .block-step2 .done,
+#wrapper.step4 .block-step3 .done,
+#wrapper.step5 .block-step3 .done,
+#wrapper.step6 .block-step3 .done,
+#wrapper.step7 .block-step3 .done,
+#wrapper.step5 .block-step4 .done,
+#wrapper.step6 .block-step4 .done,
+#wrapper.step7 .block-step4 .done,
+#wrapper.step6 .block-step5 .done,
+#wrapper.step7 .block-step5 .done,
+#wrapper.step7 .block-step6 .done {
+  visibility: visible;
+}
 input[type="text"] {
  width: 90%;
 }
-.wrapper.step1 .block-step1 .juice,
+#wrapper.step1 .block-step1 .juice,
-.wrapper.step2 .block-step2 .juice,
+#wrapper.stepcancel .block-stepcancel .juice {
-.wrapper.step3 .block-step3 .juice,
+  max-height: 350px;
-.wrapper.step4 .block-step4 .juice,
+  transition: max-height 0.5s ease;
-.wrapper.step5 .block-step5 .juice,
+}
-.wrapper.step6 .block-step6 .juice,
-.wrapper.step7 .block-step7 .juice,
+#wrapper.step5 .block-step5 .juice {
-.wrapper.step7 .block-step7,
+  max-height: 500px;
+  transition: max-height 0.5s ease;
-.wrapper.stepcancel .block-stepcancel.juice,
+}
-.wrapper.stepcancel #unsicher,
-.wrapper.step3 .block-step2 .done,
-.wrapper.step4 .block-step2 .done,
-.wrapper.step5 .block-step2 .done,
-.wrapper.step6 .block-step2 .done,
-.wrapper.step7 .block-step2 .done,
-.wrapper.step4 .block-step3 .done,
-.wrapper.step5 .block-step3 .done,
-.wrapper.step6 .block-step3 .done,
-.wrapper.step7 .block-step3 .done,
-.wrapper.step5 .block-step4 .done,
-.wrapper.step6 .block-step4 .done,
-.wrapper.step7 .block-step4 .done,
-.wrapper.step6 .block-step5 .done,
-.wrapper.step7 .block-step5 .done,
-.wrapper.step7 .block-step6 .done
+#wrapper.step2 .block-step2 .juice,
+#wrapper.step3 .block-step3 .juice,
+#wrapper.step4 .block-step4 .juice,
+#wrapper.step6 .block-step6 .juice,
+#wrapper.step7 .block-step7 .juice,
+#wrapper.step7 .block-step7
 {
-  display: block !important;
+  max-height: 900px;
-  visibility: visible !important;
+  transition: max-height 0.5s ease;
-  max-height: 9999px;
 }
author	erdgeist <erdgeist@bauklotz.fritz.box>	2016-08-07 15:01:10 +0200
committer	erdgeist <erdgeist@bauklotz.fritz.box>	2016-08-07 15:01:10 +0200
commit	be65e80a5eb077ff8d9a765852c3ea6a1ff716f3 (patch)
tree	11e0464ab8097f36042a728a5e0b86f4388be09f
parent	45d5e6f1878c57709ab2064b46bb9eef5ef770ee (diff)

diff --git a/index.html b/index.html index 7835320..576843b 100644 --- a/index.html +++ b/index.html
@@ -9,10 +9,10 @@
9	<script src="js/abmahn.js"></script>	9	<script src="js/abmahn.js"></script>
10	</head>	10	</head>
11	<body>	11	<body>
12	<div id="wrapper" class="wrapper step1">	12	<div id="wrapper" class="step1">
13	<div class="collapsable block-step1">	13	<div class="collapsable block-step1">
14	<div onclick="step0_done()" class="block-header">	14	<div onclick="step0_done()" class="block-header">
15	<h1>Abmahnbeantworter</h1>	15	<h1 id="head1">Abmahnbeantworter</h1>
16	</div>	16	</div>
17	<div class="juice">	17	<div class="juice">
18	<p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>	18	<p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
@@ -20,12 +20,12 @@
20	<p><strong>Sie sind sicher, diese angebliche Urheberrechtsverletzung nicht begangen zu haben?</strong></p>	20	<p><strong>Sie sind sicher, diese angebliche Urheberrechtsverletzung nicht begangen zu haben?</strong></p>
21	<div class="two-buttons">	21	<div class="two-buttons">
22	<div class="button button-green" onclick="step1_done()">Ja, los!</div>	22	<div class="button button-green" onclick="step1_done()">Ja, los!</div>
23	<div class="button button-red" onclick="step1_cancel()">Hm, nein.</div>	23	<div class="button button-red" onclick="step0_cancel()">Hm, nein.</div>
24	</div>	24	</div>
25	</div>	25	</div>
26	</div>	26	</div>
27	<div class="collapsable" id="unsicher">	27	<div class="collapsable block-stepcancel" id="unsicher">
28	<div class="juice block-stepcancel">	28	<div class="juice">
29	<p>Bitte benutzen Sie diesen Vordruck nur, wenn Sie tatsächlich nicht für die abgemahnte Verletzung verantwortlich sind. Sollte dies doch der Fall sein, oder wenn Sie sich <b>nicht</b> sicher sind, dann suchen Sie bitte einen Anwalt auf.</p>	29	<p>Bitte benutzen Sie diesen Vordruck nur, wenn Sie tatsächlich nicht für die abgemahnte Verletzung verantwortlich sind. Sollte dies doch der Fall sein, oder wenn Sie sich <b>nicht</b> sicher sind, dann suchen Sie bitte einen Anwalt auf.</p>
30	<p>Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Dadurch können erhebliche Kosten entstehen.</p>	30	<p>Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Dadurch können erhebliche Kosten entstehen.</p>
31	<div class="one-button">	31	<div class="one-button">
@@ -38,7 +38,7 @@
38	<div class="collapsable block-step2">	38	<div class="collapsable block-step2">
39	<div onclick="step1_done()" class="block-header">	39	<div onclick="step1_done()" class="block-header">
40	<div class="done">✓</div>	40	<div class="done">✓</div>
41	<h2>Schritt 1: Fakten sammeln</h2>	41	<h2 id="head2">Schritt 1: Fakten sammeln</h2>
42	</div>	42	</div>
43	<div class="juice">	43	<div class="juice">
44	<p>Bevor wir loslegen, sammeln wir alle Informationen ein, die der abmahnenden Kanzlei verdeutlichen, warum die Abmahnung unberechtigt ist.</p>	44	<p>Bevor wir loslegen, sammeln wir alle Informationen ein, die der abmahnenden Kanzlei verdeutlichen, warum die Abmahnung unberechtigt ist.</p>
@@ -74,7 +74,7 @@
74	<div class="collapsable block-step3">	74	<div class="collapsable block-step3">
75	<div onclick="step2_done()" class="block-header">	75	<div onclick="step2_done()" class="block-header">
76	<div class="done">✓</div>	76	<div class="done">✓</div>
77	<h2>Schritt 2: Daten des Abgemahnten</h2>	77	<h2 id="head3">Schritt 2: Daten des Abgemahnten</h2>
78	</div>	78	</div>
79	<div class="juice">	79	<div class="juice">
80	<div><a href="javascript:ausfuellen()" class="button">Debug: pre-fill</a></div>	80	<div><a href="javascript:ausfuellen()" class="button">Debug: pre-fill</a></div>
@@ -100,7 +100,7 @@
100	<div class="collapsable block-step4">	100	<div class="collapsable block-step4">
101	<div onclick="step3_done()" class="block-header">	101	<div onclick="step3_done()" class="block-header">
102	<div class="done">✓</div>	102	<div class="done">✓</div>
103	<h2>Schritt 3: Daten der Abmahner</h2>	103	<h2 id="head4">Schritt 3: Daten der Abmahner</h2>
104	</div>	104	</div>
105	<div class="juice">	105	<div class="juice">
106	<p>Ist der Abmahner eine der folgenden Kanzleien? Dann können wir die Adresse gleich per Click übernehmen.</p>	106	<p>Ist der Abmahner eine der folgenden Kanzleien? Dann können wir die Adresse gleich per Click übernehmen.</p>
@@ -130,7 +130,7 @@
130	<div class="collapsable block-step5">	130	<div class="collapsable block-step5">
131	<div onclick="step4_done()" class="block-header">	131	<div onclick="step4_done()" class="block-header">
132	<div class="done">✓</div>	132	<div class="done">✓</div>
133	<h2>Schritt 4: Aktenzeichen und Datum</h2>	133	<h2 id="head5">Schritt 4: Aktenzeichen und Datum</h2>
134	</div>	134	</div>
135	<div class="juice">	135	<div class="juice">
136	<p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, um die Antwort der Abmahnung zuordnen zu können.</p>	136	<p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, um die Antwort der Abmahnung zuordnen zu können.</p>
@@ -150,7 +150,7 @@
150	<div class="collapsable block-step6">	150	<div class="collapsable block-step6">
151	<div onclick="step5_done()" class="block-header">	151	<div onclick="step5_done()" class="block-header">
152	<div class="done">✓</div>	152	<div class="done">✓</div>
153	<h2>Schritt 5: Antwortschreiben erzeugen</h2>	153	<h2 id="head6">Schritt 5: Antwortschreiben erzeugen</h2>
154	</div>	154	</div>
155	<div class="juice">	155	<div class="juice">
156	<p>Wir haben nun alle Informationen, um das Antwortschreiben erzeugen zu können:</p>	156	<p>Wir haben nun alle Informationen, um das Antwortschreiben erzeugen zu können:</p>
@@ -160,9 +160,9 @@
160	<p class="hint">Drucken Sie das Schreiben aus und schicken Sie es per Post an die abmahnende Kanzlei. Optional können Sie zur Wahrung der Frist das Schreiben auch vorab <span id="faxempfaenger"></span>faxen.</p>	160	<p class="hint">Drucken Sie das Schreiben aus und schicken Sie es per Post an die abmahnende Kanzlei. Optional können Sie zur Wahrung der Frist das Schreiben auch vorab <span id="faxempfaenger"></span>faxen.</p>
161	</div>	161	</div>
162	</div>	162	</div>
163	<div class="hidden collapsable block-step7">	163	<div class="collapsable block-step7">
164	<div class="block-header">	164	<div class="block-header">
165	<h2>Und jetzt?</h2>	165	<h2 id="head7">Und jetzt?</h2>
166	</div>	166	</div>
167	<div class="juice">	167	<div class="juice">
168	<p>Nimmt die abmahnende Kanzlei ihre Forderung nicht innerhalb unserer Frist (14 Tage) zurück, steht Ihnen eine gerichtliche Klärung zu.</p>	168	<p>Nimmt die abmahnende Kanzlei ihre Forderung nicht innerhalb unserer Frist (14 Tage) zurück, steht Ihnen eine gerichtliche Klärung zu.</p>


diff --git a/js/abmahn.js b/js/abmahn.js index 353111b..6b26e0b 100644 --- a/js/abmahn.js +++ b/js/abmahn.js
@@ -12,14 +12,22 @@ function setText(input, text) {
12	document.getElementById(input).value = text;	12	document.getElementById(input).value = text;
13	}	13	}
14		14
15	function step0_done() { document.getElementById('wrapper').className = 'wrapper step1'; }	15	function scroll(id) {
16	function step1_cancel() { document.getElementById('wrapper').className = 'wrapper stepcancel'; }	16	document.getElementById(id).scrollIntoView();
17	function step1_done() { document.getElementById('wrapper').className = 'wrapper step2'; }	17	}
18	function step2_done() { document.getElementById('wrapper').className = 'wrapper step3'; }	18
19	function step3_done() { document.getElementById('wrapper').className = 'wrapper step4'; }	19	function setClass(id, classes) {
20	function step4_done() { document.getElementById('wrapper').className = 'wrapper step5'; }	20	document.getElementById(id).className = classes;
21	function step5_done() { document.getElementById('wrapper').className = 'wrapper step6'; }	21	}
22	function step6_done() { document.getElementById('wrapper').className = 'wrapper step7'; }	22
		23	function step0_cancel() { setClass('wrapper', 'stepcancel'); }
		24	function step0_done() { setClass('wrapper', 'step1'); scroll('head1'); }
		25	function step1_done() { setClass('wrapper', 'step2'); scroll('head1'); }
		26	function step2_done() { setClass('wrapper', 'step3'); scroll('head2'); }
		27	function step3_done() { setClass('wrapper', 'step4'); scroll('head3'); }
		28	function step4_done() { setClass('wrapper', 'step5'); scroll('head4'); }
		29	function step5_done() { setClass('wrapper', 'step6'); scroll('head5'); }
		30	function step6_done() { setClass('wrapper', 'step7'); scroll('head6'); }
23		31
24	function waldorff() {	32	function waldorff() {
25	setText('abmahnender_kanzlei', 'Waldorff & Frommer RAe');	33	setText('abmahnender_kanzlei', 'Waldorff & Frommer RAe');


diff --git a/style.css b/style.css index 7563b8f..8cfcd9c 100644 --- a/style.css +++ b/style.css
@@ -43,7 +43,7 @@ html {
43	overflow-y: scroll;	43	overflow-y: scroll;
44	}	44	}
45		45
46	.wrapper {	46	#wrapper {
47	min-height: 100%;	47	min-height: 100%;
48	height: auto !important;	48	height: auto !important;
49	height: 100%;	49	height: 100%;
@@ -69,7 +69,12 @@ h2 {
69	margin: 0.5em auto 0 auto;	69	margin: 0.5em auto 0 auto;
70	}	70	}
71		71
72	.wrapper.step1 .block-header {	72	.juice {
		73	font-size: 14pt;
		74	font-weight: 300;
		75	}
		76
		77	#wrapper.step1 .block-header {
73	pointer-events: none;	78	pointer-events: none;
74	}	79	}
75		80
@@ -78,27 +83,24 @@ h2 {
78	font-weight: 300;	83	font-weight: 300;
79	}	84	}
80		85
81	.juice {	86	#unsicher,
82	font-size: 14pt;	87	.block-step7 {
83	font-weight: 300;	88	padding: 0;
84
85	overflow: hidden;
86	max-height: 0px;
87	transition: max-height 0.25s ease-in;
88	}	89	}
89		90	#wrapper.stepcancel #unsicher,
90	.hidden,	91	#wrapper-step7 .block-step7 {
91	#unsicher {	92	padding: auto;
92	visibility: hidden;
93	transition: visibility 0.25s ease-in;
94	}	93	}
95		94
96	.hidden,	95	.block-step7,
97	#unsicher,	96	.juice,
98	.wrapper.stepcancel h2 {	97	#wrapper.stepcancel h2 {
99	overflow: hidden;	98	overflow: hidden;
100	max-height: 0px;	99	max-height: 0px;
101	transition: max-height 0.25s ease-in;	100	transition: max-height, height;
		101	transition-timing-function: ease;
		102	transition-duration: 0.5s;
		103	transition-delay: 0s;
102	}	104	}
103		105
104	.block-step1 {	106	.block-step1 {
@@ -257,44 +259,49 @@ ul {
257	float: right;	259	float: right;
258	font-size: 24pt;	260	font-size: 24pt;
259	margin-top: -0.2em;	261	margin-top: -0.2em;
260	display: none;
261	visibility: hidden;	262	visibility: hidden;
262	}	263	}
263		264
		265	#wrapper.step3 .block-step2 .done,
		266	#wrapper.step4 .block-step2 .done,
		267	#wrapper.step5 .block-step2 .done,
		268	#wrapper.step6 .block-step2 .done,
		269	#wrapper.step7 .block-step2 .done,
		270	#wrapper.step4 .block-step3 .done,
		271	#wrapper.step5 .block-step3 .done,
		272	#wrapper.step6 .block-step3 .done,
		273	#wrapper.step7 .block-step3 .done,
		274	#wrapper.step5 .block-step4 .done,
		275	#wrapper.step6 .block-step4 .done,
		276	#wrapper.step7 .block-step4 .done,
		277	#wrapper.step6 .block-step5 .done,
		278	#wrapper.step7 .block-step5 .done,
		279	#wrapper.step7 .block-step6 .done {
		280	visibility: visible;
		281	}
		282
264	input[type="text"] {	283	input[type="text"] {
265	width: 90%;	284	width: 90%;
266	}	285	}
267		286
268	.wrapper.step1 .block-step1 .juice,	287	#wrapper.step1 .block-step1 .juice,
269	.wrapper.step2 .block-step2 .juice,	288	#wrapper.stepcancel .block-stepcancel .juice {
270	.wrapper.step3 .block-step3 .juice,	289	max-height: 350px;
271	.wrapper.step4 .block-step4 .juice,	290	transition: max-height 0.5s ease;
272	.wrapper.step5 .block-step5 .juice,	291	}
273	.wrapper.step6 .block-step6 .juice,	292
274	.wrapper.step7 .block-step7 .juice,	293	#wrapper.step5 .block-step5 .juice {
275	.wrapper.step7 .block-step7,	294	max-height: 500px;
276		295	transition: max-height 0.5s ease;
277	.wrapper.stepcancel .block-stepcancel.juice,	296	}
278	.wrapper.stepcancel #unsicher,
279
280	.wrapper.step3 .block-step2 .done,
281	.wrapper.step4 .block-step2 .done,
282	.wrapper.step5 .block-step2 .done,
283	.wrapper.step6 .block-step2 .done,
284	.wrapper.step7 .block-step2 .done,
285	.wrapper.step4 .block-step3 .done,
286	.wrapper.step5 .block-step3 .done,
287	.wrapper.step6 .block-step3 .done,
288	.wrapper.step7 .block-step3 .done,
289	.wrapper.step5 .block-step4 .done,
290	.wrapper.step6 .block-step4 .done,
291	.wrapper.step7 .block-step4 .done,
292	.wrapper.step6 .block-step5 .done,
293	.wrapper.step7 .block-step5 .done,
294	.wrapper.step7 .block-step6 .done
295		297
		298	#wrapper.step2 .block-step2 .juice,
		299	#wrapper.step3 .block-step3 .juice,
		300	#wrapper.step4 .block-step4 .juice,
		301	#wrapper.step6 .block-step6 .juice,
		302	#wrapper.step7 .block-step7 .juice,
		303	#wrapper.step7 .block-step7
296	{	304	{
297	display: block !important;	305	max-height: 900px;
298	visibility: visible !important;	306	transition: max-height 0.5s ease;
299	max-height: 9999px;
300	}	307	}