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