body {
    background-color:  rgb(189,189,119);
 /*   font-size: 1.05vw; */
}
h1, h2, h3, h4, h5 {
    text-align: center;
}
table {
    border: .1em solid rgb(20, 29, 4);
    margin: auto;
}
tr:nth-child(even) {
    background-color: gray;
}
sup {
    font-size: .5em;
}
.nd {
    font-size: 66%;
}
.hand {
    cursor: pointer;
}
.grow {
    transition: transform 0.25s ease;
}
.grow:hover {
    -webkit-transform: scale(1.8); /* or some other value */
    transform: scale(1.8);
    z-index: 1;
}
.diceContainer {
    position: relative;
    width: 72.5em;
    height: 8em;
}
.allDice {
    position: absolute;
    width: 10em;
    left: 2em;
}
.dAndd {
    position: absolute;
    width: 12em;
    left: 30em;
}
.oneDice {
    position: absolute;
    width: 9em;
    right: 2em;
    top: -2em;
}
.lophatorPic:hover {
    cursor: pointer;
}
.lophatorPicPopUp {
    display: none;
    position: absolute;
    width: 300px;
}
.lophatorPic:hover + .lophatorPicPopUp {
    display: inline-block;
    z-index: 1;
}
.qaratonPopUp {
    display: none;
    position: absolute;
    width: 300px;
}
.qaraton:hover {
    cursor: pointer;
}
.qaraton:hover + .qaratonPopUp {
    display: inline-block;
    z-index: 1;
}
.fortuneBlightedPopUp {
    display: none;
    position: absolute;
    width: 300px;
}
.fortuneBlighted:hover {
    cursor: pointer;
}
.fortuneBlighted:hover + .fortuneBlightedPopUp {
    display: inline-block;
    z-index: 1;
}

