Template:Waterloo/CSS/style.css

   /*---Properties-----------------------------------------------------------------------------------*/
   html, body {
     margin: 0 auto;
     padding: 0;
     padding-top: 44px;
     width: 100%;
     height: 100%;
     background-color: #fff;
   }

   html {
     position: relative;
     min-height: 100%;
   }

   a, a:link, a:visited {
       color: #23b593;
   }

   /*---Changes to Default Wiki----------------------------------------------------------------------*/
   #globalWrapper, #content, #bodyContent {
       margin: 0 auto;
       padding: 0;
       height: 100%;
       width: 100%;
       border: 0px;
       background-color: transparent;
   }

   #top_menu_under {
       margin: 0;
       padding: 0;
       height: 0;
       width: 100%;
       border: 0;
       background-color: transparent;
   }

   #top_menu_14 {
       margin: 0;
       padding: 0;
       width: 100%;
       border: 0;
       padding-bottom: 2px;
       background-color: #373B40;
   }

   div#top_menu_inside {
       margin: 0 auto;
   }

   /*---Div Properties-------------------------------------------------------------------------------*/
   /* Creates a container that will wrap all of the content inside your wiki pages. */
   #mainContainer {
     position: relative;
     width: 1000px;
     margin: 0 auto;
     margin-top: 50px;
     overflow: hidden;
     background-color: #fff;
   }

   /* Creates the container for the content */
   #contentContainer {
     padding: 0;
     width: 100%;
     max-width: 768px;
     margin: 0 auto;
     background-color: #fff;
   }

   /* Styling links on hover- links are different inside the menu */
   #contentContainer a:hover {
       color: #59bf92;
   }

   /*Change the styling of tables */
   #contentContainer table {
       border: 1px solid #565656;
       border-collapse: collapse;
       width: 90%;
       margin: auto;
       margin-bottom: 15px;
       margin-top: 15px;
       margin-right: 10px;
       margin-left: 10px;
   }

   /*Change the styling of table cells*/
   #contentContainer  td {
       padding: 10px;
       border: 1px solid #565656;
       border-collapse: collapse;
       vertical-align: text-top;
   }

   /*Change the styling of table headers */
   #contentContainer th {
       background-color: #E8E8E9;
       padding: 10px;
       border: 1px solid #565656;
       border-collapse: collapse;
       vertical-align: text-top;
   }

   /*Clear class for all the pages, adds spacing too*/
   .clear{
       clear:both;
       height: 10px;
   }

   /* highlight box for special messages, prevHighlightBox for template content that needs to be removed */
   .highlightBox, .prevHighlightBox {
       width: 500px;
       max-width: 85%;
       margin: auto;
       background-color: #E8E8E9;
       margin-bottom: 15px;
       margin-top: 15px;
       padding: 15px;
       padding-top: 5px;

       -webkit-box-shadow: 0 0 5px 0 rgba(66,66,66,1);
          -moz-box-shadow: 0 0 5px 0 rgba(66,66,66,1);
           -ms-box-shadow: 0 0 5px 0 rgba(66,66,66,1);
            -o-box-shadow: 0 0 5px 0 rgba(66,66,66,1);
               box-shadow: 0 0 5px 0 rgba(66,66,66,1);
   }
   .prevHighlightBox {
       background-color: #ef9a9a;
       width: 100%;
   }

   /*---Header & Footer------------------------------------------------------------------------------*/
   header {
     position: absolute;
     left: 0;
     right: 0;
     top: 16px; /*-- this matches the height of the top_menu_14 bar --*/
     -webkit-box-shadow: 0 0 10px 0 rgba(66,66,66,1);
        -moz-box-shadow: 0 0 10px 0 rgba(66,66,66,1);
         -ms-box-shadow: 0 0 10px 0 rgba(66,66,66,1);
          -o-box-shadow: 0 0 10px 0 rgba(66,66,66,1);
             box-shadow: 0 0 10px 0 rgba(66,66,66,1);
   }

   header > .navbar-nav {
     text-align: center;
   }

   /* Styling for upper nav */
   nav {
       margin-top: 16px !important;
       -webkit-transition: all 1s !important;
          -moz-transition: all 1s !important;
           -ms-transition: all 1s !important;
            -o-transition: all 1s !important;
               transition: all 1s !important;
   }

   nav a {
       font-size: 1.2em;
       padding-right: 1em;
   }
   nav img {
       -webkit-transition: all 1s !important;
          -moz-transition: all 1s !important;
           -ms-transition: all 1s !important;
            -o-transition: all 1s !important;
               transition: all 1s !important;
       height: 100%;
   }

   nav.main-nav {
       z-index: 2000;
   }
   nav.shrink a.navbar-brand {
       height: 60px !important;
   }
   nav.shrink {
       min-height: 40px;
   }
   nav.shrink li a {
     padding-top: 20px !important;
     padding-bottom: 20px !important;
     min-height: 100% !important;
   }
   nav.shrink li li a {
     padding-top: 0px !important;
     padding-bottom: 0px !important;
     min-height: 100% !important;
   }

   /* Styling for lower nav */
   nav.navbar-lower {
       margin-top: 76px !important;
       padding-left: 0px;
       padding-right: 0px;
       height: 1em;
       font-size: 0.8em;
       text-align: center;
       opacity: 0.9;
   }
   nav.navbar-lower li {
     float: none;
     display: inline-block;
   }
   nav.hide-lower {
     opacity: 0;
     display: none;
   }
   ul.inner-page-links {
     width: 100% !important;
     display: inline-block;
   }
   ul.inner-page-links a.scroll-link {
       padding: 2px 1em !important;
   }

   footer {
     bottom: 0;
     width: 100%;
     padding: 0;
     -webkit-box-shadow: inset 0 10px 15px -10px #424242;
        -moz-box-shadow: inset 0 10px 15px -10px #424242;
         -ms-box-shadow: inset 0 10px 15px -10px #424242;
          -o-box-shadow: inset 0 10px 15px -10px #424242;
             box-shadow: inset 0 10px 15px -10px #424242;
     background: #2a2e33;
     line-height: 2em;
     color: #fff;
     box-sizing: border-box;
     text-align: center;
   }

   footer .footer-company-motto {
     color:  #8d9093;
     font-size: 0.9em;
     margin: 0;
   }

   footer .footer-company-name {
     color:  #8d9093;
     font-size: 1.3em;
     margin: 0;
   }
   footer .footer-links {
     list-style: none;
     padding: 3em 0 2em;
     margin: 0;
   }

   footer p.footer-links a {
     display:inline-block;
     text-decoration: none;
     padding-right: 1.2em;
     color:  #ffffff;
     font-size: 0.8em;
   }

   /* If you don't want the footer to be responsive, remove these media queries */

   @media (max-width: 1000px) {
       footer .footer-company-motto .footer-company-name .footer-links {
           font-size: 1.2em;
       }
       footer .footer-links a {
           padding: 25px 0 20px;
           line-height: 1.8;
       }
   }

   /*---Scroll to Top button ---------------------------*/
   .cd-top {
       display: inline-block;
       height: 40px;
       width: 40px;
       position: fixed;
       bottom: 40px;
       right: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
       /* image replacement properties */
       overflow: hidden;
       text-indent: 100%;
       white-space: nowrap;
       background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%;
       visibility: hidden;
       opacity: 0;
       -webkit-transition: opacity .3s 0s, visibility 0s .3s;
          -moz-transition: opacity .3s 0s, visibility 0s .3s;
           -ms-transition: opacity .3s 0s, visibility 0s .3s;
            -o-transition: opacity .3s 0s, visibility 0s .3s;
               transition: opacity .3s 0s, visibility 0s .3s;
   }
   .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
       -webkit-transition: opacity .3s 0s, visibility 0s .3s;
          -moz-transition: opacity .3s 0s, visibility 0s .3s;
           -ms-transition: opacity .3s 0s, visibility 0s .3s;
            -o-transition: opacity .3s 0s, visibility 0s .3s;
               transition: opacity .3s 0s, visibility 0s .3s;
   }
   .cd-top.cd-is-visible {
       /* the button becomes visible */
       visibility: visible;
       opacity: 1;
   }
   .cd-top.cd-fade-out {
       /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
       opacity: .5;
   }
   .no-touch .cd-top:hover {
       background-color: rgb(35, 181, 147);
       opacity: 1;
   }

   /* tablet */
   @media only screen and (min-device-width: 768px) {
       .cd-top {
           height: 60px;
           width: 60px;
           background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%;
       }
   }
   /* phone */
   @media only screen and (max-device-width: 768px) {
       .cd-top {
           height: 100px;
           width: 100px;
           background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%;
       }
   }

   /*---Splash images & team page --------------------------------------------------------------------*/
   .cover {
       position: relative;
       height: 20em;
       background: rgba(0, 0, 0, 0.5);
       width: 100%
       color: #fff;
       margin: auto;
       text-align: center;
       line-height: 20em;
   }

   .cover::after {
       content : "";
       display: block;
       position: absolute;
       top: 0;
       left: 0;
       background-size: cover;
       width: 100%;
       height: 100%;
       z-index: -1;
       opacity: 0.8;
   }

   .cover#lab::after {
       background-image: url('/wiki/images/c/c9/Waterloo_lab_cover.JPG');
   }
   .cover#math::after {
       background-image: url('/wiki/images/e/e8/Waterloo_math_cover.jpg');
   }
   .cover#policy::after {
       background-image: url('/wiki/images/2/22/Waterloo_policy_cover.jpg');
   }
   .cover#advisors::after {
       background-image: url('/wiki/images/c/cc/Waterloo_advisors_cover.jpg');
   }
   .cover#leads::after {
       background-image: url('/wiki/images/1/1e/Waterloo_cover_leads.jpg');
   }

   a.cover-text, a.cover-text:hover, a.cover-text:visited, a.cover-text:active {
       color: #ccc;
       font-size: 2em;
       text-shadow: 0 0 10px #000;
       text-decoration: none;
   }
   .cover-desc {
       color: #999;
       margin-top: -9em;
       text-shadow: 0 0 10px #000;
       text-decoration: none;
   }
   .accordion-inner {
       margin-top: 10px;
       margin-left: auto;
       margin-right: auto;
       width: 800px;
       max-width: 95%;
   }
   .accordion-inner dl dt {
       min-width: 150px;
       width: 30%;
       display: inline-block;
       text-align: center;
       vertical-align: middle;
   }
   .accordion-inner dl dd {
       width: 60%;
       display: inline-block;
       vertical-align: middle;
   }
   .accordion-inner dl dt img {
       max-width: 100px;
       display: inline-block;
       border-radius: 50%;
       -webkit-box-shadow: 0 0 20px 0 rgba(66,66,66,1);
          -moz-box-shadow: 0 0 20px 0 rgba(66,66,66,1);
           -ms-box-shadow: 0 0 20px 0 rgba(66,66,66,1);
            -o-box-shadow: 0 0 20px 0 rgba(66,66,66,1);
               box-shadow: 0 0 20px 0 rgba(66,66,66,1);
   }

   /*---Sponsor images-------------------------------------------------------------------------------*/
   ul.sponsors {
       list-style: none;
       width: 100%;
       margin-left: auto;
       margin-right: auto;
   }
   ul.sponsors li a {
       margin-left: auto;
       margin-right: auto;
   }
   .glyphicon {
       font-size: medium;
   }

   /*---Attributions---------------------------------------------------------------------------------*/
   dl.attributions dt {
       font-weight: 100;
   }