1@background: @ini_background; /* was #b0b0b0 */
2@contentblock: @ini_background_alt; /* was #b8b8b8 */
3@menubackground: @ini_menuback1; /* was #454545 */
4@menubackground2: @ini_menuback2; /* was #a9a9a9 then #484848 beforehand */
5@menuactivebackground2: #ff9933; /* was #484848 */
6@hamburgercolour: #222222;
7@textcolour: @ini_text; /* was #242424 */
8@breadcrumbrootback: @ini_breadcrumbs_background; /* was #cccccc; */
9@noticebackground: #c2c2c2;
10/* main colours */
11
12@sidebargradientleft: @ini_sidebargradientcolour_left; /* was #a7a7a7 */
13@sidebargradientright: @ini_sidebargradientcolour_right; /* was #b3b3b3 */
14/* sidebar gradient */
15
16@highlightcolour: #ff9933;
17@hyperlinkcolour: @ini_link; /* was #663300; */
18@noticeborderandtextANDtableheader: #3c3c3c;
19/* accent colours */
20
21@formbackground: #c0c0c0;
22@formtextcolour: #404040;
23@formbordercolour: @ini_border; /* was #ffffff;*/
24/* forms */
25
26@basketbuttonbackground: #666666;
27@totalsbackground: #808080;
28@totalstextcolour: #d9d9d9;
29/* basket */
30
31@breadcrumbcolouraction: @ini_breadcrumbs_steps_darken_or_lighten; /* was lighten */
32@headerfooterbackground: @ini_header_footer_background_light_or_dark; /* was light */
33@headerfooterbackgroundaltname: @ini_header_footer_background_white_or_black; /* was white */
34/* actions */
35
36// for images, replace _white with something else
37
38.notice{ background-color: @noticebackground; .allnotices; }
39.rednotice{ background-color: #DD9898; .allnotices; }
40.ambernotice{ background-color: #DDC498; .allnotices; }
41.greennotice{ background-color: #98DD98; .allnotices; }
42
43/*html, body { height: 100%; }*/
44body{ margin: 0px; padding: 0px;
45    font-family: Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
46    color: @textcolour; background-color: @background;
47}
48img { border: 0px; }
49.containerblocks{ height: 100%; width: 100%;}
50
51a:link, a:active, a:visited { color: @hyperlinkcolour; text-decoration: none; }
52a:hover { color: @hyperlinkcolour; text-decoration: underline; }
53
54.headerbar{
55width: 100%; max-width: 100%;
56height: 87px;
57background-image: url('images/headerbar_@{headerfooterbackgroundaltname}.png');
58}
59
60.sitename{
61  padding-top: 1em; padding-left: 1em;
62  display: inline-block; vertical-align: middle; height: 100%;
63  font-size: 1.85em; font-weight: normal;
64}
65
66.middlebar{
67width: 100%; max-width: 100%;
68display: flex; /* flex only works for 100% layouts */
69min-height: 82%;
70/*overflow: auto;*/
71/* background-color: @highlightcolour; */
72}
73
74.footerbar{
75clear: both;
76width: 100%; max-width: 100%;
77min-height: 42px;
78background-image: url('images/footerbar_@{headerfooterbackgroundaltname}.png');
79/* position: absolute; bottom: 0px; */
80
81padding: 1em 1.15em; box-sizing: border-box;
82}
83
84/* ryan fait sticky footer
85    https://gist.github.com/XtofK/5317209
86    https://codepen.io/griffininsight/pen/OMexrW
87    */
88    html, body { height: 100%; }
89
90        /* make the 2 columns of .wrapper expand to fill it */
91        .wrapper { height: 100%; }
92
93    .wrapper{
94      min-height: 100%; /* 2011 rule */
95      margin: 0 auto -42px;
96      /* min-height: calc(100% - 42px); /* scrapped rule */
97    /* the bottom margin is the negative value
98    of the footer's height */
99    }
100
101    .footerbar, .push {
102      border: 0px solid #ff00ff;
103      /* height: 42px; /* old code */
104      min-height: 42px /* new */
105      /* '.push' must be the
106      same height as 'footer' */
107    }
108    /* ----------- end ----------- */
109
110.menublock{
111width: @ini_sidebar_width; min-height: 100%;
112/*background-image: url('images/menublock_black.png');*/
113background-image: linear-gradient(90deg, @sidebargradientleft 0%, @sidebargradientright 100%);
114background-size: 20px;
115background-repeat: repeat-y;
116background-color: @sidebargradientleft;
117background-position: right;
118float: left;
119/* position: relative; right: 0px; */
120}
121
122.clear {clear: both;}
123
124.allcontentblocks{ padding: 12px; float: left; background-color: @background; }
125@media screen and (max-width: 1149px) { .contentblock { .allcontentblocks; width: 60%; } }
126@media screen and (min-width: 1150px) { .contentblock { .allcontentblocks; width: 70%; } }
127@media screen and (min-width: 1250px) { .contentblock { .allcontentblocks; width: 80%;} }
128
129.thumbshere { position: relative; left: 16px; margin-right: 76px; letter-spacing: 0.01em; line-height: 1.3em;}
130.breadcrumbshere { position: relative; bottom: 8px; right: 12px; }
131.menuhere { position: relative; /*top: 16px;*/ left: 12px; padding: 16px 0px; }
132
133.thumblisting{
134  float: left;
135  background-color: @contentblock;
136  padding: 16px 8px 8px 8px;
137  display: inline-block;
138  margin: 12px;
139  text-align: center;
140  color: @textcolour;
141  min-width: 240px; min-height: 248px;
142}
143
144.thumblisting img { margin-bottom: 8px; max-width: 200px; max-height: 200px;}
145
146.basket{
147  padding: 8px;
148  background-color: @basketbuttonbackground;
149  width: 200px;
150  margin-left: auto; margin-right: auto;
151  margin-top: 32px;
152  color: @textcolour;
153}
154
155.basket:hover{ background-color: @highlightcolour; cursor: pointer; }
156
157.nobasket{
158  padding: 8px;
159  border-top: 3px solid @basketbuttonbackground;
160  width: 200px;
161  margin-left: auto; margin-right: auto;
162  margin-top: 32px;
163  color: @textcolour;
164}
165
166a.nostyle:link, a.nostyle:active, a.nostyle:visited { color: @textcolour !important; text-decoration: none; }
167a.nostyle:hover { color: @textcolour !important; text-decoration: underline; }
168
169.allnotices{
170  text-align: center;
171  /*color: @noticeborderandtextANDtableheader;*/
172  color: @textcolour;
173  font-weight: bold;
174  width: 97%;
175  padding: 8px;
176  border-top: solid @noticeborderandtextANDtableheader 8px;
177  margin-top: 32px;
178  clear: both;
179}
180
181.allheadlines{
182  font-family: FrugalSansRegular, Verdana, Georgia;
183  /* background-color: #fff; */
184  /* color: #A4341D; */
185  font-style: italic;
186  text-decoration: none;
187  word-spacing: normal;
188  text-align: left;
189  letter-spacing: 0;
190  line-height: 1.2em;
191}
192
193font.headline{ font-size: 2.5em; .allheadlines; }
194h1, font.shoulderline{ font-size: 1.8em; .allheadlines; }
195
196div.statcol{
197    /* ie inline-block: fix
198    http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
199    http://www.quirksmode.org/css/display.html
200    */
201    float: left;
202    padding-left: 8px;
203    padding-right: 8px;
204    padding-top: 8px;
205    font-size: 14px;
206    border: solid #000000 0px;
207    vertical-align: middle;
208}
209
210div.statrow{
211    /* ie inline-block: fix
212    http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
213    http://www.quirksmode.org/css/display.html
214    */
215    display: block;
216    padding-left: 8px;
217    padding-right: 8px;
218    padding-top: 8px;
219    font-size: 14px;
220    border: solid #000000 0px;
221
222    vertical-align: middle;
223    min-width: 100px;
224
225    clear: both;
226}
227
228/* ----------------- forms -----------------  */
229
230.allbuttons{
231    font-family: Verdana, Arial, Helvetica, sans-serif;
232    background-color: @formbackground;
233    color: @formtextcolour;
234    margin-right: 6px;
235    border: 3px ridge @formbordercolour;
236}
237
238.bigbutton { font-size: 24px; .allbuttons; }
239.mediumbutton { font-size: 16px; .allbuttons; }
240.minibutton { font-size: 12px; .allbuttons; }
241
242.alltexts, button{
243    font-family: Verdana, Arial, Helvetica, sans-serif;
244    margin-right: 6px;
245    background-color: @formbackground;
246    border: 1px solid @formtextcolour;
247    color: @formtextcolour;
248}
249
250.headerbar span, .headerbar p { margin: 0px 0px; }
251p { margin: 0.85em 0px; }
252
253.bigtext { width: 250px; font-size: 24px; .alltexts; }
254.mediumtext { font-size: 16px; .alltexts; }
255.minitext { font-size: 12px; .alltexts; }
256
257.mediumblock {
258    .alltexts; .mediumtext;
259    width: 75px; color: @formbordercolour;
260    margin-left: auto; margin-right: auto;
261}
262
263.editable { .mediumtext }
264
265select, input, textarea { .alltexts; .mediumtext; }
266button{ .allbuttons; .mediumbutton; }
267
268/* ----------------- tables -----------------  */
269th {
270  padding: 8px;
271  background-color: @noticeborderandtextANDtableheader;
272  margin: 8px;
273  text-align: left;
274}
275
276.totals{
277    background-color: @totalsbackground;
278    color: @totalstextcolour;
279    font-weight: bold;
280}
281
282td {
283  padding: 8px;
284  margin: 8px;
285  text-align: left;
286  vertical-align: middle;
287}
288
289/***********
290    Breadcrumbs
291    http://css-tricks.com/triangle-breadcrumbs/
292*/
293
294.breadcrumb {
295  list-style: none;
296  overflow: hidden;
297  font-size: 0.8em;
298}
299.breadcrumb li {
300  float: left;
301}
302.breadcrumb li a {
303  color: @textcolour;
304  text-decoration: none;
305  padding: 10px 0 10px 45px;
306  /*background: #323232; */                   /* fallback color */
307  background-color: @breadcrumbrootback;
308  position: relative;
309  display: block;
310  float: left;
311}
312.breadcrumb li a:after {
313  content: " ";
314  display: block;
315  width: 0;
316  height: 0;
317  border-top: 50px solid transparent;
318    /* Go big on the size, and let overflow hide */
319  border-bottom: 50px solid transparent;
320  border-left: 30px solid @breadcrumbrootback;
321  position: absolute;
322  top: 50%;
323  margin-top: -50px;
324  left: 100%;
325  z-index: 2;
326}
327.breadcrumb li a:before {
328  content: " ";
329  display: block;
330  width: 0;
331  height: 0;
332  border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
333  border-bottom: 50px solid transparent;
334  background-color: @breadcrumbrootback;
335  position: absolute;
336  top: 50%;
337  margin-top: -50px;
338  margin-left: 1px;
339  left: 100%;
340  z-index: 1;
341}
342.breadcrumb li:first-child a {
343  padding-left: 10px;
344}
345
346// https://stackoverflow.com/q/66320678/337306
347/*
348.breadcrumb when (@breadcrumbcolouraction = "darken") {
349  @darkerbread();
350}
351
352.breadcrumb when (@breadcrumbcolouraction = "lighten") {
353  @lighterbread();
354}
355*/
356
357.breadcrumb { .myLightQuery(lighten); } // match
358.breadcrumb { .myDarkQuery(darken); } // match
359
360.myLightQuery(@breadcrumbcolouraction) when (@breadcrumbcolouraction = lighten) {
361  // background-color: red;
362
363  bdi:nth-child(2) a       { background-color:  lighten(@breadcrumbrootback, 5%); }
364  bdi:nth-child(2) a:after { border-left-color:  lighten(@breadcrumbrootback, 5%); }
365  bdi:nth-child(3) a       { background-color: lighten(@breadcrumbrootback, 20%);  }
366  bdi:nth-child(3) a:after { border-left-color: lighten(@breadcrumbrootback, 20%); }
367  bdi:nth-child(4) a       { background-color:        lighten(@breadcrumbrootback, 30%); }
368  bdi:nth-child(4) a:after { border-left-color: lighten(@breadcrumbrootback, 30%); }
369  bdi:nth-child(5) a       { background-color:        lighten(@breadcrumbrootback, 40%); }
370  bdi:nth-child(5) a:after { border-left-color: lighten(@breadcrumbrootback, 40%); }
371}
372
373.myDarkQuery(@breadcrumbcolouraction) when (@breadcrumbcolouraction = darken) {
374  // background-color: red;
375  bdi:nth-child(2) a       { background-color:  darken(@breadcrumbrootback, 5%); }
376  bdi:nth-child(2) a:after { border-left-color:  darken(@breadcrumbrootback, 5%); }
377  bdi:nth-child(3) a       { background-color: darken(@breadcrumbrootback, 20%);  }
378  bdi:nth-child(3) a:after { border-left-color: darken(@breadcrumbrootback, 20%); }
379  bdi:nth-child(4) a       { background-color:        darken(@breadcrumbrootback, 30%); }
380  bdi:nth-child(4) a:after { border-left-color: darken(@breadcrumbrootback, 30%); }
381  bdi:nth-child(5) a       { background-color:        darken(@breadcrumbrootback, 40%); }
382  bdi:nth-child(5) a:after { border-left-color: darken(@breadcrumbrootback, 40%); }
383}
384
385
386.breadcrumb li:last-child a {
387  /* background: transparent !important; */
388  /* text-decoration: underline; */
389  /* color: black; */
390  pointer-events: none;
391  cursor: default;
392}
393
394.breadcrumb li:last-child a:after {
395   /* border: transparent !important;  */
396}
397.breadcrumb li a:hover { background-color: @highlightcolour; }
398.breadcrumb li a:hover:after { border-left-color: @highlightcolour !important; }
399
400/*Credits: Dynamic Drive CSS Library */
401/*URL: http://www.dynamicdrive.com/style/ */
402#ddblueblockmenu{
403border: 0px solid black;
404border-bottom-width: 0;
405width: 185px;
406font-size: 0.8em;
407}
408
409#ddblueblockmenu ul{
410margin: 0;
411padding: 0px;
412list-style-type: none;
413}
414
415#ddblueblockmenu li a{
416display: block;
417padding: 6px 0px;
418padding-left: 9px;
419width: 169px; /*185px minus all left/right paddings and margins*/
420text-decoration: none;
421color: @textcolour;
422xbackground-color: @basketbuttonbackground;
423border-bottom: 0px solid @background;
424border-left: 0px solid @menubackground;
425}
426
427* html #ddblueblockmenu li a{ /*IE only */
428width: 187px; /*IE 5*/
429width: 169px; /*185px minus all left/right paddings and margins*/
430}
431
432#ddblueblockmenu li a:hover {
433background-color: @highlightcolour;
434border-left-color: @highlightcolour;
435}
436
437#ddblueblockmenu li .active {
438background-color: @highlightcolour;
439border-left-color: @highlightcolour;
440cursor: default;
441}
442
443#ddblueblockmenu div.menutitle{
444color: @textcolour;
445border-bottom: 3px solid @background;
446padding: 1px 0;
447padding-left: 5px;
448/* background-color: #3c3c3c; */ padding-top: 12px;
449font: bold 90%;
450}
451
452//IE8 hacks
453#IEroot .breadcrumbshere { padding-top: 24px; margin-left: 24px;}
454#IEroot .clear { clear: none;}
455.IErightFix { width: 70%; position: absolute; top: 0px; left: 278px; }
456#IEroot .IErightFix { width: 60%; left: 478px; }
457
458
459/* ----------------- drawer -----------------  */
460
461.desktop { display: block; }
462
463.drawer-nav { background-color: @background !important; }
464
465.drawer-hamburger-icon::after,.drawer-hamburger-icon::before {
466  background-color: @hamburgercolour !important;
467}
468
469.drawer-open .drawer-hamburger-icon { background-color: transparent !important; }
470
471.drawer-menu-item:hover { color: @highlightcolour !important; }
472
473/* ----------------- listamatic menu -----------------  */
474#navcontainer ul
475{
476padding-bottom: 6px;
477padding-top: 5px;
478padding-left: 100px;
479margin-top: 0;
480/* cancels gap caused by top padding in Opera 7.54 */
481margin-left: 0px;
482margin-right: 2.15em;
483/*background-color: #EE5D3F;*/
484color: white;
485max-width: 100%;
486font-family: Tahoma,Helvetica,sans-serif;
487line-height: 18px; /* fixes Firefox 0.9.3 */
488
489position: relative; top: 56px;
490
491}
492
493#navcontainer ul li
494{
495display: inline;
496padding-left: 0;
497padding-right: 0;
498padding-bottom: 5px;
499text-align: center;
500/* matches link padding except for left and right */
501padding-top: 5px;
502}
503
504#navcontainer ul li a
505{
506padding-left: 20px;
507padding-right: 20px;
508padding-bottom: 5px;
509padding-top: 5px;
510color: white;
511background-color: @menubackground2;
512text-decoration: none;
513}
514
515#navcontainer  #current
516{
517padding-left: 20px;
518padding-right: 20px;
519padding-bottom: 5px;
520padding-top: 5px;
521color: white;
522background-color: @menuactivebackground2;
523text-decoration: none;
524}
525
526#navcontainer ul li a:hover
527{
528background-color: @menuactivebackground2;
529color: white;
530}