html, body, .innercontainerback, .innercontainer { min-height: 100%; }

/*html, body, .innercontainerback, .innercontainer { min-height: 100vh; }*/
.autoheight { height: auto; }
/* both do the same thing well */

.innercontainer { margin-left: auto; margin-right: auto;  }
.innercontainerback, .innercontainer { width: @ini_site_width; }
	.innercontainerback, .leftbackbar { left: 50%;  margin-left: calc(-@ini_site_width / 2);   } 
	.rightbackbar { right: 50%; margin-right: calc(-@ini_site_width / 2); }
	/* make this half the width of the above, in minus numbers */
/* choose the width of the inner container */

/*.leftbackbar, .rightbackbar { margin-top: 6px; box-sizing: border-box; overflow: hidden; }*/

.leftbackbar{ 
	width: 84px; min-height: 100%;
	background-image: url('images/@{ini_imagesubfolder}/leftback.png');
	background-position: left;
	background-repeat: repeat-y;
	/*background-color: magenta;*/
	opacity: 0.36;

	z-index: 1; position: absolute;
}


.rightbackbar{ 
	width: 84px; min-height: 100%;
	background-image: url('images/@{ini_imagesubfolder}/rightback.png');
	background-position: left;
	background-repeat: repeat-y;
	/*background-color: magenta;*/
	opacity: 0.36;

	z-index: 1; position: absolute;
}

.topmenu, .makehigh { z-index: 2; }

body {
	margin: 0px;
	padding: 0px;
	font-family: Tahoma, 'Apple SD Gothic Neo', serif;
	background-image: url('images/backgrounds/asfalt-@{ini_backgroundtone}.png');
	/*background-image: url('images/floralback-dark.jpg');*/
	background-color: __background__;
	color: __textcolour__;
}

.outercontainer {
	width: 100%;
 	position: relative;
}

/* what does this css selector mean? 
	find out here https://stackoverflow.com/a/13287975/337306 */
.innercontainer:first-child, :not(.innercontainer) + .innercontainer { 
	border-top: 3px ridge __background__; 
	/*border-top: 9px solid #cc9999; */
}

.innercontainer:last-child { 
	border-bottom: 3px ridge __background__; 
	/*border-bottom: 9px solid #cc9999; */
}

.innercontainer { 
	border-left: 3px ridge __background__; border-right: 3px ridge __background__; 
	box-sizing: border-box; 
	background-color: __containerback__; /* #e7e7e7 */

}

.graphicalend {
	width: 100%;
	background-image: url('images/@{ini_imagesubfolder}/headerback-crop1.png');
	/*z-index: 0; position: absolute; opacity: 1;*/
	height: 37px;
	background-size: cover;
	
}
/* .graphicalend { border-bottom: 3px ridge __background__; }*/

.pushdown { height: 1em; width: 1px; }

/*.magenta { background-color: magenta; }
.orange { background-color: orange; }
.lightgreyback { background-color: #fafafa; }
*/
.sidebarback {
	background-image: url('images/@{ini_imagesubfolder}/sidebar-2-left.png'), url('images/@{ini_imagesubfolder}/sidebar-1-right.png'); 
	/* sidebar 1 and sidebar 2 png/psd have different background colours */
	/* sidebar 1 ---> background is white
	/* sidebar 2 ---> background is #f7f7f7; */ /**/
	background-position: left, right, top;
	background-repeat: repeat-y, repeat-y, repeat-x;
	/*background-color: __background__;*/
	background-color: __sidebarback__;
}

.footer{
	background-image:  url('images/@{ini_imagesubfolder}/sidebar-2-left.png'), url('images/@{ini_imagesubfolder}/sidebar-2-right.png'), url('images/@{ini_imagesubfolder}/footergradient2.png');
	background-position: left, right, top;
	background-repeat: repeat-y, repeat-y, repeat-x;
	background-color: __background__; /* #ececec */
}

.featureblock { background-color: __background_alt__; padding: 8px; }
ul.toc { list-style-type: none; padding-left: 1em; }
ul.toc:first-child { padding-left: 0px; margin-bottom: 0.15em; }
.featureblock h1, .featureblock .h2, .featureblock h3 { margin: 0.05em 0px; }

