/*
 * Grape - Professional & Flexible Admin Template
 * by Stammi <http://themeforest.net/user/Stammi>
 * 
 * -----------------
 * TABLE OF CONTENTS
 * -----------------
 * 
 * 1) Generic Buttons
 * 2) Image Buttons
 * 3) Username Button
 * 4) Footer
 */

/* ==================================================
 * 1) Generic Buttons
 * ================================================== */

.button {
    background: url("../img/buttons/button-blue.png") repeat-x scroll 0 0 #2d5672;
    border-radius: 20px 20px 20px 20px;
    border-style: solid;
    border-width: 1px;
    border-color: #111111;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    height: 14px;
}

input[type="submit"].button {
    height: 26px;
}
.buttonheight {
    height: 26px;
}

.button:hover {
    background: url("../img/buttons/button-blue.png") repeat-x scroll 0 -24px #4d7690;
    color: #fff !important;
    text-decoration: none;
}

.button:active {
    background: url("../img/buttons/button-blue.png") repeat-x scroll 0 -48px #6290b2;
}

.button.red { background: url("../img/buttons/button-red.png") repeat-x scroll 0 0 #6b352b; }
.button.red:hover { background: url("../img/buttons/button-red.png") repeat-x scroll 0 -24px #834a3f; }
.button.red:active { background: url("../img/buttons/button-red.png") repeat-x scroll 0 -48px #a85f51; }

.button.orange { background-image: none; background-color: #dc6c0c; }
.button.orange:hover { background-image: none; background-color: #f5923d; }
.button.orange:active { background-image: none; background-color: #ab560d; }






/* ==================================================
 * 2) Image Buttons
 * ================================================== */

.btn-info {
    background: url("../img/icons/toolbox/20x20/info.png") no-repeat scroll 0 0 transparent;
    height: 20px;
    width: 20px;
    position: relative;
    margin-left: -10px;
    margin-top: 10px;
    float: left;
}

.btn-info:hover {
    background-position: 0px -20px;
}

.btn-cron {
    background: url(../img/icons/toolbox/20x20/cron_job.png) no-repeat scroll 0 0 whitesmoke;
    height: 14px;
    width: 15px;
    position: relative;
    margin-top: 12px;
    float: left;
    border-radius: 4px;
    background-position: center;
    background-size: 14px;
    padding: 1px;
    margin-left: 5px;
}

.btn-cron:hover {   
    border: solid 2px #20aee4;
    margin-top: 10px;
    margin-left: 3px;
}

.btn-bug-info {
    background: url(../img/icons/toolbox/20x20/bug.png) no-repeat scroll 0 0 whitesmoke;
    height: 14px;
    width: 15px;
    position: relative;
    margin-top: 12px;
    float: left;
    border-radius: 4px;
    background-position: center;
    background-size: 14px;
    padding: 1px;
    margin-left: 5px;
}

.btn-bug-info:hover {   
    border: solid 2px #20aee4;
    margin-top: 10px;
    margin-left: 3px;
}

.arrow-link-down {
    background: url("../img/icons/misc/arrow-down.png") no-repeat scroll center right transparent;
    padding-right: 20px;
}

.arrow-link-down:hover {
    background: url("../img/icons/misc/arrow-down-hover.png") no-repeat scroll center right transparent;
}






/* ==================================================
 * 3) Username Button
 * ================================================== */

.user-button {
    background: url("../img/misc/shine-effect.png") repeat-x scroll top left #344655;
    border: 1px solid #000;
    border-radius: 3px 3px 3px 3px;
    position: relative;
    float: left;
    display: inline-block;
    padding: 8px 8px;
}

.user-button:hover {
    background: url("../img/misc/shine-effect.png") repeat-x scroll top left #495f71;
}

.user-button:active {
    top: 1px;
}

.user-button a {
    display: block;
}







/* ==================================================
 * 4) Footer
 * ================================================== */

#footer a.top {
    background: url("../img/icons/misc/top-hover.png") no-repeat scroll 0 0 transparent;
    height: 48px;
    width: 48px;
    display: block;
    margin-left: 5px;
    padding-top: 3px;
}

#footer a.top:hover {
    background-position: 0 -48px;
}