1
2html, body, .innercontainerback, .innercontainer { min-height: 100%; }
3
4/*html, body, .innercontainerback, .innercontainer { min-height: 100vh; }*/
5.autoheight { height: auto; }
6/* both do the same thing well */
7
8.innercontainer { margin-left: auto; margin-right: auto;  }
9.innercontainerback, .innercontainer { width: @ini_site_width; }
10	.innercontainerback, .leftbackbar { left: 50%;  margin-left: calc(-@ini_site_width / 2);   }
11	.rightbackbar { right: 50%; margin-right: calc(-@ini_site_width / 2); }
12	/* make this half the width of the above, in minus numbers */
13/* choose the width of the inner container */
14
15/*.leftbackbar, .rightbackbar { margin-top: 6px; box-sizing: border-box; overflow: hidden; }*/
16
17.leftbackbar{
18	width: 84px; min-height: 100%;
19	background-image: url('images/@{ini_imagesubfolder}/leftback.png');
20	background-position: left;
21	background-repeat: repeat-y;
22	/*background-color: magenta;*/
23	opacity: 0.36;
24
25	z-index: 1; position: absolute;
26}
27
28
29.rightbackbar{
30	width: 84px; min-height: 100%;
31	background-image: url('images/@{ini_imagesubfolder}/rightback.png');
32	background-position: left;
33	background-repeat: repeat-y;
34	/*background-color: magenta;*/
35	opacity: 0.36;
36
37	z-index: 1; position: absolute;
38}
39
40.topmenu, .makehigh { z-index: 2; }
41
42body {
43	margin: 0px;
44	padding: 0px;
45	font-family: Tahoma, 'Apple SD Gothic Neo', serif;
46	background-image: url('images/backgrounds/asfalt-@{ini_backgroundtone}.png');
47	/*background-image: url('images/floralback-dark.jpg');*/
48	background-color: __background__;
49	color: __textcolour__;
50}
51
52.outercontainer {
53	width: 100%;
54 	position: relative;
55}
56
57/* what does this css selector mean?
58	find out here https://stackoverflow.com/a/13287975/337306 */
59.innercontainer:first-child, :not(.innercontainer) + .innercontainer {
60	border-top: 3px ridge __background__;
61	/*border-top: 9px solid #cc9999; */
62}
63
64.innercontainer:last-child {
65	border-bottom: 3px ridge __background__;
66	/*border-bottom: 9px solid #cc9999; */
67}
68
69.innercontainer {
70	border-left: 3px ridge __background__; border-right: 3px ridge __background__;
71	box-sizing: border-box;
72	background-color: __containerback__; /* #e7e7e7 */
73
74}
75
76.graphicalend {
77	width: 100%;
78	background-image: url('images/@{ini_imagesubfolder}/headerback-crop1.png');
79	/*z-index: 0; position: absolute; opacity: 1;*/
80	height: 37px;
81	background-size: cover;
82
83}
84/* .graphicalend { border-bottom: 3px ridge __background__; }*/
85
86.pushdown { height: 1em; width: 1px; }
87
88/*.magenta { background-color: magenta; }
89.orange { background-color: orange; }
90.lightgreyback { background-color: #fafafa; }
91*/
92.sidebarback {
93	background-image: url('images/@{ini_imagesubfolder}/sidebar-2-left.png'), url('images/@{ini_imagesubfolder}/sidebar-1-right.png');
94	/* sidebar 1 and sidebar 2 png/psd have different background colours */
95	/* sidebar 1 ---> background is white
96	/* sidebar 2 ---> background is #f7f7f7; */ /**/
97	background-position: left, right, top;
98	background-repeat: repeat-y, repeat-y, repeat-x;
99	/*background-color: __background__;*/
100	background-color: __sidebarback__;
101}
102
103.footer{
104	background-image:  url('images/@{ini_imagesubfolder}/sidebar-2-left.png'), url('images/@{ini_imagesubfolder}/sidebar-2-right.png'), url('images/@{ini_imagesubfolder}/footergradient2.png');
105	background-position: left, right, top;
106	background-repeat: repeat-y, repeat-y, repeat-x;
107	background-color: __background__; /* #ececec */
108}
109
110.featureblock { background-color: __background_alt__; padding: 8px; }
111ul.toc { list-style-type: none; padding-left: 1em; }
112ul.toc:first-child { padding-left: 0px; margin-bottom: 0.15em; }
113.featureblock h1, .featureblock .h2, .featureblock h3 { margin: 0.05em 0px; }
114
115.headerpane h1, .websitetitle { font-size: 1.15em; display: inline; }
116h1, h2, h3, h4, h5, h6 { display: inline-block; color: __headercolour__; }
117
118.websitetitle, h1{
119	background-color: __background__;
120	padding: 0.35em;
121	color: __textcolour__;
122	/*border: 0px solid #f7f7f7;*//* __containerback__;*/
123	letter-spacing: 0.05em;
124}
125
126.websitetitle:hover, h1:hover{
127	background-image: url('images/@{ini_imagesubfolder}/topmenu-itemon.png');
128	background-size: cover;
129	background-color: __sidebarback__;
130	color: __hovercolour__;
131	cursor: pointer;
132}
133
134
135
136/*.nofloat { display: inline-table !important; float: none !important; }*/
137
138.flex { display: flex !important; }
139.sparewidth { flex-grow: 100; }
140/* make column fill spare remaining width of container
141		https://stackoverflow.com/a/40447261/337306 */
142
143		.makehigh{ display: table; }
144        .makehigh .column { display: table-cell; float: none; }
145        /* all columns same height */
146        /* https://www.w3schools.com/howto/howto_css_equal_height.asp */
147
148.column{ float: left; padding: 0px; vertical-align: top; overflow: hidden; text-align: left;
149 border: 0px solid black; min-width: 100px; /*clear: both;*/ }
150
151 .row{
152    /* ie inline-block: fix
153    http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
154    http://www.quirksmode.org/css/display.html
155    */
156    /*float: left;*/
157/*    padding-left: 8px;
158    padding-right: 8px;*/
159    padding-top: 0px;
160    border: solid #000000 0px;
161    vertical-align: middle;
162    clear: both;
163    display: block;
164    width: 100%;
165}
166
167
168.headerpane {
169	width: 100%;
170	background-image: url('images/@{ini_imagesubfolder}/headerback.png');
171	/*z-index: 0; position: absolute; opacity: 1;*/
172	height: 77px;
173	background-size: cover;
174
175}
176
177
178.innercontainerback {
179	/*margin-left: auto; margin-right: auto;*/
180	background-image: url('images/@{ini_imagesubfolder}/leftback.png'), url('images/@{ini_imagesubfolder}/rightback.png');
181	background-position: left, right;
182	background-repeat: repeat-y, repeat-y;
183	opacity: 0.18;
184	z-index: 1; position: absolute;
185
186 top: 0px;
187}
188
189.innercontainerback-left {
190	background-image: url('images/@{ini_imagesubfolder}/leftback.png');
191	background-position: left, right;
192	background-repeat: repeat-y, repeat-y;
193	opacity: 0.18;
194	z-index: 1; position: absolute;
195
196 top: 0px;
197}
198
199.innercontainer {
200	/* height: 100%; */
201	opacity: 1 !important;
202	position: relative; z-index: 0;
203	clear: both;
204}
205
206.padding1 {
207	padding-left: 90px; padding-right: 90px; box-sizing: border-box;
208	/*padding-top: 32px;*/
209	/*margin-top: 32px; */
210}
211
212.padding2 {
213	padding-top: 40px;
214	padding-left: 92px;
215}
216
217.padding3 { padding: 0.35em 1em; }
218.padding4 { padding: 0em 100px; }
219.padding5 { padding: 0.35em 2em; }
220.padding6 { padding-top: 1em; }
221
222// .w200 { width: 200px; }
223.w200 { width: @ini_sidebar_width; }
224
225/* ----- forms ----- */
226select {
227 font-family: Verdana, Arial, Helvetica, sans-serif;
228 font-size: 16px;
229 margin-right: 6px;
230 background-color: __formfieldback__;
231 border: 1px solid __formfieldborder__;
232 color: __formfieldtextcolour__;
233}
234
235input, input[type='text'], input[type='password'], textarea {
236 font-family: Verdana, Arial, Helvetica, sans-serif;
237 font-size: 16px;
238 margin-right: 6px;
239 background-color: __formfieldback__;
240 border: 1px solid __formfieldborder__;
241 color: __formfieldtextcolour__;
242}
243
244button, button[type='submit']{
245 font-family: Verdana, Arial, Helvetica, sans-serif;
246 font-size: 16px;
247 margin-right: 6px;
248 background-color: __formfieldback__;
249 border: 3px ridge __formfieldborder__;
250 color: __formfieldtextcolour__;
251}
252
253#navcontainer { min-width: 100px; }
254
255#navcontainer ul
256{
257margin-left: 0;
258padding-left: 0;
259list-style-type: none;
260margin: 0px;
261}
262
263#navcontainer li { width: 100%; }
264
265#navcontainer #navlist li:first-child a { border-top: 1px solid __border__; }
266
267#navcontainer a
268{
269display: block;
270padding: 16px;
271/*background-color: __sidebarmenuoptionback__;*/
272border-bottom: 1px solid __border__;
273}
274
275#navcontainer a:link, #navlist a:visited
276{
277color: __textcolour__;
278text-decoration: none;
279}
280
281#navcontainer a:hover
282{
283/*background-color: __topmenuback__;*/
284	/*background-image: url('images/@{ini_imagesubfolder}/topmenu-itemon.png');*/
285	background-size: cover;
286/*font-weight: bold;*/
287/*padding-left: 16px;*/
288color: __hovercolour__;
289width: 100%;
290}
291
292
293/* end ____________ */
294
295
296
297/* menus */
298
299
300.topmenu {
301	background-image: url('images/@{ini_imagesubfolder}/topmenuback-left.png'), url('images/@{ini_imagesubfolder}/topmenuback-right.png'), url('images/@{ini_imagesubfolder}/topmenuback-loop.png');
302	background-position: left, right, middle;
303	background-repeat: repeat-y, repeat-y, repeat;
304	background-size: contain;
305	background-color: __menuback__;
306
307
308	width: 100%;
309	height: 34px;
310}
311
312ul.topmenu { margin: 0px; padding: 0px; /*display: table;*/ }
313.menuoption, .topmenu li {
314	display: inline;
315vertical-align: middle; text-align: center;
316/*display: inline-block;*/
317line-height: 1.85em;
318float:left;
319clear: none; /*remove spacing inbetween divs*/
320border:0px solid #000000;
321font-size: 1em;
322padding: 0px 0.85em;
323height: 100%;
324/*margin: 0px 0.15em;*/
325
326color: __textcolour__;
327
328}
329
330li:hover, .topmenu .active{
331	display: inline-block;
332	/*display: table-cell;*/
333	font-size: 1em;
334	/*line-height: 1.85em;*/
335	color: __hovercolour__;
336
337	background-image: url('images/@{ini_imagesubfolder}/topmenu-itemon.png');
338	background-size: cover;
339	/*background-color: green;*/
340
341	cursor: pointer;
342}
343
344.topmenu a:link, .topmenu a:visited { color: __textcolour__; text-decoration: none; }
345.topmenu .active a:link, .topmenu .active a:visited { color: __hovercolour__; text-decoration: none; }
346a:link, a:visited { text-decoration: none; color: __link__; }
347a:hover { color: __hovercolour__; }
348
349/* _______________ */
350/* make the border at the top of the .innercontainer .headerpane look better */
351.zindex1 { z-index: 1 !important; }
352.movedown7 { position: relative; top: 7px; }
353.is100percentmovedown7 { min-height: calc(100% - 4px); top: 4px; }
354.fixheaderborder {
355	background-image: url('images/@{ini_imagesubfolder}/headerback.png');
356	background-color: __headerborder__;
357
358	position: relative;
359	width: 100%;
360	height: 4px;
361}
362	.padding6 { padding-top: 0.65em !important; }
363	/* must be smaller than original .padding6 */
364/* ____ end ____ */
365
366/* responsive design */
367@media screen and (max-width: 1000px) {
368  .innercontainer { width: 100% !important; }
369  .innercontainer, .leftbackbar { margin-left: 0px; left: unset; }
370  .innercontainer, .rightbackbar { margin-right: 0px; }
371  .rightbackbar { right: 0px; }
372  .outercontainer { padding-bottom: 32px; }
373
374}
375
376@media screen and (max-width: 850px) {
377	div.topmenu { background-image: none; background-color: __topmenuback__; }
378	.padding1 { padding-left: 0px; padding-right: 0px; }
379	.leftbackbar, .rightbackbar { display: none; }
380	.padding2 { padding-top: 32px; }
381	.topmenu { height: auto; min-height: 34px; }
382	ul.topmenu { display: table; }
383	/*.padding4 { padding: 0px 13px; }*/
384	.padding4 { padding: 0px 0px; }
385
386}
387
388@media screen and (max-width: 700px) {
389	/*div.topmenu { background-image: none; background-color: __topmenuback__; }*/
390	.padding2 { padding-left: 13px; }
391	ul.topmenu { display: table; padding-bottom: 0.85em;}
392	ul.topmenu li { margin-bottom: 0.85em; }
393	/*.topmenu { height: unset; }*/
394	.column { display: block !important; }
395	.w200 { width: 100%; box-sizing: border-box; }
396	#navcontainer li { display: block; }
397	#navcontainer a:hover { background-size: contain; }
398	.footer, .sidebarback { margin-top: 24px; }
399}
400