/* Credits and a big thankyou to Moose for the style - I have made some modifications to get it reliable in IE
(such a difficult browser, and IE 7 does not make it any better). I would have the navigation last to be nicer
non-visual/mouse users, but IE will not let me make it look nice then. Sorry, but there are too many IE users
and I cannot ignore them. */

/* Please do not tell me that this file does not validate - it is valid, but the W3C's CSS validator is broken */

/* The basic boxing effect */
/* This might be a little ugly in IE 5.x, but no, I don't care, because the content is still all visible */
html {
	font-family: sans-serif;
	color: rgb(56,56,56);
	background-color: rgb(230,230,230);
	margin: 0;
	padding: 12px 30px;
}
/* The paddings on BODY used to be margins on HTML - see the note about IE above */
body {
	background-color: rgb(246,246,246);
	margin: 0 auto;
	padding: 0;
	width: 85%;
	border-width: 5px 1px 0;
	border-color: #3366CC rgb(164,164,164) rgb(164,164,164);
	border-style: solid;
	max-width: 900px;
}
h1 {
	font-size: 110%;
	font-weight: normal;
	text-align: right;
	color: rgb(74,74,74);
	background-color: rgb(220,220,220);
	background-image: url(images/top.png);
	background-repeat: repeat-x;
	background-position: left center;
	padding: 10px 15px;
	margin: 0;
	border-bottom: 1px solid rgb(144,144,144);
	height: 20px;
}
#content {
	margin-right: 250px;
	padding: 0 3%;
	border: 1px solid rgb(246,246,246);
	border-right-color: rgb(164,164,164);
}
body.wider #content {
	margin-right: 0px;
	border-right-color: rgb(246,246,246);
}
body.wider #index { margin-left: 1em; }
body.wider .needswidth { clear: right; }
address {
	clear: right;
	font-size: 70%;
	font-style: normal;
	background-color: rgb(246,246,246);
	background-image: url(images/center.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	padding: 4px 7px 7px;
	margin: 0;
	border-top: 1px solid rgb(170,170,170);
	min-height: 15px;
}

/* The navigation */
/* This was previously positioned - changed to float - see the note about IE above */
/* Also used to be a DL - changed to H3 and LI to facilitate header navigation */
#index {
	color: rgb(74,74,74);
	background-color: rgb(245,245,245);
	margin: -1px 0;
	width: 250px;
	border-left: 1px solid rgb(164,164,164);
	border-bottom: 1px solid rgb(164,164,164);
	float: right;
}
#index h3 {
	font-size: 75%;
	font-style: normal;
	font-weight: normal;
	color: rgb(74,74,74);
	background-color: rgb(227,227,227);
	background-image: url(images/bar.png);
	background-repeat: repeat-x;
	background-position: 0px -5px;
	padding: 5px 7px;
	margin: 0;
	border-width: 1px 0;
	border-style: solid;
	border-color: rgb(144,144,144);
}
#index h3::before {
	content: normal;
}
#index ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#index li {
	list-style-type: none;
	line-height: 122%;
	display: block;
	font-size: 70%;
	padding: 3px 8px 5px;
	margin: 0;
	border-top: 1px solid rgb(223,223,223);
}
#index li img {
	vertical-align: middle;
}
#index li.currentpage { font-style: italic; }
#index a { text-decoration: none; }
#index a:focus, #index a:hover { text-decoration: underline; }
#index .accessible { display: none; }
/* This form will never look perfect, because different browsers apply different quirks models to different input types.
Most cannot work with percentages properly, and and Mac Aqua will not let me style them at all. */
#index form, #index form p {
	margin: 0;
	padding: 0;
	line-height: 100%;
	text-align: center;
}
#index form p {
	padding: 3px 1px;
}
input.searchbybut {
	width: 55%;
	padding: 2px;
	border: 1px solid rgb(223,223,223);
	background-color: rgb(250,250,250);
	color: rgb(100,100,100);
}
input.searchbybut:focus {
	background-color: rgb(255,255,255);
	color: rgb(0,0,0);
}
input.searchbut {
	width: 30%;
	padding: 2px 10px;
	border: 1px solid rgb(100,100,100);
	background-color: rgb(227,227,227);
	background-image: url(images/bar.png);
	background-repeat: repeat-x;
	background-position: bottom left;
}

