input.small {
    width: 100px;
}

/* ### Add padding to input boxes inside of specific program / example pages. */
.program input[type="text"] {
    padding: 5px;
    margin: 5px 10px;
}

/* ### Headers above the text boxes. */
.input-label {
    display: inline-block;
}

    .input-label span {
        display: block;
        font-size: 10pt;
    }

.program input[type="submit"] {
    padding: 9.5px 15px;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### B O X   S H A D O W */

/* ### Box for box-shadow generator. */
.example-box-shadow {
    position: relative;
    margin: 30px auto;
    width: 250px;
    height: 250px;
    border: 1px #333 solid;
}

/* #endregion   ### B O X   S H A D O W */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### F I L L   L I N K   C O N T A I N E R */
.link-container {
    margin: 0 auto 30px auto;
    width: 100px;
    height: 50px;
    border-color: #333;
    overflow: hidden;
}

    .link-container a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 50px;
        color: #FFF;
        background-color: #59B9FF;
    }

        .link-container a:hover {
            background-color: #7FC9FF;
        }

/* #endregion   ### F I L L   L I N K   C O N T A I N E R */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region          ### B U T T O N   P R E S S */

.button {
    display: inline-block;
    margin-top: 5px;
    height: 50px;
    width: 100px;
    color: #FFF;
    line-height: 55px;
    background-color: #59B9FF;
    border-radius: 5px;
    border-bottom: 5px #0082E0 solid;
    text-align: center;
}

    .button:hover {
        cursor: pointer;
        color: #FFF;
        background-color: #7FC9FF;
    }

.button:active {
    margin-top: 8px;
    border-bottom: 2px #0082E0 solid;
}

/* #endregion       ### B U T T O N   P R E S S */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region          ### L M G T F Y */

.link-button {
    display: inline-block;
    padding: 5px 15px;
    border: 1px #333 solid;
    background-color: #EEE;
    color: #000;
    font-weight: bold;
}

    .link-button:hover {
        cursor: pointer;
    }

.click-here {
    position: relative;
}

    .click-here::before {
        content: "";
        position: absolute;
        top: 7px;
        right: -25px;
        border-top: 10px transparent solid;
        border-bottom: 10px transparent solid;
        border-right: 10px #333 solid;
        animation: sway1 2s infinite;
    }

    .click-here::after {
        content: "Click Here.";
        position: absolute;
        padding: 5px 10px;
        top: 0;
        right: -130px;
        background-color: #333;
        color: #FFF;
        animation: sway2 2s infinite;
    }

/* #endregion       ### L M G T F Y */

@keyframes sway1 {
    0% {
        right: -25px;
    }

    50% {
        right: -35px;
    }

    100% {
        right: -25px;
    }
}

@keyframes sway2 {
    0% {
        right: -130px;
    }

    50% {
        right: -140px;
    }

    100% {
        right: -130px;
    }
}