/* Style sheet for http://www.w3.org/Style/CSS and related pages.

Graphic design by Divya Manian (December 2010), with help from
fantasai, based on graphic elements of the W3C home page of 2010.
Adapted by Bert Bos <bert@w3.org> (April 2011)

Copyright © 2010 Divya Manian (design)
Copyright © 2011 W3C (code), see
http://www.w3.org/Consortium/Legal/2002/copyright-software-20021231

*/

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(../GILLSAN3.eot) format("eot"), url(../GILLSAN3.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(../GILLSAN2.eot) format("eot"), url(../GILLSAN2.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 700;
  src: url(../GILLSAN1.eot) format("eot"), url(../GILLSAN1.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 700;
  src: url(../GILLSAN0.eot) format("eot"), url(../GILLSAN0.woff) format("woff")}

@font-face {
  font-family: OFL Sorts Mill Goudy;
  font-style: normal;
  font-weight: normal;
  src: url(OFLGoudyStM-webfont.eot) format("eot"),
    url(OFLGoudyStM-webfont.woff) format("woff"),
    url(OFLGoudyStM-webfont.svg) format("svg") }


html {background: #DCE3E6}

body {
  padding: 0 20px;
  margin: 6em auto;
  width: 90%;
  background: #fff;
  font: 1em/1.3 Gill Sans, sans-serif;
  color: #555;
  position: relative;
  box-shadow: 0 .3em 1em #000;
  -moz-box-shadow: 0 .3em 1em #000;
  -webkit-box-shadow: 0 .3em 1em #000 }

body:lang(en) {margin-top: 2em}

a {color: #0C3D5F; text-decoration: none}
a:hover {text-decoration: underline}
a > img {border: none}
img {max-width: 100%}
ul {padding-left: 1em}
dt {display: run-in; font-weight: bold; margin-right: 0.33em}
dd::before {content: "\2013  "}
dd {margin: .65em 0 .65em 1em; text-indent: -1em}
sup {line-height: 0}
td {vertical-align: baseline}
th {vertical-align: bottom; text-align: left}

.feed img {max-height: 1.2em; min-height: .5em}
.icon {float: right; max-width: 4em; margin: 0 0 0 .5em}

h1, h2, .aside h3, .feed {
  border-bottom: none;
  letter-spacing: .051em;
  font: normal 1.5em/1.1 OFL Sorts Mill Goudy, Georgia, serif }

h1 {
  margin: 0 -20px 3em -20px; /* Room below for #banner menu */
  padding: .6em 1em;
  min-height: 3.3em;
  border-left: solid transparent 93px; /* Room for W3C logo */
  color: #666;
  background: #eee }

h1 em {font-style: normal; display: block}

h3 {
  font-size: 1em;
  font-weight: normal;
  font-style: italic;
  border-bottom: thin solid }

.section {padding: 0 1em; margin: 1em 0 0 0}

.section, #summary .aside { 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box }

#banner .home {
  position: absolute;
  display: block;
  top: -6.75em;
  left: 0;
  margin: -8px 0 0 0;
  height: 6.75em;
  background: url(logo-bg) #2371aa;
  border-top: 2px solid #3b80b3;
  padding: 0;
  line-height: 0 }

*>.home img {display: none}
.home a {text-decoration: none}
.home a:before {content: url(w3c-logo)}

#banner {
  border-top: double 8px #ddd;
  position: absolute;
  left: 0;
  top: 6.75em;
  right: 0;
  height: 2.6em;
  margin: -1px 0 0 0;
  padding: .5em 0;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase }

#banner ul {margin: 0; padding: 0}
#banner li {display: inline; margin: 0 1.5em 0 0}
#banner li a {margin: 0 -.5em; padding: .3em .5em; font-size: .9em}
#banner h2 {display: none}

#summary {
  color: #fff;
  background-image: url(bg2);
  background-size: 20em 14em;
  text-shadow: 0 1px 1px #000;
  border: 1px solid hsl(212, 44%, 33%);
  border-style: solid none;
  padding: 1.5em 2em 1.5em 0;
  margin: 0 -20px 1.5em -20px }

body::after,
#endmatter::after,
#summary::after,
#news li::after {content: " "; height: 0; display: block; clear: both}

#summary > * {float: right; width: 60%; margin: 0 0 1.3em 0}

#summary .aside {
  float: none;
  background: url(grad2) #1876B9;
  background-size: 100% 100%;
  text-shadow: 1px 1px 1px hsl(212, 64%, 28%);
  width: 35%;
  margin: 0 0 0 -3px;
  padding: 20px 20px 10px 20px;
  border: 1px solid hsl(212, 64%, 30%);
  border-top-right-radius: .25em;
  border-bottom-right-radius: .25em;
  box-shadow: 0 1px 3px #000;
  -moz-box-shadow: 0 1px 3px #000;
  -webkit-box-shadow: 0 1px 3px #000 }

#summary a {color: hsl(200, 98%, 83%)}

#summary .aside a {
  color: inherit;
  display: block;
  margin: 0 -30px;
  padding: .4em 20px }

#summary .aside h3 {margin: 0 0 .5em 0}
#summary .aside ul {padding: 0}
#summary .aside li {
  display: block;
  margin: 0 10px;
  border-top: 1px solid hsl(205, 41%, 50%);
  border-bottom: 1px solid hsl(205, 91%, 18%) }
#summary .aside li:first-child {border-top: none}
#summary .aside li:last-child {border-bottom: none}

#summary .aside a:hover {
  background: url(grad4) repeat-y;
  background-size: 100% 100% }                  

