wiki - User contributions [en]

Bootstrap Test

2019-04-16T00:41:40Z

Alain.Laroche:

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap Test

2019-04-16T00:37:06Z

Alain.Laroche:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GCbootstrap - GCpedia, GCpedicure and Bootstrap</title>


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

</head>


<body lang="en">
<section class="super-body">


</html>

{{GCb-head-bootest-eng1}}
{{GCb-nav-bootest-eng1}}

<h1 class="display-1">Display 1</h1>

{{GCb-footer-bootest-eng1}}
{{GCb-css-bootest-core1}}
{{GCb-css-bootest-override1}}

Bootstrap Test

2019-04-16T00:34:35Z

Alain.Laroche:

<nowiki>

</nowiki>
{{GCb-head-bootest-eng}}
{{GCb-nav-bootest-eng1}}

<html>

<h1 class="display-1">Display 1</h1>

</html>
{{GCb-footer-bootest-eng1}}
{{GCb-css-bootest-core1}}
{{GCb-css-bootest-override1}}

Bootstrap Test

2019-04-15T18:19:44Z

Alain.Laroche:

<nowiki>

</nowiki>
{{GCb-head-bootest-eng}}
{{GCb-nav-bootest-eng}}

<html>

<h1 class="display-1">Display 1</h1>

</html>
{{GCb-footer-bootest-eng}}
{{GCb-css-bootest-core}}
{{GCb-css-bootest-override}}

Bootstrap Test

2019-04-15T18:18:19Z

Alain.Laroche:

<nowiki>
<head>

{{GCb-head-bootest-eng}}
{{GCb-nav-bootest-eng}}

</head>

<html>

<h1 class="display-1">Display 1</h1>

</html>

{{GCb-footer-bootest-eng}}
{{GCb-css-bootest-core}}
{{GCb-css-bootest-override}}
</nowiki>

Bootstrap Test

2019-04-15T18:16:21Z

Alain.Laroche:

<head>

{{GCb-head-bootest-eng}}
{{GCb-nav-bootest-eng}}

</head>

<html>

<h1 class="display-1">Display 1</h1>

</html>
{{GCb-footer-bootest-eng}}
{{GCb-css-bootest-core}}
{{GCb-css-bootest-override}}

Template:GCb-footer-bootest-eng

2019-04-15T18:15:49Z

Alain.Laroche: Created page with "<html> <section class="footer fixed-bottom"> <div class="container-fluid"> <span class="text-white">Contact Information: <a href="mailto:marco.battilana@dfo-mpo.gc.ca..."

<html>
<section class="footer fixed-bottom">
<div class="container-fluid">
<span class="text-white">Contact Information: <a href="mailto:marco.battilana@dfo-mpo.gc.ca" class="text-info"><i class="fa fa-envelope"></i> Your Contact</a></span>
</div>
<div id="icon-gcb">
<a href="http://www.gcpedia.gc.ca/wiki/GCbootstrap"><span class="rounded text-white badge" style="background: #563D7C;">Powered by <strong>GC</strong>bootstrap</span></a>
</div>
</section>


</section>

</body>

</html>

Bootstrap Test

2019-04-15T18:15:25Z

Alain.Laroche:

{{GCb-head-bootest-eng}}
{{GCb-nav-bootest-eng}}

<html>

<h1 class="display-1">Display 1</h1>

</html>
{{GCb-footer-bootest-eng}}
{{GCb-css-bootest-core}}
{{GCb-css-bootest-override}}

Template:GCb-css-bootest-override

2019-04-15T18:14:19Z

Alain.Laroche: Created page with "<html> <style> /* ===== override.css Purpose: To override the initial core.css styles. Dependancy: - core.css (runs first) -- override.css (runs second) Author: Marco Ba..."

<html>
<style>

/* =====
override.css
Purpose: To override the initial core.css styles.

Dependancy:
- core.css (runs first)
-- override.css (runs second)

Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada
Twitter: @crazybat

Revision History:
****
Version 1.0
(26 Oct 2018)
- Brought in existing GCpedia functionality for pages. Uses same links, just styled and displayed different.

Known Issues:
- Incorporate additional GCpedia functionality: Language flipper, log in, etc. (PARTIALLY SOLVED! Still need to bring over remaining GCpedia items)
-- Search GCpedia
-- Categories
-- Others???
****

References:
GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure
Bootstrap: getbootstrap.com
*/

/* ==== To override the initial override from core.css. DO NOT REMOVE ==== */

