Difference between revisions of "GCcollabNNHPDtest"

From wiki
Jump to navigation Jump to search
(test)
Line 4: Line 4:
  
  
−
<html>
 
  
−
<body>
+
<!-- Template for HSIB onboarding page -->
  
−
<body><div class="grid-container">[[File:Employee Welcome Kit Placemat - Test for GCwiki.pdf|thumb|Test for Wiki]]
+
<html>
 +
 
 +
<head>
 +
 
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 +
 
 +
<script>
 +
 
 +
function animateLinkBox() {
 +
 
 +
var angles = ["1deg","2deg","3deg", "4deg", "359deg", "358deg", "357deg", "356deg"];
 +
 
 +
//var x = ["-1px", "-2px", "-3px", "-4px"];
 +
 
 +
//var y = ["5px", "6px", "7px", "8px"];
 +
 
 +
var randAngle = randomDoubleFromInterval((-3),(3));//angles[Math.floor(Math.random() * angles.length)];
 +
 
 +
//var randX = x[Math.floor(Math.random() * x.length)];
 +
 
 +
//var randY = y[Math.floor(Math.random() * y.length)];
 +
 
 +
 
 +
var randX = randomDoubleFromInterval((-30),(-20));
 +
 
 +
var randY = randomDoubleFromInterval((20),(30));
 +
 
 +
 
 +
$(".link-box")[0].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)";
 +
 
 +
randAngle = randomDoubleFromInterval((-3),(3));
 +
 
 +
randX = randomDoubleFromInterval((-30),(-20));
 +
 
 +
randY = randomDoubleFromInterval((20),(30));
 +
 
 +
$(".link-box")[1].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)";
 +
 
 +
}
 +
 
 +
function selectTab(selectedTab) {
 +
 
 +
$("div.page-content-container").hide();
 +
 
 +
$("div#"+selectedTab.id+".page-content-container").show();
 +
 
 +
$("div.tab-style").removeClass("selected");
 +
 
 +
selectedTab.classList.add("selected");
 +
 
 +
 
 +
//animateLinkBox();
 +
 
 +
}
 +
 
 +
function randomDoubleFromInterval(min,max) // min and max included
 +
 
 +
{
 +
 
 +
   return Math.random()*(max-min+1)+min;
 +
 
 +
}
 +
 
 +
$(document).ready(function(){
 +
 
 +
animateLinkBox();
 +
 
 +
})
 +
 
 +
 
 +
</script>
 +
 
 +
<style>
 +
 
 +
<nowiki>*</nowiki>, *:before, *:after {
 +
 
 +
box-sizing: border-box; /* Set all sizing to include border size */
 +
 
 +
}
 +
 
 +
.grid-container {
 +
 
 +
display: grid;
 +
 
 +
grid-template-columns: [col1-start] 1fr [col1-end col2-start] 10px [col2-end col3-start] 1fr [col3-end col4-start] 2fr [col4-end];
 +
 
 +
grid-template-rows: [row1-start] 1fr [row1-end row2-start] auto [row2-end row3-start] auto [row3-end];
 +
 
 +
 
 +
display: -ms-grid;
 +
 
 +
-ms-grid-columns: 1fr 10px 1fr 2fr;
 +
 
 +
-ms-grid-rows: 1fr auto auto;
 +
 
 +
}
 +
 
 +
.btn {
 +
 
 +
  border: 2px solid black;
 +
 
 +
  background-color: white;
 +
 
 +
  color: black;
 +
 
 +
  padding: 14px 28px;
 +
 
 +
  font-size: 16px;
 +
 
 +
  cursor: pointer;
 +
 
 +
}
 +
 
 +
.links{
 +
 
 +
  border-color: #BB1B8D;
 +
 
 +
  color: black;
 +
 
 +
}
 +
 
 +
.links:hover {
 +
 
 +
  background-color: #BB1B8D;
 +
 
 +
  color: white;
 +
 
 +
}
 +
 
 +
