


button {
    font-size:16px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    padding:10px 10%;
    text-decoration:none;
    display:inline-block;
    margin-top: 6px;
    margin-bottom: 15px;
}

button.mini {
    font-size: 90%;
    padding: 2px 9px;
    margin: 0;
    border: 1px solid #bbb;
    border-radius: 0px;
    background-color: #ddd;
}

button.small {
    font-size: 100%;
    padding: 3px 7px;
    margin: 0;
}

button.normal {
    border: 1px solid #bbb;
    background-color: #ddd;
    display: inline-block;
    padding: 6px 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0px;
}

button.btn-select {
    width: 75%;
    margin: 5px;
    padding: 5px;
}

a button:active {
    position:relative;
    top:1px;
}

button.light {
    border:1px solid #dcdcdc;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(27%, #f7f7f7), color-stop(78%, #dfdfdf) );
    background:-moz-linear-gradient( center top, #f7f7f7 27%, #dfdfdf 78% );
    background:-ms-linear-gradient( top, #f7f7f7 27%, #dfdfdf 78% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#dfdfdf');
    background-color:#f7f7f7;
    color:#424242;
    text-shadow:1px 1px 0px #ffffff;
    -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
    -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
    box-shadow:inset 1px 1px 0px 0px #ffffff;
}
button.light:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(27%, #dfdfdf), color-stop(78%, #f7f7f7) );
    background:-moz-linear-gradient( center top, #dfdfdf 27%, #f7f7f7 78% );
    background:-ms-linear-gradient( top, #dfdfdf 27%, #f7f7f7 78% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#f7f7f7');
    background-color:#dfdfdf;
}

button.dark {
    border:1px solid #dcdcdc;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(27%, #000000), color-stop(78%, #333333) );
    background:-moz-linear-gradient( center top, #000000 27%, #333333 78% );
    background:-ms-linear-gradient( top, #000000 27%, #333333 78% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#333333');
    background-color:#000000;
    color:#eeeeee;
}
button.dark:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(27%, #333333), color-stop(78%, #000000) );
    background:-moz-linear-gradient( center top, #333333 27%, #000000 78% );
    background:-ms-linear-gradient( top, #333333 27%, #000000 78% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#000000');
    background-color:#333333;
}


/* BUTTONS THAT EXPAND AND COLLAPSE STUFF */

button.panel-toggle {
    background-color: #ddd;
    color: #000;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid #bbb;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-radius: 0;
}

button.panel-toggle.active, button.panel-toggle:hover {
    background-color: #ddd; 
}

button.panel-toggle:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.panel-toggle.active:after {
    content: "\2212";
}

div.panel-toggle {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
//    transition: max-height 0.2s ease-out;
}

.cancel-btn {
    color: red;
    cursor: pointer;
}

.archive-btn {
    cursor: pointer;
}




/* SPLIT BUTTONS */


.btn-split {
    position: absolute;
    display: inline-block;
}

.btn-split-content {
    display: none;
    position: absolute;
    background-color: lightgray;
    min-width: 200px;
    z-index: 1;
    margin-left: -170px;
}

.btn-split button.mini {
    width: 30px;
}

.btn-split-content a {
    color: black;
    padding: 8px 6px;
    text-decoration: none;
    display: block;
    border: 1px solid darkgray;
}

.btn-split-content a:hover {background-color: #ddd}

.btn-split:hover .btn-split-content {
    display: block;
}


