﻿/* This stylesheet is for standards mode browser display.  It should overwrite or repeat all the properties in basic.css. */

body {
    font-family: 'Helvetica Neue', Roboto, Arial, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
	color: #555;
	margin: 0;
	padding: 0;
	background-color: white;
	}
body:lang(ar) { 
	font-family: tahoma, sans-serif;
	}
:lang(cs), :lang(hu), :lang(ro), :lang(tr), :lang(vi) { 
	font-family: Roboto, "Arial", "Segoe UI", sans-serif;
	}


/* set margins */
p, h2, h3, div.h4, dl, div#footer, div.example { margin-left: 7.5%; margin-right: 32%; }
div.example-wide { margin-left: 7.5%; margin-right: 5%; }
ul, ol { margin-left: 11%; margin-right: 34%; }
ul ul { margin-left: 2%; margin-right: 5%; }
table { margin-left: 7.5%;  }
table.inband { margin-right: 32%; }
blockquote { margin-left: 11%; margin-right: 34%; }

li p { margin-left: 0; margin-right: 0; }
blockquote p { margin-left: 0; margin-right: 0; }
li li { margin-right: 0; }
li div.example { margin-left: 0; margin-right: 0; }
blockquote ol { margin-right: 0; }
div.example dl { margin-right: 0; }
div.example dd { margin-right: 0; }

#footer p { margin-left: 0; margin-right: 0; }
div.example p { margin-left: 0; margin-right: 0; }
div.sidenote p { margin-left: 0; margin-right: 0; }
div.example blockquote { margin-left: 1em; margin-right: 1em; }


/* default language-specific fonts */

:lang(cs) { font-family: Roboto, Calibri, Helvetica, sans-serif; }


/*Start main styles
*/

a {
	text-decoration: none;
	color: #005a9c;
	font-weight: 400;
	}
a:visited {
	font-weight: 400;
	color: teal;
	}
a:hover {
	color:  #005a9c;
	background: #FFC;
	text-decoration: underline;
	}

strong { font-weight: 700; }

#boilerplate a, #site-navigation a, .sidebar a {
	font-weight: 300;
	}


	/*
a in */ #site-navigation a {
	white-space: nowrap;
	}
	/*
a:link in */ div#site-navigation a:link {
	color: #b8cbcb;
	}
	/*
a:link in */ h2 a:link { 
	text-decoration: none;
	color: #005a9c;
	font-weight: 300;
	}
	/*
a:visited in */ h2 a:visited { 
	color: #005a9c;
	text-decoration: none;
	font-weight: 300;
	}
	/*
a:link in */ div.section2 h3 a:link { 
	text-decoration: none;
	color: #005a9c;
	font-weight: 300;
	}
	/*
a:visited in */ div.section2 h3 a:visited { 
	color: #191970; 
	color: #005a9c;
	}
	/*
a:hover in */ #siteicons a:hover {
	text-decoration: none;
	background-color: #003163;
	color: white;
	}
	/*
a:hover in */ #site-navigation a:hover {
	color: #005a9c;
	background-color: #003163; 
	text-decoration: none;
	}
	/*
a:hover in */ #sitelinks a:hover {
	color: #005a9c;
	text-decoration: none;
	}
	/*
a:visited in */ div#site-navigation a:visited {
	color: #b8cbcb;
	text-decoration: none;
	}
	/*
a in */ #alternates a {
	text-transform: none;
	}
a.dfn:link {
	color: inherit;
	text-decoration: none;
	border-bottom:1px dotted teal;
	}
a.dfn:hover {
	color:  #005a9c;
	background: white;
	text-decoration: none;
	border-bottom:1px dotted teal;
	}
a.dfn:visited {
	color: inherit;
	text-decoration: none;
	border-bottom:1px dotted teal;
	}
acronym {
	text-transform: capitalize;
	}
address {
	font-style: normal;
	}
#author {
	margin-top: 5em;
	}
.background-link {
	margin-bottom: 0;
	margin-top: 0;
	}
blockquote {
	text-align: left;
	}
.box-header {
	font-weight: 700;
	}