.tab-style {
 +
 
 +
border-top-right-radius: 10px;
 +
 
 +
   border-top-left-radius: 10px;
 +
 
 +
/* Unselected tab background and font colour */
 +
 
 +
background: #e0e0ba;
 +
 
 +
color: black;
 +
 
 +
 
 +
/* Unselected tab margin and padding */
 +
 
 +
padding: 10px 20px;
 +
 
 +
 
 +
min-width: 250px;
 +
 
 +
  
 +
 
 +
/* Unselected tab font size, and weight*/
 +
 
 +
font-size:20px;
 +
 
 +
font-weight: bold;
 +
 
 +
font-family: sans-serif;
 +
 
 +
text-align: center;
 +
 
 +
line-height: initial;
 +
 
 +
overflow:hidden;
 +
 
 +
cursor:pointer;
 +
 
 +
box-shadow: 0 5px 0 #e0e0ba, 0 0 1px #333;
 +
 
 +
 
 +
transition: opacity 0.25s ease-out;
 +
 
 +
}
 +
 
 +
.tab-style:hover { /* Label hover effect */
 +
 
 +
   box-shadow: 0 5px 0 #000000, 0 0 5px #888;
 +
 
 +
}
 +
 
 +
.selected {
 +
 
 +
background-color: #fcfccf;
 +
 
 +
color: black;
 +
 
 +
 
 +
/*border-left: 1px solid #333333;
 +
 
 +
border-right: 1px solid #333333;
 +
 
 +
border-top: 1px solid #333333;
 +
 
 +
border-bottom: 0;*/
 +
 
 +
 
 +
box-shadow: 0 5px 0 #fcfccf, 0 0 5px #888;
 +
 
 +
z-index: 1;
 +
 
 +
}
 +
 
 +
.tab1 {
 +
 
 +
grid-column-start: col1-start;
 +
 
 +
grid-column-end: col1-end;
 +
 
 +
grid-row-start: row2-start;
 +
 
 +
grid-row-end: row2-end;
 +
 
 +
 
 +
-ms-grid-column: 1;
 +
 
 +
-ms-grid-column-span: 1;
 +
 
 +
-ms-grid-row: 2;
 +
 
 +
-ms-grid-row-span: 1;
 +
 
 +
}
 +
 
 +
div.tab-style>p.tab1-label {
 +
 
 +
margin: 0;
 +
 
 +
   background: white;
 +
 
 +
   border-top: 10px solid black;
 +
 
 +
   border-radius: 5px;
 +
 
 +
padding: 8px;
 +
 
 +
 
 +
box-shadow:
 +
 
 +
 0px 1px 1px rgba(000,000,000,0.5),
 +
 
 +
 inset 0px 0px 2px rgba(255,255,255,1);
 +
 
 +
}
 +
 
 +
.tab2 {
 +
 
 +
grid-column-start: col3-start;
 +
 
 +
grid-column-end: col3-end;
 +
 
 +
grid-row-start: row2-start;
 +
 
 +
grid-row-end: row2-end;
 +
 
 +
 
 +
-ms-grid-column: 3;
 +
 
 +
-ms-grid-column-span: 1;
 +
 
 +
-ms-grid-row: 2;
 +
 
 +
-ms-grid-row-span: 1;
 +
 
 +
}
 +
 
 +
div.tab-style>p.tab2-label {
 +
 
 +
margin: 0;
 +
 
 +
   background: white;
 +
 
 +
   border-top: 10px solid black;
 +
 
 +
   border-radius: 5px;
 +
 
 +
padding: 8px;
 +
 
 +
 
 +
box-shadow:
 +
 
 +
 0px 1px 1px rgba(000,000,000,0.5),
 +
 
 +
 inset 0px 0px 2px rgba(255,255,255,1);
 +
 
 +
}
 +
 
 +
.tab-gap1 {
 +
 
 +
grid-column-start: col2-start;
 +
 
 +
grid-column-end: col2-end;
 +
 
 +
grid-row-start: row2-start;
 +
 
 +
grid-row-end: row2-end;
 +
 
 +
/*border-bottom: 1px solid #333333;*/
 +
 
 +
 
 +
-ms-grid-column: 2;
 +
 
 +
-ms-grid-column-span: 1;
 +
 
 +
-ms-grid-row: 2;
 +
 
 +
-ms-grid-row-span: 1;
 +
 
 +
}
 +
 
 +
.tab-gap2 {
 +
 
 +
grid-column-start: col4-start;
 +
 
 +
grid-column-end: col4-end;
 +
 
 +
grid-row-start: row2-start;
 +
 
 +
grid-row-end: row2-end;
 +
 
 +
/*border-bottom: 1px solid #333333;*/
 +
 
 +
 
 +
-ms-grid-column: 4;
 +
 
 +
-ms-grid-column-span: 1;
 +
 
 +
-ms-grid-row: 2;
 +
 
 +
-ms-grid-row-span: 1;
 +
 
 +
}
 +
 
 +