.headerpane h1, .websitetitle { font-size: 1.15em; display: inline; }
h1, h2, h3, h4, h5, h6 { display: inline-block; color: __headercolour__; }

.websitetitle, h1{
	background-color: __background__;
	padding: 0.35em;
	color: __textcolour__;
	/*border: 0px solid #f7f7f7;*//* __containerback__;*/
	letter-spacing: 0.05em;
}

.websitetitle:hover, h1:hover{
	background-image: url('images/@{ini_imagesubfolder}/topmenu-itemon.png');
	background-size: cover;
	background-color: __sidebarback__;
	color: __hovercolour__;
	cursor: pointer;
}



/*.nofloat { display: inline-table !important; float: none !important; }*/

.flex { display: flex !important; }
.sparewidth { flex-grow: 100; }
/* make column fill spare remaining width of container 
		https://stackoverflow.com/a/40447261/337306 */

		.makehigh{ display: table; }
        .makehigh .column { display: table-cell; float: none; }
        /* all columns same height */
        /* https://www.w3schools.com/howto/howto_css_equal_height.asp */

.column{ float: left; padding: 0px; vertical-align: top; overflow: hidden; text-align: left;
 border: 0px solid black; min-width: 100px; /*clear: both;*/ }

 .row{
    /* ie inline-block: fix
    http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
    http://www.quirksmode.org/css/display.html
    */
    /*float: left;*/
/*    padding-left: 8px;
    padding-right: 8px;*/
    padding-top: 0px;
    border: solid #000000 0px;
    vertical-align: middle;
    clear: both; 
    display: block;
    width: 100%;
}


.headerpane {
	width: 100%;
	background-image: url('images/@{ini_imagesubfolder}/headerback.png');
	/*z-index: 0; position: absolute; opacity: 1;*/
	height: 77px;
	background-size: cover;
	
}


.innercontainerback {
	/*margin-left: auto; margin-right: auto;*/
	background-image: url('images/@{ini_imagesubfolder}/leftback.png'), url('images/@{ini_imagesubfolder}/rightback.png');
	background-position: left, right;
	background-repeat: repeat-y, repeat-y;
	opacity: 0.18;
	z-index: 1; position: absolute;
   
 top: 0px;
}

.innercontainerback-left {
	background-image: url('images/@{ini_imagesubfolder}/leftback.png');
	background-position: left, right;
	background-repeat: repeat-y, repeat-y;
	opacity: 0.18;
	z-index: 1; position: absolute;
   
 top: 0px;
}

.innercontainer {
	/* height: 100%; */
	opacity: 1 !important;
	position: relative; z-index: 0;
	clear: both;
}

.padding1 { 
	padding-left: 90px; padding-right: 90px; box-sizing: border-box;
	/*padding-top: 32px;*/
	/*margin-top: 32px; */
}

.padding2 {
	padding-top: 40px;
	padding-left: 92px;
}

.padding3 { padding: 0.35em 1em; }
.padding4 { padding: 0em 100px; }
.padding5 { padding: 0.35em 2em; }
.padding6 { padding-top: 1em; }

// .w200 { width: 200px; }
.w200 { width: @ini_sidebar_width; }

/* ----- forms ----- */
select {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 16px; 
 margin-right: 6px; 
 background-color: __formfieldback__;
 border: 1px solid __formfieldborder__;
 color: __formfieldtextcolour__;
}

input, input[type='text'], input[type='password'], textarea {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 16px; 
 margin-right: 6px; 
 background-color: __formfieldback__;
 border: 1px solid __formfieldborder__;
 color: __formfieldtextcolour__;
}

button, button[type='submit']{
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 16px; 
 margin-right: 6px; 
 background-color: __formfieldback__;
 border: 3px ridge __formfieldborder__;
 color: __formfieldtextcolour__;
}

#navcontainer { min-width: 100px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
margin: 0px;
}

#navcontainer li { width: 100%; }

#navcontainer #navlist li:first-child a { border-top: 1px solid __border__; }

#navcontainer a
{
display: block;
padding: 16px;
/*background-color: __sidebarmenuoptionback__;*/
border-bottom: 1px solid __border__;
}

