body, html {

}
body {
}


/*
 * LAYOUT
 */
#panel {
	background: rgba(255,255,255,0.9);
    position: absolute;
	top: 0;
	left: 0;
    width: 20em;
    padding-left: 1em;
	padding-bottom: 1em;
    z-index: 100;
	transform-origin: 98px 67px;
    transform: rotateZ(0deg);
}
#gamearea {
    position: relative;
    width: 594px;
    height: 600px;
    border: 1px solid black;
    margin: 20px auto;
    background: url(../img/skies.jpg) top center no-repeat;
    background-size: cover;
    color: rgba(255,255,255,0.8);
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
}
#board {
    position: absolute;
    bottom: 0;
    width: 594px;
    height: 417px;
    background: url(../img/board-blank.png) no-repeat;
}
#score {
	position:absolute;
	top:0;
    width: 100%;
    font-weight: bold;
    font-size: 50px;
}
#scorestatus {
    position: absolute;
    top: 55px;
    width: 100%;
}
#messages {
    position: absolute;
    top: 75px;
    width: 100%;
}
#bank {
    display: none;
}
#bay {
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid white;
    border-top: 0;
    border-left: 0;
    background: rgba(0,0,0,0.1);
    text-transform: uppercase;
}


/*
 * PANEL STUFF
 */
#panel a {
	color: dodgerblue;
	text-decoration: underline;
	cursor: pointer;
}
#panel ol {

}
#panel li {
	margin-bottom: 0.4em;
}


/*
 * MENU STUFF
 */
#menu {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 20;
    text-align: right;
    background: url(../img/menu-mnu.png) top right no-repeat;
    min-width: 42px;
    min-height: 48px;
}
#menu.open {
    background: rgba(0,0,0,0.1);
    xwidth: 160px;
    padding-right: 8px;
}
ul#menu_contents {
    display: none;
    list-style: none;
    line-height: 18px;
}
#menu.open > ul#menu_contents {
	display: block;
}
ul#menu_contents a {
    display: block;
    padding: 3px 5px;
    border: 1px solid transparent;
}
ul#menu_contents a:hover {
    cursor: pointer;
    background: rgba(255,255,255,0.2);
    border: 1px solid white;
    color: pink;
}


/*
 * SECOND MENU
 */
#prices {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 20;
    background: url(../img/menu-val.png) top right no-repeat;
    min-width: 42px;
    min-height: 48px;
}
#prices > * { display: none; }
#prices.open > * { display: block; }
#prices.open {
    background: rgba(127,127,127,0.7);
    padding: 0 10px;
}
dl#pricelist {
    padding-left: 24px;
    background: url(../img/categories.png) no-repeat;
    text-transform: full-width;
    line-height: 24px;
}
#prices h6 {
    text-align: center;
    line-height: 14px;
    font-size: 14px;
}
dt {
	float: left;
	clear: left;
	margin-left: 10px;
}
dd {
	margin-left: 75px;
}


/*
 * BOARD STUFF
 */
.tile, .place {
    width: 108px;
    height: 90px;
	position:absolute;
}
.place {
    height: 54px;
}
.place.valid {
    background: url(../img/tiles/place-hover.png) no-repeat;
}
.place.valid.over {
	-webkit-filter: brightness(150%);
    -moz-filter:    brightness(150%);
    -ms-filter:     brightness(150%);
    -o-filter:      brightness(150%);
	filter: 		brightness(150%);
}
.place > .tile {
    top: -36px;
    left: 0;
}
#bay .tile {
    top: 10px;
    left: 4px;
}
.move .place .tile:hover:after,
.recycle .place .tile:hover:after {
	content: url(../img/spotlight.png);
	position: absolute;
	top: 15px;
	left: 0px;
}
.tile.current {
    z-index: 20;
}
.tile.current:hover {
	cursor: move;
}

#p11 {top: 127px; left: 81px; z-index:4}
#p12 {top: 181px; left: 81px; z-index:6}
#p13 {top: 235px; left: 81px; z-index:8}

#p21 {top: 100px; left: 162px; z-index:3}
#p22 {top: 154px; left: 162px; z-index:5}
#p23 {top: 208px; left: 162px; z-index:7}
#p24 {top: 262px; left: 162px; z-index:9}

#p31 {top:  73px; left: 243px; z-index:2}
#p32 {top: 127px; left: 243px; z-index:4}
#p33 {top: 181px; left: 243px; z-index:6}
#p34 {top: 235px; left: 243px; z-index:8}
#p35 {top: 289px; left: 243px; z-index:10}

