6 font-family: Helvetica, Arial, sans-serif;
11 text-decoration: none;
12 text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);
15 background: -moz-linear-gradient(top, #43a6e2, #287cc2);
16 background: -ms-linear-gradient(top, #43a6e2, #287cc2);
17 background: -o-linear-gradient(top, #43a6e2, #287cc2);
18 background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
19 background: linear-gradient(top, #43a6e2, #287cc2);
21 -moz-border-radius: 3px;
22 -ms-border-radius: 3px;
23 -o-border-radius: 3px;
24 -webkit-border-radius: 3px;
27 -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
28 -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
29 -o-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
30 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
31 box-shadow: 0 1px 0 rgba(0,0,0,0.2);
34 .persona-button:hover{
36 background: -moz-linear-gradient(top, #3788b9, #21669f);
37 background: -ms-linear-gradient(top, #3788b9, #21669f);
38 background: -o-linear-gradient(top, #3788b9, #21669f);
39 background: -webkit-linear-gradient(top, #3788b9, #21669f);
40 background: linear-gradient(top, #3788b9, #21669f);
43 .persona-button:active, .persona-button:focus{
45 -moz-box-shadow: none;
48 -webkit-box-shadow: none;
53 display: inline-block;
54 padding: 5px 10px 5px 40px;
58 .persona-button span:after{
59 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat;
72 .persona-button span:before{
85 background: -moz-linear-gradient(top, #50b8e8, #3095ce);
86 background: -ms-linear-gradient(top, #50b8e8, #3095ce);
87 background: -o-linear-gradient(top, #50b8e8, #3095ce);
88 background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
89 background: linear-gradient(top, #50b8e8, #3095ce);
91 -moz-border-radius: 3px 0 0 3px;
92 -ms-border-radius: 3px 0 0 3px;
93 -o-border-radius: 3px 0 0 3px;
94 -webkit-border-radius: 3px 0 0 3px;
95 border-radius: 3px 0 0 3px;
99 .persona-button:before{
112 background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
113 background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
114 background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
115 background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
116 background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */
118 -moz-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
119 -ms-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
120 -o-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
121 -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
122 box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
124 -moz-transform: rotate(45deg);
125 -ms-transform: rotate(45deg);
126 -o-transform: rotate(45deg);
127 -webkit-transform: rotate(45deg);
128 transform: rotate(45deg);
131 /* Inset shadow (required here because the icon background clips it when on the `a` element) */
132 .persona-button:after{
145 -moz-border-radius: 3px;
146 -ms-border-radius: 3px;
147 -o-border-radius: 3px;
148 -webkit-border-radius: 3px;
151 -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
152 -ms-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
153 -o-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
154 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
155 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
158 /* ========================================================
160 * ===================================================== */
161 .persona-button.dark{
163 background: -moz-linear-gradient(top, #606060, #3c3c3c);
164 background: -ms-linear-gradient(top, #606060, #3c3c3c);
165 background: -o-linear-gradient(top, #606060, #3c3c3c);
166 background: -webkit-linear-gradient(top, #606060, #3c3c3c);
167 background: linear-gradient(top, #606060, #3c3c3c);
169 .persona-button.dark:hover{
171 background: -moz-linear-gradient(top, #484848, #2d2d2d);
172 background: -ms-linear-gradient(top, #484848, #2d2d2d);
173 background: -o-linear-gradient(top, #484848, #2d2d2d);
174 background: -webkit-linear-gradient(top, #484848, #2d2d2d);
175 background: linear-gradient(top, #484848, #2d2d2d);
177 .persona-button.dark span:before{ /* Icon BG */
179 background: -moz-linear-gradient(top, #ebac45, #d34f2d);
180 background: -ms-linear-gradient(top, #ebac45, #d34f2d);
181 background: -o-linear-gradient(top, #ebac45, #d34f2d);
182 background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
183 background: linear-gradient(top, #ebac45, #d34f2d);
185 .persona-button.dark:before{ /* Triangle */
187 background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
188 background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
189 background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
190 background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
191 background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
194 /* ========================================================
196 * ===================================================== */
197 .persona-button.orange{
199 background: -moz-linear-gradient(top, #ee731a, #d03116);
200 background: -ms-linear-gradient(top, #ee731a, #d03116);
201 background: -o-linear-gradient(top, #ee731a, #d03116);
202 background: -webkit-linear-gradient(top, #ee731a, #d03116);
203 background: linear-gradient(top, #ee731a, #d03116);
205 .persona-button.orange:hover{
207 background: -moz-linear-gradient(top, #cb6216, #b12a13);
208 background: -ms-linear-gradient(top, #cb6216, #b12a13);
209 background: -o-linear-gradient(top, #cb6216, #b12a13);
210 background: -webkit-linear-gradient(top, #cb6216, #b12a13);
211 background: linear-gradient(top, #cb6216, #b12a13);
213 .persona-button.orange span:before{ /* Icon BG */
215 background: -moz-linear-gradient(top, #f7ad27, #e84a21);
216 background: -ms-linear-gradient(top, #f7ad27, #e84a21);
217 background: -o-linear-gradient(top, #f7ad27, #e84a21);
218 background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
219 background: linear-gradient(top, #f7ad27, #e84a21);
221 .persona-button.orange:before{ /* Triangle */
223 background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
224 background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
225 background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
226 background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
227 background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */