Changes

Template:PGS-style (view source)

Revision as of 09:56, 19 July 2018

22,864 bytes added , 09:56, 19 July 2018

Created page with "<html> <style> →‎Adding a logo: .logo { height: 160px; width: 290px; background-size: 240px; display: block; backgroun..."

<html>
<style>

/* Adding a logo */

.logo {
height: 160px;
width: 290px;
background-size: 240px;
display: block;
background-image: url('http://www.gcpedia.gc.ca/gcwiki/images/8/8c/DSOCfD-LOGO.png');
background-repeat: no-repeat;
background-position: center;
padding-top: -10px;
margin-top: 0px;
}

.logo-fr {
height: 160px;
width: 290px;
background-size: 240px;
display: block;
background-image: url('http://www.gcpedia.gc.ca/wiki/File:CfD_logo_EN.jpeg');
background-repeat: no-repeat;
background-position: 50% 60%;
}

/* Navigation starts here */

.navbar {
margin-bottom: 0;
position: fixed;
width: 100%;
border-radius: 0;
border: 0;
padding-bottom: 0;
z-index: 1000;
height: 59px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 12px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

.navbar-default {
background-color: rgba(255, 255, 255, 1);
border-color: transparent;
padding: 0px 60px;
}

.navbar-default .navbar-nav>li>a {
color: rgba(24, 57, 102, 1);
font-weight: 400;
border-bottom: 6px solid transparent;
padding-top: 18px;
}

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

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #040063;
background-color: transparent;
border-bottom: 4px solid #040063;
}

.navbar-default .navbar-nav>li.active>a,
.navbar-default .navbar-nav>li.active>a {
color: #040063;
background-color: transparent;
border-bottom: 4px solid #040063;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #040063;
background-color: transparent;
border-bottom: 4px solid #040063;
}

.navbar-default .navbar-brand {
margin-top: -50px;
min-height: 58px;
}

.navbar-collapse.collapsing,
.navbar-collapse.collapse.in {
background-color: #fff;
}

.dropdown-menu {
padding: 0;
border: 1px solid #f8f8f8;
}

.dropdown-menu>li>a {
display: block;
padding: 15px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
border-bottom: 1px dotted #ccc;
}
/*ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}*/

/* Jumbotrons start here for different layouts. Images seem to have to be in JPG */

.j1 {
background-color: #e5e5e5;
color: #fff;
background-image: url('https://cdn.pixabay.com/photo/2018/05/14/16/25/cyber-security-3400657_960_720.jpg');
background-position: 50% 40%;
background-size: cover;
background-repeat: no-repeat;
min-height: 10vh;
text-align: left;
margin-bottom: 0;
}

.j1-bk {
background-color: rgba(0, 0, 0, 0.35);
padding: 120px 0px 100px 0px;
background-size: cover;
background-repeat: no-repeat;
min-height: 10vh;
}

.j1 h1 {
font-family: 'Lato', sans-serif;
font-size: 12vmin;
font-weight: 600;
line-height: .9em;
}

.j2 {
background-color: #e5e5e5;
color: #fff;
background-image: url('http://hdbackgroundspic.com/wp-content/uploads/2017/07/full-snowfall-on-mountain.jpg');
background-position: 50% 40%;
background-size: cover;
background-repeat: no-repeat;
min-height: 10vh;
text-align: center;
margin-bottom: 0;
}

.j2-bk {
background-color: rgba(0, 0, 0, 0.35);
padding: 120px 0px 100px 0px;
background-size: cover;
background-repeat: no-repeat;
min-height: 10vh;
}

.j2 h1 {
font-family: 'Lato', sans-serif;
font-size: 12vmin;
font-weight: 600;
line-height: .9em;
}

.j3 {
background-color: #e5e5e5;
color: #fff;
background-image: url('https://f.fwallpapers.com/images/snow-covered-mountains.jpg');
background-position: 50% 40%;
background-size: cover;
background-repeat: no-repeat;
min-height: 10vh;
text-align: center;
margin-bottom: 0;
}

.j3 h1 {
font-family: 'Lato', sans-serif;
font-size: 12vmin;
font-weight: 600;
line-height: .9em;
}

.j4 {
height: 200px;
color: #fff;
background-color: blue;
background-image:
radial-gradient(
pink,
#4D37AB
);
background-position: 50% 40%;
background-size: cover;
min-height: 10vh;
text-align: center;
margin-bottom: 0;
}

