@import "../common.css";

/* format system button */
button {border-width: 2px; color: #369; font-size: 9pt; font-family: helvetica,arial,sans-serif; background-color: #eef;}

/* btn1 use lcr system, mark up as following:
<div class="btn1 lcr">
	<div class="l"></div>
	<div class="c">Submit</div>
	<div class="r"></div>
</div>
*/
.btn1 {height: 20px;}
.btn1 .l {background-image: url(left.png)}
.btn1 .c {background-image: url(bg.png); font-family: verdana,arial,helvetica,tahoma; font-size: 10pt; padding: 2px 5px 0px 5px;}
.btn1 .r {background-image: url(right.png)}

.btn1.hvr .l {background-image: url(left_hvr.png)}
.btn1.hvr .c {background-image: url(bg_hvr.png)}
.btn1.hvr .r {background-image: url(right_hvr.png)}

.btn1.dn .l {background-image: url(left_dn.png)}
.btn1.dn .c {background-image: url(bg_dn.png)}
.btn1.dn .r {background-image: url(right_dn.png)}


/* btn2 is glass look flat button. mark up as following:
<div class="btn2" style="width: 50px; height: 20px;"> <<-- must specify with and height
	<div class="shadow"></div>
	<div class="main">Hello</div>
</div>
*/
.btn2 {float: left; position: relative; overflow: visible; cursor: default;}
.btn2 .main {position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; border-width: 1px; border-style: solid; opacity: 0.9; filter: alpha(opacity=90); border-color: #666; background-color: #eee; font-family: verdana,arial,helvetica,tahoma; font-size: 10pt; padding: 1px 5px; color: #666}
.btn2 .shadow {position: absolute; left: 3px; top: 3px; right: -3px; bottom: -3px; border-width: 1px; border-style: solid; border-color: #999; background-color: #ccc; opacity: 0.5; filter: alpha(opacity=50);}

.btn2.hvr .main {border-color: #33f; background-color: #eef; color: #00f}

.btn2.dn .main {left: 1px; top: 1px; right: -1px; bottom: -1px; border-color: #33f; background-color: #eef; color: #00f}
.btn2.dn .shadow {left: 1px; top: 1px; right: -1px; bottom: -1px;}



.btn3 {float: left; background-position: left top; background-repeat: no-repeat; background-color: transparent}

.close {background-image: url(red-sq-close-up.png); width: 15px; height: 15px;}
.close.dn {background-image: url(red-sq-close-dn.png)}