/* next/prev links */
#guide {
	font-weight: bold;
	list-style: none;
	height: 1.5em;
	margin: 0;
	padding: 0 0 0 7%;
}
div #guide li {
	text-align: right;
	width: 45%;
	float: left;
	margin: 0;
	padding: 0;
}
#guide li:first-child { text-align: left; }
#content p.lastmod {
	color: rgb(150,150,150);
	font-size: 60%;
	text-align: right;
}

/* Browser bug notes */
.browserbugs {
	color: rgb(150,150,150);
	font-size: 90%;
}
.browserbugs li {
	margin-top: 0;
}

/* advanced search form */
form ul#srchtut {
	float: left;
	margin: 0 1em 0 0;
}
#searchform {
	margin: 0;
	padding: 0;
}
#content fieldset {
	border: 1px solid rgb(223,223,223);
	padding: 0.5em;
}
#searchform ul, #searchform li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	white-space: nowrap;
}
#searchform ul {
	margin-bottom: 1.2em;
}
ul.outersearchresults, ul.outersearchresults li {
	margin: 0;
	margin-top: 1em;
	padding: 0;
}
ul.outersearchresults {
	margin-top: 0;
	padding-left: 1.3em;
}
ul.searchresults, ul.searchresults li, ul.searchresults h5, ul.searchresults h6, ul.searchresults blockquote, ul.searchresults p {
	list-style-type: none;
	margin: 0 0 0.7em 0;
	padding: 0;
}
ul.outersearchresults h5 {
	font-size: 1em;
	font-weight: bold;
}
ul.searchresults h5, ul.searchresults h6 {
	font-size: 1em;
	font-weight: normal;
	margin: 1.3em 0 0.2em;
	border-bottom: 1px solid rgb(223,223,223);
}
ul.searchresults img { border: 0px solid #fff; }
#searchstring {
	width: 70%;
}
#submitbut {
	padding-left: 2px;
	padding-right: 2px;
}