.page-content-container {
 +
 
 +
grid-column-start: col1-start;
 +
 
 +
grid-column-end: col4-end;
 +
 
 +
grid-row-start: row3-start;
 +
 
 +
grid-row-end: row3-end;
 +
 
 +
 
 +
-ms-grid-column: 1;
 +
 
 +
-ms-grid-column-span: 4;
 +
 
 +
-ms-grid-row: 3;
 +
 
 +
-ms-grid-row-span: 1;
 +
 
 +
 
 +
display: grid;
 +
 
 +
grid-template-columns: [col1-start] 3fr [col1-end col2-start] 1fr [col2-end];
 +
 
 +
grid-template-rows: [row1-start] 300px [row1-end row2-start] auto [row2-end];
 +
 
 +
 
 +
display: -ms-grid;
 +
 
 +
-ms-grid-columns: 3fr 1fr;
 +
 
 +
-ms-grid-rows: 300px auto;
 +
 
 +
 
 +
 
 +
border-top-right-radius: 7px;
 +
 
 +
/*border-bottom-right-radius: 7px;
 +
 
 +
   border-bottom-left-radius: 7px;*/
 +
 
 +
/*border-left: 1px solid #333333;
 +
 
 +
border-right: 1px solid #333333;
 +
 
 +
border-bottom: 1px solid #333333;*/
 +
 
 +
 
 +
box-shadow: 0 0 5px #888;
 +
 
 +
background-color: #fcfccf;
 +
 
 +
}
 +
 
 +
.page-content-back {
 +
 
 +
grid-column-start: col1-start;
 +
 
 +
grid-column-end: col2-end;
 +
 
 +
grid-row-start: row1-start;
 +
 
 +
grid-row-end: row2-end;
 +
 
 +
 
 +
-ms-grid-column: 1;
 +
 
 +
-ms-grid-column-span: 2;
 +
 
 +
-ms-grid-row: 1;
 +
 
 +
-ms-grid-row-span: 2;
 +
 
 +
 
 +
padding: 20px;
 +
 
 +
margin: 15px;
 +
 
 +
background: #FFFFF9;
 +
 
 +
box-shadow:
 +
 
 +
 0px 1px 3px rgba(000,000,000,0.5),
 +
 
 +
 inset 0px 0px 2px rgba(255,255,255,1);
 +
 
 +
}
 +
 
 +
.page-content {
 +
 
 +
grid-column-start: col1-start;
 +
 
 +
grid-column-end: col1-end;
 +
 
 +
grid-row-start: row1-start;
 +
 
 +
grid-row-end: row2-end;
 +
 
 +
 
 +
-ms-grid-column: 1;
 +
 
 +
-ms-grid-column-span: 1;
 +
 
 +
-ms-grid-row: 1;
 +
 
 +
-ms-grid-row-span: 2;
 +
 
 +
 
 +
padding: 20px;
 +
 
 +
margin: 15px;
 +
 
 +
}
 +
 
 +
.page-content-style {
 +
 
 +
font-family: sans-serif;
 +
 
 +
/*font-weight: ;*/
 +
 
 +
font-size: 1.1em;
 +
 
 +
}
 +
 
 +
div .page-content-header-style {
 +
 
 +
font-family: sans-serif;
 +
 
 +
font-weight: bold;
 +
 
 +
font-size: 1.3em;
 +
 
 +
margin: 0;
 +
 
 +
border: 0;
 +
 
 +
}
 +
 
 +
.page-content-rule-style {
 +
 
 +
border-width: 2px;
 +
 
 +
border-color: black;
 +
 
 +
margin: 0;
 +
 
 +
margin-bottom: 10px;
 +
 
 +
}
 +
 
 +
