/* Specific CSS file for CHART Extranet Reporting */
/* infra_ops_eps_reporting.css */
/* 01/08/2012 SA */
/* whole body content is enclosed by a <div class="chart"> tag */

/************************************* Font Styles *************************************/

/* main body font style */
body {
	font-family: sans-serif, sans;
	font-size: 0.8em;
}

/************************************* Aligning Styles *************************************/

/* div.chart table {} */

/* don't allow  page breaks within a table */
div.chart table {
	page-break-inside: avoid;
	/* white-space:nowrap; removed because it makes the PLM report tables too wide */
}

/* status cell center alignment */
div.chart table td.status {
	text-align: center;
}

/* cell width 100% for breakdown table */
div.chart table td.cell100 {
	width:100%;
}

/* cell width 50% */
div.chart table td.cell50 {
	width:50%;
}

/* cell width 25% for breakdown table */
div.chart table td.cell25 {
	width:25%;
}

/* cell width 1em for breakdown table */
div.chart table td.cell1 {
	width:1em;
}

/* table caption style left alignment */
div.chart table caption {
	text-align: left;
	font-weight: bold;
}

/* list type is no bullet because chart reporting generates it own number prefixes */
div.chart ul.nobullet {
	list-style-type: none;
}

/* image formating */
div.chart div.image {
	margin: 1px;
	display: inline-block;
}

/* description with image div */
div.chart div.image p {
	text-align: center;
}

/* no text decoration for image links  
div.chart td a:link.nodecoration {
	text-decoration: none;
}
*/

/* alignment of the logo image (left hand render) */
div.chart img.logo_left {
	vertical-align:middle;
	margin-right:3em;
}

/* alignment of the logo image (right hand render) */
div.chart img.logo_right {
	vertical-align:middle;
	float:right;
}


/************************************* Border Styles *************************************/

/*table.table {*/
/* table borders for lists */
div.chart table {
	border-width:2px;
	border-style:solid;
	border-color:black;
	padding:2px;
	margin: 2px;
	margin-bottom: 60px;
}

/* secondary table, with less margin and border thickness */
div.chart table.minor {
	border-width:0px;
	padding:0px;
	margin: 0px;
}
div.chart td {
	border-width:1px;
	border-style:solid;
	border-color:black;
	padding:1px;
	margin: 1px;
}

div.chart th {
	border-width:2px;
	border-style:solid;
	border-color:black;
	padding:1px;
	margin: 1px;
}

/* special padding for breakdown table */
div.chart table.breakdown {
	border-width:2px;
	border-style:solid;
	border-color:black;
	padding:4px;
	margin: 4px;

}

/************************************* Coloring Styles *************************************/

/*************************** General *******************************************************/
/* RED: OK */
div.chart table td.statusNOK {
	background-color: #ff0000;
}

/* GREEN: Not OK */
div.chart table td.statusOK {
	background-color: #00ff00;
}


/* *************************** OOLs ********************************************************/
/* RED: Alarm high or low */
div.chart .oolHard {
	background-color: #ff0000;
}

/* Yellow: Warning high or low */
div.chart .oolSoft {
	background-color: #FFFF00;
}

/* Orange: Warning */
div.chart .oolWarn {
	background-color: #FFA500;
}


/******************************* Legend **************************************************/
/* BRIGHT GREEN: Fully Operational */
div.chart table td.statusFulOp {
	background-color: #00ff00;
}

/* LIGHT GREEN: Fully Operational, but not in use, redundancy available */
div.chart table td.statusFulOpNoUse {
	background-color: #ccffcc;
}

/* YELLOW: Operational with Limitations */
div.chart table td.statusLimOp {
	background-color: #ffff00;
}

/* ORANGE: Operational with Degraded Performance */
div.chart table td.statusDegOp {
	background-color: #ff6600;
}

/* LIGHT ORANGE: Not Operational with Degraded Performance */
div.chart table td.statusDegNop {
	background-color: #ffcc99;
}

/* RED: Not Operational */
div.chart table td.statusNop {
	background-color: #ff0000;
}

/* GREY:	 Not applicable */
div.chart table td.statusNotApp {
	background-color: #c0c0c0;
}

/* BLANK: No Status Reported */
div.chart table td.statusBlank {
	background-color: #ffffff;
}

/******************************* Status **************************************************/
/* BRIGHT GREEN: Stable */
div.chart table td.trendStable {
	background-color: #00ff00;
	content:"\21D2";
}

/* YELLOW: Down, Evolution in non-favourable direction */
div.chart table td.trendDown {
	background-color: #ffff00;
	content:"\21D8";
}

/* BLUE: Up, Evolution in favourable direction */
div.chart table td.trendUp {
	background-color: blue;
	content:"\21D7";
}

/* GREY: Not applicable */
div.chart table td.trendNotApp {
	background-color: #c0c0c0;
}

/* BLANK: No Trend Reported */
div.chart table td.trendBlank {
	background-color: #ffffff;
}

/******************************* text popups ***********************************************/
/* used for the hover text in the status table */
div.chart .thumbnail {
position: relative;
z-index: 0;
}

div.chart .thumbnail:hover {
background-color: transparent;
z-index: 50;
}

div.chart .thumbnail span { 
	/*CSS for enlarged image or text*/
	font-family: verdana, arial;
	font-size:9px;
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
	left: -1000px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
	width: 400px;
	text-align: justify;
}

div.chart .thumbnail span img { /*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
}

div.chart .thumbnail:hover span { /*CSS for enlarged image on hover*/
	visibility: visible;
	top: 0;
	left: 30px; /*position where enlarged image should offset horizontally */
}


/********************************* Various ************************************************/
/* error message within paragraph */
div.chart p.reporterror {
	color: #ff9494;
}

div.intelliplot {
	page-break-before: always;
}

div.print {
	display: none;
}

p.postscript {
	font-style: italic;
	margin-top: 30px;
}
