/* Four sections to this file: General, Page Top, Content, and BottomBar */
/* Selectors are in order of appearance and 'nestedness', and properties, of decreasing effect on positioning and dimensions (approximately) */

/* //    General    // */
html > img {						/* autoscroll (mouse scroll) image override (works only for Firefox) */
		width: 0 !important;		/* sets the width of the default image to zero (else: would simply superimpose the second) */
		height: 28px !important;	/* height of cutom image */
		padding-left: 28px !important;	/* leaving room for the custom image: width of the custom image */
		background: url(Images/autoscrollimg.png);
	}

body { 
		min-width: 700px;							/* apparently, "this prevents negative (i.e. inaccessible) left-margins in narrow browser windows when using Navigator 6+/Mozilla on Win32" (http://css-discuss.incutio.com/?page=CenteringBlockElement) */
		margin: 0;
		padding: 0;									/* space below BottomBar comes from BB */
		text-align: center;							/* (incorrectly) centers the #page block in IE; needed as some versions do not recognise 'margin: auto;' */
		font-size: 80%;								/* see http://www.thenoodleincident.com/tutorials/typography/index.html */
		font-family: Verdana, Arial, Helvetica, Tahoma, Geneva, sans-serif;
		background-color: #ffffff;
		color: #2e2e2e;								/* slightly off-black for a feeling of lightness */
		scrollbar-arrow-color: #dfe8ff;				/* same as link underline; is the MXT highlighting colour */
 		scrollbar-base-color: #dfe8ff;
  		scrollbar-dark-shadow-color: #5e5eff;		/* same as copyrigth text in BottomBar; is the MXT shading colour */
   		scrollbar-track-color: #ffffff;
    	scrollbar-face-color: #a0bbff;				/* same as NavBar and BB; is the MXT colour */
	 	scrollbar-shadow-color: #5e5eff;
	  	scrollbar-highlight-color: #a0bbff;
	   	scrollbar-3d-light-color: #a0bbff; 
	}


/* //    Page Top    // */

#skip a,
#skip a:hover,
#skip a:visited {
	position: absolute;
	left: 0;
	top: -500px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	}

#skip a:active,
#skip a:focus {
	position:static;
	width:auto;
	height:auto;
	background-color: #a0bbff;
	color: #ffffff;
	}

#header {
		width: 700px;
		height: 104px;
		margin: 0;
		padding: 0;
		overflow: hidden;			/* since IE adds a bottom margin to the image */
	}

#header a {
		border-bottom: 0;
	}

#header a img {
		width: 700px;
		height: 104px;
	}





















#TopBar {			/*logo*/
		width: 700px;
		height: 104px;
		padding:0;
		margin:0;
	border:1px solid blue;
	}

#TopBar img {
		border:0;
	}

#TopBar {/*		position: relative;
		top: 0;								/* if != 0, space above BB will not be equal to 'margin-top' of BB! */
/*		left: 0;*/
				clear: both;	/* ##### */
			/*	margin-left:auto; 
				margin-right: auto;*/

		margin:0;
		padding:0;
		width:700px;
/*		border: 1px solid lime;*/ 
/*		overflow:auto;
		outline:0;*/
	}

#TopBar a img {
		display: block;				/* #### */
		width: 700px;
		height: 104px;
		margin: 0;
		padding: 0;
		border:0;
	}

#NavBar {
		position: absolute;
		top: 107px;		/* = 104 (topbar height) + 3 (padding) */
		width:700px;
		background-color: #a0bbff;
		color: #ffffff;
		z-index: 20;		/* else, links not clickable in FireFox */
	}

#NavBar table {
		width: 700px;
		padding: 0;
/*border: 1px black solid;*/
	}

#NavBar table {	/* , #NavBar table tr, #NavBar table tr td */
		margin-top: 0px;	/* to avoid gap when zooming */
		vertical-align: middle;
		max-height: 14px;
		line-height: 14px;	/*trying to avoid table size changes in zooming (CTRL+scroll) */
	}

#NavBar td img {
		width: 10px;			/* applies to spacer */
	}

#NavBar td.new,
#NavBar td.soon {
		vertical-align: middle;
		font-size: 9px;
