@charset "UTF-8";
/* =============================================================================
   Asia Lamp - responsive layer
   -----------------------------------------------------------------------------
   The site is a 2013 Dreamweaver table layout (fixed 1000px shell). Rather than
   rewrite 22 standalone pages, this stylesheet re-flows the existing markup:

     * the 1000px shell becomes full-bleed fluid (100% of the window),
     * the two-column regions (side nav + content) stack under 900px,
     * the slide-down top nav collapses to a tap-friendly text grid,
     * over-wide legacy data tables get a horizontal scroll box (js/responsive.js).

   Loaded LAST in <head> (via head_responsive.php) so it wins over each page's
   inline <style> block and over css/style.css. Keep it that way.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	        text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	background: #ffffff none !important;   /* bg.jpg no longer ships with the site */
	overflow-x: hidden;
}

/* Legacy sliced-image layout: kill the inline-image descender gap that appears
   once the pages run in standards mode. */
img { vertical-align: middle; border: 0; }

/* Everything scales down; the two exceptions are re-enabled further below. */
img { max-width: 100%; height: auto; }

/* coin-slider-styles.css skins the whole page scrollbars with a background
   image that no longer exists. Put them back to the browser default. */
::-webkit-scrollbar { width: auto; background-image: none; }
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .35); }

/* -----------------------------------------------------------------------------
   1. Page shell  -  <table width="1000"> [30px glow][960px page][30px glow]
   -------------------------------------------------------------------------- */
table[width="1000"] {
	width: 100% !important;
	max-width: none;
}
table[width="1000"] > tbody > tr > td[width="960"],
table[width="1000"] > tr > td[width="960"] {
	width: auto !important;
}
td[width="30"] {
	width: 30px !important;
	min-width: 30px;
	background-repeat: repeat-y;
}

/* Header row: logo left, empty cell right. */
td[width="457"] { width: auto !important; }
td[width="400"] { width: auto !important; }
td[width="457"] > img { max-width: 100%; height: auto; }

/* Full-width decorative strips stretch with the window (full-bleed layout). */
img[src^="images/bar_"],
img[src="images/index_colume.jpg"],
img[src="images/standard_quality.png"] {
	width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
   2. Top navigation (ul.sdt_menu) - fluid instead of a fixed 6 x 160px row
   -------------------------------------------------------------------------- */
ul.sdt_menu {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.sdt_menu > li {
	float: none;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0%;
	        flex: 1 1 0%;
	width: auto;
	min-width: 0;
}
ul.sdt_menu li > a,
ul.sdt_menu li span.sdt_wrap,
ul.sdt_menu li span.sdt_active { width: 100%; }

ul.sdt_menu li span span.sdt_descr { width: auto; }

/* -----------------------------------------------------------------------------
   3. Banner slider (replaces the fixed 960px coin-slider)
   -------------------------------------------------------------------------- */
.rwd-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 960 / 243;
	overflow: hidden;
	background: #101010;
	line-height: 0;
}
.rwd-slider > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: opacity .7s ease-in-out;
	        transition: opacity .7s ease-in-out;
	text-decoration: none;
	outline: none;
}
.rwd-slider > a.is-active { opacity: 1; }
.rwd-slider > a > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.rwd-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	z-index: 5;
	text-align: center;
	line-height: 0;
}
.rwd-slider-dots button {
	width: 11px;
	height: 11px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	box-shadow: 0 0 2px rgba(0, 0, 0, .6);
	cursor: pointer;
}
.rwd-slider-dots button.is-active { background: #ffffff; }

/* Old markup, in case a page is served from cache mid-deploy. */
#coin-slider, .coin-slider { max-width: 100%; }

/* -----------------------------------------------------------------------------
   4. Over-wide legacy tables - wrapped by js/responsive.js
   -------------------------------------------------------------------------- */
.rwd-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* A wrapped table carries width="100%", which resolves against the box. Hold it
   at its natural minimum so the columns keep their shape and the box scrolls. */
.rwd-scroll > table {
	min-width: -webkit-min-content;
	min-width: min-content;
}

/* -----------------------------------------------------------------------------
   5. Contact form
   -------------------------------------------------------------------------- */
input, select, textarea { max-width: 100%; }
.rwd-form td { vertical-align: middle; }

/* -----------------------------------------------------------------------------
   6. Tablet and below - stack the two-column regions
   -------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {

	/* Drop the 30px side glow strips; they only waste width on a phone. */
	td[width="30"] { display: none !important; }

	/* Product pages: side nav above content. Contact: form above map. */
	td[width="25%"], td[width="75%"],
	td[width="45%"], td[width="55%"] {
		display: block !important;
		width: 100% !important;
		text-align: left;
	}
	td[width="25%"] { margin-bottom: 14px; }

	/* Thai has no inter-word spaces, so the product side-nav labels count as one
	   very long word and would otherwise set the page's minimum width. */
	td[width="25%"] td,
	td[width="25%"] a,
	td[width="25%"] span {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Footer: company block above the (empty) right-hand cell. */
	td[width="74%"], td[width="26%"] {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
	}

	/* Header logo shrinks with the page instead of forcing 457px. */
	td[width="457"] > img { width: 70%; max-width: 457px; }

	/* --- top nav becomes a 3-across tap grid --- */
	ul.sdt_menu {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
	ul.sdt_menu > li {
		-ms-flex: 0 0 33.3333%;
		    flex: 0 0 33.3333%;
		max-width: 33.3333%;
		height: auto;
		border-right: 1px solid #444;
		border-bottom: 1px solid #444;
	}
	ul.sdt_menu li > a {
		position: static;
		display: block;
		height: auto;
		padding: 13px 4px;
		background-image: none;
		box-shadow: none;
		text-align: center;
	}
	ul.sdt_menu li a img,
	ul.sdt_menu li span.sdt_active,
	ul.sdt_menu li div.sdt_box { display: none !important; }
	ul.sdt_menu li span.sdt_wrap {
		position: static;
		width: auto;
		height: auto;
	}
	ul.sdt_menu li span span.sdt_link {
		float: none;
		display: block;
		margin: 0;
		font-size: 15px;
		line-height: 1.2;
	}
	ul.sdt_menu li span span.sdt_descr { display: none; }
	ul.sdt_menu li > a:hover,
	ul.sdt_menu li > a:focus { background-color: #111; }

	/* --- form fields go full width; 16px stops iOS from zooming on focus --- */
	.rwd-form input[type="text"],
	.rwd-form input[type="email"],
	.rwd-form input[type="tel"],
	.rwd-form textarea,
	.rwd-form select {
		width: 100% !important;
		font-size: 16px;
	}
	.rwd-form td[align="right"] {
		display: block;
		width: 100% !important;
		height: auto !important;
		text-align: left !important;
		padding-bottom: 0;
	}
	.rwd-form td[align="left"] {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	blockquote { margin-left: 12px; margin-right: 0; }

	/* Google Maps embed on contact.php. */
	iframe[src*="google.com/maps"],
	iframe[src*="maps.google"] { width: 100%; height: 300px; }
}

/* -----------------------------------------------------------------------------
   7. Phone
   -------------------------------------------------------------------------- */
@media screen and (max-width: 560px) {

	ul.sdt_menu > li {
		-ms-flex: 0 0 50%;
		    flex: 0 0 50%;
		max-width: 50%;
	}
	ul.sdt_menu li span span.sdt_link { font-size: 14px; }

	td[width="457"] > img { width: 88%; }

	.text_head, .text_menu_left { font-size: 17px !important; }
	.text_body { font-size: 14px !important; }
}
