/* Copyright (C) Entrust 2017. All rights reserved. */

/* Default baseline style for IdentityGuard SSM that will work for mobile devices */

#header {
    background: url('headerLogo.png') no-repeat 0 0 #fff;
    width: 255px;
    height: 152px;
    text-align: right;
    margin-bottom: 0;
}

#selectlang {
    float: right;
}

/* Things we DO NOT want to display for mobile browsers */
#loginintro {
    display: none;
}

/* Things we DO want to display for mobile browsers */
#selectimgexplain {
    display: block;
}

#footer, .center {
    text-align: center;
}

label.required {
    padding-left: 12px;
    background: url('../../images/required.gif') no-repeat top left;
}

p.invalid {
  color: red;
  font-style: italic;
  font-weight: bold;
  margin-bottom: .25em;
}

input.invalid, textarea.invalid, select.invalid {
    border: 1px dashed red !important;
}

img.middle {
    vertical-align: middle;
    margin-bottom: 0;
}

/* Same as .large, but without the greater line height */
.larger {font-size:1.2em;margin-bottom:1.25em;}

/* Settings for our datagrid tables */
table.datagrid {
    /* Just as wide as it needs to be */
    width: 1%;
    margin-top: 5px;
    border: 1px solid silver;
    padding: 2px;
}

table.datagrid thead th {
    background-image: url('../../images/header-bg.gif');
    background-repeat: repeat-x;
    white-space: nowrap;
    color: white;
    padding: 4px 3px 4px 3px;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: white;
    text-align: center;
}

table.datagrid tbody td {
    padding: 2px 3px 2px 3px;
    white-space: nowrap;
}

table.datagrid tr.even td {
    /* Fix up border for row striping */
    border: 1px solid #E5ECF9;
}

table.datagrid tbody input[type=text],table.datagrid tbody input[type=email],table.datagrid tbody select {
    width: 96px; /* 200px for desktop override */
}

/* Meant to be used in combination with datagrid class when we have too many columns and need to use media table functionality
   as provided by http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/
 */

/**
 * Structural Style
 */
.mediaTable {
    width:100% !important;
    border-collapse:collapse;
}

.mediaTableWrapper {
    position: relative;
}

.mediaTableWrapperWithMenu {
    padding-top:3em;
}

.mediaTableMenuClosed ul {
    display:none;
}

/**
 * Active Media Table Rules
 * These rules are applied to a table activated by the jQuery plug-in.
 */

.activeMediaTable th, .activeMediaTable td {
    display: none;
}

.activeMediaTable th.essential, .activeMediaTable td.essential {
    display: table-cell;
    _display:block; /* IE6 Hack */
}

/* IE7 Hack */
*+html .activeMediaTable th.essential, *+html .activeMediaTable td.essential { display:block }

/* -----[[     B R E A K      P O I N T S     ]]------------ */

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

    .activeMediaTable th.optional, .activeMediaTable td.optional {
        display: table-cell;
        _display:block; /* IE6 Hack */
    }

    /* IE7 Hack */
    *+html .activeMediaTable th.optional, *+html .activeMediaTable td.optional { display:block }
}

@media screen and (min-width: 1024px) {

    .activeMediaTable th, .activeMediaTable td {
        display: table-cell;
        _display:block; /* IE6 Hack */
    }

    /* IE7 Hack */
    *+html .activeMediaTable th, *+html .activeMediaTable td { display:block }
}

/**
 * Menu Style
 */

.mediaTableMenu {
    position:absolute;
    top:0;
    right:0;
    background: #fff;
    border:1px solid #aaa;
    border-radius:5px;
    overflow:hidden;
    box-shadow:2px 2px 4px #ddd;
}

.mediaTableMenu a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    color: black;
    background: #ddd;
    padding:0.5em;
    cursor:pointer;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.mediaTableMenu ul {
    list-style-position:outside;
    list-style:none;
    margin:0;
    padding:0 0.5em;
}

.mediaTableMenuClosed a {
    border-radius:5px;
}

.mediaTableMenu ul li {
    line-height: 2em;
}

.mediaTableMenu ul li label {
    cursor:pointer;
}

/* Settings for authentication challenges and responses */

table.challenge {
    /* Just as wide as it needs to be */
    width: 1%;
}

table.challenge td, table.challenge th {
    padding-left: 0;
    text-align: center;
    white-space: nowrap;
}

input.challenge {
  margin:0.5em 0;
  border:1px solid #bbb;
  padding:5px;
}

input.challenge:focus {
  border:1px solid #666;
}

/* Constrain the mutual auth image to a standard 300px wide regardless
   of where this image has come from (i.e., customer might be using their own) */
#mutualauthsecrets {
  width:300px; /* 320px for desktop override */
  table-layout: fixed;
  /* IE and Safari */
  word-wrap: break-word;
}

#mutualauthsecrets img {
  width:300px; /* 100% for desktop override */
}

#mutualauthsecrets td, #mutualauthsecrets th {
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

#mutualauthsecrets th {
  /* Firefox and Opera */
  overflow: auto;
  display: block;
}

#gridchallenge td {
  padding-bottom: 0;
}

#gridchallenge tr + tr td {
  padding-top: 0;
}

#gridchallenge input.challenge {
  text-align: center;
}

/* The following are settings for our mutual authentication image gallery */

img.fullimage, div.fullimage {
  height: 200px;
  width: 300px; /* 320px for desktop override */
}

div.fullimage {
  border:1px solid #000;
  margin-bottom:5px;
}

#mutualauthimage {
    position: relative;
    width: 100%;
    margin-bottom:10px;
    margin-top:10px;
    z-index: 1;
}

