/* =====================================================================
   responsive.css  --  mobile / narrow-viewport layer
   Added on top of the legacy fixed 780px layout (style.css + layout.css).
   Only takes effect below 800px, so the desktop design is untouched.
   ===================================================================== */

img { max-width: 100%; height: auto; }

@media (max-width: 800px) {

	/* --- main blocks follow the viewport instead of a fixed 780px --- */
	#header,
	#content,
	#footer,
	.tall_header,
	.tall_header_top,
	.wrapper_main,
	#page1 #content .row1,
	#page1 #content .row2,
	#page2 .wrapper_main,
	#page3 .wrapper_main,
	#page4 .wrapper_main,
	#page5 .wrapper_main,
	#page6 .wrapper_main {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	html, body { overflow-x: hidden; }
	body { background-size: auto; }

	/* a little breathing room so text never touches the screen edge */
	#content { padding-left: 12px !important; padding-right: 12px !important; }
	#page1 #content .row1 > div[style*="13px"] { display: none !important; }

	/* screenshot thumbnails on the info / support pages: cap so text keeps room */
	#content .img_indent { max-width: 45%; margin-right: 12px !important; }

	/* --- drop the vertical column-divider background images
	       (they are positioned for the old fixed column widths) --- */
	#page1 #content .row2,
	#page2 .wrapper_main,
	#page3 .wrapper_main,
	#page5 .wrapper_main,
	#page5 #content .col_2 .row2 .col_2 {
		background-image: none !important;
	}

	/* --- stack every floated column --- */
	.col_1, .col_2, .col_3 {
		float: none !important;
		width: auto !important;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
		height: auto !important;
		box-sizing: border-box;
	}

	/* --- fixed-width inner "indent" wrappers -> fluid --- */
	#content .indent,
	#content .indent1,
	#content .indent_right,
	#page1 #content .row1 .indent,
	#page1 #content .row2 .col_1 .indent,
	#page1 #content .row2 .col_2 .indent,
	#page2 #content .col_1 .row1 .indent,
	#page2 #content .col_1 .row2 .indent,
	#page2 #content .col_2 .indent,
	#page2 #content .col_3 .indent,
	#page3 #content .col_1 .indent,
	#page3 #content .col_2 .row1 .col_1 .indent,
	#page3 #content .col_2 .row2 .col_1 .indent,
	#page4 #content .col_1 .indent,
	#page4 #content .col_2 .indent1,
	#page5 #content .col_1 .indent,
	#page5 #content .col_2 .row1 .col_1 .indent,
	#page5 #content .col_2 .row2 .col_1 .indent,
	#page5 #content .col_2 .row2 .col_2 .indent,
	#page6 #content .col_1 .indent {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	#page1 #content .row1 .indent { height: auto !important; }
	#content .indent_right,
	#page3 #content .col_2 .row2 .col_1 .indent div,
	#page4 #content .col_1 .indent_right { float: none !important; margin-right: 0 !important; }

	/* --- header: logo, newsletter box and nav stack vertically --- */
	#header { height: auto !important; padding-bottom: 14px; }
	#header .col_1,
	#header .col_2 {
		float: none !important;
		width: auto !important;
		text-align: left !important;
		padding-top: 14px !important;
		padding-left: 15px;
	}
	#header .col_1 img { margin: 14px 0 0 0 !important; max-width: 80%; }
	#header .col_2 p { margin-top: 4px; }
	#header .col_2 table { width: auto !important; }
	#header .col_2 table td[width="100%"] { width: 1px !important; }
	#header .col_2 #nl_email { width: 140px !important; max-width: 48vw; }
	#header .col_2 ul { margin: 12px 0 0 0 !important; }
	#header .col_2 li { display: inline-block; margin-bottom: 4px; }

	/* --- index feature cards: keep their artwork width, centre & stack --- */
	#page1 #content .row1 .col_1,
	#page1 #content .row1 .col_2,
	#page1 #content .row1 .col_3 {
		width: 241px !important;
		margin: 0 auto 10px !important;
	}

	/* --- coloured promo boxes on the info / contact pages --- */
	#page3 #content .col_2 .row1 .wrapper,
	#page4 #content .col_2 .wrapper {
		max-width: 241px;
		margin-left: auto;
		margin-right: auto;
	}

	/* --- footer --- */
	#footer { height: auto !important; padding: 20px 15px !important; }
	#footer img, #footer .indent_img { float: none !important; margin: 0 0 10px 0 !important; }
	.notice {
		width: auto !important;
		margin: 10px 0 20px 0 !important;
		box-sizing: border-box;
	}

	/* --- wide data tables scroll horizontally instead of stretching the page --- */
	#producttable, #carttable, #productbuytable {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- forms --- */
	.form, .form input,
	input[type="text"], input[type="number"], textarea, select {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* --- google maps holder on the contact-map popup --- */
	#map { width: auto !important; max-width: 100% !important; height: 70vh !important; }
}

/* very narrow phones: let the coloured cards go full width too
   (their rounded-corner background art no longer fits) */
@media (max-width: 520px) {
	#page1 #content .row1 .col_1,
	#page1 #content .row1 .col_2,
	#page1 #content .row1 .col_3 { width: auto !important; }
	#page1 #content .row1 .wrapper,
	#page1 #content .row1 .wrapper_bottom,
	#page3 #content .col_2 .row1 .wrapper_bottom,
	#page4 #content .col_2 .wrapper,
	#page4 #content .col_2 .wrapper_bottom { background-image: none !important; }
	#page3 #content .col_2 .row1 .wrapper,
	#page4 #content .col_2 .wrapper { max-width: 100%; }
}