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