@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Case Problem 2
   
   Layout Style Sheet for A Soldier's Scrapbook
   Author: Kevin Viren
   Date:   10/2/2023
   
   Filename: ss_layout.css

*/


/* Article Styles */

article {
	float: left;
	width: 384px;
}


/* First Line and Drop Cap Styles */

article p:first-of-type::first-line {
	font-size: 1.25em;
	font-variant: small-caps;
}

article p:first-of-type::first-letter {
	font-family: serif;
	font-size: 4em;
	line-height: 0.8em;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}	
	
 
/* Aside Styles */

aside {
	width: 768px;
	float: left;
}


/* Map Styles */

div#battleMap {
	position: relative;
	width: 688px;
	margin: 20px auto;
}

img#mapImage {
	display: block;
	width: 100%;
}


/* Interactive Map Styles */

a.battleMarkers {
	position: absolute;
}

a#marker1 {
	top: 220px;
	left: 340px;
}

a#marker2 {
	top: 194px;
	left: 358px;
}

a#marker3 {
	top: 202px;
	left: 400px;
}

a#marker4 {
	top: 217px;
	left: 452px;
}

a#marker5 {
	top: 229px;
	left: 498px;
}

a#marker6 {
	top: 246px;
	left: 544px;
}


/* Map Information Styles */

div.mapInfo {
	display: none;
}

a.battleMarkers:hover + div.mapInfo {
	display: block;
}