/****************
*
*  STScI theme for SSO  IdP
*     derived from previous CAS theme
*
*   Works for large and small displays
*
*****************/



html, header, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p  {
    margin: 0; padding: 0; border: 0; outline: 0;
    vertical-align: baseline;
}

body { font-family: Verdana, sans-serif; font-size: 11px; line-height: 1.4em; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/*  PROD / original / normal gray BG:
body { background: #eee; }
   TEST should have noticable Orange background:
body { background: #ffaa44; }
   DEV should have ugly Yellow background:
body { background: #ffff00; }
*/
body { background: #eee; }





/* the normal view for computer monitors  */

   /* the working area - leave 5% around edge to show color of background */
   #canvas {
       width: 95%;
       margin: auto;
   }


   /* both headers stsci & myst */
   #header {
       background-color: #336699;
       width: 426px;
       margin: auto;
       box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
   }
   /* white stsci logo text */
   #header #company-name {
       height: 90px;
       text-indent: -999em;
       background: url(/idp/images/stsci-sso-header-logo-2x.png) no-repeat center center;
       background-size: 165px;
   }
   /* blurred dark background image */
   #header #app-bkgrd-img {
       position: relative;
       background: url(/idp/images/myst-sso-header-bkgrd-2x.jpg) no-repeat top center;
       background-size: cover;
       background-position: 50% 50%;
       height: 90px;
       z-index: 0;
   }
   /* formatting for the telescope eye image */
   #header #app-bkgrd-img img {
       display: inline;
       position: absolute;
       height: 63px;
       top: 0; left: 0; bottom: 0; right: 0;
       margin: auto;
       z-index: 1;
   }


   /* content */
   /* the gray box holding all the text, fields, buttons */
   #content {
       width: 426px;
       overflow: hidden;
       margin: auto;
       background: #ccc;
       border-bottom-right-radius: 10px;
       border-bottom-left-radius: 10px;
       box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}



   #content #msg { 
       padding: 20px 20px 20px 88px;
       border-bottom-left-radius: 10px; 
       border-bottom-right-radius: 10px; 
       font-size: 14px; 
       line-height: 150%; 
   }
   #content #msg h2 { 
       font-size: 1.4em; margin-bottom: 0.5em; 
   }
   #content #msg.errors { 
       border: 1px dotted #BB0000; 
       color: #BB0000; 
       background: url(../images/error.gif) no-repeat 20px center; 
       background-color: rgb(255, 238, 221); 
   }
   #content #msg.success { 
       border: 1px dotted #390; 
       color: #390; 
       background: url(../images/confirm.gif) no-repeat 20px center; 
       background-color: rgb(221, 255, 170); 
   }
   #content #msg.info { 
       border: 1px dotted #008; 
       color: #008; 
       background: url(../images/info.gif) no-repeat 20px center; 
   }


   #login {
       width: 320px;
       margin: 0 auto;
   }
   #login #fm1 {
       padding: 0 20px;
       background: #eee;
       border-radius: 10px;
   }


