/* [DRAFT in progress] Style for W3C WAI pages
 *
 * Copyright  2005 W3C (MIT, ERCIM, Keio). All Rights Reserved.
 * See https://qwptcaq11h.proxynodejs.usequeue.com/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
	*						.nav-discover
	*      .translations
 *   ...
 * #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: #fffaf5;
color: black;
	line-height: 135%;
	font-size: 90%   /* font sizing is an OPEN ISSUE */
}

img {
    border-style: none;		/* Undo Mozilla UA style sheet */
    vertical-align: baseline;
    max-width: 100%;		/* 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%;
}
#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 */
	background: #005A9C;
	color: #fff;
}
#masthead img {
/*   max-width: 49%;   Scale logos down on narrow screens */
    vertical-align: bottom;	/* Avoid empty space for descenders below */
	background: #005A9C;
	color: #fff;
}

/*
 * 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 #930;
    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%;
    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]
 */

/*#nav-static */
#wainav, #subhomenav,
#nav1 {
    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;
    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;
}
/* current-node [@@ code needs cleanup]
 * Specific appearance of current-node
       (second selector to make sure to override above rule of #nav ol li li)
*
*/



/*#nav-static */
#current-node span.label,
#nav ol li  li#current-node span.label,
#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-node {
    position:relative; /* For Icon position */
}
#current-icon {			/* Show to the left of the item */
    color: #930;
    position: absolute;
    top:.25em;
    left: -1.25em;
    font-weight: bold;
	font-size: 177%;
    line-height:0;
    display: block;		/* Redundant, except for WinIE6 */
}
/* hack for WinIE only \*/
* html #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: #930;
    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 */
}

/* causes big open space in WinIE7
*>#main {			// Hide from WinIE6 //
    width: 73%;			// Redundant, but necessary for MacIE5 //
}
*/

h1 {
    margin: 0 0 0 0;
    padding: 1.3em 0 0 0;
    font: bold 145% "Georgia", serif;
}
h1 .subtitle {
font-size: 85%;
}



/* #main h2,
#announce */   /* @@ testing @@ */
h2 {
    color: #930;
    border-bottom: 1px dashed #930;
}
#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.25em;
font-family: "Trebuchet MS", sans-serif;
}
#main h4 {
    font-size: 1.15em;
font-family: "Trebuchet MS", sans-serif;
}
#main h5 {
    font-size: 1.05em;
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;
}
#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;
}
#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 #930;
    border-top: none;
}
#announce {
    background: #fffaf5;
    border: 1px solid #930;
}

#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);
}

/*
 * #contents is orange on white.
 */
#contents {
    background: #fffaf5;
    border: 1px dashed #930;
    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 #930;
    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;
}
#footer .cc {
	border: 9px solid #fffaf5;
	float: left;
}
.copyrightcc {
	line-height:normal;
	}

/*
 * spacing around lists
*/
dt {
	margin-top: 0.5em;
}
li {
	margin-bottom: 0.1em;
}
ul.listspaced li {
	margin-bottom: 1em;
	}
ol.listspaced li {
	margin-bottom: 1em;
	}
.listtight {
	margin-bottom: 0;
	}
.listintro, listintrop {  /* class on the <p> for *no* space between it and list */
	padding-bottom: 0;
	margin-bottom: 0;
	}
.listafter {         /* class on the <p> for little space between it and list */
	padding-top: 0;
	margin-top: 0.5em;
	}
.listwithp, .listafterpul { /* class on the <ul> */
	padding-top: 0;
	margin-top: 0;
	}

/*
 * 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
*/

#skipwrapper {width: 1px; height: 1px; overflow: hidden; float: right}
hr {
	color: #369;
	background-color: #369;
}
.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: #930;
	border-width: 1px;
      }
.changed {
	background: #FFFFCC;
}
.highlight-version {
	border: solid 1px #630;
	color: #630;
	background-color: #cfc;
	font-weight: bold;
	padding: 0.5em;
}
.termref {
          text-decoration:none;
          color:#000000;
		  padding-bottom:0; margin-bottom:0;
          border-bottom:dashed #808080 1px; /* de-emphasize glossary links */
          background-color: transparent;
          }
a.termref:link {
        color:#000000;
        background : inherit;
        }

a.termref:hover, .termref:active, a.termref:focus {
          color:#0000CC;
          background : inherit;
          border-bottom:solid #0000CC 1px; /* de-emphasize glossary links */
      }

.subhead { font-size: 0.75em; display: block; }


/* ********************* for nav redesign 2011-03March **************** */
.nav-discover, #nav .translations {
    margin-left: -0.3em; /*-0.3em to undo the padding on #nav */
    margin-right: -0.3em; /*-0.3em to undo the padding on #nav */
}
.nav-discover {
    background: #FFC;
    border: 1px solid #930;
	padding-left: 31px;
	padding-right: 5px;
	font-style: italic;
	}
.nav-discouver a{
	text-decoration: underline;
	}
.nav-discover h2 {			/* hide visual rendering of h2 */
    position: absolute;
    left: -999px;
    width: 990px;
}
#nav .translations {
	padding-left:32px;
	}

/* ************ links back to top *************** */

p.totop {
  display: block;
  text-align: right;
  background-color:#eff5fb;
}
p.totop a {
  background: url(../Icons/topofpage.png) left no-repeat;
  padding-left: 1em;
}

/* ************** contribute box and buttons ************* */
.contribute {
  box-sizing: border-box;
  border: 1px solid #666 !important;
  background-color: #fff7f0;
  border-radius: .5em;
  padding: 1em;
  margin: 1em auto;
  width: 90%;
}
.contribute .heading {
  color: #333333 !important;
  border-bottom: none !important;
  font-weight: bold;
  font-size: 1em;
  margin: 0 !important;
  padding: 0 !important;
}
.contribute .heading + p {
  margin-top: 0.5em;
}
.contribute .buttons {
  text-align: center;
  margin-top: 1em;
  padding: .5em 0 0;
  border-top: 1px solid #ccc;
  line-height: 300%;
}
.btn {
  background: linear-gradient(to bottom, #e6e6e6, #ccc);
  color: #333;
  font-weight: normal;
  font-size: 1em;
  line-height: 244.44444%;
  padding: .5em .75em;
  text-decoration: none;
  white-space: nowrap;
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  border-radius: .25em;
}
.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none;
  background: linear-gradient(to bottom, #ccc, #b3b3b3);
}

/* *** misc *** */
.quiet {color: #4f4f4f;}
.quiet a {color: #4f4f4f;}

/* ex-col jumping with hover/focus fix */
.f_panelHead {
   border-bottom: solid transparent;
}
.f_panelHead.fs_hover, .f_panelHead.fs_focus {
   border-bottom: solid currentColor;
}
.f_panelHead.fs_selected {
   border-bottom: solid currentColor;
}
.ctrlcmd {
   color: #963;
}
/* /end ex-col jumping with hover/focus fix */