Difference between revisions of "Team:CHINA CD UESTC"

 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{Template:Team:CHINA_CD_UESTC/menu}}
  
 
<!DOCTYPE html>
 
<!DOCTYPE html>
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
+
 
 +
<html>
 
<head>
 
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 +
<script src="https://2015.igem.org/Template:Team:CHINA_CD_UESTC/homejs?action=raw&ctype=text/javascript"></script>
  
</head>
 
 
<style type="text/css">
 
<style type="text/css">
/* General Slides */
 
  
#content{
 
height:90px;
 
  padding: 0px 0px 0px 0px;
 
  border-left: 0px solid #444444;
 
  border-right: 0px solid #444444;
 
}
 
.slide{
 
background-attachment: fixed;
 
width:100%;
 
height:100%;
 
position: relative;
 
padding:0 10px 0 10px;
 
margin: 0 10px 0 10px;
 
z-index:12;
 
overflow:hidden;
 
}
 
  
 
+
body.opened #realcontent {
h2 {
+
left: 100px;
display:block;
+
opacity: 0.2 !important;
margin:0 0 23px;
+
pointer-events: none;
padding:0;
+
text-transform:none;
+
text-align:left;
+
font-style:normal;
+
border-bottom:1px solid #e0e0e0;
+
font-family: Helvetica ;
+
font-size: 70px;
+
line-height: 82px;
+
color:#343434;
+
font-weight: 300;
+
 
}
 
}
 
+
body {
 
+
background: #2d2c41;
h3 {
+
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
margin:0;
+
padding:40px 0 32px 0;
+
text-transform:uppercase;
+
text-align:center;
+
font-family: Helvetica ;
+
font-weight:800;
+
font-size:32px;
+
font-style:normal;
+
line-height:36px;
+
color:#3e3e3e;
+
 
}
 
}
 
+
ul {
h4 {
+
list-style-type: none;
margin:0;
+
padding:0 0 15px;
+
text-transform:none;
+
text-align:left;
+
font-family: Helvetica ;
+
font-weight:300;
+
font-size:32px;
+
font-style:normal;
+
line-height:36px;
+
color:#222;
+
 
}
 
}
  
img.icon_img {
 
float:left;
 
margin-right:20px;
 
margin-top:20px;
 
margin-bottom:25px;
 
}
 
  
.effect_2 {
+
#realcontent #homeIndex {
background:url(../images/effect_2.png) repeat left top;
+
position: absolute;
position:relative;
+
top: 0;
top:0;
+
left: 0;
bottom:-57px;
+
right: 0;
height:100%;
+
bottom: 0;
z-index:999 !important;
+
 
}
 
}
 
+
#realcontent #homeIndex .contentInner {
 
+
position: absolute;
/* ____________________________________ Slide 2 标准文本____________________________________ */
+
top: 0;
 
+
left: 0;
#slide2 {
+
right: 0;
background:url(../images/slide2_bg.jpg) repeat left top;
+
bottom: 0;
width:100%;
+
padding:20px 0 20px;
+
 
}
 
}
 
+
#realcontent #homeIndex a {
.det_inf {margin-bottom:24px;
+
overflow: hidden;
 
}
 
}
.det_inf li {margin-bottom:10px;
+
#realcontent #homeIndex a img.fullBg {
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: none;
 
}
 
}
.det_inf li a {
+
#realcontent #homeIndex a .overlay {
color:#929292;
+
display: block;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
right: 0;
 +
bottom: 0;
 +
background: #262626;
 +
opacity: 0.5;
 +
filter: alpha(opacity=50);
 +
-webkit-transition: all 200ms ease-out;
 +
-moz-transition: all 200ms ease-out;
 +
-ms-transition: all 200ms ease-out;
 +
-o-transition: all 200ms ease-out;
 +
transition: all 200ms ease-out;
 +
z-index: 1;
 
}
 
}
.det_inf li a:hover {
+
#realcontent #homeIndex a .title {
color:#f14833;
+
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
z-index: 10;
 +
-webkit-backface-visibility: hidden;
 
}
 
}
li.phone {
+
#realcontent #homeIndex a video {
background:url(../images/inf_icon.png) no-repeat 0 0;
+
position: absolute;
padding-left:44px;
+
left: 0;
 +
right: 0;
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 
}
 
}
li.address {
+
#realcontent #homeIndex a .gallery {
background:url(../images/inf_icon.png) no-repeat 0 -99px;
+
position: absolute;
padding-left:44px;
+
top: 0;
 +
left: 0;
 +
right: 0;
 +
bottom: 0;
 +
opacity: 0;
 +
filter: alpha(opacity=0);
 
}
 
}
li.pers_mail {
+
#realcontent #homeIndex a .gallery img {
background:url(../images/inf_icon.png) no-repeat 0 -188px;
+
padding-left:44px;
+
}
+
li.pers_site {
+
background:url(../images/inf_icon.png) no-repeat 0 -265px;
+
padding-left:44px;
+
}
+
 
+
 
+
/* ___________________________________ //Slide 2 ___________________________________ */
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/*____________________________grid.css________________________________*/
+
 
