1body{ 2 background-image: none; 3 background-color: __background__; 4 margin: 0px; 5 padding: 0px; 6 font-family: Tahoma, 'Apple SD Gothic Neo', serif; 7 height: 100%; /* fix height to 100% for IE */ 8 max-height: 100%; /* fix height for other browsers */ 9} 10 11 12/* enlarge header elements */ 13.bodyback1, .websiteheader, .logohere { height: 49px; } .bodyback2 { top: 49px; } /* make values the same */ 14.bodyback2, .photoshopbrushes { height: 62px; } 15/* widen columns */ 16.leftcol, .rightcol { width: auto; } /* change to __% width */ 17/*.rightcol { display: none !important; }*/ /* hide right column */ 18/* _____________ */ 19 20.container { 21 width: __site_width__ ; 22 margin-left: auto; 23 margin-right: auto; 24} 25 26 27 28 29.bodyback1 { z-index: -1; position: absolute; } 30.bodyback2 { z-index: -1; position: absolute; 31 width: 100%; 32 background-image: url('images/backforbrushonwards.gif'); 33} 34 35.websiteheader, .bodyback1{ 36 background-image: url('images/headerback.png'); 37 width: 100%; 38 background-size: cover; /* stretch to fit */ 39} 40 41.logohere { 42 margin-left: 80px; 43 background-color: rgb(232,237,244); 44 display: inline-block; 45 box-sizing: border-box; 46 /*margin-top: 8px;*/ 47 height: 80% !important; 48 box-shadow: 10px 10px 0px 0px rgba(197,197,197,1); 49} 50 51.padding1 { padding: 8px; } 52 53.logohere:hover{ 54 background-color: #99ccff; 55 /*cursor: pointer;*/ 56} 57 58.logohere a { height: 100%; display: block; } 59 60.photoshopbrushes{ 61 background-image: url('images/photoshopbrushes.jpg'); 62 width: 100%; 63 background-size: cover; /* stretch to fit */ 64} 65 66.bordertop, .borderbottom, .border15 { width: 100%; height: 5px; clear: both;} 67.bordertop { background-image: url('images/menu-top1.png'); } 68.borderbottom { background-image: url('images/menu-bottom.png'); } 69.border15 { background-image: url('images/horizontal-divider-2.jpg'); } 70 71.row{ 72 /* ie inline-block: fix 73 http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ 74 http://www.quirksmode.org/css/display.html 75 */ 76 float: left; 77/* padding-left: 8px; 78 padding-right: 8px;*/ 79 padding-top: 0px; 80 font-size: 14px; 81 border: solid #000000 0px; 82 vertical-align: middle; 83 clear: both; 84 display: block; 85 width: 100%; 86} 87 88.leftcol { 89 background-image: url('images/columndivider.jpg'), url('images/horizontal-divider-1.png'), url('images/sidebar-edgeback-left2.gif'), url('images/sidebar-headerback.jpg') ; 90 background-position: right, bottom, left, top; 91 background-repeat: repeat-y, repeat-x, repeat-y, repeat-x; 92 min-height: 150px; 93 padding-top: 1em !important; 94 padding-left: 8px !important; 95 padding-right: 3px !important; 96 box-sizing: border-box; 97} 98 99.rightcol{ 100 background-image: url('images/columndivider.jpg'), url('images/horizontal-divider-1.png'), url('images/sidebar-edgeback-right.gif'), url('images/sidebar-headerback.jpg') ; 101 background-position: left, bottom, right, top; 102 background-repeat: repeat-y, repeat-x, repeat-y, repeat-x; 103 min-height: 150px; 104 padding-top: 1em !important; 105 padding-right: 8px !important; 106 padding-left: 3px !important; 107 box-sizing: border-box; 108} 109 110.midcol{ background-color: white; min-width: 498px; } 111 112.footer, .footerxgradient { margin-bottom: 24px; } 113 114.footer{ 115 background-image: url('images/columndivider.jpg'), url('images/columndivider.jpg'), url('images/horizontal-divider-1.png'); 116 background-position: left, right, bottom; 117 background-repeat: repeat-y, repeat-y, repeat-x; 118 119 min-height: 190px; 120 height: auto; /* allows .footergradient to work */ 121 width: 100%; 122 padding-bottom: 4px; /* shows the border at the bottom */ 123} 124 125.footergradient{ 126 background-color: rgb(251,251,251); 127 background-image: linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(204,204,204,1) 100%); 128 /*margin: 20px;*/ 129 /*position: relative; top: 3px;*/ 130 margin-left: 3px; 131 margin-right: 3px; 132 box-sizing: border-box; 133 134 height: ~"calc(100% - 4px)"; 135 display: block; 136 137} 138 139.footercontent { 140 141 margin-left: auto; 142 margin-right: auto; 143 background-color: #e4E5E8; 144 min-height: 150px; 145 width: 90%; 146display: block; 147padding: 1em; 148box-sizing: border-box; 149border: 1px dotted __border__ ; 150 151position: relative; bottom: 12px; /* margin-bottom doesn't work */ 152margin-top: 24px; 153padding: 1em; 154} 155 156.clear { clear: both; } 157 158p { padding: 0px 5px; } 159 160.pageheader{ width: 100%; min-height: 53px; 161 162 /* pshop can be changed to 4h or 5h to look worse */ 163 background-image: 164 url('images/contentheaderback-left.jpg') 165 ,url('images/contentheaderback-loop.png') 166 ,url('images/contentheaderback-left-under-pshop.png') 167 ,url('images/contentheaderback-loop-under-pshop.png') 168 ; 169 background-position: top left, top, left, auto; 170 background-repeat: no-repeat, repeat-x, repeat-y, repeat; 171 172color: #808080; font-size: 32px; 173padding-left: 1em; padding-top: 0.15em; 174line-height: normal !important; 175 176} 177 178 179.column{ float: left; padding: 0px; vertical-align: top; overflow: hidden; text-align: left; 180 border: 0px solid black; min-width: 100px; /*clear: both;*/ } 181 182.menuoption, .menu_divide, .topmenu li { height: 31px; } 183 184.menuhere { background-color: #e5e5e5; height: 40px; } 185.menuhere img { display: table; } 186.menuhere a:link, .menuhere a:visited, .logohere a:link, .logohere a:visited { /*color: black;*/ text-decoration: none; } 187 188.menu_divide { display: inline-block; 189 float:left; clear: none; /*remove spacing inbetween divs*/ 190 background-image: url('images/menu-divider1.png') !important; 191background-repeat: repeat-x !important; 192 width: 9px; 193 padding: 0px !important; 194} 195 196.menu_starter, ul::before { 197 /*display: none !important;*/ /* hide the menu border at left and right */ 198 /*display: inline-block; */ 199 /*content: " ";*/ 200 /*remove spacing inbetween divs*/ 201 background-image: url('images/menu-starter.png') !important; 202background-repeat: repeat-x !important; 203 width: 9px; 204 border: 1px solid red; 205 padding: 0px !important; 206} 207 208 209/* 210tr { padding: 0px; margin: 0px; 211table {border-spacing: 0px; border-collapse: collapse;} 212td { vertical-align: middle } 213td img { display: block; } 214*/ 215 216ul.topmenu { margin: 0px; padding: 0px; } 217.menuoption, .topmenu li { display: inline; 218vertical-align: middle; text-align: center; 219/*display: inline-block;*/ 220line-height: 1.85em; 221float:left; 222clear: none; /*remove spacing inbetween divs*/ 223border:0px solid #000000; 224color: #000080; 225font-size: 1em; 226 /*padding: 0px 9px; */ 227 228background-image: url('images/menu-offright.png'), url('images/menu-offback.png'), url('images/menu-offleft.png'); 229 background-position: right center, center center, left center; 230 background-repeat: repeat-y, repeat, repeat-y; 231 padding: 0px 12px; 232 233 234} 235 236.menuoption:hover, .topmenu li:hover{ 237 display: inline-block; 238 /*display: table-cell;*/ 239 font-size: 1em; 240 line-height: 1.85em; 241 color: #0066cc; 242 243 background-image: url('images/menu-onright.png'), url('images/menu-onback.png'), url('images/menu-onleft.png'); 244 background-position: right center, center center, left top; 245 background-repeat: repeat-y, repeat, repeat-y; 246 247 cursor: pointer; 248} 249 250.topmenu li a:hover { color: #0066cc; } 251 252 .makehigh{ display: table; } 253 .makehigh .column { display: table-cell; float: none; } 254 /* all columns same height */ 255 /* https://www.w3schools.com/howto/howto_css_equal_height.asp */ 256 257.main, p { 258font-size: 1em; 259line-height: 1.3em; 260letter-spacing: 1px; 261text-align: left; 262word-spacing: normal; 263text-decoration: none; 264color: #08080; 265} 266 267.midcol li, .midcol dd, { margin: 0px 0px 0px 1.5em; } 268 269.menuoption .main, .active, .active a:link, .active a:visited{ 270 color: __link__; 271 background-color: #ffffff; 272 background-image: url('images/menu-onflip.png') 273} 274 275a:link, a:visited{ 276 color: __link__; 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: 3px ridge #666666; 302} 303 304 305/*Credits: Dynamic Drive CSS Library */ 306/*URL: http://www.dynamicdrive.com/style/ */ 307#ddblueblockmenu{ 308border: 0px solid black; 309border-bottom-width: 0; 310/*width: 185px;*/ 311font-size: 0.8em; 312} 313 314#ddblueblockmenu ul{ 315margin: 0; 316padding: 0px; 317list-style-type: none; 318} 319 320#ddblueblockmenu li a{ 321display: block; 322padding: 6px 0px; 323padding-left: 9px; 324/* width: 169px; */ /*185px minus all left/right paddings and margins*/ 325text-decoration: none; 326color: __link__; 327background-color: none; 328border-bottom: 0px solid #F1F1F1; 329border-left: 0px solid #C0C0C0; 330} 331 332 333 334#ddblueblockmenu li a:hover { 335background-image: url('images/menu-onback.png'); 336background-color: #F1F1F1; 337border-left-color: #484848; 338color: #0066cc; 339} 340 341#ddblueblockmenu li .active { 342background-color: #F1F1F1; 343border-left-color: #C0C0C0; 344cursor: default; 345} 346 347#ddblueblockmenu div.menutitle{ 348border-bottom: 3px solid #C0C0C0; 349padding: 1px 0; 350padding-left: 5px; 351/* background-color: #3c3c3c; */ padding-top: 12px; 352font-size: 1.15em; 353color: #808080; 354font-weight: bold; 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 #c0c0c0; 390 padding-left: 0px; 391} 392ul.footermenu li{ 393 list-style-type:none; 394 margin:0; 395 padding:0.5em 0; 396 border-bottom:1px solid #c0c0c0; 397} 398ul.footermenu .date{ 399 color:#666666; 400 padding:0 1.5em 0 0; 401} 402 403ul.footermenu .count{ 404 float:right; 405 color:#858585; 406} 407 408ul.footermenu a{ 409 color:#0c0c0c; 410 text-decoration:none; 411} 412ul.footermenu a:hover, ul.footermenu a:hover .date{ 413 color:#0066cc; 414} 415 416 417ul.footermenu ul{ 418 margin:0; 419} 420ul.footermenu ul li{ 421 border:none; 422 margin-left:2em; 423 list-style-type:square; 424} 425