/////////////////
// Semantic.gs // for LESS: http://lesscss.org/
/////////////////

// Defaults which you can freely override
@column-width: 60;
@gutter-width: 20;
@columns: 12;

// Utility variable — you should never need to modify this
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @gridsystem-width;

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// @min-width: 960;
// @correction: 0.5 / @min-width * 100 * 1%;

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	*zoom:1;
	
	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}


//////////
// GRID //
//////////

body {
	width: 100%;
	.clearfix;
}

.row(@columns:@columns) {
	display: block;
	width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
	margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
	// *width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction;
	// *margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction;
	.clearfix;
}
.column(@x,@columns:@columns) {
	display: inline;
	float: left;
	width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
	margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
	// *width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction;
	// *margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction;
}
.push(@offset:1) {
	margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}
.pull(@offset:1) {
	margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}


/* fixed.less has been moved here for dokuwiki 2020 */
//@import 'semanticgridsystem.less';

//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60;
@gutter-width: 20;

// Uncomment the definition below for a percentage-based layout
// @total-width: 100%;


////////////
// LAYOUT //
////////////

// center the contents
div.container {
	max-width: @ini_site_width;
	margin: 0 auto;
	overflow: hidden;
	background-color: #E3DEA6;
	padding: 16px;
}

header {
	//.column(12);
}

.footer {
	width: 100%;
}

// main and sidebar
#maincolumn {
	.column(9);
	
}

#sidebar {
	.column(3);
}

/* ______ */
.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 */

/* _______ */

@media screen and (max-width: 1100px) {
	/*body { background-color: green; } .container { background-color: red !important; }*/
	#sidebar, #maincolumn { box-sizing: border-box; }
}

@media screen and (max-width: 700px) {
	/*body, .container { background-color: purple !important; }*/
    div.center { padding: 0px; width: 100%; }
    header#top { margin: 0px; }

    .flex { display: table-row !important; }
    
	#maincolumn,
	#sidebar,
	.footer {
		.column(12);
		width: 100%;
	}

	#maincolumn, #sidebar { margin: 0px; }
	.footer { margin: 20px 0px !important; }
	
	.secondlevel { margin-left: 24px; }
}