|
|
Line 1: |
Line 1: |
| <html> | | <html> |
− | <script>
| |
− | ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| |
− |
| |
− | $(document).ready(function() {
| |
− |
| |
− | $("#HQ_page").attr('id','');
| |
− |
| |
− |
| |
− | //highlight current page on the menu
| |
− | highlight_current_page_menu();
| |
− |
| |
− | //accessing submenus
| |
− | $(".menu_item").click(function(){
| |
− | $(".submenu_control_icon", this).toggleClass("open");
| |
− | $(this).next(".submenu").fadeToggle(400);
| |
− | });
| |
− |
| |
− | //mobile menu access
| |
− | $(".igem_2018_team_mobile_bar").click(function(){
| |
− | $(this).next().toggleClass("displaying_menu");
| |
− | });
| |
− |
| |
− | });
| |
− |
| |
− |
| |
− | function highlight_current_page_menu() {
| |
− |
| |
− | var page_url="https://2018.igem.org/";
| |
− | page_url = page_url + wgPageName;
| |
− | $("a[href$='"+ page_url +"']").children().addClass("current_page");
| |
− |
| |
− | //if the page is in a submenu, open the submenu and make the appropiate changes
| |
− | if( $( ".current_page" ).hasClass( "submenu_item" )){
| |
− |
| |
− | $(".current_page").parent().parent().fadeToggle(400);
| |
− | $(".current_page").parent().parent().prev().addClass("current_page");
| |
− | $(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
| |
− |
| |
− | }
| |
− | }
| |
− |
| |
− |
| |
− | ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| |
− | </script>
| |
− |
| |
− |
| |
| <style> | | <style> |
− | /**************************************************************************************************************************************************************************************************/
| + | body { |
| + | margin: 0; |
| + | background-color: ##6D30F0!important; |
| + | font: x-small sans-serif; |
| + | } |
| | | |
| + | .firstHeading, .logo_2017 { |
| + | display: none; |
| + | } |
| | | |
| + | #sideMenu{ |
| + | display: none; |
| + | } |
| + | #content { |
| + | margin-left: auto; |
| + | align-self: center; |
| + | } |
| | | |
− | /**************************************************************************************************************************************************************************************************/
| + | .navdiv-wrapper { |
− | /* DEFAULT WIKI SETTINGS */
| + | height: 40px; |
− | /**************************************************************************************************************************************************************************************************/
| + | background: rgb(126, 115, 183); |
| + | } |
| | | |
| + | .navdiv-cover { |
| + | height: 40px; |
| + | position: absolute; |
| + | background: rgb(0, 0, 0) |
| + | width: 200vw; |
| + | left: -100vw; |
| | | |
− | #home_logo, #sideMenu { display:none; }
| + | } |
− | #sideMenu, #top_title, .patrollink {display:none;}
| + | |
− | #content { margin: auto; padding:0px; width:100%;} /*-left: 50px; margin-top:-7px; margin-right: 0px*/
| + | #content .navdiv { |
− | body {background-color:white; }
| + | float: none; |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | margin: 0 auto; |
| + | left: 0; |
| + | } |
| + | |
| + | #content .navdiv>a { |
| + | position: relative; |
| + | } |
| | | |
− | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
| + | #content .navdiv ul{ |
| + | width: 100%; |
| + | height: 40px; |
| + | background: rgb(126, 111, 183); |
| + | line-height: 20px; |
| + | color: white; |
| + | margin-right: 15px; |
| + | margin-top: 40px; |
| + | margin-left: 0px; |
| + | text-align: center; |
| + | |
| + | } |
| + | |
| + | #content .navdiv ul li a { |
| + | text-decoration: none; |
| + | color: white; |
| + | cursor: pointer; |
| + | } |
| + | |
| + | #content .navdiv ul li a:hover{ |
| + | text-decoration: none; |
| + | color: white; |
| + | background:rgb(150, 160, 221); |
| + | -webkit-transition: all 0.3s ease; |
| + | -moz-transition: all 0.3s ease; |
| + | -ms-transition: all 0.3s ease; |
| + | -o-transition: all 0.3s ease; |
| + | transition: all 0.3s ease; |
| + | } |
| + | |
| + | #content .navdiv ul li{ |
| + | list-style-type: none; |
| + | display: inline-block; |
| + | position: relative; |
| + | color: white; |
| + | padding-bottom: 10px; |
| + | padding-top: 10px; |
| + | padding-left: 20px; |
| + | padding-right: 20px; |
| + | cursor: pointer; |
| + | } |
| + | |
| + | #content .navdiv ul li:hover{ |
| + | background: rgb(65, 21, 178); |
| + | color: white; |
| + | -webkit-transition: all 0.3s ease; |
| + | -moz-transition: all 0.3s ease; |
| + | -ms-transition: all 0.3s ease; |
| + | -o-transition: all 0.3s ease; |
| + | transition: all 0.3s ease; |
| + | |
| + | } |
| + | |
| + | .navdiv h1{ |
| + | width: 300px; |
| + | float: left; |
| + | cursor: pointer; |
| + | margin-left: 15px; |
| + | } |
| + | |
| + | .navdiv .logo-wrapper { |
| + | position: absolute; |
| + | top: -30px; |
| + | background: white; |
| + | height: 40px; |
| + | border: 10px solidrgb (126, 111, 183);; |
| + | height: 100px; |
| + | border-radius: 100px; |
| + | } |
| + | |
| + | .navdiv .logo-wrapper img { |
| + | height: 100px; |
| + | width: 100px; |
| + | padding: 0px 0px 0px 0px; |
| + | } |
| | | |
| + | .navdiv .logo-wrapper#team-logo { |
| + | left: -95px; |
| + | } |
| + | |
| + | .navdiv .logo-wrapper#main-logo { |
| + | left: 920px; |
| + | } |
| | | |
− | /**************************************************************************************************************************************************************************************************/ | + | /*.navdiv .logo-wrapper#main-logo { |
− | /* MENU */ | + | height: 66px; |
− | /**************************************************************************************************************************************************************************************************/ | + | left: -134px; |
| + | border-width: 7px; |
| + | top: -22px; |
| + | }*/ |
| + | |
| + | /*.navdiv .logo-wrapper#main-logo img { |
| + | height: 56px; |
| + | }*/ |
| + | |
| + | #content .submenu { |
| + | display: none; |
| + | position: absolute; |
| + | left: 0; |
| + | top: 40px; |
| + | } |
| + | |
| + | #content .submenu a { |
| + | color: black; |
| + | background: rgb(65, 21, 178); |
| + | text-decoration: none; |
| + | text-align: left; |
| + | display: block; |
| + | padding: 10px; |
| + | } |
| + | |
| + | #content .submenu a:hover{ |
| + | color: white; |
| + | background: rgb(65, 21, 178); |
| + | border: none; |
| + | } |
| + | |
| + | #content .navdiv ul li:hover .submenu { |
| + | display: block; |
| + | } |
| + | |
| + | /********************************* CONTENT OF THE PAGE ********************************/ |
| + | ul.img-list { |
| + | list-style-type: none; |
| + | margin: 0; |
| + | padding: 0; |
| + | text-align: center; |
| + | |
| + | } |
| | | |
− | /*this wraps the whole of the menu*/
| + | ul.img-list li { |
− | .igem_2018_team_menu {
| + | display: inline-block; |
− | background-color:#c4baba;
| + | height: 150px; |
− | border-left: 1px solid #c4baba;
| + | margin: 0 0 5px 0; |
− | display:block;
| + | border: solid 2px; |
− | float:left;
| + | |
− | height:100vh;
| + | |
− | max-width: 270px;
| + | |
− | overflow-y: auto;
| + | |
− | overflow-x: hidden;
| + | |
− | padding:0px;
| + | |
− | position:fixed;
| + | |
− | left:0%;
| + | |
− | text-align:left;
| + | |
− | width: 15%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .igem_2018_team_menu.displaying_menu{
| + | |
− | display:block;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2018_team_menu a {
| + | |
− | color: #e7dfdd;
| + | |
− | text-decoration:none;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2018_team_menu img {
| + | |
− | width:100%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .igem_2018_team_menu .menu_item {
| + | |
− | background-color: #a239ca;
| + | |
− | border-bottom: 1px solid #928b8b;
| + | |
− | clear: both;
| + | |
− | color: #d4d4d4;
| + | |
− | cursor: pointer;
| + | |
− | float: left;
| + | |
− | font-size: 120%;
| + | |
− | font-weight: bold;
| + | |
− | | + | |
− | padding: 15px 0px 15px 5%;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2018_team_menu .menu_item.direct_link {
| + | |
− | color: #d4d4d4;
| + | |
− | padding-left: 15%;
| + | |
− | }
| + | |
− | .igem_2018_team_menu .menu_item:hover {
| + | |
− | background-color: #4717f6;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .igem_2018_team_menu .menu_item .submenu_control_icon {
| + | |
− | color: #d4d4d4;
| + | |
− | float: left;
| + | |
− | width: 10%;
| + | |
− | }
| + | |
− | | + | |
− | /* submenu icon "+" "-"*/
| + | |
− | .igem_2018_team_menu .menu_item .submenu_control_icon::before {
| + | |
− | content: "+";
| + | |
− | }
| + | |
− | | + | |
− | /* submenu icon "+" "-"*/
| + | |
− | .igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
| + | |
− | content: "-";
| + | |
− | }
| + | |
− | | + | |
− | /*submenu wrapper*/
| + | |
− | .igem_2018_team_menu .submenu{
| + | |
− | background-color: #e4dede;
| + | |
− | clear:both;
| + | |
− | display:none;
| + | |
− | float: left;
| + | |
− | width:100%;
| + | |
− | }
| + | |
− | | + | |
− | /*styling for a submenu item*/
| + | |
− | .igem_2018_team_menu .submenu .submenu_item {
| + | |
− | border-bottom: 1px solid #c4baba;
| + | |
− | color: #635d5d;
| + | |
− | height: 30px;
| + | |
− | float: left;
| + | |
− | font-size: 110%;
| + | |
− | font-weight: bold;
| + | |
− | padding: 12px 0px 12px 15%;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .igem_2018_team_menu .submenu .submenu_item:hover {
| + | |
− | background-color: #4717f6;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .igem_2018_team_menu .submenu .submenu_item.current_page,
| + | |
− | .igem_2018_team_menu .menu_item.current_page,
| + | |
− | .igem_2018_team_menu .menu_item.direct_link.current_page {
| + | |
− | background-color:#7acbd8;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /*mobile menu bar styling*/
| + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | | + | |
− | | + | |
− | .igem_2018_team_mobile_bar {
| + | |
− | background-color:#e4dede;
| + | |
− | border-bottom: 1px solid #c4baba;
| + | |
− | cursor:pointer;
| + | |
− | display:none;
| + | |
− | float:left;
| + | |
− | margin-top: 0;
| + | |
− | padding: 5px 0;
| + | |
− | position:fixed;
| + | |
− | width:100%;
| + | |
− | }
| + | |
− | | + | |
− | .igem_logo_mobile img {
| + | |
− | width:70px;
| + | |
− | }
| + | |
− | | + | |
− | .igem_logo_mobile {
| + | |
− | float:left;
| + | |
− | padding-left: 5%;
| + | |
− | width: 30%;
| + | |
− | }
| + | |
− | | + | |
− | .igem_menu_control_mobile img {
| + | |
− | width:25px;
| + | |
− | }
| + | |
− | | + | |
− | .igem_menu_control_mobile {
| + | |
− | float:left;
| + | |
− | padding-left:5%;
| + | |
− | padding-top:5px;
| + | |
− | text-align:left;
| + | |
− | width: 30%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | /* CONTENT OF THE PAGE */
| + | |
− | | + | |
− | /*SLIDESHOW*/
| + | |
− | | + | |
− | * {box-sizing: border-box}
| + | |
− | body {font-family: Verdana, sans-serif; margin:0}
| + | |
− | .mySlides {display: none}
| + | |
− | img {vertical-align: middle;}
| + | |
− | | + | |
− | /* Slideshow container */
| + | |
− | .slideshow-container {
| + | |
− | max-width: 1000px; | + | |
| position: relative; | | position: relative; |
− | left: 120px; | + | width: 150px; |
− | margin: auto; | + | width: calc(33% - 6px); |
| } | | } |
| | | |
− | /* Next & previous buttons */
| + | ul.img-list img { |
− | .prev, .next { | + | width: 100%; |
− | cursor: pointer; | + | height: 100% |
− | position: absolute; | + | |
− | top: 50%;
| + | |
− | width: auto;
| + | |
− | padding: 16px;
| + | |
− | margin-top: -22px;
| + | |
− | color: white;
| + | |
− | font-weight: bold;
| + | |
− | font-size: 18px;
| + | |
− | transition: 0.6s ease;
| + | |
− | border-radius: 0 3px 3px 0;
| + | |
| } | | } |
| | | |
− | /* Position the "next button" to the right */
| + | ul.img-home { |
− | .next { | + | list-style-type: none; |
− | right: 0; | + | margin: 0; |
− | border-radius: 3px 0 0 3px; | + | padding: 0; |
| + | text-align: center; |
| + | width: 950px |
| + | |
| } | | } |
| | | |
− | /* On hover, add a black background color with a little bit see-through */
| + | ul.img-home li { |
− | .prev:hover, .next:hover { | + | display: inline-block; |
− | background-color: rgba(0,0,0,0.8); | + | margin: 5px 0 0 0; |
| + | border: 0px; |
| + | position: relative |
| } | | } |
| | | |
− | /* Caption text */
| + | ul.img-home img { |
− | .text { | + | |
− | color: #f2f2f2;
| + | |
− | font-size: 15px;
| + | |
− | padding: 8px 12px;
| + | |
− | position: absolute;
| + | |
− | bottom: 8px;
| + | |
| width: 100%; | | width: 100%; |
− | text-align: center; | + | height: 100% |
| } | | } |
| | | |
− | /* Number text (1/3 etc) */
| + | ul.header a { |
− | .numbertext { | + | color: #96a0dd; |
− | color: #f2f2f2;
| + | |
− | font-size: 12px;
| + | |
− | padding: 8px 12px;
| + | |
− | position: absolute;
| + | |
− | top: 0;
| + | |
| } | | } |
| | | |
− | /* The dots/bullets/indicators */
| + | ul.header a:hover { |
− | .dot { | + | color: #96a0dd; |
− | cursor: pointer; | + | |
− | height: 15px;
| + | |
− | width: 15px;
| + | |
− | margin:auto;
| + | |
− | background-color: #bbb;
| + | |
− | border-radius: 50%;
| + | |
− | display: inline-block;
| + | |
− | transition: background-color 0.6s ease;
| + | |
| } | | } |
| | | |
− | .active, .dot:hover { | + | span.text-content { |
− | background-color: #717171; | + | background: #96a0dd; |
| + | color: black; |
| + | font-size: 16px; |
| + | font-family: San-serif !important; |
| + | cursor: pointer; |
| + | display: table; |
| + | height: 100%; |
| + | left: 0; |
| + | position: absolute; |
| + | vertical-align: middle; |
| + | top: 0; |
| + | width: 100%; |
| + | opacity: 0; |
| + | -webkit-transition: opacity 500ms; |
| + | -moz-transition: opacity 500ms; |
| + | -o-transition: opacity 500ms; |
| + | transition: opacity 500ms; |
| + | } |
| + | span.text-content span { |
| + | display: table-cell; |
| + | text-align: center; |
| + | vertical-align: middle; |
| } | | } |
− | | + | ul.img-list li:hover span.text-content { |
− | /* Fading animation */
| + | opacity: 1; |
− | .fade { | + | |
− | -webkit-animation-name: fade;
| + | |
− | -webkit-animation-duration: 1.5s;
| + | |
− | animation-name: fade;
| + | |
− | animation-duration: 1.5s; | + | |
| } | | } |
− | | + | ul.img-home li:hover span.text-content { |
− | @-webkit-keyframes fade {
| + | opacity: 1; |
− | from {opacity: .4} | + | |
− | to {opacity: 1}
| + | |
| } | | } |
| | | |
− | @keyframes fade {
| |
− | from {opacity: .4}
| |
− | to {opacity: 1}
| |
− | }
| |
| | | |
− | /* On smaller screens, decrease text size */ | + | /*STYLING */ |
− | @media only screen and (max-width: 300px) {
| + | |
− | .prev, .next,.text {font-size: 11px}
| + | |
− | }
| + | |
| | | |
| + | /* styling for the titles */ |
| + | .content_wrapper h1, .content_wrapper h2 { |
| + | padding:5px 15px; |
| + | border-bottom:0px; |
| + | color:#67c0e0; |
| + | font family: georgia; |
| | | |
− | /**************************************************************************************************************************************************************************************************/
| |
− |
| |
− | /* general wrapper for the content */
| |
− | .igem_2018_team_content {
| |
− | background-color:white;
| |
− | display:block;
| |
− | float:right;
| |
− |
| |
− | width: 87%;
| |
| } | | } |
− | | + | .content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 { |
− | /* subwrapper to center content */ | + | padding:5px 15px; |
− | .igem_2018_team_content .igem_2018_team_column_wrapper {
| + | |
− | margin:auto;
| + | |
− | max-width: 1400px;
| + | |
− | width:90%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /*general styling*/
| + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | | + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;}
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;}
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;}
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;}
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;}
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}
| + | |
− | | + | |
− | | + | |
− | /* styling for the titles h1, h2*/
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
| + | |
| border-bottom:0px; | | border-bottom:0px; |
− | color: #635d5d; | + | color: #626566; |
− | font-family: "Arial Black", Gadget, sans-serif;
| + | |
− | padding: 10px 0px;
| + | |
| } | | } |
| | | |
− | /* styling for the titles h3, h3, h5, h6 */
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h3,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h4,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h5,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper h6 {
| |
− | border-bottom:0px;
| |
− | color: #928b8b;
| |
− | font-family: "Arial Black", Gadget, sans-serif;
| |
− | padding: 5px 0px;
| |
− | }
| |
| | | |
− | /* text */ | + | /* font and text */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper p { | + | .content_wrapper p { |
− | font-size: 130%; | + | padding:0px 15px; |
− | font-family: Arial, Helvetica, sans-serif; | + | font-size: 13px; |
− | padding: 5px 0px;
| + | font-family: 'Raleway', sans-serif; |
− | text-align: left;
| + | /*font-family: 'Helvetica', sans-serif;*/ |
− | color: #484848;
| + | |
| } | | } |
| | | |
| /* Links */ | | /* Links */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper a { | + | .content_wrapper a { |
− | color: #5bc7d8;
| + | |
| font-weight: bold; | | font-weight: bold; |
| text-decoration: underline; | | text-decoration: underline; |
− | text-decoration-color:#5bc7d8; | + | text-decoration-color:#72c9b6; |
− | transition: all 0.4s ease; | + | color: #72c9b6; |
| -webkit-transition: all 0.4s ease; | | -webkit-transition: all 0.4s ease; |
− | -moz-transition: all 0.4s ease;
| + | -moz-transition: all 0.4s ease; |
| -ms-transition: all 0.4s ease; | | -ms-transition: all 0.4s ease; |
| -o-transition: all 0.4s ease; | | -o-transition: all 0.4s ease; |
| + | transition: all 0.4s ease; |
| } | | } |
| | | |
| /* hover for the links */ | | /* hover for the links */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper a:hover { | + | .content_wrapper a:hover { |
− | color: #f8b732;
| + | |
| text-decoration:none; | | text-decoration:none; |
| + | color:#000000; |
| } | | } |
| | | |
| + | /* non numbered lists */ |
| + | .content_wrapper ul { |
| + | padding:0px 20px; |
| + | font-size: 13px; |
| + | font-family: 'Raleway', sans-serif; |
| + | } |
| + | |
| + | /* numbered lists */ |
| + | .content_wrapper ol { |
| + | padding:0px; |
| + | font-size: 13px; |
| + | font-family: 'Raleway', sans-serif; |
| + | } |
| | | |
| /* Table */ | | /* Table */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper table { | + | .content_wrapper table { |
− | border: 1px solid #928b8b; | + | width: 97%; |
| + | margin:15px 10px; |
| + | border: 1px solid #d3d3d3; |
| border-collapse: collapse; | | border-collapse: collapse; |
− | font-size: 130%;
| |
− | width: 100%;
| |
| } | | } |
| | | |
| /* table cells */ | | /* table cells */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper td { | + | .content_wrapper td { |
− | border: 1px solid #c4baba;
| + | |
− | border-collapse: collapse;
| + | |
− | font-size: 105%;
| + | |
| padding: 10px; | | padding: 10px; |
| vertical-align: text-top; | | vertical-align: text-top; |
| + | border: 1px solid #d3d3d3; |
| + | border-collapse: collapse; |
| } | | } |
| | | |
| /* table headers */ | | /* table headers */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper th { | + | .content_wrapper th { |
− | background-color:#c4baba;
| + | |
− | border: 1px solid #928b8b;
| + | |
− | border-collapse: collapse;
| + | |
− | font-size: 110%;
| + | |
| padding: 10px; | | padding: 10px; |
| vertical-align: text-top; | | vertical-align: text-top; |
| + | border: 1px solid #d3d3d3; |
| + | border-collapse: collapse; |
| + | background-color:#f2f2f2; |
| } | | } |
| | | |
− | | + | /* Button class */ |
− | | + | .button_click { |
− | /* non numbered lists */ | + | margin: 10px auto; |
− | .igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol { | + | padding: 15px; width:12%; |
− | font-size: 130%; | + | text-align:center; |
− | font-family: Arial, Helvetica, sans-serif; | + | font-weight:bold; |
− | padding:0px 20px; | + | background-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; |
| } | | } |
| | | |
− | | + | /* button class on hover */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li, | + | .button_click:hover { |
− | .igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
| + | background-color:#000000; |
− | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
| + | color:#72c9b6; |
− | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | /*layout classes*/ | + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | | + | |
− | /*main layout class */
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column { | + | |
− | float:left; | + | |
− | margin: 1% 2%;
| + | |
− | padding: 10px; | + | |
| } | | } |
| | | |
− | /* 100% */ | + | /* Wrapper for the content */ |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; } | + | .content_wrapper { |
− | | + | width: 85%; |
− | /* 66% */
| + | margin-left:150px; |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
| + | padding:10px 0px; |
− | | + | float:left; |
− | /* 33% */
| + | background-color:white; |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /*styling for all images*/
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
| + | |
− | margin-bottom: 15px; | + | |
− | width: 100%; | + | |
| } | | } |
| | | |
− | | + | /*LAYOUT */ |
− | /* page break */ | + | .column { |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .clear { | + | padding: 10px 0px; |
− | clear:both; | + | float:left; |
− | }
| + | background-color:white; |
− | /*add extra space to page break with clear class*/
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
| + | |
− | height: 30px; | + | |
| } | | } |
| | | |
− | /* horizontal line to divide the page*/
| + | .full_size { |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .line_divider { | + | width:100%; |
− | border-top: 1px solid #c4baba;
| + | |
− | margin: auto;
| + | |
− | width: 98%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− |
| + | |
− | /*support classes*/
| + | |
− | /**************************************************************************************************************************************************************************************************/
| + | |
− | | + | |
− | | + | |
− | /*Button */
| + | |
− | /************************************************/
| + | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
| + | |
− | font-size: 130%;
| + | |
− | margin: 30px auto;
| + | |
− | text-align: center;
| + | |
| } | | } |
| | | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a { | + | .full_size img { |
− | background-color: #5bc7d8;
| + | |
− | color: #635d5d !important;
| + | |
− | font-weight: bold;
| + | |
− | margin: auto;
| + | |
− | text-decoration: none !important;
| + | |
| padding: 10px 15px; | | padding: 10px 15px; |
| + | width:96.5%; |
| } | | } |
| | | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover { | + | .half_size { |
− | background-color: #f8b732 !important; | + | width: 50%; |
| } | | } |
− | | + | .half_size img { |
− | | + | padding: 10px 15px; |
− | | + | width: 93%; |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight { | + | |
− | padding: 15px 20px; | + | |
| } | | } |
| | | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 {
| |
− | padding: 5px 15px;
| |
− | }
| |
| | | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background { | + | .clear { |
− | background-color: #e4dede; | + | clear:both; |
| } | | } |
| | | |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top { | + | .highlight { |
− | border-top: 4px solid #5bc7d8;
| + | width: 90%; |
| + | margin: auto; |
| + | padding: 15px 5px; |
| + | background-color: #96a0dd; |
| } | | } |
| | | |
− | | + | .judges-will-not-evaluate { |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full { | + | border: 4px solid #72c9b6; |
− | border: 4px solid #5bc7d8;
| + | display: block; |
| + | margin: 5px 15px; |
| + | width: 95%; |
| + | font-weight:bold; |
| } | | } |
− |
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
| |
− | border-top: 4px solid #f8b732
| |
− | }
| |
− |
| |
− |
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
| |
− | border: 4px solid #f8b732;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | /*mobile*/
| |
− | /**************************************************************************************************************************************************************************************************/
| |
− |
| |
− |
| |
− | /* 1800px */
| |
− | /************************************************/
| |
− | @media only screen and (max-width: 1800px) {
| |
− | .igem_2018_team_content { width: 85%;}
| |
− | .igem_2018_team_menu {display:block;}
| |
− | }
| |
− |
| |
− | /* 1400px */
| |
− | /************************************************/
| |
− | @media only screen and (max-width: 1400px) {
| |
− | .igem_2018_team_menu .menu_item { font-size:100%;}
| |
− | .igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
| |
− | .igem_2018_team_menu {display:block;}
| |
− | }
| |
− |
| |
− | @media only screen and (max-width: 1001px) {
| |
− | .igem_2018_team_menu {display:block;}
| |
− | }
| |
− |
| |
− | /* 1000px */
| |
− | /************************************************/
| |
− | @media only screen and (max-width: 1000px) {
| |
− | .igem_2018_team_content {width:100%; margin-left:0px;}
| |
− | .igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
| |
− | .igem_2018_team_mobile_bar {display:block;}
| |
− | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media only screen and (max-width: 500px) {
| |
− | .igem_2018_team_menu {min-width:100%; width:100%; }
| |
− | }
| |
− |
| |
− |
| |
− | /**************************************************************************************************************************************************************************************************/
| |
− |
| |
− |
| |
− |
| |
| | | |
| | | |
| </style> | | </style> |
| + | <!-- HTML --> |
| + | |
| + | <div class="navdiv-wrapper"> |
| + | <div class="navdiv-cover"></div> |
| + | <div class="navdiv"> |
| + | <ul> |
| + | <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Team">ABOUT US</a> |
| + | <div class="submenu"> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Team">Team</a> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Attributions">Attributions</a> |
| + | </div> |
| + | </li> |
| | | |
| + | <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Description">PROJECT</a> |
| + | <div class="submenu"> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Design">Design</a> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Experiments">Experiments</a> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Results">Results</a> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Demonstrate">Demonstrate</a> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Improve">Improve</a> |
| + | </div> |
| + | </li> |
| | | |
− | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | + | <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Notebook">LAB WORK</a> |
− | <!--- THIS IS WHERE THE HTML BEGINS --->
| + | <div class="submenu"> |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Notebook">Notebook</a> |
− | | + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Parts">Parts</a> |
− | <html>
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Safety">Safety</a> |
− | <head>
| + | </div> |
− | | + | </li> |
− | <!-- This tells the browser that your page is responsive -->
| + | |
− | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Model">MODELLING</a></li> |
− | <link href="file:///C:/Users/melis/Documents/Code/main.css" rel="stylesheet">
| + | |
− | | + | <li><a href="#">HUMAN PRACTICES</a> |
− | </head>
| + | <div class="submenu"> |
− | | + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Human_Practices">Human Practices</a> |
− | | + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Public_Engagement">Public Engagement</a> |
− | | + | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | </div> |
− | <!--- Menu --->
| + | </li> |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | <div class="igem_2018_team_mobile_bar">
| + | |
− |
| + | |
− | <div class="igem_logo_mobile">
| + | |
− | <img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
| + | |
− | </div>
| + | |
− | | + | |
− | | + | |
− | <div class="igem_menu_control_mobile">
| + | |
− | <img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
| + | |
− | </div>
| + | |
− | | + | |
− | </div>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | <div class="igem_2018_team_menu displaying_menu">
| + | |
− | | + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill">
| + | |
− | <img src="http://placehold.it/350x150/e4dede/c4baba">
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill">
| + | |
− | <div class="menu_item direct_link">
| + | |
− | HOME
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <!-- Team -->
| + | |
− | <div class="menu_item">
| + | |
− | <div class="submenu_control_icon"> </div>
| + | |
− | TEAM
| + | |
− | </div>
| + | |
− | <div class="submenu">
| + | |
− |
| + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Team">
| + | |
− | <div class="submenu_item">
| + | |
− | Team Members
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Collaborations">
| + | |
− | <div class="submenu_item">
| + | |
− | Collaborations
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | </div>
| + | |
− | | + | |
− | | + | |
− | <!-- Project -->
| + | |
− | <div class="menu_item">
| + | |
− | <div class="submenu_control_icon"> </div>
| + | |
− | PROJECT
| + | |
− | </div>
| + | |
− | <div class="submenu">
| + | |
− |
| + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Description">
| + | |
− | <div class="submenu_item">
| + | |
− | Description
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Design">
| + | |
− | <div class="submenu_item">
| + | |
− | Design
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Experiments">
| + | |
− | <div class="submenu_item">
| + | |
− | Experiments
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Notebook">
| + | |
− | <div class="submenu_item">
| + | |
− | Notebook
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/InterLab">
| + | |
− | <div class="submenu_item">
| + | |
− | InterLab
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Model">
| + | |
− | <div class="submenu_item">
| + | |
− | Model
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Results">
| + | |
− | <div class="submenu_item">
| + | |
− | Results
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Demonstrate">
| + | |
− | <div class="submenu_item">
| + | |
− | Demonstrate
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Improve">
| + | |
− | <div class="submenu_item">
| + | |
− | Improve
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Attributions">
| + | |
− | <div class="submenu_item">
| + | |
− | Attributions
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | </div>
| + | |
− | | + | |
− | | + | |
− | <div class="menu_item">
| + | |
− | <div class="submenu_control_icon"> </div>
| + | |
− | PARTS
| + | |
− | </div>
| + | |
− | <div class="submenu">
| + | |
− |
| + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Parts">
| + | |
− | <div class="submenu_item">
| + | |
− | Parts Overview
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Basic_Part">
| + | |
− | <div class="submenu_item">
| + | |
− | Basic Parts
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Composite_Part">
| + | |
− | <div class="submenu_item">
| + | |
− | Composite Parts
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Part_Collection">
| + | |
− | <div class="submenu_item">
| + | |
− | Part Collection
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | </div>
| + | |
− | | + | |
− |
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Safety">
| + | |
− | <div class="menu_item direct_link">
| + | |
− | SAFETY
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | <div class="menu_item">
| + | |
− | <div class="submenu_control_icon"> </div>
| + | |
− | HUMAN PRACTICES
| + | |
− | </div>
| + | |
− | | + | |
− | <div class="submenu">
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Human_Practices">
| + | |
− | <div class="submenu_item">
| + | |
− | Human Practices
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Public_Engagement">
| + | |
− | <div class="submenu_item">
| + | |
− | Education & Engagement
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | </div>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | <div class="menu_item">
| + | |
− | <div class="submenu_control_icon"> </div>
| + | |
− | AWARDS
| + | |
− | </div>
| + | |
− | | + | |
− | <div class="submenu">
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Applied_Design">
| + | |
− | <div class="submenu_item">
| + | |
− | Applied Design
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Entrepreneurship">
| + | |
− | <div class="submenu_item">
| + | |
− | Entrepreneurship
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Hardware">
| + | |
− | <div class="submenu_item">
| + | |
− | Hardware
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Measurement">
| + | |
− | <div class="submenu_item">
| + | |
− | Measurement
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Model">
| + | |
− | <div class="submenu_item">
| + | |
− | Model
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Plant">
| + | |
− | <div class="submenu_item">
| + | |
− | Plant
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Software">
| + | |
− | <div class="submenu_item">
| + | |
− | Software
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | </div>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | <a href="https://igem.org/2018_Judging_Form?team=East_Chapel_Hill">
| + | |
− | <div class="menu_item direct_link">
| + | |
− | JUDGING FORM ⇗
| + | |
− | </div>
| + | |
− | </a>
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | </div>
| + | |
− | | + | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
− | <!--- Content of the page --->
| + | |
− | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| | | |
| + | <li><a href="#>AWARDS</a> |
| + | <div class="submenu"> |
| + | <a href="https://2018.igem.org/Team:East_Chapel_Hill/Measurement">AWARDS</a> |
| + | |
| | | |
− | <div class="igem_2018_team_content"> | + | </div> |
− | <div class="igem_2018_team_column_wrapper">
| + | </li> |
− | <div class="clear extra_space"></div>
| + | </ul> |
− | <div class="clear extra_space"></div>
| + | </div> |
| + | </div> |
| </html> | | </html> |