summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--style.css81
1 files changed, 39 insertions, 42 deletions
diff --git a/style.css b/style.css
index dfc8799..bc09d1f 100644
--- a/style.css
+++ b/style.css
@@ -67,23 +67,21 @@ h2 {
67 67
68.circle_num { 68.circle_num {
69 float: left; 69 float: left;
70 width: 1.2em; 70 width: 40px;
71 height: 1.2em; 71 height: 40px;
72 line-height: 1.2em; 72 line-height: 1.2em;
73 font-size: 0.8em; 73 font-size: 23pt;
74 border-radius: 50%; 74 border-radius: 50%;
75 border: solid #F1F2E3 2px; 75 transition: border-radius, 2s;
76 margin: 0 1em 0 0; 76 border: 0px;
77 margin: 0 28px 0 0;
77 text-align: center; 78 text-align: center;
78 background-color: #F1F2E3; 79 background-color: #F1F2E3;
79 font-weight: normal; 80 font-weight: normal;
80} 81}
81 82
82.block-header, .juice { 83.block-header, .juice {
83 min-width: 480px; 84 width: 480px;
84 width: 50%;
85 max-width: 640px;
86
87 margin: 0.5em auto 0 auto; 85 margin: 0.5em auto 0 auto;
88} 86}
89 87
@@ -125,61 +123,57 @@ h2 {
125 123
126.block-step1 .circle_num { 124.block-step1 .circle_num {
127 background-color: #403040; 125 background-color: #403040;
128 width: 40px;
129 height: 40px;
130 color: #F1F2E3; 126 color: #F1F2E3;
131 font-size: 21pt; 127 margin: 4px 28px 0 0;
132 margin-top: 0.2em; 128 line-height: 1.3em;
133 line-height: 1.5em;
134} 129}
135 130
136
137.block-step2 { 131.block-step2 {
138 background-color: #403040; 132 background-color: #047e7c;
139} 133}
140 134
141.block-step2 .circle_num { 135.block-step2 .circle_num {
142 color: #403040; 136 color: #047e7c;
143} 137}
144 138
145.block-step3 { 139.block-step3 {
146 background-color: #564073; 140 background-color: #0c6d74;
147} 141}
148 142
149.block-step3 .circle_num { 143.block-step3 .circle_num {
150 color: #564073; 144 color: #0c6d74;
151} 145}
152 146
153.block-step4 { 147.block-step4 {
154 background-color: #6A59A4; 148 background-color: #145c6c;
155} 149}
156 150
157.block-step4 .circle_num { 151.block-step4 .circle_num {
158 color: #6A59A4; 152 color: #145c6c;
159} 153}
160 154
161.block-step5 { 155.block-step5 {
162 background-color: #7CA8D7; 156 background-color: #1c4b64;
163} 157}
164 158
165.block-step5 .circle_num { 159.block-step5 .circle_num {
166 color: #7CA8D7; 160 color: #1c4b64;
167} 161}
168 162
169.block-step6 { 163.block-step6 {
170 background-color: #D0B66B; 164 background-color: #243a5c;
171} 165}
172 166
173.block-step6 .circle_num { 167.block-step6 .circle_num {
174 color: #D0B66B; 168 color: #243a5c;
175} 169}
176 170
177.block-step7 { 171.block-step7 {
178 background-color: #70B5A9; 172 background-color: #2c2954;
179} 173}
180 174
181.block-step7 .circle_num { 175.block-step7 .circle_num {
182 color: #70B5A9; 176 color: #2c2954;
183 177
184} 178}
185 179
@@ -197,13 +191,13 @@ h2 {
197} 191}
198 192
199.block-step2, .block-step3, .block-step4, .block-step5, .block-step6, .block-step7 { 193.block-step2, .block-step3, .block-step4, .block-step5, .block-step6, .block-step7 {
200 box-shadow: inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75); 194 box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5);
201} 195}
202 196
203.two-buttons, 197.two-buttons,
204.one-button { 198.one-button {
205 height: 4em; 199 height: 4em;
206 margin: 3em 0 0.5em 0; 200 margin: 2.5em 0 0 0;
207} 201}
208 202
209.button { 203.button {
@@ -222,12 +216,12 @@ h2 {
222 216
223.button-small { 217.button-small {
224 background-color: white; 218 background-color: white;
225 color: black; 219 color: #222;
226 font-weight: normal; 220 font-weight: normal;
227 font-size: 13pt; 221 font-size: 13pt;
228 display: inline-block; 222 display: inline-block;
229 border-radius: 4px; 223 border-radius: 4px;
230 padding: 0.1em 0.3em 0.1em 0.3em; 224 padding: 0.2em 0.4em 0.2em 0.4em;
231 margin: 0 0.4em 1em 0; 225 margin: 0 0.4em 1em 0;
232 cursor: pointer; 226 cursor: pointer;
233 transition-duration: 0.2s; 227 transition-duration: 0.2s;
@@ -280,7 +274,9 @@ ul {
280} 274}
281 275
282.footer { 276.footer {
283 background-color: #4A5D67; 277 /* background-color: #42425A; */
278 background-color: #F1F2E3;
279 box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5);
284 color: #8E99A0; 280 color: #8E99A0;
285 font-size: 13pt; 281 font-size: 13pt;
286 font-weight: 300; 282 font-weight: 300;
@@ -347,10 +343,10 @@ input[type="text"] {
347 border: solid 1px silver; 343 border: solid 1px silver;
348 border-radius: 4px; 344 border-radius: 4px;
349 font-family: 'SourceSansPro', sans-serif; 345 font-family: 'SourceSansPro', sans-serif;
350 font-size: 14pt; 346 font-size: 13pt;
351 font-weight: normal; 347 font-weight: normal;
352 padding: 0.3em; 348 padding: 0.4em 0.6em 0.4em 0.6em;
353 margin-bottom: 0.5em; 349 margin-bottom: 0.7em;
354} 350}
355 351
356select.tag { 352select.tag {
@@ -372,6 +368,7 @@ select.zeit {
372 368
373select { 369select {
374 height: 2em; 370 height: 2em;
371 font-family: 'SourceSansPro', sans-serif;
375 font-size: 13pt; 372 font-size: 13pt;
376 font-weight: 300; 373 font-weight: 300;
377 border-radius: 4px; 374 border-radius: 4px;
@@ -390,8 +387,8 @@ input[type=checkbox]:not(old) + label {
390 display : inline-block; 387 display : inline-block;
391 margin-left : 0; 388 margin-left : 0;
392 line-height : 1.7em; 389 line-height : 1.7em;
393 text-indent : -60px; /* Make 2nd line of label align, takes border width of tickbox into account */ 390 text-indent : -68px; /* Make 2nd line of label align, takes border width of tickbox into account */
394 padding-left : 60px; 391 padding-left : 68px;
395} 392}
396 393
397input[type=checkbox]:not(old) + label > span { 394input[type=checkbox]:not(old) + label > span {
@@ -399,7 +396,7 @@ input[type=checkbox]:not(old) + label > span {
399 width : 30px; 396 width : 30px;
400 height : 30px; 397 height : 30px;
401 background-color : rgba(255, 255, 255, 0.30); 398 background-color : rgba(255, 255, 255, 0.30);
402 margin : 2px 28px 8px 2px; 399 margin : 2px 36px 8px 2px;
403 border : 0px solid rgba(255, 255, 255, 0.30); 400 border : 0px solid rgba(255, 255, 255, 0.30);
404 border-radius : 25%; 401 border-radius : 25%;
405 vertical-align : top; 402 vertical-align : top;
@@ -418,7 +415,7 @@ input[type=checkbox]:not(old):checked + label > span:before {
418 color : white; 415 color : white;
419 text-align : left; 416 text-align : left;
420 font-weight : bold; 417 font-weight : bold;
421 margin-left : 127px; 418 margin-left : 144px;
422} 419}
423 420
424#wrapper.stepcancel .block-stepcancel .juice, 421#wrapper.stepcancel .block-stepcancel .juice,
@@ -435,11 +432,11 @@ input[type=checkbox]:not(old):checked + label > span:before {
435} 432}
436 433
437#wrapper.step4 .block-step4 .juice { 434#wrapper.step4 .block-step4 .juice {
438 max-height: 950px; 435 max-height: 1200px;
439} 436}
440 437
441#wrapper.step5 .block-step5 .juice { 438#wrapper.step5 .block-step5 .juice {
442 max-height: 800px; 439 max-height: 1200px;
443} 440}
444 441
445#wrapper.step6 .block-step6 .juice { 442#wrapper.step6 .block-step6 .juice {
@@ -471,7 +468,7 @@ input[type=checkbox]:not(old):checked + label > span:before {
471} 468}
472 469
473#wrapper.step5 .block-step5 .juice { 470#wrapper.step5 .block-step5 .juice {
474 max-height: 1050px; 471 max-height: 1200px;
475} 472}
476 473
477#wrapper.step6 .block-step6 .juice { 474#wrapper.step6 .block-step6 .juice {