Team:Washington/efawe
From 2014.igem.org
(Difference between revisions)
Line 3: | Line 3: | ||
<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, #sitesub, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/ |
- | . | + | .topWikiNavBackground { |
- | + | height:18px; | |
- | + | margin-top: -32px; | |
- | + | background-color:transparent; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #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 --*/ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: transparent; | ||
+ | } | ||
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/ | #top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/ | ||
- | |||
border: 0 none; | border: 0 none; | ||
height: 14px; | height: 14px; | ||
Line 25: | Line 34: | ||
left: 50%; | left: 50%; | ||
margin-left: -487px; | margin-left: -487px; | ||
+ | background-color: transparent; | ||
} | } | ||
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/ | #top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/ | ||
- | + | background-color:transparent; | |
- | + | height: 14px; | |
display: block; | display: block; | ||
z-index: 10; | z-index: 10; | ||
position: fixed; | position: fixed; | ||
- | width: 100%; | + | width:100%; |
top: 0; | top: 0; | ||
} | } | ||
- | #menubar a:link | + | #menubar a:link, #menubar a:visited { /*-- styling for default menu bar links (edit, page, history, etc.) --*/ |
- | + | color:#FFF; | |
text-decoration: none; | text-decoration: none; | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
- | + | #menubar a:active, #menubar a:hover | |
- | background-color: | + | { |
+ | color:#FFF; | ||
+ | text-decoration: underline; | ||
+ | background-color:transparent; | ||
} | } | ||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
- | + | -webkit-font-smoothing: antialiased; | |
- | + | -webkit-box-sizing: border-box; | |
- | + | -moz-box-sizing: border-box; | |
- | + | box-sizing: border-box; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ::selection { | |
- | + | background: #F79042; | |
- | + | color: #fff; | |
- | + | ||
} | } | ||
- | + | .slide-out-div { | |
- | + | padding: 20px; | |
- | + | background-image:url(../img_bu14/popopenbkgd_bu14.png); | |
- | + | background-repeat:repeat; | |
- | color: # | + | z-index:30; |
- | + | text-align:left; | |
- | + | } | |
- | + | ||
- | + | a:link { | |
- | + | color: #F79042; | |
+ | text-decoration: none; | ||
+ | } | ||
+ | a:visited { | ||
+ | text-decoration: none; | ||
+ | color: #F79042; | ||
+ | } | ||
+ | a:hover { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | a:active { | ||
+ | text-decoration: none; | ||
} | } | ||
- | . | + | .title{ |
- | + | position:absolute; | |
- | + | top:38px; | |
- | + | left:83px; | |
- | + | z-index:2; | |
- | + | ||
- | + | ||
} | } | ||
- | + | body { | |
+ | color: #353535; | ||
+ | font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif; | ||
+ | text-align:center; | ||
+ | } | ||
- | + | h0{ | |
- | + | color:#FFF; | |
- | color: # | + | font-size:40px; |
- | + | font-weight:700; | |
- | + | text-decoration:none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | header1{ | |
+ | font-size:28px; | ||
+ | font-weight:700; | ||
+ | text-transform:uppercase; | ||
+ | text-decoration:none; | ||
+ | } | ||
- | + | header2{ | |
- | color:# | + | font-size:18px; |
- | + | color:#FFF; | |
+ | font-weight:700; | ||
+ | text-transform:uppercase; | ||
+ | text-align:left; | ||
+ | text-decoration:none; | ||
} | } | ||
- | + | header3{ | |
- | + | font-size:20px; | |
+ | color:#000; | ||
+ | font-weight:700; | ||
+ | text-align:left; | ||
+ | text-decoration:none; | ||
+ | } | ||
- | + | maincontent{ | |
+ | font-size:14px; | ||
+ | font-weight:200; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | |||
+ | capt{ | ||
+ | font-size:12px; | ||
+ | color:#5E5F5F; | ||
+ | font-weight:150; | ||
+ | text-align:justify; | ||
+ | line-height:110% | ||
+ | } | ||
+ | |||
+ | sidenav{ | ||
+ | color:#FFF; | ||
+ | font-weight:700; | ||
+ | } | ||
+ | |||
+ | #logo { | ||
+ | position: absolute; | ||
+ | left: 80px; | ||
+ | top: 40px; | ||
+ | z-index: 2; | ||
+ | margin-left: -17px; | ||
+ | } | ||
+ | |||
+ | .header{ | ||
+ | background-color:#353535; | ||
+ | position:fixed; | ||
+ | height:125px; | ||
+ | top:0px; | ||
+ | width:100%; | ||
+ | z-index:30; | ||
+ | } | ||
+ | .igemlogo | ||
{ | { | ||
- | + | position:fixed; | |
- | + | right:5px; | |
- | + | z-index:30; | |
- | + | ||
} | } | ||
- | |||
- | + | #tracking_nav | |
+ | { | ||
+ | margin: 0px 0px 0px 950px; | ||
+ | position: fixed; | ||
+ | color:#bababa; | ||
+ | border: 1px solid #3d3f3c; | ||
+ | background:#3d3f3c; | ||
+ | font-size: 16pt; | ||
+ | padding: 5px; | ||
+ | line-height: 120%; | ||
+ | } | ||
- | + | #tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;} | |
+ | #tracking_nav a:hover {background:#bababa;} | ||
- | + | ul#nav { | |
+ | width:90%; | ||
+ | top:100px; | ||
+ | left:60px; | ||
+ | position:fixed; | ||
+ | z-index:30; | ||
+ | } | ||
- | + | #nav li { | |
- | + | color: #FFF; | |
+ | background-color:none; | ||
+ | margin: 0 15px 0 0; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | list-style: none; | ||
- | # | + | } |
- | + | #nav li:last-child { margin:0; } | |
- | + | ||
- | + | /* main level link */ | |
- | + | #nav a { | |
- | + | font-family:bree-web, Bree, sans-serif; | |
- | + | font-size:10pt; | |
- | + | font-weight:600; | |
- | + | line-height:210%; | |
- | + | color: inherit; | |
- | margin | + | text-decoration: none; |
+ | display: block; | ||
+ | padding: 0 0 0 5px; | ||
+ | margin: 0; | ||
} | } | ||
- | + | ul#nav > li > a { | |
- | + | line-height:10px; | |
- | + | border-left:solid 3px #bbb; | |
- | padding: | + | padding:0 0 0 15px; |
- | + | ||
} | } | ||
- | + | #nav a:hover { | |
- | + | /*background-color: #870203; | |
- | + | color: #ffffff;*/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | /* main level link hover */ |
- | + | #nav .current a, #nav li:hover > a { | |
- | + | color: #F79042; | |
- | + | border-color:#F79042; | |
- | + | ||
- | + | ||
} | } | ||
- | + | /* sub levels link hover */ | |
- | + | #nav ul li:hover a, #nav li:hover li a { | |
- | + | border: none; | |
- | + | background-image:url(https://static.igem.org/mediawiki/2014/3/3a/Orangemenubkgd_bu14.png); | |
- | color: # | + | background-repeat:repeat; |
- | + | color:#FFF; | |
- | + | ||
} | } | ||
- | + | #nav ul a:hover { | |
- | + | color: #353535 !important; | |
- | + | /*background: #fff url() repeat-x 0 -100px !important; | |
- | + | text-shadow: 0 1px 1px rgba(0,0,0, .1);*/ | |
- | + | ||
} | } | ||
- | |||
- | + | /* dropdown */ | |
- | + | #nav li:hover > ul { | |
- | display: block; | + | /*display: block;*/ |
- | + | opacity:1; | |
- | margin | + | margin:0; |
- | + | background-color: none; | |
- | + | z-index:0; | |
- | + | ||
} | } | ||
- | + | /* level 2 list */ | |
- | display: | + | #nav ul { |
- | + | /*display: none;*/ | |
- | + | opacity:0; | |
+ | margin: 20px 0 0 0; | ||
+ | padding: 7px 0 0 0; | ||
+ | width: 205px; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | z-index:-1; | ||
+ | |||
+ | } | ||
+ | #nav ul li { | ||
+ | float: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
} | } | ||
- | . | + | #nav ul a { |
- | + | font-weight: normal; | |
- | display: block; | + | /*text-shadow: 0 1px 0 #fff;*/ |
- | margin-left: auto; | + | } |
- | margin-right: auto; | + | |
+ | /* clearfix */ | ||
+ | #nav:after { | ||
+ | content: "."; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | visibility: hidden; | ||
+ | line-height: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | #nav { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | html[xmlns] #nav { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | * html #nav { | ||
+ | height: 1%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .headerdivider{ | ||
+ | background-image:url(https://static.igem.org/mediawiki/2014/1/15/Headerdivider_bu14.png); | ||
+ | position:absolute; | ||
+ | top:120px; | ||
+ | height:15px; | ||
+ | width:100%; | ||
+ | z-index:10; | ||
+ | } | ||
+ | |||
+ | .plasmid{ | ||
+ | background-color:transparent; | ||
+ | position: relative; | ||
+ | background-repeat:no-repeat; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | width:400px; | ||
+ | height:500px; | ||
+ | top: calc(50% - 300px); | ||
+ | z-index:10; | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2014/0/03/Boston1_bu14.jpg); | ||
+ | background-size:cover; | ||
+ | position: absolute; | ||
+ | top:100px; | ||
+ | width: 100%; | ||
+ | height:100%; | ||
+ | overflow: auto; | ||
+ | font-size: 18px; | ||
text-align: center; | text-align: center; | ||
+ | color: rgba(255,255,255,.6); | ||
+ | text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); | ||
+ | |||
+ | box-shadow: 0 1px 2px rgba(0,0,0,.25); | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .wrap { | ||
+ | margin: 0 auto; | ||
+ | width: 960px; | ||
} | } | ||
- | . | + | .anchor{ |
- | + | position:absolute; | |
+ | top:calc(100% - 125px); | ||
+ | } | ||
+ | .topanchor{ | ||
+ | position:absolute; | ||
+ | top:calc(0% - 125px); | ||
+ | } | ||
+ | .lower{ | ||
+ | background-image:url(https://static.igem.org/mediawiki/2014/d/d7/Gradient_bu14.png); | ||
+ | background-color:#FFF; | ||
+ | text-align:center; | ||
+ | background-repeat:repeat-x; | ||
+ | width:100%; | ||
+ | position:absolute; | ||
+ | top:100%; | ||
+ | z-index:10; | ||
+ | } | ||
+ | .content{ | ||
+ | text-align:left; | ||
+ | width:100%; | ||
+ | position:relative; | ||
+ | z-index:10; | ||
- | + | } | |
- | + | .text{ | |
+ | width:75%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | .content1{ | ||
+ | background-image:url(../img_bu14/whitebkgd_bu14.png); | ||
+ | background-repeat:repeat; | ||
+ | .sponsors{ | ||
+ | background-color:#FFF; | ||
+ | position:relative; | ||
+ | text-align:center; | ||
+ | bottom:0px; | ||
+ | z-index:10; | ||
+ | } | ||
+ | @media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) { | ||
+ | .wrap { | ||
+ | width: 90%; | ||
+ | } | ||
+ | #logo { | ||
+ | left: 50px; | ||
+ | top: 30px; | ||
+ | } | ||
+ | |||
+ | .banner header1, .banner header2 { | ||
+ | font-size: 24px; | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | .banner ul li { | ||
+ | height: 240px; | ||
+ | } | ||
+ | .banner .inner { | ||
+ | padding-top: 100px; | ||
+ | padding-bottom: 50px; | ||
+ | } | ||
+ | .banner p { | ||
+ | font-size: 15px; | ||
+ | width: 80%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | pre { | ||
+ | overflow: auto; | ||
+ | } | ||
+ | .features li { | ||
+ | width: 100%; | ||
+ | margin-left: 10px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | .how li { | ||
+ | width: 90%; | ||
+ | } | ||
+ | .how pre { | ||
+ | position: static; | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | ||
+ | .features li:before { | ||
+ | background: url('img/icons@2x.png'); | ||
+ | background-size: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
</html> | </html> |
Revision as of 00:32, 14 August 2014