1/* --------------------------------------------------------------
2
3   buttons.css
4   * Gives you some great CSS-only buttons.
5
6   Created by Kevin Hale [particletree.com]
7   * particletree.com/features/rediscovering-the-button-element
8
9   See Readme.txt in this folder for instructions.
10
11-------------------------------------------------------------- */
12
13a.button, input.button, button {
14  display:block;
15  float:left;
16  margin:0 0.583em 0.667em 0;
17  padding:5px 10px 5px 7px;   /* Links */
18
19  border:1px solid #dedede;
20  border-top:1px solid #eee;
21  border-left:1px solid #eee;
22
23  background-color:#f5f5f5;
24  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
25  font-size:100%;
26  line-height:130%;
27  text-decoration:none;
28  font-weight:bold;
29  color:#565656;
30  cursor:pointer;
31}
32button {
33  width:auto;
34  overflow:visible;
35  padding:4px 10px 3px 7px;   /* IE6 */
36}
37button[type] {
38  padding:4px 10px 4px 7px;   /* Firefox */
39  line-height:17px;           /* Safari */
40}
41*:first-child+html button[type] {
42  padding:4px 10px 3px 7px;   /* IE7 */
43}
44button img, a.button img, input.button img{
45  margin:0 3px -3px 0 !important;
46  padding:0;
47  border:none;
48  width:16px;
49  height:16px;
50  float:none;
51}
52
53
54/* Button colors
55-------------------------------------------------------------- */
56
57/* Standard */
58button:hover, input.button:hover, a.button:hover{
59  background-color:#dff4ff;
60  border:1px solid #c2e1ef;
61  color:#336699;
62}
63a.button:active{
64  background-color:#6299c5;
65  border:1px solid #6299c5;
66  color:#fff;
67}
68
69/* Positive */
70body .positive {
71  color:#529214;
72}
73a.positive:hover, button.positive:hover {
74  background-color:#E6EFC2;
75  border:1px solid #C6D880;
76  color:#529214;
77}
78a.positive:active {
79  background-color:#529214;
80  border:1px solid #529214;
81  color:#fff;
82}
83
84/* Negative */
85body .negative {
86  color:#d12f19;
87}
88a.negative:hover, button.negative:hover {
89  background:#fbe3e4;
90  border:1px solid #fbc2c4;
91  color:#d12f19;
92}
93a.negative:active {
94  background-color:#d12f19;
95  border:1px solid #d12f19;
96  color:#fff;
97}
98