/*
  My attempt to make a more simple stylesheet for the website.

	Used colors:
	rgb(255,255,255) = standard background color
	rgb(236,201,170) = for table borders and headers
	rgb(255,246,236) & rgb(255,245,241) = every other row
	rgb(255,236,201) = footer/information
	rgb(204,52,52)   = when hovering table headers or other links
	rgb(136,0,0)     = top menu and left menu header (= #880000)
	
	The table with countries, sectors or portfolios in the left menu
	rgb(153,0,0)     = borders (= #990000)
	rgb(255,240,240) = background (= #fff0f0)
	
	rgb(192,192,192) = background of various menus when hovering
	rgb(176,176,176) = line under menu (left and top) (= #b0b0b0)
	
	rgb() = tab unfocused (= #999)
	
	rgb(0,128,0)     = green text (good/positive/up)
	rgb(204,0,0)     = red text (bad/negative/down)

	rgb(102,102,102) = dark grey, no idea when it's used. seems in some table headers but where?
	rgb(0,64,128)    = dark blue, no idea when it's used.
	rgb(128,128,128) = grey, seems to be used in some disabled items but again no idea where. (= #808080)
	rgb(96,96,96)    = grey, left menu, selected, not expanded (= #606060)

	rgb(255,248,246) This color seems not to be used anymore, to prove this I changed it to rgb(0,248,246) through the whole project

*/

html { overflow-y: scroll; }  /* To avoid changing layout when a scrollbar appears */

body {
  height: 100%;
  margin: 0px;
  background-color: rgb(255,255,255);
  font-size: 8pt;
  font-family: Verdana,helvetica;
  text-align: left;
}

/* Copy of class pageTitle (replace class pageTitle with h1) */
/* Used as main title */
h1
{
	font-weight: bold;
	font-size:12pt;
	margin:0px;
	padding:0px;
}

/* Copy of class pageSubTitle (replace class pageSubTitle with h2) */
/* Used as important header/title in some pages */
h2 {
  font-weight: bold;
  font-size: 11pt; /* This was 10pt */
  margin: 0px;
  padding: 0px;
}

/* Used as header above tables and images */
h3 {
  font-weight: bold;
  font-size: 8pt; /* This was often 9pt, now changed to 8pt to make same size as other table headers. */
  margin: 0px;
  padding: 0px;
}

.headerBox h3 {
  padding-left: 2px;
}

/* Used for "FDA only" label */
h4 {
  font-weight: normal;
  font-size: 10pt;
  color: red;
  margin: 0px;
  padding: 0px;
}

/*
This class seems not to be used Nico 20200528
.button
{
 font-weight:bold;
 border:solid 2px rgb(150,150,150);
 padding:6px;
 background-color:rgb(192,192,192);
}

.button:hover
{
 background-color:rgb(220,220,220);
}
*/

.topCompleteMenu    { width:100%; border-bottom:rgb(176,176,176) 1px solid; }

.topMenu					{font-size:8pt; font-weight:normal; color:rgb(0,0,0);}
.topMenu a:hover	{color:rgb(136,0,0); text-decoration:underline;}

.mainMenu table			{ font-size:8pt; font-weight:bold; }
.mainMenu td				{ text-align:left; margin-left:0px; padding-right:50px; padding-left:5px; color:rgb(136,0,0); text-decoration:none; }
.mainMenu a					{ color:rgb(136,0,0); }
.mainMenu a:hover		{ background:rgb(192,192,192); }
.mainMenu .selected	{ background:black; color:white; }
.mainMenu a.selected:hover { background-color:black; color:white; }

.leftMenuHeader		{
  text-align:left; 
  font-size:8pt; 
  text-indent:0px; 
  font-weight: bold; 
  color:rgb(136,0,0);
  width:100%;
  margin:0px;
  padding-top:2px;
  padding-bottom:1px;
  text-align:left;
}
.leftMenuHeader a:hover	{color:rgb(136,0,0); text-decoration:none;}
.leftMenuHeader a				{color:rgb(136,0,0); text-decoration:none;}
.leftMenuHeader th			{text-align:left;}

.leftMenuItems		{text-align:left; font-size:8pt; text-indent:2px; width:100%;}
.leftMenuItems td {padding-bottom:1px; padding-top:1px;}
.leftMenuItems a:hover	{color:rgb(0,0,0); text-decoration:none; background:rgb(192,192,192);}
.leftMenuItems a				{color:rgb(0,0,0); text-decoration:none;}
.leftMenuItemsBorder    {border-bottom:rgb(176,176,176) 1px solid; width:165px;}

