/* 'New diagram' CSS3 formatting */

div.auction {margin: 20px 10px 40px 70px;}
div.auction > p.auction-note {margin-left: -60px;margin-bottom: -17px;} /* similar to .suit-note */
div.auction > div {clear: left;}
div.auction > div:nth-of-type(1).desc {font-weight: bold;}
div.auction > div:nth-of-type(2).desc {font-style: italic;}

/*div.auction > .desc {font-style: italic;}
div.auction > .desc:first-child {font-style: normal;font-weight: bold;}
*/

div.auction > div > div {
	float:		left;
	width:		82px;
	line-height:	18px;
}

div.sidebar div.auction {margin: 10px 10px 20px 16px;}
div.sidebar div.auction > div > div {width: 60px;}

div.compass {
	margin:		5px 0 5px 10px;
	padding:	0 0 0 40px;
	float:		left;
	/* width:		420px; */
	border:		none;
}

div.compass + * {clear: left;}

div.compass div.deal-info,
div.compass div.North,
div.compass div.East,
div.compass div.West,
div.compass div.South {
	float:		left;
	width:		120px;
	margin:		0;
	margin-bottom:	6px;
}

/* Added 2017-02-02 for long suits NS - this may clash with diagrams
   with contract analysis bottom-right */
/* Added East 2017-11-21, good for 10-card suits. Also widened .compass to 420 */
   
div.compass .North,
div.compass .South,
div.compass .East {
	width:		160px;
}

div.compass > div.baize {
    margin:		0 0 4px 0;
	float:		left;
	width:		108px;
}

div.compass > div.baize > div {
	margin:		0;
	float:		left;
	width:		108px;
	text-align:	center;
	font-size:	1.1em;
	line-height: 	2em;
	color: 		white;
	font-weight: 	normal;
	background:	#006400;
}

div.compass > div.North + div.baize {clear: both} /* No West */

/* div.compass > div.baize.no-north {margin-top: 17px;}		/* Moves baize down when seats have descriptions above cards */

/* Replaces 'no-north' class */
div.compass > div:first-child.baize,
div.compass > div:first-child.West + div.baize {margin-top: 17px} /* Basic lowering of baize for defensive layouts */

div.compass > div:first-child.West > ul:first-child {margin-top: 17px} /* lower West WITHOUT desc */

div.compass > div:first-child.baize + div.East > ul:first-child,
div.compass > div:first-child.West + div.baize + div.East > ul:first-child {margin-top: 17px} /* lower East WITHOUT desc */

div.compass > div.baize > div:nth-child(2) {width: 36px;clear: left;}
div.compass > div.baize > div:nth-child(3) {width: 36px;padding-left: 36px;}
/*.baize div:nth-child(4) {clear: left;padding-right: 36px;} */

/* These are for 'mini diagrams' */
div.compass.NS > div.baize > div {width: 90px;}

div.compass.EW > p.suit-note {float:left;margin-left:-30px;margin-bottom:-17px;font-weight: bold;} /* similar to .auction-note */
div.compass.EW > div.baize > div {width: 42px;clear: none;} /* This, with padding, is the same as the 108 of standard */
div.compass.EW > div.baize > div:first-child {text-align: left;padding-left: 12px}
div.compass.EW > div.baize > div:nth-child(2) {text-align: right;padding-right: 12px}

/* REMOVED 2020-01-31 as no instances found
.west-east {margin-bottom: 5px;}
.west-east div {width: 36px;}
.west-east div:nth-child(2) {clear: none;padding-left: 36px;}
*/

div.compass > div.West {clear: left;}
/* REMOVED 2017-02-02 to allow long suits as NS
   .compass .North {padding-right: 120px;}		/* For IE compatibility mode */
div.compass div.South {clear: left;margin-left: 120px;}

div.compass > div.North:first-child,			/* for no deal-info text */
div.compass > div.baize:first-child,			/* for South-East diagrams (defence problems etc.) */
div.compass > div.North + .baize {margin-left: 120px;}	/* for no no-West diagrams (defence problems etc.) */

div.compass > div.West + div.East {margin-left: 108px;}	/* for no baize West-East diagrams (single suit etc.) */

