/*Style sheet to be included in the whenever it is detected that the device is a mobile device. //This sheet is excluded when viewing on a desktop to avoid styling conflicts.*/ /*CSS Reset*/ * { padding: 0; margin: 0; } /*helper classes for common css calls*/ .padding-reset { padding-left: 0; padding-right: 0; } .margin-reset { margin: 0; } .all-reset { padding-left: 0; padding-right: 0; margin: 0; } .row { padding-left: 0; padding-right: 0; margin: 0; } .container { padding-left: 0; padding-right: 0; margin: 0; } .centered { float: none; margin-left: auto; margin-right: auto; } /*Styles to be applied across all mobile devices*/ html, body { background-image: none; width: 100%; height: 1280px; } form { height: 100%; } #mainContainer, .mainContent { width: 100%; padding: 0em; margin: 0em; border: none; } #mainContainer { background: -moz-linear-gradient(left, rgba(63,114,255,1) 0%, rgba(43,149,255,1) 45%, rgba(61,113,153,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(63,114,255,1)), color-stop(45%,rgba(43,149,255,1)), color-stop(100%,rgba(61,113,153,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(63,114,255,1) 0%,rgba(43,149,255,1) 45%,rgba(61,113,153,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(63,114,255,1) 0%,rgba(43,149,255,1) 45%,rgba(61,113,153,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(63,114,255,1) 0%,rgba(43,149,255,1) 45%,rgba(61,113,153,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(63,114,255,1) 0%,rgba(43,149,255,1) 45%,rgba(61,113,153,1) 100%); /* W3C */ margin-left: auto; margin-right: auto; border: solid 2px gray; border-top: none; padding-bottom: 50px; } .HeaderImg { padding: 0em; margin: auto; } .headerText { padding-bottom: 5em; } .lblHeaderTxt { border-top: solid 2px gray; float: none; margin: auto; } .MainMenu { padding: .2em .5em .2em 0em; } .ourLogo { padding-top: .5em; padding-right: 1em; margin-top: 1.5em; } .date { height: 100%; padding-left: 1em; } .form { margin-bottom: 0em; border: none; } .MainNav { background: rgb(106,129,181); /* Old browsers */ background: -moz-linear-gradient(left, rgba(106,129,181,1) 0%, rgba(124,154,177,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(106,129,181,1)), color-stop(100%,rgba(124,154,177,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(106,129,181,1) 0%,rgba(124,154,177,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(106,129,181,1) 0%,rgba(124,154,177,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(106,129,181,1) 0%,rgba(124,154,177,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(106,129,181,1) 0%,rgba(124,154,177,1) 100%); /* W3C */ border-bottom: ridge 3px #333; } .navButtonBar { opacity: 0; } #navButton { font-size: 0.9em; color: black; background-color: #7c9ab1; border-top: none; border-left: 2px #555 solid; border-bottom: 2px #555 solid; border-right: 2px #555 solid; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; min-width: 120px; } #mainLoginContainer { border-radius: 0px; width: auto; min-width: 320px; margin-top: 0em; padding-bottom: 60px; border: none; } #loginFormContainer { box-shadow: none; border: none; } .custLogo { max-width: 150px; max-height: 150px; } .loginButtonBox { padding: 10px 0 10px 0; } .loginButtonBox > div { padding-left: 0; padding-right: 0; } .loginButtonLeft { float: right; padding-right: 30px; } .loginButtonRight { float: left; margin-left: .5em; } .forgotPasswordLink { margin: 0; } .bottomBanner { padding: 10px 0 10px 0; } #bottomBannerColumn { padding: 0; } .blogLinkBox { padding: 0 0 10px 0; } .blankAppMenu { background-color: #7c9ab1; height: 4em; margin: -5px 0 0 0; padding: 0; border-top: solid 2px gray; border-bottom: ridge 2px #333; font-family: sans-serif; } .menuContainer { margin: 0; position: fixed; width: 100%; z-index: 1; top: 0; left: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } #mobileHeader { background-color: #fff; padding-bottom: 10px; } #headerInfo { padding: 0 15px 0 15px; } .date { padding-top: 20px; } .welcomeBar { padding-top: 10px; } .welcomeBar .col-lg-6 { padding-left: 0; } .MainMenu ul { list-style: none; margin-bottom: 0; } .MainMenu li { margin-left: .5em; float: right; } .RadMenu { width: 100%; min-height: 1.5em; } .chartbox { padding: 0; padding-bottom: 1em; } .RadChart { float: none; margin-left: auto; margin-right: auto; margin-top: 20px; padding: 0; width: 310px !important; height: 100% !important; } .legend { width: 310px; float: none; margin-left: auto; margin-right: auto; background-color: #fff; box-shadow: 0px 3px #2737AC; border-bottom: solid 1px black; border-right: solid 1px black; border-left: solid 1px black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .legend div { padding-left: 2px; padding-right: 2px; font-size: 12px; } #footer { height: 60px; width: 100%; border-radius: 0px; border-bottom: none; border-left: none; border-right: none; background-color: #fff; margin-top: -60px; clear: both; } .textarea { font-size: 1.1em; } .textarea-small { font-size: 0.9em; } h1 { font-size: 2.0em; } h2 { font-size: 1.9em; } h3 { font-size: 1.85em; } h4 { font-size: 1.75em; } h5 { font-size: 1.65em; } h6 { font-size: 1.5em; } td { font-size: 1em; text-overflow: ellipsis; } @media (orientation: portrait) { #mobileHeader, .blankAppMenu { width: 100%; } } @media (orientation: landscape) { #mobileHeader, .blankAppMenu { width: 100%; } } /*Styles for any legacy device, such as an old PDA or a flip phone*/ @media (orientation: portrait) and (-webkit-max-device-pixel-ratio: 1), (max-resolution: 149dpi) { p, .textarea { font-size: 0.9em; } .textarea-small { font-size: 0.8em; } h1 { font-size: 1.5em; } h2 { font-size: 1.3em; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5 { font-size: 1.05em; } h6 { font-size: 1.0em; } td { font-size: 1.1em; } } @media (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1), (max-resolution: 149dpi) { p, .textarea { font-size: 1.1em; } .textarea-small { font-size: 0.9em; } h1 { font-size: 1.8em; } h2 { font-size: 1.6em; } h3 { font-size: 1.45em; } h4 { font-size: 1.3em; } h5 { font-size: 1.2em; } h6 { font-size: 1.1em; } td { font-size: 1.1em; } } /*Small relatively modern phones in portrait mode*/ @media (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 150dpi) { p, .textarea { font-size: 0.9em; } .textarea-small { font-size: 1.1em; } h1 { font-size: 1.45em; } h2 { font-size: 1.35em; } h3 { font-size: 1.25em; } h4 { font-size: 1.1em; } h5 { font-size: 1.0em; } h6 { font-size: 0.9em; } td { font-size: 1.3em; } body { text-rendering: optimizeLegibility; width: 100%; height: 100%; } } /*Small relatively modern phones in landscape mode*/ @media (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 150dpi) { p, .textarea { font-size: 1.2em; } .textarea-small { font-size: 1.0em; } h1 { font-size: 2.0em; } h2 { font-size: 1.9em; } h3 { font-size: 1.65em; } h4 { font-size: 1.4em; } h5 { font-size: 1.25em; } h6 { font-size: 1.15em; } td { font-size: 1.2em; } body { text-rendering: optimizeLegibility; width: 100%; height: 100%; } } /*Styles to be applied on super high resolution mobile displays such as retina displays*/ @media (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { p, .textarea { font-size: 1.2em; } .textarea-small { font-size: 1.0em; } h1 { font-size: 1.5em; } h2 { font-size: 1.3em; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5 { font-size: 1.0em; } h6 { font-size: 0.9em; } td { font-size: 1.0em; } body { text-rendering: optimizeLegibility; width: 100%; } } @media (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { p, .textarea { font-size: 1.2em; } .textarea-small { font-size: 1.0em; } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.6em; } h4 { font-size: 1.5em; } h5 { font-size: 1.4em; } h6 { font-size: 1.3em; } td { font-size: 1.0em; } body { text-rendering: optimizeLegibility; width: 100%; } } /* *Custom scaling classes for hiding/showing items on the mobile site *Use if something needs to be hidden on a very tiny screen */ @media (max-width: 320px) { .hidden-xxs { display:none; } .expander { width:100%; text-align:center; } }