/*
IEでも崩れないCSS3ボタン集

■2010-05-16
http://www.webdesignerwall.com/demo/css-buttons.html のスタイルを拝借。
IEは角丸にならないだけでほとんど同じ見た目になる

■2010-05-17
既存のCSSに負けまくるので止むを得ず、firebug で負けている部分を確認して ! important を付加。
リファクタリング後には ! important を取ること。

■2010-05-24
優先度が弱過ぎて話にならんので全部に ! important をつけてやった

使用例:

  <div>
    <a href="#" class="button orange">Orange</a>
    <a href="#" class="button orange bigrounded">Rounded</a>
    <a href="#" class="button orange medium">Medium</a>
    <a href="#" class="button orange small">Small</a>
    <br /><br />
    <input class="button orange" type="button" value="Input Element" />
    <button class="button orange">Button Tag</button>
    <span class="button orange">Span</span>
    <div class="button orange">Div</div>
    <p class="button orange">P Tag</p>
    <h3 class="button orange">H3</h3>
  </div>

*/

/*
body {
  background: #ededed;
  width: 900px;
  margin: 30px auto;
  color: #999;
}
p {
  margin: 0 0 2em;
}
h1 {
  margin: 0;
}
a {
  color: #339;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
div {
  padding: 20px 0;
  border-bottom: solid 1px #ccc;
}
*/

/* button
---------------------------------------------- */
.button {
  display: inline-block ! important;
  zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline ! important;
  vertical-align: baseline ! important;
  margin: 0 2px ! important;
  outline: none ! important;
  cursor: pointer ! important;
  text-align: center ! important;
  text-decoration: none ! important;
  font: 14px/100% Arial, Helvetica, sans-serif ! important;
  padding: .5em 2em .55em ! important;
  text-shadow: 0 1px 1px rgba(0,0,0,.3) ! important;
  -webkit-border-radius: .5em ! important;
  -moz-border-radius: .5em ! important;
  border-radius: .5em ! important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2) ! important;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2) ! important;
  box-shadow: 0 1px 2px rgba(0,0,0,.2) ! important;
}
.button:hover {
  text-decoration: none ! important;
}
.button:active {
  position: relative ! important;
  top: 1px ! important;
}

.bigrounded {
  -webkit-border-radius: 2em ! important;
  -moz-border-radius: 2em ! important;
  border-radius: 2em ! important;
}
.medium {
  font-size: 12px ! important;
  padding: .4em 1.5em .42em ! important;
}
.small {
  font-size: 11px ! important;
  padding: .2em 1em .275em ! important;
}

/* color styles
---------------------------------------------- */

/* black */
.black {
  color: #d7d7d7 ! important;
  border: solid 1px #333 ! important;
  background: #333 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)) ! important;
  background: -moz-linear-gradient(top, #666, #000) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000') ! important;
}
.black:hover {
  background: #000 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)) ! important;
  background: -moz-linear-gradient(top, #444, #000) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000') ! important;
}
.black:active {
  color: #666 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)) ! important;
  background: -moz-linear-gradient(top, #000, #444) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666') ! important;
}

/* gray */
.gray {
  color: #e9e9e9 ! important;
  border: solid 1px #555 ! important;
  background: #6e6e6e ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)) ! important;
  background: -moz-linear-gradient(top, #888, #575757) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757') ! important;
}
.gray:hover {
  background: #616161 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)) ! important;
  background: -moz-linear-gradient(top, #757575, #4b4b4b) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b') ! important;
}
.gray:active {
  color: #afafaf ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)) ! important;
  background: -moz-linear-gradient(top, #575757, #888) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888') ! important;
}

/* white */
.white {
  color: #606060 ! important;
  border: solid 1px #b7b7b7 ! important;
  background: #fff ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)) ! important;
  background: -moz-linear-gradient(top, #fff, #ededed) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed') ! important;
}
.white:hover {
  background: #ededed ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)) ! important;
  background: -moz-linear-gradient(top, #fff, #dcdcdc) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc') ! important;
}
.white:active {
  color: #999 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)) ! important;
  background: -moz-linear-gradient(top, #ededed, #fff) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff') ! important;
}

/* orange */
.orange {
  color: #fef4e9 ! important;
  border: solid 1px #da7c0c ! important;
  background: #f78d1d ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)) ! important;
  background: -moz-linear-gradient(top, #faa51a, #f47a20) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20') ! important;
}
.orange:hover {
  background: #f47c20 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)) ! important;
  background: -moz-linear-gradient(top, #f88e11, #f06015) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015') ! important;
}
.orange:active {
  color: #fcd3a5 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)) ! important;
  background: -moz-linear-gradient(top, #f47a20, #faa51a) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a') ! important;
}

/* red */
.red {
  color: #faddde ! important;
  border: solid 1px #980c10 ! important;
  background: #d81b21 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)) ! important;
  background: -moz-linear-gradient(top, #ed1c24, #aa1317) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317') ! important;
}
.red:hover {
  background: #b61318 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)) ! important;
  background: -moz-linear-gradient(top, #c9151b, #a11115) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115') ! important;
}
.red:active {
  color: #de898c ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)) ! important;
  background: -moz-linear-gradient(top, #aa1317, #ed1c24) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24') ! important;
}

/* blue */
.blue {
  color: #d9eef7 ! important;
  border: solid 1px #0076a3 ! important;
  background: #0095cd ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)) ! important;
  background: -moz-linear-gradient(top, #00adee, #0078a5) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5') ! important;
}
.blue:hover {
  background: #007ead ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)) ! important;
  background: -moz-linear-gradient(top, #0095cc, #00678e) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e') ! important;
}
.blue:active {
  color: #80bed6 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)) ! important;
  background: -moz-linear-gradient(top, #0078a5, #00adee) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee') ! important;
}

/* rosy */
.rosy {
  color: #fae7e9 ! important;
  border: solid 1px #b73948 ! important;
  background: #da5867 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)) ! important;
  background: -moz-linear-gradient(top, #f16c7c, #bf404f) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f') ! important;
}
.rosy:hover {
  background: #ba4b58 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)) ! important;
  background: -moz-linear-gradient(top, #cf5d6a, #a53845) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845') ! important;
}
.rosy:active {
  color: #dca4ab ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c)) ! important;
  background: -moz-linear-gradient(top, #bf404f, #f16c7c) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c') ! important;
}

/* green */
.green {
  color: #e8f0de ! important;
  border: solid 1px #538312 ! important;
  background: #64991e ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)) ! important;
  background: -moz-linear-gradient(top, #7db72f, #4e7d0e) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e') ! important;
}
.green:hover {
  background: #538018 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)) ! important;
  background: -moz-linear-gradient(top, #6b9d28, #436b0c) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c') ! important;
}
.green:active {
  color: #a9c08c ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)) ! important;
  background: -moz-linear-gradient(top, #4e7d0e, #7db72f) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f') ! important;
}

/* pink */
.pink {
  color: #feeef5 ! important;
  border: solid 1px #d2729e ! important;
  background: #f895c2 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)) ! important;
  background: -moz-linear-gradient(top, #feb1d3, #f171ab) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab') ! important;
}
.pink:hover {
  background: #d57ea5 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)) ! important;
  background: -moz-linear-gradient(top, #f4aacb, #e86ca4) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4') ! important;
}
.pink:active {
  color: #f3c3d9 ! important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)) ! important;
  background: -moz-linear-gradient(top, #f171ab, #feb1d3) ! important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3') ! important;
}