/* Generic buttons */

.flbutton {
    display: inline-block;
    border-radius: 2px;
    font-family: Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    border: 1px solid #C8C8C8;
    color: #888;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    height: 32px;
    padding: 0 8px;
    margin: 0;
    line-height: 32px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
    cursor: pointer;
    background: transparent;
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.05)));
    background: -moz-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 100%);
    text-decoration: none;
}

.flbutton.left { float: left; }
.flbutton.right { float: right; }

.flbutton.dark {
    background: transparent;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.4);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.2);
}

input.flbutton, button.flbutton {
    height: 34px;
}

.flbutton.xl,
.flbutton.xl.destroy, 
.flbutton.done.xl {
    border-width: 2px;
    font-size: 32px;
    height: 64px;
    padding: 0 16px;
    line-height: 64px;
    border-radius: 4px;
    text-shadow: 0 2px 0 rgba(255,255,255,1);
}

input.flbutton.xl, button.flbutton.xl, input.flbutton.done.xl, button.flbutton.done.xl  {
    height: 68px;
}

.flbutton.medium, 
.flbutton.done.medium {
    border-width: 2px;
    font-size: 26px;
    height: 54px;
    padding: 0 16px;
    line-height: 54px;
    border-radius: 4px;
}

input.flbutton.medium, button.flbutton.medium, input.flbutton.done.medium, button.flbutton.done.medium  {
    height: 58px;
}

.flbutton.fb,
.flbutton.gp {
    color: #FFF;
    font-size: 18px;
    height: 48px;
    line-height: 32px;
    margin: 0;
    padding: 0 20px 0 54px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 rgba(255,255,255,0.2);
    height: 50px;
}

.flbutton.gp {
    background-color: #dd4b39;
    border-color: #bb3f30;
    background-image: url(../bookmarklet/images/gpicon.png);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 33px 33px;
}

.flbutton.gp:hover {
    background-color: #e74b37;
    color: #FFF;
    background-image: url(../bookmarklet/images/gpicon.png);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 33px 33px;
}

.flbutton.fb {
    border-color: #1C2859;
    background: rgba(61,91,153,1);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(94,119,170,1)), color-stop(100%,rgba(61,91,153,1)));
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -moz-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -o-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -ms-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, linear-gradient(to bottom, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background-size: 32px 32px, cover;
}

.flbutton.fb.xl {
    font-size: 26px;
    line-height: 64px;
    color: #FFF;
    border-color: #1C2859;
    background: rgba(61,91,153,1);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(94,119,170,1)), color-stop(100%,rgba(61,91,153,1)));
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -moz-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -o-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -ms-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, linear-gradient(to bottom, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
    background-size: 48px 48px, cover;
    padding: 0 20px 0 70px;
    text-shadow: 0 -2px 0 rgba(0,0,0,0.4);
    box-shadow: 0 2px 0 rgba(255,255,255,1), inset 0 2px 0 rgba(255,255,255,0.2);
}

.flbutton.fb:hover {
    color: #FFF;
    background: rgba(61,91,153,1);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(61,91,153,1)), color-stop(100%,rgba(94,119,170,1)));
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -moz-linear-gradient(top, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -o-linear-gradient(top, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, -ms-linear-gradient(top, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
    background: url(../bookmarklet/images/fblogo.png) 8px center no-repeat, linear-gradient(to bottom, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
    background-size: 32px 32px, cover;
}

.flbutton.mini {
    font-family: Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif;;
    font-size: 14px;
    height: 26px;
    padding: 0 6px;
    line-height: 26px;
}

.flbutton.mini.dark {
    background: transparent;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.4);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.2);
}

.flbutton:hover,
.flbutton.mini:hover {
    color: #777;
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(0,0,0,0.03)), color-stop(100%,rgba(0,0,0,0)));
    background: -moz-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%);
}

.flbutton.dark:hover,
.flbutton.dark.mini:hover { 
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);    
}

