Subversion Repositories PEEPS

Rev

Rev 2 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
2 - 1 
:root {
2 
	--dark-color: #1d4486;
3 
	--medium-color: #45bdaa;
4 
	--light-color: rgba(0, 119, 189, .2);
5 
    --highlight: rgba(0, 119, 189, .4);
6 
	--hl-light: #ffff99;
7 
	--hl-dark: #ffe699;
59 - 8 
	--good-lt: #00c13359;
9 
	--good-dk: #00c1339c;
2 - 10 
}
11 
 
12 
body {
13 
	background-color: white;
14 
	background-image: url("https://clipground.com/images/water-mark-png-4.jpg");
15 
	background-repeat: repeat;
16 
	font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
17 
	color: var(--dark-color);
18 
	margin: 4px;
19 
}
20 
 
21 
.hide {
22 
	display: none;
23 
	padding: 10px;
24 
}
25 
 
26 
.show:hover + .hide {
27 
	display: block;
28 
	position: absolute;
29 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
30 
}
31 
 
32 
div {
33 
	color: var(--dark-color);
34 
}
35 
 
36 
.index {
37 
	margin-top: 25px;
38 
	margin-left: 5px;
39 
	max-width: 875px;
40 
}
41 
 
42 
.indent {
43 
	margin-left: 15px;
44 
	max-width:  875px;
45 
}
46 
 
47 
.bio {
48 
	margin-left: 30px;
49 
	max-width:  675px;
50 
	border-radius: 3px 15px 15px 3px;
51 
	background-color: var(--light-color);
52 
	padding: 5px;
53 
	font-size: smaller;
54 
}
55 
 
56 
.heading {
57 
	background-color: var(--dark-color);
58 
	accent-color: var(--dark-color);
59 
	border-radius: 3px 15px 3px 3px;
60 
/*	max-width: 610px; */
61 
	padding: 5px;
62 
	color: white;
63 
}
64 
 
65 
ol li {
66 
  margin-bottom: 1em;
67 
}
68 
 
69 
ul {
70 
	max-width: 95%;
71 
}
72 
 
73 
li {
74 
/*	max-width: 580px; */
75 
}
76 
.lisp0 {display:flex;}
77 
.liLeft {
78 
	float:left;
79 
	display: flex;
80 
	width:80%;
81 
	margin: auto;
82 
}
83 
 
84 
.liRight {
85 
	float:right;
86 
	width:20%;
87 
	text-align:right;
88 
}
89 
 
90 
.liNarrowLeft {
91 
	float:left;
92 
	display: flex;
93 
	width:20%;
94 
	margin: auto;
95 
}
96 
 
97 
.liWideRight {
98 
	float:right;
99 
	width:80%;
100 
	text-align:right;
101 
}
102 
 
103 
.accent {
104 
	background-color: var(--dark-color);
105 
	accent-color: var(--dark-color);
106 
}
107 
 
108 
.pageheader {
109 
	max-width: 610px;
110 
	padding: 10px;
111 
	border-radius: 5px 35px 5px 5px;
112 
	margin-bottom: 4px;
113 
}
114 
 
59 - 115 
.pageheader h1 {
116 
  font-size: 2em;
117 
}
118 
 
2 - 119 
.sp0 {display:flex; max-width:875px;}
120 
.spLeft {
121 
	float:left;
122 
	display: flex;
123 
	width:65%;
124 
	font-size: x-small;
125 
}
126 
 
127 
.spRight {
128 
	float:right;
129 
	width:35%;
130 
	text-align:right;
59 - 131 
/*	font-size: x-small; */
132 
	font-size: 1em;
2 - 133 
}
134 
 
59 - 135 
.spRight h1 {
136 
  color: #122d61;
137 
  text-shadow: none;
138 
}
139 
 
2 - 140 
.autoload {
141 
	color: rgba(255,255,255, .9);
142 
}
143 
 
144 
input[type=radio] {
145 
	opacity: 75%;
146 
}
147 
 
148 
h1 {
149 
	color: white;
150 
	font-style: italic;
151 
	font-weight: bold;
152 
	text-shadow: 2px 2px 4px #000000;
153 
	margin: 0;
154 
}
155 
 
156 
h5 {
157 
	font-size: x-small;
158 
	margin: 0;
159 
	line-height: 200%;
160 
}
161 
 
162 
.footer {
163 
	font-size: xx-small;
164 
	font-weight: bold;
165 
}
166 
 
167 
a {
168 
	color: var(--dark-color);
169 
	text-decoration: none;
170 
	white-space: nowrap;
171 
}
172 
 
173 
 
174 
a:hover {
175 
	text-decoration: underline;
176 
	cursor: pointer;
177 
}
178 
 
179 
.nowrap {
180 
	white-space: nowrap;
181 
	margin: auto;
182 
}
183 
 