/* The sector, country and portfolio menu's and the hover popups */
.popMenu {
  visibility: hidden;
  display: none;
  top: 0px;
  left: 0px;
  width: auto;
  position: absolute
}
.popMenu table		{font-size:8pt; font-weight:normal; line-height:15px; border:rgb(153,0,0) 1px solid; width:auto; padding:2px;}
.popMenu td				{text-align:left; background-color:rgb(255,240,240);	color:rgb(0,0,0); border:rgb(153,0,0) 1px solid;}
.popMenu a:hover	{color:rgb(255,255,255); text-decoration:none; background:rgb(0,0,0)} 
.popMenu a				{color:rgb(0,0,0); text-decoration:none}

.menuLink					{font-size: 8pt;color: Black;}
.menuLink a				{color:rgb(0,0,0);text-decoration:none;}
.menuLink a:hover	{color:rgb(153,0,0);text-decoration:none;}

.searchBox
{
	vertical-align:bottom; 
	font-size:6px; 
	padding-right:2px;
}

.searchInput
{
	vertical-align:bottom;
	height:16px;
	padding-left:4px;
	color:rgb(176,176,176);

	font-size: 8pt;
	font-weight: normal;
	border: 1px solid rgb(176,176,176);
	
	margin-left:0px;
	margin-right:0px; 
}


/* Used as header above tables */
/* See also .headerBox h3 */
.headerBox
{
	/*width:100%;*/
	border:0px solid rgb(236,201,170);
  border-left-width:1px;
  border-right-width:1px;
	background-color:rgb(236,201,170);
	padding-top:1px;
	padding-left:10px;
	padding-right:0px;
	padding-bottom:1px;
	margin:0px; 
	vertical-align:top;
}

div.headerBox
{
	padding-left:0px;
	padding-right:0px;
}

.component
{
  width:100%;
  
  font-size:8pt; 
  text-align:left;

  border:1px solid rgb(236,201,170);
  border-top-width:0px;
  padding:0px 2px;
  margin:0px;
}

div.component
{
	padding-left:0px;
	padding-right:0px;
}

/* Copy of the above statement, without borders to avoid double borders */
.TblCont .component
{
  width:100%;
  
  font-size:8pt; 
  text-align:left;

  border:0px solid rgb(236,201,170);
  padding:0px 2px;
  margin:0px;
}

/*
	All about tables should be placed in this section.
	Layout tables are borderless.
	Component tables should have borders.
*/
table 
{
  border-spacing:0;
  border-collapse:collapse;
}

th, td {
  padding: 0px;
  vertical-align:top;
}

.tableBorderInternLeft
{
border-left:2px solid rgb(236,201,170)
}
.tableBorderInternRight
{
border-right:2px solid rgb(236,201,170)
}
.tableBorderInternTop
{
border-top:1px solid rgb(236,201,170)
}
.tableBorderInternBottom
{
border-bottom:1px solid rgb(236,201,170)
}

.topBorder
{
  border-top:1px solid rgb(236,201,170);
}

table.component th
{
  color:rgb(0,0,0); 
  background-color:rgb(236,201,170);
  padding-bottom:0px;
  padding-top:0px;

  font-size:8pt; 
  font-weight:bold;
  text-align:left;
}

table.component tfoot
{
  color:rgb(0,0,0); 
	background-color:rgb(255,236,201);
  padding-bottom:1px;
  padding-top:1px;

  font-size:8pt; 
  text-align:left;
  border-top:1px solid rgb(236,201,170);
}

table.component tfoot td
{
  color:rgb(0,0,0); 
	background-color:rgb(255,236,201);
}

table.component tr.tfoot {
  color: rgb(0,0,0);
  background-color: rgb(255,236,201);
  padding-bottom: 1px;
  padding-top: 1px;
  font-size: 8pt;
  text-align: left;
  border-top: 1px solid rgb(236,201,170);
}

table.component tr.tfoot th
{
    font-weight: normal;
    color: rgb(0,0,0);
    background-color: rgb(255,236,201);
}

table.component tr.tfoot td {
  font-weight: normal;
  color: rgb(0,0,0);
  background-color: rgb(255,236,201);
}

table.tablesorter th:hover
{
	color:rgb(204,52,52);
}

table.component th.noSort
{
  color:inherit; 
}

/* See also .ctabhdrlef in compatible.css */
/*  and .THeadLef in Componentsv03.css */
table.component thead td
{
  color:rgb(0,0,0); 
  background-color:rgb(236,201,170);
  padding-bottom:1px;
  padding-top:1px;

  font-size:8pt; 
  font-weight:bold;
}

table.component td
{
  padding:0px 2px;
}

table.component td.bold
{
  font-weight:bold;
}

table.component td.italic
{
  font-style:italic;
}

table.component tr
{
  height:15px;
}

.firstColumn
{
  padding-left:5px;
}

