/* [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;
      }