/* This style assumes mark-up similar to 

   body
   +- .banner (navigation links along the top)
   +- #digest (full-width block)
   |  +- .translation (links to translations)
   |  +- .translation-warning (optional warning)
   |  +- h1 (main title)
   |  +- .section (half-width block)
   |  |  +- h2
   |  |  +- ...
   |  +- .section...
   +- .section
   +- (more sections)
   +- .endmatter (full-width signature)
      +- address (name of author)
      +- p (optional buttons with class=button, and date)

   Sections are alternatingly floating left and floating right.

   Copyright 2008 W3C (MIT, ERCIM, Keio)
   See http://www.w3.org/Consortium/Legal/copyright-software
   Created 18 Aug 2008
   By Bert Bos, based on a design by Jason Cranford Teague
*/
.skip {display: none}

/* Fonts */
body {font: 1em/1.3 "Gill Sans MT", "Gill Sans", GillSans, sans-serif}
h1, h2, .banner {font-family: Futura, sans-serif}
blockquote.note {font: 1em cursive}

.banner a, .more a[href^=mailto], table, .track caption {font-size: 90%}
#digest ul :link, .translations :link, td :link {font-size: 100%}
:link, address {font-size: 120%}
h2, #digest ul {font-size: 170%}
h1 {font-size: 300%}

:link {line-height: 0.8}
h1, #digest .translations {line-height: 1}

.banner, .updated, .more {font-weight: bold}
th {font-weight: normal}

h1 em, .translations abbr {font-variant: normal}
h1 {font-variant: small-caps}

#digest li, th, .track caption, .translation-warning {font-style: italic}
address {font-style: normal}

.banner, .translations {text-transform: uppercase}
h1 {text-transform: lowercase}
p.translations abbr {text-transform: none}
abbr {font: inherit; letter-spacing: normal}

