html { margin: 0; padding: 0 }

.csscheck {color: red; font-size: 150%; width: 50%; margin-left: 1em; border: thick red solid}
body>div>.csscheck {display: none}

body {
      font-family: sans-serif;
      color: black; background-color: white
}

body>div {
    border: medium black solid;
    margin: 0; padding: 0;
    width: 40em;
    page-break-inside: avoid;
}

/* until browsers can print headers and footers properly */

div.footer {display: none}
div.bugfooter {display: none}
div.introfooter {display: none}

.page {page-break-before: always}
.endpage {page-break-after: always}

h1, h2, h3 {font-family: sans-serif; 
            background-color: yellow; padding-left: 1em;
/*        margin-left: 2px; margin-right: 2px */
}

p { 
  font-family: sans-serif; padding-left: 1em;
  margin-bottom: 1em; margin-top: 0 
}

object {margin-left: 3em; width: 30em; height: 40%; border: thin black solid}

dl {padding-left: 1em}
pre { padding-left: 1em }
div table {padding-left: 1em; font-size: 100%}
h3 {margin-left: 1em}
div img {width: 100%;} /* crashes Amaya */
/* img {width: 5em} */
/* p.author { margin-left: 40pt; font-style: italic} */
/* p.subtitle { margin-left: 40pt; font-weight: bold} */
a {text-decoration: none}
a:hover {background-color: yellow; border: none;} 
.absent {display: none}
.warning {font-weight: bold; color: red}
.correction {color: red}
.addition {color: lime}
.blue {color: blue}
.bold {font-weight: bold}
.justify {text-align: justify}
.left {text-align: left}
.right {text-align: right}
.center {text-align: center}
.ovisible, .ohidden, .oscroll, .oauto {
     width: 8em; height: 8em; border: thin black solid; float: left
}
.ovisible {overflow: visible}
.ohidden {overflow: hidden}
.oscroll {overflow: scroll}
.oauto {overflow: auto}
.bordered {border: thin black solid}
.nopad {padding: 0}
.serif {font-family: serif}
.sans-serif {font-family: sans-serif}
.monospace {font-family: monospace}
.cursive {font-family: cursive}
.fantasy {font-family: fantasy}
.underline {text-decoration: underline }
.overline { text-decoration: overline }
.linethrough { text-decoration: line-through }
.underoverline { text-decoration: underline overline }

ul.nestexample li { border: thin black solid }
ul.nestexample  ul li { font-size: smaller;  }
ul.nestexample  ul ul li { font-size: smaller;  }

p.h1 { font-family: sans-serif; font-size: 150%; line-height: 0.4 }

/* Box model */
        .margin, .border, .padding, .content
		{ margin: 0 1em 1em 1em;
		  color: black; background-color: white;
		}
	.margin, .content { border: thin black dotted }
	.border, .padding { border: thin black solid }
	.margin { width: 11em }
	.border  { color: white; background-color: black }
	.padding, .content { background-color: yellow}
	.content { text-align: center; padding: 0}

/* Special box model */
        .boxmodel { font-size: 100%; /* apparent bug in Opera */ 
                    border-spacing: 0; margin-left: 1em; empty-cells: show}
        .boxmodel td {width: 1em;}

        .marginx { color: black; background-color: white; border-width: thin}
        .contentx{ background: yellow; border: thin dotted black; padding-left: 0.5em; padding-right: 0.5em}
	.t, .r, .b, .l { margin:0; padding: 0}
	.t {border-top-style:    dotted}
	.r {border-right-style:  dotted}
	.b {border-bottom-style: dotted}
	.l {border-left: dotted thin black;}
        .borderx { border-style: none; background: black; color: white}
        .paddingx { border-style: none; border-width: thin; background: yellow; }
	.widthx  { border-left:   thin dotted black; 
                   border-right:  thin dotted black; text-align: center}
	.heightx { border-top:    thin dotted black;
                   border-bottom: thin dotted black}
	.ht { border-top-style: dotted; border-bottom-style: dotted}
	.wd { border-left-style: dotted; border-right-style: dotted}
	.borderx.ht { border-top:    thin dotted white;
		      border-bottom: thin dotted white}
	.borderx.wd { border-left:   thin dotted white;
		      border-right:  thin dotted white}

/* Demo of use of borders */
.marked {border-left: solid medium red; border-right: solid medium red;
         padding-left: 1em; padding-right: 1em}
.ulined {border-bottom: solid medium black}
.diffed {border-left: solid medium black; margin-left: 1em}
.eg {color: red}
.unknown {color: red}
.ignore {text-decoration: underline}
hr {text-align: left}
table.halfwidth {width: 50%}
td {vertical-align: top}
h3.bigbottom {margin-bottom: 4em; padding: 0}
p.bigtop {margin-top: 3em; padding: 0}

