/* Map CSS - ported from original map.css */

#topmapcontainer {
	position: relative;
	overflow: hidden;
	width: 900px;
	height: 692px;
	text-align: left;
}
#mapcontainer {
	position: absolute;
	width: 900px;
	height: 692px;
}
#captions, #hitareas, #c, #teastaindiv {
	position: absolute;
}
#offscreen {
	visibility: hidden;
}
.caption {
	position: absolute;
	font-size: 1.1em;
	width: 500px;
}
.callig {
    font-family: 'FloranteatLauraRegular', serif;
}
.capimg {
	position: absolute;
	width: 25px;
	height: 25px;
	background-size: contain;
	background-repeat: no-repeat;
}
.hitcell {
	position: absolute;
	cursor: pointer;
}
.townhit {
	position: absolute;
	cursor: pointer;
}
.label {
	position: absolute;
	font-size: .8em;
	color: #080808;
	font-family: Arial, Helvetica, sans-serif;
}

#map_bg {
	position: absolute;
	width: 900px;
	height: 692px;
}
#map_frame {
	position: absolute;
	width: 900px;
	height: 692px;
	background-image: url('/img/map_frame.png');
	pointer-events: none;
	z-index: 10; /* Above map key panels */
}
#map_name_background {
	position: absolute;
	width: 900px;
	height: 692px;
	background-image: url('/img/map_name.png');
	pointer-events: none;
}

/* Vertical center hack for map name - must use position: relative */
#mapname_outer {
	position: relative;
	left: 244px;
	top: -101px;
	display: table;
	border: none;
}
#mapname {
	min-width: 183px;
	height: 70px;
	font-size: 1.4em;
	color: #000000;
	display: table-cell;
	vertical-align: middle;
	border: none;
	text-align: center;
}

.offset {
	position: absolute;
	top: 192px;
	left: 100px;
}

/* Canvas should not capture pointer events - hitareas div handles them */
#c {
	pointer-events: none;
}

#hitareas {
	width: 700px;
	height: 500px;
}

/* Save indicator */
#savedot {
	position: absolute;
	background-color: black;
	width: 10px;
	height: 10px;
	left: 175px;
	top: 55px;
}

/* Override body background for map page */
body {
	background-image: url('/img/woodgrain.jpg');
}

/* Map Editor Page specific styles */
.map-actions {
	margin-top: 16px;
}

.published-note {
	margin-top: 16px;
	font-style: italic;
}

.mt16 {
	margin-top: 16px;
}

.dimmedtext {
	color: #666;
	font-size: 0.9em;
}

.map-hint {
	margin-top: 12px;
	font-size: 1.1em;
}

.map-hint p {
	margin: 4px 0;
}