.link-box {
 +
 
 +
grid-column-start: col2-start;
 +
 
 +
grid-column-end: col2-end;
 +
 
 +
grid-row-start: row1-start;
 +
 
 +
grid-row-end: row1-end;
 +
 
 +
 
 +
-ms-grid-column: 2;
 +
 
 +
-ms-grid-column-span: 1;
 +
 
 +
-ms-grid-row: 1;
 +
 
 +
-ms-grid-row-span: 1;
 +
 
 +
 
 +
/*border: 2px solid black;
 +
 
 +
border-radius: 5px;*/
 +
 
 +
margin: 25px;
 +
 
 +
box-shadow:
 +
 
 +
 0px 1px 3px rgba(000,000,000,0.5),
 +
 
 +
 inset 0px 0px 2px rgba(255,255,255,1);
 +
 
 +
 
 +
 
 +
transform: translateY(5px);
 +
 
 +
}
 +
 
 +
.link-box-style {
 +
 
 +
padding: 10px;
 +
 
 +
font-size: 1.2em;
 +
 
 +
font-family: sans-serif;
 +
 
 +
background-color: #ffff88;
 +
 
 +
}
 +
 
 +
.link-box>ul,
 +
 
 +
div.page-content-style>ul,
 +
 
 +
.checklist-style>ul,
 +
 
 +
td.table-content-style>ul{
 +
 
 +
list-style: none;
 +
 
 +
}
 +
 
 +
.link-box>ul>li:before,
 +
 
 +
div.page-content-style>ul>li:before,
 +
 
 +
.table-content-style>ul>li:before{
 +
 
 +
content: "\2022";    /* Add content: \2022 is the CSS Code/unicode for a bullet */
 +
 
 +
color: black;    /* Change the color */
 +
 
 +
font-weight: bold;   /* If you want it to be bold */
 +
 
 +
font-size: 1.2em;
 +
 
 +
display: inline-block;  /* Needed to add space between the bullet and the text */
 +
 
 +
width: 1em;    /* Also needed for space (tweak if needed) */
 +
 
 +
margin-left: -1em;   /* Also needed for space (tweak if needed) */
 +
 
 +
vertical-align: middle;
 +
 
 +
}
 +
 
 +
.page-content-style .checklist-style>ul>li:before{
 +
 
 +
content: "\25A1";    /* Add content: \25A1 is the CSS Code/unicode for a square */
 +
 
 +
color: black;    /* Change the color */
 +
 
 +
font-weight: bold;   /* If you want it to be bold */
 +
 
 +
font-size: 1.5em;
 +
 
 +
display: inline-block;  /* Needed to add space between the bullet and the text */
 +
 
 +
width: 1em;    /* Also needed for space (tweak if needed) */
 +
 
 +
margin-left: -1em;   /* Also needed for space (tweak if needed) */
 +
 
 +
}
 +
 
 +
.checklist-style>ul>li{
 +
 
 +
padding: 10px;
 +
 
 +
}
 +
 
 +
.title-container {
 +
 
 +
grid-column-start: col1-start;
 +
 
 +
grid-column-end: col4-end;
 +
 
 +
grid-row-start: row1-start;
 +
 
 +
grid-row-end: row1-end;
 +
 
 +
 
 +
/*align-self: end;*/
 +
 
 +
 
 +
-ms-grid-column: 1;
 +
 
 +
-ms-grid-column-span: 4;
 +
 
 +
-ms-grid-row: 1;
 +
 
 +
-ms-grid-row-span: 1;
 +
 
 +
 
 +
/*-ms-grid-row-align: end;*/
 +
 
 +
}
 +
 
 +
.title-content {
 +
 
 +
text-align: center;
 +
 
 +
font-size: 3em;
 +
 
 +
text-transform: uppercase;
 +
 
 +
font-weight: bold;
 +
 
 +
/*text-shadow: 0.25vw 0.15vw grey;*/
 +
 
 +
font-family: sans-serif;
 +
 
 +
}
 +
 
 +
a.link-style {
 +
 
 +
font-weight: bold;
 +
 
 +
text-decoration: none;
 +
 
 +
color: royalblue;
 +
 
 +
}
 +
 
 +
a.link-style:visited {
 +
 
 +
color: royalblue;
 +
 
 +
}
 +
 
 +
a.link-style:hover {
 +
 
 +
color: darkblue;
 +
 
 +
text-shadow:
 +
 
 +
 0px 1px 3px rgba(000,000,000,0.5),
 +
 
 +
 inset 0px 0px 2px rgba(255,255,255,1);
 +
 
 +
}
 +
 
 +
<nowiki>#</nowiki>onboardHeader, #onboardHeaderFR {
 +
 
 +
   background-size: contain;
 +
 
 +
   background-repeat: no-repeat;
 +
 
 +
   background-position: center;
 +
 
 +
 
 +
