/**
 * Stylesheet to try and make things look not *too* bad in IE8 and below
 */

/**
 * To handle opacity in IE < 9 we animate progid:DXImageTransform.Microsoft.gradient in itablet.js
 * We use a transparent background image rather than background: transparent to block mouse events to the main page.
 * progid:DXImageTransform messes with the font so we only use it for animating and use a 50% alpha png as end style.
 */
.popup-window, input, textarea
{
    background: url(/itablet/images/ie/transparent.png) repeat;
}

.popup-window.smoked
{
    background: url(/itablet/images/ie/smoked.png) repeat;
}

/**
 * Create fake top rounded corners using images. Fortunately we can do this using pure CSS as ie8 supports
 * :first-child, :before and :after so we supply the images as content.
 */

.header:before, .header:after
{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background: url(/itablet/images/ie/radius-5px-sprite.png);
}

.header:after
{
    left: auto;
    right: 0;
    background-position: -5px;
}

ul.list li:first-child:before, ul.list li:first-child:after,
ul.horiz-checkbox li.horiz-checkbox:first-child:before, ul.list li.horiz-checkbox:first-child label.first-child:before,
ul.horiz-checkbox li.horiz-checkbox:first-child:after, ul.list li.horiz-checkbox:first-child label.last-child:after
{
    position: absolute;
    content: "";
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: url(/itablet/images/ie/radius-10px-sprite.png);
}

ul.list li:first-child:after,
ul.horiz-checkbox li.horiz-checkbox:first-child:after, ul.list li.horiz-checkbox:first-child label.last-child:after
{
    left: auto;
    right: -2px;
    background-position: -10px 0;
}

/**
 * Create fake bottom rounded corners using images. Unfortunately this isn't as easy as the top corners because
 * a) ie8 doesn't support :last-child and b) if we have a single list item we've already used :before and :after
 * Unfortunately we have to resort to some JavaScript so itablet.js has some ie8 specific code to add a
 * "last-child" class and prepend/append div elements with "before" and "after" classes. Fortunately this is
 * fairly clean to do using jQuery using $("ul.list li:last-child") to find the item that we need to modify.
 */

ul.list li.last-child
{
	border-bottom: 2px groove #fff;
}

ul.list li.last-child > .before, ul.list li.last-child > .after
{
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    z-index: 1;
    background: url(/itablet/images/ie/radius-10px-sprite.png) 0 -10px;
}

ul.list li.last-child > .after
{
    left: auto;
    right: -2px;
    background-position: -10px -10px;
}

/**
 * For IE < 9 use solid background colour instead of a gradient - no bigee, it was a subtle gradient anyway.
 */
ul li.active, ul li.radio.checked.active /* Highlight in blue with white text */
{
    background: #035de7;
}

ul li.active.arrow
{
    background: #035de7 url(/itablet/images/chevron-active.png) no-repeat right;
}

ul.list li.arrow.radio.active
{
    background: #035de7 url(/itablet/images/blue-chevron.png) no-repeat right;
}

/**
 * We need to apply the fake border radius to the labels in the horiz-checkbox too as child elements aren't clipped.
 * Unfortunately IE8 doesn't seem to distinguish between the selectors ul.list li:first-child:before and 
 * ul.list li.horiz-checkbox:first-child:before when horiz-checkbox is dynamically added (though it does if it's
 * placed in the static HTML) this stops the <li> fake radiused border being correctly repositioned
 * for horiz-checkboxes. By adding horiz-checkbox to the <ul> too we can use a more explicit rule in the CSS.
 */

/* First we remove the original borders that were previously added for ul.list li:first-child:before and after. */
ul.list li.horiz-checkbox:first-child:before, ul.list li.horiz-checkbox:first-child:after
{
    content: ".";
}

/* The we re-add them in the correct position using the more explicit rule on ul.horiz-checkbox */
/* We need to add the rounded borders to the labels too as they are positioned above the li in the stack. */
ul.horiz-checkbox li.horiz-checkbox:first-child:before, ul.list li.horiz-checkbox:first-child label.first-child:before,
ul.horiz-checkbox li.horiz-checkbox:first-child:after, ul.list li.horiz-checkbox:first-child label.last-child:after
{
    top: -1px;
}

canvas /* For IE < 9 the radiused borders for the canvas are actually rendered on the canvas. */
{
	border: 0;
}