/*		word-spacing: -.1em;			/* ###### */
		color: #ff0000;
		font-weight: bold;
		text-align: right;
	}

#NavBar td.soon {							/* for link to Products in languages other than French and English */
		color: #bf0000;						/* same color as ".unavailable" in sitemap */
	}

#NavBar a img {								/* applies to the earth image */
		display: block;						/* prevents the image from being underlined on hover(problem in Firefox): http://archivist.incutio.com/viewlist/css-discuss/81687---but will prevent centering from happening */
		float: left;
		height: 14px;
		width: 14px;
		padding: 0;
		margin-right: 5px;
		vertical-align: middle;
	}

#NavBar a.mlink:link,								/* 'm': for 'main'; 'mlink' is not the prettiest name there is... */
#NavBar a.mlink:visited,
#NavBar a.mlinksoon:link,
#NavBar a.mlinksoon:visited {
		border-bottom: 0;
		line-height: 1.3;
		font-size: 12px;
		color: #ffffff;
	}

#NavBar a.mlink:hover,
#NavBar a.mlinksoon:hover {								/* always respect order: link, visited, active, hover */
		background-color: rgb(18,176,0);
		text-decoration: underline overline;
		border-bottom: 0;
	}

#NavBar a.mlinksoon:link,								/* 'm': for 'main'; 'mlink' is not the prettiest name */
#NavBar a.mlinksoon:visited {
		color: #5e5eff/*#E8E8E8*/;
	}

#NavBar a.mlinksoon:hover {								/* always respect order: link, visited, active, hover */
		background-color: #dfe8ff;/*#ffffff;/*rgb(18,176,0);*/
	}

#NavBar a.mlinkcurrent:link,
#NavBar a.mlinkcurrent:visited {
		position: relative;
		padding: 1px;
		border: 1px solid #5e5eff;
		line-height: 1.3;
		font-size: 12px;
		font-weight: bold;
		color: #ffffff;
/*		border-bottom: 1px solid #5e5eff;*/
	}

#NavBar a.mlinkcurrent:hover {
		background-color: rgb(18,176,0);
		text-decoration: underline overline;
/*		border-bottom: 0;*/
	}

#NavBar td a.langlink:link,
#NavBar td a.langlink:visited,
#NavBar td a.langlink:link span,
#NavBar td a.langlink:visited span {
		font-size: 12px;
		color: #dfe8ff;				/* same as regular links' bottom-border (when not hovered) */
		border-bottom: 0px black solid;
		vertical-align: middle;
	}

#NavBar td a.langlink:link,
#NavBar td a.langlink:visited {
		display: block;
	}

#NavBar td a.langlink:hover span {
/*		background-color: #faa31f;*/
		vertical-align: middle;
		text-decoration: underline overline;
	}

table#LanguagesForNoscript td a {						/* more table#LanguagesForNoscript below */
		display: block;
		border-bottom: 0;
		vertical-align: middle;
		color: #ffffff;
		font-size: 11px;
	}

table#LanguagesForNoscript td a:link,
table#LanguagesForNoscript td a:visited {
		color: rgb(18,176,0);							/* same as a.mlink background-color */
	}

table#LanguagesForNoscript td a:hover span {			/* on hover anywhere on the link (flag, space or text), only the text's background changes! */
		border-bottom: 0;
		vertical-align: middle;
		text-decoration: underline overline;
		background-color: rgb(18,176,0);
		color: #ffffff;
	}

table#LanguagesForNoscript td {
		width: 116px;									/* = floor(700/6) */
		padding: 2px 10px 1px 10px;
		border-top: 1px solid #91AFFF;/*#82A4FF*/
		border-left: 1px solid #91AFFF;/*#82A4FF*/
		border-bottom: 1px solid #C1D2FF;
		border-right: 1px solid #C1D2FF;
		vertical-align: middle;
		text-align: center;
		background-color: #dfe8ff;						/* same as link bottom-border (not hover) */
	}

table#LanguagesForNoscript td img {						/* applies to the flags */
		display: block;									/* prevents the image from being underlined on hover (problem in Firefox); http://archivist.incutio.com/viewlist/css-discuss/81687 */
		float: left;
		width: 16px;
		height: 12px;
		vertical-align: middle;
		margin-right: 3px;
		margin-top: 1px;
		border-bottom: 1px solid #97B4FF;
		border-right: 1px solid #97B4FF;	
	}
