/* script lists */
ul.scriptlist {
	list-style-type: none;
	margin: 0 0 1em;
	padding: 0;
}
ul.scriptlist li {
	list-style-type: none;
	margin: 0 0 0.2em 1.5em;
	padding: 0;
	min-height: 16px;
	border-bottom: 1px solid rgb(235,235,235);
}
span.icons {
	float: right;
}
span.icons img {
	margin: 0 3px;
	vertical-align: middle;
}
.supy { background-color: #9f9; }
.supp { background-color: #ff9; }
.supn { background-color: #f99; }
.supw { background-color: #aaf; }
dl.classkey dt { float: left; width: 1em; margin-right: 5px; }
dl.classkey dd { margin-left: 0; padding-left: 0; }
dl.classkey + table thead th { text-align: center; }
ul.scriptlist h3 {
	font-weight: bold;
	font-style: normal;
	font-size: 1em;
	margin: 0;
}
ul.scriptlist h3:before { content: normal; }

/* email lists */
ol.emaillist {
	margin: 1em 0;
	padding: 0;
}
ol.emaillist li {
	margin: 0.7em 0 0.7em 2.5em;
	padding: 0;
}
ol.emaillist h4 {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgb(223,223,223);
	font-size: 1em;
	text-align: left;
}
ol.emaillist p {
	margin: 0;
	padding: 0;
}
#content ol.emaillist p.meta {
	font-size: 0.7em;
	color: rgb(200,200,200);
}
ol.emaillist ul {
	margin: 0;
	padding: 0;
}
ol.emaillist ul li {
	margin: 0 0 0 1.2em;
	padding: 0;
}
#content div.inbox pre, #content div.outbox pre { clear: right; }
div.inbox pre, div.outbox pre { display: table; }
#content.email {
	margin-right: 0px;
	border-right-color: rgb(246,246,246);
}
div.inbox table, div.inbox table th { border-left: 2px solid #36c; }
div.inbox pre { border-left: 1px solid #36c; }
#content.email > h2:first-child { margin-top: 3em; margin-bottom: 2.5em; }
span.newUp { color: #d00; }
ul.badexamples { color: red; }
ul.goodexamples { color: green; }

/* tree view */
ul.treeview, ul.treeview ul, ul.treeview li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.treeview { margin: 1em 0; }
ul.treeview ul { padding-left: 0.3em; }
#content ul.treeview li { text-align: left; }
ul.treeview ul li {
	border-left: 1px dotted #000;
	padding-left: 13px;
	text-align: left;
	background: url(images/dotted.gif) scroll no-repeat 1px 0.8em;
}
ul.treeview ul li.last {
	border-left-width: 0px;
	padding-left: 14px;
	background: url(images/dottedangle.gif) scroll no-repeat left top;
}
ul.treeview a { text-decoration: none; }
ul.treeview a:hover { text-decoration: underline; }
dfn { font-style: normal; font-weight: bold; }
dfn.o { color: rgb(0,119,0); }
dfn.p { color: rgb(50,50,200); }
dfn.c { color: rgb(200,0,0); }
dfn.e { color: rgb(0,0,0); }
dfn.m { color: rgb(150,0,119); }

/* browser page */
h3.browlist { border-bottom: 1px solid rgb(223,223,223); }

/* thumbnails */
.fixednote { display: none; position: fixed; bottom: 3px; right: 3px; background-color: rgb(246,246,246); border: 1px solid rgb(164,164,164); }
* > .fixednote { display: block; }
.fixednote ul, .fixednote li { margin: 0; padding: 0; list-style-type: none; }
.fixednote li { margin: 2px; padding-top: 2px; text-align: center !important; border-top: 1px solid rgb(223,223,223); }
.fixednote li:first-child { border-top: none; padding-top: 0; }
.fixednote a, .fixednote a img { display: block; }
.fixednote a img { border: 1px solid rgb(74,74,74); }
ul.thumblist, ul.thumblist li { margin-left: 0; padding-left: 0; list-style-type: none; }
ul.thumblist li { height: 102px; padding: 2px 0; border-bottom: 1px solid rgb(223,223,223); }
ul.thumblist > li { height: auto; min-height: 102px; }
ul.thumblist a { display: block; float: left; margin: 0 5px 0 0; width: 100px; }
ul.thumblist a img { border: 1px solid rgb(74,74,74); display: block; }

/* general element styles */
h1::before, h1::after, h3::before, #index li.currentpage a::before {
	content: "\0020\2014\0020";
	color: rgb(150,150,150);
}
h2 {
	font-family: sans-serif;	
	font-size: 75%;
	line-height: 130%;
	color: rgb(80,80,80);
	padding: 0 5px;
	margin: 40px 0 20px -3px;
	border-left: 10px solid rgb(217,217,217);
}
#content > h2:first-child { margin-top: 10px; }
h3 {
	font-size: 85%;
	font-weight: bold;
	font-style: italic;
	margin: 50px 5px 20px;
}
h4 {
	font-size: 85%;
	font-weight: bold;
	margin-top: 2.5em;
}
h5 {
	font-size: 75%;
	font-weight: normal;
}
#content > h5 {
	text-decoration: underline;
}
p, #content li, td, dt, dd, th {
	font-size: 85%;
	text-align: justify;
	line-height: 170%;
}
caption {
	font-size: 85%;
}
table, td, th {
	border: 1px solid rgb(164,164,164);
	border-collapse: collapse;
	text-align: left;
	empty-cells: show;
}
th { background-color: rgb(230,230,230); font-weight: bold; }
thead th { background-color: rgb(210,210,210); }
th, td { padding: 2px; }
#content li li, #content td li, #content li p, #content td p, #content td td, #content li td, #content li dt, #content td dt, #content li dd, #content td dd, #content dd li, #content dd p {
	font-size: 100%;
}
p, ul, ol {
	margin-top: 10px;
	margin-bottom: 10px;
}
ul, ol {
	padding-left: 0px;
	margin-left: 0px;
}
li {
	padding-left: 0px;
	margin-left: 1.5em;
}
a {
	color: rgb(74,74,74);
}
a img { border: none; }
img[usemap] { border: none; }
p.notinflow { float: right; margin-left: 0.7em; margin-bottom: 0.3em; }
sup { vertical-align: top; }
pre {
	margin: 20px auto;
	font-size: 12px; /* Mozilla uses a font that is much smaller than the others by default, so yes, I am using pixels */
	font-family: monospace;
	background-color: rgb(250,250,250);
	padding: 5px 5px 16px;
	border-width: 3px 1px 1px; 
	border-style: solid dotted; 
	border-color: rgb(160,160,160); 
	width: 95%;
	line-height: normal;
	text-align: left;
}
/* IE mac sucks, the PREs disappear completely \*/
pre {
	overflow: auto;
	overflow-y: hidden;
}
/* Yes, I hate hacks, but I would prefer that IE Mac users were able to read this page */
code, var, samp, kbd {
	color: rgb(0,0,0);
	font-family: monospace;
	font-style: normal;
	white-space: nowrap;
	font-size: 117%;
}
p code, #content li code, td code {
	font-size: 110%;
}
pre var, pre samp, pre kbd, #content pre code {
	white-space: pre;
	font-size: 100%;
}
code.bad {
	color: red;
}
code del {
	color: red;
	text-decoration: none;
}
span.word {
	white-space: nowrap;
}
span.comment {
	color: rgb(170,170,170);
}
label {
	cursor: pointer;
}
input, textarea, select, button { max-width: 98%; }
form table { width: 95%; } /* prevents IE's shrink-forever with max-width inside tables */
img, object { max-width: 100%; }
span.icons img { max-width: none; } /* Firefox thinks max-width inside shrink-to-fit (float) means 0 */