+
/* Computer */
+
.grid_1 { width: 6.5%; }
+
.grid_2 { width: 15%; }
+
.grid_3 { width: 23.5%; }
+
.grid_4 { width: 32%; }
+
.grid_5 { width: 40.5%; }
+
.grid_6 { width: 49%; }
+
.grid_7 { width: 57.5%; }
+
.grid_8 { width: 66%; font-family: Verdana,Arial  ;
+
}
+
.grid_9 { width: 74.5%; }
+
.grid_10 { width: 83%; }
+
.grid_11 { width: 91.5%; }
+
.grid_12 { width: 100%; }
+
 
+
.grid_1,
+
.grid_2,
+
.grid_3,
+
.grid_4,
+
.grid_5,
+
.grid_6,
+
.grid_7,
+
.grid_8,
+
.grid_9,
+
.grid_10,
+
.grid_11,
+
.grid_12 {
+
margin: 0 20px 20px 0;
+
float: left;
+
 
display: block;
 
display: block;
}
 
 
.alpha {margin-left:0;}
 
.omega {margin-right:0;}
 
.gallery-list {margin:0;padding:0;}
 
.little_respond {display:none;}
 
 
.container{
 
 
width: 100%;
 
width: 100%;
max-width: 1000px;
+
height: 100%;
margin: auto;
+
position: absolute;
+
top: 0;
 +
left: 0;
 +
z-index: 2;
 
}
 
}
 
+
#realcontent #homeIndex a .gallery img.active {
 
+
z-index: 4;
 
+
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
+
.clearfix:after{position:relative;z-index:99;clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
+
 
+
@media (max-width: 1024px) {
+
.slide{background-attachment: scroll;background-position:0 0 !important;
+
}
+
 
}
 
}
 
+
#realcontent #homeIndex a .gallery img.lastActive {
@media (min-width: 767px) and (max-width: 1023px) {
+
z-index: 3;
#firstTitle {font-size: 80px;}
+
 
+
+
.gallery-list .omega {margin-right:10px;}
+
+
.filtr_bg {left:50%;}
+
 
+
h4 {font-size:27px;}
+
+
#slide1 h1 {font-size:50px;line-height:65px;}
+
#slide1 p {font-size:30px;line-height:36px;}
+
+
.padding_slide1 {padding:150px 0 30px;}
+
+
.pers_inf li span {width:130px;}
+
+
.exhib_cont {width:282px;}
+
.exhib_block p {width:250px;}
+
.exhib_date_top {left:49.3%;}
+
 
+
 
+
+
/* _______________ Gallery ________________ */
+
+
/* ______________ //Gallery _______________ */
+
/* ___________ SERV_BLOCK __________ */
+
.servc_block p {font-size:28px;}
+
+
/* __________ //SERV_BLOCK _________ */
+
 
+
.container { width: 100%; }
+
.container .alpha        { margin-left: 0; margin-right: 5px; }
+
.container .omega        { margin-right: 0; }
+
.gallery-list .omega {margin-right:10px;}
+
.container .respond_pad {padding-right:20px;}
+
+
.grid_3 { width: 166px; }
+
.grid_4 { width: 228px; }
+
.grid_5      { width: 290px; }
+
.grid_6      { width: 352px; }
+
.grid_7  { width: 414px; }
+
.grid_8  { width: 475px; }
+
.grid_9 { width: 538px; }
+
.grid_12 { width: 724px; }
+
 
}
 
}
 
+
#realcontent #homeIndex .beer {
@media (max-width: 766px) {
+
position: absolute;
        #firstTitle {font-size: 80px;}
+
top: 0;
 
+
left: 0;
h2 {padding-bottom:10px;font-size:45px;line-height:58px;}
+
bottom: 0;
+
width: 44%;
+
background: url("https://static.igem.org/mediawiki/2015/7/74/CHINA_CD_UESTC_homePRJBG.jpg") repeat center center #f2f2f2;
#slide12 .foto {float:none;}
+
#slide12 h5 {font-size:26px;}
+
 
+
 
+
.inset_shadow {top:76px;bottom:0;}
+
+
.menu {position:fixed;top:0;margin-top:0 !important;}
+
#undefined-sticky-wrapper {height:0 !important;}
+
+
+
+
 
}
 
}
 
+
#realcontent #homeIndex .beer .overlay {
@media (min-width: 480px) and (max-width: 766px) {
+
opacity: 0.2;
h1 {font-size:46px;line-height:115px;padding-bottom:0;}
+
filter: alpha(opacity=20);
#firstTitle {font-size: 60px;}
+
 
+
 
+
.filtr_bg {width:420px;left:50%;}
+
.slogan_text {font-size:21px;}
+
.left_bord, .right_bord {margin-bottom:6px;}
+
#slide1 h1 {font-size:30px;line-height:40px;}
+
#slide1 p {font-size:21px;line-height:42px;}
+
+
#slide1 .button {margin:50px auto 0;}
+
#slide1 .button:hover {margin:51px auto 0;}
+
+
.exhib_line_center {left:4px;height:79%;}
+
.exhib_date_top {left:0;}
+
.exhib_p_top {margin-left:120px;}
+
.exhib_date_left, .exhib_date_right {
+
top:-30px;
+
left:-42px;
+
height:115px;
+
padding-left:40px;
+
text-align:left;
+
}
+
#slide8 .exhib_date_left, #slide8 .exhib_date_right {
+
top:-30px;
+
left:-42px;
+
height:115px;
+
padding-left:40px;
+
text-align:left;
+
}
+
 