.j4 h1 {
font-family: 'Lato', sans-serif;
font-size: 12vmin;
font-weight: 600;
line-height: .9em;
}

/* Button styling */

.button1 {
background-color: rgba(24, 57, 102, 1);
color: black;
padding: 15px 15px;
border-radius: 1rem;
border: none;
transition: all 0.3s ease-in-out;
text-decoration: none;
font-size: 17px;
font-weight: 200px;
}

.button1:visited {
color: white;
}

.button1:hover {
background-color: #28dcf2;
border-color: #28dcf2 2px solid;
color: black;
text-decoration: none;
}

.center {
align: center;
}

.button2 {
background-color: rgba(24, 57, 102, 1);
font-size: 16px;
color: white;
float: left;
padding: 10px;
margin: 0px;
border-radius: 1rem;
border: none;
transition: all 0.3s ease-in-out;
text-decoration: none;
}

.button2:hover {
background-color: #28dcf2;
border-color: #28dcf2 2px solid;
color: black;
text-decoration: none;
}

.button2:visited {
color: white;
}

.clear {
float: none;
}

/* Need to figure out what mw-body is... */

.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
line-height: 1.6;
margin-top: .3em;
margin-bottom: 0;
padding-bottom: .3em;
padding-top: 0;
}

/* Tile styling */

a.tile-link:focus,
a.tile-link:hover {
text-decoration: none;
}

.tile {
color:white ;
padding: 0 0 25px;
margin-bottom: 30px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.tile img {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.tile:hover img {
-webkit-filter: brightness(.7);
filter: brightness(.7)
}

.tile .title {
padding: 10px 20px 0;
text-align: center;
height: 100px;
}

.tile:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.tile p,
.card-tradeshow p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px;
/* fallback */
max-height: 32px;
/* fallback */
-webkit-line-clamp: 2;
/* number of lines to show */
-webkit-box-orient: vertical;
}

.card-tradeshow h4 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 24px;
/* fallback */
max-height: 48px;
/* fallback */
-webkit-line-clamp: 1;
/* number of lines to show */
-webkit-box-orient: vertical;
}

/* TILE POPUP */

.modal {
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
}

.modal-backdrop {
display:none !important;
}

.modal-backdrop.in {
display:none !important;
}

.modal p {
font-family:Open Sans, Arial, Helvetica, sans-serif !important;
line-height: 21px;
color:black !important;
margin: 0 0 10px !important;
font-size:16px !important;
}

.modal-body li {

margin-left:20px;
line-height:22px;
font-size:16px;
font-family:Open Sans, Arial, Helvetica, sans-serif !important;
color:#3C3C3C !important;
}

.modal-body li:first-child{
margin-top:50px !important;
}

.modal-footer h5{
font-weight:bold;
font-size:18px;
}

.modal-footer p {
line-height:18px !important;
font-size:16px;
margin-bottom:0;
font-family:Open Sans, Arial, Helvetica, sans-serif !important;
color:#3C3C3C !important;
}

#mw-content-text p:first-child br{
display:none;
}

body {
z-index: 1 !important;
}

#catlinks{
display:none;
}

.catlinks{
display:none;
}

.noprint{
display:none;
}

/*---------------------------CSS ONLY POPUP, NOT IN USE----*/
#adv
{
position:fixed;
z-index: 500;
top:40%;
left:40%;
width:600px;
background-color:#EFF1F3;
color:black;
-khtml-opacity:0;
-moz-opacity : 0;
-ms-filter: "alpha(opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter : alpha(opacity=0);
opacity : 0;
padding:20px;
border-style:solid;
border-radius:15px;
border-color:#bbd8b3;
transition:all 1s;
-webkit-transition:all 1s;
}

#adv:target
{
-khtml-opacity:1;
-moz-opacity : 1;
-ms-filter: "alpha(opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter : alpha(opacity=100);
opacity : 1;
}

/* Close button */

#close
{
position:absolute;
left:100%;
top:-20px;
margin-left:-10px;
background-color:#EFF1F3;
font-size:12px;
padding:5px 7px;
border-radius:50px;
border-style:solid;
border-color:#bbd8b3;
font-weight:bold;
color:#bbd8b3;
text-decoration:none;
font-family:arial;
}

#close:hover
{
background-color:#EFF1F3;
border-color:#bbd8b3;
color:#D77A61;
}

#close:active
{
background-color:#A9F5F2;
color:black;
}

/*--------------------------END CSS POPUP----*/

