/* Properties for all the components of the page */

* {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin: 0;
    padding: 0;
}


/* Properties for the Eurostat Banner when we are in full screen mode */


/* Properties for the <div> tag with class (.) 'centered' 
 * (general div for the Banner)
 */

div.centered {
    margin: 0 auto;
    width: 1024px;
}


/* Properties for the <div> tag with id (#) 'top' 
 * (div that contains the logo + picture of the Banner)
 */

div#top {
    position: inherit;
    font-size: 10px;
    margin: 0;
    padding: 0;
    height: 107px;
    width: 1024px;
}


/* Properties for the <a> tag with class (.) 'banner' */

a.banner {
    text-decoration: none;
}


/* General Properties for all the <img>, <p>, 
 * <div> and <option> tags
 *
img, p, div, option {
	border: 0 none;
	margin: 0;
	padding: 0;
}

/* General properties for the tags after the banner */


/* Properties for the <select> tag with id (#) 'countryList' */

#countryList {
    font-size: 10px;
    font-weight: bold;
    margin: 10px 0;
    /* ==> TODO put a comment... */
    padding: 2px;
}


/* Properties for the First option with id (#) 
 * 'firstOption' of the <select> tag 
 */

#firstOption {
    font-size: 12px;
}


/* Properties for all the <option> tags in (all) <select> components */

option {
    font-size: 10px;
}


/* Properties for the <div> tag with id (#) 'Main' 
 * Used to define some scrolling properties essentially 
 * to have a fixed header in the main Table of the scoreboard.
 */

#Main {
    height: 500px;
    position: relative;
    overflow-y: scroll;
    overflow-x: scroll;
    /*z-index: 0;*/
}


/* Properties for all the tables */

table {
    width: 100%;
    border: 1px solid #039;
    /* ==> short name for #003399 */
}


/* Properties for all the <tr> tags inside (all) 
 * the <thead> tag.
 * (used in pair with #Main CSS for the non-scrolling header of table)
 */

thead tr {
    position: relative;
    /*top: expression(this.offsetParent.scrollTop); ==> doesn't work on Browsers that are not Fucking Bastard IE */
    /*z-index: 0;*/
}


/* Specific properties for all the <TR> tags that have the 
 * class (.) 'annualPeriod2'
 * (used to add a new general Reference Period when 
 *  additional/auxiliary indicators are displayed/unhidden.
 *  This reference period is added after the additional/auxiliary 
 *  indicator(s) to help the next headline indicator with reference 
 *  periods.
 *  Make sence when addtional/auxiliary indicators have a different 
 *  Reference Period - otherwise it's very often not used)
 */

.annualPeriod2 {
    color: #FFF;
    /*background-color: #69F;*/
    background-color: #4169E1;
    font-weight: bold;
    font-size: 110%;
    text-align: center;
}


/* General properties for all the <TH> & <TD> 
 * (included in <TR> tags)
 */

tr th,
tr td {
    padding: 3px;
}


/* Specific properties for all the <TH> tags in the <TR> tags that 
 * have the class (.) 'headerLabel'
 * (added after the 'tr th' properties) 
 * Define the Yellow banner (and other small things) for level 1 
 * header called HeaderLabel.
 */

tr.headerLabel th {
    /*background-color: #FFF;*/
    background: url('/eurostat/cache/REIs/images/bgHeaderYellow.png') repeat;
    /*background: url('file:///C:/Temp/REIs/images/bgHeaderYellow.png') repeat;*/
    font-size: 100%;
    text-transform: uppercase;
    text-align: center;
}


/* Specific properties for all the <TH> tags in the <TR> tags that 
 * have the class (.) 'annualPeriod'
 * (added after the 'tr th' properties) 
 * Define the Yellow banner (and other small things) for level 2 
 * header called AnnualPeriod.
 */

tr.annualPeriod th {
    /*color: #000;*/
    /*background-color: #69F;*/
    /*background-color: #4169E1;*/
    background: url('/eurostat/cache/REIs/images/bgHeaderYellow.png') repeat;
    /*background: url('file:///C:/Temp/REIs/images/bgHeaderYellow.png') repeat;*/
    font-weight: bold;
    font-size: 110%;
    text-align: center;
    /*padding-right: 10px;*/
}


/* Properties for the <tbody> tag in the <table> with 
 * the id (#) 'REIs_Ind'.
 * (Used to define non-scrolling table header. 
 *  See #Main & thead tr CSS.)
 */


/*#REIs_Ind tbody {
	height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}*/

#REIs_Ind tbody {
    height: auto;
}


/* Specific properties for all the <TD> tags with class (.) 'footer' 
 * in the <table> with the id (#) 'REIs_footer'.
 * Cascading properties for the content inside the REIs_footer table.
 */

#REIs_footer td.footer {
    /*font-size: 10px;*/
}


/* Specific properties for all the <TD> tags in the <TR> tags that 
 * have the class (.) 'headlinePeriod'
 * (added after the 'tr td' properties) 
 * Define the Blue bar for headline titles (when they exist).
 */

