/* Layout & base reset for THAT Music Theme.
   Replaces reset.css + text.css + 960.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
ul, ol, li, dl, dt, dd, form, fieldset, table, th, td {
	margin: 0;
	padding: 0;
}

body {
	font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}

img { max-width: 100%; height: auto; border: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:focus { outline: 1px dotted; }

h1 { font-size: 25px; }
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

.site {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 10px;
}

.content_wrapper {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 20px;
	padding: 10px;
}

#left, .right { min-width: 0; }

@media (max-width: 768px) {
	.site { padding: 0; }
	.content_wrapper { grid-template-columns: 1fr; gap: 10px; padding: 5px; }
	.navigation ul { float: none; display: flex; flex-wrap: wrap; }
	.navigation ul li { float: none; }
	.search_box { float: none; width: auto; }
	.footer { text-align: center; margin-bottom: 0; }
}