/*
 * Style sheet for www.cryer.co.uk/brian
 * Copyright (C) A.B.Cryer 2003-2023.
 */
 
/* Page style */
html {
	font-family: Verdana, Sans-serif, Bookman old style, Arial;
	background-color: #8CD6FF;
}
body {
	padding: 0;
	border: 0;

	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
}
/* Area-block styling */
/* Support two layouts:
 *  > 500px : Notepad style page.
 * <= 500px : Top breadcrumb, single column.
 */
div.breadcrumb  /* On side or on top */
{
	width: 200px;
	width: 160px;
	text-align: center;
	float: left;
}
div.side-content    /* On side, below breadcrumb or at bottom of page. */
{
	width: 160px;
	text-align: center;
	float: left;
}
div.content-start
{
	padding: 0;
	margin: 0;
	margin-left: 204px;
	margin-left: 164px;
	
	margin: 0;
	background-image: url('notepad.gif');
	background-repeat: repeat-y;
	padding-left: 47px;
	
	width: calc(100% - 215px);
	float: right;
}
div.content-stop
{
	background-image: url('pageend.gif');
	background-position: right;
	background-repeat: repeat-y;
	padding-right: 7px;
}
div.content
{
	padding-top: 1px;	/* To stop margin collapse. */
	background-color: white;
	padding-left: 3px;
	padding-right: 3px;
    padding-bottom: 0.25em;
    border-bottom: solid 1px #c0c0c0;
}
div.offers
{
	margin: 4px 4px 4px 4px;
	margin: 4px auto 4px auto;
	padding: 0 4px 0 4px;
	border: 1px silver dotted;
	background: #ffffff;
	background: #f0f0f0;

	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;

	font-size: 75%;
	max-width: 12em;
}
div.suggested-interest {
	margin: 4px 4px 4px 4px;
	margin: 4px auto 4px auto;
	padding: 0 4px 0 4px;
	border: 1px silver dotted;
	background: #ffffff;
	background: #f0f0f0;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
	font-size: 75%;
	max-width: 12em;
}
@media(max-width: 500px) {
	/* Tablet mode */
	div.breadcrumb
	{
		width: auto;
		position: static;
		text-align: left;
		background-color: white;
        float: none;
	}
	div.content-start
	{
		padding: 0;
		margin: 0;
		background-image: none;
        float: none;
        width: 100%;
	}
	div.content-stop
	{
		padding: 0;	
		background-image: none;
        width: 100%;
	}
    div.side-content {
        float: none;
    	width: auto;
    }
    div.offers {
        max-width: 100%;
    }
	div.suggested-interest {
		max-width: 100%;
	}
	.wide-only
	{
		display: none;
	}
}
/* 
 * Side bar / breadcrumb styles
 */
