-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path,.css
More file actions
118 lines (83 loc) · 5.1 KB
/
,.css
File metadata and controls
118 lines (83 loc) · 5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
:root { font-size: 18px; line-height: 1.4; }
body { margin: 0; color: black; background: white; font-family: roboto, sans-serif; }
a:not(:hover) { text-decoration: none; }
table { border-collapse: collapse; }
td { padding: 0; }
a img { border: 0; }
header { overflow: hidden; border-bottom: solid 1px; margin: 0; font-weight: normal; text-align: center; }
h2, h3 { font-weight: normal; }
h2 { font-size: 32px; margin-bottom: .8rem; }
/*****/
/*@media screen { #outer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /*creates independant, easily measurable scrollview* / } }*/
/* push footer to bottom on screen and print */
html, body, #outer { height: 100%; }
#fillin { min-height: 100%; position: relative; }
#fillin>footer { position: absolute; left: 0; bottom: 0; width: 100%; }
#fillin>:nth-last-child(2) { padding-bottom: 3.3em; position: relative; }
#fillin>:nth-last-child(2)::after { content: ""; display: block; position: absolute; top: 100%; height: .6em; width: 1px; }
#fillin>footer { font-size: .9em; line-height: 2em; padding: .5em 0 1em; }
footer { text-align: center; }
@media ( max-width: 28em ) { footer a { margin: 0 .4em; } }
.the-width { margin: 0 auto; width: 64em; min-width: 70%; max-width: 94%; }
header:not(#bigHead) {
background-image: linear-gradient(hsl(205 57% 44% / .25), hsl(205 57% 44% / .25)), url(/,res/head-tc.jpg);
background-position: top center;
background-size: cover;
color: white;
box-shadow: 3vw 0 3vw -4vw hsl(205 57% 44%) inset, -2vw 4.5vw 3vw -4vw hsl(205 57% 44%) inset;
}
#bigHead {
text-align: left;
}
header h1 { font-size: 48px; margin: .25em; font-weight: normal; font-family: Quintessential; text-align: center; }
@media ( max-width: 700px ) { header h1 { font-size: 6.8vw; } }
#bigHead h1 { color: white; }
#bigHead-img { max-height: 95vh; max-width: 68vw; }
#bigHead-text { padding-left: 52%; font-size: 2.5vw; }
@media ( max-width: 876px ) {
#bigHead-img { max-width: 100%; max-height: 300vh; }
#bigHead-img-fadeRight { display: none; }
#bigHead-text { padding-left: 5%; font-size: 2em; padding-top: 24vw; background: linear-gradient(transparent, hsl(205 57% 44% / .9) 24vw, hsl(205 57% 44%)) }
}
input, select, textarea { margin:4px; font-family: inherit; padding: 2px; border: solid 1px #aaa; border-radius: 4px; font-size: inherit; }
label, label input { cursor: pointer; }
[readonly], [disabled] { background: hsla(120, 10%, 50%, .1); border-color: transparent; }
option[disabled] { background: white; color: #888; }
em { font-style: inherit; }
.aleft { text-align: left; }
.ib { display: inline-block; }
.italic { font-style: italic; }
.bold { font-weight: bold; }
small, .small { font-size: .85em; }
/* colors */
.logo>:nth-child(1), .red { color: hsl(345, 100%, 40%); }
a { color: hsl(208, 100%, 37%); }
.blue { color: #0123B4; }
.logo>:nth-child(3), a:active, .green { color: hsl(108, 82%, 37%); }
.green { color: hsl(108, 82%, 35%); }
.gray { color: #888; }
::selection { background: hsla(208, 100%, 50%, .3); }
::-moz-selection { background: hsla(208, 100%, 50%, .3); }
header { background: hsl(208, 100%, 85%); box-shadow: 0 1em 2em -1em hsl(208, 100%, 43%) inset; }
header { border-color: hsl(208, 100%, 43%, .4); }
button { background: hsl(108, 82%, 37%); background-image: linear-gradient(to bottom, hsl(108, 82%, 50%) 0%, hsla(108, 82%, 37%, 0) 50%, hsl(108, 82%, 20%) 100%); background-origin: border-box; }
button[data-state], button:active { background-image: none; }
button { margin: 0; border: .2em solid; border-color: rgba(255,255,255,.3) rgba(0,0,0,.2) rgba(0,0,0,.3) rgba(255,255,255,.2); padding: .1em .4em; font-family: inherit; font-size: inherit; color: white; cursor: pointer; font-weight: bold; border-radius: 1em; transition: all 500ms; }
button:hover { color: yellow; transition: all 300ms; }
button:active { color: #dd0; border-color: transparent; transition: all 200ms; }
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
button[data-state=hold] { color: #666; background: #ccc; border-color: transparent; cursor: default; }
button[data-state=thanks] { color: #080; background: #cea; border-color: transparent; cursor: default; transition: all 100ms; }
button[data-state=confirm] { color: #0079d4; background: #ace; border-color: #0079d4; cursor: default; }
button[data-state=whoops] { color: #800; background: #eca; border-color: transparent; cursor: default; }
button[disabled] { color: #666; background: #ccc; border-color: #ddd #bbb #bbb #ddd; cursor: default; }
.material-icons { text-decoration: none; user-select: none; font-size: 1.2em; position: relative; top: .2em; }
h2 .material-icons { float: left; margin-top: .1em; margin-right: .5em; font-size: 1em; top: 0; }
table.fancy { width: 100%; }
table.fancy { border-collapse: collapse; border-radius: 20px; overflow: hidden; }
table.fancy>thead { background: #FED8b1; }
table.fancy>tbody>tr { transition: background 300ms; }
table.fancy>tbody>tr:hover { transition: background 100ms; background: #cdf; }
table.fancy>*>tr>td { border-top: solid 1px #ccc; }
table.fancy>*>tr>th { font-weight: 500; text-align: inherit; }
table.fancy>*>tr>* { padding: .3em .3em; }