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