tr.headlinePeriod td {
    color: #FFF;
    background-color: #69F;
    /*background-color: #4169E1;*/
    font-weight: bold;
    font-size: 110%;
    text-align: center;
}


/* Specific properties for all the <TD> tags in the <TR> tags that 
 * have the class (.) 'SubHeaderPeriod'
 * (added after the 'tr td' properties) 
 * Define another Blue bar for SubHeader titles (when they exist).
 */

tr.SubHeaderPeriod td {
    /*color: #FFF;*/
    background-color: #70C1FF;
    /*background-color: #014DFE;*/
    /*background-color: #4169E1;*/
    font-weight: bold;
    font-size: 110%;
    text-align: center;
}


/* Specific properties for all the <TD> tags in the <TR> tags that 
 * have the class (.) 'separate' 
 * (added after the 'tr td' properties) 
 * Define a separation bar when Auxiliary indicators are defined.
 */

tr.separate td {
    border-top: 2px solid #039;
}


/* Specific properties for all the <TD> tags with class (.) 
 * 'title' and class (.) 'subtitle'
 * (added after the 'tr td' properties) 
 * Common properties for the Title column (headline indicators) 
 * and Subtitle column (additional/auxiliary indicators) for all 
 * the rows in the #REIs_Ind table.
 * Define a vertical separation bar and other small things.
 */

td.title,
td.subtitle {
    /*font-weight: bold;*/
    line-height: 150%;
    /*padding-left: 20px;*/
    padding-left: 10px;
    border-right: 1px solid #BEBFBE;
}


/* Specific properties for all the <TD> tags with class (.) 'title' 
 * (added after the 'tr td' properties and after the 
 * previous td.title properties)
 * Cascading properties for the Title column.
 * (Font from headline indicators are a little different than from 
 *  the additional/auxiliary indicators)
 */

td.title {
    /*font-size: 120%;*/
    font-size: 110%;
    /*padding-left: 40px;*/
}


/* Specific properties for all the <TD> tags with class (.) 'title_2' 
 * (added after the 'tr td' properties and after the 
 * previous td.title_2 properties)
 * New properties for Title column when a sub HeaderLabel is defined.
 * Sub headerLabel are inserted as rows in the #REIs_Ind table so we 
 * need to apply a different CSS on this particular row.
 */

td.title_2 {
    line-height: 150%;
    /*padding-left: 20px;*/
    padding-left: 10px;
    font-size: 110%;
    font-weight: bold;
}


/* Specific properties for all the <TD> tags with class (.) 'unit' 
 * (added after the 'tr td' properties)
 * Cascading properties for the Unit column.
 */

td.unit {
    border-right: 1px solid #BEBFBE;
}


/* Specific properties for all the <TD> tags with class (.) 'value' 
 * (added after the 'tr td' properties)
 * Cascading properties for the Value columns.
 */

td.value {
    text-align: center;
}


/* Specific properties for all the <TD> tags with class (.) 'link' 
 * (added after the 'tr td' properties)
 * Cascading properties for the Link column.
 */

td.link {
    width: 70px;
    /*text-align: right;*/
    text-align: center;
    /*padding-right: 20px; /* <== used to move left this <td> because the vertical scrollbar in the <table> */
    /*border-left: 1px solid #BEBFBE;*/
}


/* Specific properties for all the <TD> tags with class (.) 'source' 
 * (added after the 'tr td' properties)
 * Cascading properties for the Source column in the table inside 
 * the Link column.
 */

td.source {
    text-align: center;
    font-size: 75%;
}


/* Specific properties for all the <TD> tags with class (.) 'link_2' 
 * (added after the 'tr td' properties)
 */


/* NO MORE USED */


/*td.link_2 {
	width: 70px;
	text-align: center;
	/*padding-right: 20px; /* <== used to move left this <td> because the vertical scrollbar in the <table> */


/*}*/


/* Properties for the class (.) 'additionalLink' and all the <A> tags 
 * contained in tags that have the class 'additionalLink'
 * Used to define the links to hide/unhide the additional indicators
 */

.additionalLink,
.additionalLink a {
    color: #06F;
    font-weight: normal;
}


/* Properties for the class (.) 'auxiliaryLink' and all the <A> tags 
 * contained in tags that have the class 'auxiliaryLink'
 * Used to define the links to hide/unhide the auxiliary indicators
 */

.auxiliaryLink,
.auxiliaryLink a {
    color: #01B0F0;
    font-weight: normal;
}


/* Properties for the class (.) 'even' 
 * Used for all the even lines in the REIs_Ind table.
 */

.even {
    /*background-color: #E6E6E6;*/
    /*background-color: #F1F2F1;*/
    background-color: #CDDEE8;
}


/* Properties for the class (.) 'odd' 
 * Used for all the odd lines in the REIs_Ind table.
 */

.odd {
    background-color: #FCFAE1;
}


/* Properties for the class (.) 'additionalPeriods' 
 * Used to add a reference period when additional/auxiliary 
 * indicators are unhidden.
 */

.addPeriods {
    color: #FFF;
    background-color: #69F;
    font-weight: bold;
    text-align: center;
}