.outline {
    position: relative;
    height: 2.2em;
}
.verticalLine {
    position: relative;
    width: 2em;
    height: 86em;
    border-left: .0125em solid black;
    left: 29.5em;
    bottom: 86em;
}
.oFirst {
    left: 2.4em;
    font-size: 2.3em;
    width: 34em;
}
.oFirst:hover {
    border: .2em solid pink;
    opacity: .7;
}
.oSecond {
    left: 4.9em;
    font-size: 2.2em;
    width: 33.1em;
}
.oSecond:hover {
    border: .2em dashed snow;
    opacity: .7;
}
.oThird {
    left: 7.7em;
    font-size: 2.1em;
    width: 32.1em;
}
.oThird:hover {
    border: .2em dotted green;
    opacity: .7;
}
.oForth {
    font-size: 2em;
    left: 10.8em;
    width: 31.1em;
}
.oForth:hover {
    border: .2em dotted greenyellow;
    opacity: .7;
}
.keepCentered {
    position: relative;
    padding: 2em;
}
.lZero {
    left: 0em;
}
.lHalf {
    left: 5.5em;
}
.lOne {
    left: 10.8em;
}
.lOneHalf {
    left: 16.25em;
}
.lTwo {
    left: 21.6em;
}
.map {
    width: 50.25em;
    margin: auto;
}
.map2 {
    width: 62.4em;
    margin: auto;
}
.magminCentered {
    position: relative;
    width: 20em;
    height: 20em;
    text-align: center;
}
.mcOne {
    left: 10%;
}
.mcTwo {
    left: 20%;
}
.firstEncounter {
    margin-left: 5em;
}
.centerGiaMap {
    display: flex;
    justify-content: center;
}
.mapBackground {
    position: absolute;
    width: 1.59375em;
    height: 2.0625em;
    border: 0.03125em dashed black;
    left: 26em;
    bottom: 8.8em;
    cursor: pointer;
}
.mapBackgroundPopUp {
    position: absolute;
    visibility: hidden;
    width: 425px;
    height: 550px;
    background-image: url("kahar/deathValley.png");
    background-position: center;
    background-size: contain;
    border: 2px solid black;
    left: 700px;
    bottom: 1px;
}
.mapBackground:hover + .mapBackgroundPopUp {
    visibility: visible;
}
.mapUnfold {
    width: 1000px;
    height: auto;
}
.mapUnfoldInner {
    margin: auto;
}
.lophator {
    width: 70em;
   /* border: .2em solid yellow; */
    margin: auto;
}
.lophatorMapContainer {
    width: 60em;
  /*  border: .2em dashed brown; */
    margin: auto;
}
.intro {
    width: 74.5em;
   /* border: .2em dashed purple; */
}
.secondTro {
    width: 69.25em;
  /*  border: .2em dashed red; */
}
.outro {
    width: 63.8em;
  /*  border: .2em dotted blue; */
}
.thirdTro {
    width: 58.6em;
   /* border: .2em solid sandybrown; */
}
.frontGate {
    position: relative;
    width: 20em;
    height: 15em;
   /* border: .2em dotted sienna; */
    margin: auto;
}
.wasteland {
    width: 90%;
    height: 24em;
    border: .05em dashed pink;
}
.wasteland2 {
    width: 1400px;
    height: 1000px;
}
.wastelandLeft {
    left: 5%;
}
.wastelandCenter {
    left: 35%;
}
.wastelandRight {
    right: 5%;
}
.jaggedRock {
    position: absolute;
    width: 28%;
    text-align: center;
    margin: auto;
}
.outerEncounterContainer {
    position: relative;
    width: 100%;
    height: 168em;
    margin: auto;
}
.encounterContainer {
    position: relative;
    width: 26.5em;
    height: 86em;
}
.ecOne {
    left: 1em;
}
.ecTwo {
    left: 31.5em;
    bottom: 172em;
}
.defenseOfKeep {
    position: relative;
    width: 9em;
    height: 9em;
    border: .1em dashed pink;
}
.yuantiPureBlood {
    position: absolute;
    width: 9em;
    text-align: center;
}
.kone {
    left: 2em;
}
.ktwo {
    left: 8em;
}
.kthree {
    left: 16em;
}
.kfour {
    left: 24em;
}
.kfive {
    left: 52.5em;
    bottom: 46.85em;
}
.decoItalic {
    font-style: italic;
}
.dungeonMasterBox {
    position: relative;
    width: 76em;
    background-color: lemonchiffon;
    border: .2em solid gray;
    font-size: .5em;
    margin: auto;
    padding: 2em;
}
.tooltip {
    position: relative;
    cursor: pointer;
}
.tooltiptext {
    position: absolute;
    display: inline-block;
    visibility: hidden;
    color: white;
    background-color: lightblue;
    border: 2px solid lightblue;
}

