/**********************************************************
* global styles - these have nothing to do with the tests *
* styles used for the tests are defined below             *
**********************************************************/

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

body {
	margin: 0px;
	padding: 10px;
	background-color: #edf2f8;
	border-right: 5px solid #257;
	border-bottom: 4px solid #257;
}

body[class] {
	background: #edf2f8 url(LillyPads.jpg) no-repeat scroll 100% 0%;
}

h1 { line-height: 1.1em; }

blockquote {
	display: block;
	margin-left: 4em;
	margin-right: 4em;
	padding: 4px;
	border-top: 1px solid #89a;
	border-bottom: 1px solid #89a;
	background-color: #fdf8ff;
}

blockquote.aside {
	color: #555;
	position: relative;
	top: 0px;
	left: 0px;
}

blockquote.aside:before {
	position: absolute;
	top: -1.3em;
	left: -0.7em;
	content: "Aside:";
	font-size: 0.7em;
	border: 1px solid #89a;
	background-color: #fdf8ff;
}

code {
	display: block;
	margin: 1em;
	padding: 4px;
	border: 1px solid #89a;
	background-color: #dde2f8;
	font-family: 'Courier New', Courier, monospace;
}

br.besideBlock { display: none; }

a {
	color: #139;
	text-decoration: underline;
}

