/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Tutorial Case
   
   Positioning Styles for the pc_info.html file
   Author: Michelle Le
   Date: 10/4/25
   
   Filename: pc_info.css

*/

/* Main Styles */
	 main { 
	   overflow: auto;
	   position: relative; 
	   height: 450px; 
	   width: 100%; 
	}


/* Infographic Styles */
	 div.infobox { 
	   position: absolute; 
	}


/* First Infographic */
	 div#info1 { 
	   display: block; 
	   top: 20px; 
	   left: 5%; 
	}


/* Second Infographic */
	 div#info2 { 
	   display: block; 
	   top: 185px; 
	   left: 42%; 
	}


/* Third Infographic */
	div#info3 { 
	   display: block; 
	   top: 135px; 
	   left: 75%; 
	}


/* Fourth Infographic */
	 div#info4 { 
	   display: block; 
	   top: 510px; 
	   left: 8%; 
	}


/* Fifth Infographic */
	 div#info5 { 
	   display: block; 
	   top: 800px; 
	   left: 3%; 
	}


/* Sixth Infographic */
	 div#info6 { 
	   display: block; 
	   top: 600px; 
	   left: 48%; 
	}


/* Seventh Infographic */
	 div#info7 { 
	   display: block; 
	   top: 1000px; 
	   left: 68%; 
	}


/* Eighth Infographic */
	 div#info8 { 
	   display: block; 
	   top: 1100px; 
	   left: 12%; 
	}