/* special cases for script API documentation */
dl.api dd dd, dl.api dd dt { font-size: 1em; }
dl.api dt, dl.longinlines dd { text-align: left; }
/* for showing HTML structure inside a list to get the right indents */
ul.struclist, ul.struclist * { list-style-type: none; }
ul.struclist { margin-left: 0px; padding-left: 0px; }
ul.struclist * { margin: 0px; padding: 0px; }
ul.struclist ul li { margin-left: 1em; }

/* messing with the Jimmy Wales extension */
#centralNotice > div {
	content: "Noooo!";
	background-image: url(http://www.cavinguk.co.uk/holidays/NantCrewNantDdu2009/thumb/Photographer.jpg) !important;
	background-repeat: repeat !important;
	background-attachment: fixed !important;
}
#centralNotice > div * {
	display: none !important;
}
#centralNotice > div:before {
	content: "Please read: an impersonal unappealing nag.";
	color: yellow;
	font-size: 2em;
	background: black;
	opacity: 0.5;
}

/* print media - this works best on the tutorials, since I suspect that is what people want to print */
@media print {
	body { width: auto; }
	html { padding: 12px 8px; }
	html, body, h1, pre, address {
		background: white;
		color: black;
	}
	#content > h2 { page-break-before: always; }
	#content > h2:first-child { page-break-before: avoid; }
	address::before {
		content: "http://www.howtocreate.co.uk/ - ";
	}
	pre, pre var, pre samp, pre kbd, #content pre code {
		white-space: pre-wrap;
	}
	#index, #guide { display: none; }
	#content {
		margin: 0;
		border-right: none;
	}
	* * * .fixednote { display: none; }
	#tocont ul, #tocont li { margin-left: 0; padding-left: 0; list-style-type: none; }
	#tocont a { text-decoration: none; }
	#tocont a::after { content: leader(".") target-counter(attr(href), page); }
}

