/*
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 *
 */

/**
 * Stylesheet to try and make things look not *too* bad in IE6 and below. Supporting IE6 really is a nightmare :-(
 */

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

/* Explicitly setting height to 100% avoids some evil IE6 layout bugs */
html, .sidebar, .main, .popup-window, .popup-container, .popup, .scroll-area
{
    height: 100%;
}

/* Explicitly setting width to 100% avoids some evil IE6 layout bugs */
ul.list, .popup, .scroll-area
{
    width: 100%;
}

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

/* IE6 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;
}

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

.sidebar .scroll-area
{
    border-right: 1px solid #000;
}

ul.list li.first-child
{
	border-top: 1px groove #fff;
}

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

ul.list li a p
{
    right: 0;
}

ul.list li.arrow a p, ul.list li.multiline a div p
{
    right: 18px;
}


ul.list li.multiline a.icon p, ul.list li.multiline a.icon div p
{
    right: 4px;
}

/**
 * white-space: nowrap; doesn't work especially well in IE6, so we set it to normal and constrain height.
 * Unfortunately with the approach below ellipses aren't displayed, but it's the lesser of the evils.
 * white-space: nowrap; does seem to work with an explicit width set, but doing that breaks loads of other things.
 */
ul li a p.sub, ul li a p.title
{
    white-space: normal;
}

ul li a p.title, ul li a p.sub
{
    height: 16px;
}

/* For IE6 we need to use a GIF instead of a PNG to make the input background transparent but still receive events. */
input, textarea
{
    background: url(/itablet/images/ie/transparent.gif) repeat;
}

/**
 * For IE6 button :before and :after don't work so we have to resort to some JavaScript to add extra classes and tags
 * IE6 doesn't support PNG images with alpha transparency, so we use gifs, which are OK but a littly more jagged.
 */

a.button
{
    background: url(/itablet/images/ie/button-sprite.gif) 0px -30px repeat-x;
}

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

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

a.button:active
{
    background-color: #766d69;
    background-position: 0px -60px;
}

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
{
    background: url(/itablet/images/ie/blue-button-sprite.gif) 0px -30px repeat-x;
}

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

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

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

a.button.blue:active
{
    background-color: #6b6f76;
    background-position: 0px -60px;
}

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

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

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

.popup-window
{
    background: url(/itablet/images/ie/transparent.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/itablet/images/ie/transparent.png', sizingMethod='scale');
}

.popup-window.smoked
{
    background: url(/itablet/images/ie/transparent.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/itablet/images/ie/smoked.png', sizingMethod='scale');
}

div.mask
{
    background: url(/itablet/images/ie/transparent.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/itablet/images/mask.png', sizingMethod='crop');
}

div.onoff
{
    background: url(/itablet/images/ie/transparent.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/itablet/images/on_off.png', sizingMethod='crop');
}

/**
 * Unfortunately AlphaImageLoader doesn't play nicely with alignment and these images need to be right aligned.
 * Fortunately the single level of transparency allowed by gif images is good enough and only a little granier.
 */

ul.list li.arrow.radio
{
    background: #f7f7f7;
}

ul.list li.radio label
{
    padding: 0 11px 0 11px; /* top right bottom left */
}

ul li.active, ul.list li.radio.active, ul.list li.radio.ie6-checked-active /* Highlight in blue with white text */
{
    background: #035de7;
}

ul li.arrow
{
    background: url(/itablet/images/ie/chevron.gif) no-repeat right;
}

ul.list li.arrow
{
    background: #f7f7f7 url(/itablet/images/ie/chevron.gif) no-repeat right;
}

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

ul.list li.radio.checked label
{
    background: url(/itablet/images/ie/tick.gif) no-repeat right;
}

ul.list li.radio.ie6-checked-active label
{
    background: url(/itablet/images/ie/tick-active.gif) no-repeat right;
}

ul.list li.ie6-radio-arrow
{
    background: #f7f7f7 url(/itablet/images/ie/blue-chevron.gif) no-repeat right;
}

ul.list li.ie6-radio-arrow label
{
    padding: 0 11px 0 32px; /* top right bottom left */
}

ul.list li.ie6-radio-arrow a
{
    height: 0;
    width: 0;
}

ul.list li.ie6-checked-arrow label
{
    background: url(/itablet/images/ie/tick.gif) no-repeat 11px;
}

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

ul.list li.ie6-checked-arrow-active label
{
	background: url(/itablet/images/ie/tick-active.gif) no-repeat 11px;
}