/* This simulates a style I used for a few pages on this site -
   it generally allows mre screen space usage than the others, so it is used where content needs more space */

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

html {
	margin: 0px;
	padding: 0px 3em 0px 3em;
	background-color: #47b;
	color: #000;
	font-family: 'Arial New', Arial, sans-serif;
}

body {
	margin: 0px;
	padding: 10px 2em 1em 2em;
	background-color: #edf2f8;
	border-right: 3px solid #257;
	border-left: 3px solid #257;
}

h1 {
	background: #558fc0 url(images/SkomerSea.jpg) no-repeat scroll 50% 0%;
	text-align: center;
	padding-right: 30px;
	padding-top: 40px;
	height: 160px;
	color: #ff0;
	font-size: 35px;
}

body.wider .needswidth { clear: right; }

address {
	clear: right;
	font-style: normal;
	padding-top: 4px;
	margin: 0;
	border-top: 1px solid #257;
}

/* The navigation */
#index {
	background-color: #edf2f8;
	outline: 0.95em solid #edf2f8;
	margin: 0px 0px 1em 1.5em;
	width: 250px;
	border-left: 1px solid #257;
	border-bottom: 1px solid #257;
	float: right;
}
#index h3 {
	margin: 0px;
	border-bottom: 1px solid #026;
	padding-left: 0.5em;
	background-color: #dde2e8;
}
#index ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#index li {
	list-style-type: none;
	display: block;
	padding: 3px 8px 5px;
	margin: 0;
	border-bottom: 1px solid #dde2e8;
	font-size: 80%;
}
#index li img {
	vertical-align: middle;
}
#index li.currentpage { font-weight: bold; }
#index a { text-decoration: none; }
#index a:focus, #index a:hover { text-decoration: underline; }
#index .accessible { display: none; }
#index form, #index form p {
	margin: 0;
	padding: 0;
	text-align: center;
}
#index form p {
	padding: 2px;
}
input.searchbybut {
	width: 55%;
	padding: 2px;
}
input.searchbut {
	width: 30%;
	padding: 2px 10px;
}

/* 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: 70%;
	text-align: right;
}

/* Browser bug notes */
.browserbugs {
	color: #700;
	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 #257;
	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 #dde2e8;
}
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;
}
span.icons {
	width: 70px;
	display: inline-block;
}
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; font-weight: normal; margin-top: 0px; }
dl.classkey dd { margin-left: 0; padding-left: 0; }
dl.classkey + table thead th { text-align: center; }
#content ul.scriptlist h3 {
	font-weight: bold;
	font-size: 1em;
	margin: 0;
	border: none;
	background-color: transparent;
}

/* 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 #dde2e8;
	font-size: 1em;
	text-align: left;
}
ol.emaillist p {
	margin: 0;
	padding: 0;
}
#content ol.emaillist p.meta {
	font-size: 0.7em;
	color: #bdc2c8;
}
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; }
div.inbox table, div.inbox table th { border-left: 2px solid #558fc0; }
div.inbox pre { border: 2px solid #558fc0; }
#content.email > h2:first-child { margin-top: 2.5em; margin-bottom: 2em; }
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); }

/* thumbnails */
.fixednote { display: none; position: fixed; top: 3px; right: 3px; background-color: #edf2f8; border: 1px solid #257; }
* > .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; border-top: 1px solid #dde2e8; }
.fixednote li:first-child { border-top: none; padding-top: 0; }
.fixednote a, .fixednote a img { display: block; }
.fixednote a img { border: 1px solid #009; }
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 #dde2e8; }
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 #009; display: block; }

/* general element styles */
h2 {
	color: #fff;
	background-color: #026;
	padding: 3px 0px 5px 1em;
}

#content h3 {
	border-left: 1em solid #026;
	border-bottom: 1px solid #026;
	padding-left: 0.5em;
	background-color: #dde2e8;
}

h4, h5, h6 { font-weight: bold; }
h4 { font-size: 1.1em; }
h5, h6 { font-size: 1em; }

h2[id]:hover::after, h3[id]:hover::after { content: "#"attr(id); float: right; margin-right: 0.5em; margin-left: 1em; color: #bcc; }

table, td, th {
	border: 1px solid #000;
	border-collapse: collapse;
	text-align: left;
	empty-cells: show;
}
th { background-color: #ddd; font-weight: bold; }
thead th { background-color: #ccc; }
th, td { padding: 1px; }
ul, ol {
	padding-left: 0px;
	margin-left: 0px;
}
li {
	padding-left: 0px;
	margin-left: 1.5em;
}
a { color: #009; text-decoration: underline; }
a:hover { text-decoration: none; }
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 {
	font-size: 12px;
	display: block;
	border: 1px solid #bbb;
	background-color: #fff;
	padding: 2px 2px 16px;
	width: 95%;
}
* > pre { width: auto; }
#content.email  pre { width: 95%; }
/* 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: #700;
	font-family: monospace;
	font-style: normal;
	white-space: nowrap;
}
pre var, pre samp, pre kbd, #content pre code { white-space: pre; }
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 */

dt {
	margin-top: 1em;
	margin-left: 1em;
	font-weight: bold;
	display: list-item;
}

/* print media - this works best on the tutorials, since I suspect that is what people want to print */
@media print {
	h1 {
		border-bottom: 1px solid #026;
		border-top: 1px solid #026;
		padding: 0px;
		height: auto;
		margin: 0px;
	}
	body { width: auto; padding: 5px; }
	html { padding: 12px 8px; }
	html, body, h1, pre {
		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; }
	* * * .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;
		border-bottom: 1px solid #026;
		border-top: 1px solid #026;
		background-image: none;
		padding: 0px;
		height: auto;
		margin: 0px;
	}
	h2 { font-size: 1.1em !important; }
	h3, h4 { font-size: 1em !important; }
	body { width: auto; padding: 2px; margin: 0;}
	html { padding: 0px 4px; margin: 0; }
	pre, pre var, pre samp, pre kbd, #content pre code {
		white-space: pre-wrap;
	}
	pre {
		display: table;
	}
	#index {
		width: auto;
		float: none;
		margin: 0;
		border-left: none;
		outline: 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 (max-width: 650px) {
	body { width: auto; padding: 10px; margin: 0;}
	html { padding: 0px 10px; margin: 0; }
	#index {
		width: auto;
		float: none;
		margin: 0;
		border-left: none;
		outline: none;
	}
	#guide { padding: 0; }
	#guide li {
		text-align: center !important;
		width: 47%;
	}
	#index .accessible {
		display: block;
		margin: 5px 0;
	}
	* > .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; }
}
@media all and (max-width: 450px) {
	* { font-size: 11px !important; }
	h1 {
		font-size: 1.2em !important;
		border-bottom: 1px solid #026;
		border-top: 1px solid #026;
		background-image: none;
		padding: 0px;
		height: auto;
		margin: 0px;
	}
	h2 { font-size: 1.1em !important; }
	h3, h4 { font-size: 1em !important; }
	input.searchbut { width: auto; }
	iframe, img, textarea, select { max-width: 100%; }
}

@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); }
	}
}