/* === GCpedia Head content (Personal, GCpedia Tools) === */
div#mw-head {
position: absolute;
top: -145px;
display: block;
height: 0;
}
div#mw-head #left-navigation,
div#mw-head #right-navigation .pull-left,
div#mw-head #right-navigation #p-cactions {
display: none;
}

div#mw-head #p-personal {
position: fixed;
/*bottom: -97px;*/
bottom: -109px;
/*right: 140px;*/
right: 82px;
display: block;
width: auto;
}

/* == NOTE: The Eng / Fr button only changed the language of GCpedia UI, NOT YOUR CONTENT. ==*/
div#mw-head #right-navigation #p-views {
position: fixed;
/*bottom: -30px;*/
bottom: -40px;
display: block;
right: 20px;
}
div#mw-head #right-navigation #p-views ul {
background: #eee;
border: solid hsla(0, 0%, 96%, 0.5);
transition: 0.2s;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
div#mw-head #p-personal ul {
transition: 0.2s;
}

div#mw-head #right-navigation #p-views ul::before {
color: white;
background: #222;
display: block;
float: right;
margin-bottom: 5px;
content: ' Views \A\A\A\A\A';
white-space: pre-wrap;
position: relative;
top: -30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 1px #777;
padding: 0 5px;
}
div#mw-head #p-personal ul::before {
color: white;
background: #222;
display: block;
float: right;
margin-bottom: 5px;
content: ' Personal Tools \A\A\A\A';
white-space: pre-wrap;
position: relative;
top: -30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 1px #777;
padding: 0 5px;
}

div#mw-head #right-navigation #p-views:hover {
bottom: 30px;
transition: 0.2s;
z-index: 10000;
}
div#mw-head #p-personal:hover {
/*bottom: -35px;*/
bottom: -43px;
transition: 0.2s;
}

div#mw-head #right-navigation #p-views ul li,
div#mw-head #p-personal ul li {
background-image: none;
background: #eee;
height: 30px;
text-align: center;
}

div#mw-head #right-navigation #p-views ul li#ca-ve-edit {
display: none;
}

div#mw-head #right-navigation #p-search #simpleSearch {
height: inherit;
position: fixed;
right: 16px;
top: 29px;
}
/*TO DO Have search show on very small devices, but results don't show very well on older template. Staying invisible for now.*/
@media (max-width: 767px) {
div#mw-head #right-navigation #p-search {
display: none;
}
}
@media screen {
div#mw-head #right-navigation #p-search #simpleSearch #searchInput {
font-size: inherit;
padding: 0 0 0 5px;
}
}
@media screen {
div#mw-head #right-navigation #p-search #simpleSearch input {
background-color: none;
}
}

@media screen {
div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton {
background-color: #ccc;
}
}

.icon#ca-unfavorite a, .icon#ca-favorite a {
padding-top: 2.3em;
}

@media screen {
div.vectorTabs {
background-image: none;
background-image: none !ie;
}
}
@media screen {
div.vectorTabs span {
display: inherit;
background-image: none;
background-image: none !ie;
}
}
@media screen {
div.vectorTabs ul {
height: auto;
}
}
@media screen {
div.vectorTabs ul li {
line-height: 0;
}
}
@media screen {
#p-personal {
top: auto;
background: #eee;
border: solid hsla(0, 0%, 96%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
@media screen {
#p-personal ul {
padding-left: 0;
}
}
@media screen {
#p-personal li {
font-size: 0.8em;
padding: 0 0.375em;
}
}

/*TO DO: Figure out a way to make GCpedia tools not sticky on the footer with small resolutions. For now, don't show as it's hard to edit a GCpedia page with such a small window.*/
@media (max-width: 767px) {
div#mw-head #right-navigation #p-views {
display: none;
}
}
@media (max-width: 767px) {
div#mw-head #p-personal {
display: none;
}
}

/* === GCpedia Left Navigation content === */
/* == Eng / Fr button (Used to flip the language of your CONTENT ==*/

div#mw-panel {
position: absolute;
left: -9999px;
display: block;
}

div#mw-panel #p-lang .interlanguage-link {
position: fixed;
top: -2px;
right: 17px;
display: block;
font-size: inherit;
}

