1 | .socialbutt { |
---|
2 | display:inline-block; |
---|
3 | position:relative; |
---|
4 | vertical-align:top; |
---|
5 | margin:8px; |
---|
6 | width:500px; |
---|
7 | border:8px solid #f9f9f9; |
---|
8 | border-radius:10px; |
---|
9 | box-shadow:0 0 5px rgba(0,0,0,0.2); |
---|
10 | } |
---|
11 | .socialbutt table { |
---|
12 | border-spacing: 0px; |
---|
13 | width:100%; |
---|
14 | } |
---|
15 | |
---|
16 | .socialbutt.disabled table tbody { |
---|
17 | display:none; |
---|
18 | } |
---|
19 | |
---|
20 | .socialbutt td { |
---|
21 | width:50%; |
---|
22 | padding:10px 5px; |
---|
23 | background-color:#ECF6FA; |
---|
24 | border:1px solid #fff; |
---|
25 | border-right-color:#CDE8F4; |
---|
26 | border-bottom-color:#CDE8F4; |
---|
27 | text-align:center; |
---|
28 | vertical-align:center; |
---|
29 | font-weight:normal; |
---|
30 | } |
---|
31 | .socialbutt thead td { |
---|
32 | border-top:none; |
---|
33 | } |
---|
34 | .socialbutt thead label { |
---|
35 | display:block; |
---|
36 | width:100%; |
---|
37 | } |
---|
38 | .socialbutt tr td:last-child { |
---|
39 | border-right:none; |
---|
40 | } |
---|
41 | .socialbutt tbody tr:last-child td { |
---|
42 | border-bottom:none; |
---|
43 | } |
---|
44 | .socialbutt tr.button td { |
---|
45 | padding:10px 20px; |
---|
46 | } |
---|
47 | .socialbutt tr.button td:hover { |
---|
48 | background-color:#D0E7F2; |
---|
49 | } |
---|
50 | .socialbutt tr.property td:first-child { |
---|
51 | font-weight:bold; |
---|
52 | } |
---|
53 | .socialbutt tbody tr td:first-child { |
---|
54 | text-align:right; |
---|
55 | } |
---|
56 | .socialbutt tbody tr td:last-child { |
---|
57 | text-align:left; |
---|
58 | } |
---|
59 | |
---|
60 | .socialbutt img { |
---|
61 | vertical-align:bottom; |
---|
62 | } |
---|
63 | |
---|
64 | .socialbutt input[type='text'], .socialbutt select { |
---|
65 | background:#eee; |
---|
66 | color:#888; |
---|
67 | border:1px solid #aaa; |
---|
68 | border-radius:4px; |
---|
69 | box-shadow:inset 0 1px 0 rgba(0,0,0,0.05); |
---|
70 | padding:5px; |
---|
71 | } |
---|
72 | .socialbutt input[type='text']:focus, .socialbutt select:focus { |
---|
73 | background:#fff; |
---|
74 | border-color:#3399ff; |
---|
75 | } |
---|
76 | |
---|
77 | .submit { |
---|
78 | display:inline-block; |
---|
79 | margin:10px; |
---|
80 | } |
---|
81 | .submit input { |
---|
82 | background: #33bbee; |
---|
83 | background: -moz-linear-gradient(top, #33bbee 0%, #339dde 100%); |
---|
84 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#33bbee), color-stop(100%,#339dde)); |
---|
85 | background: -webkit-linear-gradient(top, #33bbee 0%,#339dde 100%); |
---|
86 | background: -o-linear-gradient(top, #33bbee 0%,#339dde 100%); |
---|
87 | background: -ms-linear-gradient(top, #33bbee 0%,#339dde 100%); |
---|
88 | background: linear-gradient(to bottom, #33bbee 0%,#339dde 100%); |
---|
89 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33bbee', endColorstr='#339dde',GradientType=0 ); |
---|
90 | |
---|
91 | border-color: #3399DD #3399DD #2288CC; |
---|
92 | color: #FFFFFF !important; |
---|
93 | font-size: 14px; |
---|
94 | text-shadow: -1px -1px 0 #3399DD; |
---|
95 | border-radius: 5px; |
---|
96 | border-style: solid; |
---|
97 | border-width: 1px; |
---|
98 | padding: 5px 9px !important; |
---|
99 | letter-spacing:0.1em; |
---|
100 | } |
---|
101 | .submit input:hover { |
---|
102 | box-shadow: 0 0 5px #2288CC; |
---|
103 | border-color: #3399DD #3399DD #2288CC; |
---|
104 | } |
---|
105 | |
---|
106 | .socialbutt thead label:before { |
---|
107 | position:absolute; |
---|
108 | top:15px; |
---|
109 | left:10px; |
---|
110 | font-size:22px; |
---|
111 | color:#000; |
---|
112 | } |
---|
113 | .socialbutt.disabled thead label:before { |
---|
114 | content:"\2610"; |
---|
115 | } |
---|
116 | .socialbutt.enabled thead label:before { |
---|
117 | content:"\2611"; |
---|
118 | } |
---|