/*
#idpwarn is the warning banner on TEST and DEV above the login box
It doesn't matter if we set PROD,  there is no text
PROD:
       color: #eee;
TEST:
       color: #ffaa44;
DEV:
       color: #ffff00;
*/

   #idpwarn {
       color: #eee;
       background-color: #ccc;
       padding: 10px 30px;
       border-radius: 5px;
       line-height: 125%;
       font-size: 36pt;
       text-align: center;
       font-weight: bold;
   }
   #instrucs {
       padding: 10px;
       text-align: center;
       line-height: 1.4em;
       font-size: 1.4em;
       font-weight: normal;
       border-bottom: 1px solid #DDDDDD;
   }


   #credentry {
      margin: 10px 0;
      float: center;
   }
   #credentry label, #siteswarn {
      color: #777;
   }
   #credentry .row {
      margin-bottom: 10px;
   }
   #credentry input {
      padding: 6px;
      border-radius: 3px;
      border: 1px solid #DDDDDD;
      background: #FFFFDD;
      width: 95%;
   }
   #credentry #username {
      margin-bottom: 5px;
   }

   #forgot-pass, #siteswarn, #reminder {
      font-size: 100%;
      line-height: 110%;
      text-align: center;
      padding-bottom: 10px;
   }
   #reminder p {
       line-height: 1.5em;
   }


   #buttons {
      padding: 20px 0;
      border-top: 1px solid #DDDDDD;
   }
   #loginbutton {
      font-size: 12pt;
      background: #336699 none repeat scroll 0 0;
      border: 0 none;
      border-radius: 3px;
      color: white;
      font-weight: bold;
      outline: medium none;
      padding: 10px 20px;
      width: 80%;
   }
   #clearbutton {
      border: 0;
      background: none;
      color: #777;
      text-transform: lowercase;
      border-left: 1px solid #ddd;
      font-size: 8pt;
      line-height: 300%;
   }
   #loginbutton:hover, #clearbutton:hover {
      cursor: pointer;
   }




   #sidebar {
       padding: 30px;
       clear: left;
       margin: auto;
   }
   #sidebar h3,
   #sidebar p {
       margin-bottom: 0.5em;
   }
   #sidebar h3,
   #sidebar p,
   #sidebar dd {
       line-height: 1.5em;
   }



   /* footer */
   #footer { color: #999; margin: 20px 0; text-align: center; }





/* mobile size */
@media only screen and (max-device-width: 480px) {

   /* the working area - leave 5% around edge to show color of background */
   #canvas {
       width: 100%;
       margin: 0 auto 0;
       font-size: 110%;
       line-height: 110%;
   }


   #header {
      background-color: #336699;
      width: 100%;
      margin: 0 auto 0;
   }
   #header #company-name {
      height: 180px;
      text-indent: -999em;
      background: url(/idp/images/stsci-sso-header-logo-2x.png) no-repeat center center;
      background-size: 330px;
   }
   #header #app-bkgrd-img {
      position: relative;
      background: url(/idp/images/myst-sso-header-bkgrd-2x.jpg) no-repeat top center;
      background-size: cover;
      background-position: 50% 50%;
      height: 180px;
      z-index: 0;
   }
   #header #app-bkgrd-img img {
      display: inline;
      position: absolute;
      height: 126px;
      top: 0; left: 0; bottom: 0; right: 0;
      margin: auto;
      z-index: 1;
   }



   #content,
   #login {
       width: 100%;
       margin: 0 auto 0;
       font-size: 110%;
       line-height: 110%;
    }

   #content #msg {
       padding: 40px 40px 40px 100px;
       font-size: 300%;
   }

   #idpwarn {
       font-size: 96px;
   }


   #login #fm1 {
       border-radius: unset;
   }

   #credentry input {
       padding: 6px;
       border-radius: 8px;
       border: 3px solid #DDDDDD;
       background: #FFFFDD;
       font-size: 300%;
       line-height: 200%;
   }


   #credentry label, #siteswarn label {
      font-size: 200%;
      line-height: 200%;
   }

   #forgot-pass, #siteswarn, #reminder {
      padding-bottom: 20px;
      line-height: 200%;
   }

   #siteswarn input[type=checkbox] {
      transform: scale(3.0);
   }
   #siteswarn span {
      padding-left: 20px;
   }



   #buttons {
      padding-top: 20px;
      border-top: 1px solid #DDDDDD;
      line-height: 300%;
   }
   #loginbutton {
      font-size: 36pt;
      border-radius: 10px;
      padding: 40px;
      margin: 20px 0;
   }
   #clearbutton {
      font-size: 24pt;
      padding: 20px;
      margin: 20px;
   }
   #loginbutton:hover, #clearbutton:hover {
      cursor: pointer;
   }



   #sidebar p {
       margin-bottom: 2.5em;
       line-height: 1.5em;
   }


}