184 
input[type=text],
185 
input[type=number],
186 
input[type=password],
187 
input[type=time],
188 
input[type=date],
189 
select,
190 
textarea
191 
{
192 
	font-size: small;
193 
	padding: 2px;
194 
	border: 1px solid var(--medium-color);
195 
  border-radius: 4px;
196 
	box-sizing: border-box;
197 
  outline: none;
198 
	color: var(--dark-color);
199 
}
200 
 
201 
input[type=text]:focus,
202 
input[type=number]:focus,
203 
input[type=password]:focus,
204 
input[type=time]:focus,
205 
input[type=date]:focus,
206 
select:focus,
207 
textarea:focus {
208 
  border: 1px solid var(--dark-color);
209 
}
210 
 
211 
 
212 
button,
213 
input[type=button],
214 
input[type=reset],
215 
input[type=submit] {
59 - 216 
	background-color: var(--dark-color);
2 - 217 
	border: none;
59 - 218 
	color: #fff;
2 - 219 
	padding: 4px 16px;
220 
	text-decoration: none;
221 
	margin: 4px 2px;
222 
	border-radius: 15px;
59 - 223 
	font-weight: normal;
2 - 224 
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
225 
	cursor: pointer;
59 - 226 
	font-size: 1em;
2 - 227 
	vertical-align: middle;
228 
}
229 
 
230 
button:hover, input:hover[type=button], input:hover[type=submit], input:hover[type=reset] {
231 
	background-color: var(--dark-color);
232 
	color: var(--medium-color);
233 
	box-shadow: -2px -2px 4px var(--light-color);
234 
	vertical-align: middle;
235 
}
236 
 
237 
input:disabled[type=submit],
238 
button:disabled,
239 
button[disabled] {
240 
  display: none;
241 
 	background-color: "LightGrey";
242 
 	color: "DarkGrey";
243 
}
244 
 
245 
.inputfile {
246 
	width: 0.1px;
247 
	height: 0.1px;
248 
	opacity: 0;
249 
	overflow: hidden;
250 
	position: absolute;
251 
	z-index: -1;
252 
}
253 
 
254 
.inputfile + label {
255 
	background-color: var(--medium-color);
256 
	border: none;
257 
	color: var(--dark-color);
258 
	padding: 4px 16px;
259 
	text-decoration: none;
260 
	margin: 4px 2px;
261 
	border-radius: 15px;
262 
	font-weight: bold;
263 
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
264 
	cursor: pointer;
265 
	font-size: x-small;
266 
  display: inline-block;
267 
}
268 
 
269 
.inputfile + label * {
270 
	pointer-events: none;
271 
}
272 
 
273 
.inputfile:focus + label,
274 
.inputfile + label:hover {
275 
	background-color: var(--dark-color);
276 
	color: var(--medium-color);
277 
	box-shadow: -2px -2px 4px var(--light-color);
278 
}
279 
 
280 
.bold {
281 
	font-weight: bold;
282 
}
283 
 
284 
.success {
285 
	font-size: small;
286 
	font-weight: bold;
287 
	color: green;
288 
}
289 
 
290 
.error {
291 
	font-size: small;
292 
	font-weight: bold;
293 
	color: crimson;
294 
}
295 
 
296 
.hint {
59 - 297 
	font-size: 1em;
2 - 298 
	font-style: italic;
59 - 299 
	color: var(--dark-color);
300 
	margin-bottom: 0;
2 - 301 
}
302 
 
303 
.top {
304 
	vertical-align: top;
305 
}
306 
.rTable {
307 
	display: table;
308 
	padding: 0;
309 
	border: 0;
310 
	border-spacing: 0;
311 
	margin: 0;
312 
	min-width: 80%;
313 
}
314 
.rTableRow { display: table-row; }
315 
.rTableRowSpan { display: table-row; column-span: all; }
316 
.rTableHeading {
317 
	display: table-header-group;
318 
}
319 
.rTableHead {
320 
	display: table-cell;
321 
	color: white;
322 
	background-color: var(--dark-color);
323 
	font-style: italic;
324 
	font-size: small;
325 
	text-shadow: 1px 1px 2px #000000;
326 
	text-align: left;
327 
	white-space: nowrap;
328 
	padding: 3px 12px;
329 
}
330 
 
331 
.rTableHead:first-child {
332 
	border-radius: 5px 0 0 0;
333 
}
334 
 
335 
.rTableHead:last-child {
336 
	border-radius: 0 20px 0 0;
337 
}
338 
 
339 
.rTableBody { display: table-row-group; }
340 
.rTableFoot { display: table-footer-group; }
341 
.rTableCell {
342 
	display: table-cell;
343 
	color: var(--dark-color);
344 
	font-size: x-small;
345 
	text-align: left;
346 
	padding: 5px 12px;
347 
}
348 
 
