:root{
	--contact-img-width:360px;
	--contact-img-width:260px;
	--contact-img-padding:var(--body-font-size);
	--wrapper-width:calc(var(--contact-img-width) + var(--contact-img-padding)); 
}

/*
		<section class="content">
			<div class="wrapper">
				<a href="index.html"><img src="images/contact-360-330.png" alt="intro" /></a> 
			</div>
			<section class="contact">
			<ul>
				<li>
					<h3>&raquo;Zybel Mailing Address</h3>	
					<p>Zybel International, Inc.
					<br/>1681 W Quick Draw Way<br/>SanTan Valley, 85142 AZ</p>
				</li>
				<li>
					<h3>&raquo;Direct Contact</h3>
					<p><span class="tag">Tel:</span>&nbsp&nbsp&nbsp&nbsp&nbsp 480-507-0269</p>
					<p><span class="tag">Fax:</span>&nbsp&nbsp&nbsp&nbsp 480-452-0368</p>
					<p><span class="tag">e-mail:</span>&nbsp info@zybel.com</p>
				</li>
				<li>
					<h3>&raquo;Departments</h3>
					<p><span class="tag">sales:</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp sales***@zybel.com</p>
					<p><span class="tag">receivables:</span>&nbsp receivables@zybel.com</p>
					<p><span class="tag">payables:</span>&nbsp&nbsp&nbsp&nbsp payables@zybel.com</p>
				</li>
			</ul>	
			</section>
		</section>
*/
		
/*
In position:relative we are declaring that this element will have descendants with relative or absolute positioning.
In position:absolute; the element looks for an ancestor (parent, grandparent, etc.) 
that has a position relative to use as a reference and if it cannot find is the webpage coordinates itself.

*/		
section.content{
	width:100%;/*70%;*/
	height:32%;
	/*height:600px;*/
	margin:var(--body-font-size) 0px; /* vertical - horizontal */
	position:relative; /* its the reference for all of its descendants */	
	background-color:var(--very-light-gray);
	/*outline:2px solid green;*/
}

section.content div.title{
	border-bottom:var(--border-bottom-line);
	/*outline: 2px solid orange;*/
}
section.content div.title h2{
	line-height:calc(var(--body-font-size) * 2);
	padding-left:var(--body-font-size);
}
/*section.content */
div.wrapper{
	width:var(--wrapper-width);
	margin-top: calc(var(--body-font-size) * 3);
	/*margin-left:var(--hNAV-width);*/
	margin-right: 80px;
	/*position:absolute;*/
	position: static;
	float:right;
	/*outline: 2px solid orange;*/
}

/*section.content */
div.wrapper img{
	width: var(--contact-img-width);
	padding: var(--contact-img-padding);
	/*margin-left:var(--intro-element-margin-left); */
	/*margin-right = 100px;*/
	margin-top:var(--intro-element-margin-top); 
	/*outline: 2px solid blue;*/
}	
section.content section.contact{
	width: calc(var(--hNAV-width) * 0.8);
	background-color:Wheat;
	position:absolute;
	margin-top:calc(var(--body-font-size) * 2);
	margin-left:calc(var(--body-font-size) * 2);
	padding-left:var(--body-font-size);
	padding-top:var(--body-font-size);
	/*outline: 2px solid blue;*/
}

section.content section.contact ul li{
	padding-bottom:var(--body-font-size);
	/*border-bottom:var(--border-bottom-line);*/
}

section.content section.contact ul li h3{
	color:var(--very-dark-gray);
	padding-bottom:calc(var(--body-font-size) * 0.25);
	border-bottom:var(--border-bottom-line);
}

section.content section.contact ul li h3 span.raquo{
	color:var(--body-anchor-color);
	font-size:var(--intro-font-size);
	font-weight: bold;
}	
section.content section.contact ul li p{
	padding-left:var(--body-font-size);
}
section.content section.contact ul li p span.tag{
	color:black;
	/*font-weight: bold;*/
}