html
{
	/* Force the vertical scrollbar gutter to always be reserved so the
	   viewport width stays constant between short and long pages
	   (otherwise the wrapper shifts horizontally as scrollbars appear). */
	scrollbar-gutter: stable;
	overflow-y: scroll;  /* fallback for browsers that don't support scrollbar-gutter */
	margin: 0;
	padding: 0;
}

body
{
	background-color: white;
	background-color: #cccccc;
	font-family:  "Helvetica Neue", "Helvetica", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: black;
	margin: 0;
	padding: 0;
	/* Pin body to the viewport so wide descendants can't stretch it past
	   the window and throw off the wrapper's margin:0 auto centering. */
	max-width: 100vw;
	overflow-x: hidden;
}

h1 
{ 
	font-size: 15pt; 
	font-weight: bold; 
	text-align: left; 
	color: #ff8000;
	font-style: italic;
	text-shadow: 1px 1px 0px #444444;
	/*display:inline; */
}



p
{ 
	/*display:inline;*/
	text-shadow: px 1px 0px #ffffff;
}




a:link 
{
	font-weight: bold; 
}
 
/* 
a:visited 
{
	font-weight: bold; 
}
*/ 
 
a:active 
{
	font-weight: bold; 
	color: #00FF00;
}


.article
{
	//background: #ff8000;
	width:100%;
	//box-shadow: 0 2px 2px -2px gray;
	padding:5px;
}



.leftdv
{
	font-size: 15pt; 
	font-weight: bold; 
	text-align: left; 
	color: #ff8000;
	font-style: italic;
	text-shadow: 1px 1px 0px #ffffff;
	font-style:italic;
	width:50%;
	Text-align:left;
	float:left;
}

.rightdv
{
	font-style:italic;
	font-size: 10pt; 
	width:50%;
	Text-align:right;
	float:right;
}

.sidebartitle
{
	font-weight: bold; 

}

.relatedtags
{

}


/*

	The tag cloud stuff

*/
.table_matrix
{
	background: #3d748e;
	text-align:center;
}

.table_matrix th
{
	background: #c7c7c7;
	width: 12.5%;
}

.table_matrix td
{
	background: #d7d7d7;
	width: 12.5%;
}

.table_matrix tr
{
	/*background: #00ffff*/;
}


/*
.articlebackground
{
	background: linear-gradient(#D0D0D0, #E5E5E5);	
}
*/
.article_title
{ 
	clear:both;
	font-size: 12pt; 
	font-weight: bold; 
	text-align: left; 
	color: #222222;
	//font-style: italic;
	text-shadow: 0px 1px 0px #ffffff;
	//box-shadow: 0 2px 1px -1px gray;
	padding: 10px;
	/*display:inline;*/
}

.subscript
{
	font-size:small; 
	//vertical-align:bottom;
} 

.text
{ 
	clear:both;
	/*display:inline;*/
	color: #222222;
	font: 0.9em "Helvetica Neue", "Helvetica", "Lucida Grande", "Lucida Sans Unicode", sans-serif;	
	text-shadow: 0px 1px 0px #ffffff;
	padding: 10px;	
}

.readmore
{
	width:100%;
	//border: 1px solid #CCCCCC;
	padding: 3px;
	margin: 5px; 
	text-align:right; 
	font-weight: 700;
	font-style:italic;
	text-decoration: none;
}

a
{
	text-decoration: none;
	color: #123456
}

a:hover 
{
	font-weight: bold; 
	color: #FF0000;
}

/*
*
*  For the quotes
*
*/
.quote
{
	font-style:italic;
	/*color: #888888; https://webaim.org/resources/contrastchecker/*/ 
	color: #595959;
	//text-shadow: -1px -1px 0px #666666;
}

.author
{
	text-align:right;
	font-weight:bold;
	/*color: #888888; https://webaim.org/resources/contrastchecker/*/ 
	color: #595959;
}


.book_extract
{
	border-left: 4px solid dcdcdc;
	background-color: #f5f5f5;
	padding: 20px;
}


