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

Difference between revisions of "Policy on Government Security"

From wiki
Jump to navigation Jump to search
(Created page with "<!-- HELLO! If you're going to experiment with the code, please be sure to copy & paste it into your own page/sandbox and not directly on here. Designed and developed by Jac...")
(No difference)

Revision as of 10:00, 19 July 2018


Template:PGS-head <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>

<html>