Difference between revisions of "Template:OLS Canmore/CSS"

Revision as of 19:02, 16 October 2016 (view source) Sasavanc (Talk | contribs) ← Older edit		Latest revision as of 05:13, 19 October 2016 (view source) BlaiseHolloway (Talk | contribs)
(36 intermediate revisions by 2 users not shown)
Line 9:		Line 9:
	width: 980px;		width: 980px;
	margin: 0px auto;		margin: 0px auto;
		+
	}		}
		+	#ols_menubar {
		+	margin-top: -10px;
		+	}
		+
	/* Structure for the menu */		/* Structure for the menu */
	.ols_accordion {		.ols_accordion {
Line 46:		Line 51:
	float: left;		float: left;
	text-align: center;		text-align: center;
		+	padding-top: 10px;
	width: 130px;		width: 130px;
Line 52:		Line 58:
	.ols_menu_item a {		.ols_menu_item a {
	width: 100%;		width: 100%;
−	padding: 11px, 85px, 11px, 15px;	+	padding-top: 10px;
		+	padding-bottom: 15px;
	text-decoration: none;		text-decoration: none;
	max-width: 100px;		max-width: 100px;
Line 150:		Line 157:
	.full_size {		.full_size {
−	width: 70%;	+	width: 80%;
	}		}
Line 169:		Line 176:
	width: 670px;		width: 670px;
	height: auto;		height: auto;
−	float: center;
	padding-top: 100px;		padding-top: 100px;
	padding-bottom: 15px;		padding-bottom: 15px;
−	padding-left: 5px;	+	padding-left: 30px;
	}		}
Line 203:		Line 209:
	/* Styling for all hyperlinks in body text */		/* Styling for all hyperlinks in body text */
	a.ols_hyperlink {		a.ols_hyperlink {
−	color: #1995ad;	+	color: #005D7F;
	front-weight: bold;		front-weight: bold;
Line 225:		Line 231:
	#ols_collab_biotreks {		#ols_collab_biotreks {
	padding-top: 30px;		padding-top: 30px;
−	padding-bottom: 10px;	+	padding-bottom: 20px;
	}		}
Line 231:		Line 237:
	#ols_collab_abstractone {		#ols_collab_abstractone {
	padding-top: 30px;		padding-top: 30px;
−	padding-bottom: 10px;	+	padding-bottom: 20px;
	}		}
Line 237:		Line 243:
	#ols_collab_abstracttwo {		#ols_collab_abstracttwo {
	padding-top: 30px;		padding-top: 30px;
−	padding-bottom: 10px;	+	padding-bottom: 20px;
	}		}
Line 243:		Line 249:
	#ols_collab_uofl {		#ols_collab_uofl {
	padding-top: 30px;		padding-top: 30px;
−	padding-bottom: 10px;	+	padding-bottom: 20px;
	}		}
Line 249:		Line 255:
	#ols_collab_interviews {		#ols_collab_interviews {
	padding-top: 30px;		padding-top: 30px;
−	padding-bottom: 10px;	+	padding-bottom: 20px;
	}		}
Line 258:		Line 264:
	font-family: "Trebuchet MS", Helvetica, sans-serif;		font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-style: bold;		font-style: bold;
		+
		+	}
		+
		+	#ols_collab_mentorship {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+	}
		+
		+	#ols_collab_surveys {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+	}
	#ols_collab_taiwanletter {		#ols_collab_taiwanletter {
−	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);	+	float: right;
		+	vertical-align: middle;
	}		}
Line 282:		Line 303:
	padding-top: 100px;		padding-top: 100px;
	padding-bottom: 25px;		padding-bottom: 25px;
−
−	}
−
−	#ols_attributions_students {
−	padding-top: 10px;
−	padding-bottom: 30px;
	}		}
	#ols_attributions_tandm {		#ols_attributions_tandm {
−	padding-top: 10px;	+	padding-top: 30px;
−	padding-bottom: 30px;	+	padding-bottom: 20px;
	}		}
	#ols_attributions_constructdesign {		#ols_attributions_constructdesign {
−	padding-top: 10px;	+	padding-top: 30px;
−	padding-bottom: 30px;	+	padding-bottom: 20px;
	}		}
	#ols_attributions_financialsupport {		#ols_attributions_financialsupport {
−	padding-top: 10px;	+	padding-top: 30px;
−	padding-bottom: 30px;	+	padding-bottom: 20px;
	}		}
		+
	/* Description page headers */		/* Description page headers */
Line 350:		Line 366:
	}		}
−	/* Team page photos */	+	#supervisors_title {
−	#ols_team_photos {	+	float: center;
−	width: 600px;	+	width: 500px;
−	margin: auto;	+	display: block;
−	padding-top: 20px;	+
	}		}
Line 377:		Line 392:
	padding-bottom: 25px;		padding-bottom: 25px;
		+	}
		+
		+	#ols_integrated_practices_wastewater {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+
		+	}
		+
		+	#ols_integrated_practices_walker {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+	}
		+
		+	#ols_integrated_practices_chicken {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+	}
		+
		+	#ols_integrated_practices_conclusion {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
	}		}
Line 384:		Line 424:
	padding-bottom: 25px;		padding-bottom: 25px;
		+	}
		+
		+	#ols_design_research {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+	}
		+
		+	#ols_design_construct_creation {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+	}
		+
		+	#ols_design_integration {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
		+	}
		+
		+	#ols_design_benefits {
		+	padding-top: 30px;
		+	padding-bottom: 20px;
		+
	}		}

---

Latest revision as of 05:13, 19 October 2016

        #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;

       }

       #ols_menubar {
       margin-top: -10px;

       }
       
       /* 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;
       padding-top: 10px;

width: 130px;

}

.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 sub menus */ .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 drop down menus */ .ols_menu_item:hover .ols_submenu { background-color: rgba(241, 241, 241, 0.8); display: block; }

/* Styling for the sub menu 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: 80%; }

.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;

               padding-top: 100px;
               padding-bottom: 15px;
               padding-left: 30px;

}

       #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: #005D7F; 
               front-weight: bold;

       }
      

/********************************* 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: 20px;

       } 

       #ols_collab_abstractone { 
               padding-top: 30px;
               padding-bottom: 20px;

       }

        #ols_collab_abstracttwo { 
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_collab_uofl { 
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_collab_interviews { 
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #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: 20px;

       }

       #ols_collab_surveys { 
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_collab_taiwanletter {
               float: right;
               vertical-align: middle;

       }

       .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_tandm {
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_attributions_constructdesign {
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_attributions_financialsupport {
               padding-top: 30px;
               padding-bottom: 20px;

       }

       /* 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;
                               
       }

       #supervisors_title {
               float: center;
               width: 500px;
               display: block;

       }

       /* 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;
     
       }

       #ols_integrated_practices_wastewater { 
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_integrated_practices_walker { 
               padding-top: 30px;
               padding-bottom: 20px; 

       }

       #ols_integrated_practices_chicken { 
               padding-top: 30px;
               padding-bottom: 20px; 

       }

        #ols_integrated_practices_conclusion { 
               padding-top: 30px;
               padding-bottom: 20px; 

       }

       /* Design page headers */
       #ols_design {
               padding-top: 100px;
               padding-bottom: 25px;
          
       }

       #ols_design_research {
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_design_construct_creation {
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_design_integration {
               padding-top: 30px;
               padding-bottom: 20px;

       }

       #ols_design_benefits {
               padding-top: 30px;
               padding-bottom: 20px;

       }

       /* 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;} }