/* to edit styles on GCPedia, go to: http://www.gcpedia.gc.ca/gcwiki/index.php?title=Template:Awesome-styles&action=edit */

/* home-tiles background colours */

.background-blue {
background-color: rgba(4,48,90, 1);
}

.background-blue:hover {
background-color: rgba(93,53,93, 1);
}

.background-red {
background-color: rgba (128,0,255);
}

/* Home-tiles, cards, tradeshow-tiles, and menu stuff */

.home-tiles {
margin-top: 20px;
padding: 12px 0px 60px 0px;
}

/* .tradeshow-tiles {

} ------------------*/

.tradeshow-tiles .intro {
font-size: 18px;
}

.tradeshow-tiles h2 {
color: #DB49AC;
font-weight: 600;
font-size: 5rem;
margin: 30px auto;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
-webkit-transition: 2s ease;
transition: 2s ease;
}

.card-tradeshow {
margin: 20px auto;
}

.card-tradeshow img {
-o-object-fit: cover;
object-fit: cover;
background-color: #eee;
height: 150px;
width: 100%;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

.card-tradeshow img:hover {
-webkit-transform: translateY(-7px);
transform: translateY(-7px);
}

/* Styling containers and Sections */

.container {
padding-top: 30px;
margin-top: -30px;
}

.sec1 {
background-color: rgba(250, 250, 250, 1);
padding-bottom: 30px;
}

.sec1 p {
margin: 20px 0px;
}

.ud {
border-bottom: 1px solid rgba(24, 57, 102, 1);
margin: 0px;
padding: 0px;
}

.ud1 {
border-top: 1px solid rgba(24, 57, 102, 1);
margin: 0 auto;
width: 300px;
margin-top: 0px;
padding-top: 0px;
}

.ud2 {
border-top: 1px solid rgba(24, 57, 102, 1);
margin: 0 auto;
width: 500px;
margin-top: 0px;
padding-top: 0px;
}

.ud3 {
border-top: 1px solid white;
margin: 0 auto;
width: 500px;
margin-top: 0px;
padding-top: 0px;
}

/*-----------
.spacecol {
padding: 0px 50px;
}
---------------*/

.carousel-caption {
background-color: rgba(255,255,255,0.5);
color: black;
font-size: 14px;
padding: 4px;
}

.carousel img {
max-width:100%;
max-height:350px;

}

.carousel-inner {
margin: auto;
max-width: 700px;
}

.carousel-control.right, .carousel-control.left {
color: rgba(24, 57, 102, 1);
}

.carousel {
margin-top: 10px;
}

.myCarousel1 .carousel-control.right, .myCarousel1 .carousel-control.left {
background: none !important;
filter: progid:none !important;
color: rgba(24, 57, 102, 1);
}

.carousel-indicators li {
border-color: rgba(24, 57, 102, 1);
}

.carousel-indicators li.active {
background-color: rgba(24, 57, 102, 0.8);
}

.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}

.item span {
font-style: normal;
}

.item img {
width: 700px;
height: 500px;
}

.sec1 p {
font-size: 16px;
}

.sec3 {
background-color: #e5e5e5;
color: #ffffff;
background-image: url('https://wallpapercave.com/wp/jsqj2Er.jpg');
position: static;
background-position: 60% 40%;
background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
min-height: 10vh;
text-align: left;
}

.sec3 p {
color: white;
}

.sec3-bk {
background-color: rgba(0, 0, 0, 0.65);
padding: 60px 0px;
background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
min-height: 10vh;
}

.sec4 {
padding: 12px 0px 60px 0px;
text-align: center;
}

.sec4 p {
font-size: 15px;
text-align: center;
}

#signup {
color: white;
background-color: #fff;
background-image: url('http://www.gcpedia.gc.ca/gcwiki/images/d/d9/Mountains-clouds-forest-fog.jpg');
background-position: 100% 40%;
background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

.sec4-bk {
background-color: rgba(0, 0, 0, 0.3);
background-size: cover;
-webkit-background-size: cover;
padding: 100px 0px;
background-repeat: no-repeat;
min-height: 10vh;
}

.sec5 {
padding: 12px 0px 60px 0px;
text-align: center;
background-color: rgba(240, 240, 240, 1);
border-top: 5px solid rgba(24, 57, 102, 1);
}

.sec5 p {
font-size: 15px;
text-align: left;
}

.div-right {
padding: 20px 0px 0px 0px;
}

/* Styling images */

.img {
width: 300px;
height: 200px;
draggable: false;
}

