/*
 * Overall look and feel for 6502disassembly.com.  Margin is TRBL order.
 */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;    /* recommended for mobile */
	padding: 0px;
	margin: 20px 10px 10px 10px;
	background-color: #FFFFFF;
}

.floatimg_wide {
	float: left;
	margin-right: 40px;
}

/*
 * Display of keyboard shortcuts in the <kbd> element.
 */
kbd.key {
    margin: 0;
    border-radius: 4px;
    padding: 0px 1px 0px 1px;
    border: 1px solid black;
    background-color: #f7f7f7;
}

/*
 * Put a border around visualizations.  Disable smoothing so they don't
 * blur out.
 *
 * Pixelated rendering works in Chrome, Safari, and IE11, but doesn't in
 * current versions of Edge and Firefox.  We could do it with Javascript
 * Canvas (e.g. https://stackoverflow.com/a/19129822/294248), or by
 * generating scaled thumbnail files directly.
 */
.retroimg {
    border: 1px solid gray;

    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

/*
 * Basic look for all tables.
 */
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

/*
 * Basic data table, with thin border, some padding, and grey shading on
 * alternate rows.
 */
.data-table th {
    padding: 2px;
    text-align: left;
}
.data-table td {
    padding: 2px;
}
.data-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/*
 * ==========================================================================
 * Colllapsible elements.  Requires "collapse.js" (include at end of HTML).
 *
 * (from https://www.w3schools.com/howto/howto_js_collapsible.asp)
 */

.collapse-button {
	background-color: #777;
	color: white;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;	/* default font size for buttons is small */
}

.collapse-button:hover {
	background-color: #555;
}

.collapse-button:after {
	content: '\002B';   /* U+002b plus sign */
	color: white;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

.collapse-isopen:after {
	content: "\2212";   /* U+2212 minus sign */
}

.collapse-content {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #f1f1f1;
}

/*
 * ==========================================================================
 * Two-column grid layout.  Image on the left, text on the right.  If the
 * screen is narrow, image on top, text below.
 */

.grid-container {
    display: grid;
    grid-template-rows: auto auto;
}

.grid-item-image {
    grid-row: 1;
}
.grid-item-image img {
    width: 100%;
    height: auto;
    /* don't expand image beyond original size */
    max-height: max-content;
    max-width: max-content;
    /*border: 1px solid #e0e0e0;*/
}

.grid-item-text {
    /* background-color: #e0e0ff; */
    grid-row: 2;
}
.grid-item-text p {
    /* items in grids don't collapse margins */
    /* cf. https://stackoverflow.com/q/18963421/294248 */
    margin-block-start: 0;
}

/* use two-column layout on wider screens */
@media only screen and (min-width: 768px) {
    .grid-container {
        /* generated map images are 292x308 */
        grid-template-columns: 310px auto;
        grid-template-rows: initial;
        grid-column-gap: 8px;
    }
    .grid-item-image {
        grid-row: 1;
        grid-column: 1;
    }
    .grid-item-text {
        grid-row: 1;
        grid-column: 2;
    }
}