/*

Copied from wordpress

*/
.picture
{
	max-width:350px;
	background-color: #F9F9F9;
	border: 1px solid #CCCCCC;
	padding: 3px;
	font: 11px/1.4em Arial, sans-serif;
}
.picture img 
{ 
	border: 1px solid #CCCCCC;
	vertical-align:middle; 
	margin-bottom: 3px; 
}
.right 
{ 
	margin: 0.5em 0pt 0.5em 0.8em; 
	float:right; 
}
.left 
{ 
	margin: 0.5em 0.8em 0.5em 0; 
	float:left; 
}
.center
{ 
	margin: 0.5em 0.8em 0.5em 0; 
}
.large
{
	max-width:550px;
	margin: 0.5em 0.8em 0.5em 0;
}

.youtube 
{ 
	background-color: #F9F9F9;
	border: 1px solid #CCCCCC; 
	padding: 3px;
	font: 11px/1.4em Arial, sans-serif; 
}

.toc
{
	background-color: #DDDDDD;
	border: 1px solid #CCCCCC;
	padding: 8px;
	font: 11px/1.4em Arial, sans-serif;
	max-width:150px;
}

.tocentry 
{ 
	text-decoration: none;
	color: #333333;
	list-style-type: disc;
	display: list-item;
	list-style-position: inside;
}


h2 
{
	text-decoration: none;	
	color: #333333;
}

/*

Page selector

*/
.pageselectorbox
{
	border: 1px solid #CCCCCC;
	padding: 3px;
	margin: 5px; 
	text-align:center; 	
}

.pageselectorentry
{
	text-decoration: none;
	color: #777777;
}

.pageselectorcurrententry
{
	color: #111111;
	font-weight: bold; 
	text-decoration: none;
}

.alignright
{ 
	text-decoration: none;
	color: #333333;
	text-align: right; 
	font: 11px/1.4em Arial, sans-serif; 
}
.alignleft 
{
	text-decoration: none;
	color: #12345;
	text-align: left; 
	font: 11px/1.4em Arial, sans-serif; 
}

/*

	The tag cloud stuff

*/
.tagcloud
{

}

.tagcloudlink
{
	color: #222222;
	text-decoration: none;	
}



/*
      This is the 3 columns layout
*/
#wrapper
{
	background: #ffffff;

	text-align: left;
	margin: 0px auto;
	padding: 10px;
	border:0;
	max-width: 1300px;
	width: 100%;
	box-sizing: border-box;
}

#header
{
	margin: 0 0 15px 0;
}

#wrapper img
{
	max-width: 100%;
	height: auto;
}

#wrapper iframe
{
	max-width: 100%;
}

/*
   Mobile-first: single stacked column by default, 3-column desktop opts in
   via @media (min-width: 1081px) below. Mobile-as-default matters because
   some browsers transiently evaluate media queries at the window width
   during tab navigation; if desktop were the default, that transient
   would flash a 3-column layout on every click.
*/
#container
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#side-a
{
	order: 1;
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
}

#content
{
	order: 2;
	background-color: #eeeeee;
	padding: 15px;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

#side-b
{
	order: 3;
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
}

/*
   Mobile-only: the default "Yeah, awesome!" quotes are just desktop filler.
   On mobile they'd push real content below a screenful of nothing, so hide.
*/
.sidebar-filler
{
	display: none;
}

/*
   Mobile-only: on the articles page the right sidebar holds the tag cloud
   (.relatedtags) — a browse/search aid that belongs next to the History,
   not at the bottom. Detect it with :has() and hoist #side-b above
   #content. On non-articles pages #side-b keeps the "Made with the OSDK"
   game spotlight at the bottom.
*/
@media screen and (max-width: 1080px)
{
	#side-b:has(.relatedtags)
	{
		order: 2;
	}

	#container:has(#side-b .relatedtags) #content
	{
		order: 3;
	}
}

/*
   Mobile-only: compact the sidebar nav (docs nav, tag cloud, article history)
   into horizontal flowing pills instead of a tall vertical list. The section
   headers (rendered as .quote or .sidebartitle) stay as row separators; the
   links inside each ul reflow inline with wrapping.
*/
#side-a ul
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding: 4px 0;
	margin: 0 0 8px 0;
	list-style: none;
}

#side-a ul li
{
	display: inline-block;
}