/* Colors & backgrounds */
body, .more a[href^=mailto]:after {color: black}
:link, :visited {color: #933}
h1, #goButton, .translation-warning, .translations, .translations a {color:#FFF}
h2, .endmatter {color: #4D6680 /*hsl(210,25%,40%)*/}
h1 em, #digest h2, address {color: #333}
.updated {color: #674}

html {background: url(bluegradient) bottom repeat-x #DBE7EB}/*hsl(196,29%,84%)*/
html {background: url(bluegradient) top repeat-x #99AACC}
body {background: none}
.status th {background-color: #EEE}
.wd, .pa {background-color: #FFFF00}
.lc, .alpha {background-color: #FFCC00}
.cr, .beta {background-color: #B9F71C}
.pr, .rc {background-color: #1BFFB5}
.rec, .fin {background-color: #53A9FF}
td + td + .wd {background-color: #FFFF71}
td + td + .lc {background-color: #FFE371}
td + td + .cr {background-color: #CFF76C}
td + td + .pr {background-color: #70FFD0}
td + td + .rec {background-color: #A9D3FF}
.obs {background-color: #E7B0B1}

#digest {background: url(whirl.png) 50% 100% no-repeat #ACBDCE}

.section {background: #F3F8FE}
#digest .section {background: none}
#goButton {background: url(roundedred.png) 50% 50% no-repeat}
#inputField {background: url(rounded.png) left no-repeat}
blockquote.note {background: #EE3}

a:link, a:visited {text-decoration: none}
a:hover {outline: solid thin invert}
a img, abbr {border: none}

/* Background tricks */
.banner:before, .endmatter:before {content: " "; display: block}
.banner {background: url(graygradient2.png) bottom repeat-x #BBB}
.banner:before {
  background: url(graygradient1.png) repeat-x;
  height: 22px;
  margin-bottom: -22px;
  padding-top: 0.5em;
}
.endmatter {
  background: url(darkgradient1.png) bottom repeat-x #9BC;
  min-height: 60px}
.endmatter:before {
  background: url(darkgradient2.png) repeat-x;
  height: 30px;
  padding-top: 1.2em;
  margin-bottom: -30px;
}

form {margin: 0}
p, table, li, ul {margin: 0 0 1.5em 0}
h2 {margin: 0}

body {margin: 0; padding: 0.75em 3% 1em 3%}
  /* text-align: justify; */		/* Jason's style is justified */

.banner {padding-bottom: 0.5em; overflow: hidden}
.banner ul, .banner li {display: inline; padding: 0}
.banner li {white-space: nowrap; margin: 0 0.4em}
.banner li:after {content: " "; white-space: normal} /* Line break point */
.banner img {vertical-align: middle; margin: 1px 0}
.search {float: right}
#inputField {margin-left: 0.4em}

#digest, .section, .banner, .endmatter, blockquote.note {
  margin: 0 0 0.65em 0;
  border: thin solid #999;
  border-style: solid none;
}

#digest {padding: 0.5em 1em; overflow: hidden}
blockquote.note {padding: 0.5em 1em 0.5em 3em; overflow: hidden}

h1 {margin: 0 0 0.5em 1.5em}
h1 em {
  text-shadow: 0em 0.1em 0.15em #444;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 0 -0.4em -1.5em;
}
#digest h2 {border-bottom: none; padding-bottom: 0; margin-bottom: 0}

h1, h2, #digest ul, table {text-align: left}
table.status td + td, table.status th + th {text-align: center}

/* High-level layout

   Here is what is intended:


   body {display: "a  a  a"
                  "@  .  b"
                  "c  c  c"
                   * 1em *}

   body > div:nth-of-type(2n) {position: b}
   .endmatter {position: c}
   #digest {position: a; display: "p.q" * 1em *}
   #digest > div  {position: p}
   #digest > div + div {position: q}
*/

.section {float: left; clear: left; width: 49%; padding: 0.8em 0}
.section:nth-of-type(2n) {float: right; clear: right}
#digest .section {border: none; padding: 0}
.section > * {margin-left: 7%; margin-right: 7%}

ul {padding: 0 0 0 1em}
ul.dated {list-style: none; padding: 0}

#digest ul {border-bottom: thin solid; list-style: none; padding: 0}
#digest li {border-top: thin solid; padding: 0.2em 0.5em}
#digest ul, #digest li {margin-bottom: 0}
#digest ul, #digest li {border-color: #DEF}

.endmatter {overflow: hidden; clear: both}
.endmatter p, .endmatter address {margin: 0 0.5em}
address img {float: left; margin: -1em 1em 0 -0.5em}

#goButton, #inputField {
  border: none;
  height: 1.4em;
  vertical-align: middle;
  min-height: 26px;
}
#goButton {
  margin-left: -13px;
  min-width: 99px;
  padding: 0 0.5em;
  text-transform: uppercase;
}
#inputField {max-width: 104px; padding: 0 13px 0 5px}

.section {position: relative}	/* To position Atom feed logo */
.feed {position: absolute; top: 0.8em; right: 0; width: 1.5em}
.section h2 {padding-right: 2em} /* Make room for Atom logo */

.translations, .more {text-align: right; margin-top: 0; margin-bottom: 0; clear: right}
.translations a + a + a::before {content: "| "}
.translation-warning {margin: 0.5em 0; text-align: right}

table {border-collapse: collapse}
td, th {padding: 0.15em 0.3em; border-bottom: dotted thin #BBB}
table.status {width: 86%}	/* = full width minus 7% margins */

blockquote.note::before {content: "\26A0\A0"; color: red; text-shadow:
  0em 0.1em 0.15em #444; float: left; font-size: 200%; line-height: 0.9;
  margin-left: -1.25em}

img {max-width: 100%}
.icon {float: right; clear: right; width: 4em; margin: 0 0 0.5em 0.5em}
div.figure {margin-top: 1.5em; margin-bottom: 1.5em; padding: 0 1em;
  text-align: center; font-style: italic}
div.figure p {margin: 0.5em}
.button {float: right; width: 4em; margin: 0 0 0.1em 0.5em}

body:not(:lang(en)) li:lang(en)::before {content: "[en] "; font-size: 80%}
body:not(:lang(en)) li:lang(en)::before {content: url(uk.png) " "}

pre {overflow: auto}