/* 
This file has been validated using the W3C validator :
http://jigsaw.w3.org/css-validator/

Slightly greyish background will reduce eyestrain, 
for those that use the web app for extended periods.

Many feel that a sans-serif font is best for screens, 
while serif fonts are best for print. No absolute 
font-sizes are specified (only relative ones).
*/

body {
 background-color: rgb(90%, 90%, 90%); 
 color: black;
 font-family: Verdana, sans-serif;
 /* this looks nice - no jagged edges - but sometimes it causes stretching, especially with small devices: */
 /* text-align: justify; */ 
 position: relative;
 margin-left: 8%;
 margin-right: 8%; 
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}

li {
 list-style-type: square;
}

/* 
Give images some added margin, since the default is usually 0. 
*/
img {
 margin: 0.5em;
}
/* allow reversion to no-margin default. */
img.no-margin {
 padding: 0;
 margin: 0;
}

/* Ensure table cells are top-aligned */
td {
 vertical-align: top;
}

pre {
  overflow-x: auto;
}

/* 
Draws attention to definition of acronyms, as displayed 
in tooltips.
*/
acronym[title] {
 cursor: help;
 border-bottom: 1px solid gray;
}

/* The following items are for specific classes and ids. */

/* Large text appearing at the top of most pages. */
.main-title {
   font-size: 200%;
   font-weight: bolder;
}

/* Footer */
.legalese {
 font-size: 80%;
 text-align: center;  
 margin-top: 1.0em;
 margin-bottom: 0.0em;
}

/* MENU BAR (horizontal) */
.menu-bar {
 clear: both;
 padding-left: 0.25em;
 padding-right: 0.25em;
 padding-bottom: 0.50em;
 text-align: center;
}

form.search-form {
 display: inline;
}

img.banner {
 clear: both;
}

/* MESSAGES of various kinds. */
.message {
 font-weight: bolder;  
}
.warning {
 font-weight: bolder;  
}
.error {
 font-weight: bolder;  
 color: rgb(255,0,0);
}
.error:before {
 content : "*** ";
}
.error:after {
 content : " ***";
}
p.display-messages {
 text-align: center;
}

/* Soft yellow highlight */
.highlight {
  /* background-color: #FFFDE3; */
  background-color: rgb(245,245,98);
}

/* syntax highlighting of code snippets */
.keyword {
  font-weight: bolder;
  color: #000080;
}
.literal {
  color: blue;
}
.comment {
  color: rgb(0%, 40%, 0%);
}

/* Alternating colour for table rows */
.row_highlight  {
 background-color: rgb(90%, 90%, 90%);
}

/*
HELP text.
*/
.help {
 font-size:80%;
 background-color: #FFFDE3;
 border-style: solid;
 border-width: 1px;
 border-color: black;
 border-collapse: collapse;
 width : 60%;
 padding: 0.30em;
 margin-right:auto; 
 margin-left:auto; 	
 margin-bottom:1.0em;
}

/* 
REPORTS 
Here, reports are implemented with tables, and refer to any kind of listing.
*/
table.report {
 background-color: rgb(83%, 83%, 83%); 
 border-style: solid;
 border-width: 2px;
 border-color: rgb(45%,45%,45%); 
 border-collapse: collapse;
 empty-cells: show; 
 caption-side: bottom;
 margin:0px auto; /*to center*/
 width: 80%
}

table.report td, th {
 /*white-space: nowrap;*/
 border: 1px ridge rgb(65%,65%,65%); 
 padding: 0.30em;
}

/* no underline for sorting links */
table.report th a {
  text-decoration: none;
}
table.report th img {
 padding: 0;
 margin: 0;
}

table.report tbody {
 border: 1px solid black;
}
/* 
Highlighting the row when the cursor hovers above it 
increases legibility. 
*/
table.report tr:hover {
  background-color: #FFFDE3;
}
table.report caption {
 font-weight: bold;
 text-align: center;
 padding: 0.5em;
}
table.report caption:after {
 content : " - ";
}
table.report caption:before {
 content : " - ";
}