div.breadcrumb ul {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	width: 132px;
	width: 140px;
	margin: 0 auto;
}
div.breadcrumb ul li {
    line-height: 1.2em;
    padding: 0px 0px 2px 0px;
    padding: 0px 2px 2px 2px;
    width: 132px;
    width: 100%;
    width: 128px;
    border: 2px outset;
    border: 2px outset #E0E0E0;
    background-color: #FFE8C8;
    background-color: #E8E8E8;
    background-image: linear-gradient(#F2F2F2, #D7D7D7);
    margin-left: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}
/*
div.breadcrumb ul li a {
	width: 132px;
	width: 100px;
}
*/
div.breadcrumb ul li:hover,
div.breadcrumb ul a:hover {
    background-color: #FFF0D0;
    background-color: #FEFEFE;
    background-image: linear-gradient(#FFFFFF, #D7D7D7);
}
div.breadcrumb ul a:active {
	padding: 0px 2px 0px 2px;
	border: 2px inset;
}
div.breadcrumb ul li:active {
	border: 2px inset;
}
div.breadcrumb ul li:active a {
	border: none;
}
@media(max-width: 500px) {
	/* Tablet mode */
	div.breadcrumb {
		border-bottom: solid 1px #c0c0c0;
	}
	div.breadcrumb ul
	{
		margin: 0;
		width: auto;
	}
	div.breadcrumb ul li
	{
		display: inline;
		border: none;
		background-color: white;
		padding: 0;
		white-space: nowrap;
	}
	div.breadcrumb li::before {
		content: ">";
	}
	div.breadcrumb ul::before {
		content: "You are here ";
	}
	div.breadcrumb ul.extra::before {
		content: "Related pages: ";
	}
	div.breadcrumb ul.extra li::before {
		content: "| ";	
	}
	div.breadcrumb ul.extra li:first-child::before {
		content: "";	
	}
}


/* Main body content styles */

/* Individual styles */

h1 {
	text-align: center;
}
h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: #000000;
	text-shadow: 1px 1px 1px #fff, 2px 2px 2px #888;
}
img {
	border: none;
}
p.TB {margin: 0; border: outset 2px; padding: 2; background-color:#FFFFFF;}
p.Ack {
	font-style: italic;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: right;
	font-size: 75%;
	width: 50%;
	float: right;
}
p.center {
	text-align: center;
}
/*
hr {
	clear: both;
}
*/
td {vertical-align: top}
td.nav	/* Navigation bar */
{
	text-align: center;
	width: 100px;
	width: 140px;
	margin: 0px auto 6px auto;
}
td.pageend {
	background-image: url('pageend.gif');
	background-repeat: repeat;
	width: 7px;
}
td.notepad {
	background-image: url('notepad.gif');
	background-repeat: repeat;
	width: 47px;
}
td.note {
	background-color: white;
}
table.Note {
	background-color: #8CD6FF;
	margin: 0px;
	padding: 0px;
}
ul.circle {
	list-style-type: circle;
}
ol.roman {
	list-style-type: lower-roman;
}
div.content ul {

}
div.content li {
	margin-bottom: 1em;
}
dd {
    margin-bottom: 1em;
}
td.note ul,
td.note ol,
td.note dd,
td.note li,
ol.roman li,
ul.spaced li,
ol.spaced li {
	padding-bottom: 0;
	margin-bottom: 1em;
}
ul.spaced li ol li {
	padding-bottom: 0;
	margin-bottom: 0;
}
ul.spaced li ol.spaced li
{
	margin-bottom: 1em;
}
dl.spaced dd {
	margin-bottom: 1em;
}
td.note ul.close li {
	margin-bottom: 0;
}
span.wbr {
	width: 0;
	font-size: 0;
	white-space: wrap;
	white-space: normal;
}
/* Use only with long expressions that would not otherwise break. */
span.break-anywhere {
	word-break: break-all; 
	hyphens: auto;
}
/*
 * Used to denote that the information is old, possibly for an old version.
 */
div.old {
	margin: 0 1em 0 1em;
	padding: 0 1em 0 1em;
	border: solid 1px #A52A2A;
	border: solid 1px #DEB887;
	background: #FFFfF0;
}
/*
 * Code samples in blue.
 */
pre,
code,
p.code,
dl.ArgList dt {
	color: #0000ff;
	font-family: monospace;
	font-size: 90%;
}
p.code {
	margin-left: 2em;
}
p.code span.comment {
	color: #008000;
}
/*
 * SQL tables. 
 */
table.sql
{
	margin-left: 2em;
	font-family: monospace;
	font-size: 90%;
	border: 1px dotted #D6D3CE;
	border-collapse:collapse;
}
table.sql th
{
	background-color: #D6D3CE;
	font-weight: normal;
	border: 1px solid black;
	padding: 0.25em;
}
table.sql td
{
	border: 1px dotted #D6D3CE;
	padding: 0.25em;
}
/*
 * Side "menu" buttons.
 */
/* Retired June 2019.
ul.SideButtons {
	list-style-type: none;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 8px 0px 8px;
	margin: 4px 6px 4px 6px;
	width: 132px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 4px;
	padding-right: 4px;
}
ul.SideButtons li {
    line-height: 1.2em;
    padding: 0px 0px 2px 0px;
    width: 132px;
    border: 2px outset;
    border: 2px outset #E0E0E0;
    background-color: #E8E8E8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}
ul.SideButtons a {
	width: 132px;
}
ul.SideButtons li:hover,
ul.SideButtons a:hover {
    background-color: #FFF0D0;
    background-color: #FEFEFE;
}
ul.SideButtons a:active {
	padding: 0px 2px 0px 2px;
	border: 2px inset;
}
ul.SideButtons li:active {
	border: 2px inset;
}
ul.SideButtons li:active a {
	border: none;
}
*/
/*
 * General.
 */
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.nowrap {
	white-space: nowrap;
}
/* Don't wrap the contents, but allow a wrap at the start of the block. */
.nowrapwrap {
	white-space: nowrap;
	display: inline-block;
}
.wrap {
	white-space: normal;
}
.tight {
	padding: 0 0 0 0;
	border: 0 0 0 0;
	margin: 0 0 0 0;
}
.noborder {
	border: none;
}
.indent {
	padding-left: 2em;
}
.smaller {
	font-size: smaller;
}
td.number {
	text-align: right;
	padding-right: 1em;
}
div.dos {
	border: solid 2px gray;
	padding: 1px 2px;
	margin-left: 8px;
	margin-right: 8px;	
	background: black;
}
div.dos p,
div.dos pre
{
	color: white;
	padding: 0 0 0 0;
	border: none;
	margin: 0 0 0 0;
	font-family: monospace;
}
th 
{
	background-color: #eeeeee;
}
a:active
{
	position: relative;
	top: 1px;
	left: 1px;
}
/* Used for closing notes, not considered part of the main text. */
div.endnote
{
}
div.endnote p
{
	font-size: 80%;
}
/*
 * Used for mock up of dialogs.
 */
div.dialog 
{
    margin: 0 4em;
    border: solid 1px black;
    padding: 8px 20px;
    box-shadow: 0 0 11px black;
}
div.dialog h3
{
    text-shadow: none;
}
span.button
{
	border-radius: 2px;
    padding: 0 4px;
	background-color: #e1e1e1;
	white-space: nowrap;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.5);
    background-image: linear-gradient(#F2F2F2, #D7D7D7);
}
/* 
 * Some wrapping in the side bar.
 */
div.side-content td
{
	display: inline-block;
	width: 100%;
}
div.side-content td td{
	display: table-cell;
}