.flbutton.done, 
.flbutton.mini.done {
    background: rgba(41,146,212,1);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(66,180,231,1)), color-stop(100%,rgba(41,146,212,1)));
    background: -moz-linear-gradient(top, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    background: -o-linear-gradient(top, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    background: -ms-linear-gradient(top, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    background: linear-gradient(to bottom, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    border: 1px solid #235A94;
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 rgba(255,255,255,0.2);
}

.flbutton.xl.done {
    text-shadow: 0 -2px 0 rgba(0,0,0,0.4);
    box-shadow: 0 2px 0 rgba(255,255,255,1), inset 0 2px 0 rgba(255,255,255,0.2);    
}

.flbutton.done.dark {
    border: 1px solid rgba(0,0,0,0.8);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

.flbutton.done:hover,
.flbutton.done.dark:hover,
.flbutton.xl.done:hover {
    background: rgba(66,180,231,1);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(41,146,212,1)), color-stop(100%,rgba(66,180,231,1)));
    background: -moz-linear-gradient(top, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
    background: -o-linear-gradient(top, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
    background: -ms-linear-gradient(top, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
    background: linear-gradient(to bottom, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
}

.flbutton.destroy, 
.flbutton.mini.destroy
 {
    background: rgba(192,0,0,1);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(192,0,0,1)), color-stop(100%,rgba(160,0,0,1)));
    background: -moz-linear-gradient(top, rgba(192,0,0,1) 0%,rgba(160,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(192,0,0,1) 0%,rgba(160,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(192,0,0,1) 0%,rgba(160,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(192,0,0,1) 0%,rgba(160,0,0,1) 100%);
    border: 1px solid #5A0609;
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 rgba(255,255,255,0.2);
}

.flbutton.xl.destroy {
    text-shadow: 0 -2px 0 rgba(0,0,0,0.4);
    box-shadow: 0 2px 0 rgba(255,255,255,1), inset 0 2px 0 rgba(255,255,255,0.2);    
}

.flbutton.destroy:hover, 
.flbutton.mini.destroy:hover,
.flbutton.xl.destroy:hover
 {
    background: rgba(160,0,0,1);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(160,0,0,1)), color-stop(100%,rgba(192,0,0,1)));
    background: -moz-linear-gradient(top, rgba(160,0,0,1) 0%,rgba(192,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(160,0,0,1) 0%,rgba(192,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(160,0,0,1) 0%,rgba(192,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(160,0,0,1) 0%,rgba(192,0,0,1) 100%);
}

.flbutton.mini.drop {
    padding-right: 24px;
    background-image: url(https://d2jsycj2ly2vqh.cloudfront.net/bookmarklet/images/droparrow.png);
    background-size: 20px 5px;
    background-position: center right;
    background-repeat: no-repeat;
}

button.flbutton:disabled:hover,
button.flbutton:disabled {
    cursor: not-allowed;
}

/* 
###################################################################################################################################################################### 
RETINA
######################################################################################################################################################################  
*/

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

    .flbutton.fb {
        background: rgba(61,91,153,1);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(94,119,170,1)), color-stop(100%,rgba(61,91,153,1)));
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -moz-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -o-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -ms-linear-gradient(top, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, linear-gradient(to bottom, rgba(94,119,170,1) 0%,rgba(61,91,153,1) 100%);
        background-size: 32px 32px, cover;
    }

    .flbutton.fb:hover {
        background: rgba(61,91,153,1);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(61,91,153,1)), color-stop(100%,rgba(94,119,170,1)));
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -moz-linear-gradient(top, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -o-linear-gradient(top, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, -ms-linear-gradient(top, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
        background: url(../bookmarklet/images/fblogo-2x.png) 8px center no-repeat, linear-gradient(to bottom, rgba(61,91,153,1) 0%,rgba(94,119,170,1) 100%);
        background-size: 32px 32px, cover;
    }
    
}