::selection { background-color: __hoverbackcolour__; color: __topbar__; }

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

.orange { background-color: orange; }
.magenta { background-color: magenta; }
.mt18 { margin-top: 18px; }
.mt32 { margin-top: 32px; }

.topbar{
	width: 100%;
	height: 12px;
	background-color: __topbar__;
}

.topbar2 {
	width: 100%;
	height: 12px;
	background-image: url('images/@{ini_imagetheme}/topbar2.png');
}

.container {
	width: @ini_site_width;
	margin-left: auto;
	margin-right: auto;
}

.header {
	width: 100%;
	min-height: 69px;
	/* https://www.w3docs.com/snippets/css/how-to-use-multiple-background-images-with-css.html 
	   https://stackoverflow.com/q/64867539/337306
 	*/
	background-image: url('images/@{ini_imagetheme}/headerback.png');
	background:
    	linear-gradient(transparent,rgba(0,0,0,0.03)) ~"0 0/100% 16px",
     	/*linear-gradient(#1ec5a6,#fff); */
     	linear-gradient(__headergradientstartcolour__ ,__headergradientendcolour__ )
 	;
	padding: 12px; padding-left: 48px;
	box-sizing: border-box;
}


.menubar	 {
	width: 100%;
	height: 54px;
	background-image: url('images/@{ini_imagetheme}/menuback.png');
	background-size: contain;
	box-sizing: border-box;
}

.contentarea{
	background-color: __contentback__;
}

.contentheader, .contentsubheader, .contenthere { 
	margin: 0px 1em; 	
	margin-left: auto; margin-right: auto; 
	width: 97%;
	
	box-sizing: border-box;
}

.padleft{
	padding-left: 1em;
}

.padhere { padding: 12px; padding-top: 0px; }

.contentheader{
	/*height: 47px;*/
	height: 38px;
	background-image: url('images/@{ini_imagetheme}/content-headerback.png');
	background-size: contain;
	color: __textcolour__;
	padding-top: 8px;
	padding-left: 1em;
}


.contentsubheader{
	height: 42px;
	background-image: url('images/@{ini_imagetheme}/content-subheaderback.png');
	background-size: contain;
	color: __textcolour__;
	padding-top: 12px;
	padding-left: 1em;
}

.blockygradient{
	/* https://www.w3docs.com/snippets/css/how-to-use-multiple-background-images-with-css.html 
	   https://stackoverflow.com/q/64867539/337306
 	*/
	background:
     /*url('images/@{ini_imagetheme}/listingback-top2.png') repeat-x,*/ 
     /* only for .listingback */

 	 linear-gradient(transparent,rgba(0,0,0,0.03)) ~"0 0/100% 16px",
     linear-gradient(__blockygradientstartcolour__ ,__blockygradientendcolour__ )
    ; 
}

.contenthere {
	background-color: __contentcolour__;
    /*min-height: 150px;*/
    overflow: auto;
}

.header a:link, .header a:visited { color: __textcolour__; text-decoration: none; }
.header a:hover { color: __hoverbackcolour__; text-decoration: underline; }
.contenthere a:link, .contenthere a:visited { color: __link__; }
a:link, a:visited { color: __link__; }
.listingback a:link, .listingback a:visited { text-decoration: none; }
.contenthere a:hover, .listingback a:hover { color: __hoverbackcolour__; text-decoration: underline; }

.listingback {
	/*background-image: url('images/@{ini_imagetheme}/listingback-top2.png');*/
	/*background-image: url('images/@{ini_imagetheme}/listingback-top2.png'), linear-gradient(180deg, rgba(0,0,0,1) 10%, rgba(23,23,23,1) 100%);*/
	/*	background: 
		linear-gradient(transparent,rgba(0,0,0,0.03)) 0 0/100% 30px
		,linear-gradient(180deg, rgba(0,0,0,1) 10%, rgba(43,43,43,1) 100%)
		
 	;*/
 	/* https://www.w3docs.com/snippets/css/how-to-use-multiple-background-images-with-css.html 
	   https://stackoverflow.com/q/64867539/337306
 	*/

 	background:
     url('images/@{ini_imagetheme}/listingback-top2.png') repeat-x,
 	 linear-gradient(transparent,rgba(0,0,0,0.03)) ~"0 0/100% 16px",
     linear-gradient(__blockygradientstartcolour__ ,__blockygradientendcolour__ )
    ;
	/*background-image: url('images/@{ini_imagetheme}/listingback-top2.png'), url('images/@{ini_imagetheme}/listingback.png');*/
	/*background-position: center top;*/
	background-repeat: repeat-x, repeat;
	/*background-size: auto, contain;*/
	/*background-size: contain;*/
	/*background-color: #3a3a3a;*/
	min-height: 94px;
	padding: 12px; box-sizing: border-box; 
	/*padding-top: 12px;*/
	/*overflow: inherit;*/
}

