(157 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<script> | <script> | ||
// This is the jquery part of your template. | // This is the jquery part of your template. | ||
// Try not modify any of this code too much since it makes your menu work. | // Try not modify any of this code too much since it makes your menu work. | ||
+ | |||
$(document).ready(function() { | $(document).ready(function() { | ||
Line 71: | Line 13: | ||
menu_functionality(); | menu_functionality(); | ||
hide_show_menu(); | hide_show_menu(); | ||
− | + | $(".igem_2017_menu_wrapper").hide(); | |
− | + | ||
− | + | ||
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols | //this function controls the expand and collapse buttons of the menu and changes the +/- symbols | ||
Line 143: | Line 83: | ||
</script> | </script> | ||
+ | |||
<style> | <style> | ||
+ | |||
+ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
+ | |||
+ | /* Clear the default wiki settings */ | ||
+ | |||
+ | #home_logo, #sideMenu { display:none; } | ||
+ | #sideMenu, #top_title, .patrollink {display:none;} | ||
+ | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | ||
+ | body {background-color:white; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | |||
+ | /**************************************************************** MENU ***************************************************************/ | ||
+ | /* Wrapper for the menu */ | ||
+ | .igem_2017_menu_wrapper { | ||
+ | z-index:4; | ||
+ | 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 */ | ||
+ | .igem_2017_menu_wrappe::-webkit-scrollbar { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* 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 */ | ||
+ | .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; | ||
+ | } | ||
+ | |||
+ | /* Table */ | ||
+ | .igem_2017_content_wrapper table { | ||
+ | width: 97%; | ||
+ | margin:15px 10px; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table cells */ | ||
+ | .igem_2017_content_wrapper td { | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table headers */ | ||
+ | .igem_2017_content_wrapper th { | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | background-color:#f2f2f2; | ||
+ | } | ||
+ | |||
+ | |||
+ | /**********************************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; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /********************************* SUPPORT CLASSES ********************************/ | ||
+ | |||
+ | /* class that clears content below*/ | ||
+ | .igem_2017_content_wrapper .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* adds extra spacing when clearing content */ | ||
+ | .igem_2017_content_wrapper .clear.extra_space { | ||
+ | height: 30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* highlight class, makes content slightly smaller */ | ||
+ | .igem_2017_content_wrapper .highlight { | ||
+ | margin: 0px 15px; | ||
+ | padding: 15px 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* highlight class, adds a gray background */ | ||
+ | .igem_2017_content_wrapper .highlight.gray { | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | /* highlight with decoration blue line on top */ | ||
+ | .igem_2017_content_wrapper .highlight.blue_top { | ||
+ | border-top: 4px solid #3399ff; | ||
+ | } | ||
+ | |||
+ | /* highlight with a full blue border decoration */ | ||
+ | .igem_2017_content_wrapper .highlight.blue_border { | ||
+ | border: 4px solid #3399ff; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* button class */ | ||
+ | .igem_2017_content_wrapper .button{ | ||
+ | max-width: 35%; | ||
+ | margin: 30px auto; | ||
+ | padding: 12px 10px; | ||
+ | background-color: #3399ff; | ||
+ | text-align: center; | ||
+ | color: #ffffff; | ||
+ | -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; | ||
+ | } | ||
+ | |||
+ | /* styling for button on hover */ | ||
+ | .igem_2017_content_wrapper .button:hover{ | ||
+ | background-color: #3399ff; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /***************************************************** RESPONSIVE STYLING ****************************************************/ | ||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 1200PX */ | ||
+ | @media only screen and (max-width: 1200px) { | ||
+ | |||
+ | #content {width:100%; } | ||
+ | .igem_2017_menu_wrapper {width:15%; right:0;} | ||
+ | .highlight {padding:10px 0px;} | ||
+ | .igem_2017_menu_wrapper #display_menu_control { display:none; } | ||
+ | #menu_content { display:block;} | ||
+ | .menu_button.direct_to_page {padding-left: 17px;} | ||
+ | |||
+ | } | ||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 800PX */ | ||
+ | @media only screen and (max-width: 800px) { | ||
+ | |||
+ | .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;} | ||
+ | .igem_2017_content_wrapper {width:100%; margin-left:0px;} | ||
+ | .column.half_size {width:100%; } | ||
+ | .column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;} | ||
+ | .highlight {padding:15px 5px;} | ||
+ | .igem_2017_menu_wrapper #display_menu_control { display:block; } | ||
+ | #menu_content { display:none;} | ||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; } | ||
+ | .menu_bottom_padding {display:none;} | ||
+ | .menu_button.direct_to_page { padding-left: 36px; } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* special class that the system uses to make sure the team wants a page to be evaluated */ | ||
+ | .judges-will-not-evaluate { | ||
+ | width: 96.6%; | ||
+ | margin: 5px 15px; | ||
+ | display: block; | ||
+ | border: 4px solid #3399ff; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
+ | |||
+ | <style> | ||
+ | h1, h2, h3, h4, h5, h6{line-height:normal;} | ||
+ | p {line-height: 40px; | ||
+ | font-family: Georgia, Times, "Times New Roman", serif; | ||
+ | font-variant: stacked-fractions; | ||
+ | font-size: 18px; | ||
+ | text-align: justify; | ||
+ | text-indent:40px; | ||
+ | } | ||
+ | table p {text-indent:0;line-height: normal; | ||
+ | margin: -6px; | ||
+ | font-size: large; | ||
+ | font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: 'Monad'; | ||
+ | src: url('https://static.igem.org/mediawiki/2017/d/de/Team-NUDT_CHINA_Monad2.eot'); | ||
+ | src: url('https://static.igem.org/mediawiki/2017/d/de/Team-NUDT_CHINA_Monad2.eot') format('embedded-opentype'), | ||
+ | url('https://static.igem.org/mediawiki/2017/2/2a/Team-NUDT_CHINMonad.woff') format('woff'), | ||
+ | url('https://static.igem.org/mediawiki/2017/0/0a/Team-NUDT_CHINA_Monad.ttf') format('truetype'), | ||
+ | url('https://static.igem.org/mediawiki/2017/d/d0/Team-NUDT_CHINMonad.svg#Monad') format('svg'); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: 'BigF'; | ||
+ | src: url('https://static.igem.org/mediawiki/2017/6/69/T-NUDT_CHINA-BigF2.eot'); | ||
+ | src: url('https://static.igem.org/mediawiki/2017/6/69/T-NUDT_CHINA-BigF2.eot') format('embedded-opentype'), | ||
+ | url('https://static.igem.org/mediawiki/2017/4/41/T-NUDT_CHINA-BigF.woff') format('woff'), | ||
+ | url('https://static.igem.org/mediawiki/2017/e/e0/T-NUDT_CHINA-BigF.ttf') format('truetype'); | ||
+ | } | ||
.pure-g{ | .pure-g{ | ||
letter-spacing:-.31em;text-rendering:optimizespeed; | letter-spacing:-.31em;text-rendering:optimizespeed; | ||
Line 156: | Line 413: | ||
.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em} | .opera-only :-o-prefocus,.pure-g{word-spacing:-.43em} | ||
.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto} | .pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto} | ||
− | |||
.pure-u-1-24{width:4.1667%} | .pure-u-1-24{width:4.1667%} | ||
.pure-u-1-12,.pure-u-2-24{width:8.3333%} | .pure-u-1-12,.pure-u-2-24{width:8.3333%} | ||
Line 314: | Line 570: | ||
#layout { | #layout { | ||
+ | margin-top:-10px; | ||
position: relative; | position: relative; | ||
left: 0; | left: 0; | ||
Line 319: | Line 576: | ||
} | } | ||
#layout.active #menu { | #layout.active #menu { | ||
− | left: | + | left: 240px; |
− | width: | + | width: 240px; |
} | } | ||
#layout.active .menu-link { | #layout.active .menu-link { | ||
− | left: | + | left: 240px; |
} | } | ||
Line 330: | Line 587: | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 0 2em; | padding: 0 2em; | ||
− | |||
margin-bottom: 50px; | margin-bottom: 50px; | ||
line-height: 1.6em; | line-height: 1.6em; | ||
} | } | ||
− | . | + | .Myheader { |
+ | align-self: center; | ||
margin: 0; | margin: 0; | ||
color: #333; | color: #333; | ||
text-align: center; | text-align: center; | ||
padding: 2.5em 2em 0; | padding: 2.5em 2em 0; | ||
+ | border-bottom: 2px solid #eee; | ||
} | } | ||
− | . | + | .Myheader h1 { |
− | + | margin: 0.5em 0; | |
− | margin: 0. | + | font-size: 3.8em; |
− | font-size: | + | |
font-weight: 300; | font-weight: 300; | ||
+ | border-bottom:none; | ||
} | } | ||
− | . | + | .Myheader h2 { |
font-weight: 300; | font-weight: 300; | ||
color: #ccc; | color: #ccc; | ||
padding: 0; | padding: 0; | ||
margin-top: 0; | margin-top: 0; | ||
+ | } | ||
+ | .Myheader h5 { | ||
+ | font-family:Monad; | ||
+ | margin: 0.5em 0; | ||
+ | font-size: 4.6em; | ||
+ | font-weight: 300; | ||
+ | border-bottom:none; | ||
+ | padding-bottom:50px; | ||
+ | } | ||
+ | .Myheader h6 { | ||
+ | font-size: 2em; | ||
+ | color: grey; | ||
+ | font-weight: 300; | ||
+ | margin: 0; | ||
+ | padding-top:1px; | ||
} | } | ||
Line 357: | Line 630: | ||
margin: 50px 0 20px 0; | margin: 50px 0 20px 0; | ||
font-weight: 300; | font-weight: 300; | ||
+ | text-indent:0; | ||
color: #888; | color: #888; | ||
+ | font-size: 40px; | ||
+ | border-bottom: 1px solid #eee; | ||
+ | } | ||
+ | .content-subsub { | ||
+ | text-indent:0; | ||
+ | margin: 25px 0 10px 0; | ||
+ | font-weight: 300; | ||
+ | color: #888; | ||
+ | font-size:30px; | ||
+ | } | ||
+ | .content-subsubsub { | ||
+ | text-indent:0; | ||
+ | margin: 10px 0 6px 0; | ||
+ | font-weight: 300; | ||
+ | color: #888; | ||
+ | font-size:25px; | ||
} | } | ||
− | |||
#menu { | #menu { | ||
− | margin-left: - | + | font-weight:10px; |
− | width: | + | font-family: Monad; |
+ | font-size: 19px; | ||
+ | margin-left: -240px; /* "#menu" width */ | ||
+ | width: 240px; | ||
position: fixed; | position: fixed; | ||
top: 18px; | top: 18px; | ||
left: 0; | left: 0; | ||
bottom: 0; | bottom: 0; | ||
− | z-index: | + | z-index: 8; /* so the menu or its navicon stays above all content */ |
background: #000000; | background: #000000; | ||
overflow-y: auto; | overflow-y: auto; | ||
Line 378: | Line 670: | ||
padding: 0.6em 0 0.6em 0.6em; | padding: 0.6em 0 0.6em 0.6em; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
#menu .pure-menu, | #menu .pure-menu, | ||
#menu .pure-menu ul { | #menu .pure-menu ul { | ||
Line 454: | Line 742: | ||
margin-top: 0.6em; | margin-top: 0.6em; | ||
} | } | ||
− | @media (min-width: | + | @media (min-width: 94em) { |
− | + | .phone{height:700px;} | |
− | . | + | .Myheader, |
.content { | .content { | ||
padding-left: 2em; | padding-left: 2em; | ||
Line 463: | Line 751: | ||
#layout { | #layout { | ||
− | padding-left: | + | padding-left: 240px; /* left col width "#menu" */ |
left: 0; | left: 0; | ||
} | } | ||
#menu { | #menu { | ||
− | left: | + | left: 240px; |
} | } | ||
.menu-link { | .menu-link { | ||
position: fixed; | position: fixed; | ||
− | left: | + | left: 240px; |
display: none; | display: none; | ||
} | } | ||
#layout.active .menu-link { | #layout.active .menu-link { | ||
− | left: | + | left: 240px; |
} | } | ||
− | + | .home-btn { | |
+ | top: 5px; | ||
+ | height: 46px; | ||
+ | width: 46px;} | ||
} | } | ||
− | @media (max-width: | + | @media (max-width: 94em) { |
+ | .phone{height:600px;} | ||
#layout.active { | #layout.active { | ||
position: relative; | position: relative; | ||
− | left: | + | left: 240px; |
} | } | ||
− | + | .home-btn { | |
+ | top: 5px; | ||
+ | height: 46px; | ||
+ | width: 46px;} | ||
+ | |||
} | } | ||
+ | @media (max-width: 60em) { | ||
+ | .home-btn { | ||
+ | top: -16px; | ||
+ | height: 23px; | ||
+ | width: 23px;} | ||
+ | .phone{height:360px;}} | ||
+ | .pure-menu ul{margin: 0;} | ||
.pure-menu-item .pure-menu-item{display:block;background-color:#cccccc} | .pure-menu-item .pure-menu-item{display:block;background-color:#cccccc} | ||
.pure-menu-children{display:none;position:relative;top:0;margin:0;padding:0;z-index:3} | .pure-menu-children{display:none;position:relative;top:0;margin:0;padding:0;z-index:3} | ||
.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:relative} | .pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:relative} | ||
.pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small} | .pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small} | ||
+ | .large-header { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | background: #333; | ||
+ | overflow: hidden; | ||
+ | background-size: cover; | ||
+ | background-position: center center; | ||
+ | z-index: 1; | ||
+ | background-position: center bottom; | ||
+ | } | ||
+ | .main-title { | ||
+ | max-width:100%; | ||
+ | position: absolute; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | color: #f9f1e9; | ||
+ | text-align: center; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translate3d(-50%,-50%,0); | ||
+ | transform: translate3d(-50%,-50%,0); | ||
+ | font-family: "Comic Sans MS", cursive; | ||
+ | font-weight: normal; | ||
+ | font-size: 7.5em; | ||
+ | padding-left: 10px; | ||
+ | text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | ||
+ | } | ||
+ | p a{text-decoration: underline;color: blue;font-style:italic; } | ||
+ | p a:visited{color:blue;} | ||
+ | p a:hover{color:blue;} | ||
+ | .tooltip | ||
+ | { | ||
+ | text-decoration:none; | ||
+ | position:relative; | ||
+ | font-weight: bold; | ||
+ | } | ||
− | + | .tooltip span | |
− | + | {font-size: medium; | |
+ | display:none; | ||
+ | -moz-border-radius:6px; | ||
+ | -webkit-border-radius:6px; | ||
+ | border-radius:6px; | ||
+ | color:black; | ||
+ | background:white;font-weight: 100; | ||
+ | line-height: normal; | ||
+ | } | ||
+ | .tooltip span img | ||
+ | { | ||
+ | float:left; | ||
+ | margin:0px 8px 8px 0; | ||
+ | width:50%; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .tooltip:hover span | |
− | + | { | |
− | + | display:block; | |
− | + | position:absolute; | |
− | + | top:0; | |
− | + | left:0; | |
− | + | z-index:1000; | |
− | + | width:300px; | |
− | + | min-height:128px; | |
− | + | border:1px solid black; | |
− | + | margin-top:12px; | |
− | + | margin-left:15px; | |
− | + | overflow:visible; | |
− | + | padding:8px; | |
− | + | } | |
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<head> | <head> | ||
Line 797: | Line 883: | ||
<div class="igem_2017_menu_wrapper" > | <div class="igem_2017_menu_wrapper" > | ||
+ | |||
Line 1,082: | Line 1,169: | ||
<!-- start of content --> | <!-- start of content --> | ||
<div class="igem_2017_content_wrapper"> | <div class="igem_2017_content_wrapper"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 03:28, 2 November 2017