:root{
	--text-tab:calc(var(--body-font-size) * 1.5);
}

/*
	<section class="content">
			<section class="industries">
				<img src="images/banner_automotive_1000x300.png" alt="industries banner" />
				<h2>&nbspIndustries Served</h2>
				<ul>
					<li><h2><span class="raquo">&raquo </span>Automotive Parts Manufacturing</h2>
					<p>We supply a broad product line of parts, components, and tools to Tier-1 automotive suppliers of powertrain, chassis, and electronic systems.</p> 
			
					<ol class="supply">
						<li>Spare parts for predictive and corrective plant maintenance of CNC machines, injection molding machines, and robotic workstations.</li>
						<li>Machine tools for plant warehouses, workstations, and toolrooms.</li>
						<li>Precision measuring tools for quality control and metrology departments.</li>
						<li>Components for sub-assembly lines and process automation.</li>
					</ol>

					<p>Our main customers are OEM manufacturers of powertrain, chassis, and electronic systems.
					<span id="dots">...</span>
						</p>
						<div id="more">
							<ul>
							<li><span class="bold">Engine block components:&nbsp</span>pistons, intake valves, camshafts, cylinder heads, connecting rods, variable camshaft timing, and sensors.</li>
							<li><span class="bold">Drive train subsystems:&nbsp</span>transmission parts, axles, flywheels, clutches.</li>
							<li><span class="bold">Thermal subsystems:&nbsp</span>alternators, engine cooling, radiators, air conditioning and climate control systems.</li>
							<li><span class="bold">Chassis components:&nbsp</span>drum brakes, steering wheels, wheel speed sensors, wheels, tires.</li>
							</ul>		
						</div>
						<div class="button-wrapper">
							<button onclick="myReadFunction()" id="myBtn" class="myBtn">Read more &raquo </button>
						</div>
					</li>
*/
.content{
	width:70%;
	/*height:600px;*/
	margin:var(--body-font-size) 0px; /* vertical - horizontal */
	padding:20px; /* padding that it descendants will be placed */
	background-color:var(--very-light-gray);
	/*outline:2px solid green;*/
}

.industries{
	background-color:Wheat;
	/*outline:2px solid orange;*/
}

.industries ul{
	padding:10px;
}

.industries img{
	width:100%;
}
.industries li{
	padding-bottom:calc(var(--body-font-size) * 0.75);
}	
.industries p{
	padding-left:var(--text-tab);
	padding-bottom:calc(var(--text-tab) / 2);
	/*border-bottom:var(--border-bottom-line);*/
}
.industries li h2{
	padding-bottom:calc(var(--text-tab) / 2);
	color:var(--very-dark-gray);
}	
.industries li h2 .raquo{
	color:var(--body-anchor-color);
	font-size:var(--intro-font-size);
	font-weight: bold;
}

.industries li .supply {
	padding-left:calc(var(--text-tab) * 2);
}

.industries li .supply li{
	list-style-type: decimal;
}

.industries ul li .bold{
	font-weight: bold;
}

.industries li #more {display: none;}

.industries li #more ul {
	padding-left:calc(var(--text-tab) * 2);
}

.industries li #more ul li{
	list-style-type: square;
}

.industries li .button-wrapper{
	padding: calc(var(--text-tab) / 2) var(--text-tab);
}

.industries li .button-wrapper .myBtn{
	cursor: pointer;
	color: var(--body-text-color);
	background-color: hsl(39, 60%, 70%);
	font-weight: bold;
	border:none;
	text-align:center;
	padding:calc(var(--text-tab) / 3) var(--text-tab); 
}