body {
    margin: 0;
    background-color: #252532;
    font-family: Arial, 'Segoe UI';
    color: #333;
    font-size: 75%;
}

.body-plain {
    margin: 0;
    background-image: url('');
    font-family: Arial, 'Segoe UI';
    color: #333;
    background-color: #fff;
}


/*  site container 
    override width in local stylesheet
********************************************************************************/
.site-container {
    position: relative;
    margin: 0 auto;
    width: 80%;
}

/*  fonts 
********************************************************************************/

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
}

/*  header 
********************************************************************************/

.header {
    top: 0px;
    z-index: 50;
    height: 95px;
    width: 100%;
    background-color: #252532;
    border-bottom: 5px solid #d9b104;
}

    .header .application-logo {
        float: left;
        padding: 5px;
    }

    .header .headline {
        font-family: 'Roboto';
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        color: #fff;
        font-size: 20px;
        padding-top: 8px;
        padding-left: 64px;
    }

        .header .headline.right {
            text-align: right;
        }

    .header .subline {
        font-family: "Roboto-Thin";
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        color: #EFD566;
        font-size: 15px;
        padding-top: 4px;
        padding-left: 64px;
    }

        .header .subline.right {
            text-align: right;
        }
    
    .header .main-menu {
            clear: both;
            padding-top: 0px;
            padding-left: 0px;
            padding-right: 200px;
        }

    .header .login-bar {
        position: absolute;
        bottom: 2px;
        right: 50px;
        font-size: 9pt;
    }


/* menu
********************************************************************************/

.menu {
    margin: 0;
    padding: 0;
}


/* content
********************************************************************************/

.content-image {
    background-image: url('/images/napa-background-civicplus.jpg');
    padding-top: 20px;
    padding-bottom: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
}


.content-container {
    clear: both;
    background-color: #fff;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0px 0px 7px #888;
    padding: 0px;
    width: 100%;
    min-height: 500px;
}

.content {
    padding: 25px 20px 25px 20px;
    text-align: left;
    overflow: auto;
}

.content-plain {
    font-size: 75%;
    background-color: #fff;
    width: 98%;
    padding: 10px 0px 0px 10px;
}


/* footer
********************************************************************************/
.footer {
    clear: both;
    color: #fff;
    margin-top: 10px;
    padding-bottom: 40px;
    text-align: center;
    background-color: #252532;
}

    .footer .banner {
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: #515369;
        min-height: 75px;
    }

        .footer .banner .item {
            padding: 10px;
            position: relative;
            font-family: 'Roboto';
            color: #fff;
            font-size: 1em;
            min-width: 100px;
            width: 200px;
            float: left;
        }

            .footer .banner .item img {
                vertical-align: middle;
                margin-bottom: 0.75em;
            }

    .footer .info {
        margin: 20px;
        font-size: 0.9em;
    }

        .footer .info span {
            margin: 20px;
        }

    .footer hr {
        height: 2px;
        border-width: 0;
        background-color: #fff
    }

    .footer .seal {
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 125px;
        height: 125px;
        background-image: url(/images/napa-seal.png);
        background-position: center;
        background-repeat: no-repeat;
    }


/* common
********************************************************************************/

h1 {
    margin: 0px 0 20px 0;
    padding: 0;
    font-size: 175%;
    font-weight: normal;
    color: #3f4157;
}

h2 {
    margin: 0px 0 20px 0;
    padding: 0;
    font-size: 150%;
    font-weight: normal;
    color: #3f4157;
}

h3 {
    margin: 0px 0 20px 0;
    padding: 0;
    font-size: 125%;
    font-weight: normal;
    color: #3f4157;
}

h4 {
    margin: 0px 0 20px 0;
    padding: 0;
    font-size: 105%;
    font-weight: normal;
    color: #3f4157;
}


/* hyperlink
********************************************************************************/