code {
	font-size: 13px;
	font-family: Monaco, "Andale Mono", Consolas, monospace;
	font-weight: normal;
	}
code.code1 {
	display: block;
	}
code.code2 {
	display: block;
	margin-left: 40px;
	}
.codelink {
	float: right;
	}
.codelinkl {
	float: left;
	}
#disclaimer {
	text-align: left; 
	font-size: 80%; 
	line-height: 1em; 
	background-color: transparent; 
/*	border: 1px solid teal;
	background-color: #eee;
	padding: 0.5em; */
	}
div#disclaimer {
	float: right;
	width: 28%;
	clear: right;
	}
#disclaimer p {
	color: #C30;
	font-size: 115%; 
	line-height: 1.2em;
	}
div#search {
	float: right;
	width: 28%;
	clear: right;
	}
#searchField {
	background-color: #C08D34; 
	background-color: #5F9EA0;
	border: 0;
	margin-right: 5px;
	}
#searchSite {
	background-color: #AC7C29; 
	background-color: teal;
	color: #7FFFD4;
	text-align: right; 
	text-align: left;
	padding: 0px 5px 0px 5px;
	font-size: 80%;
	margin: 30px 49px 10px 18px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-right:10px;
	}
#searchSite input {
	width:90%; 
	background-image: url(/International/style/search.png); 
	background-position: left; 
	background-repeat: no-repeat; 
	padding-left:18px; 
	color:#7fffd4; 
	background-color:teal;
	cursor:pointer;
	}
div.code {
	display: block;
	overflow: auto;
	width: 100%;
	white-space: pre;
  	font-family: Monaco, Consolas, 'Andale Mono', Courier, monospace;
	font-size: 95%;
	line-height: 120%;
	}
		/*
div.example in */ dd div.example {
	margin-left: 0;
	margin-right: 0;
	}
div.example, div.example-wide {
	border: 1px solid #000066;
	border-left: 10px solid #000066;
	padding: .5em;
	padding-left: 1em;		     	
	/*color: #000066;*/
	background: #f9f5de; 
	margin-top: .25em;
	margin-bottom: .25em;
	text-align: left;
	
	background-color:#ffe; 
	border: 1px solid #CCC; 
	-o-box-shadow: 7px 7px 5px #888;
	-icab-box-shadow: 7px 7px 5px #888;
	-khtml-box-shadow: 7px 7px 5px #888;
	-moz-box-shadow: 7px 7px 5px #ccc;
	-webkit-box-shadow: 7px 7px 5px #ccc;
	box-shadow: 7px 7px 5px #888; 
	padding: 5px 10px 5px 15px; 
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	}
.note {
	color: #000066;
	margin: .25em 35% .25em 10%;
	
	background-color:#eef; 
	border: 1px solid #CCC; 
	-o-box-shadow: 7px 7px 5px #888;
	-icab-box-shadow: 7px 7px 5px #888;
	-khtml-box-shadow: 7px 7px 5px #888;
	-moz-box-shadow: 7px 7px 5px #ccc;
	-webkit-box-shadow: 7px 7px 5px #ccc;
	box-shadow: 7px 7px 5px #888; 
	padding: 5px 10px 5px 15px; 
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	}
.note strong { font-size: 180%; text-transform: lowercase; font-weight: normal; padding-right: 10px; }
.note p { margin-left: 0; margin-right: 0; }

div.section {
	line-height: 150%;
	background-color: white;
	color: #555;
	}
dt {
	font-weight: 700;
	margin-top: 1em;
	}
.ed {
	color: red;
	}
fieldset {
	color: #a52a2a;
	}
#footer {
	margin-top: 5em;
	border-top-width: 1px;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-color: #333;
	border-style: solid;
	font-size: 90%;
	}
p.background-link + h2 {
	margin-top: 0;
	}
.leadin {
/*	color: #005a9c; */
	font-weight: 700;
	}
h1 {
	color: #005a9c;
	background-color: white;
	padding: 5px;
	padding-left: 10px;
	margin: 1em 32% 0 3%;
	font-size: 40px; 
	font-weight: 300; 
	line-height: 50px; 
	}
