Template:Waterloo/CSS/style.css
/*---Properties-----------------------------------------------------------------------------------*/ html, body {
margin: 0 auto; padding: 0; width: 100%; height: 100%; background-color: #fff;
}
html {
position: relative; min-height: 100%;
}
h1, h2, h3, h4, h5, h6, p, a {
color: #565656; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border-bottom: none;
}
/*---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: 965px; margin: 0 auto; margin-top: 150px; /*-- matches fixed header height --*/ overflow: hidden; background-color: #fff; font-family: Helvetica, "Trebuchet MS", sans-serif;
}
/* Creates the container for the content */
- contentContainer {
padding: 0; width: 100%; float: left; background-color: #fff;
}
/*Change the styling of text for everything inside main container*/
- mainContainer p {
font-size: 13px; color: #000000;
}
/*Style of the links - links are different inside the menu */
- contentContainer a {
font-weight: bold; color: #23b593;
}
/* 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 */ .highlightBox {
width:500px; margin:auto; background-color: #E8E8E9; margin-bottom: 15px; margin-top: 15px; padding: 15px; padding-top: 5px;
}
/*---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); box-shadow: 0 0 10px 0 rgba(66,66,66,1);
}
header > .navbar-nav {
text-align: center;
}
footer {
bottom: 0; width: 100%; padding: 0; margin-top: 10px;
-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; box-shadow: inset 0 10px 15px -10px #424242; background: #2a2e33;
font-size: 0.75em; line-height: 2em; color: #fff;
box-sizing: border-box; text-align: center;
}
footer .footer-company-motto {
color: #8d9093; font-size: 24px; margin: 0;
}
footer .footer-company-name {
color: #8f9296; font-size: 14px; margin: 0;
} footer .footer-links {
list-style: none; color: #ffffff; padding: 35px 0 23px; margin: 0;
}
footer .footer-links a {
display:inline-block; text-decoration: none; color: inherit;
} /* If you don't want the footer to be responsive, remove these media queries */
@media (max-width: 600px) {
footer { padding: 35px; }
footer .footer-company-motto { font-size: 18px; }
footer .footer-company-name { font-size: 12px; }
footer .footer-links { font-size: 14px; padding: 25px 0 20px; }
footer .footer-links a { 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(232, 98, 86, 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; 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 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s;
} .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: #e86256; opacity: 1;
}
/*---Splash images--------------------------------------------------------------------------------*/ .cover {
position: relative; height: 30em; background: rgba(0, 0, 0, 0.5); width: 100%
}
.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 {
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');
}