width: 100%;
 +
 
 +
   height: 400px;
 +
 
 +
}
 +
 
 +
<nowiki>#</nowiki>onboardHeader {
 +
 
 +
background-image: url("<nowiki>http://www.gcpedia.gc.ca/gcwiki/images/2/2d/HSIBOnboardingHeader.jpg</nowiki>");
 +
 
 +
}
 +
 
 +
<nowiki>#</nowiki>onboardHeaderFR {
 +
 
 +
background-image: url("<nowiki>http://www.gcpedia.gc.ca/gcwiki/images/0/0a/HSIBOnboardingHeaderFR.jpg</nowiki>");
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
<style> /* Style set to remove certain GCpedia elements from the page */
 +
 
 +
.firstHeading {
 +
 
 +
display: none;
 +
 
 +
}
 +
 
 +
<nowiki>#</nowiki>contentSub {
 +
 
 +
display: none;
 +
 
 +
}
 +
 
 +
<nowiki>#</nowiki>content {
 +
 
 +
background-color: aliceblue;
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
</html>
 +
 
 +
<!-- End of template for HSIB onboarding page --><div class="grid-container">[[File:Employee Welcome Kit Placemat - Test for GCwiki.pdf|thumb|Test for Wiki]]
 
[[File:2. Policy on COVID-19 Vaccination.docx|thumb|policy on COVID-19 vaccination]]
 
[[File:2. Policy on COVID-19 Vaccination.docx|thumb|policy on COVID-19 vaccination]]
 
[[File:Employee Welcome Kit Placemat.pdf|thumb|Test]]
 
[[File:Employee Welcome Kit Placemat.pdf|thumb|Test]]

Revision as of 20:10, 25 January 2022

Employee Welcome Kit.

onboarding



<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

function animateLinkBox() {

var angles = ["1deg","2deg","3deg", "4deg", "359deg", "358deg", "357deg", "356deg"];

//var x = ["-1px", "-2px", "-3px", "-4px"];

//var y = ["5px", "6px", "7px", "8px"];

var randAngle = randomDoubleFromInterval((-3),(3));//angles[Math.floor(Math.random() * angles.length)];

//var randX = x[Math.floor(Math.random() * x.length)];

//var randY = y[Math.floor(Math.random() * y.length)];


var randX = randomDoubleFromInterval((-30),(-20));

var randY = randomDoubleFromInterval((20),(30));


$(".link-box")[0].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)";

randAngle = randomDoubleFromInterval((-3),(3));

randX = randomDoubleFromInterval((-30),(-20));

randY = randomDoubleFromInterval((20),(30));

$(".link-box")[1].style.transform = "translateX("+randX.toString()+"px) translateY("+randY.toString()+"px) rotate("+randAngle+"deg)";

}

function selectTab(selectedTab) {

$("div.page-content-container").hide();

$("div#"+selectedTab.id+".page-content-container").show();

$("div.tab-style").removeClass("selected");

selectedTab.classList.add("selected");


//animateLinkBox();

}

function randomDoubleFromInterval(min,max) // min and max included

{

   return Math.random()*(max-min+1)+min;

}

$(document).ready(function(){

animateLinkBox();

})


</script>

<style>

*, *:before, *:after {

box-sizing: border-box; /* Set all sizing to include border size */

}

.grid-container {

display: grid;

grid-template-columns: [col1-start] 1fr [col1-end col2-start] 10px [col2-end col3-start] 1fr [col3-end col4-start] 2fr [col4-end];

grid-template-rows: [row1-start] 1fr [row1-end row2-start] auto [row2-end row3-start] auto [row3-end];


display: -ms-grid;

-ms-grid-columns: 1fr 10px 1fr 2fr;

-ms-grid-rows: 1fr auto auto;

}

.btn {

  border: 2px solid black;

  background-color: white;

  color: black;

  padding: 14px 28px;

  font-size: 16px;

  cursor: pointer;

}

.links{

  border-color: #BB1B8D;

  color: black;

}

.links:hover {

  background-color: #BB1B8D;

  color: white;

}

