/*****************************************************************************************************************************************************/
/* GENERAL INSTRUCTIONS                                                                                                                              */
/*****************************************************************************************************************************************************/
/* Lines that start with a pound sign (#) are commented out and will not affect MSS. Uncomment specific attributes in each section as needed.        */
/* The browser will need to be refreshed after this file is saved in order to see any changes immediately.                                           */
/* Regarding color tags, many plain English colors can be used (ex: red, green, etc...). HTML color codes can also be used (ex: #FFFFFF, #e0e0e0)    */
/*****************************************************************************************************************************************************/


/*****************************************************************************************************************************************************/
/* CUSTOMIZE THE BANNER                                                                                                                              */
/*****************************************************************************************************************************************************/
/* div.mol-page-header                                                                                                                               */
/*   height:  adjust the number of pixels to set a custom height                                                                                     */
/*   background-image: enter the name of an image file from the custom images folder to add a background image to the banner                         */
/*   background-repeat: controls whether or not the image should repeat                                                                              */
/*	repeat-x: will make the background image repeat horizontally                                                                                 */
/*	repeat-y: will make the background image repeat vertically                                                                                   */
/*	no-repeat: image will only appear one time. You'll probably also want to use background-position to place the image.                         */
/*   background-position: use one or more of the following terms to place the image in a specific alignment.                                         */
/*    Example: "right top" will place the image in the upper-right corner.                                                                           */
/*	center: will put the background image in the horizontal and vertical center of the banner                                                    */
/*	top: will place the image along the top edge of the banner                                                                                   */
/*	bottom: will place the image along the bottom edge of the banner                                                                             */
/*	left: will place the banner along the left edge of the banner                                                                                */
/*	right: will place the banner along the right edge of the banner                                                                              */
/*****************************************************************************************************************************************************/

div.mol-page-header {
    height: 75px;
    background-color: rgb(0, 130, 200);
    background-image: url("images/dc-logo.png");
    /* fallback */
    background-image: url("images/dc-logo.png"), linear-gradient(90deg, rgba(0, 130, 200, 1) 0%, rgba(80, 185, 72, 1) 100%);
    /* W3C */
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 20px;
}

/*****************************************************************************************************************************************************/
/* You can make it bigger than the banner height and add a gray bar below the header.                                                                */
/* You should NOT make it smaller than the banner height.                                                                                            */
/* div.mol-page-container                                                                                                                            */
/*   top: controls where the main page starts. Set this to be the same height as div.mol-page-header.                                                */
/*****************************************************************************************************************************************************/

div.mol-page-container {
    top: 75px;
}

/*****************************************************************************************************************************************************/
/* CUSTOMIZE THE BANNER IMAGE                                                                                                                        */
/*****************************************************************************************************************************************************/
/* .mol-page-header > a.homeLinkImage                                                                                                                */
/*   padding-top: change how many pixels should be between the top of the image and the top of the banner.                                           */
/*   padding-left: change how many pixels should be between the left side of the image and left edge of the banner.                                  */
/*****************************************************************************************************************************************************/

.mol-page-header>a.homeLinkImage {
    # padding-top: 0px;
    # padding-left: 0px;
}

/*****************************************************************************************************************************************************/
/* Uncomment the following two sections to center the header image
/*****************************************************************************************************************************************************/

#img#ctl00_ctl00_ClientHeaderImage #{
# display: block;
# margin: auto;
#
}

#ctl00_ctl00_HomeLinkImage #{
# display: block;
# margin: auto;
# width: 100%;
#
}

/*****************************************************************************************************************************************************/
/* .mol-page-header > a.homeLinkImage > img                                                                                                          */
/*   height: adjust the height of the banner image. Just using "height" will also increase the width proportionally.                                 */
/*****************************************************************************************************************************************************/

.mol-page-header>a.homeLinkImage>img {
    # height: 90px;
    # width: 200px;
}

/*****************************************************************************************************************************************************/
/* CUSTOMIZE THE LOG IN CONTROL                                                                                                                      */
/*****************************************************************************************************************************************************/
/* If you make the banner taller, you may want to lower the position of the "Log In" and "Resources" controls on the right side.                     */
/* It is possible to push the Log In control right out of the banner if this value is too big.                                                       */
/* div#topnavbanner                                                                                                                                  */
/*   padding-top: the higher the number of pixels, the further down the banner the Log In link will appear.                                          */
/*****************************************************************************************************************************************************/

div#topnavbanner {
    # padding-top: 20px;
}

/*****************************************************************************************************************************************************/
/* If you want to hide the log in control completely, uncomment the following.                                                                       */
/* If you just want to hide the log in control but still make it clickable, use the 3 following selectors to change the color instead.               */
/* Users would need to manually navigate to the login page to log in.                                                                                */
/* div.mol-page-header > div#topnavbanner > div.loginMenuContainer.mol-header-menu-item                                                              */
/*   visibility: controls whether or not the "Log In" control appears. Uncomment "visibility: hidden" to hide the control.                           */
/*****************************************************************************************************************************************************/

