|
|
| (46 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | + | <body> |
| | + | <style type="text/css"> |
| | | | |
| − | <script>
| + | html{ font-size: 62.5%; font-family: "Arial","Helvetica","sans-serif"; margin: auto; background: white;} |
| − | | + | |
| − | // This is the jquery part of your template. Try not modify any of this code since it makes your menu work.
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | $(document).ready(function() { | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | hide_show_menu();
| + | |
| − | | + | |
| − | $("#HQ_page").attr('id','');
| + | |
| − | | + | |
| − | $( "#load_menu_here" ).load( "https://2017.igem.org/HQ:Menu #Menu" , function() {
| + | |
| − | | + | |
| − | //executes menu functionality ( accordion and toggles) once the menu is loaded
| + | |
| − | menu_functionality();
| + | |
| − | | + | |
| − | // highlights on which page/hub you are currently in
| + | |
| − | highlight_current_page();
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | $(".month_access").click(function(){
| + | |
| − | | + | |
| − | $(this).next().next().fadeToggle(400);
| + | |
| − | $(this).toggleClass("plus");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $(".expand_content.control_button").click(function(){
| + | |
| − | | + | |
| − | $(this).next(".expand_content.more").fadeToggle(400);
| + | |
| − | $(this).toggleClass("less");
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | function highlight_current_page () {
| + | |
| − | | + | |
| − | wgPageName = wgPageName.replace(/\//g,"-"); // remove dashes from page name and turn them into "-"
| + | |
| − | | + | |
| − | | + | |
| − | $('#' + wgPageName).addClass("current_page");
| + | |
| − | | + | |
| − | switch ( (wgPageName.match( /-/g ) || []).length ) { // check how many "tiers" ( / ) the page name has in order to nest it
| + | |
| − | | + | |
| − | case 0: // this is a main menu item
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | $(".current_page > .submenu_access").addClass("less");
| + | |
| − | $(".current_page > .submenu").fadeIn(400);
| + | |
| − | break;
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | case 1: // this is a link inside a submenu
| + | |
| − | | + | |
| − | $('#' + wgPageName.substr(0, wgPageName.indexOf('-') )).addClass("current_page");
| + | |
| − | $(".current_page > .submenu_access").addClass("less");
| + | |
| − | $(".current_page > .submenu").fadeIn(400);
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 2: // this is a link inside a submenu
| + | |
| − | | + | |
| − | $('#' + wgPageName.substr(0, wgPageName.lastIndexOf('-') )).addClass("current_page");
| + | |
| − | $('#' + wgPageName.substr(0, wgPageName.indexOf('-') )).addClass("current_page");
| + | |
| − |
| + | |
| − | $(".current_page > .submenu_access").addClass("less");
| + | |
| − | $(".current_page > .submenu").fadeIn(400);
| + | |
| − | | + | |
| − | | + | |
| − | $("#" + wgPageName.slice(wgPageName.indexOf("-")+1, wgPageName.lastIndexOf("-")) +"_submenu" ).fadeIn(400);
| + | |
| − | $("#" + wgPageName.slice(wgPageName.indexOf("-")+1, wgPageName.lastIndexOf("-")) +"_submenu" ).prev().addClass("less");
| + | |
| − | | + | |
| − | break;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | //menu functionality
| + | |
| − | function menu_functionality() {
| + | |
| − | | + | |
| − | $(".submenu_access").click(function(){
| + | |
| − | $(this).next().fadeToggle(400);
| + | |
| − | $(this).toggleClass("less");
| + | |
| − | });
| + | |
| − | | + | |
| − | $(".collapsable_menu_control").click(function() {
| + | |
| − | $("#all_menu_items").fadeToggle(400);
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | $("#main_menu_control").click(function() {
| + | |
| − | | + | |
| − | if($('.igem_menu_wrapper .submenu').is(':visible')) {
| + | |
| − | $(".igem_menu_wrapper .submenu").hide();
| + | |
| − | $(".submenu_access").removeClass("less");
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | $(".igem_menu_wrapper .submenu").show();
| + | |
| − | $(".submenu_access").addClass("less");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | function hide_show_menu() {
| + | |
| − | | + | |
| − | if (document.getElementById('bars_item')) {
| + | |
| − | $("#bars_item").click(function() {
| + | |
| − | $("#sideMenu").hide();
| + | |
| − | $(".igem_menu_wrapper").fadeToggle("100");
| + | |
| − | $(".content_wrapper").toggleClass("full_screen");
| + | |
| − | });
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | setTimeout(hide_show_menu, 15);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //make boxes same height
| + | |
| − | | + | |
| − | function make_boxes_same_height() {
| + | |
| − | $(".same_height").css('height', Math.max(($(".same_height.A").height()),($(".same_height.B").height()), ($(".same_height.C").height()) ) );
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | //image slider
| + | |
| − | | + | |
| − | $(function () {
| + | |
| − | | + | |
| − | var change_img_time = 4500;
| + | |
| − | var transition_speed = 450;
| + | |
| − | | + | |
| − | var simple_slideshow = $(".image_slider"),
| + | |
| − | listItems = simple_slideshow.children('li'),
| + | |
| − | listLen = listItems.length,
| + | |
| − | i = 0,
| + | |
| − | | + | |
| − | change_images = function () {
| + | |
| − | | + | |
| − | listItems.eq(i).fadeOut(transition_speed, function () {
| + | |
| − | | + | |
| − | i += 1;
| + | |
| − | if (i === listLen) {
| + | |
| − | i = 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | listItems.eq(i).fadeIn(transition_speed);
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | listItems.not(':first').hide();
| + | |
| − | setInterval( change_images, change_img_time);
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | make_boxes_same_height();
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | <style>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /********************************* DEFAULT WIKI SETTINGS ********************************/
| + | |
| − | #home_logo, #sideMenu { display:none; }
| + | |
| − | #sideMenu, #top_title, .patrollink {display:none;}
| + | |
| − | #content { padding:0px; width:100%; 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_menu_wrapper {
| + | |
| − | width: 15%;
| + | |
| − | height:100vh;
| + | |
| − | position:fixed;
| + | |
| − | padding:0px;
| + | |
| − | float:right;
| + | |
| − | background-color:#dddddd;
| + | |
| − | text-align:left;
| + | |
| − | right:0%;
| + | |
| − | overflow-y: auto;
| + | |
| − | overflow-x: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* styling for the images in the side menu */
| + | |
| − | .igem_menu_wrapper img {
| + | |
| − | width: 70%;
| + | |
| − | margin: auto;
| + | |
| − | padding-left: 20%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .logo_container { float:left; width:80%; }
| + | |
| − | | + | |
| − | /* class that shows the menu is displayed while the menu is loading */
| + | |
| − | .menu_is_loading {
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .menu_bottom_padding {
| + | |
| − | background-color: #f2f2f2;
| + | |
| − | padding: 10px 0px;
| + | |
| − | float: left;
| + | |
| − | height:40px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .menu_item_wrapper {
| + | |
| − | width:100%;
| + | |
| − | float: left;
| + | |
| − | border-bottom: 1px solid #d3d3d3;
| + | |
| − | background-color: #dddddd;
| + | |
| − | padding: 2px 0px 0px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu_item_wrapper:hover, .submenu_item:hover , .sub_submenu_item:hover, .submenu > .submenu_access:hover, menu_item:hover {
| + | |
| − | background-color:#00bdcd;
| + | |
| − | text-decoration: none;
| + | |
| − | cursor:pointer;
| + | |
| | | | |
| − | | + | body,span,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { |
| | + | margin:0; |
| | + | padding:0; |
| | + | line-height: 1.2; |
| | + | } |
| | + | |
| | + | /* before after*/ |
| | + | *, ::before, ::after { |
| | + | padding: 0; |
| | + | margin: 0; |
| | + | /*phone*/ |
| | + | -webkit-tap-highlight-color: transparent; |
| | + | box-sizing: border-box; |
| | + | -webkit-box-sizing: border-box; |
| | } | | } |
| − |
| |
| − | .submenu_access:hover { background-color: #f2f2f2;}
| |
| − |
| |
| − | .submenu > .submenu_access:hover { background-color: #ffffff;}
| |
| − |
| |
| − |
| |
| − | .menu_icon { width: 20%; float:left;}
| |
| − |
| |
| − |
| |
| − | .igem_menu_wrapper .menu_icon img {
| |
| − | width: 20px;
| |
| − | padding: 5px 10px 5px 5px;
| |
| − | }
| |
| − |
| |
| − | /* styling for menu items in the menu */
| |
| − | .menu_item { float:left; padding: 9px 0px 7px 0px; font-weight: bold; color: #000000;}
| |
| − |
| |
| − | .submenu_item.current_page, .menu_item_wrapper.current_page, .sub_submenu_item.current_page { background-color: #00bdcd;}
| |
| − |
| |
| − | .submenu_item.with_submenu_items { width: 70%;}
| |
| − |
| |
| − | /* defines width - for menu items that take you to a page */
| |
| − | .page_link {
| |
| − | width: 80%;
| |
| − | }
| |
| − |
| |
| − | /* defines width - for menu items that take you to a hub */
| |
| − | .hub_link {
| |
| − | width: 60%;
| |
| − | }
| |
| − |
| |
| − | /*hides submenus by default */
| |
| − | .submenu {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .submenu > .menu_item > .submenu {
| |
| − | color: #666666;
| |
| − | font-weight: normal;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sub_submenu_item {
| |
| − | background-color: white;
| |
| − | float: left;
| |
| − | width: 100%;
| |
| − | padding: 10px 0px 10px 15%;
| |
| − | color: black;
| |
| − | font-weight: bold;
| |
| − | border-bottom: 1px solid #dddddd;
| |
| − | }
| |
| − |
| |
| − | .submenu_access {
| |
| − | float: right;
| |
| − | color: #000000;
| |
| − | padding: 10px 0px;
| |
| − | font-size: 16px;
| |
| − | font-weight: bold;
| |
| − | width:20%;
| |
| − | background-color: #dddddd;
| |
| − | text-align: center;
| |
| − | margin-bottom: -2px;
| |
| − | margin-top: -2px;
| |
| − | }
| |
| − |
| |
| − | /* this is the icon for when the content is collapsed */
| |
| − | .submenu_access::before {
| |
| − | content: "+";
| |
| − | }
| |
| − |
| |
| − | .submenu > .submenu_access { background-color: #f2f2f2; border-bottom: 1px solid #d3d3d3; margin:0px;}
| |
| − |
| |
| − | .menu_title {
| |
| − | float: left;
| |
| − | width: 100%;
| |
| − | font-size: 12px;
| |
| − | color: #000000;
| |
| − | padding: 10px 0px;
| |
| − | background-color: #f2f2f2;
| |
| − | padding-left: 5%;
| |
| − | border-bottom: 1px solid #d3d3d3;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .submenu_item { width: 100%;
| |
| − | background-color: #f2f2f2;
| |
| − | padding: 10px 0px 10px 10%;
| |
| − | float: left;
| |
| − | border-bottom: 1px solid #d3d3d3;
| |
| − | color: black;
| |
| − | font-weight: bold;}
| |
| | | | |
| − | | + | /*mouse*/ |
| − | /* this is the icon for when the content is expanded */ | + | .noselect { |
| − | .less::before { | + | -webkit-touch-callout: none; |
| − | content: "–";
| + | -webkit-user-select: none; |
| − | }
| + | -khtml-user-select: none; |
| − | | + | -moz-user-select: none; |
| − | | + | -ms-user-select: none; |
| − | .collapsable_menu_control {
| + | user-select: none; |
| − | width: 100%;
| + | |
| − | padding: 15px 0px;
| + | |
| − | display: none;
| + | |
| − | float:left;
| + | |
| − | background-color: #f2f2f2;
| + | |
| − | text-align: center;
| + | |
| − | font-weight: bold;
| + | |
| − | color: #5e5f5f;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .collapsable_menu_control:hover {
| + | |
| − | background-color: #00bdcd;
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | | + | |
| − | /********************************* CONTENT OF THE PAGE ********************************/
| + | |
| − | | + | |
| − | /* Wrapper for the content */
| + | |
| − | .igem_content_wrapper {
| + | |
| − | width: 81%;
| + | |
| − | float:left;
| + | |
| − | background-color:white;
| + | |
| − | margin: 2%;
| + | |
| − | display:block;
| + | |
| | } | | } |
| | | | |
| − | /* class for when the menu is not shown and the content occupies the whole screen */ | + | /*bower style*/ |
| − | .igem_content_wrapper.full_screen { | + | fieldset, img, input, button { |
| − | width: 96%;
| + | border: none; |
| | + | outline-style: none; |
| | } | | } |
| | | | |
| − | | + | ul, ol { |
| − | /*LAYOUT */ | + | list-style: none; |
| − | .column {
| + | |
| − | padding: 10px 0px;
| + | |
| − | float:left;
| + | |
| | } | | } |
| | | | |
| − | | + | a { |
| − | | + | text-decoration: none; |
| − | .full_size { | + | |
| − | width:100%;
| + | |
| | } | | } |
| | | | |
| − | .full_size img { | + | a:hover{ text-decoration: none;} |
| − | padding: 10px 15px;
| + | |
| − | width:97.5%;
| + | |
| − | }
| + | |
| | | | |
| − | .half_size { | + | input, textarea { |
| − | width: 50%;
| + | border: none; |
| | + | outline: none; |
| | + | resize: none; |
| | + | -webkit-appearance: none; |
| | } | | } |
| | | | |
| − | .half_size img { | + | img { |
| − | padding: 10px 15px;
| + | vertical-align: middle; |
| − | width: 93%;
| + | display: block; |
| | } | | } |
| | | | |
| − | | + | table { |
| − | .third_size { | + | border-collapse: collapse; |
| − | width: 33.3%;
| + | |
| | } | | } |
| − | .third_size img {
| |
| − | padding: 10px 15px;
| |
| − | width: 92%;
| |
| − | }
| |
| − |
| |
| − |
| |
| | | | |
| − | .fourth_size { | + | /*cls float*/ |
| − | width: 25%;
| + | .clearfix:before, .clearfix:after { |
| | + | content: ""; |
| | + | display: table; |
| | } | | } |
| − | .fourth_size img { | + | .clearfix:after { |
| − | padding: 10px 15px;
| + | clear: both; |
| − | width: 92%;
| + | |
| | } | | } |
| − | | + | .clearfix { |
| − | | + | *zoom: 1; /*IE/7/6*/ |
| − | | + | |
| − | | + | |
| − | .clear { | + | |
| − | clear:both;
| + | |
| | } | | } |
| | | | |
| − | .clear.extra_space {
| + | /*use*/ |
| − | height: 30px;
| + | s, i, em { |
| − | }
| + | font-style: normal; |
| − | | + | text-decoration: none; |
| − | | + | |
| − | .line_divider {
| + | |
| − | border-top: 1px solid #d3d3d3;
| + | |
| − | width: 98%;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .highlight {
| + | |
| − | padding: 15px 0px;
| + | |
| − | margin: 0px 15px;
| + | |
| | } | | } |
| | | | |
| − | | + | /*igem*/ |
| − | .highlight.link_box:hover{
| + | body{ min-width: 1024px; position: relative;} |
| − | background-color: #666666;
| + | #home_logo, #sideMenu,#bars_item,#top_title { display:none; } |
| − | -webkit-transition: all 0.4s ease;
| + | #sideMenu, #top_title, .patrollink {display:none;} |
| − | -moz-transition: all 0.4s ease;
| + | #content { width:100%; padding:0px; margin-top:-10px; margin-left:0px;} |
| − | -ms-transition: all 0.4s ease;
| + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
| − | -o-transition: all 0.4s ease; transition: all 0.4s ease;
| + | #top_menu_inside ul li{ line-height: 1.5em;} |
| − | }
| + | |
| − | | + | |
| − | .highlight.link_box a {
| + | |
| − | text-decoration: none;
| + | |
| − | color: black;
| + | |
| − | font-weight: 100;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .highlight.gray {
| + | |
| − | background-color: #f2f2f2;
| + | |
| − | }
| + | |
| − | | + | |
| − | .highlight.turquoise_top {
| + | |
| − | border-top: 4px solid #00bdcd;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .highlight.turquoise_border {
| + | |
| − | border: 4px solid #00bdcd;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .patrollink {display:none;}
| + | |
| − | | + | |
| − | | + | |
| − | .turquoise_full {
| + | |
| − | border: 4px solid #00bdcd;
| + | |
| − | }
| + | |
| − | | + | |
| − | .yellow_full {
| + | |
| − | border: 4px solid #ffe000;
| + | |
| − | }
| + | |
| − | | + | |
| − | .blue_full {
| + | |
| − | border: 4px solid #00bccc;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .highlight.news_item {
| + | |
| − | border: 2px solid #d3d3d3;
| + | |
| − | margin: auto;
| + | |
| − | height: auto;
| + | |
| − | overflow: auto;
| + | |
| − | width: 97%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .news_date {
| + | |
| − | font-style: italic;
| + | |
| − | display: inline-block;
| + | |
| − | color: #333333;
| + | |
| − | float: right;
| + | |
| − | padding-top: 5px;
| + | |
| − | padding-right: 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .expand_content.first{
| + | |
| − | float:left;
| + | |
| − | margin-right: -15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .expand_content.control_button {
| + | |
| − | font-weight: bold;
| + | |
| − | text-align: center;
| + | |
| − | border-radius: 50%;
| + | |
| − | float: left;
| + | |
| − | margin: 0px 5px;
| + | |
| − | border: 2px solid #00bdcd;
| + | |
| − | background-color:#00bdcd;
| + | |
| − | color:#ffffff;
| + | |
| − | width: 20px;
| + | |
| − | padding-bottom: 1px;
| + | |
| − | cursor:pointer;
| + | |
| − | }
| + | |
| − | | + | |
| − | .expand_content.control_button:hover {
| + | |
| − | color:#00bdcd;
| + | |
| − | background-color:#ffffff;
| + | |
| − | border: 2px solid #00bdcd;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .expand_content.control_button::before {
| + | |
| − | content: "+";
| + | |
| − | }
| + | |
| − | | + | |
| − | /* this is the icon for when the content is expanded */ | + | |
| − | .expand_content.control_button.less::before { | + | |
| − | content: "–";
| + | |
| − | }
| + | |
| − | | + | |
| − | .expand_content.more {
| + | |
| − | float:left;
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .button {
| + | |
| − | margin: auto;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 15px;
| + | |
| − | margin: 30px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .button a, #bodyContent a[href ^="https://"], .link-https { | + | |
| − | color: #000000 !important;
| + | |
| − | font-weight: bold;
| + | |
| − | margin: auto;
| + | |
| − | text-decoration: none !important;
| + | |
| − | background-color: #00bdcd;
| + | |
| − | padding: 10px 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .button a:hover , #bodyContent a[href ^="https://"]:hover, .link-https {
| + | |
| − | background-color: #000000;
| + | |
| − | color: #00bdcd !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .multiple_links a{
| + | |
| − | color: black !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .multiple_links a:hover {
| + | |
| − | color: #004789 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* image slider styling */
| + | |
| − | ul.image_slider {
| + | |
| − | list-style: none;
| + | |
| − | margin: 0px -19px;
| + | |
| − | padding:0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image_slider ul { | + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .column.full_size.navigation_support {
| + | |
| − | padding: 0px 0px 0px 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navigation_button {
| + | |
| − | background-color: #ffffff;
| + | |
| − | border: 2px solid #5e5f5f;
| + | |
| − | color: #5e5f5f;
| + | |
| − | max-width: 40px;
| + | |
| − | text-align: center;
| + | |
| − | padding: 3px 0px;
| + | |
| − | font-size: 13px;
| + | |
| − | cursor: pointer;
| + | |
| − | border-radius: 50%;
| + | |
| − | float: left;
| + | |
| − | width: 25px;
| + | |
| − | margin-right: 10px;
| + | |
| − | margin-top: 3px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .navigation_button.arrow_navigation {
| + | |
| − | border: 2px solid white;
| + | |
| − | margin-top: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navigation_button.arrow_navigation:hover {
| + | |
| − | color: #00bdcd;
| + | |
| − | background-color: #ffffff;
| + | |
| − | border: 2px solid white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navigation_button.arrow_navigation.previous_item::before {
| + | |
| − | content: url(https://static.igem.org/mediawiki/2017/f/ff/Previous_demo_icon-14-21.svg);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .navigation_button.arrow_navigation.next_item::before {
| + | |
| − | content: url(https://static.igem.org/mediawiki/2017/1/12/Next_demo_icon-14-21-22.svg);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .navigation_button:hover , .title_extra:hover + .navigation_button, .navigation_button.active_navigation_button:hover {
| + | |
| − | background-color: #00bdcd;
| + | |
| − | color: #ffffff;
| + | |
| − | border: 2px solid #00bdcd;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .title_extra {color: #5e5f5f; float:left; padding: 7px 0px; margin-right: 20px; display:none;}
| + | |
| − | | + | |
| − | .title_extra.main_item { display:block; text-decoration: underline;}
| + | |
| − | .title_extra.support_item {display:block;margin-right:0px; margin-left: -17px;}
| + | |
| − | .title_extra.support_item:hover { color: #5e5f5f;}
| + | |
| − | .navigation_button:hover + .title_extra , .title_extra:hover { color: #00bdcd; display:block; }
| + | |
| − | | + | |
| − | .navigation_button.active_navigation_button {
| + | |
| − | background-color: #d3d3d3;
| + | |
| − | color: #5e5f5f;
| + | |
| − | border: 2px solid #5e5f5f;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .igem_menu_wrapper::-webkit-scrollbar {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*STYLING */ | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* styling for the titles */
| + | |
| − | .igem_content_wrapper h1, .igem_content_wrapper h2 {
| + | |
| − | padding:5px 15px;
| + | |
| − | border-bottom:0px;
| + | |
| − | color: #00bdcd;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 {
| + | |
| − | padding:5px 15px;
| + | |
| − | border-bottom:0px;
| + | |
| − | color: #000000;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* font and text */
| + | |
| − | .igem_content_wrapper p {
| + | |
| − | padding:0px 15px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family:Tahoma, Geneva, sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Links */
| + | |
| − | .igem_content_wrapper a {
| + | |
| − | font-weight: bold;
| + | |
| − | text-decoration: underline;
| + | |
| − | text-decoration-color:#004789;
| + | |
| − | color: #004789;
| + | |
| − | -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;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* hover for the links */
| + | |
| − | .igem_content_wrapper a:hover {
| + | |
| − | text-decoration:none;
| + | |
| − | color:#000000;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* non numbered lists */
| + | |
| − | .igem_content_wrapper ul {
| + | |
| − | padding:0px 20px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family:Tahoma, Geneva, sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* numbered lists */
| + | |
| − | .igem_content_wrapper ol {
| + | |
| − | padding:0px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family:Tahoma, Geneva, sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Table */
| + | |
| − | .igem_content_wrapper table {
| + | |
| − | width: 97%;
| + | |
| − | margin:15px 10px;
| + | |
| − | border: 1px solid #d3d3d3;
| + | |
| − | border-collapse: collapse;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* table cells */
| + | |
| − | .igem_content_wrapper td {
| + | |
| − | padding: 10px;
| + | |
| − | vertical-align: text-top;
| + | |
| − | border: 1px solid #d3d3d3;
| + | |
| − | border-collapse: collapse;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* table headers */
| + | |
| − | .igem_content_wrapper th {
| + | |
| − | padding: 10px;
| + | |
| − | vertical-align: text-top;
| + | |
| − | border: 1px solid #d3d3d3;
| + | |
| − | border-collapse: collapse;
| + | |
| − | background-color:#f2f2f2;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .vertical_line {
| + | |
| − | position: absolute;
| + | |
| − | width: 5px;
| + | |
| − | background-color: #ccc;
| + | |
| − | left: 20px;
| + | |
| − | height: 100%;
| + | |
| − | z-index: -1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .left_column {
| + | |
| − | width: 12%;
| + | |
| − | border: 4px solid #d3d3d3;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 25px;
| + | |
| − | float: left;
| + | |
| − | border-radius: 10px;
| + | |
| − | color: #666666;
| + | |
| − | padding: 4% 0;
| + | |
| − | font-weight: bold;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .left_column.month_access{
| + | |
| − | border: 4px solid #00bdcd;
| + | |
| − | | + | |
| − | color: #00bdcd;
| + | |
| − | font-size: 40px;
| + | |
| − | font-weight: bold;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | | + | |
| − | .left_column.month_access::before {
| + | |
| − | content: "-";
| + | |
| − | }
| + | |
| − | | + | |
| − | .left_column.month_access.plus::before {
| + | |
| − | content: "+";
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .left_column.month_access:hover {
| + | |
| − | background-color: #00bdcd;
| + | |
| − | color: white;
| + | |
| − | -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;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .right_column h1{
| + | |
| − | font-size: 40px;
| + | |
| − | padding: 15px 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .right_column {
| + | |
| − | padding: 10px 0px 15px 0px;
| + | |
| − | float: left;
| + | |
| − | width: 80%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .right_column.event_content {
| + | |
| − | border-top: 1px solid #d3d3d3;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | #all_menu_items{ display:block;}
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .full_size_image { margin-top:-55px; width:85%; }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /********************************* RESPONSIVE STYLING ********************************/
| + | |
| − | | + | |
| − | /* IF THE SCREEN IS LESS THAN 1400PX */
| + | |
| − | @media only screen and (max-width: 1400px) {
| + | |
| − | .long_menu_name { font-size: 10px;}
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* IF THE SCREEN IS LESS THAN 1200PX */
| + | |
| − | | + | |
| − | @media only screen and (max-width: 1200px) {
| + | |
| − | | + | |
| − | #content {width:100%; }
| + | |
| − | .igem_menu_wrapper {width:15%; right:0%;}
| + | |
| − | .highlight {padding:10px 0px;}
| + | |
| − | .load_menu_here, .menu_icon {display:none;}
| + | |
| − | ul.image_slider { padding:0px; width: 100%; margin: auto;}
| + | |
| − | .menu_item, .submenu_item, .sub_submenu_item, .menu_title { padding:9px 0px 7px 6%; font-size: 10px;}
| + | |
| − | .menu_item.hub_link, .submenu_item.with_submenu_items { width: 73.9%;}
| + | |
| − | .submenu > .submenu_access { font-size: 10px; padding: 8px 0px; }
| + | |
| − | .submenu_access{ font-size: 10px; padding: 10px 0px;}
| + | |
| − | #all_menu_items{ display:block;}
| + | |
| − | .full_size_image { margin-top:-55px; width:85%;}
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* IF THE SCREEN IS LESS THAN 885PX */
| + | |
| − | | + | |
| − | @media only screen and (max-width: 885px) {
| + | |
| − | | + | |
| − | .collapsable_menu_control, .menu_icon, .submenu_access { display:block;}
| + | |
| − | .load_menu_here, .menu_bottom_padding {display:none;}
| + | |
| − | .igem_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
| + | |
| − | .igem_content_wrapper {width:100%; margin-left:0px;}
| + | |
| − | .column.half_size, .column.third_size, .column.fourth_size {width:100%; }
| + | |
| − | .column img { width: 100%; padding: 5px 0px;}
| + | |
| − | .highlight {padding:15px 5px;}
| + | |
| − | .igem_menu_wrapper img { width: 30%; margin-left: 35%;}
| + | |
| − | .menu_item, .submenu_item, .sub_submenu_item, .menu_title, .long_menu_name { padding:10px 0px 10px 10%; font-size: 13px; }
| + | |
| − | .submenu > .submenu_access { font-size: 13px; padding: 10px 0px;}
| + | |
| − | .submenu_access{ font-size: 13px; padding: 12px 0px; }
| + | |
| − | .submenu_item { padding-left: 15%;}
| + | |
| − | .sub_submenu_item { padding-left: 20%;}
| + | |
| − | .menu_item {width:70%;}
| + | |
| − | .submenu_item.with_submenu_items {width: 65%;}
| + | |
| − | .menu_item.hub_link { width:50%;}
| + | |
| − | #all_menu_items {display:none;}
| + | |
| − | .full_size_image { margin-top: -30px; width:100%;}
| + | |
| − | } | + | |
| | | | |
| | </style> | | </style> |
| | + | <script type="text/javascript"> |
| | | | |
| | + | $("#HQ_page").removeAttr("id"); |
| | + | $("#globalWrapper").removeAttr("id"); |
| | + | $("#content").removeAttr("id"); |
| | + | $(".mw-content-ltr").removeAttr("class"); |
| | | | |
| − | | + | </script> |
| − | | + | <body> |
| − | <!--- THIS IS WHERE THE HTML BEGINS --->
| + | |
| − | | + | |
| − | | + | |
| − | <!-- This tells the browser that your page is responsive -->
| + | |
| − | | + | |
| − | <head>
| + | |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | |
| − | | + | |
| − | | + | |
| − | </head> | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="igem_menu_wrapper" > | + | |
| − | | + | |
| − | | + | |
| − | <div>
| + | |
| − | <a href="https://2017.igem.org/Main_Page">
| + | |
| − | <div class="logo_container">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/0/09/2017igem_demo_icon-13-22.svg"></a>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <div class="submenu_access less" id="main_menu_control"></div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="collapsable_menu_control"> MENU </div>
| + | |
| − | | + | |
| − | <div id="all_menu_items">
| + | |
| − | <div id="load_menu_here">
| + | |
| − | | + | |
| − | <div class="menu_is_loading">
| + | |
| − |
| + | |
| − | <div class="menu_title"> <b> Loading... </b></div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="igem_content_wrapper">
| + | |
| − | | + | |
| − | | + | |
| | </html> | | </html> |
