Split CSS off into separate file.

1 files changed, 1 insertions, 222 deletions

diff --git a/play.html b/play.html
index e5ccf97..b47842e 100644
--- a/play.html
+++ b/play.html
@@ -7,232 +7,11 @@
 <link rel="icon" href="favicon.png">
 <link rel="stylesheet" href="/fonts/fonts.css">
 <link rel="stylesheet" href="/common/play.css">
-<link rel="stylesheet" href="/common/columbia.css">
+<link rel="stylesheet" href="play.css">
 <script defer src="/common/play.js"></script>
 <script defer src="data.js"></script>
 <script defer src="play.js"></script>
 </head>
-<style>
-
-#log { background-color: whitesmoke; }
-#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; margin: 8px 0; text-align: center; }
-#log .h2 { padding-top:1px; padding-bottom:1px; text-align: center; }
-#log .h1 { border-bottom: 1px solid #444; border-top: 1px solid #444; }
-#log .h2 { border-bottom: 1px solid #444; border-top: 1px solid #444; }
-#log .h1 { background-color: silver; }
-#log .h2 { background-color: gainsboro; }
-#log div { padding-left: 20px; text-indent: -12px; }
-#log div.i { padding-left: 32px; text-indent: -12px; }
-
-main {
-	background-color: dimgray;
-}
-
-#mapwrap {
-	margin: 0 auto;
-	width: 2550px;
-	height: 1900px;
-}
-
-#map {
-	position: absolute;
-	width: 2550px;
-	height: 1900px;
-}
-
-#board, #tracks, #hexes, #pieces {
-	position: absolute;
-}
-
-#board {
-	top: 0px;
-	left: 0px;
-	width: 2550px;
-	height: 1650px;
-	background-color: #803a3b;
-	background-image: url(map75.png);
-	background-size: 2550px 1650px;
-	box-shadow: 0 0 8px #0008;
-}
-
-#tracks {
-	top: 1650px;
-	left: 0px;
-	width: 600px;
-	height: 250px;
-	background-color: #d0c5b1;
-	background-size: 600px 250px;
-	background-image: url(tracks75.png);
-	box-shadow: 0 0 8px #0008;
-}
-
-#hexes, #pieces { position: absolute }
-
-.hex {
-	box-sizing: border-box;
-	position: absolute;
-	border-radius: 50%;
-	border: 2px solid transparent;
-}
-
-.hex.town { background-color: #F006; }
-.hex.stream { background-color: #00F6; }
-.hex.town.stream { background-color: #F0F6; }
-
-.hex.action {
-	border: 4px solid #fff6;
-	background-color: #fff2;
-	box-shadow: 0 0 3px #0008;
-	z-index: 100;
-}
-
-.hex.action.stop {
-	background-color: #f002;
-}
-
-.hexside {
-	position: absolute;
-	display: none;
-	transform-origin: 0 0;
-	width: 58px;
-	height: 4px;
-}
-
-.hexside.s1 { transform: rotate(-60deg) }
-.hexside.s2 { transform: rotate(-120deg) }
-
-.hexside.road {
-	display: block;
-	background-color: brown;
-}
-
-.hexside.river {
-	display: block;
-	background-color: blue;
-}
-
-.hexside.road.river {
-	display: block;
-	background-color: green;
-}
-
-.large {
-	position: absolute;
-	background-size: 84px auto;
-	width: 42px;
-	height: 42px;
-}
-
-.small {
-	position: absolute;
-	background-size: 68px auto;
-	width: 34px;
-	height: 34px;
-}
-
-.large, .small {
-	transition-property: top, left;
-	transition-duration: 500ms;
-	transition-timing-function: ease;
-	border-width: 2px;
-	border-style: solid;
-	box-shadow: 0 0 0 1px #444, 0 0 4px #0008;
-}
-
-.large.action, .small.action {
-	box-shadow: 0 0 0 1px #444, 0 0 0 4px white;
-}
-
-.large.selected, .small.selected {
-	box-shadow: 0 0 0 1px #444, 0 0 0 4px yellow;
-}
-
-.large.target, .small.target {
-	box-shadow: 0 0 0 1px #444, 0 0 0 4px red;
-}
-
-.marker { border-color: hsl(199,65%,85%) hsl(199,55%,50%) hsl(199,55%,50%) hsl(199,65%,85%) }
-.large.french, .small.french { border-color: hsl(199,85%,90%) hsl(199,75%,70%) hsl(199,75%,70%) hsl(199,85%,90%) }
-.large.anglo, .small.anglo { border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%) }
-.large.prussian, .small.prussian { border-color: hsl(202,10%,70%) hsl(202,10%,50%) hsl(202,10%,50%) hsl(202,10%,70%) }
-
-.large.french { background-image: url(sheet_french1_75.png) }
-.large.anglo { background-image: url(sheet_anglo1_75.png) }
-.large.prussian { background-image: url(sheet_prussian1_75.png) }
-.large.marker { background-image: url(sheet_misc_75.png) }
-.small.french { background-image: url(sheet_french2_75.png) }
-.small.anglo { background-image: url(sheet_anglo2_75.png) }
-.small.prussian { background-image: url(sheet_prussian2_75.png) }
-
-@media (min-resolution:97dpi) {
-.large.french { background-image: url(sheet_french1_150.png) }
-.large.anglo { background-image: url(sheet_anglo1_150.png) }
-.large.prussian { background-image: url(sheet_prussian1_150.png) }
-.large.marker { background-image: url(sheet_misc_150.png) }
-.small.french { background-image: url(sheet_french2_150.png) }
-.small.anglo { background-image: url(sheet_anglo2_150.png) }
-.small.prussian { background-image: url(sheet_prussian2_150.png) }
-}
-
-.large.y1 { background-position: -0px -0px }
-.large.y2 { background-position: -0px -42px }
-.large.y3 { background-position: -0px -84px }
-.large.y4 { background-position: -0px -126px }
-.large.y5 { background-position: -0px -168px }
-.large.y6 { background-position: -0px -210px }
-.large.y7 { background-position: -0px -252px }
-.large.y8 { background-position: -0px -294px }
-.large.y9 { background-position: -0px -336px }
-.large.y10 { background-position: -0px -378px }
-.large.y11 { background-position: -0px -420px }
-
-.large.flip.y1 { background-position: -42px -0px }
-.large.flip.y2 { background-position: -42px -42px }
-.large.flip.y3 { background-position: -42px -84px }
-.large.flip.y4 { background-position: -42px -126px }
-.large.flip.y5 { background-position: -42px -168px }
-.large.flip.y6 { background-position: -42px -210px }
-.large.flip.y7 { background-position: -42px -252px }
-.large.flip.y8 { background-position: -42px -294px }
-.large.flip.y9 { background-position: -42px -336px }
-.large.flip.y10 { background-position: -42px -378px }
-.large.flip.y11 { background-position: -42px -420px }
-
-.small.y1 { background-position: 0px 0px }
-.small.y2 { background-position: 0px -34px }
-.small.y3 { background-position: 0px -68px }
-.small.y4 { background-position: 0px -102px }
-.small.y5 { background-position: 0px -136px }
-.small.y6 { background-position: 0px -170px }
-
-.small.flip.y1 { background-position: -34px -0px }
-.small.flip.y2 { background-position: -34px -34px }
-.small.flip.y3 { background-position: -34px -68px }
-.small.flip.y4 { background-position: -34px -102px }
-.small.flip.y5 { background-position: -34px -136px }
-.small.flip.y6 { background-position: -34px -170px }
-
-#log .dice {
-	display: inline-block;
-	vertical-align: -2px;
-	width: 12px;
-	height: 12px;
-	background-size: 600% 100%;
-	background-repeat: no-repeat;
-	background-image: url(die_black_pips.svg);
-	background-color: #fff;
-	border: 1px solid #444;
-}
-
-.d0 { background-position: -100% 0 }
-.d1 { background-position: 0% 0; }
-.d2 { background-position: 20% 0; }
-.d3 { background-position: 40% 0; }
-.d4 { background-position: 60% 0; }
-.d5 { background-position: 80% 0; }
-.d6 { background-position: 100% 0; }
-
-</style>
 <body>
 
 <header>