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}