/* Edited with EditCSS */

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

@import url("compass.css");

/* Box model - right hand navigation */

body {
	Background:	white;
	margin:		15px 0px 0px 0px;
	padding:	0px;

	font:		11px/17px Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
	width:		727px;
	margin-left:	80px;
	margin-top:	10px;
	padding:	0px;
	text-align:	left;
	border:		0px;
	background:	white; 
}

#maincontent, #widecontent, #rightcontent, #banner {
	float:		left;
}

#banner {
	background:	transparent url('/images/stripe_40.jpg') no-repeat bottom left;
	height:		256px;
	border:		1px solid #006400;
	width:		727px; /*600 + 125 with 1px borders left and right */
}

#banner.stepping-stones {
	background:	transparent url('Stepping-Stones-BW.jpg') no-repeat bottom left;
	background-color: #3060B8;
	height:		284px;
	border:		1px solid #006400;
	width:		727px; /*600 + 125 with 1px borders left and right */
}

#maincontent, #widecontent {
	padding-top:	10px;
	width:		598px; /*600 with borders left and right */
}

#widecontent {
	width:		727px; /*600 + 125 with borders left and right */
}

/* Right-margin notes and navigation */

#rightcontent {
	width:		124px; /*125 with border */
	left:		640px;
	padding-top:	10px;
	float:		left;
	padding-left:	4px;
}

#rightcontent p {
	font-size:	10px;
	margin-right:	2px;
}

#rightcontent div {
	border-left:	1px dashed #006400;
	border-top:	1px dashed #006400;
	margin-bottom:	20px;
}

#rightcontent > div.nav > p {
	font-weight:	bold;
}

#rightcontent > div > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 10px;
    font-size: 10px;
}

#rightcontent .icon {
  border:		none;
  text-align:	center;
}

/* Links - look and feel - different in <h1> banners */

a {	
	font-weight:	bold;
	color:		#c00000;
	text-decoration:none;
}	

a:visited {color: #FF6600;}

a:hover	{	
	color:		#c00000;
	background:	#FC0;
}	

a:hover img {
	border-color:	#c00000;
    background:     transparent;
}

#banner h1 a {color: #fff;}

#banner.stepping-stones h1 {margin-left: 240px;margin-top: 40px;color: #fff;}

#banner.stepping-stones h1 a {color: #fff;}

#rightcontent.stepping-stones div {
	border-left:	3px solid #0066ff;
	border-top:	1px dotted #0066ff;
}

#banner h1 a:hover {
	color:		#FC0;
	background:	none;
}

/* Rest of formatting */

table
{
	margin:		0px 10px 10px 10px;
	font-size:	11px;
	border-collapse:collapse;
	border-spacing:	0px;
}

td {padding: 0px;}

p,pre,dl,dd
{
	font-family:	verdana, arial, helvetica, sans-serif;
	margin:		    0px 10px 5px 10px;
}

/*  This to line up photos which use photo.css which is common
    to other sites which use different approaches to padding and
    margins. It's probably deficient here so... ## TODO
 */

/* img {margin: 0px 10px 5px 10px !important;} removed 2014-01-14 */
p > img {margin-top: 10px !important;}

h1,h2,h3,h4,h5,h6
{
	font-family: 	"trebuchet ms", verdana, arial, helvetica, sans-serif;
	margin:		    0px 10px 5px 8px;
	font-weight:	bold;
	padding-top:	10px;
	clear:			both;
}

h1 {font-size: 24px; line-height: 44px;}
h2 {font-size: 20px; line-height: 24px;}
h3 {font-size: 15px; line-height: 20px;}
h4 {font-size: 14px; line-height: 20px;}
h5 {font-size: 12px; line-height: 18px;}
h6 {font-size: 11px; line-height: 17px;}

#banner h1
{
  margin-top:		90px;
  line-height:		44px;
  font-family:		calibri;
  font-weight:		normal;
  font-size:		2.8em;
}

#banner div
{
  margin-top:		200px;
  float:		right;
}

blockquote {
    padding: 5px 10px 5px 5px;
    border-left: 2px dotted #88f;
}
blockquote blockquote {border-left: none;padding: 0;}  /* avoid repetition of left highlight-bar */
 
ol, ul {margin-left: 15px}	

li {margin-bottom: 3px}
li > * {margin-left: 0;}

