/**
 * Style sheet for count-down timer.  This CSS was taken from this site:
 * http://www.littlewebthings.com/projects/countdown/. The code has
 * since been adapted to this website.
 *
 * @author christopher nostrand
 */

#countdown-timer {
    position: relative;
}

/* COUNT-DOWN DASHBOARD */
/**
 * Styles dashboard.
 */
#countdown_dashboard {
    /* Box Model */
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0px 10px;
    /* Dimensions */
    height: 66px;
    width: 384px;
    /* Color */
    background: radial-gradient(#004FA7, #00234A);
}

/* COUNT-DOWN UNIT OF TIME (UT) DASHBOARD */
/**
 * Styles the title of each UT dashboard.
 */
#countdown_dashboard .dash_title {
    color: #FFCC00;
    display: block;
    font-size: 8pt;
}

/**
 * Styles dashboard of each unit of time (weeks, days, etc.).
 */
#countdown_dashboard .dash {
    float: left;
    height: 100%;
    width: 20%;
}
#countdown_dashboard .dash_wrapper {
    height: 70%;
    margin: 15% auto;
    position: relative;
    width: 32px;
}
#countdown_dashboard .digit {
    /* Display & Position */
    float: left;
    /* Dimensions */
    width: 16px;
    /* Color */
    color: #F2DABF;
    /* Content */
    font-size: 14pt;
    font-weight: bold;
}
#countdown_dashboard .days_dash .digit.first {
    display: none;
}

/**
 * Styles UT dashboard when the week UT dashboad is omitted.
 */
#countdown_dashboard.omitWeeks .weeks_dash {
    display: none;
}
#countdown_dashboard.omitWeeks .days_dash .dash_wrapper {
    width: 64px;
}
#countdown_dashboard.omitWeeks .days_dash .digit.first {
    display: block;
}
#countdown_dashboard.omitWeeks .dash {
    width: 25%;
}

/* COUNT-DOWN MESSAGES */
.countdown_title {
    /* Dimensions */
    width: 336px;
    /* Box Model */
    margin: 10px auto 5px auto;
    /* Color */
    color: #003F87;
    /* Content */
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
}
.countdown_title.mulch {
    /* Dimensions */
    width: 356px;
    /* Box Model */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 10px auto 0 auto;
    /* Color */
    background: radial-gradient(#004FA7, #00234A);
    color: #F2DABF;
    /* Content */
    font-weight: normal;
}
.countdown_message {
    /* Display & Positioning */
    display: none;
    /* Box Model */
    border-radius: 50px;
    margin: 10px auto 0 auto;
    padding: 5px;
    /* Dimensions */
    width: 200px;
    /* Color */
    background: radial-gradient(#006B3F 20%, #259769, #3E4215);
    color: #F2DABF;
    /* Content */
    text-align: center;
}
.countdown_message.mulch {
    /* Display & Positioning */
    position: absolute;
    bottom: 4px;
    left: 12px;
    /* Box Model */
    border-radius: 10px;
    /* Dimensions */
    width: 350px;
    /* Color */
    background: #A60417;
    color: #F2DABF;
}