.compare1, .compare2 {float: left; font-size: 50%; width: 40%;
                      margin-left: 3em; border: thin black solid}
.compare2 {}

.mini {font-size: 35%; width: 20%; margin-left: 3em}
table .mini {font-size: 50%; width: 50%}
.yellow {background-color: yellow}
blockquote.yellow {margin: 2em; background-color: yellow; padding: 2em}
.neutral {background-color: #fff; padding: 1ex}
.dotted {border: 0.5em black dotted}
.dashed {border: 0.5em black dashed}
.solid  {border: 0.5em black solid}
.double {border: 0.5em black double}
.groove {border: 0.5em black groove}
.ridge  {border: 0.5em black ridge}
.inset  {border: 0.5em black inset}
.outset {border: 0.5em black outset}
.rwb {border-color: red white blue; border-style: solid; border-width: 1em; margin-right: 20%}
.solid-pad  {border: thick black solid; padding: 0.5ex}
.div {margin: 0.5em 1em; border: thin black solid}
.setwidth {width: 9em; border-style: dotted}
.indent {margin-left: 5em}
.exdent {margin-left: 1em}
.textindent {text-indent: 3em}
.textexdent {text-indent: -3em}
.inside {list-style-position: inside}
.outside {list-style-position: outside}
.stretch {letter-spacing: 0.2em; word-spacing: 1em}
.compress {letter-spacing: -0.1em; word-spacing: -1px}
#background-image {background-image: url(poppy-vague.gif)}
#background-position {background-image: url(poppy.gif);
                      background-position: bottom right;
                      background-repeat: no-repeat}
#background-repeat {background-image: url(poppy.gif);
                    background-position: bottom right;
                    background-repeat: repeat-y}
#background-attachment {background-image: url(poppy.gif);
                    background-position: bottom right;
                    background-repeat: repeat-y;
                    background-attachment: scroll
}


#background-attachment-scroll {
  background-image: url(poppy.gif);
  background-position: 50% 0%;
  background-repeat: repeat-y;
  background-attachment: scroll;
  width: 50%; height: 8em; border: thin black solid;
  overflow: scroll;
}
#background-attachment-fixed {
  background-image: url(poppy.gif);
  background-position: 25% 0%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  width: 50%; height: 8em; border: thin black solid;
  overflow: scroll;
}


.no-repeat, .repeat-x, .repeat-y, .repeat {
    background-position: 50% 50%;
    background-image: url(star.gif);
    height: 5em; width: 5em;
    border: solid thin black
}
.no-repeat {background-repeat: no-repeat}
.repeat-x {background-repeat: repeat-x}
.repeat-y {background-repeat: repeat-y}
.repeat {background-repeat: repeat}

.first-letter:first-letter {font-size: 200%; color: red}
.first-letter:first-line {font-variant: small-caps; color: blue}
.float-left {float: left; width: 15%}
.float-right {float: right; width: 15%}
.menu {float: left; background-color: yellow; padding: 1em; margin: 0 0 0 1em}
.clear-left {clear: left}
.clear-right {clear: right}
.small-caps {font-variant: small-caps}
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalise {text-transform: capitalize}
.list-style-image {list-style-image: url(star.gif)}
.line-height {line-height: 100%}
.blink {text-decoration: blink}
.baseline {vertical-align: baseline}
.sub {vertical-align: sub}
.super {vertical-align: super}
.top {vertical-align: top}
.text-top {vertical-align: text-top}
.middle {vertical-align: middle}
.bottom {vertical-align: bottom}
.text-bottom {vertical-align: text-bottom}
.vertical-align {vertical-align: 100%}

div.col {
    text-align: justify;
    margin: 0;
    padding-left: 1%;
    padding-right: 1%;
    width: 31%;
    float: left;
    border-left: solid 1px black}

div.col.first {
    border-style: none}

.list-style-disc {list-style-type: disc}
.list-style-circle {list-style-type: circle}
.list-style-square {list-style-type: square}
.list-style-decimal {list-style-type: decimal}
.list-style-lower-roman {list-style-type: lower-roman}
.list-style-upper-roman {list-style-type: upper-roman}
.list-style-lower-alpha {list-style-type: lower-alpha}
.list-style-upper-alpha {list-style-type: upper-alpha}
.list-style-none {list-style-type: none}

.text-shadow {text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

h2.image span {display: none}
h2.image {background-image: url(imagesforheadlines.gif);
          background-repeat: no-repeat;
          background-position: 50% 50%;
          height: 53px; width: 497px; 
         }
h2.CSS2:before {content: "CSS2: "}
a.popup span {display: none}
a.popup:hover span {display: block; width: 10em; 
    background-color: yellow; border: dotted black thin;
    position: absolute; left: 40%;}