/*
REPORT panel. Tabbed panel effect, for presenting reports.
*/
table.report-panel {
 border-style: solid;
 border-width: 1px;
 border-color: black;
 border-collapse: collapse;
 empty-cells: show; 
 caption-side: bottom;
}

table.report-panel th {
 font-weight: bold;
 background-color: rgb(83%, 83%, 83%); 
}

table.report-panel th.not-current {
 background-color: rgb(60%, 60%, 60%); 
}

table.table-of-contents {
  /* appendTo(html," <colgroup><col width='50%'><col width='50%'></colgroup>"); */
  width:100%;
  border-style:none;
  border-collapse: collapse; 
  border-spacing: 0;
  margin: 0 auto; /*centers*/
}
table td {
  padding:3px;
}

/* 
FORMS
Label tags are the text related to a specific form control.
Here, labels are given after-text, with special values if 
classed as mandatory. This reduces repetition of trivial 
items in markup. (IE6 fails to render these items.)
*/
label:after {
 content : " :";
}
label.mandatory:after {
 content : " * :";
}
label {
 font-weight: bold;
}

/* 
Tables used for user input.
*/
form.user-input table {
 background-color: rgb(83%, 83%, 83%);
 border-style: solid;
 border-width: 2px; 
 border-color: rgb(45%,45%,45%); 
 padding: 1.0em;
}
/* improves alignment of form controls */
form.user-input input {
 margin: 0;
}

/* Log off form appearing in main menu.  */
form.log-off {
  display:inline;
}

td.performance-high {
 color: green;
 font-family: monospace;
}
td.performance-medium {
 color: rgb(111,87,221);
 font-family: monospace;
}
td.performance-low {
 color: rgb(225,96,89);
 font-family: monospace;
}


.diagnostic-header {
 font-weight: bold;
 font-size: 125%;
}

table.layout {
  width: 85%;
  empty-cells:show;
  padding: 0px;
  border-spacing: 0px;
}

.page-title {
 /*  background-color: rgb(85%,85%,85%); */
 /* soft green: */
 /* background-color: rgb(10%,60%,35%); */
  /* skin color */
  /* background-color: rgb(90%,80%,50%); */
  /* baby blue */
  background-color: rgb(140,195,230);
  font-size: 250%;
  clear: both;
  text-align: center;
  border: 1px solid gray;
  padding: 0.25em;
}
 
.page-section {
  background-color: rgb(85%,85%,85%);
  font-size: 120%;
  font-weight: bolder;
  padding: 2px;
  border: 1px solid gray;
}

.topic-section {
  padding: 2px;
  font-weight: bolder;
}

.home-page-section {
  padding-left:0.4em;
  padding-right:0.4em;
  padding-top:0.4em;
  padding-bottom:0.4em;
  border-left: 1px solid gray; 
  border-right: 1px solid gray; 
}

.quotation {
  text-align:center;
}

.main-body { 
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.main-layout {
  margin-left: 8%;
  margin-right: 8%; 
}

.chapters { 
  font-size:80%;
  padding-left:0.4em;
  padding-right:0.4em;
  margin-top: 4px;
  margin-bottom: 4px;
}

img.banner-ad {
  border-color:#003399;
  margin:0px;
}

input.search {
 background-color: rgb(85%, 85%, 85%);
}

/* Small screens */
@media all and (max-width: 450px) {
  /** Tiny margin for small screens. */
  body {
    margin: 0.5em; 
    padding: 0em;
  }
}

/* Wide screens */
@media all and (min-width: 1399px) {
  body {
    margin-left: 16%;
    margin-right: 16%; 
  }
}


/*****************************************************
3.The above styles are applied to all media, while the 
remaining styles below are applied only to print media.

Entire sections of the web page are here suppressed from 
printing. There is no need to define a '.noprint' class, 
nor is there any need to refer to such a class repeatedly 
in markup.
*****************************************************/

@media print {
 * {
  color: black !important;
  background: white !important;
 }
 .menu-bar {
  display: none;
 }
 .title-bar {
  display: none;
 }
 div.sidebar {
  display: none;
 }
 .legalese {
  display: none;
 }
 body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
 }
 a {
  text-decoration: none;
 }
 table.report {
  page-break-before: always;
 }
}