div.slide {border: medium black solid;
    margin: 0.5em 0;
    width: 40em;
    padding-bottom: 0;
    page-break-inside: avoid;
}

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

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

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

body {margin-left: 5%; font-family: sans-serif;
      color: black; background-color: white}

h1, h2 {font-family: sans-serif; 
        background-color: yellow; padding-left: 1em }

p {font-family: sans-serif; padding-left: 1em; margin-bottom: 1em; margin-top: 0 }
dl {padding-left: 1em}
pre { padding-left: 1em }
div table {padding-left: 1em; font-size: 100%}
h3 {margin-left: 1em}
/* 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}
.absent {display: none}
.warning {font-weight: bold; color: red}
.correction {color: red}
.addition {color: green}
.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 }

/* 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}
.dotted {border: thin black dotted}
.dashed {border: thin black dashed}
.solid  {border: thin black solid}
.double {border: thin black double}
.groove {border: thin black groove}
.ridge  {border: thin black ridge}
.inset  {border: thin black inset}
.outset {border: thin black outset}
.solid-pad  {border: thin 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: 50% 0%;
                        background-repeat: repeat-y;
                        background-attachment: fixed;
}

.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 }


@media print {

        .cover { text-align: center}
        .intropage {page-break-before: always; height: 80%;}
        .endpage {height: 80%;}
	
  /*      .intropage:after {counter-increment: p; display: block;
                text-align: center; font-weight: bold;
                position: fixed; bottom: 1cm;
                content: "page " counter(p, lower-roman)} */
  /*	h2 {margin-top: 0}*/
        p.author { font-style: italic}
        p.subtitle { font-weight: bold; }
        h1 {margin-top: 10cm }
        div.slide, div.filler {height: 30%}
        div.introfooterA {
                display: block;
                margin-left: -1cm;
                margin-top: 1em;
		counter-increment: ipage;

                contento: "CHI 2003                                                                       " counter(ipage, lower-roman) "                                                                     Steven Pemberton";

        }

	div.footerA {
		page-break-after: always;
                display: block;
                margin-left: -1cm;
                margin-top: 1em;
		counter-increment: page;
                content: "CHI 2003                                                                       " counter(page) "                                                                     Steven Pemberton"
        }
	div.bugfooterA { /* Bug in Opera 7 Beta 2? */
		page-break-after: always;
                display: block;
                margin-left: -1cm;
		counter-increment: page;
                contento: "CHI 2003                                                                       " counter(page) "                                                                     Steven Pemberton"

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


        }
} /* media print */

@media screen {
        a:visited {color: #b7f} .footer, .introfooter {display:none}
}
@media projection { .footer, .introfooter {display:none} }