.listingback img { max-height: 75px; }
.listingback .row { margin-top: 3px; }
.smaller { font-size: 0.85em; }
.smaller2 { font-size: 0.85em; letter-spacing: 0.15em; }
.listingback p { margin: 0px; padding: 4px; }
.listingback .column { margin-right: 12px; }

h1 { margin: 0px; }

/* grids, rows and columns */

.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 black 0px;
    vertical-align: middle;
    clear: both; 
    /*display: block;*/
    display: table;
    width: 100%;
}



.footercontent {
	
	margin-left: auto;
	margin-right: auto;
	/*background-color: #e4E5E8;*/
	/*min-height: 150px;*/
	width: 90%;
display: block;
padding: 1em;
box-sizing: border-box;
/*border: 1px dotted #C0C0C0;*/

position: relative; bottom: 12px; /* margin-bottom doesn't work */
margin-top: 24px;
padding: 1em;
}

.clear { clear: both; }
// .w25pc { width: 25%; }
.w25pc { width: @ini_sidebar_width; }
// .w75pc { width: 75%; }
.w75pc { width: calc(100% - @ini_sidebar_width - 10%); }
.w200px { width: 200px; }
.w80px { width: 80px; }
.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 */

/* _______ */

/* menus */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.ddblueblockmenu{
border: 0px solid black;
border-bottom-width: 0;
width: 100%;
margin-top: 0.85em;
/*font-size: 0.8em;*/
}

.ddblueblockmenu ul{
margin: 0;
padding: 0px;
list-style-type: none;
margin-bottom: 1.15em;
}

.ddblueblockmenu li a{
display: block;
padding: 6px 0px;
padding-left: 9px;
/*width: 169px; 185px minus all left/right paddings and margins*/
text-decoration: none;
color: #dcdcdc;
/*background-color: #595959;*/
border-bottom: 0px solid __menubordercolour2__;
border-left: 0px solid __menubordercolour1__;
}

* html .ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
width: 169px; /*185px minus all left/right paddings and margins*/
}

.ddblueblockmenu li a:hover {
background-color: __hoverbackcolour__;
color: __hovertextcolour__;
border-left-color: __menubordercolour1__;
text-decoration: none;
}

.ddblueblockmenu li .active {
background-color: __menubordercolour1__;
border-left-color: __menubordercolour1__;
cursor: default;
}

/* not used */
.ddblueblockmenu div.menutitle{
color: __textcolour__;
border-bottom: 3px solid __menubordercolour2__;
padding: 1px 0;
padding-left: 5px;
/* background-color: #3c3c3c; */ padding-top: 12px;
font: bold 90%;
}

/* ----- forms ----- */
select {
 font-family: ~"__formfieldfonts__ "; 
 font-size: 16px; 
 margin-right: 6px; 
 background-color: __formfieldback__;
 border: 1px solid __formfieldborder__;
 color: __formfieldcolour__;
}

input, input[type='text'], input[type='password'], textarea {
 font-family: ~"__formfieldfonts__ "; 
 font-size: 16px; 
 margin-right: 6px; 
 background-color: __formfieldback__;
 border: 1px solid __formfieldborder__;
 color: __formfieldcolour__;
}

button, button[type='submit']{
 font-family: ~"__formfieldfonts__ "; 
 font-size: 16px; 
 margin-right: 6px; 
 background-color: __formfieldback__;
 border: 3px ridge __formfieldborder__;
 color: __formfieldcolour__;
}


/* main menu */

#navcontainer{
	padding: 22px;
}

ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
margin: 0px;
font-size: 0px;
}

#navlist li
{
display: inline;
list-style-type: none;
font-size: 16px;
margin: 0px 3px;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: __textcolour__;
background-color: __menucolour__;
background-image: url('images/@{ini_imagetheme}/menuoptionback.png');
background-size: contain;
text-decoration: none;
/*border: 1px solid __textcolour2__;*/
}

#navlist a:hover
{
/*background-color: #3b3b3b;*/ /*color: __textcolour__;*/
background-color: __hoverbackcolour__; color: __hovertextcolour__;
background-image: none;
/*border: 1px solid __textcolour2__;*/
text-decoration: none;
}


