body.game-page {
	background-image: url('/img/whitepaper.jpg');
}

#gamepage {
/*
crazy browser bug -- setting opacity kills the positioning.
	opacity: .9;
	*/
}

#pg
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
}
#gamepage #page
{
	position: static;
	margin-top: 210px;
	margin-left: auto;
	margin-right: auto;
	width: 447px;
	padding-left: 25px;
	padding-right: 25px;
	font-family: ChanticleerRomanRegular;

}

#fxd
{
	position: fixed;
	width: 100%;
	height: 0;
}

#cntr
{
	position: relative;
	width: 605px;
	height: 1px;
	margin-left: auto;
	margin-right: auto;
}

	/*
	pointer-events doesn't work in ie
	this kludge is a workaround for the fact that
	the fixed background frame prevents you from editing
	text boxes in the back (scrolling) panel.
	originally the background image was attached
	to #cntr, but then adding pointer-events:none
	would make it so you could not click on the
	compass because it is a child of cntr.

	so #k is the background image but #cntr is the
	relative-positioned div that keeps the whole
	thing centered.
	*/

#k
{
	position: absolute;
	pointer-events: none;
	left: 0px;
	top: 0px;
	width: 605px;
	height: 600px;
	background-image: url(../img/gameframe_top.png);
	background-repeat: no-repeat;
}

#gamepage #floorplan
{
	position: absolute;
	left: 27px;
	top: 52px;
}

#mapcont {
	position: absolute;
	left: 427px;
	top: 52px;
}


#shim
{
	position: absolute;
	background-image: url(../img/shim.png);
	width: 570px;
	height: 50px;
	background-repeat: no-repeat;
	top: -2;
	left: 14px;
}



.pageborder {
	/* top, right, bottom, left */
	border-width: 5px 50px 62px 50px;
	border-style: solid;
	-moz-border-image: url('../img/gameframe_bottom.png') 5 50 62 50 fill repeat;
	border-image: url('../img/gameframe_bottom.png') 5 50 62 50 fill repeat;
	-webkit-border-image: url('../img/gameframe_bottom.png') 5 50 62 50 repeat;
}

#contentdiv .userResponse,
#gamepage #page .userResponse
{
	margin-top: 5px;
	min-height: 150px;
	color: #888888;
}


.playerentry {
	margin-bottom: 20px;
}

.divider1
{
	background-image: url(../img/divider1.png);
}

.divider2
{
	background-image: url(../img/divider2.png);
}
.postgamelink {
	font-size: 16px;
}



/* meet the new CSS
same as the old CSS */


body.game-page {
	padding: 0px;
	margin: 0px;
	background-image: url('../img/woodgrain.jpg');
}

#huh {
	width: 100%;
	position: fixed;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

#topdiv {
	/*
	border-image: url('../img/gameframe_top_improved.png') 267 60 6 60 repeat;
	*/
	border-image: url('../img/gameframe_top_nostruts.png') 267 220 6 220 repeat;
	border-style: solid;
	border-width: 267px 220px 6px 220px;

	height: 30%;
	min-width: 292px;

	margin-left: 40px;

	/*
	Okay so this kludge (and the kludge below)
	are to prevent a weird visual bug.
	Change this from 48 from 40 and the other
	number from 13 to 10 and look at the lower
	right corner of the frame as you resize to
	minimum width.  The bottom frame will stop
	shrinking a few pixels after the top.
	Yes I realize this is an unholy mess and I'm
	looking forward to getting the time to completely
	rewrite it all.
	*/
	margin-right: 48px;
}

#bottomdiv {
	border-image: url('../img/gameframe_bottom.png') 0 293 66 293 repeat;
	border-style: solid;
	border-width: 0px 293px 66px 293px;

	/*
	See apologia above about this kludge.
	Should be 10 but adjusted to 13 because
	of reasons.
	*/
	margin-left: 13px;

	margin-right: 10px;
	min-width: 131px;
	/*
	min-width: 89px;
	*/
}

