/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Tutorial Case
   
   Positioning Styles for the pc_info.html file
   Author: Bellis Sturdivant
   Date:   10/4/2025
   
   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%;
}