/**
 * Stylesheet to try and make things look not *too* bad in IE7.
 */

/* Needed to get rid of annoying "permanent" IE7 scrollbar. */
html
{
    overflow: hidden;
}

#sidebar-wrapper /* Make sure IE "hasLayout" is enabled by doing zoom: 1. */
{
    zoom: 1;
}

/* IE7 doesn't correctly size the scrollbar without this, however it causes IE6 problems. */
.page
{
    height: 100%;
}

ul.list
{
    width: 100%;
}

/* IE < 8 doesn't support color: inherit so we have to set it explicitly. */
ul li.grey a /* Grey text generally used to show inactive fields */
{
	color: #8f8f8f;
}

ul li a
{
	color: #060606;
}

ul li.active a
{
	color: #fff;
}

/* IE7 gives this anchor a default size which adds extra visible padding. As the navigable radio button has */
/* reskinned the markup around this li the anchor doesn't actually need to be visible so we can safely hide it. */
ul.list li.arrow.radio a
{
    display: none;
}

/* IE < 8 form has a default non-zero margin, so we need to zero it. */
form
{
    margin: 0;
}

/* For IE7 :before and :after don't work so we have to resort to some JavaScript to inject extra classes and tags */
ul.list li:first-child
{
	border-top: 3px groove #fff; /* IE7 without hasLayout set doesn't show the border if it's less than 3px, why??? */
}

ul.list li:first-child > .fbefore, /* Use fbefore not before in case first-child and last-child apply to same element. */
ul.list li:first-child > .fafter /* Use fafter not after in case first-child and last-child apply to same element. */
{
    position: absolute;
    top: -3px;
    left: -2px;
    width: 10px;
    height: 10px;
    z-index: 1;
    background: url(/itablet/images/ie/radius-10px-sprite.png);
}

ul.list li:first-child > .fafter /* Use fafter not after in case first-child and last-child apply to same element. */
{
    left: auto;
    right: -2px;
    background-position: -10px 0;
}

/* The fake rounded corners for the IE8 stylesheet more or less work, but the bottom offset in IE7 is different??? */
ul.list li.last-child
{
    margin-top: -1px; /* Weird IE7 specific bug needs this set to -1px to render it as 0px!!!! */
}

ul.list li.last-child > .before, ul.list li.last-child > .after
{
    bottom: -1px;
}

/* For IE7 button :before and :after don't work so we have to resort to some JavaScript to add extra classes and tags */

a.button .before
{
    position: absolute;
    top: 0;
    left: -5px;
    width: 5px;
    height: 30px;
    background: url(/itablet/images/button-sprite.png) -18px 0;
}

a.button .after
{
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 30px;
    background: url(/itablet/images/button-sprite.png) -13px 0;
}

a.button:active .before
{
    background-position: -41px 0;
}

a.button:active .after
{
    background-position: -36px 0;
}

a.button.back .before
{
    position: absolute;
    left: -13px;
    width: 13px;
    height: 30px;
    background-position: 0 0;
}

a.button.back:active .before
{
    background-position: -23px 0;
}

a.button.blue .before
{
    background: url(/itablet/images/blue-button-sprite.png) -18px 0;
}

a.button.blue .after
{
    background: url(/itablet/images/blue-button-sprite.png) -13px 0;
}

a.button.back.blue .before
{
    background-position: 0 0;
}

a.button.blue:active .before
{
    background-position: -41px 0;
}

a.button.blue:active .after
{
    background-position: -36px 0;
}

a.button.back.blue:active .before
{
    background-position: -23px 0;
}

/* The horiz-checkbox class hasLayout set so the styles below go back to the correct values. */
/* Unfortunately simply giving ul.list li hasLayout using zoom: 1 above causes the IE7 margin bug to trigger */
/* so can't default to that hence the weird values for ul.list li.last-child/ul.list li.last-child > .before */
/* ul.list li.last-child > .after There may be easier ways, but fixing one IE7 bug seems to cause other ones */
ul.list li.horiz-checkbox:first-child, ul.list li.textarea:first-child
{
	border-top: 1px groove #fff;
}

ul.list li.horiz-checkbox.last-child, ul.list li.textarea.last-child
{
    margin-top: 0;
}

ul.list li.horiz-checkbox:first-child > .fbefore, ul.list li.horiz-checkbox:first-child > .fafter,
ul.list li.textarea:first-child > .fbefore, ul.list li.textarea:first-child > .fafter
{
    top: -1px;
}

ul.list li.horiz-checkbox.last-child > .before, ul.list li.horiz-checkbox.last-child > .after,
ul.list li.textarea.last-child > .before, ul.list li.textarea.last-child > .after
{
    bottom: -2px;
}