summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css232
1 files changed, 227 insertions, 5 deletions
diff --git a/style.css b/style.css
index 0bbcd73..3bd370c 100644
--- a/style.css
+++ b/style.css
@@ -1,17 +1,225 @@
1ul { 1@font-face {
2 list-style-type: none; 2 font-family: SourceSansPro;
3 padding-left:0; 3 src: url('fonts/SourceSansPro-Regular.otf');
4}
5@font-face {
6 font-family: SourceSansPro;
7 src: url('fonts/SourceSansPro-Bold.otf');
8 font-weight: bold;
9}
10@font-face {
11 font-family: SourceSansPro;
12 src: url('fonts/SourceSansPro-It.otf');
13 font-style: italic;
14}
15@font-face {
16 font-family: SourceSansPro;
17 src: url('fonts/SourceSansPro-BoldIt.otf');
18 font-weight: bold;
19 font-style: italic;
20}
21@font-face {
22 font-family: SourceSansPro;
23 src: url('fonts/SourceSansPro-Light.otf');
24 font-weight: 300;
25}
26@font-face {
27 font-family: SourceSansPro;
28 src: url('fonts/SourceSansPro-LightIt.otf');
29 font-style: italic;
30 font-weight: 300;
31}
32
33body {
34 font-family: 'SourceSansPro', sans-serif;
35}
36
37.wrapper {
38 min-height: 100%;
39 height: auto !important;
40 height: 100%;
41 margin: 0 auto -4em;
42}
43
44h1 {
45 font-size: 30pt;
46 font-weight: 300;
47 text-transform: uppercase;
4} 48}
5 49
6h2 { 50h2 {
7 padding-top: 1em; 51 font-size: 18pt;
52 font-weight: 300;
53 cursor: pointer;
54}
55
56h1, h2, h3, .juice {
57 min-width: 480px;
58 width: 50%;
59 margin: 0.5em auto 0 auto;
60 transition: visibility 0s linear 0.5s, display 0s linear 0.5s;
61}
62
63.hint {
64 font-style: italic;
65 font-weight: 300;
66}
67
68.juice {
69 font-size: 14pt;
70 font-weight: 300;
71 visibility: hidden;
72 display: none;
73}
74
75.hidden, #unsicher {
76 visibility: hidden;
77 display: none;
78}
79
80.wrapper.stepcancel h2 {
81 visibility: hidden;
82 display: none;
83}
84
85.block-step1 {
86 background-color: #F1F2E3;
87 color: black !important;
88}
89
90#unsicher {
91 background-color: #B77662;
92}
93
94.block-step2 {
95 background-color: #70B5A9;
96}
97
98.block-step3 {
99 background-color: #7CA8D7;
100}
101
102.block-step4 {
103 background-color: #6A59A4;
104}
105
106.block-step5 {
107 background-color: #564073;
108}
109
110.block-step6 {
111 background-color: #403040;
112}
113
114.block-step7 {
115 background-color: #F1F2E3;
116 color: black !important;
117}
118
119.greyed .block-step2 {
120 background-color: #ccc;
121}
122
123.greyed .block-step3 {
124 background-color: #aaa;
125}
126
127.greyed .block-step4 {
128 background-color: #888;
129}
130
131.greyed .block-step5 {
132 background-color: #666;
133}
134
135.greyed .block-step6 {
136 background-color: #444;
137}
138
139.collapsable {
140 width: 100%;
141 min-width: 480px;
142 color: white;
143 padding: 0.4em 0 0.4em 0;
144 margin-left: 0;
145 margin-right: 0;
146}
147
148.block-step2, .block-step3, .block-step4, .block-step5, .block-step6 {
149 box-shadow: inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);
150}
151
152.two-buttons,
153.one-button {
154 height: 3em;
155}
156
157.button {
158 width: 33%;
159 height: 2em;
160 padding-top: 0.7em;
161 padding-bottom: 0;
162 color: white;
163 font-weight: bold;
164 text-align: center;
165 border-radius: 10px;
166 text-transform: uppercase;
167 transition-duration: 0.4s;
168 cursor: pointer;
169}
170
171.button-red:hover {
172 background-color: white;
173 color: #E65946;
174}
175
176.button-red {
177 float: right;
178 border: 2px solid #E65946;
179 background-color: #E65946;
180}
181
182.button-green:hover {
183 background-color: white;
184 color: #8ECA63;
185}
186
187.two-buttons .button-green {
188 float: left;
189}
190
191.button-green {
192 float: right;
193 border: 2px solid #8ECA63;
194 background-color: #8ECA63;
195}
196
197body {
198 margin: 0px !important;
199}
200
201ul {
202 list-style-type: none;
203 padding-left:0;
8} 204}
9 205
10.footer { 206.footer {
207 background-color: #4A5D67;
11 font-size: 0.8em; 208 font-size: 0.8em;
12 margin-top: 2em; 209 margin-top: 2em;
13 border-top: 1px solid black; 210 margin-left: 0;
211 margin-right: 0;
212 padding: 0.4em 0 0.4em 0;
213 border-top: 8px solid white;
14 text-align: center; 214 text-align: center;
215 position: fixed;
216 bottom: 0px;
217 left: 0px;
218 width: 100%;
219}
220
221.footer, .push {
222 height: 4em;
15} 223}
16 224
17.footer p { 225.footer p {
@@ -27,3 +235,17 @@ h2 {
27input[type="text"] { 235input[type="text"] {
28 width: 90%; 236 width: 90%;
29} 237}
238
239.wrapper.step1 .block-step1 .juice,
240.wrapper.step2 .block-step2 .juice,
241.wrapper.step3 .block-step3 .juice,
242.wrapper.step4 .block-step4 .juice,
243.wrapper.step5 .block-step5 .juice,
244.wrapper.step6 .block-step6 .juice,
245.wrapper.step7 .block-step7 .juice,
246.wrapper.step7 .block-step7,
247.wrapper.stepcancel .block-stepcancel.juice,
248.wrapper.stepcancel #unsicher {
249 display: block !important;
250 visibility: visible !important;
251}