.bubble {
width: 200px;
height: 200px;
opacity: 1.5;
filter:alpha(opacity=50);
text-align: center;
float: right;
margin-top: 35px;
margin-right: 50px;
}

/* Styling elements on home page only */

#mgn {
margin-top: 40px;
}

/* Styling elements on specific pages */

.aboutpage p {
font-size: 16px;
}

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

/*styling table for services page - search */

* {
box-sizing: border-box;
}

#myInput {
background-image: url('https://www.w3schools.com/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#myTable {
border-collapse: collapse;
width: 100%;
padding: 0px 0px 0px 30px;
border: 1px solid #ddd;
font-size: 18px;
}

#myTable h4 {
font-size: 18px;
font-weight: 400;
}

#myTable th, #myTable td {
text-align: left;
padding: 12px;
}

#myTable tr {
border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
color: black;
}

/* Styling h2s */

.sec1 h2 {
color: rgba(24, 57, 102, 1);
font-weight: 550;
font-size: 5rem;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 0px;
padding-bottom: 0px;
}

.sec2 h2 {
color: rgba(24, 57, 102, 1);
font-weight: 550;
font-size: 5rem;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-bottom: 0px;
padding-bottom: 0px;
}

.sec4 h2 {
color: rgba(24, 57, 102, 1);
font-weight: 550;
text-align: center;
font-size: 5rem;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 0px;
padding-bottom: 0px;
}

.sec4 #signup h2 {
color: white;
}

.sec5 h2 {
color: rgba(24, 57, 102, 1);
font-weight: 550;
text-align: center;
font-size: 5rem;
margin: 30px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
}

.location-box {
display: inline-block;
padding: 3px 12px;
margin: 20px auto 0;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-image: none;
border-radius: 2px;
border: 2px solid #DB49AC;
}

/* Edit Footer */

.footer {
background-color: rgba(24, 57, 102, 1);
color: #fff;
}

.footer h2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-bottom: 30px;
margin-top: 10px;
}

.footer hr {
margin: 10px auto;
}

.footer p {
text-align:center;
}

.footer a {
color: #FFBBDA;
}

.footer .glyphicon {
font-size: 20px;
display:block;
text-align:center;
margin: 10px 0px 10px 0px;
color: #FFBBDA;
}

.footer .glyphicon:hover {
text-decoration: none;
position: relative;
top: -5px;
}

#footerlogo {
display: block;
margin: 0 auto;
height: 90px;
width: 230px;
}

/* Styling tables */

table {
color: #000000;
background-color: #F0EDED;
}

table tr:first-child {
background-color: #DB49AC;
color: #fff;
font-weight: 600;
}

table td:first-child, table h4 {
font-weight: 300;
max-width: 420px;
}

table tr h4 {
font-weight:200;
}

table tr h6 {
color: #3d41a5;
}

table tr h5 {
font-weight: 400;
color: #222;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px;
/* fallback */
/*max-height: 64px;*/
/* fallback */
-webkit-line-clamp: 4;
/* number of lines to show */
-webkit-box-orient: vertical;
}

.text-full {
overflow: visible;
max-height: none;
display: block;
}

table th, td {
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
}

table td {
border-bottom: 1px solid #ffffff;
}

/* TEAM IMAGES */

.cs-style-3 figure span{
font-size:11px;

}

.grid {
padding: 0px 20px 0px 20px;
margin: 0 auto;
list-style: none;
text-align: center;
}

.grid li {
display: inline-block;
width: 200px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}

.grid figure {
margin: 0;
position: relative;
}

.grid figure img {
max-width: 200px;
max-height: 200px;
display: block;
position: relative;
margin:0 auto;
}

.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 10px;
background: #67163F;
color: White;
line-height:16px;

}

.grid figcaption h3 {
margin: 0;
text-align: left;
padding: 0;
color: #fff;
font-size:12px;
text-transform: uppercase;

}

.grid figcaption a {
text-align: center;
padding: 2px 5px;
border-radius: 2.5px;
margin-left: 5px;
background: #737273;
color: White;
font-size:14px;

}

.cs-style-3 figure {
overflow: hidden;
}

.cs-style-3 figure img {

-webkit-transition: opacity 1s;
transition: opacity 0.5s;

}

.cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
opacity:0.5;

}

.cs-style-3 figcaption {
height: 90px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;

}

.cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;

}

.cs-style-3 figcaption a {
position: absolute;
bottom: 6px;
left: 5px;
}

</style>

</html>

Jacqueline.ng

3

edits