Team:NJU China/Team
From 2013.igem.org
(Difference between revisions)
Line 596: | Line 596: | ||
<h2 id="March">Team</h2> | <h2 id="March">Team</h2> | ||
</div> | </div> | ||
+ | <!--Start NavBar--> | ||
+ | <ul id="nav"> | ||
+ | <li><a href="https://2013.igem.org/Team:NJU_China">Home</a></li> | ||
+ | |||
+ | <li><a href="https://2013.igem.org/Team:NJU_China/Team">Team</a></li> | ||
+ | |||
+ | <li><a href="https://2013.igem.org/Team:NJU_China/Project">Project</a></li> | ||
+ | |||
+ | <li><a href="https://2013.igem.org/Team:NJU_China/Human Practice">Human Practice</a></li> | ||
+ | |||
+ | <li><a href="https://2013.igem.org/Team:NJU_China/Modeling">Modeling</a></li> | ||
+ | |||
+ | <li><a href="https://2013.igem.org/Team:NJU_China/Notebook">Notebook</a></li> | ||
+ | |||
+ | <li><a href="https://2013.igem.org/Team:NJU_China/Safety">Safety</a></li> | ||
+ | |||
+ | <li><a href="https://2013.igem.org/Team:NJU_China/Attributions">Attributions</a></li> | ||
+ | |||
+ | </ul> | ||
+ | <!--End NavBar--> | ||
<div class="ss-right"> | <div class="ss-right"> | ||
<h2>NJU_China</h2> | <h2>NJU_China</h2> | ||
Line 806: | Line 826: | ||
</div> | </div> | ||
<center><img width="1200px"; height="800px" style="position:relative" src="https://static.igem.org/mediawiki/2013/5/54/NJU_China_Team.JPG"></center> | <center><img width="1200px"; height="800px" style="position:relative" src="https://static.igem.org/mediawiki/2013/5/54/NJU_China_Team.JPG"></center> | ||
+ | |||
+ | <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script> | ||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM2012/css/Team.css"> | ||
+ | <STYLE type="text/css"> | ||
+ | /* MAIN STYLE DEFINITIONS */ | ||
+ | a{ | ||
+ | color:#870203; | ||
+ | -webkit-transition-duration:0.3s; | ||
+ | -moz-transition-duration:0.3s; | ||
+ | -o-transition-duration:0.3s; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color:#3d3f3c; | ||
+ | } | ||
+ | |||
+ | a:visited{ | ||
+ | color:#870203; | ||
+ | } | ||
+ | |||
+ | td | ||
+ | { | ||
+ | font-family: Helvetica; | ||
+ | font-size: 10pt; | ||
+ | vertical-align: top; | ||
+ | text-align: left; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | |||
+ | tr | ||
+ | { | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | |||
+ | H1 { | ||
+ | font-family: Helvetica; | ||
+ | text-transform: uppercase; | ||
+ | color: #3d3f3c; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | |||
+ | H4 { | ||
+ | font-family: Helvetica; | ||
+ | text-transform: uppercase; | ||
+ | color: #3d3f3c; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | /* CONTENT HEADING STYLES - overrides some main.css styling */ | ||
+ | |||
+ | H6 { | ||
+ | font-family:'Caviar Dreams'; | ||
+ | font-size:30px; | ||
+ | font-weight:500; | ||
+ | text-align:left; | ||
+ | text-transform:uppercase; | ||
+ | color: #3d3f3c; | ||
+ | border-bottom:1px solid orangered; | ||
+ | padding-bottom:10px; | ||
+ | margin:15px 0; | ||
+ | } | ||
+ | |||
+ | H1, H3 { | ||
+ | font-family:'Source Sans Pro'; | ||
+ | font-weight:600; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | |||
+ | H1 { | ||
+ | font-size:20px; | ||
+ | border:none; | ||
+ | } | ||
+ | |||
+ | img.headshot { | ||
+ | width: 100px; | ||
+ | height: auto; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | body { | ||
+ | background:#fff; | ||
+ | font-family: Helvetica; | ||
+ | } | ||
+ | |||
+ | content { | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | #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;} | ||
+ | |||
+ | #parts_table | ||
+ | { | ||
+ | border: 1px solid #870203; | ||
+ | border-collapse: collapse; | ||
+ | width: 70%; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | #parts_table td | ||
+ | { | ||
+ | text-align: center; | ||
+ | margin: 5px; | ||
+ | border: 1px solid #870203; | ||
+ | |||
+ | } | ||
+ | |||
+ | #parts_table th | ||
+ | { | ||
+ | background-color: #bababa; | ||
+ | border: 1px solid #870203; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | .table_part | ||
+ | { | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | /* HEADER STYLES: banner, navbar, etc. */ | ||
+ | #banner { width:300px; display:block; float:left; } | ||
+ | #banner img { width:100%; } | ||
+ | |||
+ | ul#nav { | ||
+ | width:1800px; | ||
+ | margin:-50px 0 0 325px; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | #nav li { | ||
+ | color: #bbb; | ||
+ | background-color:none; | ||
+ | margin: 0 50px 0 0; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | list-style: none; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | #nav li:last-child { margin:0; } | ||
+ | |||
+ | /* main level link */ | ||
+ | #nav a { | ||
+ | font-family:'Source Sans Pro', sans-serif; | ||
+ | font-size:10pt; | ||
+ | font-weight:500; | ||
+ | line-height:110%; | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | padding: 0 0 0 5px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | ul#nav > li > a { | ||
+ | line-height:12px; | ||
+ | border-left:solid 2px #bbb; | ||
+ | padding:0 0 0 3px; | ||
+ | } | ||
+ | |||
+ | #nav a:hover { | ||
+ | /*background-color: #870203; | ||
+ | color: #ffffff;*/ | ||
+ | } | ||
+ | |||
+ | /* main level link hover */ | ||
+ | #nav .current a, #nav li:hover > a { | ||
+ | color: #000; | ||
+ | border-color:orangered; | ||
+ | } | ||
+ | |||
+ | /* sub levels link hover */ | ||
+ | #nav ul li:hover a, #nav li:hover li a { | ||
+ | border: none; | ||
+ | /*background-color: #FA9D1C;*/ | ||
+ | color:#000; | ||
+ | } | ||
+ | |||
+ | #nav ul a:hover { | ||
+ | color: orangered !important; | ||
+ | /*background: #fff url(img/gradient.png) 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; | ||
+ | -webkit-transition-duration:0.5s; | ||
+ | -moz-transition-duration:0.5s; | ||
+ | -o-transition-duration:0.5s; | ||
+ | } | ||
+ | #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%; | ||
+ | } | ||
+ | |||
+ | /* pinterest like photo grid for social page*/ | ||
+ | |||
+ | /* | ||
+ | body { | ||
+ | background: url(http://subtlepatterns.com/patterns/scribble_light.png) ; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | #wrapper { | ||
+ | width: 90%; | ||
+ | max-width: 1100px; | ||
+ | min-width: 800px; | ||
+ | margin: 50px auto; | ||
+ | } | ||
+ | |||
+ | #columns { | ||
+ | -webkit-column-count: 3; | ||
+ | -webkit-column-gap: 10px; | ||
+ | -webkit-column-fill: auto; | ||
+ | -moz-column-count: 3; | ||
+ | -moz-column-gap: 10px; | ||
+ | -moz-column-fill: auto; | ||
+ | column-count: 3; | ||
+ | column-gap: 15px; | ||
+ | column-fill: auto; | ||
+ | } | ||
+ | |||
+ | .pin { | ||
+ | display: inline-block; | ||
+ | background: #FEFEFE; | ||
+ | border: 2px solid #FAFAFA; | ||
+ | box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); | ||
+ | margin: 0 2px 15px; | ||
+ | -webkit-column-break-inside: avoid; | ||
+ | -moz-column-break-inside: avoid; | ||
+ | column-break-inside: avoid; | ||
+ | padding: 15px; | ||
+ | padding-bottom: 5px; | ||
+ | background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); | ||
+ | opacity: 1; | ||
+ | |||
+ | -webkit-transition: all .2s ease; | ||
+ | -moz-transition: all .2s ease; | ||
+ | -o-transition: all .2s ease; | ||
+ | transition: all .2s ease; | ||
+ | } | ||
+ | |||
+ | .pin img { | ||
+ | width: 100%; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | padding-bottom: 15px; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | |||
+ | .pin p { | ||
+ | font: 12px/18px Arial, sans-serif; | ||
+ | color: #333; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 960px) { | ||
+ | #columns { | ||
+ | -webkit-column-count: 4; | ||
+ | -moz-column-count: 4; | ||
+ | column-count: 4; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1100px) { | ||
+ | #columns { | ||
+ | -webkit-column-count: 5; | ||
+ | -moz-column-count: 5; | ||
+ | column-count: 5; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #columns:hover .pin:not(:hover) { | ||
+ | opacity: 0.4; | ||
+ | } | ||
+ | </STYLE> | ||
+ | |||
+ | <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'> | ||
+ | |||
+ | |||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
<script language="Javascript"> | <script language="Javascript"> |
Revision as of 21:58, 26 September 2013