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