/*
 * Examples borrowed from MSDN's "Visual Filters and Transitions Reference"
 * at http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx
 */

/* You can assign multiple filters at once. */
p { width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3); }


/* ************************** Procedural Surfaces ************************** */

/* =========================== AlphaImageLoader ============================ */
p { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='/workshop/graphics/earglobe.gif', sizingMethod='scale'); }

/* ================================ Gradient =============================== */
p { filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',
                              startColorstr=#550000FF, endColorstr=#55FFFF00) }


/* ***************************** Static Filters **************************** */

/* ================================= Alpha ================================= */
INPUT.aFilter {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);}

/* =============================== BasicImage ============================== */
a { filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1) }
b { filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1) }
i { filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1) }
p { filter: progid:DXImageTransform.Microsoft.BasicImage(xray=1) }
q { filter: progid:DXImageTransform.Microsoft.BasicImage(mask=1, maskColor=255)}

/* ================================== Blur ================================= */
p{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='false')}

/* ================================= Chroma ================================ */
p { filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow'),
           progid:DXImageTransform.Microsoft.Chroma(color='red') }

/* =============================== Compositor ============================== */
/* N/A */

/* =============================== DropShadow ============================== */
p { cursor:hand;height:160px; padding:10px; font:bold 13pt verdana;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
                                               Color='gray', Positive='true') }

/* ================================= Emboss ================================ */
p { filter: progid:DXImageTransform.Microsoft.emboss(enabled='false') }

/* ================================ Engrave ================================ */
 p { position:absolute; left:270px;
     filter:progid:DXImageTransform.Microsoft.engrave(enabled='false'); }

/* ================================== Glow ================================= */
DIV.aFilter {
  filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5);
  width: 150px;}

/* =============================== ICMFilter =============================== */
/* NONE */

/* ================================= Light ================================= */
.aFilter { filter:progid:DXImageTransform.Microsoft.Light(); }

/* =============================== MaskFilter ============================== */
DIV.aFilter {filter:
  progid:DXImageTransform.Microsoft.MaskFilter(color=magenta);
  width: 100px;}

/* ================================= Matrix ================================ */
p { filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')}

/* =============================== MotionBlur ============================== */
DIV.aFilter {
  filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=45);
}

/* ================================= Shadow ================================ */
DIV.aFilter {filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
  width: 150px; color: #FF0000;}

/* ================================== Wave ================================= */
DIV.aFilter {FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.WAVE(
  strength=2,
  freq=3,
  lightstrength=20,
  add=0,
  phase=90);
  width: 150px; color: #FF0000;background-color:00ffff}

/* ================================== Barn ================================= */
p { height:250px; width:250px; background-color: gold;
    filter:progid:DXImageTransform.Microsoft.Barn(
        duration=2, motion='out', orientation='vertical');
  }


/* ****************************** Transitions ****************************** */

/* ================================= Blinds ================================ */
body {  filter:progid:DXImageTransform.Microsoft.Blinds(direction='down') }

/* ============================== CheckerBoard ============================= */
p { filter:progid:DXImageTransform.Microsoft.CheckerBoard(
        duration=5, direction='left') }

/* ================================== Fade ================================= */
p { height:250px; width:250px; background-color: gold;
    filter:progid:DXImageTransform.Microsoft.Fade( duration=2) }

/* ============================== GradientWipe ============================= */
p { filter:progid:DXImageTransform.Microsoft.gradientWipe(
        duration=3, gradientsize=0.5) }

/* ================================= Inset ================================= */
p { filter:progid:DXImageTransform.Microsoft.Inset( ) }

/* ================================== Iris ================================= */
p{filter:progid:DXImageTransform.Microsoft.Iris(duration=3)}

/* ================================ Pixelate =============================== */
p { width:100px; background-color: lightblue;
                filter:progid:DXImageTransform.Microsoft.Pixelate(
                duration=3, enabled='false'); }

/* =============================== RadialWipe ============================== */
a { filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=2); }

/* =============================== RandomBars ============================== */
img { filter:progid:DXImageTransform.Microsoft.RandomBars(duration=5);}

/* ============================= RandomDissolve ============================ */
u {
  height:250px; width:250px; background-color: gold;
  filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=3);
}

