/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Tutorial Case
   
   Positioning Styles for the pc_info.html file
   Author: Jonnie Jucht
   Date:   10.06.2024
   
   Filename: pc_info.css

*/


/* Main Styles */

	main {
		position: relative;
		height: 450px;
		width: 100%;
		overflow: auto;
	}

/* 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%;
	}