1@import 'semanticgridsystem.less';
2
3//////////
4// GRID //
5//////////
6
7// Specify the number of columns and set column and gutter widths
8@columns: 12;
9@column-width: 60;
10@gutter-width: 20;
11
12// Uncomment the definition below for a percentage-based layout
13// @total-width: 100%;
14
15
16////////////
17// LAYOUT //
18////////////
19
20// center the contents
21div.container {
22	max-width: @ini_site_width;
23	margin: 0 auto;
24	overflow: hidden;
25	background-color: #E3DEA6;
26	padding: 16px;
27}
28
29header {
30	//.column(12);
31}
32
33.footer {
34	width: 100%;
35}
36
37// main and sidebar
38#maincolumn {
39	.column(9);
40
41}
42
43#sidebar {
44	.column(3);
45}
46
47/* ______ */
48.flex { display: flex !important; }
49.sparewidth { flex-grow: 100; }
50/* make column fill spare remaining width of container
51		https://stackoverflow.com/a/40447261/337306 */
52
53		.makehigh{ display: table; }
54        .makehigh .column { display: table-cell; float: none; }
55        /* all columns same height */
56        /* https://www.w3schools.com/howto/howto_css_equal_height.asp */
57
58/* _______ */
59
60@media screen and (max-width: 1100px) {
61	/*body { background-color: green; } .container { background-color: red !important; }*/
62	#sidebar, #maincolumn { box-sizing: border-box; }
63}
64
65@media screen and (max-width: 700px) {
66	/*body, .container { background-color: purple !important; }*/
67    div.center { padding: 0px; width: 100%; }
68    header#top { margin: 0px; }
69
70    .flex { display: table-row !important; }
71
72	#maincolumn,
73	#sidebar,
74	.footer {
75		.column(12);
76		width: 100%;
77	}
78
79	#maincolumn, #sidebar { margin: 0px; }
80	.footer { margin: 20px 0px !important; }
81
82	.secondlevel { margin-left: 24px; }
83}