/* ================================= Slide ================================= */
table {
  height:250px; width:250px; background-color: gold;
  filter:progid:DXImageTransform.Microsoft.Slide(
      duration=3, bands='8');
}

/* ================================= Spiral ================================ */
div { filter:progid:DXImageTransform.Microsoft.Spiral(
                duration=3, GridSizeX=25, GridSizeY=25); }

/* ================================ Stretch ================================ */
b { height:250px; width:250px; background-color: gold;
    filter:progid:DXImageTransform.Microsoft.Stretch(duration=3) }

/* ================================= Strips ================================ */
i { filter:progid:DXImageTransform.Microsoft.Strips(
        duration=5, motion='rightdown'); }

/* ================================= Wheel ================================= */
hr { filter:progid:DXImageTransform.Microsoft.Wheel(
                duration=2, spokes=8); }

/* ================================= Zigzag ================================ */
object { filter:progid:DXImageTransform.Microsoft.Zigzag(
             duration=3, GridSizeX=25, GridSizeY=25); }
			/* Paragraphs are red on IE6 and IE7 and blue on other supported browsers. */
			p { color: blue; color: red; background-color: #fff }
			ADDRESS,
			BLOCKQUOTE, 
			BODY, DD, DIV, 
			DL, DT, 
			FIELDSET, FORM,
			FRAME, FRAMESET,
			H1, H2, H3, H4, 
			H5, H6, IFRAME, 
			NOFRAMES, 
			OBJECT, OL, P, 
			UL, APPLET, 
			CENTER, DIR, 
			HR, MENU, PRE   { display: block }
			LI              { display: list-item }
			HEAD            { display: none }
			TABLE           { display: table }
			TR              { display: table-row }
			THEAD           { display: table-header-group }
			TBODY           { display: table-row-group }
			TFOOT           { display: table-footer-group }
			COL             { display: table-column }
			COLGROUP        { display: table-column-group }
			TD, TH          { display: table-cell }
			CAPTION         { display: table-caption }
			TH              { font-weight: bolder; text-align: center }
			CAPTION         { text-align: center }
			BODY            { padding: 8px; line-height: 1.33 }
			H1              { font-size: 2em; margin: .67em 0 }
			H2              { font-size: 1.5em; margin: .83em 0 }
			H3              { font-size: 1.17em; margin: 1em 0 }
			H4, P,
			BLOCKQUOTE, UL,
			FIELDSET, FORM,
			OL, DL, DIR,
			MENU            { margin: 1.33em 0 }
			H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
			H6              { font-size: .67em; margin: 2.33em 0 }
			H1, H2, H3, H4,
			H5, H6, B,
			STRONG          { font-weight: bolder }
			BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
			I, CITE, EM,
			VAR, ADDRESS    { font-style: italic }
			PRE, TT, CODE,
			KBD, SAMP       { font-family: monospace }
			PRE             { white-space: pre }
			BIG             { font-size: 1.17em }
			SMALL, SUB, SUP { font-size: .83em }
			SUB             { vertical-align: sub }
			SUP             { vertical-align: super }
			S, STRIKE, DEL  { text-decoration: line-through }
			HR              { border: 1px inset }
			OL, UL, DIR,
			MENU, DD        { margin-left: 40px }
			OL              { list-style-type: decimal }
			OL UL, UL OL,
			UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
			U, INS          { text-decoration: underline }
			CENTER          { text-align: center }
			BR:before       { content: "\A" }
			COLOR_NOHASH	{ color:987E81 }

			/* An example of style for HTML 4.0's ABBR/ACRONYM elements */

			ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
			A[href]         { text-decoration: underline }
			:focus          { outline: thin dotted invert }


			/* Begin bidirectionality settings (do not change) */
			BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
			BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

			*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
			*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

			/* Elements that are block-level in HTML4 */
			ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, 
			FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
			NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, 
			DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, 
			COL, COLGROUP, TD, TH, CAPTION 
			                { unicode-bidi: embed }
			/* End bidi settings */


			@media print {
			  /* @page         { margin: 10% }  */ /* not allowed according to spec */
			  H1, H2, H3,
			  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
			  BLOCKQUOTE, 
			  PRE           { page-break-inside: avoid }
			  UL, OL, DL    { page-break-before: avoid }
			}

			@media speech {
			  H1, H2, H3, 
			  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
			  H1            { pitch: x-low; pitch-range: 90 }
			  H2            { pitch: x-low; pitch-range: 80 }
			  H3            { pitch: low; pitch-range: 70 }
			  H4            { pitch: medium; pitch-range: 60 }
			  H5            { pitch: medium; pitch-range: 50 }
			  H6            { pitch: medium; pitch-range: 40 }
			  LI, DT, DD    { pitch: medium; richness: 60 }
			  DT            { stress: 80 }
			  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
			  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
			  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
			  DFN           { pitch: high; pitch-range: 60; stress: 60 }
			  S, STRIKE     { richness: 0 }
			  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
			  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
			  U             { richness: 0 }
			  A:link        { voice-family: harry, male }
			  A:visited     { voice-family: betty, female }
			  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
			}
			@import url('nonsense.css') mumbling, blather;

			@font-face { 
			  font-family: Arial;
			}

			@page { background: url('sparkley.jpg'); }
			@page hiya:sparkley { background: url('sparkley.jpg') }

			FOO > BAR + BAZ {  }
			A[href] BOO[zwop |= 'hello']:blinky {
			  color: #fff;
			  background: +#000000 ! important
			}

			.myclass[attr ~= almost] #id:hover(languidly) {
			  font-weight: super(bold / italic)
			}

			/* The RHS of the attribute comparison operator in the following cases
			 * will parse to a StringLiteral since it is surrounded by quotes. */
			foo[attr = 'bar'] {}
			foo[attr = "bar"] {}
			foo[attr ~= 'bar baz'] {}
			foo[attr |= 'bar-baz'] {}

			/* The RHS of the attribute comparison operator in the following cases
			 * will parse to an IdentLiteral since it is unquoted. */
			foo[attr = bar] {}
			foo[attr |= bar-baz] {}

			foo.bar { }

			foo .bar { }

			foo .quoted { content: 'contains \'quotes\'' }

			foo .dquoted { content: "'contains'\\\"double quotes\"" }

			foo .long { content: 'spans \
			multiple \
			lines' }

			foo .extended-unicode { content: 'a1 \61\31  \0000611 \000061 1 \0061\0031' }

			/* CSS 2.1 allows _ in identifiers */
			#a_b {}
			.a_b {}
			#xxx {
			  filter:alpha(opacity=50);
			}

			p { margin: -3px -3px }

			p { margin: -3px 3px }

			@bogus hello {
			  balanced { curly : "brackets" }
			}
			
			@media aural {
			  b { volume: s-loud } 
			}
			
			/* not thrown out, but 2 digit color is discarded */
			@media print {
			  * { color: black !important; background-color: #ff }
			}
			
			a:visited, :unvisited, a::before { color: blue }

			/* expression cruft. Make sure parsing before and after ok. */
			a1 { a: ok;  color: red:;              a: ok }  /* cruft after : */
			a2 { a: ok;  width: 0 !import;         a: ok }  /* !important misspelled */
			a3 { a: ok;  unicode-range: U+0-FFFF;  a: ok }  /* ok */ 
			a4 { a: ok;  color: #g00;              a: ok }  /* bad hex digit */
			a5 { a: ok;  image: url('::');         a: ok }  /* malformed URI */
			a6 { a: ok;  image: url(::);           a: ok }  /* malformed URI */