h2 {
	color: #005a9c;
	font-size: 150%;
	font-weight: 300;
	margin-top: 3em; 
	border-bottom: 1px solid #eee;
	}

	/*
h2 in */ .sidebar h2 {
	margin-top: 40px;
	margin-left: 16px;
	margin-right: 3%;
	}
h3 {
	text-align: left;
	font-size: 120%;
	font-weight: 300;
	margin-top: 2em;
	margin-bottom: 1em;
	border-bottom: 1px solid #eee;
	/* text-transform: lowercase; */
	}
h4 {
	display: inline;
	font-size: 100%;
	font-weight: 700;
	margin-right: 1em;
	}
div.h4 {
	margin-top: 2em;
	}
div.h4 p {
	margin-left: 0;
	margin-right: 0;
	display: inline;
	}
.hide {
	}
#i18n-name {
/*	font-size: 40px; 
	vertical-align: bottom;
	color: #3ea7a7;
	letter-spacing: -1.5px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	
	font-size: 22pt; font-family: Arial; color: #a5b9b9; margin-left: 10px; 
*/
	font-size: 29px; 
	vertical-align: bottom;
	letter-spacing: -1px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	color: #a5b9b9; 
	margin-left: 10px; 
	}
img {
	border:0;
	}
#icon {
	float: right;
	width: 28%;
	clear: right;
	}
p.background-link { 
	color: teal;
	text-align: right;
	margin-top: 0;
	margin-bottom: 0;
	}
	/*
li in */ #sidebar li {
	list-style-type: none;
	}
#line {
	position: absolute;
	left: 72%;
	top: 0;
	width: 10px;
	border-left: 2px dotted #005a9c;
	height: 30em;
	}
.kw {
	color: #A52A2A;
	font-family: "Courier New", monospaced;
	}
#logos {
	display: none;
	float: right;
	margin: .25em 1em 0 1em;
	}
#navigation { /* doesn't seem to exist */
	line-height: 150%;
	background-color: transparent;
	color: #555;
	font-weight: bold;
	margin-top: 3em;
	margin-bottom: 1.5em;
	text-transform: lowercase;
	}
#navigation:lang(de) { text-transform: none; }
.newterm {
	font-weight: 700;
	color: black;
	}
#audience {
	line-height: normal;
	font-weight: 300; 
	color: gray;
	margin-top: 4em;
	margin-bottom: 2em;
	font-size: 90%;
	}
#audience .leadin {
	font-weight: 400;
	color: #555;
	text-transform: lowercase;
	}
#audience .leadin:lang(de) { text-transform: none; }
p#internal-links {
	line-height: normal;
	}
	/*
p in */ #author p {
	padding-top: .5em;
	padding-bottom: .5em;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	}
	/*
p in */ #disclaimer p {
	margin-left: 30px;
	margin-right: 20px; 
	}
	/*
p in */ #navigation p {
	margin-top: 0;
	margin-bottom: .25em;
	text-align: left;
	font-size: 90%;
	}
	/*
p in */ .sidebar p {
	margin-left: 30px;
	margin-right: 20px; 
	}
	/*
ul in */ .sidebar ul {
	margin-left: 30px;
	margin-right: 20px; 
	padding: 0;
	}
	/*
p in */ .insidenote p {
	margin:0;
	margin-bottom: .5em; 
	}
	/*
p in */ #site-navigation p {
	margin-left: 30px;
	margin-right: 20px; 
	margin-top: 0;
	margin-bottom: 0;
	}
p#pagelocation {
	display: none;
	}
img#picture {
	margin-left:20px;
	margin-top: .5em;
	margin-bottom: .5em;
	display: block;
	border: 0;
	}
pre {
	line-height: 1.3em;
	font-size: 14px;
	}
:lang(ar) { 
	quotes: '\201c' '\201d' '\2018' '\2019'; 
	} 
:lang(ar) > span.qchar {
  	quotes: "\201c" "\201d" "\2018" "\2019";
	}
.qchar {
	font-size: 100%;
	color: black;
	font-family: "Times New Roman", Times, serif;
	}