#dropmenudiv {					/* used solely in dropMenu.js; is the box that contains the menu items */
		position: absolute;
		padding: 0;
		width:4em;
		border: 1px solid black;
		line-height: 1.7;
		vertical-align: middle;
		text-align: left;
		font-size: 0.9em;
		font-weight: normal;
		z-index: 100;
	}

#dropmenudiv a {
		display: block;
		border-bottom: 0;
		vertical-align: middle;
		color: #ffffff;
		font-size: 0.95em;
	}

#dropmenudiv a:hover {			/* on hover anywhere on the link (flag, space or text), only the text's background changes! */
		border-bottom: 0;
		vertical-align: middle;
		background-color: rgb(18,176,0);				/* lively, refreshing green */
		color: #ffffff;
	}

#dropmenudiv img {										/* applies to the flags */
		display: block;									/* prevents the image from being underlined on hover (problem in Firefox); http://archivist.incutio.com/viewlist/css-discuss/81687---but will prevent from centering (if such a thing were sought) */
		float: left;
		margin: 3px 4px 1px 2px;						/* centers */
	}

#navbox,
#ersatzmenu {							/* the navbar's and ersatz menu's structure is taken from http://css.maxdesign.com.au/listamatic/horizontal23.htm */
	width: 700px;
	border-top: 1px solid #a0bbff;		/* purposefully thinner than bottom-border */
	overflow: auto;						/* is the solution: height will stretch to that of the longest contained element, even if it be the floated picturebox)! see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ and the comments */
	border-bottom: 1px solid #a0bbff;	/* apparently, is needed "to trigger the bottom of the container expanding down below the float[]"; note that the color is the color of the page background! */
	margin: 0;				/* would subtract 1px to compensate for border if it were possible! */
	outline: 0;							/* apparently, "right-clicking a div with overflow:auto; results in a border appearing around the element"; this apparently fixes it */
	tabindex: -1;						/* usually prevents (maybe not in newer versions of Firefox) the div from being accessible by tabbing and showing a border when focused */
	padding: 0;
	background-color: #a0bbff;
	text-align: center;
}

#navbox ul,
#ersatzmenu ul {
		margin: 0;
		padding: 0;
	}

#navbox ul li,
#ersatzmenu ul li {
		display: inline;
		color: #ffffff;
	}

#navbox ul li a,
#navbox ul li .new,
#navbox ul li .soon,
#ersatzmenu ul li a {						/* see below, too */
		float: left;
		min-width: 0.3em;
		padding: 0.2em 14px 0.2em 14px;		/* seems to vertically center it; left and right: narrowed in a script called from header */
		border-bottom: 0;
		background-color: #a0bbff;
		color: #ffffff;
/*	border: 1px solid lime;*/
	}

#navbox ul li a:hover,
#ersatzmenu ul li a:hover {
		background-color: #95ACFF;/*#7F8DFF/*#B5CAFF*/
	}
	
#navbox ul li#here a {
		background-color: #B5CAFF/*#5E5EFF*/;
		font-weight: bold;
		border-left: 1px #5e5eff solid;
		border-right: 1px #5e5eff solid;
	}

#navbox ul li#here a:hover {
		background-color: #ABC3FF/*#5E5EFF*/;
		
	}

#navbox ul li#menu a,
#navbox ul li#menu a:hover {
		display: none;						/* for JS-disabled browsers */
		float: right;
		position: relative;					/* needed because the image is absolutely positioned and the reference of an a. p. element is its "containing block, which is the first ancestor element that does not have 'position: static'"; one should perhaps be aware, however, that, in Netscape 4.x, "if a relative or absolutely positioned element is nested inside another relative or absolutely positioned element, any further application of CSS is broken - no properties will be applied" (http://www.eskimo.com/~bloo/indexdot/css/properties/classify/position.htm)*/
		top: 0;
		right: 0;
		padding-left: 27px;					/* = 16 (width of image) + 5 (space between image and text) + 6 (= padding-left or -right of other a's, as set with JS; space left of image) */
		overflow: hidden;
		outline: 0;							/* apparently, "right-clicking a div with overflow:auto; results in a border appearing around the element"; this apparently fixes it */
	}