/* Handheld media - because I know what I am doing */
@media handheld {
	/* I could combine this with the media query, but I want to be nice to device browsers that understand handheld media
	but not media queries */
	* { font-size: 11px !important; }
	h1 { font-size: 1.2em !important; min-height: 1.4em !important; height: auto !important; }
	h1::before, h1::after { content: normal; }
	h2 { font-size: 1.1em !important; }
	h3, h4 { font-size: 1em !important; }
	body { width: auto; }
	html { padding: 4px; }
	p, #content li, td, dt, dd, th {
		text-align: left !important;
	}
	pre, pre var, pre samp, pre kbd, #content pre code {
		white-space: pre-wrap;
	}
	pre {
		display: table;
	}
	#content {
		margin: 0;
		border-right: none;
	}
	#index {
		width: auto;
		float: none;
		margin: 0;
		border-left: none;
	}
	#guide { padding: 0; }
	#guide li {
		text-align: center !important;
		width: 47%;
	}
	* > .fixednote { display: none; }
	ul.thumblist, body ul.thumblist li { margin: auto; padding: 1px; list-style-type: disc; height: auto; min-height: 0; }
	ul.thumblist a { float: none; margin: 0 auto; width: auto; }
	code, var, samp, kbd { white-space: normal; }
	iframe, img, textarea, select { max-width: 100%; }
}

@media speech, aural, handheld, braille, tty {
	#index .accessible {
		display: block;
		margin: 5px 0;
	}
}

/* Media queries to be nice to browsers that are good enough */
/* These are part of CSS 3, so:
1. If the browser does not understand them, it will ignore them, and that is OK.
2. If your browser flags them as errors, it is is because your browser's CSS support is not high enough;
   complain to them, not me. */
@media all and (min-width: 1280px) { body { max-width: 1000px; } }
@media all and (max-width: 650px) {
	body { width: auto; }
	html { padding: 12px 8px; }
	* > .fixednote { display: none; }
	iframe, img, textarea, select { max-width: 100%; }
}
@media all and (max-width: 450px) {
	* { font-size: 11px !important; }
	h1 { font-size: 1.2em !important; min-height: 1.4em !important; height: auto !important; }
	h1::before, h1::after { content: normal; }
	h2 { font-size: 1.1em !important; }
	h3, h4 { font-size: 1em !important; }
	html { padding: 4px; }
	p, #content li, td, dt, dd, th {
		text-align: left !important;
	}
	#content {
		margin: 0;
		border-right: none;
	}
	#index {
		width: auto;
		float: none;
		margin: 0;
		border-left: none;
	}
	input.searchbut {
		width: auto;
	}
	#guide { padding: 0; }
	#guide li {
		text-align: center !important;
		width: 47%;
	}
	#index .accessible {
		display: block;
		margin: 5px 0;
	}
	ul.thumblist, body ul.thumblist li { margin: auto; padding: 1px; list-style-type: disc; height: auto; min-height: 0; }
	ul.thumblist a { float: none; margin: 0 auto; width: auto; }
	code, var, samp, kbd { white-space: normal; }
}

@media print {
	/* Has to be in its own block because this part of CSS 3 upsets KHTML (Konqueror, Safari, and OmniWeb) and makes it
	   ignore the entire media block */
	title { string-set: header content(); }
	#content h2 { string-set: header2 content(); }
	@page {
		@bottom-center { content: counter(page)" of "counter(pages); }
		@top-left { content: string(header); }
		@top-right { content: string(header2); }
	}
}

/*
@media screen and ( view-mode: minimized ) {
	body { display: none; }
	html { background-image: url(thumbnail.png); background-size: 100% auto; background-repeat: no-repeat; }
}
*/