.qchar:before {
	content: '\2018';
	font-style: normal;
	font-size: 100%;
	margin-right: 1px;
	}
.qchar:after {
	content: '\2019';
	font-style: normal;
	font-size: 100%;
	margin-left: 1px;
	}
.qchar:before {
	content: '\2018';
	font-style: normal;
	font-size: 100%;
	margin-right: 1px;
	}
.qchar:after {
	content: '\2019';
	font-style: normal;
	font-size: 100%;
	margin-left: 1px;
	}
.question {
	font-weight: 700;
	text-align: left;
	color: #000;
	}
.qterm {
	font-style: italic;
	}
.qterm:before {
	content: '\'';
	font-style: normal;
	font-size: 100%;
	}
.qterm:after {
	content: '\'';
	font-style: normal;
	font-size: 100%;
	margin-left: 2px;
	}
.q:before {
	content: '"';
	}
.q:after {
	content: '"';
	}
div.section {
	line-height: 1.75;
	background-color: white;
	color: #555;
	text-align: justify;
	}
#references p {
	text-align: left;
	}
.sidebar {
	float: right;
	width: 28%;
	clear: right;
	line-height: 1.4;
/*	border-left: 2px dotted #005a9c; */
	}
/* Note that stuff that goes in the sidebar will not be printed! If you want a note that will be printed, consider an insidenote or sidenote. */

.sidenote {
	position: absolute;
	top: 0;	
	right: 2em;
	width: 24%;
	font-size: 80%;
	line-height: 1.2;
	text-align: left;
	}
/* Note that .sidenote has to be absolute to get it to position alongside the top of the text it comments on, but have it read after.  The order is important for screen readers and for the printed version. The use of the sidegroupnote div allows you to specify the location where the note should be read. (cf. .insidenote) */

.insidenote {
	float: right;
	margin-right: 2em;
	margin-left: 1.5em;
	margin-top: .5em;
	margin-bottom: 1em;
	width: 24%;
	font-size: 80%;
	line-height: 1.2;
	text-align: left;
	z-index:-500;
	}
/* .insidenote is for use at the top of the document where the sidenote might conflict with the sidebar.  Note that, because it uses float rather than absolute, the note it encapsulates has to come *before* the text it is displayed alongside. This is less than ideal for voice browsers. */

span#scale {
	white-space: nowrap; 
	color: gray;
	}
div.sidenoteGroup {
	position: relative;
	width: 100%;
	}
#siteicons {
	background-color: #003163;
	
	/* experimental new stuff here 
	background-image: url(/International/icons/w3c_home-background.png);
	background-position: top left;
	background-repeat: no-repeat;*/

	border-bottom-right-radius: 30px;
	margin-right: 29%;
	box-shadow: -4px 4px 7px #888; 
	padding: 0;
	height: 49px;
	
	}
#sitelinks {
	text-align: right;
	padding-top: 8px;
	}
#sitelinks a { 
	padding-left: 0.75em;
	}
#site-navigation {
	float: right; 
	background-color: #000066;
	background-color: #003163;     background-color:white;
	color: #3ea7a7;
	color: #7FFFD4;
	width: 28%;
	clear: right;
	padding-top: 1em;
	padding-bottom: 0;
	background-image: url(standards-corner.png);
	background-position: top right;
	background-repeat: no-repeat;
	line-height: 1.4;
	}
#site-navigation:lang(ar), #site-navigation:lang(he) {
	background-image: url(standards-corner-rtl.png);
	}
div.smallprint {
	font-size: 80%;
	line-height: 1.4;
	}
div#survey {
	text-align: left;
	float: right; 
	width: 28%;
	font-size: 90%;
	line-height: 1.4;
	}
span.searchkey {
	font-style: italic;
	}
span.surveyScale {
	white-space: nowrap; 
	color: gray;
	}
div#survey p {
	margin-left: 10px; 
	margin-right: 10px; 
	text-align: left;
	}
table, td, th {
	font-size: 1em;
	}
