Team:Arizona State/Template:Header
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <html> | + | <html lang="en"> |
- | < | + | <!-- Made by Abhi & Jordan with help from the "https://2011.igem.org/Team:Imperial_College_London" page --> |
- | + | <head> | |
- | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
- | + | <style type="text/css"> | |
- | + | ||
#top-section { | #top-section { | ||
width: 975px; | width: 975px; | ||
Line 12: | Line 11: | ||
} | } | ||
- | #p-logo { | + | #p-logo { display: none; } |
- | + | #search-controls { display: none; } | |
- | + | .firstHeading { display: none; } | |
- | #search-controls { | + | body { background-color:#E9EEE9; } |
- | display: none;} | + | #contentSub { margin: 0 0 0 0; } |
- | + | iframe { padding: 10px 20px 10px 20px; } | |
+ | |||
.right-menu li a, .right-menu li a:hover { | .right-menu li a, .right-menu li a:hover { | ||
color: #3c6b27; | color: #3c6b27; | ||
Line 23: | Line 23: | ||
} | } | ||
- | + | #iGEMLogo { | |
- | + | position:absolute; | |
+ | top:30px; | ||
+ | left:30px; | ||
+ | } | ||
- | # | + | #ProjectTitle { |
position: relative; | position: relative; | ||
text-align:center; | text-align:center; | ||
} | } | ||
- | # | + | #ASULogo { |
- | position:absolute; | + | position: absolute; |
top:30px; | top:30px; | ||
- | + | right:30px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Line 61: | Line 59: | ||
line-height: 1.5em; | line-height: 1.5em; | ||
z-index: 2; | z-index: 2; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 164: | Line 158: | ||
.newouterbox { | .newouterbox { | ||
- | background-color:#FF944D;border:1px solid #CCCCCC;margin:20px;padding-bottom:0px; | + | background-color:#FF944D; |
+ | border:1px solid #CCCCCC; | ||
+ | margin:20px; | ||
+ | padding-bottom:0px; | ||
} | } | ||
.newinnerbox { | .newinnerbox { | ||
- | border:1px solid #CCCCCC;margin:10px 20px 20px 20px;padding-top:0px;padding-bottom:13px;background-color:#ffffff; | + | border:1px solid #CCCCCC; |
+ | margin:10px 20px 20px 20px; | ||
+ | padding-top:0px; | ||
+ | padding-bottom:13px; | ||
+ | background-color:#ffffff; | ||
} | } | ||
.newtext { | .newtext { | ||
- | text-align:center;background-color:#FF944D;color:#000000; | + | text-align:center; |
+ | background-color:#FF944D; | ||
+ | color:#000000; | ||
} | } | ||
Line 200: | Line 203: | ||
text-align: justify; | text-align: justify; | ||
padding: 5px 20px 0px 20px; | padding: 5px 20px 0px 20px; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 218: | Line 217: | ||
} | } | ||
- | + | /*** Start of Styling for menu bar ***/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
/*** ESSENTIAL STYLES ***/ | /*** ESSENTIAL STYLES ***/ | ||
- | a.collapseLink { | + | a.collapseLink { |
- | + | font-weight:bold; | |
- | + | font-size:1em; | |
- | + | color:#225323; | |
- | } | + | } |
- | .sf-menu, .sf-menu * { | + | .sf-menu, .sf-menu * { |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | list-style: none; | |
- | } | + | } |
- | .sf-menu { | + | .sf-menu { |
- | + | line-height: 1.0; | |
- | } | + | } |
- | .sf-menu ul { | + | .sf-menu ul { |
- | + | position: absolute; | |
- | + | top: -999em; | |
- | + | width: 195px; /* left offset of submenus need to match (see below) */ | |
- | } | + | } |
- | .sf-menu ul li { | + | .sf-menu ul li { |
- | + | width: 100%; | |
- | } | + | } |
- | .sf-menu li:hover { | + | .sf-menu li:hover { |
- | + | visibility: inherit; /* fixes IE7 'sticky bug' */ | |
- | } | + | } |
- | .sf-menu li { | + | .sf-menu li { |
- | + | float: left; | |
- | + | position: relative; | |
- | + | width: 195px; | |
- | } | + | } |
- | .sf-menu a { | + | .sf-menu a { |
- | + | display: block; | |
- | + | position: relative; | |
- | } | + | } |
- | .sf-menu li:hover ul, | + | .sf-menu li:hover ul, .sf-menu li.sfHover ul { |
- | .sf-menu li.sfHover ul { | + | left: 0; |
- | + | top: 2.5em; /* match top ul list item height */ | |
- | + | z-index: 99; | |
- | + | } | |
- | } | + | ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { |
- | ul.sf-menu li:hover li ul, | + | top: -999em; |
- | ul.sf-menu li.sfHover li ul { | + | } |
- | + | ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { | |
- | } | + | left: 15.3em; /* match ul width */ |
- | ul.sf-menu li li:hover ul, | + | top: 0; |
- | ul.sf-menu li li.sfHover ul { | + | } |
- | + | ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { | |
- | + | top: -999em; | |
- | } | + | } |
- | ul.sf-menu li li:hover li ul, | + | ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { |
- | ul.sf-menu li li.sfHover li ul { | + | left: 10em; /* match ul width */ |
- | + | top: 0; | |
- | } | + | } |
- | ul.sf-menu li li li:hover ul, | + | |
- | ul.sf-menu li li li.sfHover ul { | + | |
- | + | ||
- | + | ||
- | } | + | |
/*** DEMO SKIN ***/ | /*** DEMO SKIN ***/ | ||
- | .sf-menu { | + | .sf-menu { |
- | + | float: left; | |
- | + | margin-bottom: 1em; | |
- | } | + | } |
- | .sf-menu a { | + | .sf-menu a { |
- | + | border-left: 1px solid #fff; | |
- | + | border-top: 1px solid #826554; | |
- | + | padding: 0.37em 1em 0.37em 1em; | |
- | + | text-decoration:none; | |
font-family: 'helveticaneue', sans-serif; | font-family: 'helveticaneue', sans-serif; | ||
font-size:1.3em; | font-size:1.3em; | ||
- | } | + | } |
- | + | .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ | |
- | .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ | + | color: #efefef; |
- | + | } | |
- | } | + | .sf-menu li, .sf-menu li li, .sf-menu li li li { |
- | .sf-menu li | + | background: #990000; |
- | + | } | |
- | + | .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { | |
- | + | background: #b30000; | |
- | .sf-menu li li | + | outline: 0; |
- | + | } | |
- | + | ||
- | .sf-menu li li li { | + | |
- | + | ||
- | } | + | |
- | .sf-menu li:hover, .sf-menu li.sfHover, | + | |
- | .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { | + | |
- | + | ||
- | + | ||
- | } | + | |
/*** arrows **/ | /*** arrows **/ | ||
- | .sf-menu a.sf-with-ul { | + | .sf-menu a.sf-with-ul { |
- | + | cursor: default; | |
- | + | padding-right: 2.25em; | |
- | + | min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ | |
- | } | + | } |
- | .sf-sub-indicator { | + | .sf-sub-indicator { |
- | + | position: absolute; | |
- | + | display: block; | |
- | + | right: .75em; | |
- | + | top: 1.05em; /* IE6 only */ | |
- | + | width: 10px; | |
- | + | height: 10px; | |
- | + | text-indent: -999em; | |
- | + | overflow: hidden; | |
- | + | background: url('https://static.igem.org/mediawiki/2011/2/2f/ICL_MenuArrow.png') no-repeat -10px -100px; | |
- | } | + | /* 8-bit indexed alpha png. IE6 gets solid image only */ |
- | a > .sf-sub-indicator { /* give all except IE6 the correct values */ | + | } |
- | + | a > .sf-sub-indicator { /* give all except IE6 the correct values */ | |
- | + | top: .8em; | |
- | } | + | background-position: 0 -100px; /* use translucent arrow for modern browsers*/ |
+ | } | ||
/* apply hovers to modern browsers */ | /* apply hovers to modern browsers */ | ||
- | a:focus > .sf-sub-indicator, | + | a:focus > .sf-sub-indicator, |
- | a:hover > .sf-sub-indicator, | + | a:hover > .sf-sub-indicator, |
- | a:active > .sf-sub-indicator, | + | a:active > .sf-sub-indicator, |
- | li:hover > a > .sf-sub-indicator, | + | li:hover > a > .sf-sub-indicator, |
- | li.sfHover > a > .sf-sub-indicator { | + | li.sfHover > a > .sf-sub-indicator { |
- | + | background-position: -10px -100px; /* arrow hovers for modern browsers*/ | |
- | } | + | } |
/* point right for anchors in subs */ | /* point right for anchors in subs */ | ||
- | .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } | + | .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } |
- | .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } | + | .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } |
/* apply hovers to modern browsers */ | /* apply hovers to modern browsers */ | ||
- | .sf-menu ul a:focus > .sf-sub-indicator, | + | .sf-menu ul a:focus > .sf-sub-indicator, |
- | .sf-menu ul a:hover > .sf-sub-indicator, | + | .sf-menu ul a:hover > .sf-sub-indicator, |
- | .sf-menu ul a:active > .sf-sub-indicator, | + | .sf-menu ul a:active > .sf-sub-indicator, |
- | .sf-menu ul li:hover > a > .sf-sub-indicator, | + | .sf-menu ul li:hover > a > .sf-sub-indicator, |
- | .sf-menu ul li.sfHover > a > .sf-sub-indicator { | + | .sf-menu ul li.sfHover > a > .sf-sub-indicator { |
- | + | background-position: -10px 0; /* arrow hovers for modern browsers*/ | |
- | } | + | } |
/*** shadows for all but IE6 ***/ | /*** shadows for all but IE6 ***/ | ||
- | .sf-shadow ul { | + | .sf-shadow ul { |
- | + | background: url('https://static.igem.org/mediawiki/2011/9/9f/ICL_Shadow.png') no-repeat bottom right; | |
- | + | padding: 0 8px 9px 0; | |
- | + | -moz-border-radius-bottomleft: 17px; | |
- | + | -moz-border-radius-topright: 17px; | |
- | + | -webkit-border-top-right-radius: 17px; | |
- | + | -webkit-border-bottom-left-radius: 17px; | |
- | } | + | } |
- | .sf-shadow ul.sf-shadow-off { | + | .sf-shadow ul.sf-shadow-off { |
- | + | background: transparent; | |
- | } | + | } |
- | + | </style> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> | ||
+ | </script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Imperial_College_London/hoverIntent?action=raw&ctype=text/js"> | ||
+ | </script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Imperial_College_London/superfishjs?action=raw&ctype=text/js"> | ||
+ | </script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Imperial_College_London/magnifier?action=raw&ctype=text/js"> | ||
/*********************************************** | /*********************************************** | ||
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) | * jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) | ||
Line 419: | Line 365: | ||
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more | * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more | ||
***********************************************/ | ***********************************************/ | ||
+ | </script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 450: | Line 397: | ||
}); | }); | ||
</script> | </script> | ||
- | </head> | + | </head> |
<body> | <body> | ||
+ | <a name="top"></a> | ||
+ | <div id='iGEMLogo'> | ||
+ | <a href='https://2012.igem.org/Main_Page'> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/d/d6/IGEM_official_logo.png" style="width:120px;" /> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div id='ProjectTitle'> | ||
+ | <a href='https://2012.igem.org/Team:Arizona_State'> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/d/db/2012_Project_logo.png" style="width:550px;" /> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div id='ASULogo'> | ||
+ | <img src="https://www.asu.edu/asuthemes/3.0/images/asu_logo.png" /> | ||
+ | </div> | ||
+ | |||
+ | <div id="BackToTop"> | ||
+ | <a href="#top"> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/2/2d/ArrowColorChanged.png" width="50px" /> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div id="Sitemap"> | ||
+ | <a href='https://2012.igem.org/Team:Arizona_State/Sitemap'> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/3/30/SiteMapColorChange.png" width="100px" /> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
<div id='menucontainer'> | <div id='menucontainer'> | ||
<ul class="sf-menu sf-navbar"> | <ul class="sf-menu sf-navbar"> | ||
- | <li> | + | <li><a class="sf-with-ul" href="#">Project<span class="sf-sub-indicator"> »</span></a> |
- | + | <ul> | |
- | + | <li><a href="https://2012.igem.org/Team:Arizona_State">Home</a> </li> | |
- | + | ||
<li><a href="https://2012.igem.org/Team:Arizona_State/Problem">Problem</a> </li> | <li><a href="https://2012.igem.org/Team:Arizona_State/Problem">Problem</a> </li> | ||
<li><a href="https://2012.igem.org/Team:Arizona_State/Overview">Overview</a> </li> | <li><a href="https://2012.igem.org/Team:Arizona_State/Overview">Overview</a> </li> | ||
Line 466: | Line 441: | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li> | + | |
- | + | <li><a href="https://2012.igem.org/Team:Arizona_State/Team">Team</a> | |
- | + | </li> | |
- | + | ||
- | <li> | + | <li><a class="sf-with-ul" href="#">Results<span class="sf-sub-indicator"> »</span></a> |
- | + | ||
<ul> | <ul> | ||
<li><a href="https://2012.igem.org/Team:Arizona_State/Data">Data</a> </li> | <li><a href="https://2012.igem.org/Team:Arizona_State/Data">Data</a> </li> | ||
Line 480: | Line 453: | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li> | + | <li><a class="sf-with-ul" href="#">Human Practices<span class="sf-sub-indicator"> »</span></a> |
- | + | ||
<ul> | <ul> | ||
<li><a href="https://2012.igem.org/Team:Arizona_State/University">University</a> </li> | <li><a href="https://2012.igem.org/Team:Arizona_State/University">University</a> </li> | ||
Line 489: | Line 461: | ||
</li> | </li> | ||
- | <li> | + | <li><a class="sf-with-ul" href="#">Extras<span class="sf-sub-indicator"> »</span></a> |
- | + | <ul> | |
- | <ul> | + | |
- | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
Line 498: | Line 468: | ||
</div> | </div> | ||
</body> | </body> | ||
- | |||
</html> | </html> |
Revision as of 19:27, 23 July 2012