h2, .aside h3 {text-transform: uppercase}
h2, .feed {display: inline}

.search {white-space: nowrap}

input {border-radius: .25em; padding: .2 .5em; border: thin solid #ddc}

.more a, input[type=submit] {
  background: url(grad1) repeat-x #025a9a;
  background-size: 100% 100%;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  padding: .2em 1em;
  border-radius: .25em;
  border: 0;
}

.more a:hover, .more a:focus,
input[type=submit]:hover, input[type=submit]:focus {
  text-decoration: none; 
  background-image: url(grad0);
}

#news, #intro {
  padding: 1em;
  color: #333;
  background: #C1D2E7;
  border-radius: .5em }

#news ul {padding: 0}

#news li {
  clear: left;
  display: block;
  padding: .7em 0 0 0;
  margin: 0 0 .7em 0;
  border-top: 1px dotted hsl(212, 44%, 53%) }

#news li:first-child {border-top: none; padding-top: 0}

.updated span {
  font-size: 1.5em;
  font-style: normal;
  font-weight: bold;
  display: block }

#news .updated {
  float: left;
  width: 3em;
  text-align: center;
  text-transform: uppercase;
  outline: 1px solid #aaa;
  outline-offset: 2px;
  background: url(grad2) repeat-x #1875b9;
  background-size: 100% 100%;
  color: #fff;
  font-size: .8em;
  line-height: 1;
  border-radius: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 1px #0c3d5f;
  padding: .2em .1em .5em .1em;
  margin: 0 1em 0 0 }

#translations {height: 0; margin: 0; padding: 0; position: relative; top: 2em}

#translations, #language {text-align: center}
#translations a, #language a {color: inherit}

#translations p {
  margin: 0;
  column-width: 8em;
  -moz-column-width: 8em;
  -webkit-column-width: 8em }

#translations a {
  display: block;
  break-inside: avoid;
  padding: 0 0 1.3em 0;
  line-height: 1.1 }

#translations h2 {display: none}

#translations p + p {
  margin: 1.3em 0;
  column-width: auto;
  -moz-column-width: auto;
  -webkit-column-width: auto }

#translations p + p a {display: inline; font-weight: bold}

#language {padding: 0}

#language p:first-child + p {
  position: absolute;
  top: -6em;
  left: 0;
  right: 0;
  padding: .5em 1.11em;
  margin: 0;
  background: #E2E8EA;
  font-size: .9em }

#language p:first-child + p a {font-weight: bold}

#language a[href="#translations"] {
  float: right;
  line-height: 1;
  margin: 1em 0 1em .5em }

#language a[href="#translations"]::before {
  content: url(flags) "\A";
  white-space: pre }

#endmatter {
  clear: both;
  font-size: .9em;
  margin: 1em -20px 0 -20px;
  color: #666;
  background: #eee;
  padding: 1.11em }

address {
  float: right;
  width: 35%;
  text-align: right;
  padding: 0;
  margin: 0 0 -1.11em 1em }

#endmatter .photo {
  float: right;
  margin: -1.11em -1.11em 0 .5em;
  height: 6em }

#endmatter p {text-transform: uppercase; margin: 0}
#endmatter small {font-size: 1em; display: block}
#endmatter img {float: left; margin-right: 0.5em}

.figure {margin: 1em 0; text-align: center; font-style: italic}
.figure p {margin: 0; font-size: .9em}

.status {margin: .6em 0; border-collapse: collapse}
.status td, .status th {
  padding: .1em .3em .1em 0;
  border-bottom: thin dotted #BBF;
  text-align: left;
}
.status tbody + tbody th {padding-top: 1em}

.status td + td, .status th + th, .status .wd, .status .lc,
.status .cr, .status .pr, .status .rec {padding-left: .3em}
.wd a, .lc a, .cr a, .pr a, .rec a {color: inherit}
.wd, .pa {background: hsl(20, 78%, 55%); color: #fff}
.lc, .alpha {background: hsl(30, 68%, 65%)}
.cr, .beta {background: hsl(62, 86%, 45%)}
.pr, .rc {background: hsl(89, 53%, 44%); color: #fff}
.rec, .fin {background: hsl(129, 53%, 40%); color: #fff}
td + td + .wd {background: hsl(20, 78%, 64%); color: #fff}
td + td + .lc {background: hsl(30, 68%, 72%)}
td + td + .cr {background: hsl(62, 70%, 55%)}
td + td + .pr {background: hsl(89, 41%, 55%); color: #fff}
td + td + .rec {background: hsl(129, 35%, 52%); color: #fff}


@media all and (min-width: 50em) {
  .section {float: left; padding: 1em}
  #language,#translations,#banner,#summary,#endmatter {float: none; width: auto}
  h1 {min-height: 2.2em}
  #banner {top: 5.1em; text-align: left}
  #banner .home {top: -5.1em; height: 5.1em}
  #banner ul {margin: 0 0 0 1.5em; padding: 0 0 0 93px}
  #news, #banner .search {float: right}
}

@media all and (min-width: 50em) and (max-width: 100em) {
  .section {width: 49%}
  h1 + #summary ~ .section:nth-of-type(2n+1) {clear: both} /* Home page */
  h1 + :not(#summary) ~ .section:nth-of-type(2n) {clear: left} /* Others */
}

@media all and (min-width: 100em) {
  .section {width: 33%}
  h1 + #summary ~ .section:nth-of-type(3n) {clear: left} /* Home page */
  h1 + :not(#summary) ~ .section:nth-of-type(3n+2) {clear: left} /* Others */
}
