tanks

style.css

  1/**** document ****/
  2
  3html {
  4    background: #222 url(grunge.png) repeat-x;
  5}
  6
  7body {
  8    font-family: sans-serif;
  9    color: #fff;
 10    padding: 10px;
 11}
 12
 13/**** heading ****/
 14
 15h1:first-child {
 16    text-transform: lowercase;
 17    font-size: 1.6em;
 18    color: #2a2;
 19    border-bottom: #2a2 solid 2px;
 20}
 21
 22/*** left side bar ***/
 23
 24nav {
 25  position: absolute;
 26  background: #222;
 27  opacity: 0.9;
 28  top: 80px;
 29  left: 0px;
 30  padding: 0;
 31}
 32
 33nav h2 {
 34  font-size: 100%;
 35  border-bottom: 2px solid #444;
 36}
 37
 38nav ul {
 39  list-style: none;
 40  padding: 0;
 41  margin: 0;
 42}
 43
 44nav li a {
 45  display: block;
 46  height: 25px;
 47  width: 90px;
 48  padding: 5px;
 49  margin: 5px;
 50  background: inherit;
 51  border-right: 4px solid #444;
 52  color: #999;
 53  text-transform: lowercase;
 54  font-size: 0.9em;
 55}
 56
 57nav li a:hover {
 58  color: #f4f4f4;
 59  background: #333;
 60  border-right: 4px solid #2a2;
 61}
 62
 63nav li .active {
 64  color: #999;
 65  background: #333;
 66  border-right: 4px solid #444;
 67}
 68
 69/**** designer ****/
 70#upload fieldset {
 71    display: flex;
 72    flex-wrap: wrap;
 73    gap: 2em;
 74    align-items: flex-start;
 75}
 76
 77#upload [name="program"] {
 78    min-width: 25em;
 79    min-height: 15em;
 80}
 81
 82#upload fieldset fieldset {
 83    border-color: #666;
 84}
 85
 86#preview {
 87    background: #333;
 88    display: flex;
 89    justify-content: center;
 90}
 91
 92/**** body ****/
 93
 94a img {
 95    border: 0px;
 96}
 97
 98a {
 99    text-decoration: none;
100    color: #2a2;
101    font-weight: bold;
102}
103
104a:hover {
105    color: #fff;
106    background: #2a2;
107    font-weight: bold;
108}
109
110
111h1, h2, h3 {
112    background-color: #222a;
113    color: #999;
114    letter-spacing: -0.05em;
115    clear: both;
116}
117
118.readme {
119    color: #fff;
120    background-color: #555;
121    margin: 1em;
122}
123
124pre {
125    color: #fff;
126    background-color: #222;
127    border: solid #ccc 2px;
128    padding: 0.25em;
129}
130
131
132p {
133    line-height: 1.4em;
134    margin-bottom: 20px;
135    color: #f4f4f4;
136}
137
138hr {
139    border: 1px solid #444;
140}
141
142dt {
143    white-space: pre;
144    background-color: #333;
145    padding: 5px;
146    border: 2px solid green;
147    border-bottom: none;
148    font-weight: bold;
149}
150
151dd {
152    border: 2px solid green;
153    margin: 0px;
154    padding: 5px;
155    background-color: #282828;
156}
157
158
159/**** special cases ****/
160
161.wide {
162    max-width: inherit;
163}
164
165.figure {
166    margin: 0.5em 1em;
167    float: right;
168    font-size: small;
169    text-align: center;
170    caption-side: bottom;
171}
172
173.left {
174    float: left;
175}
176
177.scoreboard {
178    background: #222;
179}
180
181.scoreboard td {
182    height: 400px;
183}
184
185#battlefield {
186    border: 2px solid green;
187}
188
189table {
190    border-collapse: collapse;
191}
192table td {
193    padding: 0.4em 1em;
194}
195table tr:nth-child(even) {
196    background-color: #343;
197}
198
199.swatch {
200    color: #000000;
201}
202
203.ui-slider-tick-mark {
204    display: inline-block;
205    width: 2px;
206    height: 100%;
207    position: absolute;
208}