13
edits
Changes
Template:GCb-css-bootest-core (view source)
Revision as of 13:09, 15 April 2019
, 13:09, 15 April 2019Created 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>
<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>