You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
651 lines
13 KiB
651 lines
13 KiB
/* [DRAFT in progress] Style for W3C Semantic Web Activity pages (based on WAI)
|
|
*
|
|
* Copyright � 2005 W3C� (MIT, ERCIM, Keio). All Rights Reserved.
|
|
* See http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright
|
|
*
|
|
* Author: W3C Team
|
|
* In Progress: July 2005
|
|
*/
|
|
|
|
/*
|
|
* This style assumes the following structure for the page.
|
|
* Parentheses () mean that there is expected to be an element, but the
|
|
* actual ID, class or element type is immaterial. Square brackets []
|
|
* meant that the element (with its children) may also be omitted.
|
|
*
|
|
* #controls
|
|
* li
|
|
* li
|
|
* #masthead
|
|
* p
|
|
* img
|
|
* [img]
|
|
* #tagline
|
|
* p
|
|
* [p]
|
|
* [#what]
|
|
* #nav
|
|
* h2 [will be hidden]
|
|
* #w3cnav
|
|
* #subhomenav >>>formerly #wainav
|
|
* #nav1
|
|
* #nav-static
|
|
* ...
|
|
* #main
|
|
* h1
|
|
* [#contents]
|
|
* [#announce]
|
|
* [.sidebar]
|
|
* (p)
|
|
* ...
|
|
* #footer
|
|
* h2 [will be hidden]
|
|
* (p)
|
|
* ...
|
|
*/
|
|
|
|
/*
|
|
* Basics
|
|
*/
|
|
|
|
body {
|
|
margin: 0 1em 1em 1em; /* 0 at the top, because of #controls */
|
|
padding: 0;
|
|
font-family: "Trebuchet MS", sans-serif; /* font family is an OPEN ISSUE */
|
|
background: white;
|
|
/* line-height: 135%; */ /* This seems to have created problems when rescaling large characters */
|
|
font-size: 90% /* font sizing is an OPEN ISSUE */
|
|
}
|
|
|
|
img {
|
|
border-style: none; /* Undo Mozilla UA style sheet */
|
|
vertical-align: baseline;
|
|
/* max-width: 100%; created problem with exhibit??? */ /* Scale images down on narrow windows */
|
|
}
|
|
form { /* Undo MacIE5 UA style sheet */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a:link {
|
|
color: #036;
|
|
}
|
|
a:visited {
|
|
color: #603;
|
|
}
|
|
|
|
/*
|
|
* The #controls element is designed to blend win with most UA skins.
|
|
* Content is inline, in black text on a gray background,
|
|
* and right-aligned.
|
|
*/
|
|
#controls {
|
|
display: block;
|
|
background: #CCC;
|
|
color: black;
|
|
text-align: right;
|
|
margin: 0 -1em 0 -1em;
|
|
padding: 0.2em;
|
|
border-bottom: 1px solid black;
|
|
font-family: Arial, sans-serif;
|
|
border-right: 2px solid #CCC; /* Avoids that Moz shows a horiz. scrollbar */
|
|
}
|
|
#controls * {
|
|
display: inline;
|
|
color: black;
|
|
text-decoration: none;
|
|
margin: 0 0 0 .33em;
|
|
padding: 0;
|
|
}
|
|
#controls a:hover,
|
|
#controls a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/*
|
|
* The #masthead element contains one or two logos. It has a white
|
|
* background (just like the #homenav child of the #nav menu further
|
|
* down). The #masthead element has a child (p) that contains the
|
|
* logos. This child is put in the left column, while the #masthead
|
|
* element itself (which is otherwise empty, but has an image
|
|
* background) is in the middle+right column.
|
|
*/
|
|
#masthead {
|
|
margin-left: 24%; /* The background to the right of the logos */
|
|
background: url(images/perspective.jpg) no-repeat;
|
|
/* background: url(images/perspective-48.jpg) no-repeat; */
|
|
}
|
|
*>#masthead {
|
|
background-position: 0.6em 0; /* Hide from WinIE */
|
|
}
|
|
#masthead p { /* For WinIE only */
|
|
margin: 0 0 0 -24%;
|
|
width: 24%;
|
|
background: white;
|
|
}
|
|
#masthead>p { /* Hide from WinIE */
|
|
margin: 0 0 0 -31.58%;
|
|
width: 31.58%;
|
|
}
|
|
#masthead p {
|
|
padding: 0 0.6em 0 0;
|
|
border-right: 1px solid #036;
|
|
white-space: nowrap;
|
|
min-height: 48px; /* Keep height if logos are scaled down */
|
|
}
|
|
#masthead img {
|
|
/* max-width: 49%; Scale logos down on narrow screens */
|
|
vertical-align: bottom; /* Avoid empty space for descenders below */
|
|
}
|
|
|
|
/*
|
|
* The #tagline has an orange background and a rounded top-right corner.
|
|
*
|
|
*/
|
|
|
|
#tagline {
|
|
display: block;
|
|
overflow: hidden;/* Let height include floats */
|
|
margin: 0;
|
|
padding: 0;
|
|
color: white;
|
|
background: url(images/tagbararc.png) top right no-repeat #C60;
|
|
min-height: 23px;/* Height of rounded corner */
|
|
}
|
|
#tagline/* HACK: hide from MacIE5 */ {
|
|
clear: both;
|
|
}
|
|
#tagline p {
|
|
margin: 0;
|
|
padding: 0.3em 20px 0.3em 0.3em; /* 20px makes room for rounded corner */
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/*
|
|
* #nav is the navigation area. The H2s are hidden.
|
|
*
|
|
* @@ need to cleanup markup for hierarchical nav & static-nav
|
|
* The HTML for the nav is generated by a script
|
|
* we need to coordinate any changes in the nav with the
|
|
* CSS, HTML, specific design requirements, and generating @@
|
|
*/
|
|
#nav {
|
|
clear: left;
|
|
float: left;
|
|
width: 24%;
|
|
margin: 0 2em 0 0;
|
|
padding: 0 0.3em; /* Make #nav same width as logos and tag */
|
|
color: #036;
|
|
font-size: 0.95em;
|
|
}
|
|
#nav h2 { /* hide visual rendering of h2 */
|
|
position: absolute;
|
|
left: -999px;
|
|
width: 990px;
|
|
}
|
|
#nav a,
|
|
#what a {
|
|
color: #036; /* WinIE doesn't support 'inherit' */
|
|
text-decoration: none;
|
|
}
|
|
#nav1 a,
|
|
#nav-static a {
|
|
display: block;
|
|
width: 100%; /* to get display:block to work in WinIE & not have lots of leading between <li>s */
|
|
}
|
|
|
|
#nav a:hover,
|
|
#nav a:focus,
|
|
#what a:hover,
|
|
#what a:focus,
|
|
#contents a:hover,
|
|
#contents a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
#nav img {
|
|
max-width: 100%; /* Scale down images on narrow screens */
|
|
}
|
|
|
|
#w3cnav {
|
|
margin: 0 -0.3em 0em -0.3em; /* -0.3em to undo the padding on #nav */
|
|
padding: 0.3em 0.3em 0.3em 0;
|
|
background: white;
|
|
border: none;
|
|
}
|
|
|
|
/*
|
|
* #subhomenav and #nav1 together make up the second menu.
|
|
*
|
|
* [@@remove #wainav after all transitoned to #subhomenav]
|
|
*/
|
|
|
|
#wainav, #subhomenav,
|
|
#nav1,
|
|
#nav-static {
|
|
color: #036;
|
|
background: #dfebf7;
|
|
border: 1px solid #036;
|
|
border-right: 2px solid #036;
|
|
margin: 0 -0.3em; /* -0.3em to undo the padding on #nav */
|
|
padding: 0;
|
|
/* font-weight: bold; */
|
|
position: relative; /* Create containing block for #current-icon */
|
|
}
|
|
#nav-static {
|
|
border-bottom: 2px solid #036;
|
|
}
|
|
#wainav, #subhomenav {
|
|
padding: 0.5em 0.1em 0.5em 0.3em;
|
|
font-weight: bold;
|
|
}
|
|
/* hack for WinIE only \*/
|
|
* html #w3cnav {
|
|
border-bottom: 1px solid #036;
|
|
}
|
|
/* End hack */
|
|
#nav-static {
|
|
padding-top: 0em;
|
|
padding-bottom: 0em;
|
|
margin-bottom: 1em;
|
|
}
|
|
#nav1 {
|
|
margin-bottom: 1em;
|
|
}
|
|
#nav1 ul,
|
|
#nav1 ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#nav1 li {
|
|
padding: 0.5em 0.1em 0.5em 1.5em;
|
|
border-bottom: 1px solid #036;
|
|
margin: 0; /* No bullet on first level */
|
|
list-style: none;
|
|
}
|
|
#nav1 li li {
|
|
margin: 0.2em 0.1em 0.2em 1.0em;
|
|
list-style: square;
|
|
padding: 0;
|
|
border-bottom: none;
|
|
background: transparent;
|
|
vertical-align: top; /* This has effect on the bullet in WinIE6... */
|
|
}
|
|
#nav-static li {
|
|
vertical-align: top; /* This has effect on the bullet in WinIE6... */
|
|
}
|
|
|
|
/* nav-head are without bullets, and in a different color */
|
|
/* long selector to be more specific than contradictory rule below */
|
|
#nav ol#nav1 .anno li li.nav-head,
|
|
#nav1 li li.nav-head {
|
|
list-style: none;
|
|
color:#369;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
/* anno [@@TODO: old code - needs cleanup]
|
|
* lists marked as 'anno' have a specific look
|
|
(no bullets, separating lines)
|
|
*/
|
|
#nav .anno {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-top: 0;
|
|
}
|
|
#nav ol#nav1 .anno li {
|
|
padding: 0.1em 0em 0.1em 0;
|
|
list-style: none;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
border-top: 1px solid #69c;
|
|
margin-left: 1em;
|
|
}
|
|
/* [@@ code needs cleanup]
|
|
* lower level lists under anno have default w/ bullet
|
|
*/
|
|
#nav ol#nav1 .anno li li {
|
|
margin: 0.1em 0em 0.1em 1.0em;
|
|
list-style: square;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
/* current-node [@@ code needs cleanup]
|
|
* Specific appearance of current-node
|
|
(second selector to make sure to override above rule of #nav ol li li)
|
|
*
|
|
*/
|
|
#current-node span.label,
|
|
#nav ol li li#current-node span.label,
|
|
#nav-static #current-node {
|
|
background-color:#fffaf5;
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
#current-node span.label,
|
|
#nav ol li li#current-node span.label {
|
|
display:block;
|
|
}
|
|
|
|
/* @@end needs cleanup worst section :) */
|
|
|
|
#nav1 .current-nav {
|
|
background: #eff5fb;
|
|
}
|
|
#current-icon { /* Show to the left of the item */
|
|
color: #c60;
|
|
position: absolute;
|
|
left: 0;
|
|
font-weight: bold;
|
|
font-size: 177%;
|
|
display: block; /* Redundant, except for WinIE6 */
|
|
}
|
|
/* hack for WinIE only \*/
|
|
* html #nav-static #current-icon {
|
|
left: -3em;
|
|
}
|
|
* html #current-icon {
|
|
vertical-align: bottom; /* otherwise moves text way low & cuts it off */
|
|
}
|
|
/* End hack */
|
|
.current-page { /* for >> not in #nav */
|
|
color: #c60;
|
|
font-weight: bold;
|
|
font-size: 177%;
|
|
}
|
|
|
|
/*
|
|
* Optional sidebar. Will be shown in left margin
|
|
* (underneath the #nav menus).
|
|
*/
|
|
.sidebar {
|
|
margin: 0 0 0 -13.5%; /* For WinIE */
|
|
width: 24%;
|
|
}
|
|
*>.sidebar {
|
|
margin: 0 0 0 -36.9863013698%; /* For others #nav/#main */
|
|
width: 31.58%;
|
|
}
|
|
.sidebar {
|
|
clear: left;
|
|
float: left;
|
|
padding: 0 0 0 0.3em;
|
|
font-size: 0.95em;
|
|
}
|
|
.sidebar h2 { /* hide visual rendering of h2 */
|
|
position: absolute;
|
|
left: -999px;
|
|
width: 990px;
|
|
}
|
|
/*
|
|
.sidebar a {
|
|
text-decoration: underline !important;
|
|
}
|
|
.sidebar a:visited {
|
|
color: #603 !important;
|
|
}
|
|
*/
|
|
|
|
/*
|
|
* #main contains the contents that differs from page to page.
|
|
*/
|
|
#main {
|
|
margin: 0 0 0 27%; /* 27% is bigger than 24%, the width of #nav */
|
|
}
|
|
*>#main { /* Hide from WinIE6 */
|
|
width: 73%; /* Redundant, but necessary for MacIE5 */
|
|
}
|
|
h1 {
|
|
margin: 3px 3px 3px 3px;
|
|
padding: 5px 5px 5px 5px;
|
|
/* font: bold 145% "Georgia", serif; */
|
|
}
|
|
|
|
.intro {
|
|
font-weight: bold;
|
|
/* background: #fffaf5; */
|
|
/* border: 1px solid #c60; */
|
|
}
|
|
|
|
/* #main h2,
|
|
#announce */ /* @@ testing @@ */
|
|
h2 {
|
|
/* color: #930; */
|
|
padding: 0.2em 0 0.2em 0;
|
|
border-bottom: 1px dashed #c60;
|
|
}
|
|
#main h2 {
|
|
font-size: 1.35em;
|
|
margin-top: 1.0em;
|
|
margin-bottom: 0;
|
|
}
|
|
#announce h2 {
|
|
font-size: 1.15em;
|
|
margin: 1em 0 0.5em 0;
|
|
}
|
|
#main h3 {
|
|
color: #930;
|
|
font-size: 1.15em;
|
|
font-family: "Trebuchet MS", sans-serif;
|
|
}
|
|
|
|
/*
|
|
* #what is a summary in a yellow box that looks as if it is attached
|
|
* to the #tagline. #contents are little in-page/anchor/target links. All
|
|
* three have the same width and are floated right.
|
|
*/
|
|
|
|
#what,
|
|
#announce,
|
|
#contents {
|
|
float: right;
|
|
clear: right;
|
|
margin: 0 0 1em 2em;
|
|
padding: 0 0.3em 0.5em 1em;
|
|
background: #fffaf5;
|
|
}
|
|
#what,
|
|
#contents {
|
|
width: 25%; /* need to explore issues */
|
|
}
|
|
#announce {
|
|
width: 25%; /* For WinIE */
|
|
background: #fffaf5; /* for Mozilla */
|
|
}
|
|
*>#announce {
|
|
width: 34.2465753425%; /* = 25% / width(#main) */
|
|
}
|
|
#what,
|
|
#contents {
|
|
line-height: 115%;
|
|
}
|
|
#what p {
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
margin: 1em 0 0.3em 0;
|
|
padding: 0;
|
|
border-bottom: none;
|
|
}
|
|
#contents h2 {
|
|
font-size: 1em;
|
|
margin: 1em 0 0.3em 0;
|
|
padding: 1em 0 0.3em 0;
|
|
border-bottom: none;
|
|
}
|
|
#what p:first-child,
|
|
#contents h2:first-child {
|
|
margin-top: 0;
|
|
}
|
|
#what p,
|
|
#contents h2 {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.1em;
|
|
}
|
|
x #what img,
|
|
x #announce img,
|
|
x #contents img
|
|
{
|
|
max-width: 100%; /* Scale down images on narrow screens */
|
|
}
|
|
#what ul {
|
|
font-size: 0.9em;
|
|
}
|
|
#what ul,
|
|
#announce ul,
|
|
#contents ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#announce li,
|
|
#contents li {
|
|
margin: 0 0 0.3em 0;
|
|
}
|
|
#announce p {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
/*
|
|
* #what is black on yellow.
|
|
*/
|
|
#what {
|
|
background: #FFC;
|
|
border: 1px solid #c60;
|
|
border-top: none;
|
|
}
|
|
#announce {
|
|
background: #fffaf5;
|
|
border: 1px solid #c60;
|
|
}
|
|
|
|
#what h2 { /* hide visual rendering of h2 */
|
|
position: absolute;
|
|
left: -999px;
|
|
width: 990px;
|
|
}
|
|
|
|
#what ul {
|
|
padding-left: 1.3em;
|
|
list-style: url(images/bullet-c60.gif);
|
|
}
|
|
#announce ul{
|
|
padding-left: 1.1em;
|
|
list-style: url(images/bullet-036.gif);
|
|
}
|
|
x #announce li,
|
|
x #what li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* #contents is orange on white.
|
|
*/
|
|
#contents {
|
|
background: #fffaf5;
|
|
border: 1px dashed #c60;
|
|
font-weight: bold;
|
|
color: #930;
|
|
font-size: 0.9em;
|
|
}
|
|
#contents h2 {
|
|
color: black;
|
|
padding-top: 0.5em;
|
|
margin-top: 0.5em;
|
|
}
|
|
#contents ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
#contents li {
|
|
display: inline; /* HACK: otherwise too much space in WinIE */
|
|
}
|
|
|
|
#contents a {
|
|
color: #930; /* WinIE6 doesn't support 'transparent' */
|
|
display: block; /* Make background clickable in many browsers*/
|
|
margin: 0.4em 0;
|
|
padding: 0 0 0 1.5em;
|
|
background: url(/Icons/downinpage.png) top left no-repeat;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
* The #footer contains the copyright
|
|
*/
|
|
#footer {
|
|
border-top: 1px solid #c60;
|
|
clear: both;
|
|
color: #333;
|
|
font-size: 0.9em;
|
|
}
|
|
#footer h2 { /* hide visual rendering of h2 */
|
|
position: absolute;
|
|
left: -999px;
|
|
width: 990px;
|
|
}
|
|
#footer a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/*
|
|
* spacing around lists
|
|
*/
|
|
dt {
|
|
margin-top: 0.5em;
|
|
}
|
|
li {
|
|
margin-bottom: 0.1em;
|
|
}
|
|
|
|
/*
|
|
* structure markup that is not needed in visual display
|
|
* (still want avaialble to screen readers and such)
|
|
*/
|
|
.no-display { /* hide visual rendering*/
|
|
position: absolute;
|
|
left: -999px;
|
|
width: 990px;
|
|
}
|
|
|
|
/*
|
|
* misc
|
|
*/
|
|
hr {
|
|
color: #369;
|
|
background-color: #369;
|
|
}
|
|
.highlight-version {
|
|
border: solid 1px #630;
|
|
color: #630;
|
|
background-color: #FFC;
|
|
font-weight: bold;
|
|
padding: 0.5em;
|
|
}
|
|
.float-right {
|
|
/* for images, put in img (doesn't disply in some browsers when in div or span) */
|
|
float: right;
|
|
}
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
.subtext {
|
|
font-size: 0.9em;
|
|
font-style: italic;
|
|
color: #333333;
|
|
}
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
.right-align {
|
|
text-align: right;
|
|
}
|
|
.border1c60 {
|
|
border-style: solid;
|
|
border-color: #C60;
|
|
border-width: 1px;
|
|
}
|