.tooltip:hover + .tooltiptext {
    visibility: visible;
}
.mapCenter {
    position: relative;
    width: 45em;
    height: 36em;
    left: 17%;
}
.mapCenterScroll {
    position: relative;
    width: 84em;
    height: 98em;
    left: -11em;
    background-image: url("scrollForMap.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.mapCenter2 {
    position: relative;
    width: 50em;
    height: 68em;
    left: 18em;
    top: 15.2em;
    background-image: url("Kahar1J.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}
.mapTitle {
    position: absolute;
    width: 2.8em;
    height: 1em;
    font-size: 2em;
    font-weight: bolder;
    left: 11em;
    top: 2em;
}
.mapTitleArticle {
    position: absolute;
    width: 30em;
    height: 1em;
    left: 11em;
    top: 8em;
    text-align: center;
}
.kingsRoad {
    position: absolute;
    width: 49.9em;
    height: .1em;
    transform: rotate(.5deg);
    top: 14.45em;
}
.kingsRoadWords {
    position: absolute;
    visibility: hidden;
    width: 7em;
    height: 1.3em;
    background-color: #ffff;
    left: 22em;
    top: 12em;
}
.kingsRoad:hover {
    cursor: pointer;
    border: .05em dotted red;
}
.kingsRoad:hover + .kingsRoadWords {
    visibility: visible;
}
.chapel {
    position: absolute;
    width: .2em;
    height: .2em;
    left: 23em;
    top: 28.1em;
}
.chapelWords {
    position: absolute;
    visibility: hidden;
    width: 5em;
    height: 1.3em;
    background-color: #ffff;
    left: 21em;
    top: 24em;
}
.chapel:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.chapel:hover + .chapelWords {
    visibility: visible;
}
.keep {
    position: absolute;
    width: .2em;
    height: .2em;
    left: 25em;
    top: 28.1em;
}
.keepWords {
    position: absolute;
    visibility: hidden;
    width: 4em;
    height: 1.3em;
    background-color: #ffff;
    left: 23em;
    top: 24.4em;
}
.keep:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.keep:hover + .keepWords {
    visibility: visible;
}
.library {
    position: absolute;
    width: .2em;
    height: .2em;
    left: 27em;
    top: 28.1em;
}
.libraryWords {
    position: absolute;
    visibility: hidden;
    width: 5em;
    height: 1.3em;
    background-color: #ffff;
    left: 24em;
    top: 24em;
}
.library:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.library:hover + .libraryWords {
    visibility: visible;
}
.court {
    position: absolute;
    width: .2em;
    height: .2em;
    left: 25em;
    top: 30.2em;
}
.courtWalls {
    position: absolute;
    visibility: hidden;
    width: 21em;
    height: 3em;
    top: 0em;
    left: -10.2em;
}
.courtEastWall {
    position: absolute;
    visibility: inherit;
    width: 4em;
    height: 4em;
    border-left: .3em dashed orange;
    transform: rotate(45deg);
    top: .8em;
    left: 1em;
}
.courtTopWall {
    position: absolute;
    visibility: inherit;
    width: 14.4em;
    height: 3em;
    border-top: .3em dashed orange;
    left: 3.2em;
}
.courtWestWall {
    position: absolute;
    visibility: inherit;
    width: 4em;
    height: 4em;
    border-right: .3em dashed orange;
    top: .8em;
    left: 15.6em;
    transform: rotate(315deg);
}
.courtBottomWall {
    position: absolute;
    visibility: inherit;
    width: 100%;
    height: 4em;
    border-bottom: .3em dashed orange;
    bottom: -.2em;
    transform: rotate(.5deg);
}
.courtWords {
    position: absolute;
    visibility: hidden;
    width: 12em;
    height: 1.3em;
    background-color: #ffff;
    left: 20em;
    top: 26.6em;
}
.court:hover {
    cursor: pointer;
    border: .15em dotted orange;
}
.court:hover .courtWalls {
    visibility: visible;
}
.court:hover + .courtWords {
    visibility: visible;
}
.outerWalls {
    position: absolute;
    width: 46em;
    height: 46em;
    left: 1.9em;
    top: 21em;
}
.outerWalls:hover .walls {
    visibility: visible;
}
.walls {
    position: absolute;
    visibility: hidden;
    width: 44em;
    height: 44em;
    left: 1.1em;
    top: 1em;
}
.wallsWords {
    position: absolute;
    width: 8.5em;
    height: 1em;
    padding: .5em;
    font-size: xx-large;
    font-weight: 900;
    left: -.25em;
    top: -.2em;
    color: brown;
}
.wallsWords:hover {
    cursor: pointer;
    border: .08em dotted brown;
}
.northWestWall{
    position: absolute;
    visibility: inherit;
    width: 4em;
    height: 29em;
    left: 11.2em;
    top: -2em;
    border-left: .4em dashed brown;
    transform: rotate(45.6deg);
}
.northEastWall {
    position: absolute;
    visibility: inherit;
    width: 4em;
    height: 29.2em;
    right: 10.9em;
    top: -1.9em;
    border-right: .4em dashed brown;
    transform: rotate(-45deg);
}
.interiorWall {
    position: absolute;
    visibility: inherit;
    width: 19.8em;
    height: 2em;
    border-top: .4em dashed brown;
    top: 11.2em;
    left: 12.2em;
    transform: rotate(.5deg);
}
.westWall {
    position: absolute;
    visibility: inherit;
    width: 4em;
    height: 20.6em;
    left: 1em;
    top: 21.3em;
    border-left: .4em dashed brown;
    transform: rotate(.8deg);
}
.eastWall {
    position: absolute;
    visibility: inherit;
    width: 4em;
    height: 20.6em;
    right: 1.3em;
    top: 21.8em;
    border-right: .4em dashed brown;
    transform: rotate(.9deg);
}
.southWall {
    position: absolute;
    visibility: inherit;
    width: 41.5em;
    height:2em;
    left: .8em;
    top: 40.2em;
    border-bottom: .4em dashed brown;
    transform: rotate(.8deg);
}
.outerRoyalWalls {
    position: absolute;
    width: 16em;
    height: 7.5em;
    left: 17em;
    top: 22.8em;
}
.outerRoyalWalls:hover .royalWalls {
    visibility: visible;
}
.royalWalls {
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: 100%;
}
.royalWallsWords {
    position: absolute;
    visibility: inherit;
    width: 8.5em;
    height: 1em;
    padding: .5em;
    font-size: large;
    font-weight: 900;
    left: 2em;
    top: -2em;
    color: red;
}
.royalWestWall {
    position: absolute;
    visibility: inherit;
    width: 10em;
    height: 10em;
    border-left: .4em dashed red;
    border-top: .4em dashed red;
    transform: rotate(45deg);
    top: 2.2em;
    left: 3em;
}
.royalSouthWall {
    position: absolute;
    visibility: inherit;
    width: 90%;
    height: 100%;
    border-bottom: .4em dashed red;
    left: 1em;
}
.frontGate2 {
    position: absolute;
    width: 1em;
    height: .2em;
    left: 24.5em;
    top: 22.9em;
}
.frontGate2Words {
    position: absolute;
    visibility: hidden;
    width: 19.5em;
    height: 1.3em;
    background-color: #ffff;
    left: 15em;
    top: 21em;
}
.frontGate2:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.frontGate2:hover + .frontGate2Words {
    visibility: visible;
}
.tower {
    position: absolute;
    width: .3em;
    height: .3em;
}
.tower:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.towerWords {
    position: absolute;
    background-color: white;
    visibility: hidden;
    width: 4.5em;
    height: 1.3em;
}
.tower2Position {
    left: 35.2em;
    top: 33.2em;
}
.tower2Words {
    left: 34em;
    top: 31.5em
}
.tower2Position:hover + .tower2Words {
    visibility: visible;
}
.tower3Position {
    left: 45.5em;
    top: 43.7em;
}
.tower3Words {
    left: 44em;
    top: 42em;
}
.tower3Position:hover + .tower3Words {
    visibility: visible;
}
.tower4Position {
    left: 45.2em;
    top: 64.4em;
}
.tower4Words {
    left: 44em;
    top: 63em;
}
.tower4Position:hover + .tower4Words {
    visibility: visible;
}
.tower5Position {
    left: 24.5em;
    top: 64.1em;
}
.tower5Words {
    left: 23.4em;
    top: 62em;
}
.tower5Position:hover + .tower5Words {
    visibility: visible;
}
.tower6Position {
    left: 3.7em;
    top: 64em;
}
.tower6Words {
    left: 2.6em;
    top: 62em;
}
.tower6Position:hover + .tower6Words {
    visibility: visible;
}
.tower7Position {
    left: 4em;
    top: 43.1em;
}
.tower7Words {
    left: 2.9em;
    top: 41.1em;
}
.tower7Position:hover + .tower7Words {
    visibility: visible;
}
.tower8Position {
    left: 14.6em;
    top: 33em;
}
.tower8Words {
    left: 13.5em;
    top: 31em;
}
.tower8Position:hover + .tower8Words {
    visibility: visible;
}
.thePrison {
    left: 24.9em;
    top: 32.8em;
}
.thePrisonWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 4.8em;
    height: 1.3em;
    left: 23em;
    top: 31em;
}
.thePrison:hover + .thePrisonWords {
    visibility: visible;
}
.appertonsArch {
    left: 24.9em;
    top: 33.2em;
}
.appertonsArchWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6.6em;
    height: 1.3em;
    left: 22.2em;
    top: 31.6em
}
.appertonsArch:hover + .appertonsArchWords {
    visibility: visible;
}
.mojaPosition {
    position: absolute;
    width: 3em;
    height: 1.5em;
    left: 23em;
    top: 36em;
}
.mojaWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6em;
    height: 1.5em;
    left: 22em;
    top: 34.5em;
}
.mojaPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.mojaPosition:hover + .mojaWords {
    visibility: visible;
}
.theSwitchBackPosition {
    position: absolute;
    width: 4em;
    height: 2.8em;
    left: 29em;
    top: 35.6em;
}
.theSwitchBackWords {
    position: absolute;
    visibility: hidden;
    width: 6.8em;
    height: 1.5em;
    background-color: white;
    left: 27.8em;
    top: 33.8em;
}
.theSwitchBackPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.theSwitchBackPosition:hover + .theSwitchBackWords {
    visibility: visible;
}
.theLushPosition {
    position: absolute;
    width: 12em;
    height: 6em;
    left: 19.2em;
    top: 37.6em;
}
.theLushWords {
    position: absolute;
    visibility: hidden;
    width: 4em;
    height: 1.5em;
    background-color: white;
    left: 23.2em;
    top: 35.6em;
}
.theLushPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.theLushPosition:hover + .theLushWords {
    visibility: visible;
}
.theCliffsPosition {
    position: absolute;
    width: 5em;
    height: 14.2em;
    left: 31.8em;
    top: 38.4em;
}
.theCliffsWords {
    position: absolute;
    visibility: hidden;
    width: 4.4em;
    height: 1.5em;
    background-color: white;
    left: 32.2em;
    top: 36.4em;
}
.theCliffsPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.theCliffsPosition:hover + .theCliffsWords {
    visibility: visible;
}
.highPasturePosition {
    position: absolute;
    width: 4em;
    height: 13em;
    left: 38em;
    top: 44.2em;
}
.highPastureWords {
    position: absolute;
    visibility: hidden;
    width: 9.4em;
    height: 1.5em;
    background-color: white;
    left: 36em;
    top: 42.2em;
}
.highPasturePosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.highPasturePosition:hover + .highPastureWords {
    visibility: visible;
}
.theOasisPosition {
    position: absolute;
    width: 13.2em;
    height: 6.6em;
    left: 18.94em;
    top: 43.8em;
}
.theOasisWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6.4em;
    height: 1.5em;
    left: 22em;
    top: 41.8em;
}
.theOasisPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.theOasisPosition:hover + .theOasisWords {
    visibility: visible;
}
.paloVerdeHillsPosition {
    position: absolute;
    width: 10.4em;
    height: 2.4em;
    left: 20.2em;
    top: 50.4em;
}
.paloVerdeHillsWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6.6em;
    height: 1.5em;
    left: 22.2em;
    top: 48.8em;
}
.paloVerdeHillsPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.paloVerdeHillsPosition:hover + .paloVerdeHillsWords {
    visibility: visible;
}
.mbiliPosition {
    position: absolute;
    width: 2em;
    height: 1.3em;
    left: 31.5em;
    top: 52.8em;
}
.mbiliWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6em;
    height: 1.5em;
    left: 30em;
    top: 50.8em;
}
.mbiliPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.mbiliPosition:hover + .mbiliWords {
    visibility: visible;
}
.tatuPosition {
    position: absolute;
    width: 3.2em;
    height: 1.7em;
    left: 30.8em;
    top: 61.8em;
}
.tatuWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6em;
    height: 1.5em;
    left: 30em;
    top: 59.8em;
}
.tatuPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.tatuPosition:hover + .tatuWords {
    visibility: visible;
}
.nnePosition {
    position: absolute;
    width: 1em;
    height: 2em;
    left: 17.6em;
    top: 45em;
}
.nneWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 5em;
    height: 1.5em;
    left: 16em;
    top: 43em;
}
.nnePosition:hover{
    cursor: pointer;
    border: .15em dotted red;
}
.nnePosition:hover + .nneWords {
    visibility: visible;
}
.tanoPosition {
    position: absolute;
    width: 1.5em;
    height: 2em;
    left: 18.2em;
    top: 52em;
}
.tanoWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6em;
    height: 1.5em;
    left: 16em;
    top: 50em;
}
.tanoPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.tanoPosition:hover + .tanoWords {
    visibility: visible;
}
.sitaPosition {
    position: absolute;
    width: 2.2em;
    height: 1em;
    left: 19.6em;
    top: 63.2em;
}
.sitaWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 5.3em;
    height: 1.5em;
    left: 18em;
    top: 61.2em;
}
.sitaPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.sitaPosition:hover + .sitaWords {
    visibility: visible;
}
.sabaPosition {
    position: absolute;
    width: 4.8em;
    height: 6em;
    left: 4.3em;
    top: 58em;
}
.sabaWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 5.3em;
    height: 1.5em;
    left: 4.3em;
    top: 56em;
}
.sabaPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.sabaPosition:hover + .sabaWords {
    visibility: visible;
}
.nanePosition {
    position: absolute;
    width: 4em;
    height: 7.2em;
    left: 4.2em;
    top: 38.2em;
}
.naneWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6em;
    height: 1.5em;
    left: 4em;
    top: 35.4em;
}
.nanePosition:hover {
    cursor: pointer;
    border: 1.5em dotted red;
}
.nanePosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.nanePosition:hover + .naneWords {
    visibility: visible;
}
.mtumshiPosition {
    position: absolute;
    width: 3.8em;
    height: 2.8em;
    left: 19em;
    top: 26.7em;
}
.mtumshiWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 7.6em;
    height: 1.5em;
    left: 18.5em;
    top: 24.7em;
}
.mtumshiPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.mtumshiPosition:hover + .mtumshiWords {
    visibility: visible;
}
.braeksPosition {
    position: absolute;
    width: 1.5em;
    height: 1.6em;
    left: 35.6em;
    top: 51.5em;
}
.braeksWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 12em;
    height: 1.5em;
    left: 32em;
    top: 49.5em;
}
.braeksPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.braeksPosition:hover + .braeksWords {
    visibility: visible;
}
.barracksA {
    left: 35.1em;
    top: 36.3em;
}
.barracksAWords {
    left: 33.1em;
    top: 34.3em;
}
.barracksA:hover + .barracksAWords {
    visibility: visible;
}
.barracksB {
    left: 37.1em;
    top: 46.5em;
}
.barracksBWords {
    left: 35.1em;
    top:44.5em;
}
.barracksB:hover + .barracksBWords {
    visibility: visible;
}
.barracksC {
    left: 36.5em;
    top: 63.2em;
}
.barracksCWords {
    left: 34.5em;
    top: 61.2em;
}
.barracksC:hover + .barracksCWords {
    visibility: visible;
}
.barnPosition {
    left: 43.1em;
    top: 44.3em;
}
.barnWords {
    left: 41.5em;
    top: 42.3em;
}
.barnPosition:hover + .barnWords {
    visibility: visible;
}
.stablesPosition {
    left: 42.95em;
    top: 63.5em;
}
.stablesWords {
    left: 42.1em;
    top: 61.5em;
}
.stablesPosition:hover + .stablesWords {
    visibility: visible;
}
.scrubBrushHillsPosition {
    position: absolute;
    width: 8em;
    height: 8em;
    transform: skewX(34deg);
    left: 25.4em;
    top: 53.5em;
}
.scrubBrushHillsWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 7.5em;
    height: 1.5em;
    left: 23em;
    top: 51.5em;
}
.scrubBrushHillsPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.scrubBrushHillsPosition:hover + .scrubBrushHillsWords {
    visibility: visible;
}
.canyonsPosition {
    position: absolute;
    width: 3.6em;
    height: 8em;
    transform: skewX(34deg);
    left: 22em;
    top: 54.5em;
}
.canyonsWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    text-align: center;
    width: 9.5em;
    height: 1.5em;
    left: 15.8em;
    top: 52.5em;
}
.canyonsPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.canyonsPosition:hover + .canyonsWords {
    visibility: visible;
}
.sandStoneSpiresPosition {
    position: absolute;
    width: 1.7em;
    height: 3.7em;
    transform: skewX(24deg);
    left: 21.5em;
    top: 59.5em;
}
.sandStoneSpiresWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 9.2em;
    height: 1.5em;
    left: 17em;
    top: 57.5em;
}
.sandStoneSpiresPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.sandStoneSpiresPosition:hover + .sandStoneSpiresWords {
    visibility: visible;
}
.sandFallAlleyPosition {
    position: absolute;
    width: 1.7em;
    height: 1.7em;
    transform: skewX(24deg);
    left: 25.2em;
    top: 62.3em;
}
.sandFallAlleyWords {
    position: absolute;
    visibility: hidden;
    background-color: white;
    width: 6.5em;
    height: 1.5em;
    left: 23em;
    top: 60.3em;
}
.sandFallAlleyPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.sandFallAlleyPosition:hover + .sandFallAlleyWords {
    visibility: visible;
}
.barrenKnollPosition {
    position: absolute;
    width: 7em;
    height: 2em;
    left: 8.5em;
    top: 58em;
}
.barrenKnollWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 8em;
    height: 1.5em;
    left: 8em;
    top: 56em;
}
.barrenKnollPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.barrenKnollPosition:hover + .barrenKnollWords {
    visibility: visible;
}
.crevicePosition {
    position: absolute;
    width: .5em;
    height: 9em;
    left: 5em;
    top: 47.3em;
}
.creviceWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 5em;
    height: 1.5em;
    left: 3em;
    top: 45.3em;
}
.crevicePosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.crevicePosition:hover + .creviceWords {
    visibility: visible;
}
.dryCreekBedPosition {
    position: absolute;
    width: 1.7em;
    height: 9.5em;
    transform: skewX(32deg);
    left: 12em;
    top: 40em;
}
.dryCreekBedWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 8em;
    height: 1.5em;
    left: 6em;
    top: 38em;
}
.dryCreekBedPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.dryCreekBedPosition:hover + .dryCreekBedWords {
    visibility: visible;
}
.sunderedScarpPosition {
    position: absolute;
    width: 8em;
    height: 2em;
    left: 7em;
    top: 36em;
}
.sunderedScarpWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 8em;
    height: 1.5em;
    left: 7em;
    top: 34em;
}
.sunderedScarpPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.sunderedScarpPosition:hover + .sunderedScarpWords {
    visibility: visible;
}
.staffDugGorgePosition {
    position: absolute;
    width: 5em;
    height: 4em;
    left: 26.2em;
    top: 31.3em;
}
.staffDugGorgeWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 8em;
    height: 1.5em;
    left: 24.8em;
    top: 29.3em;
}
.staffDugGorgePosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.staffDugGorgePosition:hover + .staffDugGorgeWords {
    visibility: visible;
}
.palmTreeLanePosition {
    position: absolute;
    width: 12em;
    height: 1.9em;
    left: 14.5em;
    top: 33.5em;
}
.palmTreeLaneWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 16em;
    height: 1.5em;
    left: 12.5em;
    top: 31.8em;
}
.palmTreeLanePosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.palmTreeLanePosition:hover + .palmTreeLaneWords {
    visibility: visible;
}
.theFieldsPosition {
    position: absolute;
    width: 2.4em;
    height: 17.2em;
    left: 16.2em;
    top: 36.8em;
}
.theFieldsWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 5em;
    height: 1.5em;
    left: 14.8em;
    top: 35em;
}
.theFieldsPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.theFieldsPosition:hover + .theFieldsWords {
    visibility: visible;
}
.chaparralFlatsPosition {
    position: absolute;
    width: 3.6em;
    height: 17.2em;
    transform: skewX(34deg);
    left: 12em;
    top: 46em;
}
.chaparralFlatsWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 7em;
    height: 1.5em;
    left: 4.5em;
    top: 44em;
}
.chaparralFlatsPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.chaparralFlatsPosition:hover + .chaparralFlatsWords {
    visibility: visible;
}
.outermostHillsPosition {
    position: absolute;
    width: 5em;
    height: 2.8em;
    left: 31.2em;
    top: 64.7em;
}
.outermostHillsWords {
    position: absolute;
    visibility: hidden;
    text-align: center;
    background-color: white;
    width: 9em;
    height: 1.5em;
    left: 29.8em;
    top: 63em;
}
.outermostHillsPosition:hover {
    cursor: pointer;
    border: .15em dotted red;
}
.outermostHillsPosition:hover + .outermostHillsWords {
    visibility: visible;
}
.lamiaZombie {
    position: relative;
    display: block;
    width: 20em;
    margin: auto;
    text-align: center;
}
.holeContainer {
    position: relative;
    width: 60em;
    height: 15em;
    border: .08em dotted green;
}
.holeArticle {
    position: absolute;
    width: 28em;
    height: 12.1em;
    left: 0em;
    padding: 1em;
    border: .14em solid brown;
}
.holePic {
    position: absolute;
    width: 25em;
    height: 14.1em;
    background-image: url(kahar/hole.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    left: 34em;
    text-align: center;
    border: .14em solid brown;
}
.undeadBattleMap {
    position: relative;
    display: inline-block;
    border: .13em solid brown;
    margin: 1em 2.45em;
}
.udBM1 {
    width: 24em;
    height: 24em;
}
.udBM2 {
    width: 24em;
    height: 13.6em;
}
.udBM3 {
    width: 24em;
    height: 33.95em;
}
.udBM4 {
    width: 24em;
    height: 24em;
}
#campaign {
    text-decoration: underline;
}
#longestDay {
    text-decoration: underline;
}
#fallOfFrontGate {
    text-decoration: underline;
}
#riverOfLava {
    text-decoration: underline;
}
#defenseOfTheKeep {
    text-decoration: underline;
}
#lophatorMap {
    font-style: oblique;
}
#lophatorMap:hover {
    cursor: pointer;
}
#mapLophator {
    font-style: italic;
}