table.inband {
	margin-top: 1em;
	margin-bottom: 1em;
	}
	/*
td in */ table td { 
	border: 1px solid teal; 
	vertical-align: top; 
	text-align: center; 
	border-collapse: collapse; 
	font-family: "Arial Unicode MS", "Lucida Sans Unicode", sans-serif; 
	}
	/*
td in */ table.inband td {
	text-align: left;
	vertical-align: top;
	border: 1px solid #000066;
	padding: 0.2em;
	}
	/*
input#who {
	width: 100%;
	}
th in */ table th { 
	font-size: 80%; 
	text-align: right;
	padding: 4px;
	}
	/*
th in */ table.inband th {
	text-align: left;
	vertical-align: top;
	border: 1px solid #000066;
	font-weight: 400;
	padding: 0.2em;
	background-color: #f9f5de; 
	}
.uppercase {
	text-transform: uppercase;
	}
.uri {
	display: none;
	}
#wai-start  { 
	position:absolute; 
	left:-999px; 
	width:990px;
	display: block;	
	}
	



.oldsidenote {
	float: right;
	width: 20%;
	margin-right: 8%;
	clear: right;
	font-size: 80%;
	line-height: 1em;
	text-align: left;
	}

#full-links p { 
	text-align: left; 
	}



/***** survey form *****/

.container {
  color: #666;
  background: url(/International/icons/survey-right.gif) top right no-repeat;
  max-width: 250px;
  text-align: left;
  } 
.topright {
  margin: 0;
  padding: 9px 9px 0 9px;
  background: url(/International/icons/survey-left.gif) top left no-repeat;
  }
.bottomleft {
  margin: 0;
  padding: 0 0 0 9px;
  background: url(/International/icons/survey-left.gif) bottom left no-repeat;
  }
.bottomright {
  margin:0;
  padding: 0 9px 9px 0;
  font-style: normal;
  background: url(/International/icons/survey-right.gif) bottom right no-repeat;
  }
.container a.interaction { 
  font-size: 130%;
  color: #e70;
  }
.container button.interaction {
  font-size: 130%;
  color: #e70;
  background-color: #ffffff; 
  border: 0; 
  margin: 0; 
  padding: 0;
  text-align: left; /* for IE */
  cursor: pointer;
  width: 225px;
  }
.container label.interaction {
  font-size: 130%;
  color: #e70;
  background-color: #ffffff; 
  border: 0; 
  margin: 0; 
  padding: 0;
  cursor: pointer;
  }
.container form {
	margin: 0;
	padding: 0;
	border: 0;
	}
.container p {
	margin: 0;
	padding-top: 9px;
	}

#print-author {
	font-size: 110%;
	color: #005a9c;
	margin-top: 4em;
	font-weight: 400;
	display: none;
	}
#print-uri {
	font-size: 100%;
	color: #005a9c;
	display: none;
	margin-bottom: 2em;
	}





@media print {
/* ***********  PRINTING ****************** */


body {
	font-size: 10pt;
	}

div.sidebar {
	float: none;
	margin-left: 10%;
	margin-right: 12%;
	margin-bottom: 3em;
	width: 80%;
	line-height: 150%;
	text-align: justify;
	background-color: #cccc99;
	background-color: white;
	color: #555;
	}
.sidenote:before {
	content: '◼ ';
	color: #005a9c;
	}
.sidenote {
	position: static;
	font-size: 80%;
	line-height: 1em;
	text-align: left;
	width: auto;
	margin-left: 11%; 
	margin-right: 12%; 
	}	
.oldsidenote {
	float: right;
	width: 20%;
	margin-right: 8%;
	margin-left:4%;
	margin-bottom: 1em;
	padding: 2%;
	clear: right;
	font-size: 80%;
	line-height: 1em;
	text-align: left;
	border: 1px solid teal;
	}
.newsidenote {
	position: static;
	margin-bottom: .5em;
	margin-left:20%;
	margin-right: 12%;
	padding: 5pt;
	font-size: 80%;
	line-height: 1em;
	text-align: left;
	border: 1px solid teal;
	width:auto;
	}
	
	
	
h1 {
	color: #005a9c;
	background-color: white;
	padding: 5px;
	padding-left: 10px;
	margin: 1em 32% 0 3%;
	font-size: 40px; 
	font-weight: 300; 
	line-height: 50px; 
	}
h2 {
	padding-left: 0;
	/*page-break-before: always;*/
	page-break-after: avoid;
	padding-top: 3em;
	text-transform:none; 
	border-bottom: 1px solid #eee;
	}
h2 a:link { 
	text-decoration: none;
	color: #005a9c;
	}
h2 a:hover { 
	text-decoration: none;
	color: #005a9c;
	}
h2 a:visited { 
	color: #005a9c;
	text-decoration: none;
	}
h3 {
	padding-top: 1em;
	page-break-after: avoid;
	border-bottom: 0;
	}
div.section h3 a:link { 
	text-decoration: none;
	color: #005a9c;
	}
div.section h3 a:visited { 
	color: #191970; 
	color: #005a9c;
	}
h4 {
	page-break-after: avoid;
	margin-right: 0;
	}
div.h4  {
	 margin-left: 7.5%; margin-right: 10%;
	}

.figure {
	page-break-inside: avoid;
	}
#line {
	border: 0;
	}
