]> Wikimedia Canada | Git repositories - paypal.git/blob - wmca.css
c19ff5310183eaa8419dc9fccc91f5a335248dda
[paypal.git] / wmca.css
1 * {
2 box-sizing: border-box;
3 }
4
5 body {
6 background-color: #F3F3F3;
7 margin: 1em;
8 font-family: sans-serif;
9 font-size: 1.4rem;
10 color: #000;
11 }
12
13 a {
14 text-decoration: none;
15 padding-bottom: 0px;
16 border-bottom: 1px solid blue;
17 }
18
19 img.logo {
20 display: flex;
21 float: left;
22 max-width: 25%;
23 height: auto;
24 }
25
26 .langlink {
27 /*display: flex;
28 justify-content: flex-start;*/
29 float: right;
30 }
31
32 .title {
33 text-align: center;
34 padding-top: 75px;
35 }
36
37 h1 {
38 font-weight: bold;
39 text-align: center;
40 }
41
42 h2 {
43 font-weight: bold;
44 font-size: 1.6em;
45 }
46
47 h3 {
48 font-weight: bold;
49 font-size: 1.4em;
50 }
51
52 p {
53 margin: 0 0 1em 0;
54 }
55
56 #main {
57 margin: 0;
58 padding: 0;
59 display: -webkit-flex;
60 display: flex;
61 -webkit-flex-flow: row;
62 flex-flow: row;
63 }
64
65 #main > article,
66 #main > leftmargin,
67 #main > rightmargin {
68 background: #F3F3F3;
69 margin: 4px;
70 padding: 0em 1.0rem;
71 }
72
73 #main > article {
74 -webkit-flex: 4 1 0;
75 flex: 4 1 0;
76 -webkit-order: 2;
77 order: 2;
78 }
79
80 #green {
81 display: -webkit-flex;
82 display: flex;
83 -webkit-flex-direction: row;
84 flex-direction: row;
85 padding-bottom: 1em;
86 }
87
88 #join {
89 border: 1px solid #5EAC58;
90 background-color: #CCE7CD;
91 padding: 1em;
92 width: 60%;
93 }
94
95 #donate {
96 border: 1px solid #5EAC58;
97 background-color: #CCE7CD;
98 padding: 1em;
99 width: 40%;
100 }
101
102 #join > h2, #donate > h2 {
103 text-align: center;
104 }
105
106 #main > leftmargin {
107 -webkit-order: 1;
108 order: 1;
109 }
110
111 #main > rightmargin {
112 -webkit-order: 3;
113 order: 3;
114 }
115
116 header {
117 display: block;
118 padding: 1.0em;
119 }
120
121 footer {
122 display: block;
123 min-height: 80px;
124 background: #DDD;
125 font-size: 75%;
126 font-style: italic;
127 padding: 0.5em;
128 }
129
130 .flex-outer {
131 list-style-type: none;
132 padding: 0;
133 margin: 0 auto;
134 }
135
136 .flex-outer li {
137 display: flex;
138 flex-wrap: wrap;
139 align-items: center;
140 }
141
142 .flex-outer li:not(:last-child) {
143 margin-bottom: 10px;
144 }
145
146 .flex-outer li label {
147 padding: 8px;
148 }
149
150 .flex-outer li p {
151 /*padding: 8px;*/
152 align-items: center;
153 }
154
155 .flex-outer > li > label,
156 .flex-outer li p {
157 flex: 1 0 120px;
158 max-width: 220px;
159 padding: 8px;
160 }
161
162 .flex-outer > li > label + * {
163 flex: 1 0 220px;
164 }
165
166 .flex-outer li input:not([type='radio']) {
167 padding: 15px;
168 }
169
170 .flex-inner {
171 display: flex;
172 flex-wrap: wrap;
173 justify-content: space-between;
174 flex-direction: column;
175 list-style-type: none;
176 padding: 0;
177 }
178
179 span.break:before {
180 content: "\A";
181 white-space: pre;
182 }
183
184 select {
185 display: inline-block;
186 width: 100%;
187 padding: 10px 15px;
188 font-size: 1.4rem;
189 border: 0;
190 border-radius: 0;
191 }
192
193 .radio-item {
194 display: flex;
195 align-items: baseline;
196 justify-content: space-between;
197 padding-bottom: 0.5em;
198 }
199
200 input[type="radio"] {
201 align-self: center;
202 }
203
204 input[type='text'] {
205 display: inline-block;
206 width: 100%;
207 font-size: 1.4rem;
208 }
209
210 #donate > form {
211 text-align: center;
212 }
213
214 .btn-item {
215 display: flex;
216 padding-top: 1.5rem;
217 justify-content: center;
218 }
219
220 .btn {
221 padding: 1.0rem;
222 border: 1px solid #333;
223 background: #000;
224 color: #fff;
225 text-transform: uppercase;
226 letter-spacing: .09em;
227 border-radius: 2px;
228 font-weight: bold;
229 font-size: 1.6em;
230 }
231
232 .btn:hover {
233 background: gold;
234 color: #000;
235 border: 1px solid #333;
236 }
237
238 .btn:focus {
239 background: gold;
240 color: #000;
241 border: 1px solid #333;
242 }
243
244 @-ms-viewport {
245 width: device-width;
246 }
247
248 @media only screen and (max-width: 768px) {
249
250 body {
251 font-size: 1.2rem;
252 margin: 0em;
253 }
254
255 #main, #page {
256 -webkit-flex-flow: column;
257 flex-flow: column;
258 }
259
260 #main > article, #main > leftmargin, #main > rightmargin {
261 /* Return them to document order */
262 -webkit-order: 0;
263 order: 0;
264 }
265
266 #main > article {
267 /*padding 0.5em;*/
268 }
269
270 #main > leftmargin, #main > rightmargin {
271 /* Hide them */
272 visibility: hidden;
273 margin: 0;
274 padding: 0;
275 order: 3;
276 }
277
278 #green {
279 -webkit-flex-flow: column;
280 flex-flow: column;
281 padding-bottom: 1em;
282 -webkit-order: 0;
283 order: 0;
284 }
285
286 #join, #donate {
287 width: 100%;
288 padding: 1em;
289 border: 0px;
290 }
291
292 #join {
293 border-bottom: 1px solid #5EAC58;
294 }
295
296 #donate {
297 border-top: 1px solid #5EAC58;
298 }
299
300 br {
301 content: ' ';
302 }
303
304 br:after {
305 content: ' ';
306 }
307
308 select, input[type='text'] {
309 font-size: 1.0rem;
310 }
311
312 header, footer {
313 min-height: 50px;
314 }
315
316 footer {
317 margin-top: 0.25em;
318 position: sticky;
319 }
320
321 .btn {
322 display: inline-block;
323 width: 100%;
324 margin-top: 2em;
325 }
326 }