.btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
.btn * { font-style: normal; background-image: url(btn2.png); background-repeat: no-repeat; display: block; position: relative; }
.btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }
* html .btn span,
* html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }



.btn.active { background: #800000;   }
.btn.active200 { background: #800000;  width:200px; }
.btnR.active { background: #800000;   }
.btnR.active200 { background: #800000;  width:200px; }



.btn.blue { background: #2ae; }

.btn.blue200 { background: #2ae;  width:200px; }
.btn.blue150 { background: #2ae;  width:150px; }
.btn.blue100 { background: #2ae;  width:100px; }
.btnC.blue200 { background: #2ae;  width:200px; }
.btnC.blue150 { background: #2ae;  width:150px; }
.btnC.blue100 { background: #2ae;  width:100px; }
.btnR.blue200 { background: #2ae;  width:200px; }
.btnR.blue150 { background: #2ae;  width:150px; }
.btnR.blue100 { background: #2ae;  width:100px; }


.btn.green { background: #9d4; }
.btn.green150 { background: #9d4;  width:150px; }
.btn.green200 { background: #9d4;  width:200px; }


/* template buttons.btn.darkgreen200 { background: #030;  width:200px; } */

.btn.gray { background: #aaa;  }
.btn.gray200 { background: #aaa;  width:200px; }
.btn.gray150 { background: #aaa;  width:150px; }
.btnC.gray { background: #aaa; }
.btnC.gray100 { background: #aaa; width:100px;}
.btnC.gray150 { background: #aaa; width:150px;}
.btnC.gray200 { background: #aaa; width:200px;}
.btnR.gray { background: #aaa; }
.btnR.gray100 { background: #aaa; width:100px;}
.btnR.gray150 { background: #aaa; width:150px;}
.btnR.gray200 { background: #aaa; width:200px;}

.btn.burlywood { background: burlywood;  }
.btn.burlywood200 { background: burlywood;  width:200px; }
.btnR.burlywood { background: burlywood;  }
.btnR.burlywood200 { background: burlywood;  width:200px; }



.btn.coral { background: coral;  }
.btn.coral200 { background: coral;  width:200px; }
.btnR.coral { background: coral;  }
.btnR.coral200 { background: coral;  width:200px; }



.btn.darkmagenta { background: darkmagenta;  }
.btn.darkmagenta200 { background: darkmagenta;  width:200px; }
.btnR.darkmagenta { background: darkmagenta;  }
.btnR.darkmagenta200 { background: darkmagenta;  width:200px; }



.btn.darkred { background: darkred;  }
.btn.darkred200 { background: darkred;  width:200px; }
.btnR.darkred { background: darkred;  }
.btnR.darkred200 { background: darkred;  width:200px; }



.btn.darkslategray { background: darkslategray;  }
.btn.darkslategray200 { background: darkslategray;  width:200px; }
.btnR.darkslategray { background: darkslategray;  }
.btnR.darkslategray200 { background: darkslategray;  width:200px; }



.btn.deeppink { background: deeppink;   }
.btn.deeppink200 { background: deeppink;  width:200px; }
.btnR.deeppink { background: deeppink;   }
.btnR.deeppink200 { background: deeppink;  width:200px; }




.btn.dodgerblue { background: dodgerblue;   }
.btn.dodgerblue200 { background: dodgerblue;  width:200px; }
.btnR.dodgerblue { background: dodgerblue;   }
.btnR.dodgerblue200 { background: dodgerblue;  width:200px; }



.btn.fuchsia { background: fuchsia;  }
.btn.fuchsia200 { background: fuchsia;  width:200px; }
.btnR.fuchsia { background: fuchsia;  }
.btnR.fuchsia200 { background: fuchsia;  width:200px; }



.btn.goldenrod { background: goldenrod;  }
.btn.goldenrod200 { background: goldenrod;  width:200px; }
.btnR.goldenrod { background: goldenrod;  }
.btnR.goldenrod200 { background: goldenrod;  width:200px; }



.btn.indigo { background: indigo;   }
.btn.indigo200 { background: indigo;  width:200px; }
.btnR.indigo { background: indigo;   }
.btnR.indigo200 { background: indigo;  width:200px; }



.btn.lightcoral { background: lightcoral;   }
.btn.lightcoral200 { background: lightcoral;  width:200px; }
.btnR.lightcoral { background: lightcoral;   }
.btnR.lightcoral200 { background: lightcoral;  width:200px; }

.btn.olivedrab { background: olivedrab;   }
.btn.olivedrab200 { background: olivedrab;  width:200px; }
.btnR.olivedrab { background: olivedrab;   }
.btnR.olivedrab200 { background: olivedrab;  width:200px; }

.btn.plum { background: plum;  ; }
.btn.plum200 { background: plum;  width:200px; }
.btnR.plum { background: plum;  ; }
.btnR.plum200 { background: plum;  width:200px; }

.btn.rosybrown { background: rosybrown;   }
.btn.rosybrown200 { background: rosybrown;  width:200px; }
.btnR.rosybrown { background: rosybrown;   }
.btnR.rosybrown200 { background: rosybrown;  width:200px; }

.btn.slategrey { background: slategrey;   }
.btn.slategrey200 { background: slategrey;  width:200px; }
.btnR.slategrey { background: slategrey;   }
.btnR.slategrey200 { background: slategrey;  width:200px; }

.btn.tan { background: tan;  ; }
.btn.tan200 { background: tan;  width:200px; }
.btnR.tan { background: tan;  ; }
.btnR.tan200 { background: tan;  width:200px; }

.btn.turquoise { background: turquoise;   }
.btn.turquoise200 { background: turquoise;  width:200px; }
.btnR.turquoise { background: turquoise;   }
.btnR.turquoise200 { background: turquoise;  width:200px; }

.btn.cadetblue { background: cadetblue;   }
.btn.cadetblue200 { background: cadetblue;  width:200px; }
.btnR.cadetblue { background: cadetblue;   }
.btnR.cadetblue200 { background: cadetblue;  width:200px; }

.btn.cornflowerblue { background: cornflowerblue;   }
.btn.cornflowerblue200 { background: cornflowerblue;  width:200px; }
.btnR.cornflowerblue { background: cornflowerblue;   }
.btnR.cornflowerblue200 { background: cornflowerblue;  width:200px; }

.btn.darkblue { background: darkblue;   }
.btn.darkblue200 { background: darkblue;  width:200px; }
.btnR.darkblue { background: darkblue;   }
.btnR.darkblue200 { background: darkblue;  width:200px; }

.btn.darkgreen { background: darkgreen;   }
.btn.darkgreen200 { background: darkgreen;  width:200px; }
.btnR.darkgreen { background: darkgreen;   }
.btnR.darkgreen200 { background: darkgreen;  width:200px; }

.btn.darkolivegreen { background: darkolivegreen;   }
.btn.darkolivegreen200 { background: darkolivegreen;  width:200px; }
.btnR.darkolivegreen { background: darkolivegreen;   }
.btnR.darkolivegreen200 { background: darkolivegreen;  width:200px; }

.btn.darksalmon { background: darksalmon;   }
.btn.darksalmon200 { background: darksalmon;  width:200px; }
.btnR.darksalmon { background: darksalmon;   }
.btnR.darksalmon200 { background: darksalmon;  width:200px; }

.btn.darkslategrey { background: darkslategrey;   }
.btn.darkslategrey200 { background: darkslategrey;  width:200px; }
.btnR.darkslategrey { background: darkslategrey;   }
.btnR.darkslategrey200 { background: darkslategrey;  width:200px; }

.btn.firebrick { background: firebrick;   }
.btn.firebrick200 { background: firebrick;  width:200px; }
.btnR.firebrick { background: firebrick;   }
.btnR.firebrick200 { background: firebrick;  width:200px; }

.btn.magenta { background: magenta;   }
.btn.magenta200 { background: magenta;  width:200px; }
.btnR.magenta { background: magenta;   }
.btnR.magenta200 { background: magenta;  width:200px; }

.btn.mediumorchid { background: mediumorchid;   }
.btn.mediumorchid200 { background: mediumorchid;  width:200px; }
.btnR.mediumorchid { background: mediumorchid;   }
.btnR.mediumorchid200 { background: mediumorchid;  width:200px; }

.btn.orange { background: orange;   }
.btn.orange200 { background: orange;  width:200px; }
.btnR.orange { background: orange;   }
.btnR.orange200 { background: orange;  width:200px; }

.btn.seagreen { background: seagreen;   }
.btn.seagreen200 { background: seagreen;  width:200px; }
.btnR.seagreen { background: seagreen;   }
.btnR.seagreen200 { background: seagreen;  width:200px; }

.btn.violet { background: violet;   }
.btn.violet200 { background: violet;  width:200px; }
.btnR.violet { background: violet;   }
.btnR.violet200 { background: violet;  width:200px; }

.btn.blueviolet { background: blueviolet;   }
.btn.blueviolet200 { background: blueviolet;  width:200px; }
.btnR.blueviolet { background: blueviolet;   }
.btnR.blueviolet200 { background: blueviolet;  width:200px; }

.btn.hotpink { background: hotpink;   }
.btn.hotpink200 { background: hotpink;  width:200px; }
.btnR.hotpink { background: hotpink;   }
.btnR.hotpink200 { background: hotpink;  width:200px; }

.btn.orangered { background: orangered;   }
.btn.orangered200 { background: orangered;  width:200px; }
.btnR.orangered { background: orangered;   }
.btnR.orangered200 { background: orangered;  width:200px; }

.btn.saddlebrown { background: saddlebrown;   }
.btn.saddlebrown200 { background: saddlebrown;  width:200px; }
.btnR.saddlebrown { background: saddlebrown;   }
.btnR.saddlebrown200 { background: saddlebrown;  width:200px; }

.btn.yellowgreen { background: yellowgreen;  }
.btn.yellowgreen200 { background: yellowgreen;  width:200px; }
.btnR.yellowgreen { background: yellowgreen;  }
.btnR.yellowgreen200 { background: yellowgreen;  width:200px; }

.btn.tomato { background: tomato;   }
.btn.tomato200 { background: tomato;  width:200px; }
.btnR.tomato { background: tomato;   }
.btnR.tomato200 { background: tomato;  width:200px; }

.btn.mediumvioletred { background: mediumvioletred;   }
.btn.mediumvioletred200 { background: mediumvioletred;  width:200px; }
.btnR.mediumvioletred { background: mediumvioletred;   }
.btnR.mediumvioletred200 { background: mediumvioletred;  width:200px; }

.btn.limegreen { background: limegreen;  }
.btn.limegreen200 { background: limegreen;  width:200px; }
.btnR.limegreen { background: limegreen;  }
.btnR.limegreen200 { background: limegreen;  width:200px; }

.btn.indianred { background: indianred;  }
.btn.indianred200 { background: indianred;  width:200px; }
.btnR.indianred { background: indianred;  }
.btnR.indianred200 { background: indianred;  width:200px; }

.btn.steelblue { background: steelblue; }
.btn.steelblue200 { background: steelblue;  width:200px; }
.btnR.steelblue { background: steelblue; }
.btnR.steelblue200 { background: steelblue;  width:200px; }
/* template buttons*/


.btn.pink { background: #e1a; }
.btn.pink200 { background: #e1a;  width:200px; }
.btn:hover { background-color: #a00; }
.btn:active { background-color: #444; }
.btn[class] {  background-image: url(shade.png); background-position: bottom; }
* html .btn { border: 3px double #aaa; }
* html .btn.blue { border-color: #2ae; }
* html .btn.green { border-color: #9d4; }
* html .btn.pink { border-color: #e1a; }
* html .btn:hover { border-color: #a00; }
p { clear: both; padding-bottom: 2em; }
textarea { margin: 1em 0;}




/*---------- centered button ----------*/
.btnC { display: block; position: relative; background: #aaa; padding: 5px; width: 120px; margin: 0px auto; color: #fff; text-decoration: none; cursor: pointer; text-align: center; }
.btnC * { font-style: normal; background-image: url('btn2.png'); background-repeat: no-repeat; display: block; position: relative; }
.btnC i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
.btnC span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btnC span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btnC span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

* html .btnC span,
* html .btnC i { width: 120px; text-align: center; padding: 0px; display: block; margin: 0px auto; background-image: none; cursor: pointer; }

.btnC.blue { background: #2ae; }
.btnC.green { background: #9d4; }
.btnC.lime { background: #bbce00; }
.btnC.pink { background: #e1a; }
.btnC:hover { background-color: #a00; color: #fff; }
.btnC:active { background-color: #444; color: #fff; }
.btnC[class] {  background-image: url('btn.png'); background-position: bottom; }

* html .btnC { border: 3px double #aaa; }
* html .btnC.blue { border-color: #2ae; }
* html .btnC.green { border-color: #9d4; }
* html .btnC.lime { border-color: #bbce00; }
* html .btnC.pink { border-color: #e1a; }
* html .btnC:hover { border-color: #a00; }

/*---------- centered button ----------*/
.btnC2 { display: block; position: relative; background: #aaa; padding: 5px; margin: 0px auto; min-width: 100px; max-width: 490px; color: #fff; text-decoration: none; cursor: pointer; text-align: center; }
.btnC2 * { font-style: normal; background-image: url('btn2.png'); background-repeat: no-repeat; display: block; position: relative; text-align: center; }
.btnC2 i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
.btnC2 span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btnC2 span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btnC2 span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

* html .btnC2 span,
* html .btnC2 i { width: auto; text-align: center; padding: 0px; margin: 0px auto; background-image: none; cursor: pointer; }

.btnC2.blue { background: #2ae; }
.btnC2.green { background: #9d4; }
.btnC2.lime { background: #bbce00; }
.btnC2.pink { background: #e1a; }
.btnC2:hover { background-color: #a00; color: #fff; }
.btnC2:active { background-color: #444; color: #fff; }
.btnC2[class] {  background-image: url('btn.png'); background-position: bottom; }

* html .btnC2 { border: 3px double #aaa; }
* html .btnC2.blue { border-color: #2ae; }
* html .btnC2.green { border-color: #9d4; }
* html .btnC2.lime { border-color: #bbce00; }
* html .btnC2.pink { border-color: #e1a; }
* html .btnC2:hover { border-color: #a00; }

/*---------- right aligned button ----------*/
.btnR { display: block; position: relative; background: #aaa; padding: 5px; float: right; color: #fff; text-decoration: none; cursor: pointer; }
.btnR * { font-style: normal; background-image: url('btn2.png'); background-repeat: no-repeat; display: block; position: relative; }
.btnR i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
.btnR span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btnR span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btnR span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

* html .btnR span,
* html .btnR i { float: right; width: auto; background-image: none; cursor: pointer; }

.btnR.blue { background: #2ae; }
.btnR.green { background: #9d4; }
.btnR.lime { background: #bbce00; }
.btnR.pink { background: #e1a; }
.btnR:hover { background-color: #a00; color: #fff; }
.btnR:active { background-color: #444; color: #fff; }
.btnR[class] {  background-image: url('btn.png'); background-position: bottom; }

* html .btnR { border: 3px double #aaa; }
* html .btnR.blue { border-color: #2ae; }
* html .btnR.green { border-color: #9d4; }
* html .btnR.lime { border-color: #bbce00; }
* html .btnR.pink { border-color: #e1a; }
* html .btnR:hover { border-color: #a00; }