body {
    font-family: 'Josefin Sans', sans-serif;
    margin-top: 0;
}

p {
	margin: 0.25em;
}

h1 {
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	float:right;
	font-size: 1em;
}

.imgResponsive {
	width: 100%;
	max-width: 612px;
}

.gameLink {
	display:block;
	width:100%;
	max-width: 612px;
	text-align: center;
	margin: auto;
}

.pieceHeading {
	display:inline;
	vertical-align: middle;
	font-weight: bold;
	font-size: 1.2em;
	margin-right: 1.5em;
}

#specials, #pieceSelector {
	display: inline-block;
}

#header {
	text-align: center;
	display: block;
	padding: .15em;
	padding-bottom: 1em;
	border: 0.05em solid #ccc;
	background-color: #f2ebc7;
}

h3 {
	margin-bottom: 0;
	margin-top: 1em;
}

.hidden {
	display: none !important;
}

.row {
	display: flex;
}

.tile {
	display: inline-block;
}

@media only screen and (max-width: 612px) {
.tile {
	height: 3.4vw;
	width: 3.4vw;
	}
}

@media (min-width: 613px) {
	.tile {
		height: 22px;
		width: 22px;
	}
}

.boundary {
	background-color: #e3b462;
}

.center {
	background-color: #f2ebc7;
}

.rail {
	background-image: url("../img/rail.png");
	background-size: contain;
}

.road {
	background-image: url("../img/road.png");
	background-size: contain;
}

.road.int {
	background-image: url("../img/road-int.png");
	background-size: contain;
}

.rail.int {
	background-image: url("../img/rail-int.png");
	background-size: contain;
}

.station {
	background: #999;
	outline: 0.05em solid #999;
	outline-offset: -0.05em;
}

.ew {
	transform:rotate(90deg);
}

.pending {
	background-color: #d3ebd4;
}

.green { color: green; }
.red { color: red; }

button, .button {
	margin: 0.2em;
	padding: 1em;
	font-size: 1em;
	border: 1px solid #999;
	border-radius: .5em;
	background-color: #eee;
	font-family: 'Josefin Sans', sans-serif;
	text-decoration: none;
}

button.ink {
	padding-top: 0.20em;
	padding-bottom: 0.21em;
	padding-left: 3em;
	padding-right: 3em;
	border-radius: 0.25em;
	margin-top: 0.15em;
	font-size: 2em;
	font-family: 'Dancing Script', cursive;
	color: green;
	vertical-align: middle;
}

button#resetManual {
	vertical-align: top;
	padding: 1em;
}

#messages {
	color: red;
	text-align: center;
	margin: auto;
	padding: .5em;
}

#namedPiece { display: inline-block; }

#roadI, #roadL, #roadT, #railI, #railL, #railT, #overpass, #stationL, #stationI, { border: 0.05em solid #333; }

.bigSquareTop, .bigSquareMid, .bigSquareBot {
	display:flex;
	border-left: 0.05em solid #e3b462;
	border-right: 0.05em solid #e3b462;
}

.bigSquareTop {
	border-top: 0.05em solid #e3b462;

}

.bigSquareBot {
	border-bottom: 0.05em solid #e3b462;
}

#reverseBtn {
	display:inline-block;
	padding: 0;
	height: 9vw;
	width: 9vw;
	max-height: 1.8em;
	max-width: 1.8em;
	background: url("../img/flip.png");
	background-size: contain;
	border-color: green;
}

#reversePiece {
	vertical-align: top;
}

.invalid {
	background-color: red !important;
}

.container {
	max-width: 612px;
	margin: auto;
}

#bottom, .start {
	text-align: center;
	margin: auto;
}

#startBtn {
	font-size: 2em;
	margin-bottom: .75em;
}

#exitsScore, #longestRoad, #longestRail, #centerTiles {
	font-family: 'Dancing Script', cursive;
	color: green;
}

#errors {
	color: red;
	font-family: 'Dancing Script', cursive;
}

#results {
	text-align: center;
}

#scoreBox {
	border: 1px solid #e3b462;
	padding: 0.5em;
	background-color: #f2ebc7;
}

.highlightTile {
	background-color: rgba(0,100,0,.5);
}

.highlightError {
	background-color: rgba(100,0,0,.5);
}

.usedSpecial, .undoPlace {
	background-color: rgba(100,100,100,.5);
}

#copyright {
	font-size: .75em;
	padding: .25em;
	position: fixed;
	bottom: 10px;
	right: 10px;
	background-color: rgba(255,255,255,.25);
	color: black;
	font-weight: 200;
}

.rdTxt {
	text-align: center;
	vertical-align: middle;
	font-size: 0.75em;
	font-family: 'Dancing Script', cursive;
	color: #888;
}