Difference between revisions of "Template:Waterloo/CSS/style.css"
m |
m |
||
| Line 1: | Line 1: | ||
| − | /*---Properties-----------------------------------------------------------------------------------*/ | + | /*---Properties-----------------------------------------------------------------------------------*/ |
| − | html, body { | + | html, body { |
| − | + | margin: 0 auto; | |
| − | + | padding: 0; | |
| − | + | padding-top: 44px; | |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
| − | + | background-color: #fff; | |
| − | } | + | } |
| − | html { | + | html { |
| − | + | position: relative; | |
| − | + | min-height: 100%; | |
| − | } | + | } |
| − | a, a:link, a:visited { | + | a, a:link, a:visited { |
| − | + | color: #23b593; | |
| − | } | + | } |
| − | /*---Changes to Default Wiki----------------------------------------------------------------------*/ | + | /*---Changes to Default Wiki----------------------------------------------------------------------*/ |
| − | #globalWrapper, #content, #bodyContent { | + | #globalWrapper, #content, #bodyContent { |
| − | + | margin: 0 auto; | |
| − | + | padding: 0; | |
| − | + | height: 100%; | |
| − | + | width: 100%; | |
| − | + | border: 0px; | |
| − | + | background-color: transparent; | |
| − | } | + | } |
| − | #top_menu_under { | + | #top_menu_under { |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | height: 0; | |
| − | + | width: 100%; | |
| − | + | border: 0; | |
| − | + | background-color: transparent; | |
| − | } | + | } |
| − | #top_menu_14 { | + | #top_menu_14 { |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | width: 100%; | |
| − | + | border: 0; | |
| − | + | padding-bottom: 2px; | |
| − | + | background-color: #373B40; | |
| − | } | + | } |
| − | div#top_menu_inside { | + | div#top_menu_inside { |
| − | + | margin: 0 auto; | |
| − | } | + | } |
| − | /*---Div Properties-------------------------------------------------------------------------------*/ | + | /*---Div Properties-------------------------------------------------------------------------------*/ |
| − | /* Creates a container that will wrap all of the content inside your wiki pages. */ | + | /* Creates a container that will wrap all of the content inside your wiki pages. */ |
| − | #mainContainer { | + | #mainContainer { |
| − | + | position: relative; | |
| − | + | width: 1000px; | |
| − | + | margin: 0 auto; | |
| − | + | margin-top: 50px; | |
| − | + | overflow: hidden; | |
| − | + | background-color: #fff; | |
| − | } | + | } |
| − | /* Creates the container for the content */ | + | /* Creates the container for the content */ |
| − | #contentContainer { | + | #contentContainer { |
| − | + | padding: 0; | |
| − | + | width: 100%; | |
| − | + | max-width: 768px; | |
| − | + | margin: 0 auto; | |
| − | + | background-color: #fff; | |
| − | } | + | } |
| − | /* Styling links on hover- links are different inside the menu */ | + | /* Styling links on hover- links are different inside the menu */ |
| − | #contentContainer a:hover { | + | #contentContainer a:hover { |
| − | + | color: #59bf92; | |
| − | } | + | } |
| − | /*Change the styling of tables */ | + | /*Change the styling of tables */ |
| − | #contentContainer table { | + | #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*/ | + | /*Change the styling of table cells*/ |
| − | #contentContainer td { | + | #contentContainer td { |
| − | + | padding: 10px; | |
| − | + | border: 1px solid #565656; | |
| − | + | border-collapse: collapse; | |
| − | + | vertical-align: text-top; | |
| − | } | + | } |
| − | /*Change the styling of table headers */ | + | /*Change the styling of table headers */ |
| − | #contentContainer th { | + | #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 class for all the pages, adds spacing too*/ |
| − | .clear{ | + | .clear{ |
| − | + | clear:both; | |
| − | + | height: 10px; | |
| − | } | + | } |
| − | /* highlight box for special messages, prevHighlightBox for template content that needs to be removed */ | + | /* highlight box for special messages, prevHighlightBox for template content that needs to be removed */ |
| − | .highlightBox, .prevHighlightBox { | + | .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 { | + | .prevHighlightBox { |
| − | + | background-color: #ef9a9a; | |
| − | + | width: 100%; | |
| − | } | + | } |
| − | /*---Header & Footer------------------------------------------------------------------------------*/ | + | /*---Header & Footer------------------------------------------------------------------------------*/ |
| − | header { | + | 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 { | + | header > .navbar-nav { |
| − | + | text-align: center; | |
| − | } | + | } |
| − | /* Styling for upper nav */ | + | /* Styling for upper nav */ |
| − | 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 { | + | nav a { |
| − | + | font-size: 1.2em; | |
| − | + | padding-right: 1em; | |
| − | } | + | } |
| − | nav img { | + | 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 { | + | nav.main-nav { |
| − | + | z-index: 2000; | |
| − | } | + | } |
| − | nav.shrink a.navbar-brand { | + | nav.shrink a.navbar-brand { |
| − | + | height: 60px !important; | |
| − | } | + | } |
| − | nav.shrink { | + | nav.shrink { |
| − | + | min-height: 40px; | |
| − | } | + | } |
| − | nav.shrink li a { | + | nav.shrink li a { |
| − | + | padding-top: 20px !important; | |
| − | + | padding-bottom: 20px !important; | |
| − | + | min-height: 100% !important; | |
| − | } | + | } |
| − | nav.shrink li li a { | + | nav.shrink li li a { |
| − | + | padding-top: 0px !important; | |
| − | + | padding-bottom: 0px !important; | |
| − | + | min-height: 100% !important; | |
| − | } | + | } |
| − | /* Styling for lower nav */ | + | /* Styling for lower nav */ |
| − | nav.navbar-lower { | + | 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 { | + | nav.navbar-lower li { |
| − | + | float: none; | |
| − | + | display: inline-block; | |
| − | } | + | } |
| − | nav.hide-lower { | + | nav.hide-lower { |
| − | + | opacity: 0; | |
| − | + | display: none; | |
| − | } | + | } |
| − | ul.inner-page-links{ | + | ul.inner-page-links { |
| − | + | width: 100% !important; | |
| − | + | display: inline-block; | |
| − | } | + | } |
| + | ul.inner-page-links a.scroll-link { | ||
| + | padding: 2px 1em !important; | ||
| + | } | ||
| − | footer { | + | 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 { | + | footer .footer-company-motto { |
| − | + | color: #8d9093; | |
| − | + | font-size: 0.9em; | |
| − | + | margin: 0; | |
| − | } | + | } |
| − | footer .footer-company-name { | + | footer .footer-company-name { |
| − | + | color: #8d9093; | |
| − | + | font-size: 1.3em; | |
| − | + | margin: 0; | |
| − | } | + | } |
| − | footer .footer-links { | + | footer .footer-links { |
| − | + | list-style: none; | |
| − | + | padding: 3em 0 2em; | |
| − | + | margin: 0; | |
| − | } | + | } |
| − | footer p.footer-links a { | + | 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 */ | + | /* If you don't want the footer to be responsive, remove these media queries */ |
| − | @media (max-width: 1000px) { | + | @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 { | .cd-top { | ||
| − | height: | + | display: inline-block; |
| − | width: | + | 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%; | 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; | |
| − | .cd-top { | + | -ms-transition: opacity .3s 0s, visibility 0s .3s; |
| − | + | -o-transition: opacity .3s 0s, visibility 0s .3s; | |
| − | + | transition: opacity .3s 0s, visibility 0s .3s; | |
| − | background: | + | } |
| + | .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; | |
| − | width: | + | 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%; | ||
| + | } | ||
| + | } | ||
| − | .cover | + | /*---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 | + | .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 | + | .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 { | + | /*---Attributions---------------------------------------------------------------------------------*/ |
| − | + | dl.attributions dt { | |
| − | } | + | font-weight: 100; |
| + | } | ||
Revision as of 23:00, 26 August 2015
/*---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;
}