+
#slide8 .exhib_block .fleft {margin-left:42px;}
+
#slide8 .exhib_date_top {width:155px;}
+
#slide8 .exhib_p_top {margin-left:170px;}
+
#slide8 .exhib_line_center {height:83%;}
+
+
.exhib_cont, .exhib_block .fleft {
+
margin-left:42px;
+
margin-top:50px;
+
width:230px;
+
}
+
+
.gallery-list {margin-right:0 !important;}
+
+
/* _____________ menu ______________ */
+
#nav {margin:0;}
+
 
+
/* ____________ //menu _____________ */
+
 
+
/* _______________ JCAROUSEL ________________ */
+
+
/* ______________ //JCAROUSEL _______________ */
+
 
+
.container { width: 100%; }
+
+
.grid_1,
+
.grid_2,
+
.grid_3,
+
.grid_4,
+
.grid_5,
+
.grid_6,
+
.grid_7,
+
.grid_8,
+
.grid_9,
+
.grid_10,
+
.grid_11,
+
.grid_12 {width:420px;}
+
+
.fright{float:none;}
+
.fleft{float:none;}
+
+
 
}
 
}
 
+
#realcontent #homeIndex .beer span {
@media (max-width : 479px) {
+
  #firstTitle {font-size: 60px;}
+
 
+
h2 {font-size:40px;line-height:50px;margin:0;}
+
h4 {font-size:22px;line-height:28px;}
+
+
 
+
+
.padding_slide1 {padding:188px 0 100px;}
+
 
+
.filtr_bg {width:295px;}
+
.slogan_text {font-size:21px;}
+
.left_bord, .right_bord {margin-bottom:6px;width:70px;}
+
#slide1 h1 {font-size:24px;line-height:30px;}
+
#slide1 p {font-size:21px;line-height:42px;}
+
#slide1 .button {margin:40px auto 0;}
+
#slide1 .button:hover {margin:41px auto 0;}
+
+
+
+
.educ_block p {font-size:16px;}
+
+
.pers_inf li {font-size:12px;}
+
.pers_inf li span {width:110px;}
+
+
+
.exhib_line_center {left:4px;height:79%;}
+
.exhib_date_top {left:0;}
+
.exhib_p_top {margin-left:42px;padding-top:30px;}
+
.exhib_date_left, .exhib_date_right {
+
top:-30px;
+
left:-42px;
+
height:115px;
+
padding-left:40px;
+
text-align:left;
+
}
+
#slide8 .exhib_date_left, #slide8 .exhib_date_right {
+
top:-30px;
+
left:-42px;
+
height:115px;
+
padding-left:40px;
+
text-align:left;
+
}
+
+
#slide8 .exhib_block .fleft {margin-left:42px;}
+
#slide8 .exhib_date_top {width:155px;}
+
#slide8 .exhib_p_top {margin-left:42px;padding-top:30px;}
+
#slide8 .exhib_line_center {height:84%;}
+
+
.exhib_cont, .exhib_block .fleft {
+
margin-left:42px;
+
margin-top:50px;
+
width:210px;
+
}
+
+
.gallery-list {margin-right:0 !important;}
+
+
.client_foto img {width:300px;}
+
+
/* _______________ JCAROUSEL ________________ */
+
+
/* ______________ //JCAROUSEL _______________ */
+
 
+
/* ___________ SERV_BLOCK __________ */
+
+
+
/* __________ //SERV_BLOCK _________ */
+
 
+
.container { width: 100%; }
+
 
+
.grid_1,
+
.grid_2,
+
.grid_3,
+
.grid_4,
+
.grid_5,
+
.grid_6,
+
.grid_7,
+
.grid_8,
+
.grid_9,
+
.grid_10,
+
.grid_11,
+
.grid_12 {
+
width:300px;
+
}
+
+
.fright{float:none;}
+
.fleft{float:none;}
+
 
+
}
+
 
+
@media (max-width : 399px) {
+
.btn_dropdown {margin-right:3px;}
+
  #firstTitle {font-size: 60px;}
+
 
+
+
.gallery-list {width:270px;margin-left:15px !important;}
+
+
+
#map_block iframe {height:300px !important;}
+
+
+
.contact_form input[type="text"], .contact_form textarea {width:88%;}
+
+
+
.container { width: 100%; }
+
 
+
.grid_1,
+
.grid_2,
+
.grid_3,
+
.grid_4,
+
.grid_5,
+
.grid_6,
+
.grid_7,
+
.grid_8,
+
.grid_9,
+
.grid_10,
+
.grid_11,
+
.grid_12 {
+
width:295px;
+
}
+
+
}
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/*____________________________//grid.css________________________________*/
+
</style>
+
 
+
 
