Template:Team:BostonU/CSS
From 2014.igem.org
(Difference between revisions)
(164 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | #contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/ | ||
+ | |||
+ | .topWikiNavBackground { | ||
+ | height:18px; | ||
+ | margin-top: -32px; | ||
+ | background-color:transparent; | ||
+ | } | ||
+ | |||
#globalWrapper, #content { /*-- changes default wiki settings --*/ | #globalWrapper, #content { /*-- changes default wiki settings --*/ | ||
Line 26: | Line 35: | ||
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; | ||
- | |||
} | } | ||
Line 48: | Line 58: | ||
color:#FFF; | color:#FFF; | ||
text-decoration: underline; | text-decoration: underline; | ||
- | background-color: | + | 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; | ||
+ | z-index:30; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | a:link { | ||
+ | color: #F79042; | ||
+ | font-weight=500; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a:visited { | ||
+ | text-decoration: none; | ||
+ | font-weight=500; | ||
+ | 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; | ||
+ | font-size:40px; | ||
+ | font-weight:700; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | header1{ | ||
+ | font-size:28px; | ||
+ | font-weight:700; | ||
+ | text-transform:uppercase; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | header2{ | ||
+ | font-size:18px; | ||
+ | color:#FFF; | ||
+ | font-weight:700; | ||
+ | text-transform:uppercase; | ||
+ | text-align:left; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | |||
+ | header2black{ | ||
+ | font-size:18px; | ||
+ | color:#000000; | ||
+ | font-weight:700; | ||
+ | text-transform:uppercase; | ||
+ | text-align:left; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | header3{ | ||
+ | font-size:20px; | ||
+ | color:#353535; | ||
+ | font-weight:550; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | h3{ | ||
+ | font-size:20px; | ||
+ | color:#353535; | ||
+ | font-weight:550; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | maincontent{ | ||
+ | font-weight:100; | ||
+ | font-size:14px; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | |||
+ | capt{ | ||
+ | font-size:12px; | ||
+ | color:#5E5F5F; | ||
+ | font-weight:300; | ||
+ | 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; | ||
+ | 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: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); | ||
+ | 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; | ||
+ | opacity:1; | ||
+ | margin:0; | ||
+ | background-color: none; | ||
+ | z-index:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* level 2 list */ | ||
+ | #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; | ||
+ | /*text-shadow: 0 1px 0 #fff;*/ | ||
+ | } | ||
+ | |||
+ | /* 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; | ||
+ | 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> | </style> | ||
</html> | </html> |
Latest revision as of 01:10, 18 October 2014