Template:Demos sifuentes
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | /*--Formatting to remove and alter wiki css defaults--*/ | ||
+ | #contentSub, .firstHeading, #footer-box, #catlinks, #search-controls { display:none;} | ||
+ | #top-section {padding-top: 0px; border: none;} | ||
+ | #globalWrapper, #content { width: 100%; background-color: #fff; border: none; margin: 0; padding: 0; position: relative;} | ||
+ | html, body { height: 100%; background: #fff;} | ||
+ | body {font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #333; background: #f0f0f0;} | ||
+ | #newcontainer { /*-- Footer specific edits http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ --*/ | ||
+ | width:975px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | position:relative; | ||
+ | min-height: 100%; | ||
+ | height: auto !important; | ||
+ | height: 100%; | ||
+ | border: 0px solid #000; | ||
+ | margin: 0 auto -250px; | ||
+ | color: #333; | ||
+ | } | ||
+ | /*--Footer stuff is here--*/ | ||
+ | .newfooter, .pushfooter {height: 235px; clear:both; margin-top: 15px;} | ||
+ | .newfooter {background: #f0f0f0; color: #000;} | ||
+ | #footerheader { width: 100%; background: #666;} | ||
+ | #footerheaderdesc { width: 975px; height: 50px; margin-left:auto; margin-right: auto; padding: 10px 0px 10px 0px;} | ||
+ | #footerheaderdesc img {display: block; position: relative; padding-right: 20px; float:left;} | ||
+ | #footerheaderdesc #igemtitle {display: block; position: relative; padding-right: 20px; padding-top: 10px; float:left; color: #fff; font-size: 1.8em; font-weight: bold; } | ||
+ | #footerheaderdesc #tagline {display: block; position: relative; padding-right: 20px; float:left; color: #fff; font-size: 1em;} | ||
+ | #newfooterbox {width: 975px; margin-right: auto; margin-left: auto; padding: 10px 0px 10px 0px;} | ||
+ | #newfooterbox a, #newfooterbox a:hover, #newfooterbox a:visited {color: #666; text-decoration:none;} | ||
+ | .footertext {width:200px; height: 140px; float: left; border-right: 2px solid #fff; position:relative;} | ||
+ | .footertext ul, #footertext ul li { list-style: none;} | ||
+ | .footerextra {float: right; position: relative; display: block; text-align: right; margin-top: 60px; color: #999;} | ||
+ | |||
+ | |||
+ | a, a:visited {color: #F37321; text-decoration:none;} | ||
+ | a:hover {color: #006633; text-decoration:none;} | ||
- | /*-- | + | /*--Menu Bar CSS--*/ |
- | # | + | #navbarcontainer { width: 100%; height: 35px; background: #666; margin-top:0px;} |
- | + | #navbar {width:975px; margin-left: auto; margin-right: auto; position:relative; height: 35px;} | |
- | + | #navbarsocial {float:right; padding-top: 4px;} | |
- | position: relative; | + | #flashylink {display: block; float: left; border: 0px solid #fff; color: #F37321; text-shadow: #000 1px 1px 1px; padding:3px; line-height: 100%; text-align: center; font-weight: bold; font-size: .8em; -webkit-border-radius: 3px; |
+ | -moz-border-radius: 3px; | ||
+ | border-radius: 3px; margin-right: 30px;} | ||
+ | #flashylink a:hover {color: #F37321;} | ||
+ | |||
+ | /*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/ | ||
+ | ul#topnav { | ||
+ | margin: 0; padding: 0; | ||
+ | float: left; | ||
+ | /*-- width: 960px;--*/ | ||
+ | list-style: none; | ||
+ | position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ | ||
+ | font-size: 1em; | ||
+ | background: #666/*--url(https://static.igem.org/mediawiki/igem.org/c/c8/Navbar-3.gif) repeat-x--*/; | ||
+ | z-index: 6; | ||
} | } | ||
- | + | ul#topnav li { | |
- | # | + | float: left; |
- | + | margin: 0; padding: 0; | |
- | margin | + | height: 35px; |
- | + | border-right: 1px solid #ccc; /*--Divider for each parent level links--*/ | |
- | height: | + | |
} | } | ||
- | + | ul#topnav li a { | |
- | + | padding: 10px 15px; | |
- | + | ||
- | + | ||
display: block; | display: block; | ||
- | + | color: #fff; | |
- | + | font-weight: bold; | |
- | + | letter-spacing: 1px; | |
- | + | text-shadow: #333 1px 1px 1px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
text-decoration: none; | text-decoration: none; | ||
- | |||
} | } | ||
- | . | + | ul#topnav li:hover { background: #006633 url(topnav_active.gif) repeat-x; } |
+ | ul#topnav li span { | ||
+ | float: left; | ||
+ | padding: 10px 0; | ||
position: absolute; | position: absolute; | ||
- | + | z-index:10; | |
- | width: | + | left: 0; top:35px; |
- | + | display: none; /*--Hide by default--*/ | |
- | + | width: 975px; | |
- | + | background: #006633; | |
- | + | color: #fff; | |
- | + | /*--Bottom right rounded corner--*/ | |
+ | -moz-border-radius-bottomright: 10px; | ||
+ | -khtml-border-radius-bottomright: 10px; | ||
+ | -webkit-border-bottom-right-radius: 10px; | ||
+ | /*--Bottom left rounded corner--*/ | ||
+ | -moz-border-radius-bottomleft: 10px; | ||
+ | -khtml-border-radius-bottomleft: 10px; | ||
+ | -webkit-border-bottom-left-radius: 10px; | ||
} | } | ||
- | + | ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ | |
- | + | ul#topnav li span a { display: inline; } | |
- | + | ul#topnav li span a:hover {text-decoration: underline;} | |
- | + | /*--Menu Ends Here--*/ | |
- | + | ||
- | + | .htitle { | |
- | + | display: block; | |
- | + | padding: 8px; | |
- | + | font-size: 1.2em; | |
- | - | + | |
- | + | ||
- | + | ||
font-weight: bold; | font-weight: bold; | ||
- | border: | + | border-bottom: solid 1px #ccc; |
- | - | + | margin-bottom: 0px; |
- | + | clear:both; | |
- | + | color: #000; | |
} | } | ||
- | . | + | .textboxes { |
- | + | display: block; | |
- | + | position: relative; | |
- | + | border: 1px solid #f0f0f0; | |
- | + | background: #f0f0f0; | |
- | + | border-bottom: 2px solid #ccc; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
-webkit-border-radius: 10px; | -webkit-border-radius: 10px; | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
border-radius: 10px; | border-radius: 10px; | ||
- | + | margin-top: 10px; margin-bottom: 10px; | |
- | + | ||
} | } | ||
- | + | .innertextbox { /*--Goes inside textboxes class--*/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: block; | display: block; | ||
position: relative; | position: relative; | ||
- | + | margin: 10px; | |
- | + | padding: 20px; | |
- | + | ||
-webkit-border-radius: 10px; | -webkit-border-radius: 10px; | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
border-radius: 10px; | border-radius: 10px; | ||
- | + | background: #fff; | |
- | + | } | |
- | + | ||
</style> | </style> | ||
</html> | </html> | ||
+ | |||
Revision as of 21:22, 1 December 2014