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}