| Lines 1-232
          
      
      
        Link Here | 
            
              | 1 | /* Link body */ |  |  | 
            
              | 2 | a.persona-button { | 
            
              | 3 |   color : #FFF; | 
            
              | 4 | } | 
            
              | 5 |  | 
            
              | 6 | .persona-button{ | 
            
              | 7 |   color: #fff; | 
            
              | 8 |   display: inline-block; | 
            
              | 9 |   font-size: 14px; | 
            
              | 10 |   font-family: Helvetica, Arial, sans-serif; | 
            
              | 11 |   font-weight: bold; | 
            
              | 12 |   line-height: 1.1; | 
            
              | 13 |   overflow: hidden; | 
            
              | 14 |   position: relative; | 
            
              | 15 |   text-decoration: none; | 
            
              | 16 |   text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2); | 
            
              | 17 |  | 
            
              | 18 |   background: #297dc3; | 
            
              | 19 |   background: -moz-linear-gradient(top, #43a6e2, #287cc2); | 
            
              | 20 |   background: -ms-linear-gradient(top, #43a6e2, #287cc2); | 
            
              | 21 |   background: -o-linear-gradient(top, #43a6e2, #287cc2); | 
            
              | 22 |   background: -webkit-linear-gradient(top, #43a6e2, #287cc2); | 
            
              | 23 |   background: linear-gradient(to bottom, #43a6e2 0%,#287cc2 100%); /* W3C */ | 
            
              | 24 |  | 
            
              | 25 |   -moz-border-radius:   3px; | 
            
              | 26 |   -ms-border-radius:     3px; | 
            
              | 27 |   -o-border-radius:     3px; | 
            
              | 28 |   -webkit-border-radius:   3px; | 
            
              | 29 |   border-radius:       3px; | 
            
              | 30 |  | 
            
              | 31 |   -moz-box-shadow:   0 1px 0 rgba(0,0,0,0.2); | 
            
              | 32 |   -ms-box-shadow:   0 1px 0 rgba(0,0,0,0.2); | 
            
              | 33 |   -o-box-shadow:     0 1px 0 rgba(0,0,0,0.2); | 
            
              | 34 |   -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2); | 
            
              | 35 |   box-shadow:     0 1px 0 rgba(0,0,0,0.2); | 
            
              | 36 | } | 
            
              | 37 |  | 
            
              | 38 | .persona-button:hover{ | 
            
              | 39 |   background: #21669f; | 
            
              | 40 |   background: -moz-linear-gradient(top, #3788b9, #21669f); | 
            
              | 41 |   background: -ms-linear-gradient(top, #3788b9, #21669f); | 
            
              | 42 |   background: -o-linear-gradient(top, #3788b9, #21669f); | 
            
              | 43 |   background: -webkit-linear-gradient(top, #3788b9, #21669f); | 
            
              | 44 |   background: linear-gradient(to bottom, #3788b9 0%,#21669f 100%); /* W3C */ | 
            
              | 45 | } | 
            
              | 46 |  | 
            
              | 47 | .persona-button:active, .persona-button:focus{ | 
            
              | 48 |   top: 1px; | 
            
              | 49 |   -moz-box-shadow:   none; | 
            
              | 50 |   -ms-box-shadow:   none; | 
            
              | 51 |   -o-box-shadow:     none; | 
            
              | 52 |   -webkit-box-shadow: none; | 
            
              | 53 |   box-shadow:     none; | 
            
              | 54 | } | 
            
              | 55 |  | 
            
              | 56 | .persona-button span{ | 
            
              | 57 |   display: inline-block; | 
            
              | 58 |   padding: 5px 10px 5px 40px; | 
            
              | 59 | } | 
            
              | 60 |  | 
            
              | 61 | /* Icon */ | 
            
              | 62 | .persona-button span:after{ | 
            
              | 63 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat; | 
            
              | 64 |   content: ''; | 
            
              | 65 |   display: block; | 
            
              | 66 |   width: 31px; | 
            
              | 67 |  | 
            
              | 68 |   position: absolute; | 
            
              | 69 |   bottom: 0; | 
            
              | 70 |   left: -3px; | 
            
              | 71 |   top: 0; | 
            
              | 72 |   z-index: 10; | 
            
              | 73 | } | 
            
              | 74 |  | 
            
              | 75 | /*  Icon background */ | 
            
              | 76 | .persona-button span:before{ | 
            
              | 77 |   content: ''; | 
            
              | 78 |   display: block; | 
            
              | 79 |   height: 100%; | 
            
              | 80 |   width: 20px; | 
            
              | 81 |  | 
            
              | 82 |   position: absolute; | 
            
              | 83 |   bottom: 0; | 
            
              | 84 |   left: 0; | 
            
              | 85 |   top: 0; | 
            
              | 86 |   z-index: 1; | 
            
              | 87 |  | 
            
              | 88 |   background: #42a9dd; | 
            
              | 89 |   background: -moz-linear-gradient(top, #50b8e8, #3095ce); | 
            
              | 90 |   background: -ms-linear-gradient(top, #50b8e8, #3095ce); | 
            
              | 91 |   background: -o-linear-gradient(top, #50b8e8, #3095ce); | 
            
              | 92 |   background: -webkit-linear-gradient(top, #50b8e8, #3095ce); | 
            
              | 93 |   background: linear-gradient(to bottom, #50b8e8 0%,#3095ce 100%); /* W3C */ | 
            
              | 94 |  | 
            
              | 95 |   -moz-border-radius:   3px 0 0 3px; | 
            
              | 96 |   -ms-border-radius:     3px 0 0 3px; | 
            
              | 97 |   -o-border-radius:     3px 0 0 3px; | 
            
              | 98 |   -webkit-border-radius:   3px 0 0 3px; | 
            
              | 99 |   border-radius:       3px 0 0 3px; | 
            
              | 100 | } | 
            
              | 101 |  | 
            
              | 102 | /* Triangle */ | 
            
              | 103 | .persona-button:before{ | 
            
              | 104 |   background: #42a9dd; | 
            
              | 105 |   content: ''; | 
            
              | 106 |   display: block; | 
            
              | 107 |   height: 26px; | 
            
              | 108 |   width: 26px; | 
            
              | 109 |  | 
            
              | 110 |   position: absolute; | 
            
              | 111 |   left: 2px; | 
            
              | 112 |   top: 50%; | 
            
              | 113 |   margin-top: -13px; | 
            
              | 114 |   z-index: 0; | 
            
              | 115 |  | 
            
              | 116 |   background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce); | 
            
              | 117 |   background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce); | 
            
              | 118 |   background: -o-linear-gradient(-45deg, #50b8e8, #3095ce); | 
            
              | 119 |   background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce); | 
            
              | 120 |   background: linear-gradient(to bottom, #50b8e8 0%,#3095ce 100%); /* W3C */ | 
            
              | 121 |  | 
            
              | 122 |   -moz-box-shadow:   1px -1px 1px rgba(0,0,0,0.1); | 
            
              | 123 |   -ms-box-shadow:   1px -1px 1px rgba(0,0,0,0.1); | 
            
              | 124 |   -o-box-shadow:     1px -1px 1px rgba(0,0,0,0.1); | 
            
              | 125 |   -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); | 
            
              | 126 |   box-shadow:     1px -1px 1px rgba(0,0,0,0.1); | 
            
              | 127 |  | 
            
              | 128 |   -moz-transform:   rotate(45deg); | 
            
              | 129 |   -ms-transform:     rotate(45deg); | 
            
              | 130 |   -o-transform:     rotate(45deg); | 
            
              | 131 |   -webkit-transform:   rotate(45deg); | 
            
              | 132 |   transform:       rotate(45deg); | 
            
              | 133 | } | 
            
              | 134 |  | 
            
              | 135 | /* Inset shadow (required here because the icon background clips it when on the `a` element) */ | 
            
              | 136 | .persona-button:after{ | 
            
              | 137 |   content: ''; | 
            
              | 138 |   display: block; | 
            
              | 139 |   height: 100%; | 
            
              | 140 |   width: 100%; | 
            
              | 141 |  | 
            
              | 142 |   position: absolute; | 
            
              | 143 |   left: 0; | 
            
              | 144 |   top: 0; | 
            
              | 145 |   bottom: 0; | 
            
              | 146 |   right: 0; | 
            
              | 147 |   z-index: 10; | 
            
              | 148 |  | 
            
              | 149 |   -moz-border-radius:   3px; | 
            
              | 150 |   -ms-border-radius:     3px; | 
            
              | 151 |   -o-border-radius:     3px; | 
            
              | 152 |   -webkit-border-radius:   3px; | 
            
              | 153 |   border-radius:       3px; | 
            
              | 154 |  | 
            
              | 155 |   -moz-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3); | 
            
              | 156 |   -ms-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3); | 
            
              | 157 |   -o-box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3); | 
            
              | 158 |   -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); | 
            
              | 159 |   box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3); | 
            
              | 160 | } | 
            
              | 161 |  | 
            
              | 162 | /* ======================================================== | 
            
              | 163 |  *    Dark button | 
            
              | 164 |  * ===================================================== */ | 
            
              | 165 | .persona-button.dark{ | 
            
              | 166 |   background: #3c3c3c; | 
            
              | 167 |   background: -moz-linear-gradient(top, #606060, #3c3c3c); | 
            
              | 168 |   background: -ms-linear-gradient(top, #606060, #3c3c3c); | 
            
              | 169 |   background: -o-linear-gradient(top, #606060, #3c3c3c); | 
            
              | 170 |   background: -webkit-linear-gradient(top, #606060, #3c3c3c); | 
            
              | 171 |   background: linear-gradient(top, #606060, #3c3c3c); | 
            
              | 172 | } | 
            
              | 173 | .persona-button.dark:hover{ | 
            
              | 174 |   background: #2d2d2d; | 
            
              | 175 |   background: -moz-linear-gradient(top, #484848, #2d2d2d); | 
            
              | 176 |   background: -ms-linear-gradient(top, #484848, #2d2d2d); | 
            
              | 177 |   background: -o-linear-gradient(top, #484848, #2d2d2d); | 
            
              | 178 |   background: -webkit-linear-gradient(top, #484848, #2d2d2d); | 
            
              | 179 |   background: linear-gradient(top, #484848, #2d2d2d); | 
            
              | 180 | } | 
            
              | 181 | .persona-button.dark span:before{ /* Icon BG */ | 
            
              | 182 |   background: #d34f2d; | 
            
              | 183 |   background: -moz-linear-gradient(top, #ebac45, #d34f2d); | 
            
              | 184 |   background: -ms-linear-gradient(top, #ebac45, #d34f2d); | 
            
              | 185 |   background: -o-linear-gradient(top, #ebac45, #d34f2d); | 
            
              | 186 |   background: -webkit-linear-gradient(top, #ebac45, #d34f2d); | 
            
              | 187 |   background: linear-gradient(top, #ebac45, #d34f2d); | 
            
              | 188 | } | 
            
              | 189 | .persona-button.dark:before{ /* Triangle */ | 
            
              | 190 |   background: #d34f2d; | 
            
              | 191 |   background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d); | 
            
              | 192 |   background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d); | 
            
              | 193 |   background: -o-linear-gradient(-45deg, #ebac45, #d34f2d); | 
            
              | 194 |   background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d); | 
            
              | 195 |   background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */ | 
            
              | 196 | } | 
            
              | 197 |  | 
            
              | 198 | /* ======================================================== | 
            
              | 199 |  *    Orange button | 
            
              | 200 |  * ===================================================== */ | 
            
              | 201 | .persona-button.orange{ | 
            
              | 202 |   background: #ee731a; | 
            
              | 203 |   background: -moz-linear-gradient(top, #ee731a, #d03116); | 
            
              | 204 |   background: -ms-linear-gradient(top, #ee731a, #d03116); | 
            
              | 205 |   background: -o-linear-gradient(top, #ee731a, #d03116); | 
            
              | 206 |   background: -webkit-linear-gradient(top, #ee731a, #d03116); | 
            
              | 207 |   background: linear-gradient(top, #ee731a, #d03116); | 
            
              | 208 | } | 
            
              | 209 | .persona-button.orange:hover{ | 
            
              | 210 |   background: #cb6216; | 
            
              | 211 |   background: -moz-linear-gradient(top, #cb6216, #b12a13); | 
            
              | 212 |   background: -ms-linear-gradient(top, #cb6216, #b12a13); | 
            
              | 213 |   background: -o-linear-gradient(top, #cb6216, #b12a13); | 
            
              | 214 |   background: -webkit-linear-gradient(top, #cb6216, #b12a13); | 
            
              | 215 |   background: linear-gradient(top, #cb6216, #b12a13); | 
            
              | 216 | } | 
            
              | 217 | .persona-button.orange span:before{ /* Icon BG */ | 
            
              | 218 |   background: #e84a21; | 
            
              | 219 |   background: -moz-linear-gradient(top, #f7ad27, #e84a21); | 
            
              | 220 |   background: -ms-linear-gradient(top, #f7ad27, #e84a21); | 
            
              | 221 |   background: -o-linear-gradient(top, #f7ad27, #e84a21); | 
            
              | 222 |   background: -webkit-linear-gradient(top, #f7ad27, #e84a21); | 
            
              | 223 |   background: linear-gradient(top, #f7ad27, #e84a21); | 
            
              | 224 | } | 
            
              | 225 | .persona-button.orange:before{ /* Triangle */ | 
            
              | 226 |   background: #e84a21; | 
            
              | 227 |   background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21); | 
            
              | 228 |   background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21); | 
            
              | 229 |   background: -o-linear-gradient(-45deg, #f7ad27, #e84a21); | 
            
              | 230 |   background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21); | 
            
              | 231 |   background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */ | 
            
              | 232 | } |