div.mol-page-header>div#topnavbanner>div.loginMenuContainer.mol-header-menu-item {
    # visibility: hidden;
}

/*****************************************************************************************************************************************************/
/* If you want to make it invisible to humans, use the same color as your banner background.                                                         */
/* div#topnavbanner > div.loginMenuContainer.mol-header-menu-item > div.contextMenuTarget > a.loginMenuTarget > div.mol-menu-item-icon               */
/*   color: change the color of the "Log In" control icon                                                                                            */
/*****************************************************************************************************************************************************/

div#topnavbanner>div.loginMenuContainer.mol-header-menu-item>div.contextMenuTarget>a.loginTarget>div.mol-menu-item-icon {
    # color: #00336b;
}

/*****************************************************************************************************************************************************/
/* If you want to make it invisible to humans, use the same color as your banner background.                                                         */
/* a.loginMenuTarget > div.mol-menu-item-text                                                                                                        */
/*   color: change the color of the "Log In" control text                                                                                            */
/*****************************************************************************************************************************************************/

a.loginTarget>div.mol-menu-item-text {
    # color: #00336b;
}

/*****************************************************************************************************************************************************/
/* If you want to make it invisible to humans, use the same color as your banner background.                                                         */
/* .mol-page-header > #topnavbanner div.loginMenuContainer.mol-header-menu-item:hover                                                                */
/*   background-color: change the background color when you hover over the log in control                                                            */
/*****************************************************************************************************************************************************/
.mol-page-header {
    # background: rgb(0, 130, 200);
    # background: linear-gradient(90deg, rgba(0, 130, 200, 1) 0%, rgba(80, 185, 72, 1) 100%);
}

div.mol-page-header>div#topnavbanner>div.loginMenuContainer.mol-header-menu-item:hover {
    # background-color: #00336b;
}

/*****************************************************************************************************************************************************/
/* ul.loginMenu > li > a                                                                                                                             */
/*   color: change the color of the links in the drop-down menu once you've logged in.                                                               */
/*****************************************************************************************************************************************************/

ul.loginMenu>li>a {
    # color: blue;
}

/*****************************************************************************************************************************************************/
/* CUSTOMIZE THE RESOURCES CONTROL                                                                                                                   */
/*****************************************************************************************************************************************************/
/* div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item > div.contextMenuTarget > a > div.mol-menu-item-icon */
/*   color: change the color of the "Resources" icon                                                                                                 */
/*****************************************************************************************************************************************************/

div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item>div.contextMenuTarget>a>div.mol-menu-item-icon {
    # color: white;
}

/*****************************************************************************************************************************************************/
/* div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item > div.contextMenuTarget > a > div.mol-menu-item-text */
/*   color: change the color of the "Resources" text                                                                                                 */
/*****************************************************************************************************************************************************/

div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item>div.contextMenuTarget>a>div.mol-menu-item-text {
    # color: white;
}

/*****************************************************************************************************************************************************/
/* div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item:hover                                                */
/*   background-color: change the background color when you hover over "Resources"                                                                   */
/*****************************************************************************************************************************************************/

div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item:hover {
    # background-color: blue;
}

/*****************************************************************************************************************************************************/
/* CUSTOMIZE THE TYLER LOGO                                                                                                                          */
/*****************************************************************************************************************************************************/
/* div.mol-page-header > div.mol-main-title > div.mol-tyler-logo                                                                                     */
/*   visibility: controls whether or not the Tyler logo appears. Uncomment "visibility: hidden" to hide the logo.                                    */
/*   padding-top: the higher the number of pixels, the further down the banner the Tyler logo will appear.                                           */
/*   background-image: uncomment to replace the white logo with the blue/green version of the Talking Ts                                             */
/*****************************************************************************************************************************************************/

