(187 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<script> | <script> | ||
Line 148: | Line 88: | ||
+ | |||
+ | <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-left:0px;} #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | #mw-content-text > p{ | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /**************************************************************** MENU ***************************************************************/ | ||
+ | /* Wrapper for the menu */ | ||
+ | .igem_2017_menu_wrapper { | ||
+ | width: 15%; | ||
+ | height:100vh; | ||
+ | position:fixed; | ||
+ | right:0%; | ||
+ | padding:0px; | ||
+ | float:right; | ||
+ | border-left: 1px solid #d3d3d3; | ||
+ | background-color:#dddddd; | ||
+ | text-align:left; | ||
+ | font-family:Tahoma, Geneva, sans-serif; | ||
+ | overflow-y: auto; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | /* this hides the scrollbar to keep view consistency */ | ||
+ | .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; | ||
+ | } | ||
+ | |||
+ | |||
+ | /***************************************************** CONTENT OF THE PAGE ****************************************************/ | ||
+ | |||
+ | /* Wrapper for the content */ | ||
+ | .igem_2017_content_wrapper { | ||
+ | width: 75%; | ||
+ | margin: 0 auto; | ||
+ | display:block; | ||
+ | float:left; | ||
+ | background-color:black; | ||
+ | font-family:Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | /********************************* HTML STYLING *********************************/ | ||
+ | #BACKGROUND { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/d/d9/Back_gray.png); | ||
+ | background-position: center center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: fixed; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | #wrapper { | ||
+ | width: 90%; | ||
+ | margin: 0 auto; | ||
+ | background-color: #ffffff; | ||
+ | padding-top:0; | ||
+ | padding-bottom:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* styling for the titles h1 h2 */ | ||
+ | h1{ | ||
+ | font-size: 300%; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | padding:35px 5px 15px 15px; | ||
+ | border-bottom: 0px; | ||
+ | color: #606060; | ||
+ | text-align: center; | ||
+ | line-height:120px; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 45px; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | padding:5px 15px; | ||
+ | border-bottom: 0px; | ||
+ | color:#606060; | ||
+ | text-align: left; | ||
+ | line-height:90px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* styling for the titles h3 h4 h6*/ | ||
+ | h3 { | ||
+ | font-size:300%; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | padding:5px 15px; | ||
+ | border-bottom:0px; | ||
+ | color: #606060; | ||
+ | margin-right:10%; | ||
+ | margin-left:10%; | ||
+ | line-height:60px; | ||
+ | } | ||
+ | h4 { | ||
+ | font-size:30px; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | padding:5px 15px; | ||
+ | border-bottom:0px; | ||
+ | color: #606060; | ||
+ | text-align: left; | ||
+ | line-height:60px; | ||
+ | } | ||
+ | |||
+ | h5 { | ||
+ | margin-left: 10%; | ||
+ | margin-right:10%; | ||
+ | font-size:200%; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | padding:5px 15px; | ||
+ | color: #78563d; | ||
+ | text-align: left; | ||
+ | line-height:60px; | ||
+ | border-bottom:1px solid #78563d; | ||
+ | } | ||
+ | h6 { | ||
+ | border-bottom:1px solid #78563d; | ||
+ | margin-left:10%; | ||
+ | margin-right:10%; | ||
+ | font-size:150%; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | padding:5px 15px; | ||
+ | border-bottom:0px; | ||
+ | color: #606060; | ||
+ | text-align: left; | ||
+ | line-height:60px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* font and text */ | ||
+ | p { | ||
+ | color:#606060; | ||
+ | margin-right:10%; | ||
+ | margin-left:10%; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | padding: 0px 15px; | ||
+ | font-size: 140%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | /* Links */ | ||
+ | a { color:#78563d; | ||
+ | -ebkit-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 */ | ||
+ | a:hover { | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | |||
+ | /* top banner list */ | ||
+ | #header{ | ||
+ | background-color:#606060; | ||
+ | position:fixed; | ||
+ | width:90%; | ||
+ | margin-left:5%; | ||
+ | margin-right:0; | ||
+ | z-index:2; | ||
+ | } | ||
+ | ul.nv { | ||
+ | position:fixed; | ||
+ | width:100%; | ||
+ | min-height: 40px; | ||
+ | position: relative; | ||
+ | font-size: 0px; | ||
+ | margin-left:0; | ||
+ | } | ||
+ | |||
+ | ul.nv li { | ||
+ | width: 10%; | ||
+ | display: inline-block; | ||
+ | list-style-type: none; | ||
+ | position: relative; | ||
+ | vertical-align: center; | ||
+ | text-align: center; | ||
+ | font-size:20px; | ||
+ | letter-spacing: normal; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | margin-bottom:0px; | ||
+ | white-space:nowrap; | ||
+ | } | ||
+ | |||
+ | ul.nv a { | ||
+ | background-color: #606060; | ||
+ | color: white; | ||
+ | line-height: 60px; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | font-weight: bold; | ||
+ | display: block; | ||
+ | } | ||
+ | ul.nv a:hover { | ||
+ | background-color: #aade29; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | ul.nv li:hover ul { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | ul.nv ul{ | ||
+ | width: 120%; | ||
+ | display: none; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | position: absolute; | ||
+ | white-space:normal; | ||
+ | font-size:0; | ||
+ | } | ||
+ | |||
+ | ul.nv ul li { | ||
+ | width: 120%; | ||
+ | border-top: 1px solid #ffffff; | ||
+ | text-align : center; | ||
+ | font-family: serif, 'Times New Roman'; | ||
+ | white-space:normal; | ||
+ | font-size:15px; | ||
+ | } | ||
+ | ul.nv ul li a { | ||
+ | line-height: 1.5em; | ||
+ | text-align: center; | ||
+ | padding-left: 5px; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | ul.nv ul li a:hover { | ||
+ | background-color: #aade29; | ||
+ | color: #000000; | ||
+ | } | ||
+ | #blank{ | ||
+ | margin-right:30%; | ||
+ | } | ||
+ | |||
+ | /* non numbered lists */ | ||
+ | .igem_2017_content_wrapper ul { | ||
+ | padding:0px 20px; | ||
+ | font-size: 13px; | ||
+ | font-family:Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* numbered lists */ | ||
+ | .igem_2017_content_wrapper ol { | ||
+ | padding:0px; | ||
+ | font-size: 13px; | ||
+ | font-family:Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* 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; | ||
+ | } | ||
+ | p{ | ||
+ | font-size: 140%; | ||
+ | } | ||
+ | </style> | ||
Latest revision as of 15:36, 1 November 2017