#topbg {
	background-image: url('../img/whitepaper.jpg');
	margin-left: 40px;
	margin-right: 40px;
	min-width: 740px;
	/*
	min-width: 740px;
	*/
	/*
	min-width: 698px;
	*/
}

#contentdiv {
	margin-left: -220px;
	margin-right: -220px;
	background-image: url('../img/gameframe_bottom_tile.png');
	padding-top: 250px;
	font-size: 1.4em;
	font-family: ChanticleerRomanRegular;
	min-height: 200px;
	/*
	What a mess!
	*/
	margin-bottom: -25px;
}

#toppositioner {
	margin-top: -267px;
	text-align: center;
	position: relative;
}

#topmiddle {
	width: 292px;
	height: 213px;
	/*
	background-image: url('../img/gameframe_middle_improved.png');
	*/
	background-image: url('../img/gameframe_middle_nostruts.png');
	left: 0px;
	top: 0px;
	display: inline-block;
}


#topleft {
	position: absolute;
	left: 0px;
	top: 0px;
	/*
	background-image: url('../img/dummy_realm.png');
	*/
	width: 155px;
	height: 155px;
	margin-top: 52px;
	/*
	margin-left: -24px;
	*/
	margin-left: -184px;
}
#leftstrut {
	position: absolute;
	top: -20px;
	left: 142px;
	background-image: url('../img/strut_left.png');
	width: 42px;
	height: 181px;
	z-index: 10;
}
#topleftbg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 155px;
	height: 155px;
	background-color: white;
	opacity: .5;
}

#topleft canvas {
	position: absolute;
	top: 0px;
	left: 0px;
}

#topleft #rlm {
	z-index: 1;
}

#topleft #rlmoverlay {
	z-index: 2;
	pointer-events: none;
}

#topright {
	position: absolute;
	top: 0px;
	right: 0px;
	/*
	background-image: url('../img/dummy_map.png');
	*/
	width: 155px;
	height: 155px;
	margin-top: 52px;
	margin-right: -184px;
}
#rightstrut {
	position: absolute;
	top: -20px;
	right: 142px;
	background-image: url('../img/strut_right.png');
	width: 42px;
	height: 181px;
	z-index: 10;
}

#compassdiv {
	width: 168px;
	height: 168px;
	background-image: url('../img/compassrose2.png');
	margin-left: 62px;
	margin-top: 50px;
	pointer-events: auto;
}

#contentdiv .paragraphblock .paragraph {
	padding-left: 40px;
	padding-right: 40px;
}

.endmessage {
	padding-left: 40px;
	text-align: center;
	font-size: 1.1em;
}
.endlink {
	margin-top: 50px;
	font-size: 18px;
	font-family: 'Caudex';
	text-align: center;
}


.waitmessage {
	margin-left: 40px;
	margin-right: 60px;
	margin-top: 20px;
	margin-bottom: 10px;
	color: #404040;
	font-weight: bold;
	background-color: #eeeeee;
	font-size: 12pt;
	padding-left:6px;
	padding-right:6px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 6px;
	font-family: 'Caudex';
	border: 2px solid #404040;
}

/* Game page overrides - remove story editor background colors */
body.game-page .paragraphblock.passthrough,
body.game-page .paragraphblock.challenge,
body.game-page .paragraphblock.battle,
body.game-page .paragraphblock.exitwinning,
body.game-page .paragraphblock.exitlosing,
body.game-page .paragraphblock.exittomap,
body.game-page .paragraphblock.unlocklocation {
	background-color: transparent;
	cursor: default;
}

/* Make content fill the viewport */
body.game-page {
	min-height: 100vh;
	overflow-x: hidden;
}

body.game-page #topbg {
	min-height: calc(100vh - 80px);
}

body.game-page #contentdiv {
	min-height: calc(100vh - 350px);
	padding-bottom: 50px;
}