#navbox ul li#menu a:hover {
		background-color: #B5CAFF;
	}


#navbox ul li .new,
#navbox ul li .soon {
		font-size: 0.75em;
		vertical-align: middle;
		text-align: right;
		font-weight: bold;
		color: #ff0000;
	}

#navbox ul li .soon {
		color: #bf0000;	
	}

#navbox ul li div.new,
#navbox ul li div.soon {						/* when 'new' or 'soon' takes two lines */
		display: inline;
		height: 100%;
		padding-right: 1px;
	/*	position:relative;
		left: 2px;margin-right: -2px;*/
		margin-top:0;
		padding-top: 0.05em;					/* compensating for shortened line-height */
		line-height: 0.8;
/*	border: 1px solid lime;*/
	}

#navbox ul li span.new,
#navbox ul li span.soon {						/* when 'new' or 'soon' takes one line */
		padding: 0 1px 0 0;
		background-color: transparent;
	}
	
#navbox img {							/* Earth image */
		position: absolute;
		top: 0.25em;
		left: 8px;							/* same as padding for others */
		width: 16px;
		height: 16px;
	}

#ersatzmenu {
		max-width: 698px;					/* since "the width property specifies the width of the content area of an element" and "the content area is inside the padding, border, and margin of the element" (http://developer.mozilla.org/en/docs/CSS:width); using max- hides the value from IE, which incorrectly takes width to mean total width */
		margin: 0;
		padding-top: 1px;
		padding-bottom: 1px;
		padding-left: 1px;
		padding-right: 1px;
		overflow: hidden;					/* prevents a horizontal scrollbar from appearing when text is greatly enlarged */
		border-bottom: 0;
		background-color: #B5CAFF;
	}

#ersatzmenu ul li a {
		width: 114px;
		max-width: 110px;						/* again hiding from IE, which seems to take width to mean total width */
		margin: 1px;
		padding-left: 1px;						/* not modifying -top and -bottom */
		padding-right: 1px;
/*		border: 1px solid #a0bbff;*/
		border-color: #91afff #c1d2ff #c1d2ff #91afff;
		font-size: 0.95em;						/* same as #dropmenudiv a */
		color: rgb(18,176,0);					/* same lively, refreshing green as #dropmenudiv a */
		background-color: #dfe8ff;
	}

#ersatzmenu ul li a:hover {
		background-color: #a0bbff;
		color: #ffffff;
		border-color: #c1d2ff #91afff #91afff #c1d2ff;	/* reverse of above */
	}

#ersatzmenu ul li a:active {
		background-color: #95ACFF;
		color: #ffffff;
		border-color: #c1d2ff #91afff #91afff #c1d2ff;	/* reverse of above */
	}

#ersatzmenu ul li a.na {								/* na: not available; used in products */
		visibility: hidden;
	}

#ersatzmenu img {
		position: relative;
		top: 2px;
		margin-right: 5px;
	}







/* //    Content    // */

#page {								/* contains all the contents of page to center them */
		position: relative;
		top: 0;
		left: 0;
		width: 707px;				/* = header image width + paddings + 1px "in case" */
		margin: 0 auto; 			/* not supported by Internet Explorer; however, 'text-align: center' in body (incorrectly) centers #page! */
		padding: 3px 3px 0 3px;		/* space below BottomBar comes from BB */
		text-align: left;			/* undoing the effect of body */
/*border: 1px red solid;*/
	}

#content {									/* contains everything between the NavBar and the BottomBar; it is needed only because NavBar is absolutely positioned */
		width: 700px;
		padding-top: 4em;
		overflow: auto;						/* is the solution: height will stretch to that of the longest contained element, even if it be the floated picturebox)! see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ and the comments */
		border-bottom: 1px #ffffff solid;	/* apparently, is needed "to trigger the bottom of the container expanding down below the float[]"; note that the color is the color of the page background! */
		margin-bottom: 4em;					/* would subtract 1px to compensate for border if it were possible! */
		outline: 0;							/* apparently, "right-clicking a div with overflow:auto; results in a border appearing around the element"; this apparently fixes it */
		tabindex: -1;						/* usually prevents (maybe not in newer versions of Firefox) the div from being accessible by tabbing and showing a border when focussed */
		font-size: 1em;
