html, body {background: #FFF; margin: 8px; border: 0px; padding: 0px;} 
body, p, ul {color: #000; font: 500 10pt/12pt arial, helvetica, geneva, sans-serif;}
h1 {color: #000; font: bold 12pt/14pt arial, helvetica, geneva, sans-serif;}
h2, h3, h4 {color: #000;  font: bold 11pt/12pt arial, helvetica, geneva, sans-serif;}
.header h1 {font-size: 20pt; margin-top: 10px; font-weight: 600; color: #000080; font-family: arial, helvetica, sans-serif; }
.content h1 {color: #C30;}
.content h2 {color: #C30;}
hr {color: #008080; height: 1px;}
.titlebar {font-size: 14pt; font-weight: 500; color: #EEEEEE; font-family: arial, helvetica, sans-serif; }
A:focus  { outline: thick solid black }
A:active { outline: thick solid red }
.glossary {color: #C30; font: bold 10pt/12pt arial, helvetica, geneva, sans-serif;}
p b {font: bold 10pt/12pt arial, helvetica, geneva, sans-serif;}
.term {color: #000; font: bold 10pt/12pt arial, helvetica, geneva, sans-serif;}

/*
h1.top {font-size: 20pt; font-weight: 500; color: #000080; line-height: 24pt;}
h2.sub {font-size: 10pt; font-weight: 500; color: #000080;}
H1 {font-family: arial, helvetica, sans-serif; color: #000000; font-weight: 500; font-size: 14pt; line-height: 16pt;}
H2 {color: #000000; font-size: 12pt; line-height: 14pt; font-family: arial, helvetica, sans-serif; }
H3 {color: #000000; font-size: 11pt; line-height: 12pt; font-family: arial, helvetica, sans-serif;}
P {font-family: arial, helvetica, sans-serif; font-size: 10pt; line-height: 11pt;}
UL {font-family: arial, helvetica, sans-serif; font-size: 10pt; line-height: 11pt; }
.content {color: #000; font: 500 10pt/12pt arial, helvetica, geneva, sans-serif;}
h1 {background: red; padding: 1em 2em;}
*/

/*
PROPERTIES
===================================================================================
Shorthand Properties
margin: <margin-width>{1,4} | inherit
----------------------------------------
padding: <padding-width>{1,4} | inherit  
----------------------------------------
border-width: <border-width>{1,4} | inherit
----------------------------------------
border-top: [ <border-width> || <border-style> || <'border-top-color'> ] 
border-right: [ <border-width> || <border-style> || <'border-top-color'> ]
border-bottom: [ <border-width> || <border-style> || <'border-top-color'> ]
border-left: [ <border-width> || <border-style> || <'border-top-color'> ] 
----------------------------------------
border: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
----------------------------------------
list-style: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
----------------------------------------
background:   [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit  
----------------------------------------
font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit  
----------------------------------------
outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit  
----------------------------------------
pause: [ [<time> | <percentage>]{1,2} ] | inherit  
----------------------------------------
cue: [ <'cue-before'> || <'cue-after'> ] | inherit
===================================================================================
Box Model
margin-top, margin-bottom: <margin-width> | inherit
margin-right, margin-left: <margin-width> | inherit
	h1 { margin-top: 2em }
----------------------------------------
margin: <margin-width>{1,4} | inherit
	body { margin: 2em }         			// all margins set to 2em
	body { margin: 1em 2em }     		// top & bottom = 1em, right & left = 2em
	body { margin: 1em 2em 3em } 	// top=1em, right=2em, bottom=3em, left=2em
----------------------------------------
padding-top, padding-right, padding-bottom, padding-left:   <padding-width> | inherit
	blockquote { padding-top: 0.3em }
----------------------------------------
padding: <padding-width>{1,4} | inherit  
	h1 { background: white; padding: 1em 2em;}
----------------------------------------
border-top-width, border-right-width, border-bottom-width, border-left-width: <border-width> | inherit
----------------------------------------
border-width: <border-width>{1,4} | inherit
	h1 { border-width: thin }                   				// thin thin thin thin 
	h1 { border-width: thin thick }             			// thin thick thin thick 
	h1 { border-width: thin thick medium }     	// thin thick medium thick
----------------------------------------
border-top-color, border-right-color, border-bottom-color, border-left-color: <color> | transparent | inherit
----------------------------------------
border-color: [ <color> | transparent ]{1,4} | inherit
----------------------------------------
border-top-style, border-right-style, border-bottom-style, border-left-style: <border-style> | inherit
----------------------------------------
border-style: <border-style>{1,4} | inherit
	#xy34 { border-style: solid dotted }
----------------------------------------
border-top, border-right, border-bottom, border-left: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
	h1 { border-bottom: thick solid red }
----------------------------------------
border: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
	p { border: solid red }
	element {border-width: number+unit; border-style: (numerous); border-color: color || #hex || (rgb / % || 0-255);}
	element {border: 4px groove linen }

===================================================================================
Visual Formatting
display: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
	P { display: block }
	EM { display: inline }
	LI { display: list-item } 
	IMG { display: none }      // Don't display images
----------------------------------------
position: static | relative | absolute | fixed | inherit  
	@media screen { H1#first { position: fixed } }
	@media print { H1#first { position: static } }
----------------------------------------
top: <length> | <percentage> | auto | inherit  
----------------------------------------
right: <length> | <percentage> | auto | inherit  
----------------------------------------
bottom: <length> | <percentage> | auto | inherit  
----------------------------------------
left: <length> | <percentage> | auto | inherit
----------------------------------------
float: left | right | none | inherit  
----------------------------------------
clear: none | left | right | both | inherit
----------------------------------------
z-index: auto | <integer> | inherit  
----------------------------------------
direction: ltr | rtl | inherit  
----------------------------------------
unicode-bidi: normal | embed | bidi-override | inherit  
	ENGLISH {direction: ltr; unicode-bidi: embed}
===================================================================================
Visual Formatting Model Details
width: <length> | <percentage> | auto | inherit  
	P { width: 100px }
----------------------------------------
min-width: <length> | <percentage> | inherit  
----------------------------------------
max-width: <length> | <percentage> | none | inherit  
----------------------------------------
height: <length> | <percentage> | auto | inherit  
	P { height: 100px }
----------------------------------------
min-height: <length> | <percentage> | inherit  
----------------------------------------
max-height: <length> | <percentage> | none | inherit  
----------------------------------------
line-height: normal | <number> | <length> | <percentage> | inherit  
	DIV { line-height: 1.2; font-size: 10pt }     		// number
	DIV { line-height: 1.2em; font-size: 10pt }   	// length 
	DIV { line-height: 120%; font-size: 10pt }    	// percentage
----------------------------------------
vertical-align:   baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit  
===================================================================================
Visual Effects
overflow: visible | hidden | scroll | auto | inherit  
----------------------------------------
clip: <shape> | auto | inherit  
	P { clip: rect(5px, 10px, 10px, 5px); }
	P { clip: rect(5px, -5px, 10px, 5px); }
----------------------------------------
visibility: visible | hidden | collapse | inherit  
	#container2 { position: absolute; top: 2in; left: 2in; width: 2in; visibility: hidden; }
===================================================================================
Generated Content, Automatic Numbering, And Lists
content:   [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit  
	@media aural { BLOCKQUOTE:after { content: url("beautiful-music.wav") } }
	IMG:before { content: attr(alt) }
	H1:before { display: block; text-align: center; content: "chapter\A hoofdstuk\A chapitre" }
----------------------------------------
quotes: [<string> <string>]+ | none | inherit  
	// Specify pairs of quotes for two levels in two languages 
	Q:lang(en) { quotes: '"' '"' "'" "'" }
	Q:lang(no) { quotes: "«" "»" "<" ">" }
	// Insert quotes before and after Q element content 
	Q:before { content: open-quote }
	Q:after  { content: close-quote }
----------------------------------------
counter-reset: [ <identifier> <integer>? ]+ | none | inherit  
	H1:before { content: "Chapter " counter(chapter) ". "; 
	counter-increment: chapter;  		// Add 1 to chapter 
	counter-reset: section;      			// Set section to 0 }
	H2:before { content: counter(chapter) "." counter(section) " ";
    counter-increment: section;}
	H1 { counter-reset: section -1 }
	H1 { counter-reset: imagenum 99 }
	H1 { counter-reset: section -1 imagenum 99 }
----------------------------------------
counter-increment: [ <identifier> <integer>? ]+ | none | inherit
	LI:before { content: counters(item, "."); counter-increment: item }
----------------------------------------
marker-offset: <length> | auto | inherit  
	LI:before { display: marker; marker-offset: 3em; content: counter(mycounter, lower-roman) "."; counter-increment: mycounter; }   
----------------------------------------
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit  
	OL { list-style-type: lower-roman }
----------------------------------------
list-style-image: <uri> | none | inherit  
	UL { list-style-image: url("http://png.com/ellipse.png") }
----------------------------------------
list-style-position:   inside | outside | inherit  
----------------------------------------
list-style:   [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
	UL { list-style: outside }
	UL.compact { list-style: inside }
	OL.alpha > LI  { list-style: lower-alpha }
	UL LI   { list-style: disc }
	UL { list-style: upper-roman inside }  		// Any UL
	UL > UL { list-style: circle outside } 			// Any UL child of a UL 
===================================================================================
Paged Media
size: <length>{1,2} | auto | portrait | landscape | inherit  
	@page { size: 8.5in 11in; } 							// width height  
----------------------------------------
marks: [ crop || cross ] | none | inherit  
----------------------------------------
page-break-before: auto | always | avoid | left | right | inherit  
----------------------------------------
page-break-after: auto | always | avoid | left | right | inherit  
----------------------------------------
page-break-inside: avoid | auto | inherit  
----------------------------------------
page: <identifier> | auto  
	TABLE {page: rotated; page-break-before: right}
===================================================================================
Colors & Backgrounds
color: <color> | inherit
	em { color: red }							// predefined color name
	em { color: rgb(255,0,0) }			// RGB range 0-255
----------------------------------------
background-color: <color> | transparent | inherit
	h1 { background-color: #F00 }
	h1 { background-color: color || #hex || (rgb / % || 0-255); }
----------------------------------------
background-image:   <uri> | none | inherit  
	body { background-image: url("marble.png") }
	p { background-image: none }
	body { background-image:url(URI); }
----------------------------------------
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
	body { background: white url("pendant.png"); background-repeat: repeat-y; background-position: center;}
	body {background-repeat: repeat || repeat-x || repeat-y || no-repeat; }
----------------------------------------
background-attachment: scroll | fixed | inherit  
	body { background: red url("pendant.png"); background-repeat: repeat-y; background-attachment: fixed;}
	body { background-attachment: scroll || fixed; }
----------------------------------------
background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit  
	body { background-position: X Y || (top||bottom||center) (left||right||center); }
----------------------------------------
background:   [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit  
	body { background: red }
	body { background: url("banner.jpeg") right top }    			// 100%   0% 
	body { background: url("banner.jpeg") top center }   		//  50%   0% 
	body { background: url("banner.jpeg") center }       			//  50%  50% 
	body { background: url("banner.jpeg") bottom }      	 		//  50% 100% 
	p { background: url("chess.png") gray 50% repeat fixed }
	p { background: #fff url(image.png) no-repeat 20px 100px fixed;}
===================================================================================
Fonts
font-family: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
	body { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
	body { font-family: "new century schoolbook", serif }
	element { font-family:name,"more names"; }
----------------------------------------
font-style: normal | italic | oblique | inherit
	H1, H2, H3 { font-style: italic }
	H1 EM { font-style: normal }
	element { font-style: normal || italic || oblique; }
----------------------------------------
font-variant: normal | small-caps | inherit
	H3 { font-variant: small-caps }
	EM { font-style: oblique }
	element { font-variant:normal || small-caps; }
----------------------------------------
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit  
	P { font-weight: normal }   				// 400 
	H1 { font-weight: 700 }     				// bold 
	BODY { font-weight: 400 }
	STRONG { font-weight: bolder } 	// 500 if available 
	element { font-weight: normal || bold || bolder || || lighter || (100-900); }
----------------------------------------
font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit  
----------------------------------------
font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
<absolute-size> [ xx-small | x-small | small | medium | large | x-large | xx-large ] 
<relative-size> [ larger | smaller ] 
	P { font-size: 12pt; }
	BLOCKQUOTE { font-size: larger }
	EM { font-size: 150% }
	EM { font-size: 1.5em }
	element { font-size: (number+unit) || (xx-small - xx-large); }
----------------------------------------
font-size-adjust: <number> | none | inherit
	h2 { font-size-adjust: 0.58 }
----------------------------------------
font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit  
	P { font: 12pt/14pt sans-serif }
	P { font: 80% sans-serif }
	P { font: x-large/110% "new century schoolbook", serif }
	P { font: bold italic large Palatino, serif }
	P { font: normal small-caps 120%/120% fantasy }
	P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }
	P { font: font-style, font-variant, font-weight, font-size, line-height, font-family }
===================================================================================
Text
text-indent: <length> | <percentage> | inherit
	P { text-indent: 3em }
----------------------------------------
text-align: left | right | center | justify | <string> | inherit  
	DIV.center { text-align: center }
----------------------------------------
text-decoration:   none | [ underline || overline || line-through || blink ] | inherit
	A[href] { text-decoration: underline }
----------------------------------------
text-shadow:   none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit  
	H1 { text-shadow: 0.2em 0.2em }
	H2 { text-shadow: 3px 3px 5px red }
	H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
----------------------------------------
letter-spacing: normal | <length> | inherit
	BLOCKQUOTE { letter-spacing: 0.1em }
	BLOCKQUOTE { letter-spacing: 0cm }   			// Same as '0' 
----------------------------------------
word-spacing: normal | <length> | inherit  
	H1 { word-spacing: 1em }
----------------------------------------
text-transform: capitalize | uppercase | lowercase | none | inherit  
	H1 { text-transform: uppercase }
----------------------------------------
white-space: normal | pre | nowrap | inherit
	PRE { white-space: pre }
	P { white-space: normal }
	TD [nowrap] { white-space: nowrap }
===================================================================================
Tables
caption-side: top | bottom | left | right | inherit  
	CAPTION { caption-side: bottom; width: auto; text-align: left }
----------------------------------------
table-layout: auto | fixed | inherit  
----------------------------------------
border-collapse: collapse | separate | inherit  
----------------------------------------
border-spacing: <length> <length>? | inherit  
----------------------------------------
empty-cells: show | hide | inherit  
	TABLE { empty-cells: show }
----------------------------------------
speak-header: once | always | inherit  
===================================================================================
User Interface
cursor: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit  
	P { cursor : url("mything.cur"), url("second.csr"), text; }
----------------------------------------
outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit  
	:focus  { outline: thick solid black }
	:active { outline: thick solid red }
----------------------------------------
outline-width: <border-width> | inherit  
	BUTTON { outline-width : thick }
----------------------------------------
outline-style: <border-style> | inherit  
----------------------------------------
outline-color: <color> | invert | inherit
===================================================================================
Aural Style Sheets
volume: <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit
----------------------------------------
speak: normal | none | spell-out | inherit
----------------------------------------
pause-before: <time> | <percentage> | inherit  
----------------------------------------
pause-after:   <time> | <percentage> | inherit  
----------------------------------------
pause: [ [<time> | <percentage>]{1,2} ] | inherit  
	H1 { pause: 20ms } 					// pause-before: 20ms; pause-after: 20ms
	H2 { pause: 30ms 40ms } 		// pause-before: 30ms; pause-after: 40ms
	H3 { pause-after: 10ms } 			// pause-before: ?; pause-after: 10ms
----------------------------------------
cue-before: <uri> | none | inherit  
----------------------------------------
cue-after: <uri> | none | inherit  
----------------------------------------
cue: [ <'cue-before'> || <'cue-after'> ] | inherit
----------------------------------------
play-during: <uri> mix? repeat? | auto | none | inherit  
	BLOCKQUOTE.sad { play-during: url("violins.aiff") }
	BLOCKQUOTE Q   { play-during: url("harp.wav") mix }
	SPAN.quiet     { play-during: none }
----------------------------------------
azimuth: <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
	H1   { azimuth: 30deg }
	TD.a { azimuth: far-right }          					//  60deg
	#12  { azimuth: behind far-right }   			// 120deg
	P.comment { azimuth: behind }        			// 180deg
----------------------------------------
elevation: <angle> | below | level | above | higher | lower | inherit  
	H1   { elevation: above }
	TR.a { elevation: 60deg }
	TR.b { elevation: 30deg }
	TR.c { elevation: level }
----------------------------------------
speech-rate:   <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit  
----------------------------------------
voice-family:   [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit  
	H1 { voice-family: announcer, male }
	P.part.romeo  { voice-family: romeo, male }
	P.part.juliet { voice-family: juliet, female }
----------------------------------------
pitch: <frequency> | x-low | low | medium | high | x-high | inherit  
----------------------------------------
pitch-range: <number> | inherit
----------------------------------------
stress: <number> | inherit  
----------------------------------------
richness: <number> | inherit  
----------------------------------------
speak-punctuation: code | none | inherit  
----------------------------------------
speak-numeral: digits | continuous | inherit  
===================================================================================
*/