Difference between revisions of "Template:Lethbridge HS"

(Prototype team template page)
 
 
(20 intermediate revisions by the same user not shown)
Line 106: Line 106:
 
 
 
 
/**************************************************************** MENU ***************************************************************/
+
 
/* Wrapper for the menu */
+
.igem_2017_menu_wrapper {
+
width: 15%;
+
height:100vh;
+
position:fixed;
+
right:0%;
+
padding:0px;
+
float:right;
+
border-left: 1px solid #d3d3d3;
+
background-color:#dddddd;
+
text-align:left;
+
font-family:Tahoma, Geneva, sans-serif;
+
overflow-y: auto;
+
overflow-x: hidden;
+
}
+
  
 
/* this hides the scrollbar to keep view consistency */
 
/* this hides the scrollbar to keep view consistency */
Line 128: Line 113:
 
}
 
}
 
 
 
/* styling for links in the menu, removes the line under text */
 
.igem_2017_menu_wrapper a { 
 
text-decoration: none;
 
}
 
 
 
/* styling for the images in the menu */
 
.igem_2017_menu_wrapper img {
 
width: 100%;
 
}
 
 
/* styling for the menu buttons */
 
.igem_2017_menu_wrapper .menu_button {
 
width: 100%;
 
padding: 10px 0px 10px 15px;
 
float:left;
 
border-bottom: 1px solid #d3d3d3;
 
font-size: 12px;
 
font-weight: bold;
 
color: #5e5f5f;
 
cursor: pointer;
 
}
 
 
 
.igem_2017_menu_wrapper .menu_bottom_padding {
 
width: 100%;
 
height: 30px;
 
float:left;
 
}
 
 
.menu_button.direct_to_page {
 
padding-left: 36px;
 
}
 
 
 
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
 
width:10%;
 
float:left;
 
}
 
 
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 
content: "+"; 
 
}
 
 
 
.open::before {
 
content: "-" !important; 
 
}
 
 
 
 
 
/* styling for the menu buttons on hover */
 
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
 
background-color: #3399ff;
 
text-decoration: none;
 
color:#ffffff;
 
}
 
  
/* styling for the menu button when it is the current page */
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
.current_page {
+
background-color:#7fc1f7  !important;
+
color:#5e5f5f !important;
+
}
+
  
  
/* styling for the submenu buttons */
 
.igem_2017_menu_wrapper .submenu_button {
 
width: 100%;
 
padding: 10px 0px 10px 34px;
 
float:left;
 
background-color:#f2f2f2;
 
border-bottom: 1px solid #d3d3d3;
 
font-size: 12px;
 
color: #5e5f5f;
 
cursor: pointer;
 
}
 
  
/* wrapper for the submenu items, they are hidden by default*/
 
.igem_2017_menu_wrapper .submenu_wrapper {
 
display:none;
 
}
 
  
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
 
.igem_2017_menu_wrapper #display_menu_control {
 
display:none;
 
text-align:center;
 
}
 
 
 
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 
 
/* Wrapper for the content */
 
.igem_2017_content_wrapper {
 
width: 81%;
 
margin: 2%;
 
display:block;
 
float:left;
 
background-color:white;
 
font-family:Tahoma, Geneva, sans-serif;
 
}
 
 
  
 
/********************************* HTML STYLING  *********************************/
 
/********************************* HTML STYLING  *********************************/
 
/* styling for the titles h1 h2 */
 
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 
padding:5px 15px;
 
border-bottom: 0px;
 
color: #3399ff;
 
}
 
  
  
Line 251: Line 137:
 
.igem_2017_content_wrapper p {  
 
.igem_2017_content_wrapper p {  
 
padding: 0px 15px;  
 
padding: 0px 15px;  
font-size: 13px;
+
font-size: 16px;
 +
                font-family: Roboto,sans-serif;
 
}
 
}
  
Line 257: Line 144:
 