div.mol-page-header>div.mol-main-title>div.mol-tyler-logo {
    visibility: hidden;
    padding-top: 0px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAhFBMVEX///+Pm0lAUo9AUo+Pm0lAUo+Pm0mPm0mPm0lAUo9AUo+Pm0mPm0lAUo+Pm0lAUo9AUo+Pm0lAUo+Pm0mPm0lAUo+Pm0mPm0lAUo+Pm0lAUo+Pm0mPm0lAUo9AUo+Pm0mPm0lAUo9AUo+Pm0mPm0lAUo9AUo+Pm0lAUo+Pm0mPm0lAUo9z9A9UAAAAKnRSTlMAEBAgIDAwP0BAUFBgb3Bwf3+AgI+Qn6CgsL+/wMDPz9DQ39/g4O/v8PCIJbj0AAABJklEQVR4Xo3Q63KCMBAF4I0hFJRai7WKdxEhnH3/9+vuTDuiIW2/Pzkz7GzCoVB6RmXoFz2AiuIyKIozECeKSJZzUwDXlMalPdAY80Ixa4g5xVUQyz/+oEvogbvwzWlIG5zT7PMjmfXYD4o6MLPX0ABo5DRPRbHKJUCNFHVk5nYioQNw1Q0adoM31NxObVnarEOXkig6nNJMGrsPWc/sHQ3MAJzvEyWLFQ3sIWb/H7AtcxtccR0+YrFwzn83NvV8cdn7uynw0Jhn5pucEw0HCQnE+qkxOXNWP43t7wM1M9e6oZWwDTdoY7Vzm5Wdtny0tF5qYztDD3S9t5qyqqcRGxYlqaKIDrxRTE5OG5vQKO3H53bxGnwfFuUpEBQVCIqKclveOgp8AbSOKN9OiIWaAAAAAElFTkSuQmCC');
}

/*****************************************************************************************************************************************************/
/* .mol-main-title > .mol-title                                                                                                                      */
/*   visibility: controls whether or not "Munis Self Service" appears. Uncomment "visibility: hidden" to hide the text.                              */
/*   padding-top: the higher the number of pixels, the further down the banner "Munis Self Service" will appear.                                     */
/*   color: change the color of the "Munis Self Service" text. #40528f is the standard blue.                                                         */
/*****************************************************************************************************************************************************/

.mol-main-title>.mol-title {
    # visibility: hidden;
    # padding-top: 0px;
    # color: #40528f;
}

.mol-title {
    display: none !important;
}

.homeLinkImage {
    padding: 5px 20px !important;
}

.mol-page-footer-content {
    display: none;
}

.mol-side-menu {
    background-color: #2f343e !important;
}

.mol-side-menu>ul>.primarynavselected {
    background-color: #4b5263 !important;
    color: white;
}

.mol-page-container {
    background-color: #2e333e !important;
}

.mol-content-container {
    background-color: #ffffff;
    bottom: 0px !important;
}

.mol-page-footer {
    display: none !important;
}

.homeLinkImage img {
    width: 100% !important;
    height: 100% !important;
    padding: 2px 0
}

.mol-side-menu>ul>li {
    background-color: #2e333e !important;
    border: 1px solid #2e333e;
}

.mol-side-menu>ul>li:hover {
    cursor: pointer;
    background-color: #4b5263 !important;
}

.mol-side-menu>ul>li a {
    color: white;
}

.mol-page-header>#topnavbanner>div.mol-header-menu-item .mol-menu-item-icon {
    font-size: 25px !important;
    padding-top: 15px !important;
}

.mol-side-submenu ul li {
    background-color: #21252d !important;
}

#topnavbanner ul, #topnavbanner .shoppingCartPanel {
    background: #30353e !important;
    border: 1px solid #0082c8 !important;   
    color: #fff !important;    
    border-radius: 2px !important;
    box-shadow: 2px 2px 4px #0000004f !important;
    min-width: 200px !important;
}

.mol-page-header > #topnavbanner > div.mol-header-menu-item .mol-context-menu-title {    
    background-color: #0082c8 !important;
    color: #FFF !important;    
    font-size: 18px !important;
}

#topnavbanner ul li:hover {
    background-color: #4c5364;
}

.loginMenu a {
    font-size: 16px;
    color: #fff !important;
}

#topnavbanner ul li {    
    padding: 10px 5px !important;    
}

.mol-header-menu-item a {    
    color: #fff !important;
}

.h2background {
    font-size: 2.2em !important;    
    text-transform: uppercase;
    color: #424242;
}

.h2background small {
    color: #0082c8 !important;
    text-transform: none;
    font-size: 20px !important;
}

/* MOBILE RULES  */

@media only screen and (max-width: 768px) {

    /* For mobile phones: */
    div.mol-page-header {
        height: 75px;
        background-color: rgb(0, 130, 200);
        background-image: url("images/dc-logo-mobile.png");
        /* fallback */
        background-image: url("images/dc-logo-mobile.png"), linear-gradient(90deg, rgba(0, 130, 200, 1) 0%, rgba(80, 185, 72, 1) 100%);
        /* W3C */
        background-repeat: no-repeat;
        background-position-y: center;
        background-position-x: 20px;
    }

    .mol-page-container {
        background-color: white !important;
    }

}

.mol-side-menu>.mol-side-menu-mobile-toggle>a:hover {
    background-color: #535b6f;
}

.mol-side-menu>.mol-side-menu-mobile-toggle>a {
    color: white;
    background-color: #2e333d !important;
}