a {
    color: #2779AA;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }    

a.white-gold, a.white-gold:active, a.white-gold:focus {
    color: #fff;
    text-decoration: none;
}
    a.white-gold:hover {
        color: #eed466;
        text-decoration: underline
    }

/* image
********************************************************************************/
img.opacity {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
    img.opacity:hover {
        opacity: 0.75;
        filter: alpha(opacity=75);
    }

/* input
********************************************************************************/
input:not([type='button']), select, textarea {
    border: 1px solid #B6D1EA;
    border-radius: 4px;
    min-height: 18px;
    color: #222;
}

    input[type=text]:hover:not(:disabled):not([readonly]):not(.k-input),
    select:hover:not(:disabled):not([readonly]):not(.k-input),
    textarea:hover:not(:disabled):not([readonly]):not(.k-input) {
        border-color: #8BC4DD;
    }

    input[type=text]:focus:not(:disabled):not([readonly]):not(.k-input),
    select:focus:not(:disabled):not([readonly]):not(.k-input),
    textarea:focus:not(:disabled):not([readonly]):not(.k-input) {
        border-color: #bdbdbd;
        box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
    }

    select:disabled,
    select:disabled:hover,
    textarea:disabled,
    textarea:disabled:hover,
    input[readonly],
    input[readonly]:hover,
    textarea[readonly]:not(.validation-error),
    textarea[readonly]:focus:not(.validation-error) {
        border-color: transparent;
        background-color: transparent;
    }

input:not([readonly]):not(.k-input):disabled, input.k-formatted-value:disabled {
    border-color: #C4E1EE;
    color: rgba(0, 63, 89, 0.7);
    background-color: #F4F9FC;
}

/* formTable
********************************************************************************/
.formTable {
    width: 100%;
    border: 1px solid #B6D1EA;
    background-color: #F0F8FB;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

    .formTable td {
        padding: 6px 6px 8px 6px;
    }

    .formTable th {
        background: none, linear-gradient(to bottom, #F1F7FC 0px, #DEEDF7 100%);
        color: #373D1B;
        padding: 8px;
        font-size: 12px;
        font-weight: normal;
        text-align: left;
    }

label {
    font-size: 11px;
    font-weight: bold;
    color: #525252;
}

    label.required::before {
        content: '* ';
    }




/* messaging
********************************************************************************/
.message {
    background-repeat: no-repeat;
    padding: 9px 5px 9px 26px;
    margin-bottom: 15px;
    border-radius: 4px;
    background-position: 4px center;
    background-repeat: no-repeat;
}

.message-information {
    background-image: url(/images/icons/information.gif);
    background-repeat: no-repeat;
    padding: 4px 5px 5px 25px;
    background-position: 5px 3px;    
    border-radius: 3px;
    color: #31708f;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;

}

.message-success {
    background-image: url(/images/icons/tick.gif);
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
    padding: 9px 5px 9px 15px;
    background-repeat: no-repeat;
}

.message-warning {
    background-image: url(/images/icons/error.gif);
    background-repeat: no-repeat;
    padding: 4px 5px 5px 25px;
    background-position: 5px 3px;    
    margin-bottom: 15px;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 3px;
/*
    background-image: url(/images/icons/error.gif);
    border: 1px solid #ffeeba;
    background-color: #fff3cd;
    color: #856404;
    padding: 9px 5px 9px 15px;
    background-repeat: no-repeat;
*/
}

.message-error {
    background-image: url(/images/icons/cross.gif);
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 9px 5px 9px 15px;
    background-repeat: no-repeat;
}


/* landing page
********************************************************************************/
.landing-item {
    float: left;
    width: 30%;
    min-width: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.landing-item img {
    position: absolute;
    border-width: 0px;
}

.landing-item h2 {
    margin-left: 60px;
    margin-bottom: 1px;
}

.landing-item p {
    margin-top: 1px;
    margin-left: 60px;
}

.landing-item a {
    margin-left: 60px;
}

.resultsTable table {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.resultsTable td, .resultsTable th {
    /*border: 1px solid #ccc;*/
    border: none;
    padding: 3px 3px 3px 3px;
}

.resultsTable th {
    background-color: #515369;
    color: #fff;
}

.resultsTable th a {
    text-decoration: none;
}

.resultsTable tr {
    background-color: #eae8e9;
}

.resultsTable tr.even {
    background-color: #f4f3f3;
}

    
/* custom kendo styles
*****************************/

.k-button > img {
    position: relative;
    top: 3px;
    left: -2px;
}

.menu .k-header {
    background: none repeat scroll 0 0 transparent;
    border-color: transparent;
}

.menu .k-menu .k-item {
    border-style: none;
    border-width: 0 0 0 0;
}

.menu .k-group {
    border-style: none;
    border-width: 0 0 0 0;
}

.menu .k-menu .k-header, .k-menu .k-item {
    /* menu background */
    background-color: #252532;
}

.menu .k-link {
    font-weight: normal;
    font-family: Arial;
    font-size: 11pt;
    color: #fff;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 0.20em 0.8em;
    line-height: normal;
}

.menu a.k-link:hover,
.menu a.k-state-active,
.menu span.k-state-active {
    /* menu hover text color */
    color: #DEB408;
    border-top-color: #252532;
    border-left-color: #252532;
    border-right-color: #252532;
    border-bottom-color: #252532;
    background: linear-gradient(#252532,#252532);
}

.menu .k-state-border-down .k-link {
    /* sub menu select */
    color: #fff;
    background: linear-gradient(#252532,#252532);
    border-top-color: #252532;
    border-left-color: #252532;
    border-right-color: #252532;
    border-bottom-color: #252532;
}

.menu .k-animation-container {
    /* sub menu background */
    background-color: #252532;
}

td.action, th.action {
    width: 16px;
    vertical-align: middle;
    text-align: center;
}

.actionButton {
    background-repeat: no-repeat; 
    background-color: transparent;
    border: none;
    height: 16px;
    outline: none;
}

.actionTextButton {
    background-position: 3px 5px;
    background-repeat: no-repeat; 
    background-color: transparent;
    padding-left: 22px;
    color: #003F59;
    border: none;
    height: 24px;
    margin-right: 10px;
    outline: none;
}

.actionTextButton:hover {
    color: #36578C;
}
.disabled:hover {
    color: #666;
}

.actionLink
{
    background-repeat: no-repeat;
    padding-left: 20px;
    color: #003F59;
}

.actionButton:hover, .actionTextButton:hover, .actionLink:hover {
    cursor: pointer;
}

.disabled { color: #666; }
.add { background-image: url(/images/icons/add.gif); }
.addPerson { background-image: url(/images/icons/user_add.gif); }
.addSubscription { background-image: url(/images/icons/feed_add.gif); }
.assignToMe { background-image: url(/images/icons/page_go.gif); }
.check { background-image: url(/images/icons/accept.gif); }
.collapse { background-image: url(/images/icons/arrow_in.gif); }
.completeTask { background-image: url(/images/icons/tick.gif); }
.copy { background-image: url(/images/icons/page_copy.gif); }
.delete { background-image: url(/images/icons/delete.gif); }
.deny { background-image: url(/images/icons/cross.gif); }
.edit { background-image: url(/images/icons/page_edit.gif); }
.editPermission { background-image: url(/images/icons/lock_edit.gif); }
.expand { background-image: url(/images/icons/arrow_out.gif); }
.groupAdd { background-image: url(/images/icons/group_add.gif); }
.groupEdit { background-image: url(/images/icons/group_edit.gif); }
.notify { background-image: url(/images/icons/email_go.gif); }
.print { background-image: url(/images/icons/printer.gif); }
.reassign { background-image: url(/images/icons/page_go.gif); }
.save { background-image: url(/images/icons/page_save.gif); }
.submit { background-image: url(/images/icons/page_go.gif); }
.requestChanges { background-image: url(/images/icons/user_edit.gif); }
.restoreVersion { background-image: url(/images/icons/page_refresh.gif); }
.requestReview { background-image: url(/images/icons/user_comment.gif); }
.runJob { background-image: url(/images/icons/page_lightning.gif); }
.viewUser { background-image: url(/images/icons/user_go.gif); }