@media (max-width: 767px) {
div#mw-panel #p-lang .interlanguage-link {
position: fixed;
/*top: -4px;*/
left: 0;
width: 95px;
height: 0px;
}
}
div#mw-panel #p-lang .interlanguage-link a {
color: #fff;
/*padding: 15px;*/
padding-left: 71px;
padding-right: 71px;
line-height: 2.1rem;
display: block;
/*background: #333;*/
/*border: solid 1px #aaa;*/
font-weight: bold;
}
@media (max-width: 767px) {
div#mw-panel #p-lang .interlanguage-link a {
line-height: 0;
padding-left: 10px;
padding-right: 10px;
display: inline;
}
}
div#mw-panel #p-lang .interlanguage-link a::after {
/*content:'';
display:block;
width:0px;
height:2px;
background:#00d6fe;
transition: 0.2s;*/
}
div#mw-panel #p-lang .interlanguage-link a:hover::after {
/*width:100%;*/
}

</style>
</html>

Template:GCb-css-bootest-core

2019-04-15T18:09:30Z

Alain.Laroche: Created page with "<html> <style> /* ===== core.css Purpose: To extend the wonderful GCpedicure (by Chris - Global Affairs Canada's Innolab) by being able to utilize default Bootstrap's common l..."

<html>
<style>
/* =====
core.css
Purpose: To extend the wonderful GCpedicure (by Chris - Global Affairs Canada's Innolab) by being able to utilize default Bootstrap's common look and feel and retain GCpedia's functionality.

Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada
GCconnex: gcconnex.gc.ca/profile/crazybat
Twitter: @crazybat

Revision History:
****
Version 1.0
(16 Oct 2018)
- Using existing methodology of GCpedicure and having the added benefit of showing most of the default stylings of Bootstrap. You can now use Bootstrap framework directly - including almost all scripts, styles, etc.

Known Issues:
- Need an easier way to add the Edit link (SOLVED! See override.css Version 1.0)
- Incorporate existing GCpedia functionality: Language flipper, log in, etc. (SOLVED! See override.css Version 1.0)

Version 1.1
(31 Oct 2018)
- Created override.css to bring back some of the default GCpedia functionality, language flipper, log in, etc.

Known Issues:
- <multilang> does weird things to GCpedia include files. See if we can flip language using this. Otherwise, keep the built-in flipper for now.
****

References:
GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure
Bootstrap: getbootstrap.com
*/
html {
position: relative;
min-height: 100%;
-ms-overflow-style: none;
}

html, body {
height: 100%;
}

body {
overflow-y: hidden;
background-color: #fff;
/*min-height: 75rem;*/
/*margin-top: 4.5rem;*/
/*margin-bottom: 4.5rem;*/
}

/* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */
.super-body {
position: fixed;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-x: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
background-color: #fff;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
/* moved from body as GCpedia renders it out */
/*min-height: 75rem;
margin-top: 4.5rem;
margin-bottom: 4.5rem;*/
}
/* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */

/* === GCbootstrap icon ===*/
#icon-gcb {
position: absolute;
display: block;
/*bottom: 30px;*/
bottom: 22px;
right: 23px;
z-index: 10005;
}

/* ==== To override GCpedia styles. DO NOT REMOVE ==== */
div#mw-head {
position: absolute;
top: 145px;
right: 0;
width: 100%;
display: none;
}
div#mw-panel {

position: absolute;
top: 160px;
padding-top: 1em;
width: 10em;
left: 0;
display: none;
}
#footer {
display: none;
}

/* ==== To override GCpedia styles. DO NOT REMOVE ==== */

/* === Globals: Building rows, column for proper spaces and shading, inheriting font sizes, visibility, etc. === */

/* == For debugging only! Puts boxes around all grid elements == */
/*[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}*/

/* == Content container that's NOT a header, nav, or footer == */
div[role*="main"]
{
margin-top: 5em;
margin-bottom: 4em;
}

@media screen {
ul {
list-style-image: inherit;
margin-left: 0;
}
}
@media screen {
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
margin-top: 0;
}
}
@media screen {
.mw-content-ltr nav ul, .mw-content-rtl .mw-content-ltr nav ul {
margin-left: 0;
}
}

@media screen {
.mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol {
margin: inherit;
padding: inherit;
}
}
@media screen {
.mw-content-ltr nav ol, .mw-content-rtl .mw-content-ltr nav ol {
margin: inherit;
padding: inherit;
}
}
div[class*="container"] ul[class*="list-group"],
div[class*="container"] ul[class*="nav"],
div[class*="container"] ul[class*="pagination"] {
margin-left: 0;
}

input[type=checkbox],
input[type=radio]
{
margin-left: 0;
position: inherit;
}

.collapse,
.collapse .show {
visibility: inherit;
}

.row {
margin-bottom: 1rem;
}

