Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!

Template:PGS-style

From wiki
Revision as of 08:56, 19 July 2018 by Jacqueline.ng (talk | contribs) (Created page with "<html> <style> →‎Adding a logo: .logo { height: 160px; width: 290px; background-size: 240px; display: block; backgroun...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

<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; }

  1. mw-content-text p:first-child br{

display:none; }

body { 

   z-index: 1 !important;

}

  1. catlinks{

display:none; }

.catlinks{ display:none; }

.noprint{ display:none; }

/*---------------------------CSS ONLY POPUP, NOT IN USE----*/

  1. 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;

}

  1. 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 */

  1. 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;

}

  1. close:hover

{ 

 background-color:#EFF1F3;
 border-color:#bbd8b3;
 color:#D77A61;

}

  1. 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;

}

  1. 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;

}

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

}

  1. myTable h4 {
   font-size: 18px;
   font-weight: 400;
  }
  1. myTable th, #myTable td {
 text-align: left;
 padding: 12px;

}

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

}

  1. 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>

Retrieved from "https://wiki.gccollab.ca/index.php?title=Template:PGS-style&oldid=4244"