@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:Lillian Walker 
   Date:  10/3/25
   
   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-size: 4em;
    float: left;
    line-height: 0.8em;
    margin-right: 5px;
    margin-bottom: 5px;
}
 

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


/* Map Styles */
#battleMap {
    width: 688px;
    margin: 20px auto;
    position: relative;
}

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



/* Interactive Map Styles */
a.battleMarkers {
    position: absolute;
}

/* Interactive Map Styles - Marker Positions */
#marker1 {
    top: 220px;
    left: 340px;
}

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

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

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

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

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



/* Map Information Styles */
.mapInfo {
    display: none;
}

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