/* * This style sheet uses some properties (border-radius, box-shadow) * that are proposed in W3C Working Drafts but are not standard and * that therefore don't actually do anything at this time (i.e., in * 2007). It also uses some browser-specific properties (those * starting with a dash "-") that represent the experimental * implementations of those proposed properties. * * Using those properties (draft properties and browser-specific ones) * is risky. They may never become a standard at all, or they may get * a different meaning than in the current proposals. I'm taking that * risk because I think I will be able to update the style sheet * whenever the meaning changes... * * So, if you want to use this style sheet, please link to it rather * than copy it, so that you always have the latest version. Or, if * you copy it, remove the 'border-radius' and 'box-shadow' * properties. * * PS. The rgba() colors *are* standard, but few browsers support them * yet. That's why there are seemingly redundant 'url(white-25.png)' * and 'url(black-25.png)' values as well. * * Bert Bos, 20 Aug 2007 * Copyright 2007 W3C (MIT, ERCIM, Keio), * See: http://www.w3.org/Consortium/Legal/copyright-software */ html {padding: 0; font-family: Optima, Futura, sans-serif; font-size: larger; line-height: 1.6; margin: 4em 6em; text-align: justify} body {background: url(red-clouds.jpg) #713; color: white; max-width: 35em; margin: 0 auto; overflow-x: hidden} h1, h2 {margin: 2em 0 2em -43em; font-size: 2em; padding: 1em 1em 1em 43.5em; box-shadow: black 0 0.15em 0.25em; background: url(white-25.png); background: rgba(255,255,255,0.25); color: black; text-align: left} p {margin: 0} ul, ol {margin: 0; padding: 0} li {margin: 0 0 0 2em; padding: 0} body > p, body > ul, body > div.figure {margin: 0 -86em 0 0; background: url(black-25.png); background: rgba(0,0,0,0.25); padding: 0.5em 88em 0 1em} p + p {padding-top: 0} p + p:before {content: "\B6\A0"; color: #E90} :link, :visited {font-size: 1.3em; line-height: 1.231; text-decoration: none; color: #CCC} :visited:after {content: "\2714"; color: #E90} a:hover {background: #CF6; background: #E90; color: white} a:hover:after {color: inherit} ul.menu {position: fixed; top: 50%; right: 0; width: 17em; height: 10em; margin: -6em -18em 0 0; padding: 1em 1.5em; overflow: hidden; border-radius: 0.9em 0 0 0.9em; border: thin solid black; border-right: none; background: url(red-clouds.jpg) #803; transition: 0.2s; font-size: 0.9em; box-shadow: black 0.0em 0.3em 0.5em} ul.menu:before {content: "\AB"; margin-left: -1em} ul.menu:hover {height: 23em; margin: -12.5em 0 0 0; overflow: auto} ul.menu:hover:before {content: ""; content: none} ul.menu li {margin-right: 1.5em; padding: 0; text-align: right; list-style: none} a img {border: none} del {text-decoration: line-through} .yves {color: #de0} .coralie {color: #ed0} div.figure {text-align: center; font-style: italic; margin-left: 1em; margin-right: 1em} div.thumb {display: inline-block; font-size: 0.6em; width: 10em; text-align: center} div.thumb img {max-width: 100%} applet[align=left], img.illustration {float: left; margin: 0 1em 0.5em 0} @media all and (max-width: 45em) { html {margin: 2em 1em} h1 {margin-top: 1em; margin-bottom: 1em} } @media print { html {margin: 0; font-size: medium} body, h1, body > p, body > ul, body > div.figure {background: none} body {color: black} :link, :visited {color: #666} h1, h2 {border: thin solid black; margin: 2em 0; padding: 1em; background: #CCC} body > p, body > ul, body > div.figure {margin: 0; padding: 0.5em 1em 0 1em} ul.menu {display: none} applet {font-size: smaller; line-height: normal} } /* 'hover' is only a proposed media feature as of 2015 */ @media all and not (hover) { ul.menu {display: none} } .warning {display: block; background: hsla(0,0%,100%,0.2); border-radius: 0.6em; box-shadow: black 0 0.15em 0.25em; font-size: 1.1em; border: thin solid; padding: 0.5em}