dt {font-weight: bold; color: #999;}	

.cplusplus
{	
	font: 12px/16px courier, arial, helvetica, sans-serif;
	color: blue;
}	

.example {margin-left: 15px;}	
.tiny {font-size: 9px;}	
/* .hand {margin: 10px;} looks to be a left-over */

.byline	{font-size: 10px; color: #00008B;}
.floatleft {float: left;margin: 0px 10px 10px 10px;}
.floatright {float: right;margin: 0px 10px 10px 10px;}
.postdate{font-size: 10px; color: #00008B;font-weight: bold;}
.w1 {font: bold 12px verdana; color: #00008B;line-height: 15px}
.w2 {font: normal 11px verdana; color: #00008B;line-height: 15px}

/* Simple tables - a bit like the one in SCBA - TODO use import?*/
/*
table.info-text td, table.info-text th {vertical-align: top;padding: 3px;padding-right: 20px}

table.info-text th {font-weight: bold; padding-left: 20px;}

table.info-text th.ns-baize {
    background: #00af00;
    line-height: 1.8em;
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    color: #fff;
}

table.info-text table.info-text {margin:0}

table.place-col tr td:first-child {padding-right: 5px;}
table.place-col th {text-align: left;}

table.text-col1 tr td:first-child {padding-right: 15px;}
table.text-col1 th {text-align: left;}
*/


/* Bridge related styles */

ul.eadt-years li {
    margin-left: 10px;
    margin-bottom: 0;
}

ul.eadt-years li:first-child {margin-left: 0;}

.red, .blk
{
	font-family:	Arial;  /* remember Opera's inability to show suit symbols in Verdana */
	font-size:	    1.32em;
	line-height:	0.9em;
	color:		    red;
}
.blk {color: black;}

img.l-blog
{
	margin:		10px 12px 2px 10px;
	float:		left;
}

img.c-blog {margin: 10px auto 2px auto;display: block;}
img.c-blog + p {clear: both;}

img.r-blog
{
	margin:		10px 12px 2px 10px;
	float:		right;
}

img.l-blog.frame, img.c-blog.frame, img.r-blog.frame {border: 1px solid black;}

p.pub-date {font-weight: bold;}

div.icon a img {border: none;}

p.latest-article {
    padding: 6px;
    border: 1px dashed #006400;
}

a.latest-article:visited, p.latest-article a:visited {color: #c00000;}

p.emphasise-latest {font-weight: bold;}

div.blog-item {display: table; width: 100%;}

div.blog-item > p > a.blog-link {
    float: right;
    margin-right: 5px;
}

div.blog-item > p.byline > a {
    float: right;
    margin-right: 5px;
}

div.blog-item > p:first-child {
    font-size: 10px;
    color: #00008B;
    font-weight: bold;
}

div.blog-item iframe {
    margin: 10px auto;
    display: block;
}

dd > ul {padding-left: 10px;}

object.hv-compass-350 {
    height: 350px;
    width: 350px;
    margin: auto;
    display: block;
}

object.hv-compass-450 {
    height: 450px;
    width: 450px;
    margin-left: 40px;
}

object.hv-commentary {height: 500px;}

.comma-list {display: inline;margin-left: 0;padding-left: 0;}
.comma-list > li {list-style-type: none;display: inline;}
.comma-list > li:after {content: ","}
.comma-list > li:last-child:after {content: none}
.comma-list.fullstop > li:last-child:after {content: "."}

/* This imitates Google's define:word response */
dl.dictionary-word {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    padding: 20px 20px 24px;
    margin: 10px 40px;
}

dl.dictionary-word dt {
    margin-bottom: 8px;
    font-size: 1.4em;
    color: #000;

/* Added May 2015 - changes in Google's format? */

    font-family: arial,sans-serif-light,sans-serif;
    font-size: x-large; /* Google is xx-large but that looks too big */
    font-weight: lighter;
    line-height: normal;
}

dl.dictionary-word dd > p:first-child {
    font-family: arial;
    font-style: normal;
    font-size: large;
    line-height: 1.2;
    color: #222;
}

dl.dictionary-word dd > p {font-style: italic;}

dl.dictionary-word dd > p > span {
    margin-top: -1px;
    margin-left: 6px;
    padding: 4px 6px;
    background: #eee;
    font-size: x-small;
    font-family: Arial;
    font-style: normal;
    color: #777;
    text-transform: uppercase;
}

dl.dictionary-word dd ul {list-style: none; margin-left: 30px;}

dl.dictionary-word dd li > q { /* for both ul and ol */
    display: block;
    margin-top: 4px;
    font-style: italic;
    color: #777;
}

ul.false-footnote {list-style: none;margin-left: 10px;padding-left: 5px;}
ul.false-footnote li {padding-left: 5px;}
ul.false-footnote.dagger li:before {content: "\2020";margin-left: -10px;padding-right: 4px}

/* Copied from bridge-mail.css */

table.gridlines
{
	margin: 10px 10px 10px 80px;
    border-color: #600;
    border-width: 0 0 1px 1px;
    border-style: solid;
}

table.gridlines > tr > td,
table.gridlines > tr > th,
table.gridlines > tbody > tr > td,
table.gridlines > tbody > tr > th
{
    border-color: #600;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px;
}

table.gridlines td {background-color: #ffffcc;}

table.gridlines.left-col1 th {text-align: left;}

table.gridlines.light,
table.gridlines.light > tr > td, 
table.gridlines.light > tr > th,
table.gridlines.light > tbody > tr > td, 
table.gridlines.light > tbody > tr > th {background-color: #fff; border-color: #aaa;}