349 
.rTableCellr {
350 
	display: table-cell;
351 
	color: var(--dark-color);
59 - 352 
	font-size: 1em;
2 - 353 
	text-align: left;
354 
	padding: 5px 12px;
355 
}
356 
.rTableCellr:first-child {
357 
	text-align: right;
358 
}
359 
 
360 
.quarters {
361 
	width: 25%;
362 
}
363 
 
364 
.right {
365 
	text-align: right;
366 
}
367 
 
368 
.shaded:nth-child(odd) {
369 
	background-color: var(--light-color);
370 
}
371 
 
372 
.shaded:nth-child(even) {
373 
	background-color: white;
374 
}
375 
 
376 
.shaded:hover {
377 
  background-color: var(--highlight);
378 
}
379 
 
380 
.highlighted {
381 
	background-color: var(--hl-light);
382 
}
383 
 
384 
.highlighted:hover {
385 
  background-color: var(--hl-dark);
386 
}
387 
 
388 
tr.highlighted {
389 
	background: var(--hl-light);
390 
}
391 
 
59 - 392 
.highlighted-good {
393 
	background-color: var(--good-lt);
394 
}
395 
 
396 
.highlighted-good:hover {
397 
  background-color: var(--good-dk);
398 
}
399 
 
400 
tr.highlighted-good {
401 
	background: var(--good-lt);
402 
}
403 
 
2 - 404 
.filters {
405 
	background-color: var(--medium-color);
406 
}
407 
 
408 
.tooltip-wrap {
409 
  position: relative;
410 
}
411 
.tooltip-wrap .tooltip-content {
412 
  display: none;
413 
  position: absolute;
414 
  bottom: 5%;
415 
  left: 5%;
416 
  right: 5%;
417 
  border-radius: 5px;
418 
  background-color: #d3d3d3;
419 
  padding: .5em;
420 
  min-width: 10rem;
421 
	font-size: small;
422 
	font-style: italic;
423 
	color: black;
424 
}
425 
.tooltip-wrap:hover .tooltip-content {
426 
  display: block;
427 
}
428 
 
429 
table {
430 
	padding: 0;
431 
	border: 0;
432 
	border-spacing: 0;
433 
	margin: 0;
434 
}
435 
 
436 
tr:nth-child(odd).shaded {
437 
	background-color: var(--light-color);
438 
}
439 
 
440 
tr:nth-child(even).shaded {
441 
	background: white;
442 
}
443 
 
444 
th {
445 
	color: white;
446 
	background-color: var(--dark-color);
447 
	font-style: italic;
448 
	font-size: small;
449 
	text-shadow: 1px 1px 2px #000000;
450 
	text-align: left;
451 
	white-space: nowrap;
452 
}
453 
 
454 
td {
455 
	color: var(--dark-color);
59 - 456 
	font-size: 1em;
2 - 457 
	text-align: left;
458 
}
459 
 
460 
td.mvp {
461 
	font-size: small;
462 
}
463 
 
464 
td.filters .filters {
465 
	background-color: var(--medium-color);
466 
}
467 
 
468 
 
469 
.switch {
470 
  position: relative;
471 
  display: inline-block;
472 
  width: 30px;
473 
  height: 17px;
474 
}
475 
 
476 
/* Hide default HTML checkbox */
477 
.switch input {
478 
  opacity: 0;
479 
  width: 0;
480 
  height: 0;
481 
}
482 
 
483 
/* The slider */
484 
.slider {
485 
  position: absolute;
486 
  cursor: pointer;
487 
  top: 0;
488 
  left: 0;
489 
  right: 0;
490 
  bottom: 0;
491 
  background-color: #ccc;
492 
  -webkit-transition: .4s;
493 
  transition: .4s;
494 
}
495 
 
496 
.slider:before {
497 
  position: absolute;
498 
  content: "";
499 
  height: 13px;
500 
  width: 13px;
501 
  left: 2px;
502 
  bottom: 2px;
503 
  background-color: white;
504 
  -webkit-transition: .4s;
505 
  transition: .4s;
506 
}
507 
 
508 
input:checked + .slider {
509 
  background-color: #2196F3;
510 
}
511 
 
512 
input:focus + .slider {
513 
  box-shadow: 0 0 1px #2196F3;
514 
}
515 
 
516 
input:checked + .slider:before {
517 
  -webkit-transform: translateX(13px);
518 
  -ms-transform: translateX(13px);
519 
  transform: translateX(13px);
520 
}
521 
 
522 
/* Rounded sliders */
523 
.slider.round {
524 
  border-radius: 17px;
525 
}
526 
 
527 
.slider.round:before {
528 
  border-radius: 50%;
529 
}
530 
 
531 
.pagebreak { page-break-after: always; }