Gracetexana (Talk | contribs) |
|||
(285 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
<style> | <style> | ||
Line 6: | Line 5: | ||
#sideMenu, #top_title {display:none;} | #sideMenu, #top_title {display:none;} | ||
− | #content { padding:0px; width: | + | #content { padding:0px; width:100%; margin-top: 0px; margin-left:0px;} |
body {background-color:white; } | body {background-color:white; } | ||
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; margin-top: 0px} |
/********************************* MENU ********************************/ | /********************************* MENU ********************************/ | ||
− | + | ||
+ | /*********************new menu formatting*******************/ | ||
+ | |||
+ | .menu-wrap { | ||
+ | width:100%; | ||
+ | background:#FFF; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .menu { | ||
+ | margin-top:-6px; | ||
+ | padding:0; | ||
+ | position: fixed; | ||
+ | z-index:1; | ||
+ | left: 0px; | ||
+ | width:100%; | ||
+ | background:#FFF; | ||
+ | } | ||
+ | |||
+ | .menu li { | ||
+ | margin:0px; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | .menu a { | ||
+ | transition:all linear 0.15s; | ||
+ | padding:10px; | ||
+ | color:#BDBDBD; | ||
+ | } | ||
+ | |||
+ | .menu li:hover > a, .menu .current-item > a { | ||
+ | text-decoration:none; | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | .menu .arrow { | ||
+ | font-size:11px; | ||
+ | line-height:0%; | ||
+ | } | ||
+ | |||
+ | /*----- Top Level -----*/ | ||
+ | menu > ul { | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | |||
+ | .menu > ul > li { | ||
+ | margin-top:-5px; | ||
+ | float:left; | ||
+ | display:inline-block; | ||
+ | position:relative; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | |||
+ | .menu > ul > li > a { | ||
+ | display: inline-block; | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | .menu > ul > li:hover > a, .menu > ul > .current-item > a { | ||
+ | background:#DF7F3E; | ||
+ | } | ||
+ | |||
+ | /*----- Bottom Level -----*/ | ||
+ | .menu li:hover ul { | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .sub-menu { | ||
+ | width:200%; | ||
+ | padding:0px 0px; | ||
+ | position:absolute; | ||
+ | top:90%; | ||
+ | left:0px; | ||
+ | transition:opacity linear 0.15s; | ||
+ | box-shadow:0px 2px 3px rgba(0,0,0,0.2); | ||
+ | background:#2e2728; | ||
+ | display:none; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .sub-menu li { | ||
+ | display:block; | ||
+ | font-size:13px; | ||
+ | } | ||
+ | |||
+ | .sub-menu li a { | ||
+ | padding:10px 10px; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .sub-menu li a:hover, .sub-menu .current-item a { | ||
+ | text-color:#000000; | ||
+ | background:#DF7F3E; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* Wrapper for the menu */ | ||
.menu_wrapper { | .menu_wrapper { | ||
− | width: | + | width:100%; |
− | height: | + | margin-top:-10px; |
+ | margin-left:-20px; | ||
+ | height:0px; | ||
position:fixed; | position:fixed; | ||
padding:0px; | padding:0px; | ||
− | + | display:inline; | |
− | + | list-style: none; | |
− | + | box-shadow:0px 1px 3px rgba(0,0,0,0.2); | |
} | } | ||
+ | |||
/* styling for the menu items */ | /* styling for the menu items */ | ||
.menu_item { | .menu_item { | ||
− | width: | + | background-color:#f2f2f2; |
− | margin: | + | width:11%; |
− | + | float:left; | |
+ | margin:0px 0px 0px 0px; | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
border-bottom: 1px solid #d3d3d3; | border-bottom: 1px solid #d3d3d3; | ||
font-weight:bold; | font-weight:bold; | ||
+ | text-align: center; | ||
color:#000000; | color:#000000; | ||
cursor: pointer; | cursor: pointer; | ||
+ | list-style: none; | ||
} | } | ||
Line 41: | Line 147: | ||
/* decoration icon for the menu buttons*/ | /* decoration icon for the menu buttons*/ | ||
.icon { | .icon { | ||
− | float: | + | float:left; |
− | font-size: | + | font-size:12px; |
font-weight:bold; | font-weight:bold; | ||
} | } | ||
Line 67: | Line 173: | ||
/* styling for the li that are the menu items */ | /* styling for the li that are the menu items */ | ||
.menu_items li { | .menu_items li { | ||
− | width: | + | width:100%; |
− | margin-top: | + | margin-top: 0px; |
− | padding: | + | padding: 0px 0px 0px 0px ; |
display:block; | display:block; | ||
− | border-bottom: 1px solid #d3d3d3 | + | border-bottom: 1px solid #d3d3d3 |
− | + | ||
font-weight:bold; | font-weight:bold; | ||
text-decoration:none; | text-decoration:none; | ||
color:#000000; | color:#000000; | ||
+ | text-align:left; | ||
list-style-type:none; | list-style-type:none; | ||
cursor:pointer; | cursor:pointer; | ||
Line 119: | Line 225: | ||
margin-left: 10px; | margin-left: 10px; | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
+ | list-style-type: none; | ||
} | } | ||
Line 132: | Line 239: | ||
color:#000000; | color:#000000; | ||
} | } | ||
− | |||
− | |||
.submenu li a:hover { | .submenu li a:hover { | ||
Line 169: | Line 274: | ||
.content_wrapper { | .content_wrapper { | ||
width: 100%; | width: 100%; | ||
− | margin-left: | + | margin-left: 0px; |
− | padding: | + | margin-right: 0px; |
+ | margin-top: 25px; | ||
+ | padding: 0px 0px; | ||
float: left; | float: left; | ||
− | |||
} | } | ||
/*LAYOUT */ | /*LAYOUT */ | ||
.column { | .column { | ||
− | + | width: 100%; | |
− | + | margin-left: auto ; | |
− | background | + | margin-right: auto ; |
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | .full_size{ | ||
+ | width:80%; | ||
+ | } | ||
+ | |||
+ | .full_size_outer{ | ||
+ | width:80%; | ||
+ | background: rgba(255, 255, 255, .70); | ||
} | } | ||
− | + | /* only use inside .full_size_outer */ | |
+ | .full_size_inner{ | ||
width:100%; | width:100%; | ||
} | } | ||
Line 188: | Line 305: | ||
.full_size img { | .full_size img { | ||
padding: 10px 0px; | padding: 10px 0px; | ||
− | + | width: 100%; | |
} | } | ||
+ | |||
+ | .seventh_size { | ||
+ | width: 14.28%; | ||
+ | text-align: center; | ||
+ | float:left; | ||
+ | } | ||
+ | .sixth_size{ | ||
+ | width: 16.66%; | ||
+ | text-align: center; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .fifth_size { | ||
+ | width: 20%; | ||
+ | text-align:center; | ||
+ | float:left; | ||
+ | } | ||
.half_size { | .half_size { | ||
width: 50%; | width: 50%; | ||
+ | float:left; | ||
} | } | ||
.half_size img { | .half_size img { | ||
− | padding: | + | padding: 0px 15px; |
width: 93%; | width: 93%; | ||
} | } | ||
Line 207: | Line 342: | ||
width: 100%; | width: 100%; | ||
margin: auto; | margin: auto; | ||
− | padding: | + | padding: 0px 5px; |
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
} | } | ||
Line 219: | Line 354: | ||
} | } | ||
+ | |||
/*STYLING */ | /*STYLING */ | ||
/* styling for the titles */ | /* styling for the titles */ | ||
− | .content_wrapper h1, .content_wrapper h2 { | + | .content_wrapper h1 { |
− | padding: | + | padding: 0px 15px; |
+ | border-bottom:0px; | ||
+ | color:#FFFFFF; | ||
+ | font-family: 'Calisto MT', serif; | ||
+ | |||
+ | } | ||
+ | .content_wrapper h2 { | ||
+ | padding: 15px 15px; | ||
border-bottom:0px; | border-bottom:0px; | ||
color:#CF5300; | color:#CF5300; | ||
+ | font-family: 'Calisto MT', serif; | ||
+ | font-size: 40px; | ||
} | } | ||
− | .content_wrapper h3 | + | .content_wrapper h3 { |
− | padding: | + | padding: 7px 15px; |
border-bottom:0px; | border-bottom:0px; | ||
− | color: # | + | color: #CF5300; |
+ | font-family: 'Calisto MT', serif; | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 { | ||
+ | padding: 1px 15px; | ||
+ | border-bottom:0px; | ||
+ | color: #CF5300; | ||
+ | font-family: 'Calisto MT', serif; | ||
+ | font-size: 20px; | ||
} | } | ||
Line 238: | Line 392: | ||
/* font and text */ | /* font and text */ | ||
.content_wrapper p { | .content_wrapper p { | ||
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
− | font-family: | + | font-family:'Calisto MT', serif; |
} | } | ||
/* Links */ | /* Links */ | ||
.content_wrapper a { | .content_wrapper a { | ||
− | font-weight: bold; | + | font-weight: bold; |
+ | font-family:'Calisto MT', serif; | ||
text-decoration: underline; | text-decoration: underline; | ||
text-decoration-color:#CF5300; | text-decoration-color:#CF5300; | ||
Line 259: | Line 414: | ||
.content_wrapper a:hover { | .content_wrapper a:hover { | ||
text-decoration:none; | text-decoration:none; | ||
− | + | color:#000000; | |
} | } | ||
/* non numbered lists */ | /* non numbered lists */ | ||
.content_wrapper ul { | .content_wrapper ul { | ||
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
− | font-family: | + | font-family:'Calisto MT', serif; |
} | } | ||
/* numbered lists */ | /* numbered lists */ | ||
.content_wrapper ol { | .content_wrapper ol { | ||
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
− | font-family: | + | font-family:'Calisto MT', serif; |
} | } | ||
/* Table */ | /* Table */ | ||
.content_wrapper table { | .content_wrapper table { | ||
− | width: | + | width: 100%; |
− | margin: | + | margin: 0px 0px; |
border: 1px solid #d3d3d3; | border: 1px solid #d3d3d3; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
Line 286: | Line 441: | ||
/* table cells */ | /* table cells */ | ||
.content_wrapper td { | .content_wrapper td { | ||
− | padding: | + | padding: 0px; |
vertical-align: text-top; | vertical-align: text-top; | ||
border: 1px solid #d3d3d3; | border: 1px solid #d3d3d3; | ||
Line 294: | Line 449: | ||
/* table headers */ | /* table headers */ | ||
.content_wrapper th { | .content_wrapper th { | ||
− | padding: | + | padding: 0px; |
vertical-align: text-top; | vertical-align: text-top; | ||
border: 1px solid #d3d3d3; | border: 1px solid #d3d3d3; | ||
Line 306: | Line 461: | ||
padding: 15px; width:12%; | padding: 15px; width:12%; | ||
text-align:center; | text-align:center; | ||
− | font-weight:bold; | + | font-weight:bold; |
+ | font-family:'Calisto MT', serif; | ||
background-color: #CF5300; | background-color: #CF5300; | ||
cursor:pointer; | cursor:pointer; | ||
Line 321: | Line 477: | ||
color:#CF5300; | color:#CF5300; | ||
} | } | ||
+ | |||
/********************************* RESPONSIVE STYLING ********************************/ | /********************************* RESPONSIVE STYLING ********************************/ | ||
Line 360: | Line 517: | ||
<!-- This tells the browser that your page is responsive --> | <!-- This tells the browser that your page is responsive --> | ||
− | < | + | <div class="menu_wrap" > |
− | + | <nav class="menu"> | |
− | < | + | <ul class="clearfix"> |
+ | <li> <a href="https://2016.igem.org/Team:Austin_UTexas">HOME </a> </li> | ||
− | + | <li> <a href="">TEAM <span class="arrow">▼</span></a> | |
− | + | <ul class="sub-menu"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <li | + | |
− | + | ||
− | + | ||
− | + | ||
− | <ul class=" | + | |
<li> <a href=" https://2016.igem.org/Team:Austin_UTexas/Team"> Team </a> </li> | <li> <a href=" https://2016.igem.org/Team:Austin_UTexas/Team"> Team </a> </li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Collaborations">★ Collaborations </a> </li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Collaborations">★ Collaborations </a> </li> | ||
Line 386: | Line 531: | ||
</li> | </li> | ||
− | <li | + | <li> |
− | <ul class=" | + | <a href="">PROJECT <span class="arrow">▼</span></a> |
+ | <ul class="sub-menu"> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Description"> ★ Description </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Description"> ★ Description </a></li> | ||
− | |||
− | |||
− | |||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Demonstrate"> ★ Demonstrate </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Demonstrate"> ★ Demonstrate </a></li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Results"> Results </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Results"> Results </a></li> | ||
− | |||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Protocols"> Protocols </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Protocols"> Protocols </a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
− | + | <li > <a href="https://2016.igem.org/Team:Austin_UTexas/Parts">PARTS </a></li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <li | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Safety"> SAFETY </a> </li> |
− | <li | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Attributions">★ ATTRIBUTIONS </a></li> |
− | <li | + | <li> <a href=""> HUMAN PRACTICES<span class="arrow">▼</span></a> |
− | <ul class=" | + | <ul class="sub-menu"> |
− | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Human_Practices"> Human Practices </a></li> | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Human_Practices"> Human Practices </a></li> |
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Silver">★ Silver </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Silver">★ Silver </a></li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Gold">★ Gold </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Gold">★ Gold </a></li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Integrated_Practices"> ★ Integrated Practices </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Integrated_Practices"> ★ Integrated Practices </a></li> | ||
− | |||
</ul> | </ul> | ||
</li> | </li> | ||
− | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Interlab Study">INTERLAB STUDY </a> </li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</ul> | </ul> | ||
− | + | </nav> | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="content_wrapper"> | <div class="content_wrapper"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Line 479: | Line 580: | ||
} | } | ||
− | else if ( ( (wgPageName.match(/\//g) || []).length ) == 0 ) { // if it is the home page , just print the team's name | + | else if ( ( (wgPageName.match(/\//g) || []).length ) == 0 ) { // if it is the home page , just print the team's name |
− | + | ||
} | } | ||
Line 530: | Line 630: | ||
</script> | </script> | ||
− | |||
− | |||
</html> | </html> |
Latest revision as of 21:46, 19 October 2016