+
<style type="text/css">
+
/****************
+
menu
+
*********************/
+
.unselect {
+
-moz-user-select: all;
+
-webkit-user-select: all;
+
-ms-user-select: all;
+
-o-user-select: all;
+
user-select: all;
+
}
+
.ir {
+
font: 0/0 a;
+
text-shadow: none;
+
color: transparent;
+
}
+
.clearfix:after {
+
content: ".";
+
 
display: block;
 
display: block;
clear: both;
 
visibility: hidden;
 
line-height: 0;
 
height: 0;
 
 
}
 
}
.clearfix {
+
#realcontent #homeIndex .beer .middle {
 +
width: 100%;
 
display: inline-block;
 
display: inline-block;
 +
vertical-align: middle;
 +
line-height: normal;
 
}
 
}
html[xmlns] .clearfix {
+
#realcontent #homeIndex .beer .title {
 +
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
 
display: block;
 
display: block;
 +
zoom: 1;
 +
background-position: 0px 0px;
 +
width: 260px;
 +
height: 250px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
position: relative;
 +
top: auto;
 +
left: auto;
 +
margin: 0 auto;
 +
margin-bottom: 50px;
 
}
 
}
* html .clearfix {
+
#realcontent #homeIndex .beer .swipe {
height: 1%;
+
overflow: hidden;
 +
visibility: hidden;
 +
position: relative;
 
}
 
}
.middleHack {
+
#realcontent #homeIndex .beer .swipe .swipe-wrap {
zoom: 1;
+
overflow: hidden;
 +
position: relative;
 
}
 
}
.ib {
+
#realcontent #homeIndex .beer .swipe .swipe-wrap div {
display: -moz-inline-stack !important;
+
float: left;
display: inline-block !important;
+
width: 100%;
vertical-align: top;
+
position: relative;
 
}
 
}
.ibIe {
+
#realcontent #homeIndex .beer .swipe .swipe-wrap div img {
display: inline !important;
+
width: 50%;
zoom: 1;
+
height: 20%;
 +
display: block;
 +
margin: 0 auto;
 +
max-height: 80%;
 
}
 
}
.lt-ie8 .ib {
+
#realcontent #homeIndex .beer:hover .overlay {
display: inline !important;
+
opacity: 0;
zoom: 1;
+
filter: alpha(opacity=0);
 
}
 
}
.bgCover {
+
#realcontent #homeIndex .results {
 +
position: absolute;
 +
top: 0;
 +
left: 44%;
 +
right: 0;
 +
height: 50%;
 +
background: url("https://static.igem.org/mediawiki/2015/6/60/CHINA_CD_UESTC_homeresult.jpg") no-repeat center center #f2f2f2;
 
-webkit-background-size: cover;
 
-webkit-background-size: cover;
 
-moz-background-size: cover;
 
-moz-background-size: cover;
Line 521: Line 177:
 
background-size: cover;
 
background-size: cover;
 
}
 
}
.clear {
+
#realcontent #homeIndex .results .title {
clear: both;
+
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
 
display: block;
 
display: block;
 +
zoom: 1;
 +
background-position: -260px -4px;
 +
width: 300px;
 +
height: 140px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
margin-left: -145px;
 +
margin-top: -70px;
 
}
 
}
.translate3d {
+
#realcontent #homeIndex .Modeling {
-webkit-transform: translate3d(0, 0, 0);
+
position: absolute;
-moz-transform: translate3d(0, 0, 0);
+
top: 50%;
-ms-transform: translate3d(0, 0, 0);
+
left: 44%;
-o-transform: translate3d(0, 0, 0);
+
right: 28%;
transform: translate3d(0, 0, 0);
+
bottom: 0;
 +
background: url("https://static.igem.org/mediawiki/2015/1/1a/CD_UESTC_bg_ambassador.jpg") no-repeat center center #f2f2f2;
 +
        background-size:cover;
 +
-webkit-background-size:cover;
 +
-moz-background-size:cover;
 +
-o-background-size:cover;
 
}
 
}
.translate {
+
#realcontent #homeIndex .Modeling .title {
-webkit-transform: translate(0, 0);
+
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
-moz-transform: translate3d(0, 0);
+
-ms-transform: translate3d(0, 0);
+
-o-transform: translate3d(0, 0);
+
transform: translate3d(0, 0);
+
}
+
.noflick {
+
-webkit-backface-visibility: hidden;
+
}
+
a img {
+
border: none;
+
}
+
body {
+
background: #2d2c41;
+
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
+
}
+
/* ----------------------------
+
            menu
+
-----------------------------*/
+
ul {
+
list-style-type: none !important;
+
}
+
li {
+
list-style-type: none !important;
+
}
+
.accordion {
+
width: 100%;
+
max-width: 180px;
+
background: #303030;
+
-webkit-border-radius: 4px;
+
-moz-border-radius: 4px;
+
border-radius: 4px;
+
list-style-type: none !important;
+
margin-left:40px;
+
}
+
.accordion li {
+
list-style-type: none !important;
+
list-style: none;
+
}
+
.accordion .link {
+
cursor: pointer;
+
 
display: block;
 
display: block;
padding: 6px 6px 6px 30px;
+
zoom: 1;
color: #FFF;
+
background-position: -578px -4px;
font-size: 17px;
+
width: 274px;
font-weight: 700;
+
height: 170px;
border-bottom: 1px solid #CCC;
+
text-indent: -6000px;
position: relative;
+
text-align: left;
 +
margin-top: -78px;
 +
margin-left: -137px;
 
}
 
}
.accordion li:last-child .link {
+
#realcontent #homeIndex .Team {
border-bottom: 0;
+
}
+
.accordion li.open .link {
+
color: #FFE153;
+
}
+
.submenu {
+
display: none;
+
background: #444359;
+
font-size: 5px;
+
list-style-type: none !important;
+
}
+
.submenu li {
+
border-bottom: 1px solid #4b4a5e;
+
list-style-type: none !important;
+
list-style: none;
+
}
+
.submenu a {
+
display: block;
+
text-decoration: none;
+
color: #d9d9d9;
+
}
+
.submenu a:hover {
+
background: #b63b4d;
+
color: #FFF;
+
}
+
#menuHome {
+
color: #FFF;
+
font-size: 17px;
+
margin-right: 60px;
+
}
+
#menuHome:hover {
+
color: #FFE153;
+
}
+
/*.overflow {  overflow: hidden;}*/
+
.bgwidth {
+
width: 100%;
+
}
+
.bgheight {
+
height: 100%;
+
}
+
aside {
+
width: 260px;
+
height:100%;
+
background-color:#000;
+
 
position: absolute;
 
position: absolute;
top: 0;
+
top: 50%;
left: 0;
+
left: 72%;
 +
right: 0;
 
bottom: 0;
 
bottom: 0;
z-index: 11111111;
+
background: url("https://static.igem.org/mediawiki/2015/a/af/CD_UESTC_bg_social.jpg") no-repeat center center #f2f2f2;
-webkit-transition: all 200ms ease-out;
+
-webkit-background-size: 100% 100%;
-moz-transition: all 200ms ease-out;
+
-moz-background-size: 100% 100%;
-ms-transition: all 200ms ease-out;
+
-o-background-size: 100% 100%;
-o-transition: all 200ms ease-out;
+
background-size: 100% 100%;
transition: all 200ms ease-out;
+
-webkit-transform: translate3d(0, 0, 0);
+
-moz-transform: translate3d(0, 0, 0);
+
-ms-transform: translate3d(0, 0, 0);
+
-o-transform: translate3d(0, 0, 0);
+
transform: translate3d(0, 0, 0);
+
text-decoration:none;
+
 
+
 
}
 
}
 
