html{min-height:100%; font: ;}
body {background: linear-gradient(#bab6a0,#9b9885); font: normal 16px/150% Arial, Helvetica, sans-serif; padding-top: 3em;}


header { display:block; background:#900028; position:relative; height:85px; width: 80%; margin: 0 auto;}
#logo {  display: block;  position: relative;  background: none;  text-indent: 0;  float: none;  height: 85px;  width: 80%;  margin: -18px 40px 0 10px;  border: 0px;  color: white;}
#enviro{  display: block;  position: absolute;  top:0;  left:0;  background: rgba(144,0,40,.5);  text-indent: 0;  text-align: center;  float: none;  height: 85px;  width: 300px;  border: 0px;  color: #00FF00;  font-size: 40px;}
#course_docs_resp { position:absolute; right:10px; top:35px; }
#course_docs_resp a {    color: #fff;  text-decoration: none;    font-size: 16px;}

/* main is an added ID */
#main {background: #fff; /*url(../images/bgs/bg6.jpg)*/ background-repeat: no-repeat; background-position: center ; max-width:none; width: 80%;  background-size: cover; overflow: hidden; margin: 0 auto; padding:0;}

#alertmsg-on { font-size: 1.5em; line-height:1.2em; margin-bottom: 2em; background:#FFDF00; color:#000;  }

footer {display:block; background:#900028; position:relative; height: auto; color: #fff; line-height:1em; width: 80%; margin: 0 auto;}
#footerbox { padding: 10px;  }
#footerbox h2 { font-family: "Times New Roman", Times, serif; font-variant-caps: small-caps; margin-top: 0 }
#footerbox dl { font-size: .7em; }
#footerbox ul { margin: 0;padding: 0;}
#footerbox li { list-style: none; padding:.02em}

/* contentblock is an added ID */
#contentblock {   font:400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;  border-radius:1.2em;  background:rgba(255,255,255,.8);  padding:25px;  text-align:center;  position:relative;  min-width:600px; max-width:600px;  margin-top: 50px;  margin-left: 40px;  margin-bottom: 80px;  width:33%;}

/* Reset CSS from cas css */
#contentblock .card{ background: none; border:none; max-width: none; width: 100%}
#contentblock .btn-submit:hover {background: #c03058 ;}
#contentblock .btn-submit {background: #900028;}
#contentblock .fa,#contentblock .fas {color: #900028;}
#contentblock a {color: #900028;}

#username, #password { text-align: center; margin: .8em 0; }
#contentblock input[type="text"], #contentblock input[type="email"], #contentblock input[type="password"], #contentblock input[type="url"], #contentblock textarea {  border:1px solid #CCC;  background:#FFF;  margin:.4em 0;  text-align:center;}

.kurogo-rm { display:none; border: 2px solid red;}

#duo_iframe{ width: 100%; border-radius: 10px; }

/* For Help and Duo Fragments */
#loginduohelp, #loginhelp {width: 100%;}

.help, .duohelp {       font-size: 1.25em;  line-height: 1.1em;}
.help a, .duohelp a{    font-weight: bold;}
.help div , .duohelp div{       padding: 5px 0;}
.help ul li {   display: inline-block; padding: 3px 8px;}
.help ul  {     margin: 0; padding: 0;}

.duohelp {  text-align: left;}
.duohelp .dl-buttons  ul li {  display: inline-block; width: 30%; padding-top: 10px; text-align: center;}
.duohelp .dl-buttons  ul  {  margin: 0; padding: 0;}
.duohelp .dl-buttons  ul li img{  width:90%; height:auto;}

.duo {padding-top:20px;}

.tooltip {    position: relative;    display: inline-block;}
.tooltip .tooltiptext {    visibility: hidden;    width: 140px;    background-color: white;    color: #0099ff;    text-align: center;    border-radius: 6px;    padding: 5px;    position: absolute;    z-index: 1;    top: 150%;    left: 40%;    margin-left: -60px;    font-size: 13px;}
.tooltip .tooltiptext::after {    content: "";    position: absolute;    bottom: 100%;    left: 40%;    margin-left: -5px;    border-width: 5px;    border-style: solid;    border-color: transparent transparent white transparent;}
.tooltip:hover .tooltiptext {    visibility: visible;}

.clear {        clear:  both;}
.clearfix:before, .clearfix:after {     content: "";    display: table;}
.clearfix:after {       clear: both;}
.clearfix {     zoom: 1;}

/* For Test Enviro Animation */
.flashy{   animation-name: flash;  animation-duration: 0.2s;  animation-timing-function: linear;  animation-iteration-count: infinite;  animation-direction: alternate;  animation-play-state: running;}

@keyframes flash {    from {color: #00ff00;}    to {color: #900028;}}

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

  body { padding-top:0;}
  #main, header, footer { width: 100%; max-width: 100%; }
  #logo {  margin-top: 0;}
  #contentblock {       min-width:0;    max-width:none; margin-top: 25px;       margin-left: auto;      margin-right: auto;     margin-bottom: 0;       width:90%;}

}

/* iPhone (portrait) ----------- */

@media only screen  and (max-width : 640px) {

  header { height:auto; text-align: center;}
  header h1{ margin-left: 0}
  #course_docs_resp { position:relative; right:auto; top:auto; display: block; }
  #main{background: #fff !important; background-size: cover; overflow: hidden; }
  #logo {  display: block;  background: none;  text-indent: 0;  float: none;  height: 85px;  text-align: center;  width: 100%;  border: 0px;  color: white;}
  #enviro{  display: block;  position: absolute;  top:0;  left:0;  background: rgba(144,0,40,.5);  text-indent: 0;  text-align: center;  float: none;  height: 85px;  width: 100%;  border: 0px;  color: #00FF00;  font-size: 40px; }
  #contentblock {       padding:5%;     margin-top: 0;  width:90%;}

}