/*	border: 1px gold solid;*/
	}

#imagebox {
		float: right;
		text-align: right;
/*	border: 1px orange solid;*/
	}

#textbox {
		width: 350px;						/* same as met and cer in fiber */
		padding-bottom: 1px;				/* in case there be links on the last line */
/*	border: 1px #0B6B05 solid;*/
	}

h1 {						/* used in index */
		font-size: 1.3em;
		text-align: left;
		font-weight: bold;
	}

h2 {						/* used in products, careers, and fiber */
		padding-top: 0;
		margin-top: 0;
		font-size: 100%;
	}

h3 {						/* used in fiber as the side links div title */
		margin-bottom: 0.9em;
		margin-top: 0;
		padding-top: 0;
		font-size: 0.9em;	/* cf. LinksPDF text size of .8em */
		font-weight: bold;
	}

ul {
		margin-top: -0.5em;
		margin-left: 0.3em;
		list-style-position: outside;
		list-style-type: disc;
	}

ul.firstfreelist,			/* 'free' = 'no text before'; used in index */
ul.lastlist,				/* used in fiber */
li.lastitem {				/* used in index */
		margin-bottom: 0;
	}

ul.firstlist,				/* both used in fiber */
ul.lastlist {
		margin-top: 0.3em;
	}

li {
		margin-top: .6em;
		margin-left: 1.1em;
	}

li.nobullet {				/* used in fiber */
		list-style-type: none;
	}

a:link,
a:visited {
		color: blue;
		text-decoration: none;
		border-bottom: 1px solid #dfe8ff;
	}

a:hover,
a:active {
		text-decoration: none;
		border-bottom: 1px solid #a0bbff;
	}

a img {
		border: 0;
	}

body #page a.unavailable:link,				/* used in []_sitemap's and []_about's wherein pages are not yet available */
body #page a.unavailable:visited {
		color: #bf0000;						/* same color as ".soon" in NavBar */
		border-color: #ffdfe8;
	}

body #page a.unavailable:hover {
		color: #bf0000;
		border-color: #ff0000;
	}

img.inlineflag {
		position: relative;
		top: 2px;
		margin-right: 3px;
		border-right: 1px #c0c0c0 solid;
		border-bottom: 1px #c0c0c0 solid;
	}

.wordwrap {								/* used in fibers to compensate for soft hyphens not existing in FireFox; sorry about Opera, but no solution implemented */
	/*	-moz-binding: url('./wordwrap.xml#wordwrap'); 	/* proprietary property; taken from http://blog.stchur.com/2007/03/01/word-wrap-for-mozilla-take-2/ (in fact: from source of http://ecmascript.stchur.com/blogcode/emulating_word_wrap_take2/ and its links */
	}

.superscript {
		font-size: 0.7em;
		vertical-align: text-top;
	}

.captionstyle {
		margin: 18px 0;
		text-align: left;
		font-size: 12px;
		font-style: italic;
	}


/* //    BottomBar    // */

#BottomBar {					/* space (4em + 1px) above: comes from #content's */
		clear: both;			/* in case some floats try to reach BB */
		width: 700px;
		margin-top: 0;
		margin-bottom: 3px;
		font-size: 10px;
		background-color: #a0bbff;
		color: #5e5eff; /* same color as box in mlinkcurrent */
/*	border: 1px red solid;*/
	}

#BottomBar div#BBleft {
		width: 60%;
		margin: 0px;
		padding: 6px 0 6px 10px;	/* setting the padding in BB somehow makes it too large in Firefox, even if width be set and sum of inside divs < width */
/*	border: 1px black solid;*/
	}

#BottomBar div#BBright {
		width: 30%;
		float: right;
		text-align: right;
		margin: 0px;
		padding: 6px 10px 6px 0;
/*	border: 1px black solid;*/
	}

a#sitemaplink:link,
a#sitemaplink:visited {
		border: 0;
		color: #ffffff;
		text-decoration: none;
	}

a#sitemaplink:hover {
		text-decoration: underline;
	}