+
#realcontent #homeIndex .Team .title {
aside #logo {
+
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
text-indent: -6000px;
+
margin: 0px 32px 0px 32px;
+
display: block;
+
}
+
aside #logo img {
+
display: block;
+
text-decoration:none;
+
width: 100%;
+
}
+
aside .separator {
+
background: url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_Separator.jpg") no-repeat top left transparent;
+
 
display: block;
 
display: block;
 
zoom: 1;
 
zoom: 1;
background-position: -23px -296px;
+
background-position: -892px 0px;
width: 143px;
+
width: 250px;
height: 3px;
+
height: 170px;
 
text-indent: -6000px;
 
text-indent: -6000px;
 
text-align: left;
 
text-align: left;
margin: 25px auto;
+
margin-top: -72px;
 +
margin-left: -125px;
 
}
 
}
aside nav {
+
.no-touch #realcontent #homeIndex a:hover .overlay {
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
+
opacity: 0;
padding:0 0 0 0 px;
+
filter: alpha(opacity=0);
 
}
 
}
aside nav a {
+
.touch #realcontent #homeIndex a.beer .overlay {
color: #ddd7d7;
+
opacity: 0;
line-height: 40px;
+
filter: alpha(opacity=0);
text-align: center;
+
display: none;
text-decoration: none;
+
font-size: 23px;
+
display: block;
+
letter-spacing: 2px;
+
 
}
 
}
  
* {
+
#realcontent {
margin: 0;
+
position: fixed;
padding: 0;
+
left: 260px;
-webkit-font-smoothing: antialiased;
+
top: 0;
-moz-osx-font-smoothing: grayscale;
+
right: 0;
}
+
.no-touch * {
+
-webkit-touch-callout: all;
+
-webkit-user-select: all;
+
-khtml-user-select: all;
+
-moz-user-select: all;
+
-ms-user-select: all;
+
user-select: all;
+
}
+
div, h1, h2, h3, h4, span, p, img, a {
+
-webkit-touch-callout: all;
+
-webkit-user-select: all;
+
-khtml-user-select: all;
+
-moz-user-select: all;
+
-ms-user-select: all;
+
user-select: all;
+
}
+
h1, h2, h3, h4, h5, h6 {
+
  color: black;
+
  background: none;
+
  font-weight: normal;
+
  margin: 0;
+
  padding-top: .5em;
+
  padding-bottom: .17em;
+
  border-bottom:none;
+
}
+
a {
+
color: #FFFFFF;
+
text-decoration: none;
+
}
+
.fa {
+
text-shadow: rgba(0,0,0,0.01) 0 0 1px;
+
}
+
img {
+
user-select: none;
+
user-drag: none;
+
}
+
html, body {
+
min-height: 100%;
+
width: 100%;
+
 
height: 100%;
 
height: 100%;
background: #000000;
 
 
overflow: hidden;
 
overflow: hidden;
color: #ffffff;
+
-webkit-transition: all 200ms ease-out;
font-family: 'din-condensed-web';
+
-moz-transition: all 200ms ease-out;
font-size: 14px;
+
-ms-transition: all 200ms ease-out;
font-weight: 400;
+
-o-transition: all 200ms ease-out;
}
+
transition: all 200ms ease-out;
.owl-wrapper-outer, .owl-wrapper, .owl-item {
+
height: 100%;
+
}
+
.fullBg {
+
position: absolute;
+
top: 0;
+
left: 0;
+
display: none;
+
}
+
.fullBg.display {
+
display: block;
+
}
+
.layoutHide {
+
position: absolute;
+
top: 0;
+
left: 0;
+
bottom: 0;
+
width: 0%;
+
background: #000000;
+
z-index: 40;
+
 
-webkit-transform: translate3d(0, 0, 0);
 
-webkit-transform: translate3d(0, 0, 0);
 
-moz-transform: translate3d(0, 0, 0);
 
-moz-transform: translate3d(0, 0, 0);
Line 759: Line 264:
 
-o-transform: translate3d(0, 0, 0);
 
-o-transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
 
background: url("") repeat top left transparent;
 
 
}
 
}
  
