1::selection { background-color: #FF4B33; }
2
3body{
4	background-color: #D3D3D3;
5	color: #404040;
6	margin: 0px; padding: 0px;
7	font-family: Tahoma;
8	background-image: url('images/lighttheme/asfalt-dark.png');
9	/*background-image: url('images/lighttheme/asfalt-dark2.png');*/
10	/*background-image: url('images/lighttheme/stencilback.jpg');*/
11}
12
13.orange { background-color: orange; }
14.magenta { background-color: magenta; }
15.mt18 { margin-top: 18px; }
16.mt32 { margin-top: 32px; }
17
18.topbar{
19	width: 100%;
20	height: 12px;
21	background-color: white;
22}
23
24.topbar2 {
25	width: 100%;
26	height: 12px;
27	background-image: url('images/lighttheme/topbar2.png');
28}
29
30.container {
31	width: 1000px;
32	margin-left: auto;
33	margin-right: auto;
34}
35
36.header {
37	width: 100%;
38	height: 69px;
39	/* https://www.w3docs.com/snippets/css/how-to-use-multiple-background-images-with-css.html
40	   https://stackoverflow.com/q/64867539/337306
41 	*/
42	background-image: url('images/lighttheme/headerback.png');
43	background:
44    	linear-gradient(transparent,rgba(0,0,0,0.03)) 0 0/100% 16px,
45     	/*linear-gradient(#1ec5a6,#fff); */
46     	linear-gradient(#f5f5f5,#e6e6e6)
47 	;
48	padding: 12px; padding-left: 48px;
49	box-sizing: border-box;
50}
51
52
53.menubar	 {
54	width: 100%;
55	height: 54px;
56	background-image: url('images/lighttheme/menuback.png');
57	background-size: contain;
58	box-sizing: border-box;
59}
60
61.contentarea{
62	background-color: #1a1a1a;
63}
64
65.contentheader, .contentsubheader, .contenthere {
66	margin: 0px 1em;
67	margin-left: auto; margin-right: auto;
68	width: 97%;
69
70	box-sizing: border-box;
71}
72
73.padleft{
74	padding-left: 1em;
75}
76
77.padhere { padding: 12px; padding-top: 0px; }
78
79.contentheader{
80	/*height: 47px;*/
81	height: 38px;
82	background-image: url('images/lighttheme/content-headerback.png');
83	background-size: contain;
84	color: black;
85	padding-top: 8px;
86	padding-left: 1em;
87}
88
89
90.contentsubheader{
91	height: 42px;
92	background-image: url('images/lighttheme/content-subheaderback.png');
93	background-size: contain;
94	color: black;
95	padding-top: 12px;
96	padding-left: 1em;
97}
98
99.blockygradient{
100	/* https://www.w3docs.com/snippets/css/how-to-use-multiple-background-images-with-css.html
101	   https://stackoverflow.com/q/64867539/337306
102 	*/
103	background:
104     /*url('images/lighttheme/listingback-top2.png') repeat-x,*/
105     /* only for .listingback */
106
107 	 linear-gradient(transparent,rgba(0,0,0,0.03)) 0 0/100% 16px,
108     linear-gradient(#e9e9e9,white)
109    ;
110}
111
112.contenthere {
113	background-color: #e9e9e9;
114    /*min-height: 150px;*/
115    overflow: auto;
116}
117
118.header a:link, .header a:visited { color: #404040; text-decoration: none; }
119.header a:hover { color: #FF4B33; text-decoration: underline; }
120.contenthere a:link, .contenthere a:visited { color: #0066cc; }
121.listingback a:link, .listingback a:visited { text-decoration: none; }
122.contenthere a:hover, .listingback a:hover { color: #FF4B33; text-decoration: underline; }
123
124.listingback {
125	/*background-image: url('images/lighttheme/listingback-top2.png');*/
126	/*background-image: url('images/lighttheme/listingback-top2.png'), linear-gradient(180deg, rgba(0,0,0,1) 10%, rgba(23,23,23,1) 100%);*/
127	/*	background:
128		linear-gradient(transparent,rgba(0,0,0,0.03)) 0 0/100% 30px
129		,linear-gradient(180deg, rgba(0,0,0,1) 10%, rgba(43,43,43,1) 100%)
130
131 	;*/
132 	/* https://www.w3docs.com/snippets/css/how-to-use-multiple-background-images-with-css.html
133	   https://stackoverflow.com/q/64867539/337306
134 	*/
135
136 	background:
137     url('images/lighttheme/listingback-top2.png') repeat-x,
138 	 linear-gradient(transparent,rgba(0,0,0,0.03)) 0 0/100% 16px,
139     linear-gradient(#e9e9e9,white)
140    ;
141	/*background-image: url('images/lighttheme/listingback-top2.png'), url('images/lighttheme/listingback.png');*/
142	/*background-position: center top;*/
143	background-repeat: repeat-x, repeat;
144	/*background-size: auto, contain;*/
145	/*background-size: contain;*/
146	/*background-color: #3a3a3a;*/
147	min-height: 94px;
148	padding: 12px; box-sizing: border-box;
149	/*padding-top: 12px;*/
150	/*overflow: inherit;*/
151}
152
153.listingback img { max-height: 75px; }
154.listingback .row { margin-top: 3px; }
155.smaller { font-size: 0.85em; }
156.smaller2 { font-size: 0.85em; letter-spacing: 0.15em; }
157.listingback p { margin: 0px; padding: 4px; }
158.listingback .column { margin-right: 12px; }
159
160h1 { margin: 0px; }
161
162/* grids, rows and columns */
163
164.column{ float: left; padding: 0px; vertical-align: top; overflow: hidden; text-align: left;
165 border: 0px solid black; min-width: 100px; /*clear: both;*/ }
166
167 .row{
168    /* ie inline-block: fix
169    http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
170    http://www.quirksmode.org/css/display.html
171    */
172    /*float: left;*/
173/*    padding-left: 8px;
174    padding-right: 8px;*/
175    padding-top: 0px;
176    border: solid #000000 0px;
177    vertical-align: middle;
178    clear: both;
179    /*display: block;*/
180    display: table;
181    width: 100%;
182}
183
184
185
186.footercontent {
187
188	margin-left: auto;
189	margin-right: auto;
190	/*background-color: #e4E5E8;*/
191	/*min-height: 150px;*/
192	width: 90%;
193display: block;
194padding: 1em;
195box-sizing: border-box;
196/*border: 1px dotted #C0C0C0;*/
197
198position: relative; bottom: 12px; /* margin-bottom doesn't work */
199margin-top: 24px;
200padding: 1em;
201}
202
203.clear { clear: both; }
204.w25pc { width: 25%; }
205.w75pc { width: 75%; }
206.w200px { width: 200px; }
207.w80px { width: 80px; }
208.nofloat { display: inline-table !important; float: none !important; }
209
210.flex { display: flex !important; }
211.sparewidth { flex-grow: 100; }
212/* make column fill spare remaining width of container
213		https://stackoverflow.com/a/40447261/337306 */
214
215		.makehigh{ display: table; }
216        .makehigh .column { display: table-cell; float: none; }
217        /* all columns same height */
218        /* https://www.w3schools.com/howto/howto_css_equal_height.asp */
219
220/* _______ */
221
222/* menus */
223/*Credits: Dynamic Drive CSS Library */
224/*URL: http://www.dynamicdrive.com/style/ */
225.ddblueblockmenu{
226border: 0px solid black;
227border-bottom-width: 0;
228width: 100%;
229margin-top: 0.85em;
230/*font-size: 0.8em;*/
231}
232
233.ddblueblockmenu ul{
234margin: 0;
235padding: 0px;
236list-style-type: none;
237margin-bottom: 1.15em;
238}
239
240.ddblueblockmenu li a{
241display: block;
242padding: 6px 0px;
243padding-left: 9px;
244/*width: 169px; 185px minus all left/right paddings and margins*/
245text-decoration: none;
246color: #dcdcdc;
247/*background-color: #595959;*/
248border-bottom: 0px solid #4d4d4d;
249border-left: 0px solid #484848;
250}
251
252* html .ddblueblockmenu li a{ /*IE only */
253width: 187px; /*IE 5*/
254width: 169px; /*185px minus all left/right paddings and margins*/
255}
256
257.ddblueblockmenu li a:hover {
258background-color: #FF4B33;
259color: #0c0c0c;
260border-left-color: #484848;
261text-decoration: none;
262}
263
264.ddblueblockmenu li .active {
265background-color: #484848;
266border-left-color: #484848;
267cursor: default;
268}
269
270.ddblueblockmenu div.menutitle{
271color: #dcdcdc  ;
272border-bottom: 3px solid #4d4d4d;
273padding: 1px 0;
274padding-left: 5px;
275/* background-color: #3c3c3c; */ padding-top: 12px;
276font: bold 90%;
277}
278
279/* ----- forms ----- */
280select {
281 font-family: Verdana, Arial, Helvetica, sans-serif;
282 font-size: 16px;
283 margin-right: 6px;
284 background-color: #CCCCCC;
285 border: 1px solid #666666;
286}
287
288input, input[type='text'], input[type='password'], textarea {
289 font-family: Verdana, Arial, Helvetica, sans-serif;
290 font-size: 16px;
291 margin-right: 6px;
292 background-color: #CCCCCC;
293 border: 1px solid #666666;
294}
295
296button, button[type='submit']{
297 font-family: Verdana, Arial, Helvetica, sans-serif;
298 font-size: 16px;
299 margin-right: 6px;
300 background-color: #CCCCCC;
301 border: 1px dashed #666666;
302}
303
304
305/* main menu */
306
307#navcontainer{
308	padding: 22px;
309}
310
311ul#navlist
312{
313margin-left: 0;
314padding-left: 0;
315white-space: nowrap;
316margin: 0px;
317}
318
319#navlist li
320{
321display: inline;
322list-style-type: none;
323}
324
325#navlist a { padding: 3px 10px; }
326
327#navlist a:link, #navlist a:visited
328{
329color: #1c1c1c;
330background-color: #E3E3E3;
331background-image: url('images/lighttheme/menuoptionback.png');
332background-size: contain;
333text-decoration: none;
334/*border: 1px solid #1c1c1c;*/
335}
336
337#navlist a:hover
338{
339/*background-color: #3b3b3b;*/ /*color: #404040;*/
340background-color: #FF4B33; color: black;
341background-image: none;
342/*border: 1px solid #1c1c1c;*/
343text-decoration: none;
344}
345
346
347/* footer menu */
348
349.footercontent .block{
350  float:left;
351  width: 30%;
352  margin:0 0 0 5%;
353}
354.footercontent .twice-length{ width:65%; }
355.footercontent .thrice-length{ width:100%; }
356* html .footercontent .block{
357  margin:0 0 0 4%;
358}
359.footercontent .first, * html .footercontent .first{
360  clear:both;
361  margin:0;
362}
363.footercontent .block-separator{
364  clear:both;
365  height:2.5em;
366}
367
368.footercontent .block h2, .footercontent .block h3{
369  /*margin:0 0 2em 0;*/
370  margin: 0px;
371  font-weight: unset;
372}
373
374
375ul.footermenu{
376  list-style-type:none;
377  margin:1.5em 0 2em 0;
378  border-top:1px solid #c9c9c9;
379  padding-left: 0px;
380}
381ul.footermenu li{
382  list-style-type:none;
383  margin:0;
384
385  padding-left: 0.85em;
386  border-bottom:1px solid #c9c9c9;
387}
388ul.footermenu .date{
389  color:#666666;
390  padding:0 1.5em 0 0;
391}
392
393ul.footermenu .count{
394  float:right;
395  color:#858585;
396}
397
398ul.footermenu a{
399  color:#404040;
400  text-decoration:none;
401  padding:0.5em 0;
402  display: block;
403}
404
405ul.footermenu li:hover{
406	/*color:#000080;*/
407  	background-color: #FF4B33;
408}
409
410ul.footermenu a:hover, ul.footermenu a:hover .date{
411  color:#1c1c1c;
412  text-decoration: none;
413}
414
415
416ul.footermenu ul{
417  margin:0;
418}
419ul.footermenu ul li{
420  border:none;
421  margin-left:2em;
422  list-style-type:square;
423}
424
425/* responsive design*/
426
427@media screen and (max-width: 1000px) {
428	.container { width: 90%; }
429}
430
431
432/* Main default styling */
433input[type="checkbox"].hide, .menutoggle {
434  /*  left: -9999px;
435    opacity: 0;
436    position: absolute
437  */
438    display: none;
439}
440
441@media screen and (max-width: 850px) {
442	.container { width: 100%; /*padding: 12px;*/ box-sizing: border-box; margin: 0px; }
443	.menubar .container { padding: 0px; padding-top: 12px; }
444	/*.menubar { padding: 12px; }*/
445	.menubar { height: auto; padding-top: 0px; min-height: 74px; }
446
447
448}
449
450@media screen and (max-width: 700px) {
451
452	.column, .row { display: table; clear: both; }
453	.w25pc, .w75pc, .footercontent .block { width: 100%; }
454	.footercontent .block { float: none; margin: 0px; }
455	ul#navlist { display: table; }
456	#navlist li {     float: left; margin-bottom: 1.35em; margin-right: 1em;}
457	#navcontainer { margin-top: 21px; }
458	.contentheader { margin-top: 1.85em; }
459	.smaller2 { margin-bottom: 1.15em !important; display: block; }
460	.w200px, .w80px { width: auto; }
461	.flex { display: inline-block !important; }
462	.nofloatonmobile { float: none; display: unset; }
463	.w200pxruby { display: ruby; }
464
465/* toggle menu on mobile */
466/* https://uglyduck.ca/menu-toggle-css/ */
467/* https://stackoverflow.com/q/10782054/337306 */
468
469.menutoggle { display: inline-block; clear: both; }
470
471label {
472    border: 1px solid currentColor;
473    border-radius: 4px;
474    cursor: pointer;
475    padding: 10px;
476    float: left;
477    clear: both;
478    margin: 1em;
479}
480
481.sidebar, .hidesidebartext {
482    /*opacity: 0;
483    position: absolute;
484    z-index: -2;*/
485    display: none;
486}
487
488/* Show nav element when checkbox active */
489input[type="checkbox"].hide:checked ~ .sidebar,
490input[type="checkbox"].hide:checked ~ label .hidesidebartext {
491    /*opacity: 1; z-index: 1;*/
492    display: block;
493}
494
495/* https://stackoverflow.com/a/65331279/337306 */
496input[type="checkbox"].hide:checked ~ label .showsidebartext{
497	display: none;
498}
499
500input[type="checkbox"].hide:checked ~ .menutoggle {
501	background-color: #FF4B33;
502	color: #1c1c1c; /* hover colour */
503	font-weight: bold;
504}
505
506}