﻿.btn{
  display: block;
  position: relative;
  *position:inherit;
  background: #aaa;
  padding: 5px;
  float: left;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.btn *{
  font-style: normal;
  /*background-image: url(../images/btn2.png);*/
  background-repeat: no-repeat;
  display: block;
  position: relative;
  *position:inherit;
}

.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.blue{
  background: #2ae;
}

.btn.green{
  background: #9d4;
}

.btn.pink{
  background: #e1a;
}

.btn.yellow{
  background: #ffd000;
}

.btn:hover{
  background-color: #a00;
}

.btn:active{
  background-color: #444;
}

.btn[class]{
  background-image: url(../images/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;
}

form{
  margin-top: 2em;
}

form p .btn{
  margin-right: 1em;
}

textarea{
  margin: 1em 0;
}
