@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: Jakob Bauer
   Date:   2021-03-01
   
   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;
}
area>p:first-of-type::first-letter{
   font-size: 4em;
   font-family: serif;
   float: left;
   line-height: 0.8em;
   margin: 0px 5px 5px 0px;
}

 

/* Aside Styles */
aside {
   float: left;
   width: 768px;
}



/* Map Styles */
#battleMap
{
   width: 688px;
   margin: 20px auto;
   position: relative;
}
#mapImage{
   display: block;
   width: 100%;
}

#marker1{
   top: 220px;
   left: 340px;
}
#marker2{
   top: 194px;
   left: 358px;
}

#marker3{
   top: 202px;
   left: 400px;
}
#marker4{
   top: 217x;
   left: 452px;
}
#marker5{
   top: 229px;
   left: 498px;
}
#marker6{
   top: 246px;
   left: 544px;
}
/* Interactive Map Styles */
.battleMarkers{
   position: absolute;
}



/* Map Information Styles */

div.mapInfo{
   display: none;
}

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