.tab-style {

border-top-right-radius: 10px;

   border-top-left-radius: 10px;

/* Unselected tab background and font colour */

background: #e0e0ba;

color: black;


/* Unselected tab margin and padding */

padding: 10px 20px;


min-width: 250px;

  

/* Unselected tab font size, and weight*/

font-size:20px;

font-weight: bold;

font-family: sans-serif;

text-align: center;

line-height: initial;

overflow:hidden;

cursor:pointer;

box-shadow: 0 5px 0 #e0e0ba, 0 0 1px #333;


transition: opacity 0.25s ease-out;

}

.tab-style:hover { /* Label hover effect */

   box-shadow: 0 5px 0 #000000, 0 0 5px #888;

}

.selected {

background-color: #fcfccf;

color: black;


/*border-left: 1px solid #333333;

border-right: 1px solid #333333;

border-top: 1px solid #333333;

border-bottom: 0;*/


box-shadow: 0 5px 0 #fcfccf, 0 0 5px #888;

z-index: 1;

}

.tab1 {

grid-column-start: col1-start;

grid-column-end: col1-end;

grid-row-start: row2-start;

grid-row-end: row2-end;


-ms-grid-column: 1;

-ms-grid-column-span: 1;

-ms-grid-row: 2;

-ms-grid-row-span: 1;

}

div.tab-style>p.tab1-label {

margin: 0;

   background: white;

   border-top: 10px solid black;

   border-radius: 5px;

padding: 8px;


box-shadow:

 0px 1px 1px rgba(000,000,000,0.5),

 inset 0px 0px 2px rgba(255,255,255,1);

}

.tab2 {

grid-column-start: col3-start;

grid-column-end: col3-end;

grid-row-start: row2-start;

grid-row-end: row2-end;


-ms-grid-column: 3;

-ms-grid-column-span: 1;

-ms-grid-row: 2;

-ms-grid-row-span: 1;

}

div.tab-style>p.tab2-label {

margin: 0;

   background: white;

   border-top: 10px solid black;

   border-radius: 5px;

padding: 8px;


box-shadow:

 0px 1px 1px rgba(000,000,000,0.5),

 inset 0px 0px 2px rgba(255,255,255,1);

}

.tab-gap1 {

grid-column-start: col2-start;

grid-column-end: col2-end;

grid-row-start: row2-start;

grid-row-end: row2-end;

/*border-bottom: 1px solid #333333;*/


-ms-grid-column: 2;

-ms-grid-column-span: 1;

-ms-grid-row: 2;

-ms-grid-row-span: 1;

}

.tab-gap2 {

grid-column-start: col4-start;

grid-column-end: col4-end;

grid-row-start: row2-start;

grid-row-end: row2-end;

/*border-bottom: 1px solid #333333;*/


-ms-grid-column: 4;

-ms-grid-column-span: 1;

-ms-grid-row: 2;

-ms-grid-row-span: 1;

}

.page-content-container {

grid-column-start: col1-start;

grid-column-end: col4-end;

grid-row-start: row3-start;

grid-row-end: row3-end;


-ms-grid-column: 1;

-ms-grid-column-span: 4;

-ms-grid-row: 3;

-ms-grid-row-span: 1;


display: grid;

grid-template-columns: [col1-start] 3fr [col1-end col2-start] 1fr [col2-end];

grid-template-rows: [row1-start] 300px [row1-end row2-start] auto [row2-end];


display: -ms-grid;

-ms-grid-columns: 3fr 1fr;

-ms-grid-rows: 300px auto;


border-top-right-radius: 7px;

/*border-bottom-right-radius: 7px;

   border-bottom-left-radius: 7px;*/

/*border-left: 1px solid #333333;

border-right: 1px solid #333333;

border-bottom: 1px solid #333333;*/


box-shadow: 0 0 5px #888;

background-color: #fcfccf;

}

.page-content-back {

grid-column-start: col1-start;

grid-column-end: col2-end;

grid-row-start: row1-start;

grid-row-end: row2-end;


-ms-grid-column: 1;

-ms-grid-column-span: 2;

-ms-grid-row: 1;

-ms-grid-row-span: 2;


padding: 20px;

margin: 15px;

background: #FFFFF9;

box-shadow:

 0px 1px 3px rgba(000,000,000,0.5),

 inset 0px 0px 2px rgba(255,255,255,1);

}