@media (max-width: 768px) {
    body {
        width: 100%;
        margin: 0;
    }

    img {
        display: inline-block;
        max-width: 100%;
        height: auto;
    }

    table td img {
        max-width: 100%;
        height: auto;
     }

    .mcOne {
        left: 5%;
    }

    .mcTwo {
        left: 25%;
    }

    .outerEncounterContainer {
        width: 100%;
    }

    .encounterContainer {
        height: auto;
    }

    .jaggedRock {
        width: 14em;        
    }

    .wasteland {
        width: 100%;
        height: 15em;
    }

    .wastelandLeft {
        left: 0;
    }

    .wastelandCenter {
        left: 100%;
    }

    .wastelandRight {
        left: 200%;
    }
} /*


    .oFirst {
        width: 100%;
    }









    .firstEncounter {
        width: 18em;
        height: 12em;
    }

    .verticalLine {
        height: 24em;
    }

    .ecTwo {
        bottom: 110em;
    }

    .undeadBattleMap {
        transform: scale(0.7);
        margin: 1em 0.5em;
    }
    .holeContainer {
        width: 42em;
        height: 10.5em;
    }
    .holeArticle {
        width: 19.6em;
        height: 8.5em;
        padding: .7em;
    }
    .holePic {
        width: 17.5em;
        height: 10.5em;
        left: 23.8em;
    }
    .lamiaZombie {
        width: 14em;
    }

    .magminCentered {
        width: 14em;
    }


}
*/