/* 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: 0px 0px;
}
/* The paddings on BODY used to be margins on HTML - see the note about IE above */
body {
	background-color: rgb(255,255,255);
	margin: 0;
	padding: 0;
	width: 85%;
	border-width: 0px 0px 0px;
	border-color: #3366CC rgb(164,164,164) rgb(164,164,164);
	border-style: solid;
	max-width: 900px;
}
a { text-decoration: none}
h1 {
	font-size: 90%;
	font-weight: normal;
	text-align: left;
	color: rgb(74,74,74);
	background-color: rgb(200,200,200);
	background-image: url(../images/top.png);
	background-repeat: repeat-x;
	background-position: left center;
	padding: 10px 10px;
	margin: 0;
	border-bottom: 1px solid rgb(144,144,144);
	border-right: 1px solid rgb(144,144,144);
	border-left: 1px solid rgb(144,144,144);
	border-top: 1px solid rgb(144,144,144);
	height: 15px;
}
#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: 320px;
	border-left: 1px solid rgb(164,164,164);
	border-right: 1px solid rgb(164,164,164);
	border-bottom: 1px solid rgb(164,164,164);
	float: left;
}
#index h3 {
	font-size: 75%;
	font-style: 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: 0px 0px;
	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: 100%;
	padding: 3px 8px 0px;
	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: 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: 2em;
	margin: 2;
}
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: 0px 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: normal;
	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: 0px solid rgb(164,164,164);
	border-collapse: collapse;
	text-align: left;
	empty-cells: show;
}
table1, td1, th1 {
	border: 0px 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%; }
img, object { max-width: 100%; }
span.icons img { max-width: none; } /* Firefox thinks max-width inside shrink-to-fit (float) means 0 */

/* 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; }
	#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% !important; }
}

@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% !important; }
}
@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; }
	#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%;
	}
	#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); }
	}
}