Template:Nm style: Difference between revisions
No edit summary |
No edit summary |
||
Line 18: | Line 18: | ||
/**** Base styles ****/ | /**** Base styles ****/ | ||
#column-one, #footer, div#sidebar-main, #contentSub, .firstHeading{ | #column-one, #footer, div#sidebar-main, #contentSub, .firstHeading, #siteSub, #jump-to-nav{ | ||
display: none; | display: none; | ||
Revision as of 09:07, 25 October 2013
<html>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,100&subset=latin"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type"text/javascript">
$( document ).ready(function() {
$("style[media*='screen']").remove(); }); </script>
<script type"text/javascript"> //fix heading var h1 = $(".firstHeading").text().split("/"); $(".firstHeading").text(h1[h1.length-1]); </script> <style type="text/css"> /**** Base styles ****/
- column-one, #footer, div#sidebar-main, #contentSub, .firstHeading, #siteSub, #jump-to-nav{
display: none;
}
- content {
margin: 0; padding: 0;
background: #1A1A1A; border: medium 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;}
.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;
}
.flag > *{ float:left; } .flag > p{ font-size: 18px;
position: relative; text-align: center; top: -6px; width: 75%;
margin-bottom: 10px; }
- team .big{
opacity:1; }
.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; }
/**** Isotope styles ****/
/* required for containers to inherit vertical size from window */ html, body {
height: 100%;
}
- container {
padding: 5px; margin-bottom: 20px;
}
.box {
width: 220px; height: 220px; margin: 10px; float: left; overflow: hidden; position: relative; background: #2A2A2A; color: #F2F2F2; display: table-cell; text-align: center; vertical-align: middle; overflow:hidden;
}
figure.box > *{ left: 0;
position: absolute; right: 0;
}
.box figure{ overflow: hidden; }
.box figcaption {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4); bottom: 0; font-size: 20px;
font-weight: 300;
padding-left: 5px; text-align: center; width: 100%;
z-index: 4; }
.clickable .box:hover {
cursor: pointer;
}
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none; z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity;
} .rs-wrap:after, .rs-slider:after, .rs-thumb-wrap:after, .rs-arrows:after, .rs-caption:after {
content: "."; display: block; height: 0; clear: both; line-height: 0; visibility: hidden;
}
/* ===[ Slider ]=== */
.rs-wrap {
position: relative; max-width: 100%;
}
.rs-slide-bg { *zoom: 1 }
.rs-slider > li > a { display: block }
.rs-slider > li {
list-style: none; filter: alpha(opacity=0); opacity: 0; width: 100%; height: 100%; margin: 0 -100% 0 0; padding: 0; float: left; position: relative;
}
.rs-slider > li > a { padding: 0; background: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.rs-slider > li img { display: block; max-width: 100%; max-height: 100%; -ms-interpolation-mode: bicubic; }
/* ===[ Thumbnails ]=== */
.rs-thumb-wrap { *zoom: 1 }
.rs-thumb-wrap > a { display: block; float: left; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; /* Hardware accelerate to prevent jumps on transition */ }
.rs-thumb-wrap > a > img { max-width: 100%; max-height: 100%; display: block; -ms-interpolation-mode: bicubic; }
.rs-thumb-wrap > a:first-child { margin-left: 0!important }
/* ===[ Arrows ]=== */
.rs-arrows .rs-next, .rs-arrows .rs-prev { z-index: 1; background-image: url("fancybox_sprite.png");}
.rs-arrows .rs-next, .rs-arrows .rs-prev { z-index: 1; background-image: url("fancybox_sprite.png");}
.rs-arrows:hover .rs-next, .rs-arrows:hover .rs-prev { z-index: 2; }
/* ===[ Captions ]=== */
.rs-caption {
position: absolute; max-height: 100%; overflow: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; bottom: 0; left: 0;
}
.rs-caption.rs-top-left {
top: 0; bottom: auto;
}
.rs-caption.rs-top-right {
top: 0; right: 0; left: auto; bottom: auto;
}
.rs-caption.rs-bottom-left {
bottom: 0; left: 0;
}
.rs-caption.rs-bottom-right {
right: 0; left: auto; border-bottom: none; border-right: none;
}
.rs-caption.rs-top {
top: 0; bottom: auto; width: 100%!important;
}
.rs-caption.rs-bottom { width: 100%!important }
.rs-caption.rs-left {
top: 0; height: 100%;
}
.rs-caption.rs-right {
top: 0; left: auto; right: 0; height: 100%;
}
/* ===[ Grid ]=== */
.rs-grid {
position: absolute; overflow: hidden; width: 100%; height: 100%; display: none;
}
.rs-gridlet {
position: absolute; opacity: 1;
}
/* Optional - remove captions at smaller screen widths @media screen and (max-width: 480px) { .rs-caption { opacity: 0!important; } }
- /
</style>
</html>