.igem_2017_content_wrapper a {  
 
.igem_2017_content_wrapper a {  
 
font-weight: bold;  
 
font-weight: bold;  
text-decoration: underline;
+
text-decoration: none;
 
text-decoration-color: #3399ff;
 
text-decoration-color: #3399ff;
 
color:  #3399ff;
 
color:  #3399ff;
Line 277: Line 164:
 
padding:0px 20px;
 
padding:0px 20px;
 
font-size: 13px;
 
font-size: 13px;
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:Roboto,Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
 +
                text-decoration: none;
 +
list-style-type: none;
 
}
 
}
  
Line 284: Line 173:
 
padding:0px;  
 
padding:0px;  
 
font-size: 13px;
 
font-size: 13px;
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:Roboto,Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
 +
list-style-type: none;
 
}
 
}
  
 
/* Table */
 
/* Table */
 
.igem_2017_content_wrapper table {  
 
.igem_2017_content_wrapper table {  
width: 97%;  
+
width: 100%;  
 
margin:15px 10px;  
 
margin:15px 10px;  
border: 1px solid #d3d3d3;  
+
border: 0px solid #d3d3d3;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
}
 
}
Line 297: Line 187:
 
/* table cells */
 
/* table cells */
 
.igem_2017_content_wrapper  td {  
 
.igem_2017_content_wrapper  td {  
padding: 10px;
+
padding: 20px;
 
vertical-align: text-top;  
 
vertical-align: text-top;  
border: 1px solid #d3d3d3;  
+
border: 0px solid #d3d3d3;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
}
 
}
Line 305: Line 195:
 
/* table headers */
 
/* table headers */
 
.igem_2017_content_wrapper th {  
 
.igem_2017_content_wrapper th {  
padding: 10px;  
+
padding: 30px;  
 
vertical-align: text-top;  
 
vertical-align: text-top;  
border: 1px solid #d3d3d3;  
+
border: 0px solid #d3d3d3;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
background-color:#f2f2f2;  
+
background-color:#00ffffff;  
 
}
 
}
  
  
 
/**********************************LAYOUT CLASSES **********************************/
 
/**********************************LAYOUT CLASSES **********************************/
 
/* general class for column divs */
 
.igem_2017_content_wrapper .column  {
 
padding: 10px 0px;
 
float:left;
 
}
 
 
/* class for a full width column */
 
.column .full_size {
 
width:100%;
 
}
 
 
/* styling for images in a full width column*/
 
.column.full_size img {
 
width:97%;
 
padding: 10px 15px;
 
}
 
 
/* class for a half width column */
 
.column.half_size {
 
width: 50%;
 
}
 
/* styling for images in a half width column*/
 
.column.half_size img {
 
width: 94.5%;
 
padding: 10px 15px;
 
}
 
 
  
  
Line 368: Line 230:
 
/* highlight class, adds a gray background */
 
/* highlight class, adds a gray background */
 
.igem_2017_content_wrapper .highlight.gray {
 
.igem_2017_content_wrapper .highlight.gray {
background-color: #f2f2f2;  
+
background-color: ;  
 
}
 
}
  
Line 466: Line 328:
  
  
<a href="https://2017.igem.org/Team:Lethbridge_HS">
 
<img src="http://placehold.it/350x150">
 
</a>
 
  
  
 
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
<div class="menu_button" id="display_menu_control">
 
<div class="menu_button" id="display_menu_control">
MENU 
+
 
</div>  
 
</div>  
  
<div id="menu_content">
 
 
 
 
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS">
 
<div class="menu_button direct_to_page">
 
HOME
 
</div>
 
</a>
 
 
 
 
<div class="menu_button">
 
<div class="expand_collapse_icon">  </div> TEAM
 
</div>
 
 
<div class="submenu_wrapper" id="team_submenu">
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Team">
 
<div class="submenu_button" id="Team_page">
 
Team
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Collaborations">
 
<div class="submenu_button"  id="Collaborations_page">
 
Collaborations
 
</div>
 
</a>
 
 
 
</div>
 
 
 
 
 
 
<div class="menu_button">
 
<div class="expand_collapse_icon">  </div> PROJECT
 
</div>
 
 
<!-- project submenu -->
 
<div class="submenu_wrapper">
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Description">
 
