w3c-blue.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. /* w3c-blue.css
  2. Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
  3. W3C liability, trademark, document use and software licensing
  4. rules apply, see:
  5. http://www.w3.org/Consortium/Legal/copyright-documents
  6. http://www.w3.org/Consortium/Legal/copyright-software
  7. */
  8. body
  9. {
  10. margin: 0 0 0 0;
  11. padding: 0 0 0 0;
  12. width: 100%;
  13. height: 100%;
  14. color: black;
  15. background-color: white;
  16. font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif;
  17. font-size: 14pt;
  18. }
  19. div.slide.titlepage {
  20. text-align: center;
  21. }
  22. div.slide.titlepage h1 {
  23. padding-top: 40%;
  24. }
  25. div.slide {
  26. z-index: 20;
  27. margin: 0 0 0 0;
  28. padding: 0;
  29. border-width: 0;
  30. top: 0;
  31. bottom: 0;
  32. left: 0;
  33. right: 0;
  34. line-height: 120%;
  35. background-color: transparent;
  36. }
  37. div.background {
  38. z-index: 1;
  39. position: absolute;
  40. vertical-align: bottom;
  41. left: 0;
  42. right: 0;
  43. top: 0;
  44. bottom: auto;
  45. height: 4.1em;
  46. padding: 0 0 0 0.2em;
  47. margin: 0 0 0 0;
  48. border-width: 0;
  49. background-color: #728ec2;
  50. }
  51. div.background img {
  52. height: 4em;
  53. }
  54. /* this rule is hidden from IE which doesn't support + selector */
  55. div.slide + div[class].slide { page-break-before: always;}
  56. div.slide h1 {
  57. padding-left: 3em;
  58. padding-right: 3em;
  59. padding-top: 0.1em;
  60. margin-bottom: 0.8em;
  61. margin-top: -0.05em;
  62. margin-left: 0;
  63. margin-right: 0;
  64. min-height: 2.3em;
  65. color: white;
  66. height: 2.2em;
  67. font-size: 160%;
  68. line-height: 1.1em;
  69. }
  70. div.slide h1 a {
  71. color: white;
  72. text-decoration: none;
  73. }
  74. div.slide h1 a:link {
  75. color: white;
  76. text-decoration: none;
  77. }
  78. div.slide h1 a:visited {
  79. color: white;
  80. text-decoration: none;
  81. }
  82. div.slide h1 a:hover {
  83. color: white;
  84. text-decoration: underline;
  85. }
  86. div.slide h1 a:active {
  87. color: red;
  88. text-decoration: underline;
  89. }
  90. #head-icon {
  91. margin-top: 0.5em;
  92. margin-bottom: 0;
  93. margin-left: 0;
  94. margin-right: 1em;
  95. background: #728ec2;
  96. border-width: 0;
  97. height: 3em;
  98. max-width: 3em;
  99. z-index: 2;
  100. float: left;
  101. }
  102. #head-logo {
  103. margin: 0;
  104. margin-top: 0.25em;
  105. padding-top: 0.25em;
  106. padding-bottom: 0.2em;
  107. padding-left: 0;
  108. padding-right: 0;
  109. height: 3.2em;
  110. width: 4.8em;
  111. float: right;
  112. z-index: 2;
  113. background: #728ec2;
  114. }
  115. #head-logo-fallback {
  116. margin: 0;
  117. padding: 0;
  118. margin-top: -0.8em;
  119. width: 4.8em;
  120. float: right;
  121. z-index: 2;
  122. }
  123. /* the next two classes support vertical and horizontal centering */
  124. div.vbox {
  125. float: left;
  126. height: 40%;
  127. width: 50%;
  128. margin-top: -240px;
  129. }
  130. div.hbox {
  131. width:60%;
  132. margin-top: 0;
  133. margin-left:auto;
  134. margin-right:auto;
  135. height: 60%;
  136. border:1px solid silver;
  137. background:#F0F0F0;
  138. overflow:auto;
  139. text-align:left;
  140. clear:both;
  141. }
  142. /* styling for named background */
  143. div.background.slanty {
  144. z-index: 2;
  145. bottom: 0;
  146. height: 100%;
  147. background: transparent;
  148. }
  149. div.background.slanty img { margin-top: 4em; width: 100%; height: 80% }
  150. /* the following makes the pre background translucent */
  151. /* opacity is a CSS3 property but supported by Mozilla family */
  152. /* filter is an IE specific feature that also requires width */
  153. div.slide.slanty pre {
  154. width: 93%; /* needed for IE filter to work */
  155. opacity: .8;
  156. filter: alpha(opacity=80);
  157. }
  158. img.withBorder {
  159. border: 2px solid #c60;
  160. padding: 4px;
  161. }
  162. li pre { margin-left: 0; }
  163. @media print { pre { font-size: 60% } }
  164. blockquote { font-style: italic }
  165. img { background-color: transparent }
  166. p.copyright { font-size: smaller }
  167. .center { text-align: center }
  168. .footnote { font-size: smaller; margin-left: 2em; }
  169. a img { border-width: 0; border-style: none }
  170. a:visited { color: navy }
  171. a:link { color: navy }
  172. a:hover { color: red; text-decoration: underline }
  173. a:active { color: red; text-decoration: underline }
  174. a {text-decoration: none}
  175. .navbar a:link {color: white}
  176. .navbar a:visited {color: yellow}
  177. .navbar a:active {color: red}
  178. .navbar a:hover {color: red}
  179. ul { list-style-type: square; }
  180. ul ul { list-style-type: disc; }
  181. ul ul ul { list-style-type: circle; }
  182. ul ul ul ul { list-style-type: disc; }
  183. li { margin-left: 0.5em; margin-top: 0.5em; }
  184. li li { font-size: 85%; font-style: italic }
  185. li li li { font-size: 85%; font-style: normal }
  186. div dt
  187. {
  188. margin-left: 0;
  189. margin-top: 1em;
  190. margin-bottom: 0.5em;
  191. font-weight: bold;
  192. }
  193. div dd
  194. {
  195. margin-left: 2em;
  196. margin-bottom: 0.5em;
  197. }
  198. p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
  199. margin-left: 1em;
  200. margin-right: 1em;
  201. }
  202. p.subhead { font-weight: bold; margin-top: 2em; }
  203. div.cover p.explanation {
  204. font-style: italic;
  205. margin-top: 3em;
  206. }
  207. .smaller { font-size: smaller }
  208. td,th { padding: 0.2em }
  209. ul {
  210. margin: 0.5em 1.5em 0.5em 1.5em;
  211. padding: 0;
  212. }
  213. ol {
  214. margin: 0.5em 1.5em 0.5em 1.5em;
  215. padding: 0;
  216. }
  217. ul { list-style-type: square; }
  218. ul ul { list-style-type: disc; }
  219. ul ul ul { list-style-type: circle; }
  220. ul ul ul ul { list-style-type: disc; }
  221. li { margin-left: 0.5em; margin-top: 0.5em; }
  222. li li { font-size: 85%; font-style: italic }
  223. li li li { font-size: 85%; font-style: normal }
  224. ul li {
  225. list-style: none;
  226. margin: 0.1em 0em 0.6em 0;
  227. padding: 0 0 0 40px;
  228. background: transparent url(../graphics/bullet.png) no-repeat 5px 0.3em;
  229. line-height: 140%;
  230. }
  231. /* workaround IE's failure to support background on li for print media */
  232. @media print { ul li { list-style: disc; padding-left: 0; background: none; } }
  233. ol li {
  234. margin: 0.1em 0em 0.6em 1.5em;
  235. padding: 0 0 0 0px;
  236. line-height: 140%;
  237. }
  238. li li {
  239. font-size: 85%;
  240. font-style: italic;
  241. list-style-type: disc;
  242. background: transparent;
  243. padding: 0 0 0 0;
  244. }
  245. li li li {
  246. font-size: 85%;
  247. font-style: normal;
  248. list-style-type: circle;
  249. background: transparent;
  250. padding: 0 0 0 0;
  251. }
  252. li li li li {
  253. list-style-type: disc;
  254. background: transparent;
  255. padding: 0 0 0 0;
  256. }
  257. /* rectangular blue bullet + unfold/nofold/fold widget */
  258. /*
  259. setting class="outline on ol or ul makes it behave as an
  260. ouline list where blocklevel content in li elements is
  261. hidden by default and can be expanded or collapsed with
  262. mouse click. Set class="expand" on li to override default
  263. */
  264. ol.outline li:hover { cursor: pointer }
  265. ol.outline li.nofold:hover { cursor: default }
  266. ul.outline li:hover { cursor: pointer }
  267. ul.outline li.nofold:hover { cursor: default }
  268. ol.outline { list-style:decimal; }
  269. ol.outline ol { list-style-type:lower-alpha }
  270. ol.outline li.nofold {
  271. padding: 0 0 0 20px;
  272. background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.3em;
  273. }
  274. ol.outline li.unfolded {
  275. padding: 0 0 0 20px;
  276. background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.3em;
  277. }
  278. ol.outline li.folded {
  279. padding: 0 0 0 20px;
  280. background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.3em;
  281. }
  282. ol.outline li.unfolded:hover {
  283. padding: 0 0 0 20px;
  284. background: transparent url(../graphics/fold.gif) no-repeat 0px 0.3em;
  285. }
  286. ol.outline li.folded:hover {
  287. padding: 0 0 0 20px;
  288. background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.3em;
  289. }
  290. ul.outline li.nofold {
  291. padding: 0 0 0 52px;
  292. background: transparent url(../graphics/bullet-nofold-dim.gif) no-repeat 5px 0.3em;
  293. }
  294. ul.outline li.unfolded {
  295. padding: 0 0 0 52px;
  296. background: transparent url(../graphics/bullet-fold-dim.gif) no-repeat 5px 0.3em;
  297. }
  298. ul.outline li.folded {
  299. padding: 0 0 0 52px;
  300. background: transparent url(../graphics/bullet-unfold-dim.gif) no-repeat 5px 0.3em;
  301. }
  302. ul.outline li.unfolded:hover {
  303. padding: 0 0 0 52px;
  304. background: transparent url(../graphics/bullet-fold.gif) no-repeat 5px 0.3em;
  305. }
  306. ul.outline li.folded:hover {
  307. padding: 0 0 0 52px;
  308. background: transparent url(../graphics/bullet-unfold.gif) no-repeat 5px 0.3em;
  309. }
  310. li ul.outline li.nofold {
  311. padding: 0 0 0 21px;
  312. background: transparent url(../graphics/nofold-dim.gif) no-repeat 5px 0.3em;
  313. }
  314. li ul.outline li.unfolded {
  315. padding: 0 0 0 21px;
  316. background: transparent url(../graphics/fold-dim.gif) no-repeat 5px 0.3em;
  317. }
  318. li ul.outline li.folded {
  319. padding: 0 0 0 21px;
  320. background: transparent url(../graphics/unfold-dim.gif) no-repeat 5px 0.3em;
  321. }
  322. li ul.outline li.unfolded:hover {
  323. padding: 0 0 0 21px;
  324. background: transparent url(../graphics/fold.gif) no-repeat 5px 0.3em;
  325. }
  326. li ul.outline li.folded:hover {
  327. padding: 0 0 0 21px;
  328. background: transparent url(../graphics/unfold.gif) no-repeat 5px 0.3em;
  329. }
  330. img {
  331. image-rendering: optimize-quality;
  332. }
  333. img.withBorder {
  334. border: 2px solid #c60;
  335. padding: 4px;
  336. }
  337. div.header {
  338. position: absolute;
  339. z-index: 2;
  340. left: 0;
  341. right: 0;
  342. top: 0;
  343. bottom: auto;
  344. height: 2.95em;
  345. width: 100%;
  346. padding: 0 0 0 0;
  347. margin: 0 0 0 0;
  348. border-width: 0;
  349. border-style: solid;
  350. background-color: #005A9C;
  351. border-bottom-width: thick;
  352. border-bottom-color: #95ABD0;
  353. }
  354. div.footer {
  355. position: absolute;
  356. z-index: 80;
  357. left: 0;
  358. right: 0;
  359. top: auto;
  360. bottom: 0;
  361. height: 3.5em;
  362. margin: 0;
  363. font-size: 80%;
  364. font-weight: bold;
  365. padding-left: 1em;
  366. padding-right: 0;
  367. padding-top: 0.3em;
  368. padding-bottom: 0;
  369. color: #003366;
  370. background-color: #95ABD0;
  371. }
  372. /* this is a hack to hide property from IE6 and below */
  373. div[class="footer"] {
  374. position: fixed;
  375. }
  376. #hidden-bullet {
  377. visibility: hidden;
  378. display: none;
  379. }
  380. div.slide.cover {
  381. color: white;
  382. background-color: #728ec2;
  383. padding-top: 0;
  384. padding-right: 0;
  385. padding-left: 3em;
  386. height: 100%;
  387. }
  388. div.slide.cover h1 {
  389. margin: 0;
  390. padding: 0.5em;
  391. color: white;
  392. height: auto;
  393. }
  394. div.slide.cover h2 {
  395. color: white;
  396. }
  397. div.slide.cover a {
  398. color: white;
  399. }
  400. div.slide.cover a:visited { color: white }
  401. div.slide.cover a:link { color: white }
  402. div.slide.cover a:hover { color: yellow; text-decoration: underline }
  403. div.slide.cover a:active { color: yellow; text-decoration: underline }
  404. div.slide.cover a:hover, div.slide.cover a:active {
  405. color: yellow; text-decoration: underline;
  406. }
  407. div.slide.cover img.cover {
  408. margin: 0 0 0 0;
  409. float: right;
  410. padding-bottom: 4em;
  411. width: 50%;
  412. overflow: hidden;
  413. }
  414. div.slide.cover a:hover, div.slide.cover a:active {
  415. color: yellow; text-decoration: underline;
  416. }
  417. /* for Bert as an ardent user of the old W3C slidemaker tool */
  418. div.comment { display: none; visibility: hidden }
  419. @media print {
  420. div.slide h1 { background: transparent; color: black }
  421. div.slide.cover { background: transparent; color: black }
  422. div.slide.cover h1 { background: transparent; color: black }
  423. div.comment { display: block; visibility: visible }
  424. }