/*
    BLUEGLASS.CSS.PHP
    -----------------
    Stylesheet for the blue glass buttons and tabs.
*/

/* IE6/7 fixes. These don't feature the :hover and :focus pseudo classes, so 
   we add those through behaviour. Also the behaviour of BUTTONs is different
   and that is corrected as well, making IE6 behave correctly as FF and Safari
   would as well.
   NOTE: the URL will only resolve in IE6 if it is an absolute URL. To make it
         relocatable by way of settings in the config.inc.php, this css-file is
         generated by php.
*/
body { behavior: url('/style/blueglass/csshover.htc'); }

/* Blue glass buttons (rounded 75x24) (using the <BUTTON> tags) */
/* DEFAULT STATE */
button {
        background-image: url('/style/blueglass/btnwhiteglass.png');
        border: medium none;
        background-color: transparent;
        background-repeat: no-repeat;
        width: 75px; height: 24px; cursor: default; 
        font-family: Trebuchet MS, Trebuchet, sans-serif; color: #000000; font-size: 12px; font-weight: normal; 
        text-decoration:none; text-align: center;
    }
button.wide {
        background-image: url('/style/blueglass/widebtnwhiteglass.png');
        width: 100px;
    }
button.tab {
        background-image: url('/style/blueglass/tabwhiteglass.png');
    }
button.grey {
        background-image: url('/style/blueglass/btngreyface.png'); border: medium none; background-color: transparent; background-repeat: no-repeat;
        width: 160px; height: 32px; cursor: default;
        font-family: Trebuchet MS, Trebuchet, sans-serif; color: #666666; font-size: 12px; font-weight: bold; 
        text-decoration:none; text-align: center; 
        }
    
@media print {
    button, button.wide, button.tab, #bottom_fade {
        visibility: hidden
    }
}

button:hover {
        -moz-outline: none; border: 0px; outline: none;
        background-image: url('/style/blueglass/btnblueglass.gif'); 
    }
button.wide:hover {
        background-image: url('/style/blueglass/widebtnblueglass.png'); 
    }
button.tab:hover {
        -moz-outline: none; border: 0px; outline: none;
        background-image: url('/style/blueglass/tabblueglass.png');
    }
button.grey:hover {
        background-image: url('/style/blueglass/btngreyface.png'); color: #000000; 
    }

              
button:focus {
        -moz-outline: none; border: 0px; outline: none;
        background-image: url('/style/blueglass/btnblueglass_0_100pct.gif'); 
    }
/* Note: no animated wide button yet: display clear blue */
button.wide:focus {
        background-image: url('/style/blueglass/widebtnblueglass.png'); width: 100px;
    }
button.tab:focus {
        -moz-outline: none; border: 0px; outline: none;
        background-image: url('/style/blueglass/tabblueglass_0_100.gif');
    }
button.grey:focus {
        background-image: url('/style/blueglass/btngreyface.png'); color: #000000; 
    }


/* Blue glass radio-button and check-box */
/* NOTE: browsers do not feature customisations of RADIO inputs and CHECK inputs enough to enable
         full graphic user interface, so we imitate the behavior using bulleted lists. Also include
         the blueglass.js script to make it work. */
ul                  { vertical-align: middle; margin-top: 0px; margin-bottom: 0px; line-height: 1; }
ul.check            { list-style-image: url('/style/blueglass/checkblueglass.png'); }
ul.radio            { list-style-image: url('/style/blueglass/radioblueglass.png'); }
li.checked          { list-style-image: url('/style/blueglass/checkblueglass_ticked.png'); }
li.ticked           { list-style-image: url('/style/blueglass/radioblueglass_ticked.png'); }

/* Blue glass input and text areas */
input.text          { border: 1px solid #cccccc; padding: 1px; height: 20px; margin-bottom: 2px; }
input.text:focus    { border: 2px solid #b3c5ef; padding: 0px; height: 20px; }
input.text.invalidfield
                    { border: 2px solid #ffaaaa; padding: 0px;}
input.text.invalidfield:focus
                    { border: 2px solid #ffaaaa; padding: 0px;}

textarea.text       { border: 1px solid #cccccc; padding: 1px; }
textarea.text:focus
                    { border: 2px solid #b3c5ef; padding: 0px; }
textarea.text.invalidfield
                    { border: 2px solid #ffaaaa; padding: 0px; }
textarea.text.invalidfield:focus
                    { border: 2px solid #ffaaaa; padding: 0px;}

/* style for ellipsis start */
tt.ellipsis {
   white-space:nowrap;
   -o-text-overflow:ellipsis;
   text-overflow:ellipsis;
   overflow:hidden;
   display:block;
   position:relative;
   zoom:1;	
}
tt.ellipsis:after{
	content:'';
	display:block;
	clear:both;
}
tt.ellipsis span {
   white-space:nowrap;
   -o-text-overflow:ellipsis;
   text-overflow:ellipsis;
   *width:100%;

   float:left;	
   overflow:hidden;
   max-width:97%;
}
tt.ellipsis ins{
	height:10px;
	float:left;	
	width:1px;
	position:relative;
	left:-95%;	
}
tt.ellipsis var{
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	background:#fff;
	display:none;
}
tt.ellipsis var:after{
	content:'...';
}