<div class="submenu_button"  id="Description_page">
 
Description
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Design">
 
<div class="submenu_button"  id="Design_page">
 
Design
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Experiments">
 
<div class="submenu_button"  id="Experiments_page">
 
Experiments
 
</div>
 
</a>
 
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Notebook">
 
<div class="submenu_button"  id="Notebook_page">
 
Notebook
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/InterLab">
 
<div class="submenu_button"  id="InterLab_page">
 
InterLab
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Contribution">
 
<div class="submenu_button"  id="Contribution_page">
 
Contribution
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Model">
 
<div class="submenu_button"  id="Model_page">
 
Model
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Results">
 
<div class="submenu_button"  id="Results_page">
 
Results
 
</div>
 
</a>
 
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Demonstrate">
 
<div class="submenu_button"  id="Demonstrate_page">
 
Demonstrate
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Improve">
 
<div class="submenu_button"  id="Improve_page">
 
Improve
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Attributions">
 
<div class="submenu_button"  id="Attributions_page">
 
Attributions
 
</div>
 
</a>
 
 
</div>
 
 
 
 
 
 
 
<div class="menu_button">
 
<div class="expand_collapse_icon">  </div> PARTS
 
</div>
 
 
<!-- parts submenu -->
 
<div class="submenu_wrapper">
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Parts">
 
<div class="submenu_button"  id="Parts_page">
 
Parts
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Basic_Part">
 
<div class="submenu_button"  id="Basic_Part_page">
 
Basic Parts
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Composite_Part">
 
<div class="submenu_button"  id="Composite_Part_page">
 
Composite Parts
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Part_Collection">
 
<div class="submenu_button"  id="Part_Collection_page">
 
Part Collection
 
</div>
 
</a>
 
</div>
 
 
 
 
 
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Safety">
 
<div class="menu_button direct_to_page">
 
SAFETY
 
</div>
 
</a>
 
 
 
 
 
 
 
 
<div class="menu_button" >
 
<div class="expand_collapse_icon">  </div> HUMAN PRACTICES
 
</div>
 
 
<!-- human practices submenu -->
 
<div class="submenu_wrapper">
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/HP/Silver">
 
<div class="submenu_button"  id="Silver_page">
 
Silver HP
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/HP/Gold_Integrated">
 
<div class="submenu_button" id="Gold_Integrated_page">
 
Integrated and Gold
 
</div>
 
</a>
 
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Engagement">
 
<div class="submenu_button"  id="Engagement_page">
 
Public Engagement
 
</div>
 
</a>
 
 
</div>
 
 
 
<div class="menu_button">
 
<div class="expand_collapse_icon">  </div> AWARDS
 
</div>
 
 
<!-- awards submenu -->
 
<div class="submenu_wrapper">
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Applied_Design">
 
<div class="submenu_button"  id="Applied_Design_page">
 
Applied Design
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Entrepreneurship">
 
<div class="submenu_button"  id="Entrepreneurship_page">
 
Entrepreneurship
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Hardware">
 
<div class="submenu_button"  id="Hardware_page">
 
Hardware
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Measurement">
 
<div class="submenu_button"  id="Measurement_page">
 
Measurement
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Model">
 
<div class="submenu_button"  id="Model_page">
 
Model
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Plant">
 
<div class="submenu_button"  id="Plant_page">
 
Plant
 
</div>
 
</a>
 
 
 
<a href="https://2017.igem.org/Team:Lethbridge_HS/Software">
 
<div class="submenu_button"  id="Software_page">
 
Software
 
</div>
 
</a>
 
 
</div>
 
 
<a href="https://igem.org/2017_Judging_Form?team=Lethbridge_HS">
 
<div class="menu_button direct_to_page">
 
JUDGING FORM
 
</div>
 
</a>
 
 
 
 
<div class="menu_bottom_padding" >
 
</div>
 
 
</div>
 
 
 
 
  
 
</div>
 
</div>
Line 748: Line 343:
 
<!-- start of content -->
 
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">
<h1>Lethbridge_HS</h1>
 

Latest revision as of 04:39, 25 August 2017