catan.css

body {
	padding-top: 120px;
	background-color: #1691c6;
}

#board {
	position: relative;
}

#spots {
  position: absolute;
  top: -79px;
  left: 50%;
  transform: translate(-50%, 0);
}

.chunk {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.chunk:nth-of-type(1)  { width: 321px; }
.chunk:nth-of-type(2)  { width: 464px; }
.chunk:nth-of-type(3)  { width: 464px; }
.chunk:nth-of-type(4)  { width: 617px; }
.chunk:nth-of-type(5)  { width: 617px; }
.chunk:nth-of-type(6)  { width: 763px; }
.chunk:nth-of-type(7)  { width: 763px; }
.chunk:nth-of-type(8)  { width: 617px; }
.chunk:nth-of-type(9)  { width: 617px; }
.chunk:nth-of-type(10) { width: 464px; }
.chunk:nth-of-type(11) { width: 464px; }
.chunk:nth-of-type(12) { width: 321px; }

.chunk:nth-of-type(2n) { padding-top: 19px; }
.chunk:nth-of-type(2n + 1) { padding-top: 71px; }

.chunk span {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	text-align: center;
	opacity: 0.4;

	box-sizing: border-box;
}

.chunk span.red, 
.chunk span.blue, 
.chunk span.yellow, 
.chunk span.white {
	opacity: 1;
	border-radius: 1px;
	height: 30px;

	margin-top: -10px;
}

.chunk span.red { background-color: red; }
.chunk span.blue { background-color: blue; }
.chunk span.yellow { background-color: yellow; }
.chunk span.white { background-color: white; }

.chunk span.first {
	border: 2px solid black;
}

.chunk span.open {
	background-color: white;
	cursor: pointer;
	animation: open-animation 3s infinite;
}

@keyframes open-animation {
  0%   { opacity: 0; }
  50% { opacity: 0.3; }
  100% { opacity: 0; }
}

/* Adding in Ships */
div[class^="ship-"] {
  position: absolute;
  width: 60px;
  height: 60px;
}

div[class^="ship-"] img {
	max-width: 100%;
	max-height: 100%;
}

.ship-0 {
  top: -58px;
  left: calc(50% - 243px);
  transform: rotate(180deg);
}

.ship-1 {
  top: -58px;
  left: calc(50% + 23px);
  transform: rotate(180deg);
}

.ship-2 {
  top: 183px;
  left: calc(50% - 382px);
  transform: rotate(113deg);
}

.ship-3 {
  top: 71px;
  left: calc(50% + 261px);
  transform: rotate(220deg);
}

.ship-4 {
  top: 459px;
  left: calc(50% - 389px);
  transform: rotate(64deg);
}

.ship-5 {
  top: 320px;
  left: calc(50% + 396px);
  transform: rotate(295deg);
}

.ship-6 {
  top: 689px;
  left: calc(50% - 249px);
  transform: rotate(40deg);
}

.ship-7 {
  top: 689px;
  left: calc(50% + 34px);
  transform: rotate(0deg);
}

.ship-8 {
	top: 553px;
  left: calc(50% + 268px);
  transform: rotate(-50deg);
}

.background {
	width: 994px;
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: -1;
}

.tile {
	width: 152px;
	margin-right: -2px;
	height: 172px;
	display: inline-block;
	vertical-align: top;

	background-size: cover;
}

.tile[prob]:after {
	display: block;
	width: 50px;
	height: 35px;
	margin: 60px 0 0 50px;

	content: attr(prob) "\A" attr(dots);

	line-height: 10px;
	padding-top: 13px;

	background-color: #E9D49D;
	border: 2px solid #AD9D75;
	border-radius: 27px;
	
	font-size: 25px;
	font-weight: bold;

	white-space: pre;
}

div.row {
	display: block;
	text-align: center;
}

div.row:not(:first-child) {
	margin-top: -43px;
}

#sidebar {
	font-family: 'Helvetica', sans-serif;

	position: fixed;
	top: 0;

	padding: 5px;
	max-width: 275px;
}

#sidebar h2,
#sidebar h3,
#sidebar h4 {
	padding: 0px;
	margin: 0px;
}

#sidebar h3 {
	text-decoration: underline;
}

#sidebar a {
	text-decoration: none;
}