html {height:100%; font-size: 100%}
body {min-height:100.01%; background:#fff7dd; color:#006; font:76.1%/150% verdana, sans-serif}

body,h1,h2,h3,h4,h5,h6,p,div,form,code,pre,fieldset,legend,dl,dt,dd
  {margin:0; padding:0; border:0}
/* ul,ol,li are treated on an individual basis */

h1  {font:bold 150%/150% georgia,times,serif}
h2  {font:bold 130%/150% georgia,times,serif}
h3  {font:bold 120%/150% georgia,times,serif}
h4  {font:bold 110%/150% georgia,times,serif; text-align:center}
h5  {font:bold 100%/150% georgia,times,serif}
h6  {font:bold 100%/150% georgia,times,serif}
p   {font-size:100%}

dl    {list-style:none}
dt    {font-weight:bold}
dd    {}

hr        {text-align:center; height:2px; width:97%; color:#D0CED9}
/*
code, pre {font-size:120%; white-space:pre; font-family: monospace; padding:10px; margin:5px 0; background:#FFF0D0; border:1px solid #fff}
*/

acronym   {cursor:help; border-bottom:1px solid #090}

a         {color:#009; text-decoration:none; border-bottom:1px dotted #ccf; padding-bottom:1px}
a:link    {color:#009; border-bottom:1px solid #ccf}
a:visited {color:#606; border-bottom:1px dotted #fcf}
a:active  {color:#f00; border-bottom:1px dashed #f00}
a:focus   {color:#f00; border-bottom:1px dashed #f00}
a:hover   {color:#96f; border-bottom:1px solid #96f}

a img         {padding:1px}
a:link img    {border:2px solid #ccf}
a:visited img {border:2px solid #fcf}
a:active img  {border:2px solid #f00}
a:focus img   {border:2px solid #f00}
a:hover img   {border:2px solid #96f}

span.exampleunvisited {color:#009; border-bottom:1px solid #ccf}
span.examplevisited   {color:#606; border-bottom:1px dotted #fcf}
span.examplefocus     {color:#f00; border-bottom:1px dashed #f00}
span.examplehover     {color:#96f; border-bottom:1px solid #96f}


/* strikethrough for depriciated guidelines */
del {text-decoration: line-through}

/* S in webSemantics company name */
span.s  {font:bold 125% georgia,serif; padding:0}

#accessibility    {margin:0; padding:0; text-align:right; font-size:80%; list-style-type:none}
#accessibility li {margin:0; margin-right:10px; padding:0; display:inline}
#accessibility a  {color:#fff7dd; border:0}
#accessibility a:active,
#accessibility a:focus,
#accessibility a:hover  {color:#f00; border-bottom:1px dashed #f00}

#header       {width:100%; min-width:760px; height:82px; background:url(/graphics/bg_header.gif) no-repeat center top; }
#header h1    {display:inline; width:1760px; margin-left:-1000px}


/* centreIE area encompasses the entire width of the browser to get IE to centre the content */
#centreIE       {text-align:center; min-width:760px; background:none}


/* pageholder area contains #contentandnav and #externallinks */
#pageholder     {text-align:left; width:760px; min-width:760px; margin:0 auto; background:url(/graphics/bg_pageholder.gif) no-repeat bottom right}


/* contentandnav area contains #centre and the left-hand #navigation */
#contentandnav  {width:595px; float:left}


/* centre area includes search (#test), #breadcrumbs and #content */
#centre   {background:url(/graphics/bg_content.gif); width:423px; float:right; text-align:left /* ie4 fix */;}


/* Google search form */
#test {background:url(/graphics/bg_search.gif) no-repeat; height:35px; vertical-align:bottom}
#test fieldset    {border:0px solid}
#test label       {font-size:1px}
#test input#q     {font-size:100%; font-weight:bold; color:#fff; border:2px inset  #bbd; border-top-color:#324; border-left-color:#324; background:#665279; padding-left:3px; width:160px}
#test input#btnG  {font-size:100%; font-weight:bold; color:#324; border:2px outset #ccc; background:#bbd; margin-left:1em}
/* /Google search form */


#breadcrumbs {list-style:none; margin:0; padding:0; width:auto; background:url(/graphics/bg_breadcrumb.gif) #dde no-repeat top right; font-size:85%; margin-bottom:2em; padding:0 0 0.2em 15px; color:#333}
#breadcrumbs li {display:inline; }

/* content area */
#content  {margin:0 10px; width:403px; min-height:200px; _height:180px; float:right; text-align:left /* ie4 fix */;}

#content h1 {background:url(/graphics/heading.gif) no-repeat center left; margin:0 0 0.5em 0; padding:0 0 0 30px; line-height:140%}
#content h2 {background:url(/graphics/heading.gif) no-repeat center left; margin:3em 0 0.5em 0; padding:0 0 0 30px}
#content h3 {background:url(/graphics/heading.gif) no-repeat center left; margin:1.8em 0 0.5em 0; padding:0 0 0 30px}
#content h4 {margin:2em 0 0.5em 0}
#content h5 {background:url(/graphics/heading.gif) no-repeat center left; margin:0.8em 0 0.5em 0; padding:0 0 0 30px}
#content h6 {background:url(/graphics/heading.gif) no-repeat center left; margin:0.8em 0 0.5em 0; padding:0 0 0 30px}

#content h3#contactaddress {font-size:125%}

#content hr {margin:0}
#content p  {margin:0.5em 0 1em 0}


#content ul {margin-top:0}
#content ol {margin-top:0}
#content li {padding-bottom:0.5em}

#content dl               {margin:2em 0 0 20px}
#content dl dt            {clear:both; margin-top:0em; font-weight:bold}
dd            {margin-bottom:1em}

#content #associated-documents dt {font-size:larger; margin:1.5em 0 0.5em 0}
#content #associated-documents dd {margin:0.5em 0 0.5em 2em}

#content dl.inset               {margin:2em 0 0 20px}
#content dl.inset dt            {clear:both; margin-top:0em; font-weight:bold}
#content dl.inset dt img        {padding:5px; background:#fff; float:left; margin:3px 15px 5px 0}
#content dl.inset dt img.right  {float:right; margin:3px 0 5px 10px}
#content dl.inset dd            {margin-bottom:1em}
#content dl.inset dd.clear      {width:100%; clear:both; margin:0; padding:0}

#content ol ol {margin-top:0}
#content ol ol li {padding:0}
#content ol ul {margin:0 0 2em 0; padding-left:1em}

#content strong.required {color:red; cursor:help}


#content br         {clear:both}
#content address    {background:url(/graphics/stamp.gif) no-repeat top right; border:1px solid #86a; padding:0.5em 0 0.5em 30px; margin:0 3em 2em 3em}
#content blockquote {padding:0; margin:0 5px; background:url(/graphics/quote_open_dyslexia.gif) no-repeat}
#content blockquote p {padding:0 30px 0 40px; background:url(/graphics/quote_close_dyslexia.gif) no-repeat bottom right}

#content p.hilite {color:#00c}
#content p.rate   {margin-top:-0.5em; text-align:right}

table {border:1px solid #657; border-collapse:collapse; margin:0.5em auto 2em auto}
th,td {border:1px solid #ccc; background:#F7F0E0; padding:2px 5px}
td    {background:#FFF7dd; vertical-align:top}
table tr.hilite td  {background:#FFFFE8}
caption {margin:1em auto 0.5em auto; padding:0; border:0; font-weight:bold}

#content table#associations     {margin:1em auto 2em auto}
#content table#associations td  {border:0; vertical-align:middle;padding:7px 5px 3px 10px}

#content #contactform                 {margin:0 0 2em 0; text-align:right; background:url(/graphics/contactform.gif) no-repeat}
#content #contactform fieldset        {border:1px solid #657; padding:0.5em 1em; color:#657}
#content #contactform legend          {font-weight:bold; margin-bottom:1em; padding:0 0.5em}
#content #contactform label           {font-weight:bold}
#content #contactform p               {margin-bottom:0.8em}
#content #contactform input           {border:2px inset #ccc; font-weight:normal; width:220px; margin-left:1em; background:#dde; font-size:100%; padding:2px 3px 2px 5px; vertical-align:middle}
#content #contactform textarea#query  {border:2px inset #ccc; font-weight:normal; font-family:Verdana, arial, sans-serif; width:220px; margin-left:1em; background:#dde; font-size:100%; padding:2px 3px 2px 5px; vertical-align:middle}
#content #contactform input.button    {border:2px outset #ccc; color:#324; background:#bbd; font-size:100%; font-weight:bold; vertical-align:bottom; height:2em; letter-spacing:1px; width:120px}

#content #pagenav     {margin-left:3em; margin-top:0}
#content #pagenav li  {padding:0 0 0.2em 0}

#content #emailaddress {width:100%; text-align:center; font-weight:bold}

#content p.topofpage    {clear:both; padding:1em 0; background:url(/graphics/topofpage.gif) no-repeat center right; text-align:right; width:100%; font-size:90%;}
#content p.topofpage a  {margin:0 25px 0 0}

#content #blankpage {height:100px}

/* [sitemap] content area split into two columns and a seperator */
#content #contentleft     {float:left;  width:190px}
#content #contentmiddle   {float:left;  width:190px; border-right:1px solid #edf}
#content #contentright    {float:right; width:190px; margin-left:11px}
#content #contentleft ul,
#content #contentright ul {margin:0 0 0 30px; padding-left:0}
#content #contentleft li,
#content #contentright li {padding:0 0 0.1em 0}
#content #contentleft ul ol,
#content #contentright ul ol {margin:0.5em 0 1em 1.5em; padding-left:0}
#content #contentleft h2,
#content #contentright h2 {font-size:120%}
/* /[sitemap] content area split into two columns and a seperator */

#content div.codeexamples {text-align:left; background:#FFF0D0; padding:1em; border:1px dotted #003; margin:2em 15px}
#content div.example      {scrollbar-base-color:#eef; width:350px; height:auto; overflow:auto; clip:auto; white-space:nowrap; text-align:left; background:#FFF0D0; padding:0 5px; border:1px dotted #003; margin:1em 15px 2em 15px}
/*
#content pre {width:96%; min-height:3em; height:auto; font:110%/130% monospace; clear:both; margin:1em auto 2em auto; padding:0.5em; background:#fff0d0; border:1px dotted #ccf; clip:auto; overflow:auto; scrollbar-base-color:#eef}
*/
#content pre {margin:0.5em}
#content div.example3 {white-space:pre; padding:0.5em; font-weight:normal; font:120%/130% monospace; _font-size:100%; width:96%; height:auto; clear:both; margin:1em auto 2em auto; background:#fff0d0; border:1px dotted #ccf;; overflow:auto; _overflow:scroll; clip:auto; scrollbar-base-color:#eef}



#navigation               {border-bottom:1px solid #aab; border-right:1px solid #aab; border-top:2px solid #ffe; border-left:2px solid #ffe; margin:20px 0 10px 0; width:150px; float:left; background:#F7F0d7}
#navigation .navtop       {display:none; font-size:1px; width:150px; height:10px; background:url(/graphics/bg_nav_top.gif) no-repeat top}
#navigation .navbase      {display:none; font-size:1px; width:150px; height:10px; background:url(/graphics/bg_nav_base.gif) no-repeat bottom}
#navigation ul            {margin:5px 0px 0px 0; padding:0; list-style-type:none; text-align:right}
#navigation li            {padding-right:5px; margin:0 5px 8px 5px; font-weight:bold; border-top:1px solid #F7F0d7; border-left:1px solid #F7F0d7; border-bottom:2px solid #F7F0d7; border-right:2px solid #F7F0d7}
#navigation li.current    {border-top:1px solid #aab; border-left:1px solid #aab; border-bottom:2px solid #ffe; border-right:2px solid #ffe; background:#fff7dd}
#navigation ul ul         {margin:10px 0 5px 0; padding:0; list-style-type:none; text-align:right}
#navigation ul ul li      {padding-right:1em; font-size:95%}
#navigation ul ul li a    {font-weight:normal}
#navigation p             {font-size:100%}
#navigation h2            {font-size:100%}

#pageanchors      {font-size:79%; margin:20px 0 10px 0; width:150px; background:#F7F0d7; float:left; border-bottom:1px solid #aab; border-right:1px solid #aab; border-top:2px solid #ffe; border-left:2px solid #ffe; }
#pageanchors h3   {text-align:right; margin-bottom:3px; padding:3px 1em 0 3px}
#pageanchors ul   {margin:0 0 0.5em; padding:0; list-style-type:none; text-align:right}
#pageanchors li   {margin:0.7em 0 0 0; padding:0 1em 0 0.5em; line-height:135%}
#pageanchors li a {font-weight:normal}

#report                   {color:#009; font-size:80%; padding-bottom:10px; border-bottom:1px solid #aab; border-right:1px solid #aab; border-top:2px solid #ffe; border-left:2px solid #ffe; margin:10px 0; width:150px; float:left; background:#F7F0d7}
#report h3                {margin:5px 10px}
#report fieldset          {border:0 solid}
#report p                 {margin:2px 10px}
#report p.button          {margin:5px 10px 10px 10px; text-align:right}
#report input#companyname {color:#006; font-size:100%; background:#fff7dd; padding-left:3px; width:122px}
#report input#reportcode  {color:#006; font-size:100%; background:#fff7dd; padding-left:3px; width:122px}
#report input#button      {color:#006; font-size:100%; background:#fff0d0}

#contentspeaker           {text-align:center; line-height:120%; color:#009; font-size:80%; padding-bottom:0px; border-bottom:1px solid #aab; border-right:1px solid #aab; border-top:2px solid #ffe; border-left:2px solid #ffe; margin:10px 0; width:150px; float:left; background:#F7F0d7}


#externallinks  {width:145px; float:right; margin:0px 0 0 20px; text-align:left /* ie4 fix */;}

#externallinks div.adbox      {border-bottom:1px solid #aab; border-right:1px solid #aab; border-top:1px solid #ffe; border-left:1px solid #ffe; width:143px; margin:0 0 1.5em 0; background:#F7F0d7;}
#externallinks div.adboxtop   {visibility:hidden; font-size:1px; width:143px; height:5px; background:url(/graphics/bg_box_1_top.gif) no-repeat top}
#externallinks div.adboxbase  {visibility:hidden; font-size:1px; width:143px; height:5px; background:url(/graphics/bg_box_1_base.gif) no-repeat bottom}

#externallinks div.box      {border-bottom:1px solid #aab; border-right:1px solid #aab; border-top:1px solid #ffe; border-left:1px solid #ffe; width:143px; margin:0 0 1.5em 0; background:#F7F0d7; /* url(/graphics/bg_box_1_slice.gif) repeat-y */}
#externallinks div.boxtop   {visibility:hidden; font-size:1px; width:143px; height:5px; background:url(/graphics/bg_box_1_top.gif) no-repeat top}
#externallinks div.boxbase  {visibility:hidden; font-size:1px; width:143px; height:5px; background:url(/graphics/bg_box_1_base.gif) no-repeat bottom}
#externallinks h4           {padding:0 5px 0.2em 5px; line-height:105%; font-size:115%; text-align:center; border-bottom:1px dotted #aab}
#externallinks ul           {list-style:none; margin:0; padding:0 5px}
#externallinks li           {font-size:85%; text-align:center; padding:0.4em 0.2em; line-height:125%}
#externallinks dl           {font-size:85%; padding:0 5px}
#externallinks dt           {margin:5px 0 0 0; font-size:95%; text-align:center; padding:0.2em; line-height:120%}
#externallinks dd           {padding:0.2em; line-height:120%}
#externallinks dd.date      {color:#339; font:85% georgia,serif; text-align:right}
#externallinks p            {padding:0 5px 5px 5px; font-size:100%; line-height:130%}
#externallinks h3           {font-size:100%}

#externallinks #conformance     {display:none; margin-top:20px}
#externallinks #conformance a   {border:0; text-decoration:none}
#externallinks #conformance ul  {list-style:none; margin:0.5em 0; padding:0}
#externallinks #conformance li  {font-size:95%; text-align:center; padding:0}

#externallinks ul.webtools li   {text-align:left}

#advert {margin:0 0 20px 0}
#advert a, #advert a:hover, #advert a:visited, #advert a:active {border-bottom:0}


#footer       {text-align:center; clear:both; width:100%; min-width:760px; height:82px; padding:0; background:url(/graphics/bg_footer.gif) no-repeat center bottom}
#footer ul    {line-height:150%; margin:20px auto; padding:0; width:423px; list-style-type:none}
#footer li    {margin:0 0.5em; padding:0; display:inline; width:423px; font-size:80%}
#footer li a  {white-space:nowrap}
#footer p     {font-size:100%}
#footer h3    {font-size:100%}

/* Invisible accesskey headings and skip links */
.head           {position:fixed; top:0; left:0; border:0;                  margin:0; padding:0; color:#fff7dd; background:#fff7dd; text-decoration:none; width:0000; font:bold 1%/1% verdana,helvetica,arial,sans-serif; height:0; overflow:hidden}
.head a:focus   {position:fixed; top:0; left:0; border:10px solid #fff7dd; margin:0; padding:0; color:#ff0000; background:#fff7dd; text-decoration:none; width:auto; font-size:120%}
.skip           {position:fixed; top:0; left:0; border:0;                  margin:0; padding:0; color:#fff7dd; background:#fff7dd; text-decoration:none; width:0000; font:bold 1%/1% verdana,helvetica,arial,sans-serif; height:0; overflow:hidden}
.skip a:focus   {position:fixed; top:0; left:0; border:10px solid #fff7dd; margin:0; padding:0; color:#ff0000; background:#fff7dd; text-decoration:none; width:auto; font-size:100%}


.clear            {clear:both}
.nomargin         {margin:0}
.notopmargin      {margin-top:0}
.nobottommargin   {margin-bottom:0}
.nopadding        {padding:0}
.noverticalmargin {margin-top:0; margin-bottom:0}
.right            {text-align:right}
.imgfloatright    {float:right; margin:5px 0 5px 5px}
.imgfloatleft     {float:left; margin:5px 5px 5px 0}
.centre           {text-align:center}
.warning          {font-weight:bold; color:red}
.new              {font-weight:bold; color:blue}


span.download     {font-family:georgia,serif; font-size:90%}

span.usability,
span.semantics,
span.legal,
span.accessibility  {background:#ede; padding:2px}

p.revision {line-height:0.1em; font-size:90%; text-align:right; margin:0; padding:0; color:#66c}
.updated  {font-size:90%; text-align:right; color:#339; margin:0; margin-top:-0.4em}
.date {font-family:georgia,serif; color:#44a}
.author {font-family:georgia,serif; margin-right:2em; color:#44a}