#scrollbox {
    width: 100%;
    height: 116px;
    background-color:#f4f4f4;
    overflow:auto;
    /* Only works for iOS5 and above */
    -webkit-overflow-scrolling: touch;
    border:1px solid #aaa;
}

a.gallery, a.gallery:visited {
    display:block;
    text-decoration:none;
    border:1px solid #000;
    width:80px;
    height:50px;
    margin:3px;
    float:left;
}

a.gallery span {
    display:block;
    position:absolute;
    left:150px;
    top:-1px;
    width:1px;
    height:1px;
    overflow:hidden;
    background-color:#efedec;
    z-index:100;
}

a.gallery:hover {
    border:1px solid #fff;
}

a.gallery:hover img {
    border:1px solid #000;
    z-index:100;
}

a.gallery:active img, a.gallery:focus img {
    border:1px solid #000;
    z-index:50;
}

a.gallery:hover span.csshover {
    display:block;
    position:absolute;
    width:320px;
    height:200px;
    top:0;
    left:0;
    background-color:#fff;
    z-index:100;
}

a.gallery:active {
    border:1px solid #000;
}

/* Certain links (alternate auth, SAML login, password recovery, etc.) are prefixed with an arrow to draw attention */

.highlightlink {
  min-height: 16px;  
  padding-left: 20px;
  display: inline-block;
  background: url('../../images/arrow_right_blue.gif') no-repeat left 2px;
}

/* Add images to the standard Blueprint classes of error, notice, and success.
   Respond.js seems to have issues (in conjunction with IE 8) unless !important
   is added to all rules that enhance the Blueprint rules defined in a different
   CSS file.
*/

.error, .notice, .success {
   padding-left: 36px !important;
   background-position: 10px center !important;
   background-repeat: no-repeat !important;
}

.error {
    background-image: url('../../images/error.gif') !important;
}

.notice {
    background-image: url('../../images/notice.gif') !important;
}

.success {
    background-image: url('../../images/success.gif') !important;
}

/* CSS button so we don't have boring links */

a.cssbutton, a.cssbutton:visited {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  padding: 2px;
  color: #224059;
  background-color: #b5c9e2;
  border-top: 2px #cce3ff solid;
  border-left: 2px #cce3ff solid;
  border-bottom: 2px #31557f solid;
  border-right: 2px #31557f solid;
}

a.cssbutton:hover {
  color: #fff;
  background-color: #99aabf;
  border-top: 2px #31557f solid;
  border-left: 2px #31557f solid;
  border-bottom: 2px #cce3ff solid;
  border-right: 2px #cce3ff solid;
}

/* Password rules */

.rules {
  border: 2px ridge #EEEEEE;
  background-color: #E3EEFB;
  padding-top: 2px;
  margin-bottom: 5px;
}

.rules ul  {
  margin: 0 0 1em 0;
  padding-top: 0;
  padding-left: 0;
  list-style-type: none;
}

.rules li  {
  padding-left: 12px; /* Room for the icons */
}

.rules li.ruleSatisfied  {
  background: url('../../images/content_password_check.gif') no-repeat center left;
}

.rules li.ruleNotSatisfied {
  background: url('../../images/content_password_x.gif') no-repeat center left;
}

.rules li.ruleUnknown  {
  background: url('../../images/content_password_unknown.gif') no-repeat center left;
}

/* Expanding / collapsing help text */

.collapse, .expand {
  cursor: pointer;
  background-position: top right;
  background-repeat: no-repeat;
  padding-right: 20px;
}

.collapse {
  background-image: url('../../images/collapse.gif');
}

.expand {
  background-image: url('../../images/expand.gif');
  margin-bottom: 0;
}

/* External Links */

a.external {
  background: url('../../images/linkexternal.gif') center right no-repeat;
  padding-right:14px;
}

a.external[href^="https://"] {
  background: url('../../images/httpsexternal.gif') center right no-repeat;
  padding-right:15px;
}

a.external[href^="mailto:"] {
  background: url('../../images/mailtoexternal.gif') center right no-repeat;
  padding-right:18px;
}

a.external[href^="tel:"] {
  background: url('../../images/telexternal.png') center right no-repeat;
  padding-right:18px;
}

/* Self admin action links */
li.selfadminaction {
    font-size:1.2em;
    margin-bottom:1.25em;
}

/* Soft token and smart credential activation info table */

table.activationinfo {
    /* Just as wide as it needs to be */
    width: 1%;
    /* For mobile Safari */
    -webkit-text-size-adjust: 100%;
    background: #C3D9FF;
}

table.activationinfo th {
    white-space: nowrap;
    background: inherit;
}

table.activationinfo td {
    font-family: "Courier New", Courier, monospace;
    white-space: nowrap;
    background: inherit;
}

#tokenserialnumbers {
    width: 260px; /* 100% for desktop override */
}

/* To highlight the password used in conjunction with QR code soft token activation */

#qrcodepwd {
    font-weight: bold;
    font-size: large;
    color: #B33;
    margin: 10px 0 10px 0;
}

/* Things that should only be printed or only displayed when JS is enabled */

.printonly, .jsonly {
    display: none;
}

/* We currently just hide the caption element inside a table unless a screen reader */
table > caption { 
   clip: rect(1px, 1px, 1px, 1px); 
   height: 1px; 
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
}

/* For our skip navigation link: only shown when it gets focus */

#skipToMainContent a {
    padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    color: white;
    font-weight: bold;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-right-radius: 8px;
    background:transparent;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}

#skipToMainContent a:focus {
    position: absolute;
    left: 0px;
    top: 0px;
    background: #FE000C; /* Entrust Red */
    outline: 0;  
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear;
}