#navcontainer a:link, #navlist a:visited
{
color: __textcolour__;
text-decoration: none;
}

#navcontainer a:hover
{
/*background-color: __topmenuback__;*/
	/*background-image: url('images/@{ini_imagesubfolder}/topmenu-itemon.png');*/
	background-size: cover;
/*font-weight: bold;*/
/*padding-left: 16px;*/
color: __hovercolour__;
width: 100%;
}


/* end ____________ */



/* menus */


.topmenu {
	background-image: url('images/@{ini_imagesubfolder}/topmenuback-left.png'), url('images/@{ini_imagesubfolder}/topmenuback-right.png'), url('images/@{ini_imagesubfolder}/topmenuback-loop.png');
	background-position: left, right, middle;
	background-repeat: repeat-y, repeat-y, repeat;
	background-size: contain;
	background-color: __menuback__;


	width: 100%;
	height: 34px;
}

ul.topmenu { margin: 0px; padding: 0px; /*display: table;*/ }
.menuoption, .topmenu li { 
	display: inline; 
vertical-align: middle; text-align: center;
/*display: inline-block;*/
line-height: 1.85em;
float:left; 
clear: none; /*remove spacing inbetween divs*/
border:0px solid #000000;
font-size: 1em;
padding: 0px 0.85em;
height: 100%;
/*margin: 0px 0.15em;*/

color: __textcolour__;

}

li:hover, .topmenu .active{ 
	display: inline-block; 
	/*display: table-cell;*/
	font-size: 1em;
	/*line-height: 1.85em;*/
	color: __hovercolour__;

	background-image: url('images/@{ini_imagesubfolder}/topmenu-itemon.png');
	background-size: cover;
	/*background-color: green;*/

	cursor: pointer;
}

.topmenu a:link, .topmenu a:visited { color: __textcolour__; text-decoration: none; }
.topmenu .active a:link, .topmenu .active a:visited { color: __hovercolour__; text-decoration: none; }
a:link, a:visited { text-decoration: none; color: __link__; }
a:hover { color: __hovercolour__; }

/* _______________ */
/* make the border at the top of the .innercontainer .headerpane look better */
.zindex1 { z-index: 1 !important; }
.movedown7 { position: relative; top: 7px; }
.is100percentmovedown7 { min-height: calc(100% - 4px); top: 4px; }
.fixheaderborder {
	background-image: url('images/@{ini_imagesubfolder}/headerback.png');
	background-color: __headerborder__;
	
	position: relative;
	width: 100%;
	height: 4px;
}
	.padding6 { padding-top: 0.65em !important; } 
	/* must be smaller than original .padding6 */
/* ____ end ____ */

/* responsive design */
@media screen and (max-width: 1000px) {
  .innercontainer { width: 100% !important; }
  .innercontainer, .leftbackbar { margin-left: 0px; left: unset; }
  .innercontainer, .rightbackbar { margin-right: 0px; }
  .rightbackbar { right: 0px; }
  .outercontainer { padding-bottom: 32px; }

}

@media screen and (max-width: 850px) {
	div.topmenu { background-image: none; background-color: __topmenuback__; }
	.padding1 { padding-left: 0px; padding-right: 0px; }
	.leftbackbar, .rightbackbar { display: none; }
	.padding2 { padding-top: 32px; }
	.topmenu { height: auto; min-height: 34px; }
	ul.topmenu { display: table; }
	/*.padding4 { padding: 0px 13px; }*/
	.padding4 { padding: 0px 0px; }

}

@media screen and (max-width: 700px) {
	/*div.topmenu { background-image: none; background-color: __topmenuback__; }*/
	.padding2 { padding-left: 13px; }
	ul.topmenu { display: table; padding-bottom: 0.85em;}
	ul.topmenu li { margin-bottom: 0.85em; }
	/*.topmenu { height: unset; }*/
	.column { display: block !important; }
	.w200 { width: 100%; box-sizing: border-box; }
	#navcontainer li { display: block; }
	#navcontainer a:hover { background-size: contain; }
	.footer, .sidebarback { margin-top: 24px; }
}