/*
	IE8- Width controls, mimics the @media (only the columns!)
*/

/***************** Separated Columns ****************/

/*
    When the width is lowwer than 500px on with the default settings are done, this section goes down to 350px
*/
    .IE8-_350-500 .SortingContainer-NewsColumn,
    .IE8-_350-500 .SortingContainer-InstrumentChangeColumn {
    /*
        The div#SortingContainer's div.NewsColumn and div.ChangeColumn needs to be half of the remaining percentage of div.ComparisonChangeColumn.
        This is because the "Share Price" phrases is translated and needs the extra space in order to not go on extra lines.
    */
        min-width: 37.8%;
        max-width: 100%;
    }
    .IE8-_350-500 .NewsColumn {
    /*
        The div.NewsColumn under the div.PressRelease must be 100% - (.InstrumentChangeColumn width)- (.ComparisonChangeColumn width)
    */
        width: 53.6%;
    }
    .IE8-_350-500 .InstrumentChangeColumn {
    /*
        The width here can be quite a bit smaller because the .SortingContainer-InstrumentChangeColumn is qute a bit more wide and so they are not linked.
    */   
        width: 22%;
        min-width: 75px;
        max-width: 100%;
    }
    .IE8-_350-500 .ComparisonChangeColumn,
    .IE8-_350-500 .SortingContainer-ComparisonChangeColumn {
    /*
        The comparison Column's width needs to be the same in both the div#SortingContainer as well as the div.PressRelease
        This is to keep the illusion of a table.
    */
        width: 24.4%;
        min-width: 85px;
        max-width: 100%;
    }
/*
    When the width is lower then 350px then this is invoked.
    In the two separate column version, the News own item is set on a separate line and the changes are in a 50% columns on the next line 
    i.e. the changes still retain their column structure only on the next line.
*/
    .IE8-_350- .NewsColumn,
    .IE8-_350- .SortingContainer-NewsColumn {
        display: block;
        width: 100%;
        text-align: left;
    }
    .IE8-_350- .InstrumentChangeColumn,
    .IE8-_350- .ComparisonChangeColumn,
    .IE8-_350- .SortingContainer-InstrumentChangeColumn,
    .IE8-_350- .SortingContainer-ComparisonChangeColumn {
        width: 50%;
        text-align: left;
    }

/***************** Single Individual Column ****************/
/*
    This will be invoked, when the width goes lower that the default assumed minimum width of 350px
*/
    .IE8-_250-350 .SortingContainer-SingleChangeColumn-NewsColumn,
    .IE8-_250-350 .SortingContainer-SingleChangeColumn-InstrumentChangeColumn,
    .IE8-_250-350 .SortingContainer-SingleChangeColumn-ComparisonChangeColumn {
    /*
        The SingleChangeColumn's headings are 50% each in order to allow for translations widths.
        This is because the SortingHeading phrases are translated and variable and needs the extra space in order to not go on extra lines.
    */
        width: 50%;
        min-width: 125px;
        max-width: 100%;
    }
    .IE8-_250-350 .SingleChangeColumn-NewsColumn {
    /*
        The div.NewsColumn under the div.PressRelease must be 100% - (.SingleChangeColumn-InstrumentChangeColumn width or .SingleChangeColumn-ComparisonChangeColumn width)
    */
        width: 70%;
    }
    .IE8-_250-350 .SingleChangeColumn-InstrumentChangeColumn,
    .IE8-_250-350 .SingleChangeColumn-ComparisonChangeColumn {
    /*
        The width here can be quite a bit smaller because the div#SortingContainer's change columns is qute a bit more wide and so they are not linked.
    */      
        width: 30%;
        min-width: 75px;
        max-width: 100%;
    }
}
/*
    When the width is lower than 250px
*/

    .IE8-_250- .SingleChangeColumn-InstrumentChangeColumn,
    .IE8-_250- .SingleChangeColumn-ComparisonChangeColumn,
    .IE8-_250- .SingleChangeColumn-NewsColumn,
    .IE8-_250- .SortingContainer-SingleChangeColumn-NewsColumn,
    .IE8-_250- .SortingContainer-SingleChangeColumn-InstrumentChangeColumn,
    .IE8-_250- .SortingContainer-SingleChangeColumn-ComparisonChangeColumn {

        width: 100%;
        display: block;
        text-align: left;
    }

/***************** Single Combined Column ****************/

/*
    This is invoked when the width is lower than 400px, goes down to 300px
*/ 
    .IE8-_300-400 .SortingContainer-CombinedChange-NewsColumn,
    .IE8-_300-400 .SortingContainer-CombinedChangeColumn {
    /*
        The heading's are 50% each in order to allow for translations widths.
        This is because the SortingHeading phrases are translated and variable and needs the extra space in order to not go on extra lines.
    */
        width: 50%;
        min-width: 150px;
        max-width: 100%;
    
    }
    .IE8-_300-400 .CombinedChange-NewsColumn {
    /*
        The div.NewsColumn under the div.PressRelease must be 100% - (.CombinedChangeColumn width)
    */
        width: 58%;
    }
    .IE8-_300-400 .CombinedChangeColumn {
    /*
        The width here can be quite a bit smaller because the #SortingContainer's change column is qute a bit more wide and so they are not linked.
    */   
        width: 42%;
        min-width: 124px;
        max-width: 100%;
    }
/*
    This is invoked when the width is lowwer than 300px
*/
    .IE8-_300- .SortingContainer-CombinedChange-NewsColumn,
    .IE8-_300- .SortingContainer-CombinedChangeColumn, 
    .IE8-_300- .CombinedChange-NewsColumn, 
    .IE8-_300- .CombinedChangeColumn {
    /*
        Because there are only 2 columns anyway, then, when the change column goes to the second line then all of the settings can be applied to all the object at once.
    */
        width: 100%;
        display: block;
    }
    .IE8-_300- .SortingContainer-CombinedChangeColumn,
    .IE8-_300- .CombinedChangeColumn {
        text-align: left;
    }