Template:OLS Canmore/CSS
#sideMenu, #top_title {display: none;}
#content { padding: 0px; width: 980px; margin: auto; }
body {background-color: #ffffff; } /* #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } */
/********************************* MENU ********************************/
#top_menu_inside {
width: 980px;
margin: 0px auto;
}
/* Wrapper for the menubar */
.menubar {
margin-top: -15px;
}
/* Structure for the menu */
.ols_accordion { list-style-type: none; position: fixed;
overflow: visible;
width: 980px;
background-color: #ffffff;
}
/* Each individual menu button */
.ols_menubtn {
list-style-type: none;
font-size: 14px; font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
}
.ols_menubtn a {
color: #0A0A0A;
}
/* When hovering on a menu button */
.ols_menubtn a:hover {
color: #e37222;
}
/* Styling for the menu items */ .ols_menu_item {
list-style-type: none;
float: left;
text-align: center;
width: 130px;
padding-top: 10px;
}
.ols_menu_item a { width: 100%;
padding-top: 10px;
Padding-bottom: 15px;
text-decoration: none; max-width: 100px;
}
/* Styling for the menu item's respective submenus */ .ols_submenu {
width: 100%;
max-width: 59px;
display: none; font-weight: bold; cursor: pointer; font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 15px;
position: absolute;
background-color: rgba(172, 179, 189, 0.8);
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.ols_submenu a {
list-style-type: none;
text-decoration: none;
display: block;
text-align: center;
}
.ols_menu_item a, .ols_menubtn {
list-style-type: none;
display: inline-block;
text-align: center;
text-decoration: none;
}
.ols_submenu a:hover { color: #e37222; }
/* Catalyst for dropdown menus */ .ols_menu_item:hover .ols_submenu { background-color: rgba(241, 241, 241, 0.8); display: block; }
/* Styling for the submenu buttons */ .ols_submenu li { width: 100%; margin-left: 10px; margin-bottom: 0px;
}
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
.collapsable_menu_control {
width:100%;
padding: 15px 0px;
display:none;
background-color:#000000;
text-align:center; font-weight:bold; color:#72c9b6; cursor:pointer; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;
}
/* When hovering on that button */ .collapsable_menu_control:hover { background-color: #72c9b6; color:#000000;
}
/********************************* CONTENT OF THE PAGE ********************************/
/* Wrapper for the content */ .ols_content_wrapper { width: 700px; margin: 0px auto; }
/* Layout */ .column { width: 50%; margin: auto; }
.full_size { width: 70%; }
.full_size img { padding: 10px 15px; width: 96.5%; }
.half_size { width: 50%; } .half_size img { padding: 10px 15px; width: 93%; }
#ols_logo { width: 670px; height: auto;
float: center;
padding-top: 100px;
padding-bottom: 15px;
padding-left: 5px;
}
#supervisors_title {
padding-top: 25px;
display: block;
max-width: 650px;
margin: auto;
}
/********************************* STYLING ********************************/
/* All page headers */
.ols_header {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-style: bold;
text-align: center;
}
/* Styling for all major bodies of text */
.ols_bodytext {
font-size: 15px;
}
/* Styling for all hyperlinks in body text */
a.ols_hyperlink {
color: #1995ad;
}
/********************************* PAGE HEADERS ********************************/
/* Home page headers */
#ols_home {
padding-bottom: 30px;
}
/* Collaborations page headers */
#ols_collab {
padding-top: 100px;
padding-bottom: 25px;
}
#ols_collab_biotreks {
padding-top: 30px;
padding-bottom: 10px;
}
#ols_collab_abstractone {
padding-top: 30px;
padding-bottom: 10px;
}
#ols_collab_abstracttwo {
padding-top: 30px;
padding-bottom: 10px;
}
#ols_collab_uofl {
padding-top: 30px;
padding-bottom: 10px;
}
#ols_collab_interviews {
padding-top: 30px;
padding-bottom: 10px;
}
#ols_collab_quote {
padding-top: 30px;
padding-bottom: 10px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-style: bold;
}
#ols_collab_mentorship {
padding-top: 30px;
padding-bottom: 10px;
}
#ols_collab_taiwan {
padding-top: 30px;
padding-bottom: 10px;
}
#ols_collab_surveys {
padding-top: 30px;
padding-bottom: 10px;
}
.ols_columntwo {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
/* Human practices page headers */
#ols_humanpractices {
padding-top: 100px;
padding-bottom: 25px;
}
/* Attributions page headers */
#ols_attributions {
padding-top: 100px;
padding-bottom: 25px;
}
#ols_attributions_students {
padding-top: 10px;
padding-bottom: 30px;
}
#ols_attributions_tandm {
padding-top: 10px;
padding-bottom: 30px;
}
#ols_attributions_constructdesign {
padding-top: 10px;
padding-bottom: 30px;
}
#ols_attributions_financialsupport {
padding-top: 10px;
padding-bottom: 30px;
}
/* Description page headers */
#ols_description {
padding-top: 100px;
padding-bottom: 25px;
}
/* Proof of concept page headers */
#ols_pofc {
padding-top: 100px;
padding-bottom: 25px;
}
/* Basic parts page headers */
#ols_basicparts {
padding-top: 100px;
padding-bottom: 25px;
}
/* Composite parts page headers */
#ols_compositeparts {
padding-top: 100px;
padding-bottom: 25px;
}
/* Safety page headers */
#ols_safety {
padding-top: 100px;
padding-bottom: 25px;
}
/* Team page headers */
#ols_team {
padding-top: 100px;
}
/* Team page photos */
#ols_team_photos {
width: 600px;
margin: auto;
padding-top: 20px;
}
/* Gold requirements headers */
#ols_gold {
padding-top: 100px;
padding-bottom: 25px;
}
/* Silver requirements headers */
#ols_silver {
padding-top: 100px;
padding-bottom: 25px;
}
/* Integrated Practices headers */
#ols_integrated_practices {
padding-top: 100px;
padding-bottom: 25px;
}
/* Design page headers */
#ols_design {
padding-top: 100px;
padding-bottom: 25px;
}
/* Experiments page headers */
#ols_experiments {
padding-top: 100px;
padding-bottom: 25px;
}
/* Demonstrate page headers */
#ols_demonstrate {
padding-top: 100px;
padding-bottom: 25px;
}
/* Demonstrate page pictures */
#ols_demonstrate_bioreactor {
width: 350px;
height: auto;
display: block;
float: right;
border-radius: 4px;
}
/* Results page headers */
#ols_results {
padding-top: 100px;
padding-bottom: 25px;
}
/* Notebook page headers */
#ols_notebook {
padding-top: 100px;
padding-bottom: 25px;
}
/* Parts page headers */
#ols_parts {
padding-top: 100px;
padding-bottom: 25px;
}
/* Part Collection page headers */
#ols_part_collection {
padding-top: 100px;
padding-bottom: 25px;
}
/* Community engagement page headers */
#ols_engagement {
padding-top: 100px;
padding-bottom: 25px;
}
/********************************* RESPONSIVE STYLING ********************************/
/* IF THE SCREEN IS LESS THAN 1000PX */
@media only screen and (max-width: 1000px) {
#content {width:100%; } .menu_wrapper {width:15%;} .content_wrapper {margin-left: 15%;} .menu_item {display:block;} .icon {display:none;} .highlight {padding:10px 0px;} }
/* IF THE SCREEN IS LESS THAN 680PX */
@media only screen and (max-width: 680px) { .collapsable_menu_control { display:block;} .menu_item {display:none;} .menu_wrapper { width:100%; height: 15%; position:relative;} .content_wrapper {width:100%; margin-left:0px;} .column.half_size {width:100%; } .column img { width: 100%; padding: 5px 0px;} .icon {display:block;} .highlight {padding:15px 5px;} }
