@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: Catherine Carter
   Date:   9/29/2025
   
   Filename: ss_layout.css

*/


/* Article Styles */

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



/* First Line and Drop Cap Styles */

article p:first-of-type {
    font-size: 1.25em;
}

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;
    font-family: serif;
    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;
}

#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;
}