/* INPUTS */
input[type=text],
input[type=password],
input[type=date],
input[type=time],
input[type=date],
textarea
{
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #bbb;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 0 2px #00000022;
}

textarea {
    font-family: monospace;
}

input[type=text]:hover,
input[type=password]:hover,
input[type=date]:hover,
input[type=time]:hover,
input[type=date]:hover,
textarea:hover
{
    box-shadow: inset 0 0 2px #00000044;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=date]:focus,
textarea:focus
{
    border: 1px solid #888;
    box-shadow: inset 0 0 2px #00000044;
}

input[type=text]:invalid,
input[type=password]:invalid,
input[type=date]:invalid,
input[type=time]:invalid,
input[type=date]:invalid,
textarea:invalid
{
    border: 1px solid #c40;
    box-shadow: inset 0 0 2px #cc440044;
}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=date]:disabled,
input[type=time]:disabled,
input[type=date]:disabled,
textarea:disabled
{
    background-color: #ddd;
    border: 1px solid #aaa;
    box-shadow: none;
    cursor: not-allowed;
}

/* BUTTONS */
button,
input[type=button],
input[type=submit],
input[type=reset],
a.button
{
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #ddd;
    background: linear-gradient(to bottom,#eee,#ccc);
    border: 1px solid #bbb;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 0 3px #fff;
    cursor: pointer;
    text-shadow: 1px 1px 0 #ffffff88;
    display: inline-block;
    color: #222;
    text-decoration: none;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
a.button:hover
{
    background-color: #eee;
    background: linear-gradient(to bottom,#fff,#ddd);
}

button:focus,
input[type=button]:focus,
input[type=submit]:focus,
input[type=reset]:focus,
a.button:focus
{
    border-color: #666;
}

button:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active,
a.button:active
{
    background-color: #ccc;
    background: linear-gradient(to top,#fff,#ddd);
}

/* Color buttons */
button.red, input[type=button].red, input[type=submit].red, input[type=reset].red, a.button.red
{
    background-color: hsl(5, 100%, 50%); background: linear-gradient(to bottom,hsl(5, 100%, 60%),hsl(5, 100%, 40%)); border-color: hsl(5, 100%, 40%); color: hsl(5, 100%, 100%); text-shadow: 1px 1px 0 hsl(5, 100%, 30%);
}
button.red:hover, input[type=button].red:hover, input[type=submit].red:hover, input[type=reset].red:hover, a.button.red:hover
{
    background-color: hsl(5, 100%, 55%); background: linear-gradient(to bottom,hsl(5, 100%, 65%),hsl(5, 100%, 45%)); border-color: hsl(5, 100%, 40%);
}
button.red:focus, input[type=button].red:focus,input[type=submit].red:focus,input[type=reset].red:focus,a.button.red:focus
{
    border-color: hsl(5, 100%, 20%);
}
button.red:active,input[type=button].red:active,input[type=submit].red:active,input[type=reset].red:active,a.button.red:active
{
    background-color: hsl(5, 100%, 50%); background: linear-gradient(to top,hsl(5, 100%, 60%),hsl(5, 100%, 40%)); border-color: hsl(5, 100%, 20%);
}

button.orange, input[type=button].orange, input[type=submit].orange, input[type=reset].orange, a.button.orange
{
    background-color: hsl(35, 100%, 50%); background: linear-gradient(to bottom,hsl(35, 100%, 60%),hsl(35, 100%, 40%)); border-color: hsl(35, 100%, 40%); color: hsl(35, 100%, 100%); text-shadow: 1px 1px 0 hsl(35, 100%, 30%);
}
button.orange:hover, input[type=button].orange:hover, input[type=submit].orange:hover, input[type=reset].orange:hover, a.button.orange:hover
{
    background-color: hsl(35, 100%, 55%); background: linear-gradient(to bottom,hsl(35, 100%, 65%),hsl(35, 100%, 45%)); border-color: hsl(35, 100%, 40%);
}
button.orange:focus, input[type=button].orange:focus,input[type=submit].orange:focus,input[type=reset].orange:focus,a.button.orange:focus
{
    border-color: hsl(35, 100%, 20%);
}
button.orange:active,input[type=button].orange:active,input[type=submit].orange:active,input[type=reset].orange:active,a.button.orange:active
{
    background-color: hsl(35, 100%, 50%); background: linear-gradient(to top,hsl(35, 100%, 60%),hsl(35, 100%, 40%)); border-color: hsl(35, 100%, 20%);
}

button.yellow, input[type=button].yellow, input[type=submit].yellow, input[type=reset].yellow, a.button.yellow
{
    background-color: hsl(55, 100%, 50%); background: linear-gradient(to bottom,hsl(55, 100%, 60%),hsl(55, 100%, 40%)); border-color: hsl(55, 100%, 40%); color: hsl(55, 100%, 10%); text-shadow: 1px 1px 0 hsl(55, 100%, 80%);
}
button.yellow:hover, input[type=button].yellow:hover, input[type=submit].yellow:hover, input[type=reset].yellow:hover, a.button.yellow:hover
{
    background-color: hsl(55, 100%, 55%); background: linear-gradient(to bottom,hsl(55, 100%, 65%),hsl(55, 100%, 45%)); border-color: hsl(55, 100%, 40%);
}
button.yellow:focus, input[type=button].yellow:focus,input[type=submit].yellow:focus,input[type=reset].yellow:focus,a.button.yellow:focus
{
    border-color: hsl(55, 100%, 20%);
}
button.yellow:active,input[type=button].yellow:active,input[type=submit].yellow:active,input[type=reset].yellow:active,a.button.yellow:active
{
    background-color: hsl(55, 100%, 50%); background: linear-gradient(to top,hsl(55, 100%, 60%),hsl(55, 100%, 40%)); border-color: hsl(55, 100%, 20%);
}

button.lime, input[type=button].lime, input[type=submit].lime, input[type=reset].lime, a.button.lime
{
    background-color: hsl(80, 100%, 50%); background: linear-gradient(to bottom,hsl(80, 100%, 60%),hsl(80, 100%, 40%)); border-color: hsl(80, 100%, 40%); color: hsl(80, 100%, 10%); text-shadow: 1px 1px 0 hsl(80, 100%, 80%);
}
button.lime:hover, input[type=button].lime:hover, input[type=submit].lime:hover, input[type=reset].lime:hover, a.button.lime:hover
{
    background-color: hsl(80, 100%, 55%); background: linear-gradient(to bottom,hsl(80, 100%, 65%),hsl(80, 100%, 45%)); border-color: hsl(80, 100%, 40%);
}
button.lime:focus, input[type=button].lime:focus,input[type=submit].lime:focus,input[type=reset].lime:focus,a.button.lime:focus
{
    border-color: hsl(80, 100%, 20%);
}
button.lime:active,input[type=button].lime:active,input[type=submit].lime:active,input[type=reset].lime:active,a.button.lime:active
{
    background-color: hsl(80, 100%, 50%); background: linear-gradient(to top,hsl(80, 100%, 60%),hsl(80, 100%, 40%)); border-color: hsl(80, 100%, 20%);
}

button.green, input[type=button].green, input[type=submit].green, input[type=reset].green, a.button.green
{
    background-color: hsl(110, 100%, 40%); background: linear-gradient(to bottom,hsl(110, 100%, 50%),hsl(110, 100%, 30%)); border-color: hsl(110, 100%, 30%); color: hsl(110, 100%, 100%); text-shadow: 1px 1px 0 hsl(110, 100%, 25%);
}
button.green:hover, input[type=button].green:hover, input[type=submit].green:hover, input[type=reset].green:hover, a.button.green:hover
{
    background-color: hsl(110, 100%, 45%); background: linear-gradient(to bottom,hsl(110, 100%, 55%),hsl(110, 100%, 35%)); border-color: hsl(110, 100%, 30%);
}
button.green:focus, input[type=button].green:focus,input[type=submit].green:focus,input[type=reset].green:focus,a.button.green:focus
{
    border-color: hsl(110, 100%, 15%);
}
button.green:active,input[type=button].green:active,input[type=submit].green:active,input[type=reset].green:active,a.button.green:active
{
    background-color: hsl(110, 100%, 40%); background: linear-gradient(to top,hsl(110, 100%, 50%),hsl(110, 100%, 30%)); border-color: hsl(110, 100%, 20%);
}

button.cyan, input[type=button].cyan, input[type=submit].cyan, input[type=reset].cyan, a.button.cyan
{
    background-color: hsl(170, 100%, 40%); background: linear-gradient(to bottom,hsl(170, 100%, 50%),hsl(170, 100%, 30%)); border-color: hsl(170, 100%, 30%); color: hsl(170, 100%, 100%); text-shadow: 1px 1px 0 hsl(170, 100%, 25%);
}
button.cyan:hover, input[type=button].cyan:hover, input[type=submit].cyan:hover, input[type=reset].cyan:hover, a.button.cyan:hover
{
    background-color: hsl(170, 100%, 45%); background: linear-gradient(to bottom,hsl(170, 100%, 55%),hsl(170, 100%, 35%)); border-color: hsl(170, 100%, 30%);
}
button.cyan:focus, input[type=button].cyan:focus,input[type=submit].cyan:focus,input[type=reset].cyan:focus,a.button.cyan:focus
{
    border-color: hsl(170, 100%, 15%);
}
button.cyan:active,input[type=button].cyan:active,input[type=submit].cyan:active,input[type=reset].cyan:active,a.button.cyan:active
{
    background-color: hsl(170, 100%, 40%); background: linear-gradient(to top,hsl(170, 100%, 50%),hsl(170, 100%, 30%)); border-color: hsl(170, 100%, 20%);
}

button.blue, input[type=button].blue, input[type=submit].blue, input[type=reset].blue, a.button.blue,
button.default, input[type=button].default, input[type=submit].default, input[type=reset].default, a.button.default
{
    background-color: hsl(200, 100%, 40%); background: linear-gradient(to bottom,hsl(200, 100%, 50%),hsl(200, 100%, 30%)); border-color: hsl(200, 100%, 30%); color: hsl(200, 100%, 100%); text-shadow: 1px 1px 0 hsl(200, 100%, 25%);
}
button.blue:hover, input[type=button].blue:hover, input[type=submit].blue:hover, input[type=reset].blue:hover, a.button.blue:hover,
button.default:hover, input[type=button].default:hover, input[type=submit].default:hover, input[type=reset].default:hover, a.button.default:hover
{
    background-color: hsl(200, 100%, 45%); background: linear-gradient(to bottom,hsl(200, 100%, 55%),hsl(200, 100%, 35%)); border-color: hsl(200, 100%, 30%);
}
button.blue:focus, input[type=button].blue:focus,input[type=submit].blue:focus,input[type=reset].blue:focus,a.button.blue:focus,
button.default:focus, input[type=button].default:focus,input[type=submit].default:focus,input[type=reset].default:focus,a.button.default:focus
{
    border-color: hsl(200, 100%, 15%);
}
button.blue:active,input[type=button].blue:active,input[type=submit].blue:active,input[type=reset].blue:active,a.button.blue:active,
button.default:active,input[type=button].default:active,input[type=submit].default:active,input[type=reset].default:active,a.button.default:active
{
    background-color: hsl(200, 100%, 40%); background: linear-gradient(to top,hsl(200, 100%, 50%),hsl(200, 100%, 30%)); border-color: hsl(200, 100%, 20%);
}

button.purple, input[type=button].purple, input[type=submit].purple, input[type=reset].purple, a.button.purple
{
    background-color: hsl(280, 100%, 40%); background: linear-gradient(to bottom,hsl(280, 100%, 50%),hsl(280, 100%, 30%)); border-color: hsl(280, 100%, 30%); color: hsl(280, 100%, 100%); text-shadow: 1px 1px 0 hsl(280, 100%, 25%);
}
button.purple:hover, input[type=button].purple:hover, input[type=submit].purple:hover, input[type=reset].purple:hover, a.button.purple:hover
{
    background-color: hsl(280, 100%, 45%); background: linear-gradient(to bottom,hsl(280, 100%, 55%),hsl(280, 100%, 35%)); border-color: hsl(280, 100%, 30%);
}
button.purple:focus, input[type=button].purple:focus,input[type=submit].purple:focus,input[type=reset].purple:focus,a.button.purple:focus
{
    border-color: hsl(280, 100%, 15%);
}
button.purple:active,input[type=button].purple:active,input[type=submit].purple:active,input[type=reset].purple:active,a.button.purple:active
{
    background-color: hsl(280, 100%, 40%); background: linear-gradient(to top,hsl(280, 100%, 50%),hsl(280, 100%, 30%)); border-color: hsl(280, 100%, 20%);
}

button.black, input[type=button].black, input[type=submit].black, input[type=reset].black, a.button.black
{
    background-color: hsl(0, 0%, 20%); background: linear-gradient(to bottom,hsl(0, 0%, 30%),hsl(0, 0%, 10%)); border-color: hsl(0, 0%, 10%); color: hsl(0, 0%, 85%); text-shadow: 1px 1px 0 hsl(0, 0%, 0%);
}
button.black:hover, input[type=button].black:hover, input[type=submit].black:hover, input[type=reset].black:hover, a.button.black:hover
{
    background-color: hsl(0, 0%, 25%); background: linear-gradient(to bottom,hsl(0, 0%, 35%),hsl(0, 0%, 15%)); border-color: hsl(0, 0%, 0%);
}
button.black:focus, input[type=button].black:focus,input[type=submit].black:focus,input[type=reset].black:focus,a.button.black:focus
{
    border-color: hsl(0, 0%, 0%);
}
button.black:active,input[type=button].black:active,input[type=submit].black:active,input[type=reset].black:active,a.button.black:active
{
    background-color: hsl(0, 0%, 20%); background: linear-gradient(to top,hsl(0, 0%, 30%),hsl(0, 0%, 10%)); border-color: hsl(0, 0%, 0%);
}


/* Disabled Buttons */
button:disabled,input[type=button]:disabled,input[type=submit]:disabled,input[type=reset]:disabled,a.button:disabled,
button:disabled:focus,input[type=button]:disabled:focus,input[type=submit]:disabled:focus,input[type=reset]:disabled:focus,a.button:disabled:focus,
button:disabled:hover,input[type=button]:disabled:hover,input[type=submit]:disabled:hover,input[type=reset]:disabled:hover,a.button:disabled:hover,
button:disabled:active,input[type=button]:disabled:active,input[type=submit]:disabled:active,input[type=reset]:disabled:active,a.button:disabled:active
{
    background: none;
    background-color: #bbb;
    border: 1px solid #aaa;
    color: #888;
    box-shadow: none;
    cursor: not-allowed;
    text-shadow: none;
}



/* SELECT */
select
{
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #bbb;
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    box-shadow: inset 0 0 3px #fff;
    cursor: pointer;
    text-shadow: none;
    display: inline-block;
    color: #222;
    text-decoration: none;
}

select:disabled
{
    background: none;
    background-color: #bbb;
    border: 1px solid #aaa;
    color: #888;
    box-shadow: none;
    cursor: not-allowed;
}

/* OTHER INPUTS */
input[type=checkbox],
input[type=radio] {
    width: 1.4em;
    height: 1.4em;
    vertical-align: middle;
    margin: 0 0.1em;
}

label {
    vertical-align: middle;
}


/* PROGRESS BAR */
.progress-bar {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #48d;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 0 2px #fffa;
    background-image: url(../img/progress-blue.gif);
    color: #fff;
    text-shadow: 1px 1px 0 #0148;
    font-weight: normal;
    text-align: center;
}

.progress-bar.red { background-image: url(../img/progress-red.gif); border-color: #c22; }
.progress-bar.orange { background-image: url(../img/progress-orange.gif); border-color: #ca2; }
.progress-bar.green { background-image: url(../img/progress-green.gif); border-color: #2a2; }
.progress-bar.cyan { background-image: url(../img/progress-cyan.gif); border-color: #0ac; }