/* 'New diagram' CSS2.1 formatting */

div.auction {margin: 20px 10px 40px 70px;}
div.auction > div {clear: left;}
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;}

.compass {
	margin:		5px 0px 5px 10px;
	padding:	0px 0px 0px 40px;
	float:		left;
	width:		360px;
	border:		none;
}

.compass + * {clear: left;}

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

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

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

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

.baize div + div {clear: left;width: 36px;}
.baize div + div + div {clear: none;padding-left: 36px;}
.baize div + div + div + div {clear: left;padding-right: 36px;}

.compass.NS .baize div {width: 90px;}

.west-east {margin-bottom: 5px;}
.west-east div {width: 36px;}
.west-east div + div {clear: none;padding-left: 36px;}


.compass .West {clear: left;}
.compass .North {padding-right: 120px;}		/* For IE compatibility mode */
.compass .South {clear: left;margin-left: 120px;}

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

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

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

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

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

 /* ul.bridge-hand no longer used in compass so this for 'single hand' entries only */
ul.bridge-hand {margin-left: 50px;}

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

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

/* taken out */
 
span.hearts:before,
span.diamonds:before,
span.clubs:before,
span.spades: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:	1px;
}

li.spades:before,		/* This block inserts suit symbols for */
li.hearts:before,		/* named <li> elements and implied order */
li.diamonds:before,
li.clubs:before,
.North ul li:before,
.East ul li:before,
.South ul li:before,
.West ul 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:	4px;
}

li.clubs:before,			/* Clubs don't 'line up right' in diagrams */
.compass li + li + li + li:before,
.compass li.clubs:before,
ul.bridge-hand li + li + li + li:before {padding-right: 3.0px;margin-left: -1px}

span.spades:before,				/* These are all the symbol insertions */
.compass li:before,
.compass li.spades:before,
ul.bridge-hand li:before,
ul.bridge-hand li.spades:before {content: "\2660";color: black;}

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

span.clubs:before,
.compass li + li + li + li:before,
.compass li.clubs:before,
ul.bridge-hand li + li + li + li:before,
ul.bridge-hand li.clubs:before {content: "\2663";color: black;}

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

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

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

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

div.contract-analysis table th + th + th {color: red;}
div.contract-analysis table th + th + th + th + th {color: black;}
div.contract-analysis table th + th + th + th + th + th {font-variant: small-caps;}

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

/* This should be temporary */

div.compass.spacers div ul li, ul.bridge-hand li {letter-spacing: 0.17em;font-family: Verdana, light;}
div.compass.spacers div ul li span, ul.bridge-hand li span {letter-spacing: 0.0em;}
div.compass.spacers div ul li span:after, ul.bridge-hand.spacers li span:after {content: "\2009";}

ul.bridge-hand.spacers li.hearts:before,			/* heart suit looks too far right */
.compass.spacers li + li:before,
.compass.spacers li.hearts:before,
ul.bridge-hand.spacers li + li:before {padding-right: 0.18em;}

.compass.spacers li + li + li:before {padding-right: 0.3em} /* put diamonds back */

/* End temporary */


/*  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 .West, td > div.compass .East {width: 80px;}

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

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

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

td > div.compass .baize div + div {clear: left;width: 25px;}
td > div.compass .baize div + div + div {clear: none;padding-left: 25px;}
td > div.compass .baize div + div + div + div {clear: left;padding-right: 25px;}

td .compass.NS {width: 108px;}
td .compass.NS div {
    margin-left: 8px !important;
    width: 90px;
    padding-right: 0px !important;
}
td .compass.NS ul {padding-left: 12px;}
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;}