#p41 {top: 100px; left: 324px; z-index:3}
#p42 {top: 154px; left: 324px; z-index:5}
#p43 {top: 208px; left: 324px; z-index:7}
#p44 {top: 262px; left: 324px; z-index:9}

#p51 {top: 127px; left: 405px; z-index:4}
#p52 {top: 181px; left: 405px; z-index:6}
#p53 {top: 235px; left: 405px; z-index:8}

/* must override above z-indexes */
.place.floaty {
	z-index: 15 !important;
	background: none;
}

.edge {
    background: url(../img/tiles/base-tile.png) no-repeat;
    padding-top: 35px;
    xpadding-left: 45px;
}

/* top: */
#f10 {top: 38px; left: 81px; z-index:2}
#f20 {top: 11px; left: 162px; z-index:1}
#f30 {top: -16px; left: 243px; z-index:0}
#f40 {top: 11px; left: 324px; z-index:1}
#f50 {top: 38px; left: 405px; z-index:2}

/* left: */
#f00 {top: 65px; left: 0px; z-index:3}
#f01 {top: 119px; left: 0px; z-index:5}
#f02 {top: 173px; left: 0px; z-index:7}
#f03 {top: 227px; left: 0px; z-index:9}

#f20.scoring,
#f10.scoring,
#f00.scoring,
#f01.scoring,
#f02.scoring {
    background: url(../img/tiles/base-tile-rarrow.png) no-repeat;
}

/* bottom: */
#f14 {top: 254px; left: 81px; z-index:10}
#f25 {top: 281px; left: 162px; z-index:11}
#f36 {top: 308px; left: 243px; z-index:12}
#f45 {top: 281px; left: 324px; z-index:11}
#f54 {top: 254px; left: 405px; z-index:10}

#f14.scoring,
#f25.scoring,
#f36.scoring,
#f45.scoring,
#f54.scoring {
    background: url(../img/tiles/base-tile-uparrow.png) no-repeat;
}

/* right: */
#f60 {top: 65px; left: 486px; z-index:3}
#f61 {top: 119px; left: 486px; z-index:5}
#f62 {top: 173px; left: 486px; z-index:7}
#f63 {top: 227px; left: 486px; z-index:9}

#f40.scoring,
#f50.scoring,
#f60.scoring,
#f61.scoring,
#f62.scoring {
    background: url(../img/tiles/base-tile-larrow.png) no-repeat;
}


/*
 * SCENERY
 */
.tree {
	position: absolute;
	width: 30px;
	height: 48px;
	background: url(../img/pine48.png);
}
.snowy {
	background: url(../img/pinesnow48.png);
}
.scoring .tree {
	display: none;
}


/*
 * SPECIAL MOVES
 */
.recycle #bay .tile,
.move #bay .tile {
    filter:         url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray;
	cursor: not-allowed;
	pointer-events: none;
}
.move #board {
	cursor: url(../img/cursor_magnet_off.png), move;
}
.move #board .place .tile:hover {
    cursor: url(../img/cursor_magnet_on.png), move;
}
.recycle #board {
	cursor: url(../img/cursor_digger_off.png), not-allowed;
}
.recycle #board .place .tile:hover {
	cursor: url(../img/cursor_digger_on.png), not-allowed;
}


/*
 * MESSAGES
 */
#messages a {
	font-size: 0.8em;
	margin-left: 1em;
	color: indianred;
}

#messages p.construction:before,
#messages p.construction:after {
	content: "🚧";
    margin: 0 1em;
}


/*
 * HIGHSCORES
 */
#highscores {
	width: 70%;
	height: 60%;
	padding: 1em;
	position: absolute;
	top: calc(20% - 1em);
	left: calc(15% - 1em);
	background: rgba(255,255,255,0.7);
	color: #666;
	z-index: 30;
	border-radius: 4px;
	box-shadow: rgba(0,0,0,0.2) 0 0 12px 6px;
	display: none;
}
.open {
	display: block !important;
}
#highscores form {
	display: none;
}
.finished #highscores form {
	display: block;
}
.finished #bay {
	display: none;
}
#highscores label {
	display: block;
	margin-bottom: 0.5em;
}
#highscores table {
	border-collapse: collapse;
	width: 90%;
	margin: 0 auto;
}
#highscores th, td {
	text-align: left;
}
input#myname {
	width: 8em;
}
input#website {
	position: absolute;
	left: -10000px;
}
.closer {
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 0.2em 0.5em;
	cursor: pointer;
}