a:visited { color: #224; }

body a:hover, p.nextlink a:hover {
	background-color: #cdd2d8;
	text-decoration: none;
}

p.nextlink a {
	display: block; 
	margin: 5px;
	padding: 3px;
	width: 25em;
	border-bottom: 1px solid #adb2b8;
	border-right: 10px solid #adb2b8;
	background-color: #fdf8ff;
	color: #257;
	text-decoration: none;
	margin-left: auto;
	margin-right: auto;
}

ul {
	float: left;
	margin: 0px;
	margin-right: 10px;
	padding: 4px;
	border-right: 5px solid #79a;
	border-bottom: 4px solid #79a;
	list-style-type: none;
	background-color: #d7e2f8;
}

ul li {
	margin: 0px 0px 1px 0px;
	padding: 0px;
	list-style-type: none;
}

ul a { display: block; padding: 1px; }

ul li:first-child a {
	background-color: #9bc;
	font-weight: bold;
	text-decoration: none;
}

ul a.isthis {
	background-color: #b9ccdd;
	border: 1px solid #257;
	text-decoration: none;
}

ul li:first-child a:hover { background-color: #c9dced; }

ul li:first-child a:before { content: "<< "; }

div.makeScroll { height: 500px; }

p.workaround {
	display: block;
	margin-left: 1em;
	margin-right: 1em;
	padding: 4px;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	color: #567;
	background-color: #fff;
	font-size: 0.8em;
}

p.workaround code { font-size: 1.11em; }

.demo {
	display: block;
	padding: 4px;
	border-top: 1px solid #257;
	border-bottom: 1px solid #257;
	background-color: #ddd;
}

p.validlink img { border: none; }

p.validlink a:hover { background-color: transparent; }

del { text-decoration: line-through; }

body[class] div.clearing { clear: both; height: 1px; overflow: hidden; }

/*************************************
* specific styles for each test page *
*************************************/

/* PNG Transparency page */

body.PNGTransparency div.demo {
	clear: left;
}

body.PNGTransparency div.demo div.fakePage {
	width: 28em;
	position: relative;
	left: 0px;
	top: 0px;
	height: 25.5em;
	border: 1px solid black;
	background-color: #47b;
	color: #fff;
}

body.PNGTransparency div.demo div.thehead {
	width: 220px;
	position: absolute;
	left: 0px;
	top: 0px;
	padding-top: 80px;
	padding-left: 80px;
	background: transparent url(logos.png) no-repeat scroll 0px 0px;
	font-weight: bold;
	text-decoration: underline;
}

body.PNGTransparency div.demo div.thehead div {
	height: 91px;
}

body.PNGTransparency div.demo div.thepage {
	margin-top: 120px;
}

body.PNGTransparency div.demo div.thepage p:first-child { margin-top: 0px; text-indent: 80px;  }
body.PNGTransparency div.demo div.thepage p + p { margin-left: 2px; }
body.PNGTransparency div.demo div.thepage p + p + p { margin-bottom: 0px; }

/* position:fixed; page */

body.positionfixed div.describeMess {
	position: fixed;
	right: 3.5em;
	padding: 4px;
	border: 4px solid #f00;
	background-color: #fbb;
	margin-right: 10px;
}

body.positionfixed ul {
	float: none;
	position: fixed;
	right: 3.5em;
	padding: 4px;
}

body.positionfixed div.bodyarea {
	margin-right: 17em;
}

/* background-attachment:fixed; page */

body.backgroundattachmentfixed div.menu ul li a {
	background: #dde2f8 url(ForthRailBridge.jpg) no-repeat fixed 2em 0px;
}

body.positionfixed div.bodyarea {
	margin-right: 17em;
}

div.makeScroll {
	height: 500px;
	color: #777;
}

/* :first-child page */

body.firstchild div.demo td {
	color: blue;
}

body.firstchild div.demo tr:first-child td {
	background-color: #ada;
}

body.firstchild div.demo td:first-child {
	color: #f90;
}

/* :hover page */

body.hover div.menu {
	height: 1em;
	position: relative;
	left: 0px;
	top: 0px;
	border-right: 5px solid #79a;
	border-bottom: 4px solid #79a;
	background-color: #d7e2f8;
}

body.hover div.menu ul {
	float: none;
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
}

body.hover div.menu:hover ul {
	display: block;
}

/* Selectors page */

body.Selectors div.demo li { color: blue; }

body.Selectors div.demo td[colspan="2"] > ol > li + li > ol > li { color: #0c0; }

/* Box Model page */

body.BoxModel div.demo {
	clear: both;
}
body.BoxModel div.demo p {
	width: 15em;
	padding-left: 14em;
	overflow: hidden;
	white-space: pre;
	height: 8em;
	background-color: #fff;
}

/* Float Model page */

body.FloatModel div.bodyarea {
	height: 100%; /* trigger the incorrect behaviour - used only as an example */
}

body.FloatModel div.bodyarea p.dotricks {
	padding-left: 10em;
}

/* *:auto; page */

/* overflow:visible; page */

body.overflowvisible div.demo {
	clear: left;
}

body.overflowvisible div.demo div.fakePage {
	width: 25em;
	position: relative;
	left: 0px;
	top: 0px;
	height: 19.9em;
	border: 1px solid black;
	background-color: #47b;
}

body.overflowvisible div.demo div.thehead {
	width: 15em;
	position: absolute;
	left: 2px;
	top: 2px;
	border: 1px solid black;
	background-color: #abc;
	font-weight: bold;
}

body.overflowvisible div.demo div.thepage {
	width: 15em;
	height: 17.9em;
	position: absolute;
	left: 2px;
	top: 1.7em;
	border: 1px solid black;
	background-color: #fdf8ff;
}

body.overflowvisible div.demo div.thepage p:first-child { margin-top: 0px; }
body.overflowvisible div.demo div.thepage p + p + p { margin-bottom: 0px; }

body.overflowvisible div.demo div.thelinks {
	width: 9.4em;
	position: absolute;
	left: 15.4em;
	top: 2px;
	border: 1px solid black;
	background-color: #def;
	padding-bottom: 2px;
}

/* Shrink Wrap page */

body.ShrinkWrap div.demo {
	clear: left;
	font-size: 15px;
}

body.ShrinkWrap div.demo div.fakePage {
	width: 25em;
	position: relative;
	left: 0px;
	top: 0px;
	height: 15.5em;
	border: 1px solid black;
	background-color: #47b;
}

body.ShrinkWrap div.demo div.thehead {
	width: 15em;
	position: absolute;
	left: 9.75em;
	top: 2px;
	border: 1px solid black;
	background-color: #abc;
	font-weight: bold;
}

body.ShrinkWrap div.demo div.thepage {
	height: 13.55em;
	right: 2px;
	position: absolute;
	left: 9.75em;
	top: 1.7em;
	border: 1px solid black;
	background-color: #fdf8ff;
}

body.ShrinkWrap div.demo div.thepage p:first-child { margin-top: 0px; }
body.ShrinkWrap div.demo div.thepage p + p + p + p { margin-bottom: 0px; }

body.ShrinkWrap div.demo div.thelinks {
	width: 9.4em;
	height: 15em;
	position: absolute;
	left: 2px;
	top: 2px;
	border: 1px solid black;
	background-color: #def;
	padding-bottom: 2px;
}

/* :before and :after page */

body.beforeandafter {
	background-position: 100% -60px;
}

body.beforeandafter div.bodyarea {
	margin-left: 19em;
}

body.beforeandafter div.bodyarea div.inHere p {
	background: #cbdaeb url(boxBG/right.gif) repeat-y scroll 100% 0%;
	position: relative;
	top: 0px;
	left: 0px;
	padding: 23px 15px 31px 5px;
	max-width: 1000px;
}

body.beforeandafter div.bodyarea div.inHere p:before {
	content: url(boxBG/topleft.gif);
	position: absolute;
	top: 0px;
	left: 0px;
	height: 21px;
	width: 100%;
	overflow: hidden;
	background: url(boxBG/topright.gif) no-repeat scroll 100% 0%;
}

body.beforeandafter div.bodyarea div.inHere p:after {
	content: url(boxBG/bottomleft.gif);
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 30px;
	width: 100%;
	overflow: hidden;
	background: url(boxBG/bottomright.gif) no-repeat scroll 100% 0%;
}

/* Table Styles page */

body.TableStyles {
	display: inline-table;
	border-spacing: 4px;
}

div.maketable p {
	display: table-cell;
	width: 20%;
	background-color: #cdf;
	padding: 4px;
}

/* !important page */

body.important .demo p.uglystyle {
	font-size: 1em !important;
	color: #000 !important;
	font-style: normal !important;
	font-size: 0.7em;
	color: #ff0;
	font-style: italic;
}

body.important div.demo p:first-child { margin-top: 2px; }
body.important div.demo p + p + p + p { margin-bottom: 2px; }

/* Empty Elements page */

body.EmptyElements .demo p.andwidth { width: 100%; }
body.EmptyElements .demo .bered { background-color: red; }
body.EmptyElements .demo .begrey { background-color: #bbb; }
body.EmptyElements .demo a { display: block; }

/* Add Syntax page */

body.AddSyntax select#fillme { width: 10em; }

         /* these two lines prevent an IE bug - a form in a block level element
            beside a float causes the content of the block to disappear */
body.AddSyntax div.demo { display: inline; padding: 10px; }
body.AddSyntax div.demo form, body.AddSyntax div.demo form p { display: inline; }

/* navigator.plugins page */

body.navigatorplugins div.demo p { margin-top: 2px; }
body.EmptySpace div.demo ol { margin-bottom: 2px; }

/* Empty Space page */

body.EmptySpace div.demo p:first-child { margin-top: 2px; }
body.EmptySpace div.demo p + p + p + p { margin-bottom: 2px; }

/* Event Model page */

body.EventModel p#demoHere { font-weight: bold; cursor: pointer; }

body.EventModel div.demo p:first-child { margin-top: 2px; }
body.EventModel div.demo p + p + p { margin-bottom: 2px; }

/* Opera 8 note - commented out because the CSS validator still does not understand CSS 3

@media all and (min-width:0px) {
 #operanote { content: " Opera 8 users, you may occasionally need to reload the page to get this to look right."; }
}
@media all and (min-width:0em) {  #operanote { content: ""; } }

*/