.touch .video .close {
+
 
top: 20px;
+
@media screen and (max-width: 1050px) {
right: 20px;
+
 
 +
html #realcontent {
 +
left: 200px;
 
}
 
}
@media screen and (max-height: 780px) {
 
html body aside #logo {
 
margin-top: 0px;
 
margin-bottom:0px;
 
 
}
 
}
html body aside nav a {
+
@media screen and (max-width: 1200px) {
line-height: 35px;
+
html #realcontent #homeIndex a .title {
font-size: 18px;
+
-webkit-transform: scale(0.7);
 +
-moz-transform: scale(0.7);
 +
-ms-transform: scale(0.7);
 +
-o-transform: scale(0.7);
 +
transform: scale(0.7);
 
}
 
}
html body aside .separator {
+
html #realcontent #homeIndex .beer .title {
margin: 20px auto;
+
margin-bottom: 20px;
 
}
 
}
html body aside .contact {
+
html #realcontent #homeIndex .beer {
font-size: 18px;
+
background-size: 150%;
 
}
 
}
 
}
 
}
@media screen and (max-height: 680px) {
+
@media screen and (max-width: 900px) {
html body aside #logo {
+
html #realcontent #homeIndex .results {
margin-top: 0px;
+
height: 40%;
margin-bottom: 0px;
+
 
}
 
}
html body aside nav a {
+
html #realcontent #homeIndex .Modeling {
line-height: 31px;
+
top: 40%;
font-size: 18px;
+
right: 0;
 +
bottom: auto;
 +
height: 30%;
 
}
 
}
html body aside .separator {
+
html #realcontent #homeIndex .Team {
margin: 10px auto;
+
left: 44%;
 +
top: 70%;
 
}
 
}
 
}
 
}
@media screen and (max-width: 1050px) {
+
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
 
+
html .beerDetails .middle {
html aside #logo {
+
-webkit-transform: translate(0, 0) scale(0.9);
margin-left: 20px;
+
-moz-transform: translate(0, 0) scale(0.9);
margin-right: 20px;
+
-ms-transform: translate(0, 0) scale(0.9);
 +
-o-transform: translate(0, 0) scale(0.9);
 +
transform: translate(0, 0) scale(0.9);
 
}
 
}
 
 
}
 
}
 +
@media screen and (max-width: 700px) {
  
@media screen and (max-width: 700px) {
+
html #realcontent {
 
+
html aside #mobileMenuButton {
+
display: block;
+
}
+
html #RightContent {
+
 
left: 0;
 
left: 0;
 
right: auto;
 
right: auto;
 
width: 100%;
 
width: 100%;
    height:100%;
 
 
}
 
}
 
}
 
}
/*float RightContent*/
 
#content {
 
width:auto;
 
height: 2000px;
 
  
}
 
 
.firstHeading {
 
display: none;
 
}
 
#top {
 
display: none;
 
}
 
h1 {
 
text-decoration:none;
 
font-size:100%;}
 
</style>
 
<!--  finished menu-->
 
 
 
<style type="text/css">
 
/*************************************************
 
whole right section
 
 
***********************************************/
 
#RightSection {
 
position: fixed;
 
left: 260px;
 
top: 0;
 
right: 0;
 
height:100%;
 
background:#F0F0F0;
 
background-image:url("https://static.igem.org/mediawiki/2015/8/8e/CHINA_CD_UESTC_PROJECTbg.jpg");
 
overflow-y: scroll;
 
background-repeat: repeat;
 
background-size: 180px;
 
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
z-index:1;
 
 
}
 
/*************************************************
 
first title
 
***********************************************/
 
#title {
 
    position: fixed;
 
font-size: 80px;
 
left:480px;
 
z-index: 5;
 
 
}
 
#firstTitle {
 
font-family:  Arial, Helvetica, sans-serif;
 
    position: fixed;
 
margin-top:0;
 
    margin-bottom:0;
 
top: 60px;
 
font-size: 80px;
 
left:40%;
 
color: #fdf7c1;
 
overflow: hidden;
 
 
}
 
 
 
/*************************************************
 
right text frame container
 
***********************************************/
 
#RightContent {
 
float: right;
 
position: fixed;
 
left: 260px;
 
top: 0px;
 
right: 0;
 
height:100%;
 
overflow-y: scroll;
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
z-index:5;
 
 
}
 