.noprint {
	display: none;
	}
code {
	font-size: 120%;
	}
#survey {
	display: none;
	}
.uri {
	display: inline;
	font-style: italic;
	}
#full-links p { 
	text-align: left; 
	}
p#pagelocation {
	display: block;
	font-weight: 700;
	}
#site-navigation {
	display: none;
	}
#navigation { 
	display: none;
	}
p, h2, h3, dl, div#footer { margin-left: 7.5%; margin-right: 10%; }
li p { margin-left: 0; margin-right: 0; }
ul, ol, blockquote { margin-left: 11%; margin-right: 12%; }
table { margin-left: 7.5%;  }
div.example { margin-left: 7.5%; margin-right: 10%; }

/* a:after { 
	content: "[" attr(href) "]";
	}
*/
#print-author, #print-uri { display:block; }


} /*end of print section */

.outofdate {  background-color: yellow; border: 1px solid teal; padding: 8px; }

.foreign { font-style: italic; }


/* quick check form in side bar */

.quickcheck input { border:1px solid #ccc; color:#999; width:100%; padding: 2px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  }
.quickcheck button[type=submit] {border:0;background-color:#eee; padding: 2px 5px 2px 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.quickcheck .guide { font-size:75%; font-style:italic; }
.quickcheck p { margin-bottom: 5px; margin-top: 5px; color:#A52a2a; color:#666; }


#toc ol {
	margin:0;
	padding: 0;
	margin-left:2em;
	margin-right: 1em;
	margin-bottom: 15px;
	}
#toc li {
	list-style-type:none;
	margin-bottom: 5px;
	}
#toc ol ol {
	margin: 8px 0 8px 10px;
	font-size:80%;
	}
#toc ol ol li {
	margin-bottom: 3px;
	}

#breadcrumbs {
	font-size: 90%;
	margin-bottom: 10px;
	}
	
.example h2 {
	margin:0;
	}
	
dfn {
	font-weight:700;
	font-style: normal;
	color: black;
	}
cite {
	font-style: italic;
	}
.mark {
	background-color: #EEE;
	padding: 0 3px;
	border-radius: 3px;
	color: #000;
	font-weight:400;
	}
	
.updated { text-align:right; font-size: 90%; margin-top: 0; margin-bottom:0; }


/* ***** BIDI SHIM FOR DIR ****** */
[dir='ltr'], [dir='rtl'] { 
	unicode-bidi: -webkit-isolate;
	unicode-bidi: -moz-isolate;
	unicode-bidi: -ms-isolate;
	unicode-bidi: isolate;
	} 
bdo[dir='ltr'], bdo[dir='rtl'] {
	unicode-bidi: bidi-override; 
	unicode-bidi: -webkit-isolate-override; 
	unicode-bidi: -moz-isolate-override; 
	unicode-bidi: -ms-isolate-override; 
	unicode-bidi: isolate-override;
  	}
/* ***** END BIDI SHIM FOR DIR ****** */