.btn-primary {
background-color: #007bff !important;
}
.fade {
opacity: inherit;
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
font-family: inherit;
margin-bottom: .25em;
padding-bottom: 5px;
padding-top: inherit;
border-bottom: solid 1px transparent;
}

.mw-body-content {
font-size: inherit;
}

@media screen {
.mw-body h1
{
font-size: 2.5rem;
line-height: 1.2;
margin-top: 0;
}
}
@media screen {
.mw-body h2
{
font-size: 2rem;
line-height: 1.2;
margin-top: 0;
}
}

@media screen {
.mw-body h3
{
font-size: 1.75rem;
font-weight: inherit;
line-height: 1.2;
margin-top: 0;
}
}

@media screen {
.mw-body h4
{
font-size: 1.5rem;
font-weight: inherit;
line-height: 1.2;
margin-top: 0;
}
}

@media screen {
.mw-body h5
{
font-size: 1.25rem;
line-height: 1.2;
margin-top: 0;
}
}

@media screen {
.mw-body h6
{
font-size: 1rem;
line-height: 1.2;
margin-top: 0;
}
}
.modal-backdrop {
z-index: -1;
}

/* == Main Navigation bar == */
.navbar {
border-radius: 0;
}

.navbar-default {
background-color: #fff;
border-color: #e7e7e7;
}

.navbar-default .navbar-brand {
color: #222;
}

.navbar-brand {
padding: 0;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}

.navbar-default .navbar-text {
color: #222;
}

.navbar-default .navbar-nav>li>a {
color: #222;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #111;
background-color: transparent;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #555;
background-color: #e7e7e7;
}

.navbar-default .navbar-nav>.disabled>a,
.navbar-default .navbar-nav>.disabled>a:hover,
.navbar-default .navbar-nav>.disabled>a:focus {
color: #ccc;
background-color: transparent;
}

.navbar-default .navbar-toggle {
border-color: #ddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #e7e7e7;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #555;
background-color: #e7e7e7;
}

@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #ccc;
background-color: transparent;
}
}

.navbar-default .navbar-link {
color: #777;
}

.navbar-default .navbar-link:hover {
color: #333;
}

.navbar-default .btn-link {
color: #777;
}

.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
color: #333;
}

.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
color: #ccc;
}

.navbar-default .navbar-nav>li>a:visited {
color: #222;
}

ul.dropdown-menu {
padding: 0;
}

.dropdown-menu>li>a {
display: block;
padding: 15px 20px;
clear: both;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
border-bottom: 1px solid #e8e8e8;
}

/*= Pretty nav effects =*/
.nav-item::after{
content:'';
display:block;
width:0px;
height:2px;
background:#a07dff;
transition: 0.2s;
}
.nav-item:hover::after {
width:100%;
}
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover{
color:#a07dff;
}
.nav-link {
padding:15px 5px;
transition:0.2s;
}
.dropdown-item.active,
.dropdown-item:active {
color:#212529;
}
.dropdown-item:focus, .dropdown-item:hover {
background:#a07dff;
}

/* == Cards, specific styles ==*/
.card {
border: solid 1px #c8ced3;
}
.card-accent-primary {
border-top-color: #20a8d8;
border-top-width: 5px;
}
.card-accent-secondary {
border-top-color: #c8ced3;
border-top-width: 5px;
}
.card-accent-success {
border-top-color: #4dbd74;
border-top-width: 5px;
}
.card-accent-danger {
border-top-color: #f86c6b;
border-top-width: 5px;
}
.card-accent-warning {
border-top-color: #ffc107;
border-top-width: 5px;
}
.card-accent-info {
border-top-color: #63c2de;
border-top-width: 5px;
}
.card-accent-dark {
border-top-color: #2f353a;
border-top-width: 5px;
}

/* == Main Footer == */
.footer a,
.footer a:link,
.footer a:visited
{
color: #a07dff !important;
}
.footer a:focus,
.footer a:hover,
.footer a:active
{
color: #e7e7e7 !important;
text-decoration: underline;
}
/* == Sticky bottom == */
.fixed-bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer */
line-height: 60px; /* Vertically center the text */
background-color: #333;
z-index: 10001;
}

@media (max-width: 767px) {
.fixed-bottom {
position: relative;
bottom: none;
width: 100%;
height: 60px; /* Set the fixed height of the footer */
line-height: 60px; /* Vertically center the text */
background-color: #333;
z-index: 10001;
}
}

/* === Content-specific styles ===*/
/* == Youtube Player styles == */

.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("http://www.gcpedia.gc.ca/gcwiki/images/e/ef/Play-button.png") no-repeat;
cursor: pointer;
}