.transparent_class  {
 
border-radius: 0px;
 
position: absolute;
 
top: 350px;
 
left: 50px;
 
right: 50px;
 
background-color: #0072E3;
 
color:#000000;
 
filter:alpha(opacity=80);
 
-moz-opacity:0.8;
 
-khtml-opacity: 0.8;
 
opacity: 0.8;
 
}
 
.blockWords{
 
font-family:Arial, Helvetica, sans-serif;
 
font-size: 17px;
 
padding: 15px;
 
color: #ffffff;
 
}
 
/*************************************************
 
testtext
 
***********************************************/
 
#RightContentText {
 
position: absolute;
 
top: 510px;
 
left:18px;
 
right:18px;
 
background:#FFFFFF;
 
color: #000000;
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
}
 
@media (min-width: 540px) {
 
  #firstTitle {font-size: 60px;}
 
}
 
@media (min-width: 768px) {
 
 
  #firstTitle {font-size: 60px;}
 
 
}
 
 
 
@media (min-width: 992px) {
 
 
  #firstTitle {font-size: 60px;}
 
 
}
 
 
@media (min-width: 1200px) {
 
  #firstTitle {font-size: 80px;}
 
 
 
}
 
#content{
 
height:90px;
 
  padding: 0px 0px 0px 0px;
 
  border-left: 0px solid #444444;
 
  border-right: 0px solid #444444;
 
}
 
 
</style>
 
</style>
 +
</head>
 
<body id="homeIndexBody">
 
<body id="homeIndexBody">
<aside>
 
      <div id="mobileMenuButton"> <span></span> <span></span> <span></span> </div>
 
      <h1 id="logo"> <img alt="White Frontier Brewery" src="https://static.igem.org/mediawiki/2015/b/bb/CD_UESTC_whitefrontier.png"> </h1>
 
      <div class="separator"></div>
 
      <nav >
 
    <!-- Contenedor -->
 
    <ul id="accordion" class="accordion">
 
          <li>
 
        <div class="link"><a id="menuHome" href="https://2015.igem.org/Team:CHINA_CD_UESTC/homeDemo">HOME</a></div>
 
      </li>
 
          <li>
 
        <div class="link">PROJECT</div>
 
        <ul class="submenu">
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Background">Background</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/SystemDesign">System Design</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Method">Method</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Modeling">Modeling</a></li>
 
            </ul>
 
      </li>
 
          <li>
 
        <div class="link">RESULTS</div>
 
        <ul class="submenu">
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Results">Results</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Discussion">Discussion</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Future">Future</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Parts">Parts</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/References">References</a></li>
 
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Judging">Judging</a></li>
 
  
            </ul>
+
<div id="realcontent">
      </li>
+
<div id="homeIndex">
          <li>
+
<div class="contentInner">
        <div class="link">TEAM</div>
+
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Description" class="beer middleParent">
        <ul class="submenu">
+
<div class="layoutHide"></div>
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Members">Members</a></li>
+
<span class="overlay"></span>
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Instructors">Instructors</a></li>
+
<span class="middle">
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Attributions">Attributions</a></li>
+
<h1 class="title">Project</h1>
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Gallery">Gallery</a></li>
+
<span class="swipe" id="swipeProject">
            </ul>
+
<span class="swipe-wrap">
      </li>
+
<div>
          <li>
+
<img alt="La Bruson" src="https://static.igem.org/mediawiki/2015/8/83/CHINA_CD_UESTC_homeswape01.png" />
        <div class="link">HUMAN PRACTICES</div>
+
</div>
        <ul class="submenu">
+
<div>
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Overview">Overview</a></li>
+
<img alt="Les Faverges" src="https://static.igem.org/mediawiki/2015/9/90/CHINA_CD_UESTC_homeswape02.png" />
              <li><a href="#">....</a></li>
+
</div>
            </ul>
+
<div>
      </li>
+
<img alt="Backside Montfort" src="https://static.igem.org/mediawiki/2015/5/55/CHINA_CD_UESTC_homeswape03.png" />
          <li>
+
</div>
        <div class="link">NOTEBOOK</div>
+
</span>
        <ul class="submenu">
+
</span>
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Journal">Journal</a></li>
+
</span>
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Safety">Safety</a></li>
+
</a>
              <li><a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Protocol">Protocol</a></li>
+
            </ul>
+
      </li>
+
        </ul>
+
  </nav>
+
      <div class="separator"></div>
+
    </aside>
+
  
 
+
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Results" class="results">
 
+
<div class="layoutHide"></div>
 
+
<img class="fullBg" onmouseover="resultsGalleryNext()"/>
<div id="RightSection"></div>
+
<span class="overlay"></span>
 
+
<h2 class="title">Let's discover our results White Frontier Brewery</h2>
<div id="title">
+
<div class="gallery">
 
+
<img src="https://static.igem.org/mediawiki/2015/1/10/CHINA_CD_UESTC_homere03.jpg" class="fullBg display " />
<div id="firstTitle"><p><B>PROJECT</B></p></div>
+
<img src="https://static.igem.org/mediawiki/2015/3/31/CHINA_CD_UESTC_homere04.jpg" class="fullBg display " />
</div>
+
</div>
 
