Upgrades
[cas.git] / src / cas / static / css / main.css
1 * {
2     box-sizing: border-box;
3 }
4
5 .enclose {
6     height: 450px;
7     background: url("../brackets.png") no-repeat 50% 0;
8     margin: 1em 0;
9     background-size: auto 450px;
10     display: flex;
11     flex-direction: column;
12 }
13
14 .enclosed {
15     max-width: 300px;
16     margin: auto;
17 }
18
19 a {
20     text-decoration: none;
21 }
22 a:hover {
23     text-decoration: underline;
24 }
25
26 .errorlist {
27     color: red;
28     margin: 0;
29     padding: 0;
30     list-style: none;
31 }
32
33
34 label, input, button, textarea {
35     display: block;
36     width: 100%;
37 }
38
39 .enclosed input {
40     font-size: 1.75em;
41     margin-bottom: .4em;
42     width: 100%;
43 }
44 .enclosed button {
45     font-size: 1.75em;
46     width: 100%;
47     margin-bottom: 0;
48 }
49 .enclosed p {
50     margin-bottom: 0;
51 }
52 h1 {
53     font-size: 1.75em;
54     margin: 0 0 16px;
55 }
56 html, body {
57     margin: 0;
58     padding: 0;
59 }
60 body {
61     background-color: #F7F7F7;
62     color: black;
63     font-family: Lato;
64 }
65
66 #header-wrap {
67     background: #191919;
68     color: #989898;
69 }
70 header {
71     max-width: 600px;
72     margin: auto;
73     padding: 1em 0;
74 }
75 header img {
76     margin: 0 20px;
77     vertical-align: middle;
78 }
79 footer, #content_push {
80     height: 10em;
81 }
82
83 #content {
84     max-width: 600px;
85     margin: auto;
86 }
87
88 #details {
89     margin: 1em 0;
90     padding: 0 2em;
91 }
92
93 #details form table th {
94         text-align: left;
95 }
96
97 #details form {
98         margin-bottom: 2em;
99 }
100
101 #details #messages {
102     background: white;
103     box-shadow: 0 0 10px black;
104     font-size: 1.75em;
105     padding: 20px;
106     margin-bottom: 20px;
107 }
108 #details #messages p {
109     margin: 0;
110     color: green;
111 }
112
113 .menu {
114     margin: 1em 0;
115     text-align: center;
116 }
117 .menu .active {
118     font-weight: bold;
119     color: black;
120 }
121 @media screen and (min-width: 620px) {
122     .menu {
123         float: left;
124         max-width: 20%;
125     }
126
127     #details {
128         float: right;
129         width: 80%;
130     }
131 }
132
133 .menu img {
134     box-shadow: 0 0 .2em black;
135     margin-bottom: 1em;
136 }
137
138 code.key {
139     white-space: nowrap;
140     width: 100%;
141     overflow: hidden;
142     text-overflow: ellipsis;
143     display: block;
144     color: #666;
145 }
146
147
148 .service-list {
149     display: flex;
150     gap: 10px;
151     flex-wrap: wrap;
152 }
153 a.service {
154     width: 130px;
155     height: 80px;
156     background: white;
157     box-shadow:  3px 3px 5px #aaa;
158     padding: 10px;
159     position: relative;
160     display: flex;
161     color: black;
162     align-items: center;
163     justify-content: center;
164 }
165 a.service:hover {
166     text-decoration: none;
167     background: orange;
168 }
169 .service-icon {
170     max-width: 100%;
171     max-height: 100%;
172 }