#side-a .quote,
#side-a .sidebartitle
{
	margin-top: 12px;
	padding-top: 4px;
	border-top: 1px solid #dddddd;
}

#side-a .quote:first-child,
#side-a .sidebartitle:first-child
{
	margin-top: 0;
	border-top: 0;
}

#content pre
{
	max-width: 100%;
	overflow-x: auto;
	box-sizing: border-box;
}

#content table
{
	max-width: 100%;
}

#footer
{
	clear: both;
	//font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
	padding: 10px;
	text-align: center;
	color: #888888;
	background: #dddddd;
}


/*

	Testimonial

*/

.testimonial {
 width:620px;
 float:left;
 margin:15px 0 30px 0;
 }
 .left-quote {
 float:left;
 background:url(/pics/quote-left.jpg) no-repeat top;
 width:68px;
 height:77px;
 }
 .testi-text {
 float:left;
 text-align:justify;
 width:470px;
 padding-right:65px;
 background:url(/pics/quote-right.jpg) no-repeat right bottom;
 }
 .testi-pic {
 float:left;
 width:77px;
 height:104px;
 margin-left:70px;
 display:inline;
 }
 .testi-name {
 float:left;
 padding:30px 0 0 15px;
 }


/*

	Tabs
	
*/

/*
   All #tabs rules are scoped under #header because issues.php emits a
   nested sort-nav that re-uses id="tabs"/"tab1..4"/"page1" inside
   #content. Without this scoping the nested list inherits the header's
   flex layout and active-tab highlight.
*/
#header #tabs
{
	color: #00ffff;
	border-bottom: .3em solid #dddddd;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	align-items: flex-end;
}

#header #tabs li
{
	margin: 2px;
	border-top: .1em solid #dddddd;
	border-left: .1em solid #dddddd;
	border-right: .1em solid #dddddd;
	background: #dddddd;
	color: #00ffff;
	vertical-align:middle;
}

#header #tabs li a
{
	text-decoration: none;
	padding: 0.25em 1em;
	/*color: #888888; https://webaim.org/resources/contrastchecker/*/
	color: #595959;
}

#header #page1 #tabs li#tab1,
#header #page2 #tabs li#tab2,
#header #page3 #tabs li#tab3,
#header #page4 #tabs li#tab4,
#header #page5 #tabs li#tab5
{
	color: #000000;
	padding: 0.25em 1em;
	background-color: #ffffff;
	//border-bottom: .3em solid #dddddd;
	//font-weight: bold;
	//font-size: bigger;
}


/* Media, picture frames and headline rows — mobile-default sizing */

.picture, .youtube, .toc
{
	max-width: 100%;
	box-sizing: border-box;
}

.leftdv, .rightdv
{
	width: 100%;
	float: none;
	text-align: left;
}

/* =============================================================

   Desktop layout — opt in above 1080px

============================================================= */

@media screen and (min-width: 1081px)
{
	#container
	{
		flex-direction: row;
	}

	#side-a
	{
		order: 0;
		flex: 1 1 240px;
		min-width: 120px;
		width: auto;
		padding: 15px;
	}

	#content
	{
		order: 0;
		flex: 10 1 600px;
		margin: 0 10px;
		padding: 25px;
		width: auto;
	}

	#side-b
	{
		order: 0;
		flex: 1 1 240px;
		min-width: 100px;
		width: auto;
		padding: 15px;
	}

	/* Restore desktop sidebar: show the default quotes, return nav to a vertical list. */
	.sidebar-filler
	{
		display: block;
	}

	#side-a ul
	{
		display: block;
		padding: 0 0 0 1.5em;
		margin: 0 0 8px 0;
		list-style: disc;
	}

	#side-a ul li
	{
		display: list-item;
	}

	#side-a .quote,
	#side-a .sidebartitle
	{
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.leftdv, .rightdv
	{
		width: 50%;
	}

	.leftdv
	{
		float: left;
	}

	.rightdv
	{
		float: right;
		text-align: right;
	}
}

@media screen and (max-width: 500px)
{
	.picture.left, .picture.right, .youtube.left, .youtube.right
	{
		float: none;
		margin: 0.5em 0;
	}
}