+
</a>
<div id="RightContent">
+
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Modeling" class="Modeling">
<div class="transparent_class ">
+
<div class="layoutHide"></div>
<p class="blockWords">&nbsp;&nbsp;We are a skillful and persistent group of nine Finns. We started as a group of students who didn't really know each other, assuming that we were going to spend our summer studying synthetic biology with strange colleagues. In the end we got a bunch of new friends and (in addition to studying synthetic biology) we just might have spent one of the best summers of our lives.</p>
+
<img class="fullBg"   />
</div>
+
<span class="overlay"></span>
 
+
<h2 class="title">Modeling</h2>
<div id="RightContentText">
+
</a>
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;">
+
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Members" class="Team" >
<div class="container clearfix">
+
<div class="layoutHide"></div>
+
<img class="fullBg"  />
<div id="content" class="grid_12">
+
<span class="overlay"></span>
<h2>The new Magical Bacteria: Magnetotactic E.Coli</h2>
+
<h2 class="title">Team</h2>
</div>
+
</a>
<div class="clear"></div>
+
+
<div id="content">
+
<div class="grid_8">
+
<h4>2015-UESTC TEAM</h4>
+
<p>There is a special microbe in nature which can be attracted by magnet ---Magnetotactic bacterium(MTB). Scientists are very interested in it because its Magnetotaxis. Magnetosome, some Fe3O4 nanocrystals covered by membrane with unprecedented magnetic properties, is the reason why MTB has the ability to be attracted by magnet. The process of magnetosome formation which is controled by many related gene cluster is very complex , including----- membrane invaginate forming vesicle---absorbing Iron ions -----Iron ions being oxidized into Fe3O4 ------magnetosome connect to each other and form nanopaticle chain.</p>
+
 
+
<P>A lot of great value about magnetotaxis application can be excavated . But MTB is anaerobic, and hard to be raised , also hard to transform. Obviously it is hard to modify and research MTB at molecular level . the large size and the complexity of related gene cluster is also a reason restricted the use of magnetotaxis.</P>
+
 
+
<p>In our project, we are aiming to transfer mamAB、mamGFDC、mms6、mamXYZ four main gene clusters which are related to the formation of magnetosome into E. Coli through recombinant plasmid. The E.Coli will produce magnetosome and abtain the magnetotactic ability. The Magnetotactic E.Coli will be applied in a variety of areas. We will explore the potential in the applaction of Microbial Fuel Cell. </p>
+
 
+
<p>In addition to this ,we will research several genes related to the producing of magnetosome, find out the Specific function in this processing.</p>
+
 
+
 
+
</div>
+
 
+
<div class="clear"></div>
+
+
 
</div>
 
</div>
 
 
</div>
 
</div>
 
</div>
 
</div>
 +
<script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>
  
 +
<script type="text/javascript">//<![CDATA[
 +
var controllerName="home";
 +
var actionName="index";
 +
var base="";
 +
var baseLang="/en";
 +
var lang="en";
 +
data=[];//]]>
 +
</script>
 +
<script type="text/javascript">
 +
//resultsIntercal change
 +
        var resultsInterval;
 +
        function resultsGalleryNext() {
 +
            var $active = $('#realcontent #homeIndex a.results .gallery img.active');
 +
            if ( $active.length == 0 ) $active = $('#realcontent #homeIndex a.results .gallery img:last');
 +
            var $next =  $active.next().length ? $active.next() : $('#realcontent #homeIndex a.results .gallery img:first');
 +
            $active.addClass('lastActive');
 +
            $next.css({opacity: 0.0})
 +
                .addClass('active')
 +
                .animate({opacity: 1.0}, 700, function() {
 +
                    $active.removeClass('active lastActive');
 +
                });
 +
        }
 +
        $('.no-touch #realcontent #homeIndex a.results').hover(function(){
 +
            var $gallery = $(this).find('.gallery');
 +
            $gallery.stop().animate({
 +
                scale:1,
 +
                opacity:1
 +
            },500, 'easeOutCubic');
 +
            resultsInterval = window.setInterval(resultsGalleryNext, 1000);
 +
        }, function(){
 +
            window.clearInterval(resultsInterval);
 +
            var $gallery = $(this).find('.gallery');
 +
            $gallery.stop().animate({
 +
                scale:1.5,
 +
                opacity:0
 +
            },500, 'easeOutCubic', function(){
 +
                window.clearInterval(resultsInterval);
 +
            });
 +
        });
  
  
  
 +
        // swipe beer
 +
        var swipeProject = new Swipe(document.getElementById('swipeProject'), {
 +
            speed: 400,
 +
            auto: false,
  
 +
            continuous: true,
 +
            disableScroll: false,
 +
            stopPropagation: false,
 +
            callback: function(index, elem) {},
 +
            transitionEnd: function(index, elem) {}
 +
        });
  
</div>
+
        var timeout;
</div>
+
        function again()
</div>
+
        {
 +
            window.clearTimeout(timeout);
 +
            timeout = window.setTimeout(function(){
 +
                swipeProject.next();
 +
                again();
 +
            }, 1400);
 +
        }
 +
        $('.no-touch #realcontent #homeIndex a.beer').hover(function(){
 +
            swipeProject.next();
 +
            again();
 +
        }, function(){
 +
            window.clearTimeout(timeout);
 +
        });
  
 +
    </script>
 
</body>
 
</body>
 
 
 
</html>
 
</html>

Latest revision as of 18:37, 11 September 2015

<!DOCTYPE html>