/* /tutorials/Bridge/styles.css */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
.no_select {
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
}
.no_drag {
	user-drag: none; /* Standard syntax */
	-webkit-user-drag: none; /* Safari and Chrome */
}
body {
	background-color:ivory;
	font-family:sans-serif;
	font-size:3vmin;
	text-decoration: none;
}
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 {
	display:grid;
	height:88vmin;
	margin:1vmin auto 0 auto;
	max-width: 125vmin;
	background-color:ivory;
	xborder:1px solid black;
}
p {
	margin:1vmin 5vmin;
}
ol {
	margin:1vmin 10vmin;
}
.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, #left img, #right 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;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
}
.magenta {
	color:magenta;
}
.pic {
	height:35vmin; max-height:none;
	margin:1vmin auto 2vmin auto;
	display:block;
}
mark {
	background-color: lemon;
}
#message, #message1, #message3, #message4 {
	width:30vmin;
	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;
}
#message3 {
	width:55%; height:8vmin;
}
#message4 {
	width:100%;
	display:none;
	text-align: center;
	font-size: 90%;
}
.sbr {
	height:1%;;
}
.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;
}
@media (orientation: portrait) {
	#message1 {
		width:85%;
	}
}
/* bridge */
#suits {
	display: flex;
	justify-content: space-around;
	width:90%;
	margin:0 auto;
}
#suits div {
	display: flex;
	flex-direction: column;
	justify-content:flex-end;
	text-align: center;
}
.suit {
	width:10vmin; height:auto;
	margin:0 auto;
}
.pic1 {
	height:44vmin;
}
.pic2 {
	height:60vmin;
}
.row {
	display:flex; justify-content: center;
}
.row img {
	width:7.5%; height:auto;
}
.row1 {
	display:flex; justify-content: space-around;
}
.row2 {
	display:flex; justify-content:space-evenly;
	width:100%;
}
.row3 {
	margin: 0 auto;
	display:flex; justify-content:space-evenly;
	width:80%;
}
#row2, #row3, #your_bid, #msg {
	display:none;
}
.four {
	margin:2vmin auto;
	width:70%;
	display:flex; justify-content: space-evenly;
}
.four img {
	width:18%; height:auto;
}
.green {
	outline:5px solid lime;
}
.red {
	outline:5px solid red;
}
#table {
	margin-top:2vmin;
	width:92vmin; height:92vmin;
	background-color: green;
	display:flex;
	justify-content: space-between;
	outline: 1.4vmin outset brown;
}
#table .card {
	margin:2vmin;
	width:18vmin; height:auto;
	box-shadow:3px 3px 5px black;
}
#c1 #trump1 {
	margin:0 0 0 2vmin;
}
.trump2 {
	margin:1vmin 0 0 2vmin;
	width:9vmin; height:auto;
}
#c2, #c4 {
	display:flex;
	align-items: center;
}
#c3 {
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.column {
	display:flex;
	flex-direction: column;
	align-items:center;
}
#c1, #c5 {
	display:flex;
	flex-direction: column;
	justify-content:space-between;
	margin:2vmin 0;
}
#c5 {
	align-items:center;
}
.arrow {
	width:9vmin; height:auto;
}
#c1 #trump1, #trump1 {
	background-color:lightgreen;
}
.hidden {
	visibility:hidden;
}
#message2 {
	width:18vmin; height:10vmin;
	display:flex;
	justify-content: center;
	align-items: center;
	outline:3px solid gold;
	background-color: #efe;
	text-align: center;
	padding:1vmin 0;
	margin-left:2vmin;
	font-size:80%;
}
.box {
	display:flex;
	justify-content: center;
	align-items:center;
	margin: 0 5vmin;
}
.box p {
	margin-right: 0;
}
.hand {
	display:grid;
	grid-template-columns: repeat(14,1fr);
	width:98%;
	margin:0 auto .5vmin auto;
}
.handD {
	display:grid;
	grid-template-columns: repeat(8,1fr);
	width:98%;
}
#dummy {
	margin:.5vmin auto 0 auto;
}
.card1 {
	width:100%; height:auto;
}
#r1, #r2, #r3, #r3x {
	display:flex;
	justify-content: space-between;
	width:98%;
	margin:0 auto;
}
#r2 {
	align-items: center;
}
#r3x {
	display:none;
}
.card2 {
	width:12vmin; height:auto;
	xmargin:1.5vmin;
}
.trump1 {
	width:9vmin; height:auto;
	background-color:lightgreen;
	align-self: flex-start;
	margin:3vmin 0 0 2vmin;
}
.count {
	color:ivory;
	font-size:3vmin;
	align-self: flex-end;
	margin-right:.5vmin;
	width:20vmin;
	text-align:right;
}
/* window.innerWidth */
#count1 {
	margin:0;
	padding-left:1.5vmin;
	text-align: left;
	width:100%; height: 15vmin;
	color:pink;
}
#start {
	display:none;
}
#buttons {
	height:100%;
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
#buttons1 {
	width:50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#buttons2 {
	width:70%;
	display: flex;
	justify-content: space-between;
}
#buttons3 {
	display: flex;
	flex-direction:column;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	height:100%;
}
#replay {
	visibility: hidden;
}
#middle {
	display:flex;
	height:50vmin;
}
#cc1, #cc2, #cc3 {
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	align-items:center;
}
#cc1, #cc3 {
	width:23%;
}
#cc2 {
	width:54%;
}
#cc3 #count {
	margin-right:2vmin;
}
#cc1 #trump1 {
	margin:1vmin 0 1vmin 2vmin;
}
#top {
	width:100%; height:72.5%;
	display:flex;
}
#dummyD {
	display:flex;
	flex-direction:column;
	justify-content: space-around;
}
#cd1, #cd2, #cd3, #cd4 {
	width:20%;
}
#cd4 {
	width:40%;
}
#cd1 {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
#cd2 {
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items: center;
}
#cd3 {
	display:flex;
	align-items: center;
	justify-content: flex-end;
}
#cd4 {
	display:flex;
	align-items: center;
	justify-content: flex-end;
}
#message_count {
	width:100%;
	display: flex;
	justify-content: space-between;
}
.btn1 {
	padding:.5vmin 3vmin;
	border:1vmin groove peachpuff;
	background-color:bisque;
	cursor:pointer;
	font-size: 4vmin;
}
.btn2 {
	font-size:3.5vmin;
}
.btn3 {
	font-size:3vmin;
	padding:.5vmin 1.5vmin;
}
.btn4 {
	width:15%;
	margin:1.5vmin auto 1vmin auto;
	text-align:center;
}
#eval_help, #explain {
	padding-top:1vmin;
	width:65%; height:33%;
	background-color: wheat;
	border:1px solid brown;
	visibility:hidden;
	grid-area: 1 / 1 / span 1 / span 1;
	margin:.5vmin auto 0 auto;
	display:flex;
	flex-direction: column;
	justify-content: space-evenly;
}
#eval_help p, #explain p {
	margin:0 0 0 5vmin;
}
#bids {
	display:flex;
	justify-content: space-evenly;
	margin:1vmin auto 0 auto;
}
#page {
	grid-area: 1 / 1 / span 1 / span 1;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
#left-table-right, #left, #right {
	display:flex; justify-content: space-around;
}
#left, #right {
	flex-direction: column;
	align-items:center;
	display:none;
}
.text_box {
	width:auto;
	margin:0 auto;
	border:1px solid green;
	padding:1vmin 2vmin;
	text-align: center;
	font-size:130%;
	background-color:#dff;
}
.eval {
	margin:0; width:10vmin;
	visibility:hidden;
}
.lightgreen {background-color:#cfc;}
.pink {background-color: pink;}
#msg, #evald {cursor: pointer;}
#message5 {
	width:100%;
	grid-area:1/1/auto/span 14;
	text-align:center;
	color:white;
}
#tdummy {display:none;}

@media (orientation: landscape) {
	#table {width:84vmin; height:84vmin;}
	.for23 {margin-right:5vmin;}
}
@media (orientation: portrait) {
	.box {
		flex-direction: column;
	}
	.box div {
		display:flex;
		flex-direction: column;
	}
	.card2 {
		width:14vmin;
	}
}