/*---------- left aligned button ----------*/
.btn, .btnC, .btnR {display: block; position: relative; background: #666; padding: 5px; margin:8px 0 8px; color: #fff;  cursor: pointer;}
.btn {float:left;}
.btnC {margin: 0 auto 8px; min-width: 150px; max-width: 200px; text-align: center; }
.btnR {float: right;}

.btn *, .btnC *, .btnR * {font-style: normal; background-image: url(/files/imagesWE/global/bkgds/btn2a.png); background-repeat: no-repeat; display: block; position: relative;}
.btnC * {text-align: center;}

.btn i, .btnC i, .btnR i {background-position: top left; position: absolute; margin-bottom: -10px;  top: -5px; left: 0; width: 30px; height: 20px;}
.btn span, .btnC span, .btnR span {background-position: bottom left; left: -5px; padding: 5px 10px 15px 20px; margin-bottom: -10px;}
.btn span i, .btnC span i, .btnR span i {background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0;}
.btn span span, .btnC span span, .btnR span span {background-position: top right; position: absolute; right: -10px; margin-left: 35px; top: -10px; height: 0;}

* html .btn span, * html .btn i,
* html .btnC span, * htmlC .btn i,
* html .btnR span, * htmlR .btn i
{width: auto; background-image: none; cursor: pointer;}

* html .btn span,
* html .btn i {float: left;}

* html .btnC span,
* html .btnC i {text-align: center; padding: 0px; margin: 0px auto;}

* html .btnR span,
* html .btnR i {float: right;}


.btn:hover, .btnC:hover, .btnR:hover {color: #fff; background:#060;}
.btn:active, .btnC:active, .btnR:active {background-color: #666; color: #fff;}
.btn:active *, .btnC:active *, .btnR:active * {background-image: url(/files/imagesWE/global/bkgds/btn2b.png); }

.btn[class], .btnC[class], .btnR[class] {background-image: url(/files/imagesWE/global/bkgds/btn.png); background-position:bottom;}
.btn[class]:active, .btnC[class]:active, .btnR[class]:active {background:#666;}



/*---------- VARIABLES ----------*/
/* size */
.font10 {font-size:1em}
.font12 {font-size:1.2em}
.font14 {font-size:1.4em}
.font18 {font-size:1.8em}
.font24 {font-size:2.4em}
.font30 {font-size:3em}

/* centered button width */
.btnC.Cwidth100 {max-width:100px;}
.btnC.Cwidth150 {max-width:150px;}
.btnC.Cwidth200 {max-width:200px;}
.btnC.Cwidth250 {max-width:250px;}
.btnC.Cwidth300 {max-width:300px;}

/* good browser colors */
.btn-blue {background: #009;}
.btn-green {background: #060;}
.btn-red {background: #c00;}

.btn-red:hover {background-color: #f00;}


/* IE colors */
* html .btn, * html .btnC, * html .btnR { border: 3px double #aaa; }
* html .btn:hover, * html .btnC:hover, * html .btnR:hover { border: 3px double #aaa; }
* html .btn-blue {border-color: #009;}
* html .btn-green {border-color: #060;}
* html .btn-red {border-color: #c00; }