/* /tutorials/Mahjong/styles.css */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body {
	background-color:brown;
	font-family:sans-serif;
	font-size:3vmin;
	overflow:hidden;
}
h3 {
	color:blue;
	text-align: center;
	font-style: italic;
	font-size:3.5vmin;
	font-weight: normal;
}
hr {
	margin:1.5vmin 0 2.5vmin 0;
}
#main {
	margin:1vmin auto 0 auto;
	max-width: 125vmin;
	background-color:ivory;
}
p {
	margin:1vmin 5vmin;
}
ol {
	margin:1vmin 10vmin;
}
.box {
	display:flex;
	justify-content: center;
	align-items:center;
	margin: 0 5vmin;
}
.box p {
	margin-right: 0;
}
.centre {
	width:100%;
	display:flex;
	flex-direction: column;
	align-items: center;
}
.centre_row {
	width:100%;
	display:flex;
	flex-direction: row;
	align-items: center;
	margin:2vmin 0;
	padding-left:2vmin;
}
#head, #foot {
	display:flex;
	justify-content: space-around;
	align-items: center;
	padding:2vmin 0 0 0;
}
#foot, .cols_2 {
	padding-bottom: 2vmin;
}
#head img, #foot img {
	height:7vmin;
}
#head #title img, #foot #titleB {
	height:4vmin;
}
#titleB {
	visibility: hidden;
}
#title {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#overview {
	font-style: italic;
	font-size: 90%;
}
.btn {
	background-color: #cfc;
	border: double .6vmin grey;
	padding: .2vmin 1.2vmin .6vmin 1.2vmin;
	border-radius: 3vmin;
	cursor:pointer;
}
.magenta {
	color:magenta;
}
.pic {
	height:40vmin; max-height:none;
	margin:1vmin auto 2vmin auto;
	display:block;
}
mark {
	background-color: lemon;
}

@media (orientation: portrait) {
	.box {
		flex-direction: column;
	}
	.box div {
		display:flex;
		flex-direction: column;
	}
}
/* Mahjong */
.strip {
	width:90%;
	margin:1vmin auto 1.5vmin auto;
	display:flex;
	justify-content: space-evenly;
	flex-wrap: nowrap;
}
.strip1 {
	width:50%;
	margin:1vmin auto 1.5vmin auto;
	display:flex;
	justify-content: center;
	flex-wrap: nowrap;
}
.tile {
	width:9%; height:auto;
}
#message, #message1 {
	width:25vmin;
	margin:0 auto;
	display:flex;
	justify-content: center;
	align-items: center;
	border:1px solid blue;
	padding:1vmin 0;
	background-color: #efe;
}
#message1 {
	width:70%;
	display:block;
	visibility:hidden;
	text-align: center;
}
#dragon, #wind {
	flex-direction: row;
}
#dragon img {
	width:26%;
}
#wind img {
	width:19%;
}
.tile1 {
	width:12vmin; height:auto;
}
.tile4 {
	width:10vmin; height:auto;
}
#rest .hand img {
	width:6.5vmin;
}
#rest div .tile2 {
	width:7%; height:auto;
}
#rest #wall_discard .tile3, .tile3 {
	width:8vmin; height:auto;
}
#result {
	text-align: center;
	xborder:1px solid black;
	height:47vmin;
	display:none;
}
.sbr {
	margin-top:1vmin;
}
#wall_discard {
	margin:0 auto;
	width:50%;
	display:flex;
	justify-content: space-evenly;
	align-items: center;
}
.column {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#table {
	margin-top:2vmin;
	padding-top:2vmin;
}
#west_wall_east {
	margin:3vmin auto 0 auto;
	width:90%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.opp {
	width:25vmin;
	display:flex;
	justify-content: center;
	align-items: center;
	border:1px solid blue;
	padding:1vmin 0;
	background-color: #efe;
}
#north {
	margin:0 auto;
}
.link {
	color:blue;
	text-decoration: underline;
	font-style: italic;
	cursor: pointer;
}
ul {
	margin-left:10vmin;
}
table, th, td {
  border: 1px solid;
}
table {
  border-collapse: collapse;
	width:90vmin;
	margin:.8vmin auto;
}
th {
	padding:.8vmin 2vmin;
	font-weight:normal;
	font-size: 90%;
	background-color:bisque;
}
td {
	padding:.8vmin;
	text-align:center;
	font-size: 120%;
	background-color:lemonchiffon;
}
.noborder {
	border-top:1px hidden;
	border-left:1px hidden;
	background-color:ivory;
}
#score {
	opacity:.3;
	cursor: default;
}
#panel2 {
	width:100%; height:25.38vmin;
	display:none;
}
#col1, #col2 {
	height:100%;
	xoutline: 1px solid;
}
#col1 {
	width:40%;
	display:flex;
	justify-content: center;
	align-items: center;
	font-size: 10vmin;
}
#col2 {
	display:flex;
	flex-direction: column;
	justify-content: center;
	width:60%;
}
@media (orientation: portrait) {
	#dragon img, #wind img {
		width:15%;
	}
	.box .strip1 {
		flex-direction: row;
	}
	#message1 {
		width:85%;
	}
}