Template:Nm style: Difference between revisions
(New page: <html> <style type="text/css"> →*** Base styles ***: html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins...) |
No edit summary |
||
Line 2: | Line 2: | ||
<style type="text/css"> | <style type="text/css"> | ||
/**** Base styles ****/ | /**** Base styles ****/ | ||
#column-one, #footer, div#sidebar-main, #contentSub{ | |||
display: none; | |||
} | |||
html, body, div, span, object, iframe, | html, body, div, span, object, iframe, |
Revision as of 07:56, 25 October 2013
<html> <style type="text/css"> /**** Base styles ****/
- column-one, #footer, div#sidebar-main, #contentSub{
display: none;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
/*padding: 15px;*/ font-family: 'Lato', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 2rem; font-weight: 200; line-height: 1.4; background: #1A1A1A; color: #999999; max-width: 1280px; padding-top: 55px; margin-left: auto; margin-right: auto;
} } h1, h2, h3, p, ul, ol, pre, dl {
margin-bottom: 1.0em; font-weight: 100;
}
h1, h2, #super-list, .box, .tagline, #index-list {
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3 { font-weight: 300; }
h1 {
font-size: 32px; line-height: 1.1em;
}
h2 {
font-size: 48px; line-height: 1.1em;
}
a, a code {
color: #FB4; text-decoration: none;
}
a:hover, a:hover code {
color: #4BF;
}
a:active, a:active code {
color: #1FB; /*background: black;*/
}
a img { border: none; }
a.anchor{display: block; position: relative; top: -75px; visibility: hidden;}
p{ text-align:left; }
em { color: #00EF00; } strong { font-weight: bold; }
blockquote {
padding-left: 1.0em; margin-left: 1.0em; border-left: 1px solid #333; font-style: italic;
}
- scrollUp {
background: url("../images/top.png") no-repeat scroll 0 0 transparent; bottom: 20px; height: 38px; right: 10px; width: 38px;
}
nav {
background: rgba(25, 25, 25, 0.85); padding: 0px; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100;
}
nav ul {
width: 100%; margin: 0px auto; padding: 0px; list-style-type: none;
} nav ul li {
float: left; line-height:2.5;
} nav ul li.selected {
border-bottom: 10px solid #d30d15;
}
nav ul li.home {
padding: 10px;
} nav ul a {
float: left; text-decoration: none; color: #F2F2F2; text-transform: uppercase; font-size: 20px; font-weight: 300; padding: 10px 20px 0;
}
- subnav {
background-color: rgba(25, 25, 25, 0.8);
border-radius: 0 20px 20px 0; left:0px;
font-size: 18px; font-weight: 300; line-height: 1.8; list-style: none outside none; margin-left: 0; padding: 20px;
z-index: 10; }
- subnav li {
list-style: none outside none;
}
- content {
margin-top: 60px;
}
- filters > li{
margin: 5px; display: inline-block; }
.box.clickable{ background: none repeat scroll 0 0 #fff; }
.clickable img { transition: 0.3s ease; }
.clickable img:hover { opacity:0.9; transition: 0.3s ease; }
.background { left: 0;
margin: 0; max-width: 100%; padding: 0; position: absolute;
} /*the boxes*/
.box.b2x2{ height: 460px; width: 460px; } .box.b2x2 > img{ display: block;
margin-left: auto; margin-right: auto; margin-top: 10px; width: 400px;
}
.box.b2x1{ height: 460px; }
.box.b1x2{ width: 460px; }
.box.b1x3{ width: 700px; }
/*start page*/
.box.logo { background: #e74c3c;} .box.intro { font-size:7.2rem !important;}
.box > p { font-size: 16px;
padding: 0 20px; margin-top: 10px; text-align: justify;
font-weight: 300; }
.box > h2 { font-size: 40px;
font-weight: 300;
text-align:left; margin-left: 20px;
margin-top: 15px;
}
.tease > h2 {
font-size: 80px; font-weight: 100; margin-top: 80px;
}
/*project*/
.project{ background-attachment: fixed;
width: 100%;
padding-bottom: 40px; }
.project h2 { color: #FFFFFF;
font-weight: 300; margin-bottom: 30px; margin-left: 180px; padding-top: 20px; position: relative;
}
.project h3 {
font-size: 26px;
}
.project .box { margin-bottom: 20px;
margin-top: 0;
}
.interlude{ background: none repeat scroll 0 0 #2A2A2A; box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); border: 1px solid rgba(0, 0, 0, 0.3);
height: 150px; position: relative; z-index: 3;
}
.interlude *{ float:left; }
.interlude h2{ color: #FFFFFF;
display: block; font-weight: 300; line-height: 150px; margin-left: 24%; margin-right: -14%; width: 50%;
}
.interlude img{ float: left;
line-height: 150px; margin-left: 10%; margin-top: 25px; vertical-align: middle;
}
.referneces { font-size: 14px; }
.clear{ clear: both; }
- motivation{ background-image: url("../images/project/background/motivation.png");}
- vesicle{ background-image: url("../images/project/background/vesicle_large_final.png");}
- origami{ background-image: url("../images/project/background/DNA_background_final.png");}
- reaction{ background-image: url("../images/project/background/IR_background.png");}
- nanoreactor{ background-image: url("../images/project/background/nanocontainer_background.png");}
.project_box{ background: none repeat scroll 0 0 #FFFFFF;
color: #000000; display: block; float: left; font-size: 18px; font-weight: 300; line-height: 1.6; margin-left: 180px; margin-right: auto; overflow: hidden; padding: 10px; width: 50%;
}
.figure_box{
display: block; float: left; margin-left: 20px; overflow: hidden; width: 220px;
}
/*se*/
.project_box h2{ color: #1A1A1A;
display: block; font-weight: 300;
margin-left: 0%; margin-right: -10%; width: 90%;
}
.project_box p{
text-align: justify;
margin-bottom: 18px; }
.project_box li { margin-left:50px }
- pb_mot.project_box{
height: 350px; }
- pb_dna_scaff.project_box{
height: 400px; }
- pb_dna_req.project_box{
height: 250px; }
- pb_poly_intro.project_box{
/*right: -20%;*/ height: 200px;
}
- pb_poly_pmoxa.project_box{
/*right: -20%;*/ height: 600px; width: 1000px; overflow:scroll; }
- pb_ir.project_box{
/*right: -20%;*/ height: 1300px; }
- pb_poly_cp.project_box{
/*right: -20%;*/ height: 600px; }
/*team page*/ .bio_box {
background: none repeat scroll 0 0 #E74C3C; float: left; font-size: 15px; height: 440px; padding: 15px; text-align: justify; width: 210px;
}
.bio_box > .name{ font-size: 24px;
font-weight: 300; margin-bottom: 25px; text-align: center; width: 100%;
}
.bio_box > p{
text-align: justify;
font-weight: 300; font-size: 16px; } .box.big img{
opacity:1 !important;
}
.flag > *{ float:left; } .flag > p{ font-size: 18px;
position: relative; text-align: center; top: -6px; width: 75%;
margin-bottom: 10px; }
- team .big{
opacity:1 !important; }
.head{ width:220px; float:left; }
/*sponsor page*/
- sponsors .box {
background: none repeat scroll 0 0 white;
}
- sponsors figcaption {
height: 65px; width: 100%;
font-size: 15px;
font-weight: 300; top: auto; bottom: 0; opacity: 0; transform: translateY(100%);
transition: transform 0.4s, opacity 0.1s 0.3s; -webkit-transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
}
- sponsors .descr{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
font-size: 12px; font-weight: 300; height: 60px;
margin: 0;
padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: justify; top: -155px; line-height: 1.3;
}
- sponsors .descr p{
width:90%; margin-left:auto; margin-right:auto; }
- sponsors figure.clickable:hover figcaption{
opacity: 1; transform: translateY(0px); transition: transform 0.4s, opacity 0.1s;
-webkit-transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
}
- sponsors figure:hover .descr{
opacity: 1; transform: translateY(155px); transition: transform 0.4s, opacity 0.1s;
-webkit-transform: translateY(155px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; }
/*gallery*/
- gallery .box img{
min-height: 220px;
min-width: 220px;
} /*ptocols*/ .protocol_box{ background: none repeat scroll 0 0 #FFFFFF;
color: #000000; display: block; float: left; font-size: 18px; font-weight: 300; line-height: 1.6; margin-left: 40px; margin-right: auto; overflow: hidden; padding: 10px; width: 66%;
} .protocol_box li { margin-left:50px }
.protocol_box p{
text-align: justify;
margin-top: 18px; }
.protocol_box h1 { font-size: 30px; }
.protocol_box h2 { font-size: 24px; }
.protocol_box h3 { font-size: 22px; }
/*Outreach*/
.outreach_box{ background: none repeat scroll 0 0 #FFFFFF;
color: #000000; display: block; float: left; font-size: 18px; font-weight: 300; line-height: 1.6; margin-left: 10px; margin-right: auto; overflow: hidden; padding: 10px; width: 70%;
}
.outreach_box li { margin-left:50px }
/*Acknowlegement*/
.ack_box{ background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
text-align: center;
display: block; float: left; font-size: 18px; font-weight: 300; line-height: 1.6; margin-left: 10px; margin-right: auto; overflow: hidden; padding: 10px; width: 80%;
} .ack_box p { text-align: center; } .next, .prev{ z-index: 99; background-image: url("fancybox_sprite.png"); width: 36px; height: 36px; top: 200px; }
figure.box > .next {
left: 425px;
background-position: 0 -72px;
}
figure.box > .prev { background-position: 0 -36px; }
</style> </html>