/* 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(/web/20121227073727oe_/http://www.w3.org/Style/CSS/GILLSAN3.eot) format("eot"), url(/web/20121227073727oe_/http://www.w3.org/Style/CSS/GILLSAN3.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(/web/20121227073727oe_/http://www.w3.org/Style/CSS/GILLSAN2.eot) format("eot"), url(/web/20121227073727oe_/http://www.w3.org/Style/CSS/GILLSAN2.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 700;
  src: url(/web/20121227073727oe_/http://www.w3.org/Style/CSS/GILLSAN1.eot) format("eot"), url(/web/20121227073727oe_/http://www.w3.org/Style/CSS/GILLSAN1.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 700;
  src: url(/web/20121227073727oe_/http://www.w3.org/Style/CSS/GILLSAN0.eot) format("eot"), url(/web/20121227073727oe_/http://www.w3.org/Style/CSS/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 {
  columns: 30em;
  column-gap: 20px;
  padding: 0 20px;
  margin: 6em 3% 19em 3%;
  background: #fff;
  font: 1em/1.3 Gill Sans, My Gill Sans, sans-serif;
  color: #555;
  position: relative;
  box-shadow: 0 .3em 1em #000 }

/* Home page has floats instead of columns */
.portal {column-width: auto}

/* English pages need no space for the translation warning */
body:lang(en) {margin-top: 2em}

a {color: #0C3D5F; text-decoration: none}
:visited {color: #609}
a:hover {text-decoration: underline}
a > img {border: none}
img, pre {max-width: 100%; overflow: auto}
ul, blockquote {padding-left: 1em}
dt {display: run-in; font-weight: bold}
dt:after {content: " \2013  "}
dd {margin: .65em 0 .65em 1em; text-indent: -1em}
dd > * {text-indent: 0}
sup {line-height: 0}
td {vertical-align: baseline}
th {vertical-align: bottom; text-align: left}
p, blockquote {margin: 1.3em 0}

.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 {
  letter-spacing: .051em;
  font: normal 1.5em/1.1 OFL Sorts Mill Goudy, Georgia, serif }

h1 {
  column-span: all;
  margin: 0 -20px 3em -20px; /* Room below for #banner menu */
  padding: .6em 1em;
  height: 3.3em;
  border-left: solid transparent 90px; /* Room for W3C logo */
  border-right: solid transparent 110px; /* Room for language link */
  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 {break-inside: avoid; margin: 0 0 2em 0; padding: 1.3em 1em 0 1em}
.long {break-inside: auto}

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

#banner .home {
  position: absolute;
  display: block;
  top: -6.75em;
  left: 0;
  margin: -7px 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 20px;
  text-transform: uppercase }

#banner ul {margin: 0; padding: 0 0 0 90px}
#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 {
  column-span: all;
  color: #fff;
  background: url(bg2) #315780;
  background-size: 20em 14em;
  text-shadow: 0 1px 1px #000;
  border: 1px solid hsl(212, 44%, 33%);
  border-width: 1px 0;
  padding: 1.5em 2em 1.5em 0;
  margin: 0 -20px 20px -20px }

#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: #156aa6;
  width: 35%;
  margin: 0 0 0 -3px;
  padding: 20px 20px 1px 20px;
  border-radius: 0 .4em .4em 0;
  box-shadow: 0 1px 3px #000 }

#summary a {color: #c2eafe}
#summary .aside a {color: inherit}

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

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

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

#banner .search {white-space: nowrap; float: right; margin-right: 0}

input {border-radius: .25em; padding: .2em .5em; border: thin solid #ddc}
#inputField {background: url(/web/20121227073727oe_/http://www.w3.org/2008/site/images/google) no-repeat 50%}
#inputField:focus, button {background: none}
button {border: 0}
button img {vertical-align: middle}

.more a {
  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 {
  text-decoration: none; 
  background-image: url(grad0) }

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

#news > *:first-child, #intro > *:first-child {margin-top: 0}

#news ul {padding: 0}

#news li {
  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 {
  background: url(grad2) repeat-x #1875b9;
  background-size: 100% 100%;
  color: #fff;
  font-size: .8em;
  line-height: 1;
  border-radius: 2px;
  text-shadow: 0 0 1px #0c3d5f;
  padding: .2em .3em;
  margin: 0 .33em 0 0 }

#news .updated {
  float: left;
  width: 3em;
  text-align: center;
  text-transform: uppercase;
  outline: 1px solid #aaa;
  outline-offset: 2px;
  margin: 0 1em 0 0;
  padding: .2em .1em .5em .1em }

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

.dated li {clear: left}

:not(:lang(en)) > li[lang|=en]:before {content: url(uk) " "}
:not(:lang(de)) > li[lang|=de]:before {content: url(de) " "}

#translations {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1.1;
  padding-bottom: 2.6em;
  -moz-column-width: 8em;
  -webkit-column-width: 8em;
  column-width: 8em;
  break-inside: auto }

#translations a, #language a {color: inherit}

#translations p, #translations li, #translations h2 {break-inside: avoid}

#translations h2 {display: none}
#translations p {font-weight: bold; -webkit-column-span: all; column-span: all}
#translations ul {list-style: none; padding: 0; margin: 0}
#translations li {margin: 0 0 1.3em 0}

#language, #language p {margin: 0; padding: 0; text-align: center}

#language p:first-child + p {
  position: absolute;
  top: -5.5em;
  left: 1.11em;
  right: 1.11em;
  font-size: .9em }

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

#language a[href="#translations"] {
  position: absolute;
  top: .9em;
  right: 20px;
  line-height: 1 }

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

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

address {
  float: right;
  width: 40%;
  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: .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 }
.status tbody + tbody th {padding-top: 1em}

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


@media all and (min-width: 50em) {
  .portal .section {float: left; width: 50%}
  .portal .section:nth-of-type(2n+1) {clear: both}
  .portal #language, .portal #translations, .portal #banner, .portal #summary,
  .portal #endmatter {float: none; width: auto}
  h1 {height: 2.2em}
  #banner {top: 5.1em; text-align: left}
  #banner .home {top: -5.1em; height: 5.1em}
  .portal #news {float: right}
}

@media all and (min-width: 100em) {
  .portal .section {width: 33.3%}
  .portal .section:nth-of-type(2n+1) {clear: none}
  .portal .section:nth-of-type(3n) {clear: both}
}

@media all and (max-width: 33em) {
  h1 {
    font-size: 1em;
    letter-spacing: normal;
    margin-bottom: 4.5em;
    height: 5.55em }
  #banner ul {padding-left: 0}
}