/* footer menu */

.footercontent .block{
  float:left;
  width: 30%;
  margin:0 0 0 5%;
}
.footercontent .twice-length{ width:65%; }
.footercontent .thrice-length{ width:100%; }
* html .footercontent .block{
  margin:0 0 0 4%;
}
.footercontent .first, * html .footercontent .first{
  clear:both;
  margin:0;
}
.footercontent .block-separator{
  clear:both;
  height:2.5em;
}

.footercontent .block h2, .footercontent .block h3{
  /*margin:0 0 2em 0;*/
  margin: 0px;
  font-weight: unset;
}


ul.footermenu{
  list-style-type:none;
  margin:1.5em 0 2em 0;
  border-top:1px solid __border__;
  padding-left: 0px;
}
ul.footermenu li{
  list-style-type:none;
  margin:0;
  
  padding-left: 0.85em;
  border-bottom:1px solid __border__;
}
ul.footermenu .date{
  color:__formfieldborder__;
  padding:0 1.5em 0 0;
}

ul.footermenu .count{
  float:right;
  color:__lighttextcolour__;
}

ul.footermenu a{
  color:__textcolour__;
  text-decoration:none;
  padding:0.5em 0;
  display: block;
}

ul.footermenu li:hover{
	/*color:#000080;*/
  	background-color: __hoverbackcolour__;
}

ul.footermenu a:hover, ul.footermenu a:hover .date{ 
  color:__hovertextcolour__;
  text-decoration: none;
}


ul.footermenu ul{
  margin:0;
}
ul.footermenu ul li{
  border:none;
  margin-left:2em;
  list-style-type:square;
}

/* responsive design*/

@media only screen and (max-width: 1000px) {
	.container { width: 90%; }
}


/* Main default styling */
input[type="checkbox"].hide, .menutoggle {
  /*  left: -9999px;
    opacity: 0;
    position: absolute 
  */
    display: none;
}

@media only screen and (max-width: 850px) {
	.container { width: 100%; /*padding: 12px;*/ box-sizing: border-box; margin: 0px; }
	.menubar .container { padding: 0px; padding-top: 12px; }
	/*.menubar { padding: 12px; }*/
	.menubar { height: auto; padding-top: 0px; min-height: 74px; }
	.w75pc ul, .w75pc ol { margin-left: 1.15em; }
	.w75pc li, #writtensidebar li, .sidebar li { margin: 0.85em 0 0 0px !important; display: block;  }
  	.w75pc h1, .w75pc h2, .w75pc h3, .w75pc h4, .w75pc h5, .w75pc h6 { clear: both; margin: 1.15em 0px; }
}

@media only screen and (max-width: 700px) {

	.column, .row { display: table; clear: both; }
	.w25pc, .w75pc, .footercontent .block { width: 100%; }
	.footercontent .block { float: none; margin: 0px; }
	ul#navlist { display: table; }
	#navlist li {     float: left; margin-bottom: 1.35em; margin-right: 1em;}
	#navcontainer { margin-top: 21px; }
	.contentheader { margin-top: 1.85em; }
	.smaller2 { margin-bottom: 1.15em !important; display: block; }
	.w200px, .w80px { width: auto; }
	.flex { display: inline-block !important; }
	.nofloatonmobile { float: none; display: unset; }
	.w200pxruby { display: ruby; }

/* toggle menu on mobile */
/* https://uglyduck.ca/menu-toggle-css/ */
/* https://stackoverflow.com/q/10782054/337306 */

.menutoggle { display: inline-block; clear: both; }

label.menutoggle {
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    padding: 10px;
    float: left;
    clear: both;
    margin: 1em;
}

.sidebar, .hidesidebartext {
    /*opacity: 0;
    position: absolute;
    z-index: -2;*/
    display: none;
}

/* Show nav element when checkbox active */
input[type="checkbox"].hide:checked ~ .sidebar,
input[type="checkbox"].hide:checked ~ label .hidesidebartext {
    /*opacity: 1; z-index: 1;*/
    display: block;
}

/* https://stackoverflow.com/a/65331279/337306 */
input[type="checkbox"].hide:checked ~ label .showsidebartext{
	display: none;
}

input[type="checkbox"].hide:checked ~ .menutoggle {
	background-color: __hoverbackcolour__;
	color: __selectedtextcover__; /* hover colour */
	font-weight: bold;
}

}