/* fileName:  'WRSlanding.css'
 * startDate: '24-03-2022'
 * lastMod:   '30-05-2024'
 * version    '1.2.3'
 * status:    'beta'
 * description: 'a set of styles for the WRS intranet landingpage'
 * usage:   '';
 * remark: 'might contain some unused defines'
 * startPerson:'RZ'
 * lastPerson: 'RZ'
 */

@import url("animations.css");

:root
{
  --BGfilter: #00000050;
  --lineBGfive: rgba(23,62,125,0.9);
}

body 
{ 
  color: #000000;
  font-weight: 300;
  font-family: verdana, arial, helvetica, lucida, sans-serif;
  background: #DDDDDD;
  margin-top: 0px;
}

html
{
  /* center all */
  display: table;
  margin-left: auto;
  margin-right: auto;
}

b
{
  font-weight: 600;
}

.five
{
  min-height: 99vh;
  background-color: #DDDDDD;
  background-repeat: no-repeat;
  background-position: right top;
  background-image: linear-gradient(45deg, #00000000 94.9%,
                                   var(--lineBGfive) 95%,
                                   var(--lineBGfive) 95.4%,
                                           #00000000 95.5%,
                                           #00000000 95.9%,
                                   var(--lineBGfive) 96%,
                                   var(--lineBGfive) 96.4%,
                                           #00000000 96.5%,
                                           #00000000 96.9%,
                                   var(--lineBGfive) 97%,
                                   var(--lineBGfive) 97.4%,
                                           #00000000 97.5%,
                                           #00000000 97.9%,
                                   var(--lineBGfive) 98%,
                                   var(--lineBGfive) 98.4%,
                                           #00000000 98.5%,
                                           #00000000 98.9%,
                                   var(--lineBGfive) 99%,
                                   var(--lineBGfive) 99.4%,
                                           #00000000 99.5%,
                                           #00000000 99.9%);
}

/*
this is moved to HTML to enable modification by JS
.sandbox
{
  background: linear-gradient(var(--BGfilter), var(--BGfilter)), fixed no-repeat center url("../pics/JPG/desert.jpg");
}
*/

.secretLink
{
  float: right;
  margin: 0.1em;
  opacity: 0.2;
}

OL { list-style-type: decimal }
UL { list-style-type: disc }

a:link    { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover   { color: #000000; font-weight: bold; }
a:active  { color: #0000FF; font-weight: bold; }

.left  { float: left; margin: 0.1em; }
.right { float: right; margin: 0.1em;}
.tableRight { text-align: right;}

pre
{
  /* made for print_r() */
  white-space: pre-wrap;
}

table.landingIndex
{
  border: 1px solid black;
  width: 600px;
  /* table-layout: fixed; */
  background-color:#FFFFFF;
  padding:10px 10px;
  vertical-align: top;
}

table.landingIndex td
{
  border: 0px solid black;
}

table.testDB
{
  border: 1px solid black;
  background: #173E7D80;
  border-collapse:separate;
  border-spacing: 10px 0px;
}
table.testDB th
{
  color: #00ADEF;
  background: #173E7D;
  font-size: 12px;
  font-weight: 300;
  padding: 0px 5px !important;
}
table.testDB td
{
  padding: 6px 0px 4px 0px !important;
}

#EStestDBTable
{
  background: rgba(200,200,127,0.5) !important;
}

.imgWRSlogo
{
  width: 500px;
  padding:10px 5px 5px 5px;
}
.imgWRSlogo:hover
{
  width: 500px;
  padding:10px 95px 5px 5px;
  background-color:rgba(255,255,255,0.25);
}

.imgLinkES
{
  width: 200px;
  height: 61px;
  background-color:rgba(223,238,0,0.25);
  padding:5px 10px;
  border: 1px solid black;
}
.imgLinkES:hover
{
  width: 210px;
  height: 65px;
  background-color:rgba(223,238,0,1);
  padding:3px 5px;
  border: 1px solid black;
}

.imgLinkESA25
{
  width: 55px;
  height: 64px;
  background-color:rgba(223,238,0,0.25);
  padding:3px 8px;
  border: 1px solid black;
}
.imgLinkESA25:hover
{
  width: 65px;
  height: 67px;
  background-color:rgba(223,238,0,1);
  padding:1px 3px;
  border: 1px solid black;
}

.imgLinkSS
{
  width: 200px;
  height: 61px;
  background-color:rgba(9,9,169,0.5);
  padding:5px 10px;
  border: 1px solid black;
}
.imgLinkSS:hover
{
  width: 210px;
  height: 65px;
  background-color:rgba(9,9,169,1);
  padding:3px 5px;
  border: 1px solid black;
}

.imgLinkEStest
{
  width: 200px;
  height: 61px;
  background-color:rgba(223,238,0,0.5);
  padding:5px 10px;
  border: 1px solid black;
}
.imgLinkEStest:hover
{
  width: 210px;
  height: 65px;
  background-color:rgba(223,238,0,1);
  padding:3px 5px;
  border: 1px solid black;
}

.imgLinkSStest
{
  width: 200px;
  height: 61px;
  background-color:rgba(9,9,69,0.5);
  padding:5px 10px;
  border: 1px solid black;
}
.imgLinkSStest:hover
{
  width: 210px;
  height: 65px;
  background-color:rgba(9,9,69,1);
  padding:3px 5px;
  border: 1px solid black;
}

.imgPSIlinkSS
{
  width: 200px;
  height: 61px;
  /* background-color:rgb(9,9,169,0.1); */
  background-color:rgba(9,169,9,0.1);
  padding:5px 10px;
  border: 1px solid black;
}
.imgPSIlinkSS:hover
{
  width: 210px;
  height: 65px;
  padding:3px 5px;
  animation-name: PSISS;
  animation-delay: 1.0s;
  animation-duration: 5s;
  animation-timing-function: cubic-bezier(.15,.85,.4,.9);
  animation-fill-mode: forwards;
}
@keyframes PSISS
{
     0% {padding: 3px 5px;}
   100% {
         width: 10px;
         height: 0px;
         padding: 20px 0px 51px 210px;
         background-color:rgba(9,169,9,0.4);
       }
}

.flakeBG
{
  width: 20px;
  height: 20px;
}

.imgLinkSSPM
{
  width: 200px;
  height: 61px;
  background-image: linear-gradient(180deg, #00000000 85.9%,
                                            rgba(23,62,125,0.2) 86%,
                                            #00000000 95.5%,
                                            #00000000 95.9%),
                                            url("../pics/PNG/WRSprojectMenu.png");
  background-size: 200px;
  background-color:#FFFFFF;
  background-position: center;
  background-repeat: no-repeat;
  padding:5px 10px;
  border: 1px solid black;
}
.imgLinkSSPM:hover
{
  background-image: linear-gradient(180deg, #00000000 85.9%,
                                            #000000FF 86%,
                                            #00000000 95.5%,
                                            #00000000 95.9%),
                                            url("../pics/PNG/WRSprojectMenu.png");
  animation-name: SSPM;
  animation-delay: 0.2s;
  animation-duration: 5s;
  animation-direction: alternate, reverse, normal;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes SSPM
{
    0% { padding:5px 10px; }
   25% {
         width: 100px;
         padding: 5px 5px 5px 115px; /* top, right, bot, left */
       }
   75% {
         width: 100px;
         padding: 5px 115px 5px 5px; /* top, right, bot, left */
       }
  100% { padding:5px 10px; }

}

.imgLinkMyAdmin
{
  width: 200px;
  height: 61px;
  background-size: 200px;
  background-color:#FFFFFF;
  background-position: center;
  background-repeat: no-repeat;
  padding:9px 10px 1px 10px;
  border: 1px solid black;
}
.imgLinkMyAdmin:hover
{
  width: 210px;
  height: 65px;
  background-color:#FFFFFF;
  padding:6px 0px 0px 10px;  /* top, right, bot, left */
  border: 1px solid black;
}

.imgLinkWht
{
  width: 200px;
  /* //opacity: 0.5; */
  background-color:#FFFFFF;
  padding:5px 10px;
  border: 1px solid black;
}
.imgLinkWht:hover
{
  width: 200px;
  opacity: 1;
  background-color:#DDDDDD;
  padding:5px 10px;
  border: 1px solid black;
}

.xmasHat
{
  opacity: 1;
  width: 50px;
  position: absolute;
  top: 1em; left: 50%;
  transform: translate(-310px) rotate(-20deg);
}
.christmasBackground
{
  background-size: 100% !important;
  background: fixed no-repeat bottom url("../pics/SVG/christmazzBG.svg"),
  linear-gradient(0deg, rgba(255,255,204,0) 0.1%,
                        rgba(255,255,204,0.2) 7%,
                        #2178d1 90%,
                        rgba(16,57,99,0.5) 100%) fixed no-repeat top;
}

.center
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.blueOnblue
{
  color: #00ADEF;
  background: #173E7D;
} 

.prae a
{
  float: right;
  margin: 0.1em;
  font-size: 50%;
  color:#AAAAFF80;
}

div.copyrightBR
{
  opacity: 0.5;
  color: #000000;
  font-size: 12px;
  font-weight: 250;
  font-style: italic;
  text-align: right;
}