.page-content {

grid-column-start: col1-start;

grid-column-end: col1-end;

grid-row-start: row1-start;

grid-row-end: row2-end;


-ms-grid-column: 1;

-ms-grid-column-span: 1;

-ms-grid-row: 1;

-ms-grid-row-span: 2;


padding: 20px;

margin: 15px;

}

.page-content-style {

font-family: sans-serif;

/*font-weight: ;*/

font-size: 1.1em;

}

div .page-content-header-style {

font-family: sans-serif;

font-weight: bold;

font-size: 1.3em;

margin: 0;

border: 0;

}

.page-content-rule-style {

border-width: 2px;

border-color: black;

margin: 0;

margin-bottom: 10px;

}

.link-box {

grid-column-start: col2-start;

grid-column-end: col2-end;

grid-row-start: row1-start;

grid-row-end: row1-end;


-ms-grid-column: 2;

-ms-grid-column-span: 1;

-ms-grid-row: 1;

-ms-grid-row-span: 1;


/*border: 2px solid black;

border-radius: 5px;*/

margin: 25px;

box-shadow:

 0px 1px 3px rgba(000,000,000,0.5),

 inset 0px 0px 2px rgba(255,255,255,1);

 

transform: translateY(5px);

}

.link-box-style {

padding: 10px;

font-size: 1.2em;

font-family: sans-serif;

background-color: #ffff88;

}

.link-box>ul,

div.page-content-style>ul,

.checklist-style>ul,

td.table-content-style>ul{

list-style: none;

}

.link-box>ul>li:before,

div.page-content-style>ul>li:before,

.table-content-style>ul>li:before{

content: "\2022";    /* Add content: \2022 is the CSS Code/unicode for a bullet */

color: black;    /* Change the color */

font-weight: bold;   /* If you want it to be bold */

font-size: 1.2em;

display: inline-block;  /* Needed to add space between the bullet and the text */

width: 1em;    /* Also needed for space (tweak if needed) */

margin-left: -1em;   /* Also needed for space (tweak if needed) */

vertical-align: middle;

}

.page-content-style .checklist-style>ul>li:before{

content: "\25A1";    /* Add content: \25A1 is the CSS Code/unicode for a square */

color: black;    /* Change the color */

font-weight: bold;   /* If you want it to be bold */

font-size: 1.5em;

display: inline-block;  /* Needed to add space between the bullet and the text */

width: 1em;    /* Also needed for space (tweak if needed) */

margin-left: -1em;   /* Also needed for space (tweak if needed) */

}

.checklist-style>ul>li{

padding: 10px;

}

.title-container {

grid-column-start: col1-start;

grid-column-end: col4-end;

grid-row-start: row1-start;

grid-row-end: row1-end;


/*align-self: end;*/


-ms-grid-column: 1;

-ms-grid-column-span: 4;

-ms-grid-row: 1;

-ms-grid-row-span: 1;


/*-ms-grid-row-align: end;*/

}

.title-content {

text-align: center;

font-size: 3em;

text-transform: uppercase;

font-weight: bold;

/*text-shadow: 0.25vw 0.15vw grey;*/

font-family: sans-serif;

}

a.link-style {

font-weight: bold;

text-decoration: none;

color: royalblue;

}

a.link-style:visited {

color: royalblue;

}

a.link-style:hover {

color: darkblue;

text-shadow:

 0px 1px 3px rgba(000,000,000,0.5),

 inset 0px 0px 2px rgba(255,255,255,1);

}

#onboardHeader, #onboardHeaderFR {

   background-size: contain;

   background-repeat: no-repeat;

   background-position: center;


width: 100%;

   height: 400px;

}

#onboardHeader {

background-image: url("http://www.gcpedia.gc.ca/gcwiki/images/2/2d/HSIBOnboardingHeader.jpg");

}

#onboardHeaderFR {

background-image: url("http://www.gcpedia.gc.ca/gcwiki/images/0/0a/HSIBOnboardingHeaderFR.jpg");

}

</style>

<style> /* Style set to remove certain GCpedia elements from the page */

.firstHeading {

display: none;

}

#contentSub {

display: none;

}

#content {

background-color: aliceblue;

}

</style>

</head>

</html>

File:Employee Welcome Kit Placemat - Test for GCwiki.pdf

File:2. Policy on COVID-19 Vaccination.docx File:Employee Welcome Kit Placemat.pdf

Retrieved from "https://wiki.gccollab.ca/index.php?title=GCcollabNNHPDtest&oldid=62659"