html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body {
/*height: 100%;*/
overflow-x: hidden;
overflow-y: auto;
font-family: Verdana,Arial,sans-serif;
font-size: 1em;
color: #000;
}
html, body, #outerwrap {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body #outerwrap {
height: auto;
}
/* The gradient effect and main bg color */
body{
background-color: #ffffff;
background: -webkit-radial-gradient( #ffffff 10%, #ffffff 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-radial-gradient( #ffffff 10%, #ffffff 90%); /* FF3.6+ */
background: -ms-radial-gradient( #ffffff 10%, #ffffff 90%); /* IE10 */
background: -o-radial-gradient( #ffffff 10%, #ffffff 90%); /* Opera 11.10+ */
background: radial-gradient( #ffffff 10%, #ffffff 90%); /* W3C */
}
/* 2017-02-15 - Overriding Bootstrap which uses pixels and too much margin... */
h1,h2,h3 { color: #fff; margin: 10px 0px; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.17em; font-weight: 700; }
a { text-decoration: underline; }
legend { margin-bottom: 0px; font-size: 1em; color: #000; font-weight: 700; border: 0; }
.form-control {
font-size: 1em;/* BS makes it 14px */
color: #000;/* BS makes it gray */
}
input[type=checkbox] { margin-left: 10px; }
.popupInstructions { margin-bottom: 20px; }
.logonbox { background-color: #eee; } /* 2017-02-16 - BG color of main logon form */
#frmLogin { width: 100%; } /* 2017-02-21 - The built-in .NET login control table */
.containerPGButton { margin-bottom: 15px; } /* 2017-02-15 - So buttons have some vertical WS above and below. FYI: needs 'buffer' rows to prevent margin collapsing... */
.PGButton {
background-color:#0874bc;
color:#fff;
width:100%;
font-size: 1em; /* BS btn uses 14px */
margin-top: 10px; /* 2017-02-15 - BS has no margin so these overlap on small screens */
}
/* 2017-02-15 - These are also overriding what BS does */
.PGButton:hover { background-color: #0079CE; color: #fff; }
.PGButton:focus { color: #fff; } /* BS color was black */
.PGButton:active { position:relative; top: 1px; }
.PGButtonDisabled { width:100%; font-size: 1em; margin-top: 10px; }
/* 2017-02-21 - For the "answers remaining" counter */
.CAStatic { font-weight: bold; }
.CARunning { color: red; font-weight: bold; font-size: 1.125em; }
/* Separate classes for vertical vs. horizontal centering */
.vcenter { position: absolute; top: 50%; -ms-transform: translate( 0%, -50%); -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%); }
.hcenter { position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; }
/* Language selector */
.clsLangSelector { /*float:right;*/ } /* 2017-02-21 - Only should be floated on login form, doing that inline now */
#lblLangSel { font-weight: inherit; text-transform: initial; }
#listLangSel { width: inherit; display: inline-block; margin-bottom: 10px; } /* So the controls all appear on a single line */
#btnChangeLang { color: #000; margin-left: 10px; font-size: 0.875em; }
/* Classes for different label types */
.lblCheck { font-weight: inherit; cursor: pointer; }
.lblRadio { font-weight: inherit; cursor: pointer; margin-left: 10px; }
.lblRadioDisabled { font-weight: inherit; color: #AAA; cursor: not-allowed; margin-left: 10px; }
.lblSpan { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
.pgInputBtn { font-size: 0.875em; }
.resendLink { margin-left: 10px; } /* For OTP resending */
.qrstyle { text-align: center; background-color:white; border:0px; } /* QR code for mobile app */
#preload span{ visibility: hidden; }
.saveUAInstr { font-size: 0.6875em; border: 1px solid black; padding: 5px; background-color: lightyellow; }
.SStooltip { position: absolute; font-size: 0.875em; width: 280px; border: 2px solid black; padding: 5px; background-color: lightyellow; z-index: 10003; }
/* General purpose */
.bold { font-weight: 700; }
.italic { font-style: italic; }
.boldred { color: red; font-weight: 700; }
.boldgreen { color: green; font-weight: 700; }
.maroonbg { background-color: maroon; }
.confDsp { font-style: italic; color: red; font-weight: 700; padding-left: 20px; }
.chal_q { color: #00f; font-weight: 700; font-style: italic; } /* Challenge questions when drop-downs aren't used */
.italicsEmphasis { font-style: italic; font-weight: 700; }
.pgh3 { font-size: 1.25em; font-weight: 700; }
.pgh4 { font-size: 1.125em; }
.bgwhite { background-color: white; }
.pwruleok { font-weight: 700; font-style: italic; color: green; }
.pwruleok-img::after { content: url(/_layouts/images/PG/images/green-check-12.png); margin-left: 8px; }
.pwrulebad { font-weight: 700; font-style: italic; color: red; }
.pwrulebad-img::after { content: url(/_layouts/images/PG/images/red-X-12.png); margin-left: 8px; }
.activityLabel { font-weight: 700; }
.activityData { font-style: italic; }
/* Errors, warnings and confirmations */
.successdiv { background: #9fc; border: 2px solid #690; padding: 10px; margin: 15px 0; font-size: 0.875em; }
.warningdiv { background: #cfc; border: 2px solid #0f0; padding: 10px; margin: 15px 0; font-size: 0.875em; }
.errordiv { background: #fc9; border: 2px solid #f00; padding: 10px; margin: 15px 0; font-size: 0.875em; }
.errorfield { background: #fc9; border: 2px solid #f00; }
/* From: https://www.w3.org/WAI/tutorials/forms/labels/ */
.visuallyhidden {
padding: 0; border: 0; clip: rect(0 0 0 0);
height: 1px; width: 1px; margin: -1px;
overflow: hidden; position: absolute;
}
/* Acct Mgmt */
.col-md-6.col-md-offset-3, .col-md-8.col-md-offset-2, .displaybox { background-color: #FFF; } /* bg color of Acct Mgmt */
#maintitle { color: #000; display: inline-block; margin-bottom: 10px; }
.logonName { float: right; font-size: 0.875em; padding-top: 10px; text-align: right; }
.panel-body h1, .panel-body h2, .panel-body h3 { color: #000; }
.panel-title { font-size: inherit; }
.panel-body { padding: 0 15px 10px 15px; }
.well { padding: 10px; margin-top: 10px; }
.acctLogo { max-height:75px; margin-right:15px; }
.hr_light { background-color: #eee; border: 0 none; color: #eee; height: 1px; margin: 5px; }
.mobileapp_secret { padding: 10px; text-align: center; color: blue; font-weight: 700; }
.AMtable th { vertical-align: middle; text-align: center; border: 1px solid #000; padding: 3px; }
.AMtable td { vertical-align: middle; text-align: left; border: 1px solid #000; padding: 5px; }
body.printOTPs { background-image: none; background-color: white; color: black; margin: 10px; }
img.acctActivity { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat 0 0; vertical-align: middle; margin-right: 10px; }
img.acctCPanel { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -49px 0; vertical-align: middle; margin-right: 10px; }
img.acctEmail { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -98px 0; vertical-align: middle; margin-right: 10px; }
img.acctMobileApp { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -147px 0; vertical-align: middle; margin-right: 10px; }
img.acctPhoneLandLine { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -196px 0; vertical-align: middle; margin-right: 10px; }
img.acctPhoneMobile { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -245px 0; vertical-align: middle; margin-right: 10px; }
img.acctPrinter { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -294px 0; vertical-align: middle; margin-right: 10px; }
img.acctQuestion { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -343px 0; vertical-align: middle; margin-right: 10px; }
img.acctServer { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -392px 0; vertical-align: middle; margin-right: 10px; }
img.acctUA { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -441px 0; vertical-align: middle; margin-right: 10px; }
img.acctYubiKey { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -490px 0; vertical-align: middle; margin-right: 10px; }
img.acctHOTPToken { width: 48px; height: 48px; background:url(/_layouts/images/pg/images/acct-icons.png) no-repeat -539px 0; vertical-align: middle; margin-right: 10px; }
/* Account Link results */
.linkres_table { border-collapse: collapse; width: 100%; }
.linkres_table th { text-align: center; font-style: italic; border: 1px solid #000; padding: 3px; }
.linkres_table td { border: 1px solid #000; padding: 5px; }
.align_left { text-align: left; }
.align_center { text-align: center; }
.align_right { text-align: right; }
/* Pop-up dialogs and main containers */
.dlghdr, .col-md-6.col-md-offset-3.dlghdr { /* dialog heading */
background-color: #0874bc;
color: #fff;
text-transform: uppercase;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.displaybox { margin-top: 20px; top:0px; } /* Separation at top of AcctMgmt, DB, HD */
.shadow {
-webkit-box-shadow: 0px 20px 13px 0px rgba(133,133,133,0.55);
-moz-box-shadow: 0px 20px 13px 0px rgba(133,133,133,0.55);
box-shadow: 0px 20px 13px 0px rgba(133,133,133,0.55);
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
}
/*.border-radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }*/ /* Rounded dialog corners */
.col-md-6.col-md-offset-3, .col-md-8.col-md-offset-2 { border-radius: 5px; } /* So dialog hdrs don't show white upper corners */
.popupWin { z-index: 10000; border-radius:3px; }
.translucent { /* Dimmed bg for popups */
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;
outline: 9999px solid rgba(0,0,0,.8); background-color: rgba(0,0,0,.8);
/*-webkit-transform: translateZ(1px);*/ /* 2017-04-18 - Caused dimmed dialogs on Safari */
}
.otpresendPopup { position: absolute; text-align: left; z-index: 10002; border: 2px solid black; padding: 20px; background-color: lightyellow; font-size: 1.125em; }
.popup_Scoring { z-index: 20000; background-color: 88bbdd; width: 60%; padding: 15px; }
/* For Captcha v1 */
.recaptcha_r7_c1,.recaptcha_r8_c1{ display:none; }
#recaptcha_privacy{ display:none; }
/* Selfreg */
.register h2, .register h3 { color: #000; } /* h1 NOT included since it appears in the dlg title which has a dark bg */
#recaptcha_response_field { border-radius:0px; height: 24px; }
/* SSO */
.sizeSelector { float: right; }
.errrespid { font-style: italic; font-weight: 700; color: red; }
.rpdiv {
/* 2016-06-24 - Fixes tile staggering issue with varied heights and wrapping */
/*float: left;*/
display: inline-block;
vertical-align: top;
/* End fix */
position: relative;
margin: 0px 20px 10px 0px;
}
.rpdivLarge { width: 350px; }
.rpdivMedium { width: 200px; }
.rpdivSmall { width: 150px; }
.rplink { font-size: 0.875em; text-decoration: none; margin: 0; }
.rplinkLarge { width: 350px; }
.rplinkMedium { width: 200px; }
.rplinkSmall { width: 150px; }
.rpimage { padding: 1px; border: 1px solid #000; vertical-align: middle; }
/* 2016-06-02 - The DIVs within the rpdiv must match the image height for vertical centering to work: http://stackoverflow.com/a/12168900/1733114 */
.rpimageLarge { height:100px; width:100px; }
.rpdivLarge div { height: 100px; display: table; }
.rpimageMedium { height:60px; width:60px; }
.rpdivMedium div { height: 60px; display: table; }
.rpimageSmall { height:30px; width:30px; }
.rpdivSmall div { height: 30px; display: table; }
a.rplink, a.rplink:link, a.rplink:visited { background: #ddd; padding: 6px; border-radius: 8px; text-align: left; display: inline-block; color: #000; }
a.rplink:hover, a.rplink:active { background: #ccc; }
a.rplink img { display: inline; border: none; border: solid 1px #d6d6d6; float: left; }
.rpname { font-weight: 700; }
.rpname p { display: table-cell; vertical-align: middle; padding-left: 5px; }
.rpdellink { position: absolute; bottom: 5px; right: 0; }
.lglink { font-size: 0.875em; font-weight: 700; }
.uaDPUImage { margin-left: 20px; border: solid 3px #000; }
/* Help Desk */
.biglink { text-align: center; display: block; width: 50%; background: #AAA; border: 2px solid #DDD; padding: 5px; margin: 10px; color: white; cursor: pointer; font-weight: 700; font: 1.5em; }
.biglink:hover { text-decoration: underline; color: black; }
.instructions { font: 0.875em; font-weight: 700; margin-bottom: 15px; }
.sm_instructions { font-size: 0.875em; font-style: italic; color: #f60; margin-left: 5px; }
.toconfirm { font-weight: bold; font: 0.875em; }
.userList { overflow: auto; height: 120px; width: 350px; background-color: #E0ECFF; text-align: left; color: #00F; padding: 2px; font: 0.75em; border: 1px solid #000000; }
.confirmtext { color: red; font: 0.75em; font-weight: 700; font-style: italic; }
.reqErrorDetail { color: red; font-style: italic; }
img.iconUnlock { width: 21px; height: 21px; background:url(/PG_HelpDesk/images/HD-icons.png) no-repeat 0 0; vertical-align: middle; margin-right: 10px; }
img.iconResetPW { width: 21px; height: 21px; background:url(/PG_HelpDesk/images/HD-icons.png) no-repeat -22px 0; vertical-align: middle; margin-right: 10px; }
img.iconExpirePW { width: 21px; height: 21px; background:url(/PG_HelpDesk/images/HD-icons.png) no-repeat -44px 0; vertical-align: middle; margin-right: 10px; }
img.iconCreateOTP { width: 21px; height: 21px; background:url(/PG_HelpDesk/images/HD-icons.png) no-repeat -66px 0; vertical-align: middle; margin-right: 10px; }
img.iconClearFld { width: 21px; height: 21px; background:url(/PG_HelpDesk/images/HD-icons.png) no-repeat -88px 0; vertical-align: middle; margin-right: 10px; }
img.iconResetAllFlds { width: 21px; height: 21px; background:url(/PG_HelpDesk/images/HD-icons.png) no-repeat -110px 0; vertical-align: middle; margin-right: 10px; }
img.iconEnrollHOTP { width: 21px; height: 21px; background:url(/PG_HelpDesk/images/HD-icons.png) no-repeat -132px 0; vertical-align: middle; margin-right: 10px; }
/* Username Type-ahead */
.suggest_link { background-color: #E0ECFF; cursor: auto; padding: 2px 6px 2px 6px; font-size: 0.875em; }
.suggest_link_over { background-color: #C3D5EE; cursor: pointer; padding: 2px 6px 2px 6px; font-size: 0.875em; }
#divSearch, #divReportResults, #divLookupResults { position: absolute; background-color: #E0ECFF; text-align: left; color: #00F; padding: 2px; border: 1px solid #000000; z-index: 10000; }
.reqUser { font-weight: 700; color: blue; }
/* Dashboard - Reporting */
#PleaseWait , #NoUserSelected, #ReportInstructions { text-align: center; color: red; padding: 20px 0; }
.dbreport { width: 100%; border-collapse: collapse; border: 1px solid black; margin-bottom: 15px; }
.dbreport th { text-align: center; border-collapse: collapse; padding: 2px 2px; border: 1px solid black; background-color: #393; font-size: 0.875em; color: white; cursor: pointer; vertical-align: middle; text-decoration: none; }
.dbreport td { border-collapse: collapse; padding: 2px 15px 2px 15px; border: 0px solid black; font-size: 0.875em; }
.leftcell { text-align: left; }
.midcell { text-align: center; }
.rightcell { text-align: right; }
.highlight { background-color: #ddd; }
.colhdr { vertical-align: middle; display: inline-block; padding: 0 15px 0 0; }
.sorttext { font-size: 0.5625em; }
.totalrows { background-color: #fff; font-weight: 700; font-style: italic; padding: 0 0 5px 10px; }
/* Dashboard - User Detail */
.sectionHeader { font-size: 1.25em; font-weight: 700; color: blue; }
/*----top-container----*/
.top-container{
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
width: 1170px;
}
.header {
background: url(../images/header-background.jpg) repeat-x scroll left top;
display: block;
height: 120px;
border-bottom: 1px solid #e6e7e7;
padding:5px 0;
}
.logo{
float: left;
margin-top: 2.0em;
padding:2px;
}
.logo a{
display:inline;
}
.logo img {
max-width: 100%;
height: auto !important;
}
/*----Footer---*/
.footer {
position: fixed;
background:#0874bc;
background: url(../images/snav-bg-active.jpg) repeat-x;
display: block;
padding:5px 0;
width:100%;
bottom:0;
}
.footer-container{
bottom:0px;
text-align:center;
padding:0.3em;
background:#0874bc;
background: url(../images/snav-bg-active.jpg) repeat-x;
width:100%;
}
.footer p{
color:#EEE;
margin:0;
font-size:0.8em;
}
.footer p a{
color:#FFFFFF;
}
.footer p a:hover{
text-decoration:none;
color:#EEE;
}
/*------- Account Activity login Footer ----*/
#footer-def{
bottom:0px;
text-align:center;
padding:0.3em;
background:#0874bc;
background: url(../images/snav-bg-active.jpg) repeat-x;
width:100%;
}
#footer-def p{
color:#EEE;
margin:0;
font-size:0.8em;
}
#footer-def p a{
color:#FFFFFF;
}
#footer-def a:hover{
text-decoration:none;
color:#EEE;
}
/*---- Responsive-design -----*/
@media (max-width:1366px){
.top-container{
width:80%;
}
}
@media (max-width:1280px){
.top-container{
width:80%;
}
}
@media (max-width:1024px){
.top-container{
width:80%;
}
}
@media (max-width:768px){
.top-container{
width:85%;
}
.logo {
margin-top: 2.0em;
}
}
@media (max-width:640px){
.top-container{
width:100%;
}
.logo {
margin-top: 0;
text-align: center;
width: 100%;
clear: both;
}
.footer{
bottom:0;
}
}
@media (max-width:480px){
.top-container{
width:85%;
}
.logo {
margin-top: 0;
text-align: center;
width: 100%;
clear: both;
}
.logo img {
max-width: 60%;
height: auto !important;
}
.footer{
bottom:0;
}
}
@media (max-width:320px){
.top-container{
width:90%;
}
.logo {
margin-top: 0;
text-align: center;
width: 100%;
clear: both;
}
.logo img {
max-width: 80%;
height: auto !important;
}
.footer{
bottom:0;
}
}
/*Responsive Media queries*/
@media screen and (max-width:768px){
.vcenter {
top: 100px; /* 2017-02-14 - Don't need 50px from top here if no style picker... */
transform: inherit; -webkit-transform: inherit; -ms-transform: inherit;
}
#LogoImg { display: none; }
.sizeSelector { display: none; }
/* 2017-05-26 - Fixes for mobile appearance */
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.0em; font-weight: 700; }
.rpdivLarge { width: 300px; }
.rplinkLarge { width: 300px; }
}
@media screen and (max-width:992px){
.displaybox { padding-bottom: 5px; }
}
@media screen and (min-width:768px) and (max-width:992px){
.PGButton.btn, .PGButtonDisabled.btn {
width: 50%;
display:block;
margin-left:auto;
margin-right: auto;
}
}