.lastColumn
{
  padding-right:5px;
}

table.component th.lastColumn
{
  padding-right:2px;
}

table.component tr.oddRow
{
  color:black; 
  background-color:white;
}

table.component tr.evenRow
{
  color:black; 
  background-color:rgb(255,246,236);
  text-align:left;
}

table.zebra tr:nth-child(odd) {
  background-color: white;
}
table.zebra tr:nth-child(even) {
  background-color: rgb(255,246,236);
}

table.component tr.selectedRow {
  color: black;
  background-color: rgb(192,192,192);
}

table.tablesorter tr th {
  cursor: pointer;
  padding: 2px;
}

table.tablesorter tr td
{
	padding-left: 2px;
	padding-right: 2px;
}

table tr.odd td
{
  background-color:rgb(255,246,236);
}

td.goodValue
{
  color:rgb(0,128,0);
}

td.badValue
{
  color:rgb(204,0,0);
}

.alignRight
{
  text-align:right;
}

table.component th.alignRight
{
  text-align:right;
}

.alignCenter
{
  text-align:center;
}

table.component th.alignCenter
{
  text-align:center;
}

table.component input 
{
	height:12px;
	margin:0px;
	padding:0px;
	vertical-align:middle;
}

table.component .button
{
	height:22px;
}

.alignJustify
{
  text-align:justify;
}

a
{
  color:Black;
  text-decoration:none;
}

a:hover
{
  color:rgb(204,52,52);
  text-decoration:none;
}

.evenRow a
{
  color:Black;
  text-decoration:none;
}

.evenRow a:hover
{
  color:rgb(204,52,52); 
  text-decoration:none;
}

.borderLeft 
{
	border-left:1px solid rgb(236,201,170);
}

.borderRight
{
	border-right:1px solid rgb(236,201,170);
}

image 
{
	border:0px;
}

.bulletImage
{
	width:9px;
	margin-right:1px;
}

.story {font-size: 10pt; word-spacing: 1px; line-height: 15px;}

/*
	storyNormal and storyEasy and tooltip are not used yet (20130628)
	change word-spacing, size and line-height to em units
*/
.storyNormal
{
	font-size: 8pt; 
	font-weight: normal; 
	text-align: left; 
	vertical-align: top; 
	color: black; 
	background-color: white;
}
.storyEasy
{
	font-size: 12pt; 
	font-weight: normal; 
	text-align: left; 
	vertical-align: top; 
	color: black; 
	background-color: white; 
	word-spacing: 5px;
	line-height: 20px
}

/*
  Javascript tooltip
	<a> <label> or <span>, id starts with "link"
	a <div> on the page of class "jsTooltip" with the same id only starting with "popup" instead of "link".

  Old method was a <div> of class "popMenu" (named "popup...") and in it a <table>.
*/
.jsTooltip
{
	visibility:hidden; 
	display:none; 
	top:0px; 
	left:0px; 
	width:auto; 
	position:absolute;
	background-color:rgb(255,240,240);
	color:rgb(0,0,0);
	border:rgb(153,0,0) 1px solid;
	padding:2px;
	text-align:left;
	font-weight:normal;
}

/* In use in the large companies table in the select fields and filters part */
.tooltip
{
	visibility:hidden; 
	display:none; 
	top:0px; 
	left:0px; 
	width:auto; 
	position:absolute;
	background-color:rgb(255,246,236);
	color:rgb(0,0,0);
	border:rgb(236,201,170) 1px solid;
	padding:2px;
	text-align:left;
	font-weight:normal;
}

.spinner
{
  list-style: none;
  display:inline-table;
  font-size: .8em;
  text-align:left;
  border:2px;
  margin:0px;
  padding:0px;
}

.spinner input
{
  font-size: .8em;
	text-align:left;
  margin:0px;
  padding:0px;
}

.searchPanel
{
	visibility:hidden; 
	display:none; 
	top:0px; 
	left:0px; 
	width:435px;
	height:auto;
	position:absolute;
	border:2px black solid;
	text-align:left;
	background-color:white;
	z-index:10;
}

.itemDate
{
	margin-top:0px;
	margin-left:0px;
	margin-bottom:5px;
	font-size:11px;
	color:grey;
}

/*
	Usage:
	Define an element with class newTooltip.
	Place a single span inside.
	The span will be visible only on hover.
*/
.cssTooltip
{
	position: relative;
}

.cssTooltip span
{
	position: absolute;
	margin-left: -999em;
	visibility:hidden;
	display:none;
	color:Black;
	font-weight:normal;
}

.cssTooltip span span
{
	display:inline;
	position:relative;
	margin-left:0px;
}

