Template:Team:UW/CSS
From 2014.igem.org
(Difference between revisions)
(Retabbed / reorganized template) |
|||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | |||
+ | <!-- --> | ||
+ | <!-- CSS --> | ||
+ | <!-- --> | ||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
#contentSub, #footer-box, #catlinks, #search-controls,#p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | #contentSub, #footer-box, #catlinks, #search-controls,#p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | ||
.firstHeading { | .firstHeading { | ||
- | + | height:2px; | |
- | + | visibility:hidden; | |
} | } | ||
Line 12: | Line 17: | ||
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/ | #top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/ | ||
- | + | background-color: #383838; | |
- | + | border: 0 none; | |
- | + | height: 14px; | |
- | + | z-index: 100; | |
- | + | top: 0; | |
- | + | position: fixed; | |
- | + | width: 975px; | |
- | + | left: 50%; | |
- | + | margin-left: -487px; | |
} | } | ||
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/ | #menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/ | ||
- | + | color: #727272; | |
- | + | text-decoration: none; | |
- | + | background-color: transparent; | |
} | } | ||
- | body { | + | body { |
- | + | background-color: #fff; | |
} | } | ||
#globalWrapper, #content { /*-- changes default wiki settings --*/ | #globalWrapper, #content { /*-- changes default wiki settings --*/ | ||
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | border: 0px; | |
- | + | background-color: transparent; | |
- | + | margin: 0px; | |
- | + | padding: 0px; | |
} | } | ||
html, body, .wrapper { /*-- changes default wiki settings --*/ | html, body, .wrapper { /*-- changes default wiki settings --*/ | ||
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | background: File:Washington_background.JPG no-repeat center center fixed; | |
- | + | -webkit-background-size: cover; | |
- | + | -moz-background-size: cover; | |
- | + | -o-background-size: cover; | |
- | + | background-size: cover; | |
- | + | z-index: -6; | |
} | } | ||
#contentcontainer { /*-- creates container for all content on page --*/ | #contentcontainer { /*-- creates container for all content on page --*/ | ||
- | + | font-family: Arial, Helvetica, sans-serif; | |
- | + | font-weight: normal; | |
- | + | font-size: 14px; | |
- | + | color: #414141; | |
- | + | width: 960px; | |
- | + | margin-left: auto; | |
- | + | margin-right: auto; | |
- | + | background-color: #transparent; | |
- | + | margin-top: 0px; | |
} | } | ||
- | .sidemenu, .sidemenu li { | + | .sidemenu, .sidemenu li { |
- | + | list-style-type: none; | |
- | + | list-style-image: none; | |
- | + | font-family: verdana; | |
- | + | text-decoration: none; | |
- | + | color:#000; | |
- | + | font-size: 14px; | |
} | } | ||
Line 78: | Line 83: | ||
.sidemenu a { | .sidemenu a { | ||
- | + | text-decoration:none; | |
- | + | color: #000; | |
- | + | display: block; | |
- | + | width: 180px; | |
- | + | height: 100%; | |
- | + | padding: 3px 5px; | |
- | + | transition: .25s ease-in-out; | |
- | + | -moz-transition: .25s ease-in-out; | |
- | + | -webkit-transition: .25s ease-in-out; | |
- | } | + | } |
.sidemenu a.greyout { color: #909090; } | .sidemenu a.greyout { color: #909090; } | ||
.sidemenu a:hover { | .sidemenu a:hover { | ||
- | + | color:#666; | |
- | + | background-color: #d9f5aa; | |
} | } | ||
Line 101: | Line 106: | ||
div.underconst | div.underconst | ||
{ | { | ||
- | padding:10px; | + | padding:10px; |
- | border-radius:5px; | + | border-radius:5px; |
- | background-color:pink; | + | background-color:pink; |
- | text-align:center; | + | text-align:center; |
} | } | ||
Line 123: | Line 128: | ||
.newsTitle { | .newsTitle { | ||
- | + | display: block; | |
- | + | color: #414141; | |
- | + | font-size: 25px; | |
- | + | font-family: Georgia, Times, "Times New Roman", serif; | |
- | + | padding: 10px 15px 5px 10px; | |
- | + | border-bottom: 1px solid #ccc; | |
- | + | margin-bottom: 0px; | |
} | } | ||
.newsItem { | .newsItem { | ||
- | + | border-bottom: 1px solid #ccc; | |
- | + | display: block; | |
- | + | padding: 5px 15px 0px 10px; | |
- | + | margin-bottom: 0px; | |
} | } | ||
.newsItem h3 { | .newsItem h3 { | ||
- | + | width: auto; | |
- | + | display: inline; | |
- | + | font-size: 14px; | |
- | + | font-family: Arial, Helvetica, sans-serif; | |
- | + | padding: 0px; | |
- | + | margin: 0px; | |
} | } | ||
.newsItem img { | .newsItem img { | ||
- | + | float: right; | |
- | + | clear: right; | |
- | + | width: 80px; | |
- | + | padding-left: 15px; | |
- | + | display: inline-block; | |
} | } | ||
.newsItem .newsDate { | .newsItem .newsDate { | ||
- | + | font-style: italic; | |
- | + | font-size: 14px; | |
- | + | display: inline-block; | |
- | + | color: #FFF; | |
- | + | float: right; | |
- | + | padding: 0px 0px 10px 15px; | |
} | } | ||
.newsItem p, .newsItem ul, .newsItem li { | .newsItem p, .newsItem ul, .newsItem li { | ||
- | + | padding: 0px; | |
- | + | margin-left: 20px; | |
- | + | font-size: 12px; | |
- | + | line-height: 1.2; | |
} | } | ||
Line 175: | Line 180: | ||
.annItem { | .annItem { | ||
- | + | border: 2px solid #414141; | |
- | + | display: block; | |
- | + | padding: 0px 15px 10px 10px; | |
- | + | margin-bottom: 18px; | |
- | + | position: relative; | |
- | + | height: 160px; | |
- | + | vertical-align: middle; | |
} | } | ||
.annItem .annCentered { | .annItem .annCentered { | ||
- | + | display: table-cell; | |
Line 191: | Line 196: | ||
- | + | vertical-align: middle; | |
- | + | height: 160px; | |
} | } | ||
.annCentered h3 { | .annCentered h3 { | ||
- | + | padding: 0px; | |
- | + | display: block; | |
- | + | margin-left: auto; | |
- | + | margin-right: auto; | |
- | + | text-align: center; | |
} | } | ||
.igemlogopos{ | .igemlogopos{ | ||
- | + | position:absolute; | |
- | + | right:-15px; | |
- | + | z-index:30; | |
- | + | top: 18px; | |
} | } | ||
Line 215: | Line 220: | ||
#igemuwmenu, #igemuwmenu ul { | #igemuwmenu, #igemuwmenu ul { | ||
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | list-style: none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #igemuwmenu { | |
- | + | width: 700px; | |
- | + | margin: 10px auto; | |
- | + | border: 3px solid #dfb42c; | |
- | + | background-color: #b8860b; | |
- | + | background-image: -moz-linear-gradient(#4b2e84, #85754d ); | |
- | + | background-image: -webkit-gradient(linear, left top, left bottom, from(#4b2e84), to(#85754d )); | |
- | + | background-image: -webkit-linear-gradient(#4b2e84, #85754d ); | |
- | + | background-image: -o-linear-gradient(#4b2e84, #85754d ); | |
- | + | background-image: -ms-linear-gradient(#4b2e84, #85754d ); | |
- | + | background-image: linear-gradient(#4b2e84, #85754d ); | |
- | + | -moz-border-radius: 6px; | |
- | + | -webkit-border-radius: 6px; | |
- | + | border-radius: 6px; | |
- | + | -moz-box-shadow: 0 1px 1px #fff, 0 1px 0 #666 inset; | |
- | + | -webkit-box-shadow: 0 1px 1px #fff, 0 1px 0 #666 inset; | |
- | + | box-shadow: 0 1px 1px #fff, 0 1px 0 #666 inset; | |
- | + | display: inline-block; | |
- | + | white-space: nowrap; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #igemuwmenu:before, | |
- | + | #igemuwmenu:after { | |
- | + | content: ""; | |
- | + | display: table; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #igemuwmenu:after { | |
- | + | clear: both; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #igemuwmenu { | |
+ | zoom:1; | ||
+ | } | ||
- | + | #igemuwmenu li { | |
- | + | border-right: 1px solid #222; | |
- | + | -moz-box-shadow: 1px 0 0 #444; | |
- | + | -webkit-box-shadow: 1px 0 0 #2E0854; | |
+ | box-shadow: 1px 0 0 #2E0854; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | white-space: nowrap; | ||
+ | } | ||
- | + | #igemuwmenu a { | |
- | + | padding: 12px 20px; | |
- | + | color: #dfb42c; | |
- | + | text-transform: uppercase; | |
- | + | font: bold 11.4px Arial, Helvetica; | |
+ | text-decoration: none; | ||
+ | text-shadow: 0 1px 0 #000; | ||
+ | display: inline-block; | ||
+ | white-block: nowrap; | ||
+ | } | ||
- | + | #igemuwmenu li:hover > a { | |
- | + | color: #fafafa; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | *html #igemuwmenu li a:hover { /* IE6 only */ | |
- | + | color: #fafafa; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #igemuwmenu ul { | |
- | + | margin: 20px 0 0 0; | |
- | + | _margin: 0; /*IE6 only*/ | |
- | + | opacity: 0; | |
- | + | visibility: hidden; | |
- | + | position: absolute; | |
- | + | top: 38px; | |
- | + | left: 0; | |
- | + | z-index: 1; | |
- | + | background: #fff; | |
+ | background: -moz-linear-gradient(#4b2e84, #85754d ); | ||
+ | background-image: -webkit-gradient(linear, left top, left bottom, from(#4b2e84), to(#85754d )); | ||
+ | background: -webkit-linear-gradient(#4b2e84, #85754d ); | ||
+ | background: -o-linear-gradient(#4b2e84, #85754d ); | ||
+ | background: -ms-linear-gradient(#4b2e84, #85754d ); | ||
+ | background: linear-gradient(#4b2e84, #85754d ); | ||
+ | -moz-box-shadow: 0 -1px rgba(255,255,255,1); | ||
+ | -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,1); | ||
+ | box-shadow: 0 -1px 0 rgba(255,255,255,1); | ||
+ | -moz-border-radius: 3px; | ||
+ | -webkit-border-radius: 3px; | ||
+ | border-radius: 3px; | ||
+ | -webkit-transition: all .2s ease-in-out; | ||
+ | -moz-transition: all .2s ease-in-out; | ||
+ | -ms-transition: all .2s ease-in-out; | ||
+ | -o-transition: all .2s ease-in-out; | ||
+ | transition: all .2s ease-in-out; | ||
+ | } | ||
- | + | #igemuwmenu li:hover > ul { | |
- | + | opacity: 1; | |
- | + | visibility: visible; | |
- | + | margin: 0; | |
- | + | } | |
- | + | ||
- | + | #igemuwmenu ul ul { | |
- | + | top: 0; | |
- | + | left: 150px; | |
- | + | margin: 0 0 0 20px; | |
- | + | _margin: 0; /*IE6 only*/ | |
- | + | -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); | |
- | + | -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); | |
- | + | box-shadow: -1px 0 0 rgba(255,255,255,1); | |
- | + | } | |
- | + | ||
- | + | #igemuwmenu ul li { | |
- | + | float: none; | |
- | + | display: block; | |
- | + | border: 0; | |
- | + | _line-height: 0; /*IE6 only*/ | |
- | + | -moz-box-shadow: 0 1px 0 #b8860b, 0 2px 0 #fff; | |
+ | -webkit-box-shadow: 0 1px 0 #b8860b, 0 2px 0 #fff; | ||
+ | box-shadow: 0 1px 0 #b8860b, 0 2px 0 #fff; | ||
+ | } | ||
+ | #igemuwmenu ul li.active { | ||
+ | float: none; | ||
+ | display: block; | ||
+ | border: 0; | ||
+ | _line-height: 0; /*IE6 only*/ | ||
+ | -moz-box-shadow: 0 1px 0 #b8860b, 0 2px 0 #fff; | ||
+ | -webkit-box-shadow: 0 1px 0 #b8860b, 0 2px 0 #fff; | ||
+ | box-shadow: 0 1px 0 #b8860b, 0 2px 0 #fff; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | #igemuwmenu ul li:last-child { | |
- | + | -moz-box-shadow: none; | |
- | + | -webkit-box-shadow: none; | |
+ | box-shadow: none; | ||
+ | } | ||
- | + | #igemuwmenu ul a { | |
- | + | padding: 10px; | |
- | + | width: 130px; | |
- | + | _height: 10px; /*IE6 only*/ | |
+ | display: block; | ||
+ | white-space: nowrap; | ||
+ | float: none; | ||
+ | text-transform: none; | ||
+ | } | ||
- | + | #igemuwmenu ul a.selected { | |
- | + | padding: 10px; | |
- | + | width: 130px; | |
+ | _height: 10px; /*IE6 only*/ | ||
+ | display: block; | ||
+ | white-space: nowrap; | ||
+ | float: none; | ||
+ | text-transform: none; | ||
+ | } | ||
- | + | #igemuwmenu ul a:hover { | |
- | + | background-color: #785D84; | |
- | + | background-image: -moz-linear-gradient(#94749a, #785D84); | |
- | + | background-image: -webkit-gradient(linear, left top, left bottom, from(#94749a), to(#785D84)); | |
+ | background-image: -webkit-linear-gradient(#94749a, #785D84); | ||
+ | background-image: -o-linear-gradient(#94749a, #785D84); | ||
+ | background-image: -ms-linear-gradient(#94749a, #785D84); | ||
+ | background-image: linear-gradient(#94749a, #785D84); | ||
+ | } | ||
- | + | #igemuwmenu ul li:first-child > a { | |
+ | -moz-border-radius: 3px 3px 0 0; | ||
+ | -webkit-border-radius: 3px 3px 0 0; | ||
+ | border-radius: 3px 3px 0 0; | ||
+ | } | ||
- | + | #igemuwmenu ul li:first-child > a:after { | |
- | + | content: ''; | |
- | + | position: absolute; | |
- | + | left: 40px; | |
- | + | top: -6px; | |
+ | border-left: 6px solid transparent; | ||
+ | border-right: 6px solid transparent; | ||
+ | border-bottom: 6px solid #2E0854; | ||
+ | } | ||
- | + | #igemuwmenu ul ul li:first-child a:after { | |
- | + | left: -6px; | |
- | + | top: 50%; | |
- | + | margin-top: -6px; | |
- | + | border-left: 0; | |
- | + | border-bottom: 6px solid transparent; | |
- | + | border-top: 6px solid transparent; | |
- | + | border-right: 6px solid #FFFFFF; | |
- | + | } | |
- | + | ||
- | + | #igemuwmenu ul li:first-child a:hover:after { | |
+ | border-bottom-color: #2E0854; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu ul li:last-child > a { | ||
+ | -moz-border-radius: 0 0 3px 3px; | ||
+ | -webkit-border-radius: 0 0 3px 3px; | ||
+ | border-radius: 0 0 3px 3px; | ||
+ | } | ||
+ | |||
+ | /* Mobile */ | ||
+ | #igemuwmenu-trigger { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 600px) { | ||
+ | |||
+ | /* nav-wrap */ | ||
+ | #igemuwmenu-wrap { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu-wrap * { | ||
+ | -moz-box-sizing: border-box; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | /* menu icon */ | ||
+ | #igemuwmenu-trigger { | ||
+ | display: block; /* show menu icon */ | ||
+ | height: 40px; | ||
+ | line-height: 40px; | ||
+ | cursor: pointer; | ||
+ | padding: 0 0 0 35px; | ||
+ | border: 1px solid #222; | ||
+ | color: #ffffff; | ||
+ | font-weight: bold; | ||
+ | background-color: #b8860b; | ||
+ | -moz-border-radius: 6px; | ||
+ | -webkit-border-radius: 6px; | ||
+ | border-radius: 6px; | ||
+ | -moz-box-shadow: 0 1px 1px #fff, 0 1px 0 #fff inset; | ||
+ | -webkit-box-shadow: 0 1px 1px #fff, 0 1px 0 #fff inset; | ||
+ | box-shadow: 0 1px 1px #fff, 0 1px 0 #fff inset; | ||
+ | } | ||
+ | |||
+ | /* main nav */ | ||
+ | #igemuwmenu { | ||
+ | margin: 0; padding: 10px; | ||
+ | position: absolute; | ||
+ | top: 40px; | ||
+ | width: 100%; | ||
+ | z-index: 1; | ||
+ | background-color: #2E0854; | ||
+ | display: none; | ||
+ | -moz-box-shadow: none; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu:after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: 25px; | ||
+ | top: -8px; | ||
+ | border-left: 8px solid transparent; | ||
+ | border-right: 8px solid transparent; | ||
+ | border-bottom: 8px solid #2E0854; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu ul { | ||
+ | position: static; | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | margin: 0; | ||
+ | background: none; | ||
+ | -moz-box-shadow: none; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu ul ul { | ||
+ | margin: 0 0 0 20px !important; | ||
+ | -moz-box-shadow: none; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu li { | ||
+ | position: static; | ||
+ | display: block; | ||
+ | float: none; | ||
+ | border: 0; | ||
+ | margin: 5px; | ||
+ | -moz-box-shadow: none; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu ul li{ | ||
+ | margin-left: 20px; | ||
+ | -moz-box-shadow: none; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu a{ | ||
+ | display: block; | ||
+ | float: none; | ||
+ | padding: 0; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu a:hover{ | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu ul a{ | ||
+ | padding: 0; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu ul a:hover{ | ||
+ | background: none; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu ul li:first-child a:after, | ||
+ | #igemuwmenu ul ul li:first-child a:after { | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 600px) { | ||
+ | #igemuwmenu { | ||
+ | display: block !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* iPad */ | ||
+ | .no-transition { | ||
+ | -webkit-transition: none; | ||
+ | -moz-transition: none; | ||
+ | -ms-transition: none; | ||
+ | -o-transition: none; | ||
+ | transition: none; | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #igemuwmenu li:hover > .no-transition { | ||
+ | display: block; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
Line 575: | Line 580: | ||
<!--welcome box --> | <!--welcome box --> | ||
- | < | + | <tr> |
- | + | <body><a href="https://2014.igem.org/Team:Washington"><img class="centerImg" src="https://static.igem.org/mediawiki/2014/f/fc/Washington_banner5.jpg" width="900" ></a><a href="https://2014.igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/94/Igemlogo_officiallogo.png" width="147" height="120" align="right" class="igemlogopos" position:="" absolute;="" top:="" 5em;="" align:="" right;="" ;="" z-index:7;"=""></a> | |
- | + | <p style="position: absolute; top: 5em; right: 25; width: 400px; padding: 4px; background-color: transparent; font-weight: bold; font-size: 30px; color: #FFFFFF;"> | |
- | + | ||
- | . | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | University of Washington iGEM 2014 | |
- | </ | + | </p> |
- | + | </tr> | |
- | + | <tr> <td colspan="3" height="5px"> </td></tr> | |
- | </ | + | <!-- end welcome box --> |
+ | <tr> | ||
+ | <!--navigation menu --> | ||
+ | <td align="left" colspan="3"> | ||
- | </tr> | + | <table width="100%"> |
+ | <tr heigth="15px"></tr> | ||
+ | <tr heigth="75px"> | ||
- | < | + | <nav id="igemuwmenu-wrap"> |
- | + | ||
- | + | ||
- | < | + | <ul id="igemuwmenu"> |
- | + | ||
- | < | + | <li><a href="https://2014.igem.org/Team:Washington">Home</a> |
- | < | + | <ul> |
- | < | + | <li><a href="https://2014.igem.org/Team:Washington">UW 2014</a></li> |
+ | <li><a href="https://2013.igem.org/Team:Washington">UW 2013</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Washington">UW 2012</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Washington">UW 2011</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:Washington">UW 2010</a></li> | ||
+ | <li><a href="https://2009.igem.org/Team:Washington">UW 2009</a></li> | ||
+ | <li><a href="https://2008.igem.org/Team:University_of_Washington">UW 2008</a></li> | ||
+ | <li><a href="https://2013.igem.org/Main_Page">iGEM Homepage</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
- | < | + | <li> |
+ | <a href="https://2014.igem.org/Team:Washington/Our_Project">Our Project</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Washington/Our_Project#Background">Background</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Washington/Our_Project#Systems">Our Systems</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Washington/Our_Project#Methods">Methods</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Washington/Our_Project#Results">Results</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Washington/Our_Project#Future">Future Plans</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Washington/Our_Project#Parts">Parts Submitted</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Washington/Our_Project#Sources">Scientific Sources</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
- | < | + | <li> |
+ | <a href="https://2014.igem.org/Team:Washington/Outreach">Outreach</a> | ||
- | + | </li> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </li> | + | |
- | <li> | + | <li> |
- | <a href="https://2014.igem.org/Team:Washington/ | + | <a href="https://2014.igem.org/Team:Washington/Protocols">Protocols</a> |
- | + | </li> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </li> | + | |
- | <li> | + | <li> |
- | <a href="https://2014.igem.org/Team:Washington/ | + | <a href="https://2014.igem.org/Team:Washington/Safety">Safety</a> |
+ | </li> | ||
- | </li> | + | <li> |
+ | <a href="https://2014.igem.org/Team:Washington/Our_Team">Our Team</a> | ||
+ | </li> | ||
- | < | + | </ul> |
- | + | </nav> | |
- | + | </tr> | |
- | + | </table> | |
- | + | </body> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | <!-- --> |
- | --> | + | <!-- Javascript --> |
- | < | + | <!-- --> |
- | < | + | <script> |
- | + | $(document).ready(function() { | |
- | + | function filterPath(string) { | |
+ | return string | ||
+ | .replace(/^\//,'') | ||
+ | .replace(/(index|default).[a-zA-Z]{3,4}$/,'') | ||
+ | .replace(/\/$/,''); | ||
+ | } | ||
+ | var locationPath = filterPath(location.pathname); | ||
+ | var scrollElem = scrollableElement('html', 'body'); | ||
- | + | $('a[href*=#]').each(function() { | |
- | + | var thisPath = filterPath(this.pathname) || locationPath; | |
- | + | if ( locationPath == thisPath | |
- | + | && (location.hostname == this.hostname || !this.hostname) | |
- | + | && this.hash.replace(/#/,'') ) { | |
- | + | var $target = $(this.hash), target = this.hash; | |
+ | if (target) { | ||
+ | var targetOffset = $target.offset().top; | ||
+ | $(this).click(function(event) { | ||
+ | event.preventDefault(); | ||
+ | $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { | ||
+ | location.hash = target; | ||
+ | }); | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | // use the first element that is "scrollable" | ||
+ | function scrollableElement(els) { | ||
+ | for (var i = 0, argLength = arguments.length; i <argLength; i++) { | ||
+ | var el = arguments[i], | ||
+ | $scrollElement = $(el); | ||
+ | if ($scrollElement.scrollTop()> 0) { | ||
+ | return el; | ||
+ | } else { | ||
+ | $scrollElement.scrollTop(1); | ||
+ | var isScrollable = $scrollElement.scrollTop()> 0; | ||
+ | $scrollElement.scrollTop(0); | ||
+ | if (isScrollable) { | ||
+ | return el; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | return []; | ||
+ | } | ||
- | + | }); | |
- | </ | + | </script> |
- | |||
</html> | </html> |
Revision as of 01:41, 16 October 2014
|