div.compass > div > p:first-child {			/* This bit requires a null title on baize to position it */
	margin:		0;
	padding:	0;
	font-weight:	bold;
	margin-left:	28px;
}

div.compass > div.North + div.West p:first-child,
div.compass > div.North + div.baize + div.East p:first-child,
div.compass > div.North + div.West + div.baize + div.East p:first-child {margin-top: -17px;}

.compass .West p:last-child,
.compass .East p:last-child { /* This is to make seating plans (no cards) look nice */
    margin-top: 27px !important;
}

div.compass > div.North > ul,
div.compass > div.East > ul,
div.compass > div.South > ul,
div.compass > div.West > ul,
ul.bridge-hand {
	list-style: none;
	margin: 0;
	padding: 0 0 0 25px;
}

ul.bridge-hand {margin: 0 0 5px 50px;} /* to indent 'single hands' from left-margin and above next para (etc.)*/

td > ul.bridge-hand {margin-left: 0; min-width: 80px;} /* suppressed when hands are in a table */

div.compass > div.North li,
div.compass > div.East li,
div.compass > div.South li,
div.compass > div.West li,
ul.bridge-hand li {
    font-size: 1em;
    margin: 0;
}

/* Prefix with suit symbols
	1. Set font params and default spacing
	2. Do symbols for suits by ORDER - note in diagrams hearts and clubs have differnet spacings
	3. Do symbols for suits by NAME - same as above but nth-child would otherwise overwrite
	4. Amend default for inline
*/

span.hearts::before, /* font params and default spacing */
span.diamonds::before,
span.clubs::before,
span.spades::before,
li.spades::before,
li.hearts::before,
li.diamonds::before,
li.clubs::before,
div.compass li::before,
ul.bridge-hand li::before {
	font-family: Arial;         /* added for Opera's inability to show suit symbols in Verdana */
	font-size:	1.32em;
	line-height:	0.9em;
	padding-right:	0.2em;
	color: black;
}

@media (max-width: 480px) {
	span.hearts::before, /* symbols are too large on small devices */
	span.diamonds::before,
	span.clubs::before,
	span.spades::before,
	li.spades::before,
	li.hearts::before,
	li.diamonds::before,
	li.clubs::before,
	div.compass li::before,
	ul.bridge-hand li::before {font-size: 1em;color: black;}
}

.compass li:nth-child(1)::before, /* implicit symbol prefixes */
ul.bridge-hand li:nth-child(1)::before {content: "\2660";}

.compass li:nth-child(2)::before,
ul.bridge-hand li:nth-child(2)::before {content: "\2665";color: red;padding-right: 0.15em;} /* heart suit starts too far right */

.compass li:nth-child(3)::before,
ul.bridge-hand li:nth-child(3)::before {content: "\2666";color: red;}

.compass li:nth-child(4)::before,
ul.bridge-hand li:nth-child(4)::before {content: "\2663";margin-left: -0.07em; padding-right: 0.12em;} /* club symbol sits too far right */

span.spades::before,				/* named symbol prefixes */
.compass li.spades::before,
ul.bridge-hand li.spades::before {content: "\2660";color: black;}

span.hearts::before,
.compass li.hearts::before,
ul.bridge-hand li.hearts::before {content: "\2665";color: red;padding-right: 0.18em;} /* heart suit looks too far right */

span.diamonds::before,
.compass li.diamonds::before,
ul.bridge-hand li.diamonds::before {content: "\2666";color: red;}

span.clubs::before,
.compass li.clubs::before,
ul.bridge-hand li.clubs::before {content: "\2663";color: black;margin-left: -0.07em; padding-right: 0.12em;}

span.hearts::before, /* inline spacings (closer than diagrams) */
span.diamonds::before,
span.clubs::before,
span.spades::before {padding-right:	1px;}


div.contract-analysis {
    /* position: absolute; */
    /* margin-top: 145px; */
    /* margin-left: 320px; */
    /* border: 1px dashed black; */
    /* padding: 0 10px; */

	float:	right;
    margin-top: 0;
    margin-left: 20px;
    border: 1px dashed black;
    padding: 0 1px;
}

