/*****************************************************************************************************************************************************/ /* 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) */ /*****************************************************************************************************************************************************/ .alert { padding: 20px; background-color: #FFFF00; color: #930000; margin-bottom: 15px; width: 95%; } #ui-datepicker-div .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, caption, .caption, .landingHighlight, .totalCompensation, .additionBoxesTop, .additionBoxesBottom, a.tab { color: #990000; } /*****************************************************************************************************************************************************/ /* 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: 80px; # background-image: url("city_of_buckeye_small.jpg"); # background-repeat: no-repeat; # background-position: ; background-color: #930000; } div.barchart, table.calendarmonth caption { background-color: #930000; } .themedbackground, .modalPopup, .modalPopupWF, .landingHighlight, .employmentopportunityheader th, .trainingdetailheader th, .barchart td.chart, .timesheet td.themedbackground { background-color:#FAE9D4; } /*****************************************************************************************************************************************************/ /* 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: 80px; } /*****************************************************************************************************************************************************/ /* 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; } /*****************************************************************************************************************************************************/ /* .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: 70px; # width: 240px; } /*****************************************************************************************************************************************************/ /* 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 just want to hide the log in control but still make it clickable, use the next two 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.loginMenuTarget > div.mol-menu-item-icon { # color: white; } /*****************************************************************************************************************************************************/ /* 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.loginMenuTarget > div.mol-menu-item-text { # color: white; } /*****************************************************************************************************************************************************/ /* 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 > #topnavbanner div.loginMenuContainer.mol-header-menu-item:hover { background-color: #FF1500; } /*****************************************************************************************************************************************************/ /* 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; } .tabordion { color: black; display: block; #font-family: arial, sans-serif; #margin: auto; position: relative; width: 85%; } .tabordion input[name="sections"] { left: -9999px; position: absolute; top: -9999px; } .tabordion section { display: block; } .tabordion section label { background: #930000; border:1px solid #fff; cursor: pointer; display: block; font-size: 1.2em; font-weight: bold; padding: 15px 20px; position: relative; width: 180px; z-index:100; } .tabordion section article { display: none; left: 230px; min-width: 300px; padding: 0 0 0 21px; position: absolute; top: 0; } .tabordion section article:after { background-color: #fc7e7e; bottom: 0; content: ""; display: block; left:-229px; position: absolute; top: 0; width: 220px; z-index:1; } .tabordion input[name="sections"]:checked + label { background: #f93b31; color: #white; } .tabordion input[name="sections"]:checked ~ article { display: block; } @media (max-width: 533px) { h1 { width: 100%; } .tabordion { width: 100%; } .tabordion section label { font-size: 1em; width: 160px; } .tabordion section article { left: 200px; min-width: 270px; } .tabordion section article:after { background-color: #fc7e7e; bottom: 0; content: ""; display: block; left:-199px; position: absolute; top: 0; width: 200px; } }