.cssTooltip:hover span {
	position: absolute;
	left: 1em;
	top: 1.2em;
	z-index: 99;
	width: auto;
	border: 1px solid rgb(153,0,0);
	background-color:rgb(255,240,240);
	margin-left: 0;
	padding: 4px;
	white-space:pre;
	visibility:visible;
	display:block;
	text-align:left;
	line-height:16px;
}

.cssTooltip:hover span span
{
	display:inline;
	position:static;
	border:0px;
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
}

.emphasized
{
	font-weight:bold;
}

/* Possibly expand to informationTable, informationImage and informationPage */
.information
{
	width:100%;
	background-color: white;
	padding: 2px;
	border:0px solid red;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
}

.information_old_layout
{
	width:100%;
	background-color: rgb(255,236,201);
	padding: 2px;
	border:1px solid rgb(236,201,170);
	margin:4px 0px;
}

.alertGood
{
	color:rgb(0,128,0);
}

.alertBad
{
	color:rgb(204,0,0);
}

div.information
{
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:         border-box;
}

.warning {
	border-radius: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	/* Next 2 for IE8 */
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='rgb(0,0,0)')";*/
  -ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color='rgb(128,128,128)')";

	background: rgb(255,236,201);
	border: 1px solid rgb(236,201,170);
	position: absolute;
	left: 1em;
	top: 2em;
	z-index: 99;
	margin-left: 0;
	width: auto;
	padding: 0.8em 1em;
	display:none;
	visibility:visible;
}

sup
{
	height:1em;
	font-size:7pt;
	vertical-align:top;
}


/* Next part is for creating a list used as tabs above a section */
ul.tabList
{
	position:relative;
	height:22px;
	
	margin:0px;
	padding:0px;
  list-style: none;
}

ul.tabList li
{
	position:relative;
	float:left;
	padding: 2px 16px 2px 16px;
	margin:0 1px -1px 0;
	text-align:center;
	cursor:pointer;
	height:10px;
	vertical-align:bottom;
	font-size:10px;
	color:rgb(136,0,0);

	border-bottom:1px solid silver;
	background:transparent url(../images/default_tab_bg_right.gif) 100% 0 no-repeat;
	top:2px;
}

ul.tabList li.tabSelected
{
	background:transparent url(../images/default_tab_bg_white_right.gif) 100% 0 no-repeat;
	vertical-align:top;
	font-size:12px;
	height:20px;

	border-bottom:0px solid white;
	top:0px;
}

.tabLeftSide
{
	background:transparent url(../images/default_tab_bg_left.gif) 0 0 no-repeat;
	position:absolute;
	left:0px; top:0px;
	width:10px;
	border-bottom:1px solid silver;
	height:14px;
}

.tabSelected .tabLeftSide
{
	background:transparent url(../images/default_tab_bg_white_left.gif) 0 0 no-repeat;
	border-bottom:0px solid white;
	height:17px;
}

.tabLink:hover
{
	background-color:Black;
	color:White;
}


.tabContent
{
  display: none;
  padding: 0px 0px 0px 0px;
  border: 0px solid white;
}

.selectedTabContent
{
  display: block;
}

.leftMenuSelected
{
	background-color:black;
	color:white;
}

.leftMenuSelectedNotExpanded
{
	background-color:rgb(96,96,96);
	color:white;
}

.siteUpdates
{
	margin-right:10px; margin-top:20px; width:165px;
}

.siteUpdatesTitle
{
	padding-top:4px; padding-bottom:1px; font-weight:bold; color:rgb(136,0,0);
}

inputImage
{
	background-color:white;
}


td.textImage
{
	vertical-align:bottom;
	padding-bottom:0px;
	text-align:right;
}

td.textImage img
{
	margin-bottom:-1px;
	content: url('../images/message-txt.png');
}

td.textImage img:hover
{
	content: url('../images/message-txt-red.png');
}

.textLink
{
  color:rgb(204,52,52);
  text-decoration:none;
  font-weight:normal;
  font-style:normal;
}

.textLink:hover
{
  color:rgb(204,52,52);
  text-decoration:underline;
}

.alignTop
{
	vertical-align:top;
}

.asButton
{
	border:solid 1px black;
	background-color:ButtonFace;
	padding:2px 8px 2px 8px;
	margin-top:4px;
}

.warningLabel
{
	color:Red;
	font-weight:bold;
	font-size:12px;
}

.messageLabel
{
	color:Green;
	font-weight:bold;
	font-size:12px;
}

@keyframes blink { 
   50% { border:solid 2px red; } 
}

.flashBorder
{
	border:solid 2px white;
	animation: blink .5s step-end infinite alternate;
}

.invisible
{
	display:none;
}

.MultiLineButton 
{
  white-space:normal;
}

.nowrap {
  white-space: nowrap;
}