div.contract-analysis table {
    color: black;
    font-size: 8pt;
    line-height: 9pt;
    text-align: center;
}

div.contract-analysis table th {
    font-weight: normal;
    padding: 0 0.2em;
    font-family: Arial;
    font-size: 1.32em;
	width: 8px;
}

div.contract-analysis table th:nth-child(3),
div.contract-analysis table th:nth-child(4) {color: red;}

div.contract-analysis table th:nth-child(6) {font-variant: small-caps;font-size: 1.0em;}

div.contract-analysis table td {padding: 0 0.2em;}

div.compare-hands > div {float: left;margin-left: 24px}
div.compare-hands > div ul.bridge-hand {margin-left: 0;}
div.compare-hands + * {clear: left;}

div.compass div ul li,
span.spaced-suit,
ul.bridge-hand li {letter-spacing: 0.17em;font-family: Verdana, light;}

div.compass div ul li span,
span.spaced-suit span,
ul.bridge-hand li span {letter-spacing: 0; margin-right: 0.15em;} /* normal letter spacing inside spanned 10s */

ul.bridge-hand li sub,
span.spaced-suit sub,
ul.bridge-hand li su {letter-spacing: 0; margin-right: 0.3em} /* sub/super scripted letter tight but more space to right */
/*
div.compass div ul li span::after, ul.bridge-hand li span::after {content: "\2009";} /* adds 'thin space' after 10s */

/*  To prevent over-spacing diagrams & auctions when they are in table cells. 
    Note that this only affects named <div> classes, not single hands. */

td > div.auction {
    display: table;
    min-width: 310px;
    margin-left: 10px;
    margin-bottom: 10px;
	margin-top: 0;
	border: 1px solid black;
	background: #ffd;
    text-align: center;
}

td > div.auction > div > div {width: 25%;}

td > div.compass {padding-left: 0;margin-left: 0;width: 235px;}

td > div.compass div.West, td > div.compass div.East {width: 80px;}

td > div.compass div.West ul, td > div.compass div.East ul {padding-left: 10px;}

td > div.compass div.baize {
	float:		left;
	width:		75px;
    margin:		0;
}

td > div.compass div.baize div {
	float:		left;
	width:		75px;
	margin:		0;
	background:	#006400;
	text-align:	center;
	font-weight: 	normal;
	color: 		white;
	font-size:	1.1em;
	line-height: 	1.9em;
}

td > div.compass div.baize div:nth-child(2) {clear: left;width: 25px;}
td > div.compass div.baize div:nth-child(3) {clear: none;width: 25px;padding-left: 25px;}
/* REMOVED 2020-09-29 in line with in-text diagrams
td > div.compass div.baize div:nth-child(4) {clear: left;padding-right: 25px;}
*/

td .compass.NS {width: 108px;}
td .compass.NS div {
    margin-left: 8px !important;
    width: 70px !important;
    padding-right: 0 !important;
}
td .compass.NS ul {padding-left: 15px !important;}
td .compass.NS .baize {margin-bottom: 4px;}

td div.compass > .North:first-child, /* this has to be first child because of earlier ref - poss error */
td div.compass > .North,
td div.compass > .South {margin-left: 66px}

table.info-text td div.compass {border: 1px solid green;padding:5px;margin-top: 0}
table.info-text.gridlines td div.compass {border-width: 0;} /* inhibit when lines present already */
table.info-text td div.compass div.deal-info {width: 60px;position: absolute;}

div.bsol {
	position: relative;
	height: 0;
	top: 0;
	left: 320px;
}

/* BBO Handviewer display */
/* This replaces both hv-compass-350 and hv-compass-450.
   The intention is to now use hv-compass and hv-commentary
*/

object[class^="hv"] {--hv-width: 520px;}
object.hv-compass-350 {--hv-width: 400px;}

object[class*="hv-compass"] {
    width: var(--hv-width, 500px);
    height: calc(var(--hv-width, 500px) * 0.8);
    display: flex;
    margin: 1rem auto;
}

object.hv-commentary {
    height: calc(var(--hv-width, 500px) * 1.1);
}