/*== Gallery ==*/
.thumbnail {
position:relative;
overflow:hidden;
}

.caption {
position:absolute;
top:-100%;
right:0;
background: rgba(102, 75, 229, 0.75);
width:100%;
height:100%;
padding:2%;
text-align:center;
color:#fff !important;
z-index:2;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.thumbnail:hover .caption {
top:0%;
}

/*== Personas ==*/
.our-team-main
{
width:100%;
height:auto;
border-top:5px #323233 solid;
background:#fff;
overflow:hidden;
position:relative;
transition:0.5s;
margin-bottom:28px;
}
.our-team-main h3
{
font-size:20px;
font-weight:700;
}

.our-team-main p
{
margin-bottom:0;
}

.team-back
{
width:100%;
height:auto;
position:absolute;
top:0;
left:0;
padding-right: 90px;
text-align:left;
background:#fff;

}
.team-back img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
filter: gray;
}

.team-front
{
width:100%;
height:auto;
position:relative;
z-index:10;
background:#fff;
bottom:0px;
transition: all 0.5s ease;
text-align:left;
}

.our-team-main:hover .team-front
{
bottom:-300px;
transition: all 0.5s ease;
}

.our-team-main:hover
{
border-color:#777;
transition:0.5s;
}

/*== FAQs ==*/
#accordian ul {
margin-left: 35px;
}

#accordion .card {
border: medium none;
border-radius: 0;
box-shadow: none;
margin: 0 0 15px 0;
}
#accordion .card-header {
border-radius: 30px;
padding: 0;
background-color: none;
border-bottom: none;
border-top-color: #c8ced3;
border-top-width: 5px;
}
#accordion h5 {
background: #fff;
margin-bottom: 0;
padding: 5px 15px 5px 0;
}
#accordion .card-title a {
background: #28a745 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 5px;
color: #fff;
display: block;
padding: 12px 20px 12px 60px;
position: relative;
transition: all 0.3s ease 0s;
}
#accordion .card-title a.collapsed {
background: #fff none repeat scroll 0 0;
border: 1px solid #bbb;
border-top-color: #c8ced3;
border-top-width: 5px;
color: #333;
}
#accordion .card-title a::after {
background: #28a745 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 50%;
color: #fff;
content: '\02C5';
height: 55px;
left: -1px;
line-height: 55px;
position: absolute;
text-align: center;
top: -5px;
transition: all 0.3s ease 0s;
width: 55px;
}
#accordion .card-title a.collapsed::after {
background: #fff none repeat scroll 0 0;
border: 1px solid #bbb;
box-shadow: none;
color: #333;
content: '\003E';
}
#accordion .card-body {
background: transparent none repeat scroll 0 0;
border-top: medium none;
padding: 20px 0 10px 9px;
position: relative;
border: 1px solid #28a745;
margin-right: 15px;
}</style></html>

Template:GCb-nav-bootest-eng

2019-04-15T18:08:14Z

Alain.Laroche: Created page with "<html lang="en"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" lang="en">  <a class="navbar-brand..."

<html lang="en">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" lang="en">

<a class="navbar-brand" href="http://www.gcpedia.gc.ca/" style="padding-top:13px;">
<img src="http://www.gcpedia.gc.ca/gcwiki/images/1/1d/GcpediaNextGen.png" height="26" width="105" alt="GCpedia">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="http://www.gcpedia.gc.ca/wiki/NextGenHRPay">Digital User Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/search?q=%23NextGenHRPay&src=tyah"><img src="http://www.gcpedia.gc.ca/gcwiki/images/f/f7/Twitter.png" width="20" alt="Twitter logo"> #NextGenHRPay</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.gcpedia.gc.ca/wiki/NextGenHRPay#contactus">Contact Us</a>
</li>

</ul>
</div>
</nav>
</html>

Bootstrap Test

2019-04-15T18:07:18Z

Alain.Laroche: Created page with " {{GCb-head-bootest-eng}} {{GCb-nav-bootest-eng}} <html> <h1 class="display-1">Display 1</h1> </html> {{GCb-footer-bootest-eng}} {{GCb-css-bootest-core}} {{GCb-css-boote..."

{{GCb-head-bootest-eng}}
{{GCb-nav-bootest-eng}}
<html>

<h1 class="display-1">Display 1</h1>

</html>
{{GCb-footer-bootest-eng}}
{{GCb-css-bootest-core}}
{{GCb-css-bootest-override}}

Template:GCb-head-bootest-eng

2019-04-15T18:06:33Z

Alain.Laroche: Created page with "<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-..."