Difference between revisions of "Team:CHINA CD UESTC/Judging"

(Undo revision 162405 by Zhangmanni2015 (talk))
Line 1: Line 1:
−
/* General Slides */  
+
{{Template:Team:CHINA_CD_UESTC/menu}}
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
 
 +
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
 +
</head>
 +
<style type="text/css">
 
/*************************************************
 
/*************************************************
−
first title
+
whole right section
−
***********************************************/
+
−
#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;
 
−
color: #FFFFAA;
 
−
overflow: hidden;
 
−
 
−
}
 
−
 
−
 
−
/*************************************************
 
−
right text frame container
 
 
***********************************************/
 
***********************************************/
−
#RightContent {
+
#RightSection {
−
float: right;
+
 
position: fixed;
 
position: fixed;
 
left: 260px;
 
left: 260px;
−
top: 0px;
+
top: 0;
 
right: 0;
 
right: 0;
 
height:100%;
 
height:100%;
 +
background:#F0F0F0;
 +
background-image:url("https://static.igem.org/mediawiki/2015/8/81/CHINA_CD_UESTC_RESULTSbg.jpg");
 
overflow-y: scroll;
 
overflow-y: scroll;
 +
background-repeat: repeat;
 +
background-size: 180px;
 
transition: all 200ms ease-out;
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
−
z-index:5;
+
z-index:1;
  
 
}
 
}
−
.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;
 
−
}
 
−
 
−
 
−
#content{
 
−
height:90px;
 
−
}
 
−
#HZpic {
 
−
background-position:0 0 !important;
 
−
width:100%;
 
−
padding:10px 40px 20px 40px;
 
−
    margin-top:20px;
 
−
        }
 
−
#content{
 
−
  height:90px;
 
−
  padding: 0px 0px 0px 0px;
 
−
  border-left: 0px solid #444444;
 
−
  border-right: 0px solid #444444;
 
−
  background:none;
 
−
}
 
 
/*************************************************
 
/*************************************************
−
right text frame container
+
first title
 
***********************************************/
 
***********************************************/
 +
 
#firstTitle {
 
#firstTitle {
−
font-family: Arial, Helvetica, sans-serif;
+
left:600px;
−
        position: fixed;
+
−
        width:100%;
+
−
margin-top:0;
+
−
        margin-bottom:0;
+
−
top: 60px;
+
−
font-size: 80px;
+
−
color: #FFFFAA;
+
−
overflow: hidden;
+
  
 
}
 
}
  
−
.transparent_class  {
+
</style>
−
border-radius: 0px;
+
<body id="homeIndexBody">
−
position: absolute;
+
<div id="RightSection"></div>
−
top: 350px;
+
−
        width:1000px;
+
−
left: 50px;
+
−
right: 50px;
+
−
background-color: #0072E3;
+
−
color:#000000;
+
−
filter:alpha(opacity=80);
+
−
-moz-opacity:0.8;
+
−
-khtml-opacity: 0.8;
+
−
opacity: 0.8;
+
−
}
+
  
−
#RightContentText {
+
<div id="title">
−
position: absolute;
+
−
top: 510px;
+
−
    width: 1040px;
+
−
left:28px;
+
−
right:8px;
+
−
background:#FFFFFF;
+
−
color: #000000;
+
−
transition: all 200ms ease-out;
+
−
transform: translate3d(0, 0, 0);
+
−
}
+
  
 +
<div id="firstTitle">
 +
<p>
 +
<B>JUDGING</B>
 +
</p>
 +
</div>
 +
</div>
  
−
.slide{
+
<div id="RightContent">
−
background-attachment: fixed;
+
<div class="transparent_class ">
−
width:100%;
+
<p class="blockWords">
−
height:100%;
+
&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.
−
position: relative;
+
</p>
−
padding:0 10px 0 10px;
+
</div>
−
margin: 0 10px 0 10px;
+
−
z-index:12;
+
−
overflow:hidden;
+
−
}
+
  
 +
<div id="RightContentText">
 +
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;">
 +
<div class="container clearfix">
 +
<div id='bronze'>
 +
<h3>6/6 Bronze Requirements</h3>
 +
</div>
 +
<div class="req_list">
 +
<h1>fermentum egestas, tortor ante vestibulum est, eget scelerisquefermentum egestas, tortor ante vestibulum est, eget scelerisque</h1>
 +
<p>
 +
Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.
 +
</p>
 +
<h1>6/6 Bronze Requirements</h1>
 +
<p>
 +
Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.
 +
</p>
 +
</div>
 +
</div>
 +
</div>
  
−
h2 {
+
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;">
−
display:block;
+
<div class="container clearfix">
−
margin:0 0 23px;
+
<div id='silver'>
−
padding:0;
+
<h3>4/4 Silver Requirements</h3>
−
text-transform:none;
+
</div>
−
text-align:left;
+
<div class="req_list">
−
font-style:normal;
+
<h1>6/6 Bronze Requirements</h1>
−
border-bottom:1px solid #e0e0e0;
+
<p>
−
font-family: Helvetica ;
+
Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.
−
font-size: 40px;
+
</p>
−
line-height: 82px;
+
</div>
−
color:#343434;
+
</div>
−
font-weight: 300;
+
</div>
−
}
+
  
−
h3 {
+
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;">
−
margin:0;
+
<div class="container clearfix">
−
padding:40px 0 32px 0;
+
<div id='gold'>
−
text-align:center;
+
<h3>6/6 Gold Requirements</h3>
−
font-family: Helvetica ;
+
</div>
−
font-weight:800;
+
<div class="req_list">
−
font-size:32px;
+
<h1>6/6 Bronze Requirements</h1>
−
font-style:normal;
+
<p>
−
line-height:36px;
+
Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.
−
}
+
</p>
 +
</div>
 +
</div>
 +
</div>
  
 +
</div>
  
−
h4 {
+
</div>
−
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 {
+
−
background:url(../images/effect_2.png) repeat left top;
+
−
position:relative;
+
−
top:0;
+
−
bottom:-57px;
+
−
height:100%;
+
−
z-index:999 !important;
+
−
}
+
−
 
+
−
/*________________________judging__________________*/
+
−
#bronze h3{
+
−
background-image: url();
+
−
background-repeat: no-repeat;
+
−
text-decoration:underline;
+
−
color: #e8b77c;
+
−
}
+
−
#silver h3{
+
−
background-image: url();
+
−
background-repeat: no-repeat;
+
−
text-decoration:underline;
+
−
color: #b4c8cb;
+
−
}
+
−
#gold h3{
+
−
background-image: url();
+
−
background-repeat: no-repeat;
+
−
text-decoration:underline;
+
−
color: #fbca23;
+
−
}
+
−
 
+
−
.req_list{
+
−
width: 90%;
+
−
}
+
−
.req_list h1{
+
−
background:url(https://static.igem.org/mediawiki/2015/4/4e/CHINA_CD_UESTC_YesIcon.png) no-repeat;
+
−
background-size: 6%;
+
−
margin:0;
+
−
padding:10px 0 0px 50px;
+
−
margin-left: 50px;
+
−
font-family: Helvetica ;
+
−
font-weight:800;
+
−
font-size:20px;
+
−
font-style:normal;
+
−
line-height:36px;
+
−
}
+
−
.req_list p{
+
−
margin:0;
+
−
margin-left: 100px;
+
−
font-family: 'Microsoft Yahei' ;
+
−
font-weight:500;
+
−
font-size:15px;
+
−
font-style:normal;
+
−
line-height:26px;
+
−
}
+
−
/* ____________________________________ Slide 2 标准文本____________________________________ */
+
−
 
+
−
#slide2 {
+
−
width:100%;
+
−
padding:20px 0 20px;
+
−
}
+
−
 
+
−
.det_inf {margin-bottom:24px;
+
−
}
+
−
.det_inf li {margin-bottom:10px;
+
−
}
+
−
.det_inf li a  {
+
−
color:#929292;
+
−
}
+
−
.det_inf li a:hover {
+
−
color:#f14833;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* ___________________________________ //Slide 2 ___________________________________ */
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* ____________________________________ Slide 4  service旋转四列____________________________________ */
+
−
 
+
−
#slide4 {
+
−
width:100%;
+
−
padding:86px 0 69px;
+
−
}
+
−
#slide4 h2 {
+
−
color:#b8b8b8;
+
−
border-bottom:1px solid #3b3b3b;
+
−
}
+
−
 
+
−
 
+
−
/* ____________ SERVICES_BLOCK ___________ */
+
−
a.servc_block {
+
−
display:block;
+
−
position:relative;
+
−
text-align:center;
+
−
color:#6f6f6f;
+
−
}
+
−
 
+
−
.icon_bord {
+
−
position:relative;
+
−
z-index:10;
+
−
top:0;
+
−
left:50%;
+
−
margin-left:-51px;
+
−
width:102px;
+
−
height:116px;
+
−
}
+
−
 
+
−
.icon1, .icon1_h {
+
−
position:absolute;
+
−
z-index:1;
+
−
top:0;
+
−
left:0;
+
−
}
+
−
 
+
−
.servc_block .icon1 {
+
−
transition: all 0.5s ease-out;
+
−
    opacity: 1;
+
−
}
+
−
.servc_block:hover .icon1 {
+
−
transform: rotate(720deg) scale(0);
+
−
    opacity: 0;
+
−
}
+
−
 
+
−
.servc_block .icon1_h {
+
−
transition: all 0.5s ease-out;
+
−
transform: rotate(720deg) scale(0);
+
−
    opacity: 0;
+
−
}
+
−
.servc_block:hover .icon1_h {
+
−
transform: rotate(720deg) scale(1);
+
−
    opacity: 1;
+
−
transition-delay: 0.4s;
+
−
}
+
−
 
+
−
.servc_block p {
+
−
font-family: Helvetica ;
+
−
font-weight:300;
+
−
font-size:20px;
+
−
line-height:22px;
+
−
color:#a3a3a3;
+
−
transition: all 0.2s ease-in-out;
+
−
-moz-transition: all 0.2s ease-in-out;
+
−
-webkit-transition: all 0.2s ease-in-out;
+
−
-o-transition: all 0.2s ease-in-out;
+
−
}
+
−
.servc_block:hover p {
+
−
color:#f14833;
+
−
transition-delay: 0.7s;
+
−
}
+
−
 
+
−
 
+
−
/* ____________ SERVICES_BLOCK ___________ */
+
−
 
+
−
/* ___________________________________ //Slide 4 ___________________________________ */
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* ____________________________________ Slide 6 时间轴____________________________________ */
+
−
 
+
−
#slide6 {
+
−
background:url(../images/slide6_bg.jpg) repeat left top;
+
−
width:100%;
+
−
padding:30px 0 30px;
+
−
}
+
−
 
+
−
#slide6 h2 {color:#222;
+
−
}
+
−
 
+
−
/* ____________________ exhib_block ____________________ */
+
−
.exhib_block {position:relative;}
+
−
.exhib_block .fleft {margin-left:1px;}
+
−
.exhib_line_center {
+
−
position:absolute;
+
−
left:50%;
+
−
top:12px;
+
−
width:1px;
+
−
height:83%;
+
−
background:#c3c3c3;
+
−
}
+
−
.exhib_block p {
+
−
padding-bottom:9px;
+
−
font-family: Helvetica ;
+
−
font-weight:400;
+
−
font-size:20px;
+
−
color:#343434;
+
−
transition: all 0.2s ease-in-out;
+
−
-moz-transition: all 0.2s ease-in-out;
+
−
-webkit-transition: all 0.2s ease-in-out;
+
−
-o-transition: all 0.2s ease-in-out;
+
−
}
+
−
.exhib_cont:hover p {color:#f14833;
+
−
}
+
−
 
+
−
.exhib_p_top {margin-left:80px;
+
−
}
+
−
 
+
−
.exhib_cont {
+
−
position:relative;
+
−
width:420px;
+
−
margin-top:30px;
+
−
padding:13px 20px 9px;
+
−
background:#fff;
+
−
color:#8d8d8d;
+
−
border:1px solid #dedede;
+
−
border-radius:12px;
+
−
transition: all 0.2s ease-in-out;
+
−
-moz-transition: all 0.2s ease-in-out;
+
−
-webkit-transition: all 0.2s ease-in-out;
+
−
-o-transition: all 0.2s ease-in-out;
+
−
}
+
−
 
+
−
 
+
−
.exhib_block .fright {
+
−
position: relative;
+
−
left:52%;
+
−
margin-top:50px;
+
−
}
+
−
 
+
−
 
+
−
.exhib_cont:hover {
+
−
-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.15);
+
−
    -moz-box-shadow: 0 0 16px rgba(0,0,0,0.15);
+
−
          box-shadow: 0 0 16px rgba(0,0,0,0.15);
+
−
}
+
−
 
+
−
.exhib_date_right, .exhib_date_left, .exhib_date_top {
+
−
display:block;
+
−
position:absolute;
+
−
font-family: Helvetica ;
+
−
font-weight:300;
+
−
font-size:26px;
+
−
line-height:20px;
+
−
color:#91B517;
+
−
transition: all 0.2s ease-in-out;
+
−
-moz-transition: all 0.2s ease-in-out;
+
−
-webkit-transition: all 0.2s ease-in-out;
+
−
-o-transition: all 0.2s ease-in-out;
+
−
}
+
−
.exhib_date_top {
+
−
left:49.5%;
+
−
top:0;
+
−
width:95px;
+
−
text-align:right;
+
−
}
+
−
 
+
−
.exhib_date_left {
+
−
left:-150px;
+
−
top:27px;
+
−
}
+
−
.exhib_date_right {
+
−
right:-190px;
+
−
top:27px;
+
−
text-align:right;
+
−
}
+
−
.exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:30px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* ___________________ //exhib_block ___________________ */
+
−
 
+
−
 
+
−
 
+
−
/* ___________________________________ //Slide 6 ___________________________________ */
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* ____________________________________ Slide 10 照片____________________________________ */
+
−
#slide10 {
+
−
background:url(../images/slide10_bg.jpg) repeat left top;
+
−
width:100%;
+
−
padding:86px 0 69px;
+
−
}
+
−
 
+
−
/* _________________ PORTFOLIO ________________ */
+
−
.gallery-list {
+
−
text-align:center;
+
−
margin-right:-20px !important;
+
−
}
+
−
#slide10 .hover_img {
+
−
overflow:hidden;
+
−
position:relative;
+
−
height:291px;
+
−
width:255px;
+
−
background:#fff;
+
−
}
+
−
 
+
−
 
+
−
.img_block {
+
−
display:inline-block;
+
−
margin:0;
+
−
width:251px;
+
−
height:100%;
+
−
}
+
−
 
+
−
.img_block_bg {
+
−
position:absolute;
+
−
z-index:100;
+
−
left:0;
+
−
top:0;
+
−
}
+
−
 
+
−
.portfolio_zoom, .portfolio_link {
+
−
width:42px;
+
−
height:42px;
+
−
position:absolute;
+
−
z-index:110;
+
−
bottom:85px;
+
−
background-repeat:no-repeat;
+
−
opacity:0.61;
+
−
filter: alpha(opacity=61);
+
−
transition: all 0.1s ease-in-out;
+
−
-moz-transition: all 0.1s ease-in-out;
+
−
-webkit-transition: all 0.1s ease-in-out;
+
−
-o-transition: all 0.1s ease-in-out;
+
−
}
+
−
.portfolio_zoom {
+
−
left:-77px;
+
−
background-image:url(../images/zoom.png);
+
−
}
+
−
.portfolio_link {
+
−
right:-77px;
+
−
background-image:url(../images/link.png);
+
−
}
+
−
.portfolio_zoom:hover, .portfolio_link:hover {
+
−
opacity:1;
+
−
filter: alpha(opacity=100);
+
−
z-index:310;
+
−
}
+
−
.portfolio_zoom a, .portfolio_link a {
+
−
display:block;
+
−
width:42px;
+
−
height:42px;
+
−
text-indent:-9999px;
+
−
}
+
−
 
+
−
.img_block:hover .portfolio_zoom {left:83px;transition-delay: 0.3s;
+
−
}
+
−
.img_block:hover .portfolio_link {right:84px;transition-delay: 0.3s;
+
−
}
+
−
 
+
−
.item_description {
+
−
position:absolute;
+
−
top:-273px;
+
−
width:255px;
+
−
height:291px;
+
−
padding:0;
+
−
background:#f14833;
+
−
font-family: Helvetica ;
+
−
font-size: 14px;
+
−
line-height: 20px;
+
−
font-weight: 400;
+
−
text-align:center;
+
−
color:#fff;
+
−
transition: all 0.3s ease-in-out;
+
−
-moz-transition: all 0.3s ease-in-out;
+
−
-webkit-transition: all 0.3s ease-in-out;
+
−
-o-transition: all 0.3s ease-in-out;
+
−
}
+
−
.item_description p {
+
−
padding:74px 10px 0;
+
−
text-transform:uppercase;
+
−
font-size:18px;
+
−
}
+
−
.img_block:hover .item_description {
+
−
top:20px;
+
−
}
+
−
.img_block .portf_img {
+
−
position:absolute;
+
−
left:18px;
+
−
top:18px;
+
−
transition: all 0.3s ease-in-out;
+
−
-moz-transition: all 0.3s ease-in-out;
+
−
-webkit-transition: all 0.3s ease-in-out;
+
−
-o-transition: all 0.3s ease-in-out;
+
−
}
+
−
.img_block:hover .portf_img {
+
−
position:absolute;
+
−
top:235px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* ________________ //PORTFOLIO _______________ */
+
−
 
+
−
/* ___________________________________ //Slide 10 ___________________________________ */
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* ____________________________________ Slide 12 左图右文____________________________________ */
+
−
 
+
−
#slide12 {
+
−
background:url(..) repeat left top;
+
−
background-position:0 0 !important;
+
−
width:100%;
+
−
padding:10px 0 20px;
+
−
        margin-top:20px;
+
−
}
+
−
 
+
−
#slide12 h2 {color:#OOOOOO;
+
−
            font-size:50px !important;
+
−
}
+
−
 
+
−
#slide12 p {color:#888888;
+
−
}
+
−
#slide12 .foto {
+
−
float:left;
+
−
margin:0 20px 20px 0;
+
−
}
+
−
 
+
−
#slide12 h5 {
+
−
margin:50px 0 0 0;
+
−
padding-bottom:8px;
+
−
text-transform:none;
+
−
font-family: Helvetica ;
+
−
font-size: 32px;
+
−
line-height: 31px;
+
−
font-weight: 300;
+
−
color:#acacac;
+
−
}
+
−
#slide12 h6 {
+
−
margin:0 0 0 0;
+
−
padding-bottom:2px;
+
−
text-transform:none;
+
−
font-family: Helvetica ;
+
−
font-size: 20px;
+
−
line-height: 23px;
+
−
font-weight: 300;
+
−
color:#acacac;
+
−
}
+
−
.client_foto {
+
−
float:left;
+
−
position:relative;
+
−
margin:0 5px 10px 0;
+
−
height:460px;
+
−
width:400px;
+
−
}
+
−
.client_foto img {
+
−
position:absolute;
+
−
left:0;
+
−
top:0;
+
−
z-index:10;
+
−
width: 90%;
+
−
}
+
−
.foto {z-index:5 !important;}
+
−
 
+
−
.contact_det,
+
−
.contact_det a {
+
−
color:#888888;
+
−
line-height:26px;
+
−
}
+
−
.contact_det a:hover {color:#f14833;}
+
−
 
+
−
 
+
−
 
+
−
/* ____________________________________ //Slide 12 ____________________________________ */
+
−
 
+
−
 
+
−
/*______________________________________gallery________________________________________*/
+
−
/***************gallery***/
+
−
    @font-face {
+
−
    font-family: 'BebasNeueRegular';
+
−
    src: url('fonts/BebasNeue-webfont.eot');
+
−
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
+
−
        url('fonts/BebasNeue-webfont.woff') format('woff'),
+
−
        url('fonts/BebasNeue-webfont.ttf') format('truetype'),
+
−
        url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
+
−
    font-weight: normal;
+
−
    font-style: normal;
+
−
}
+
−
 
+
−
 
+
−
.clr{
+
−
clear: both;
+
−
}
+
−
 
+
−
 
+
−
.cr-gallery{
+
−
width: 600px;
+
−
height: 400px;
+
−
position: relative;
+
−
margin: 0 auto;
+
−
overflow: hidden;
+
−
border: 20px solid #fff;
+
−
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+
−
}
+
−
.cr-gallery label{
+
−
font-style: italic;
+
−
width: 150px;
+
−
height: 30px;
+
−
cursor: pointer;
+
−
color: #fff;
+
−
line-height: 32px;
+
−
font-size: 24px;
+
−
float:left;
+
−
position: relative;
+
−
margin-top:350px;
+
−
z-index: 1000;
+
−
}
+
−
.cr-gallery label:before{
+
−
content:'';
+
−
width: 34px;
+
−
height: 34px;
+
−
background: rgba(130,195,217,0.9);
+
−
position: absolute;
+
−
left: 50%;
+
−
margin-left: -17px;
+
−
border-radius: 50%;
+
−
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
+
−
z-index:-1;
+
−
}
+
−
.cr-gallery label:after{
+
−
width: 1px;
+
−
height: 400px;
+
−
content: '';
+
−
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+
−
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
+
−
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+
−
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+
−
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+
−
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+
−
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
+
−
position: absolute;
+
−
bottom: -20px;
+
−
right: 0px;
+
−
}
+
−
.cr-gallery label.cr-label-img-4:after{
+
−
width: 0px;
+
−
}
+
−
.cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1,
+
−
.cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2,
+
−
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3,
+
−
.cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{
+
−
color: #68abc2;
+
−
}
+
−
.cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
+
−
.cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
+
−
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
+
−
.cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
+
−
background: #fff;
+
−
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
+
−
}
+
−
.cr-gallery input{
+
−
display: none;
+
−
}
+
−
.cr-bgimg{
+
−
width: 600px;
+
−
height: 400px;
+
−
position: absolute;
+
−
left: 0px;
+
−
top: 0px;
+
−
z-index: 1;
+
−
}
+
−
.cr-bgimg{
+
−
background-repeat: no-repeat;
+
−
background-position: 0 0;
+
−
}
+
−
.cr-bgimg div{
+
−
width: 150px;
+
−
height: 100%;
+
−
position: relative;
+
−
float: left;
+
−
overflow: hidden;
+
−
background-repeat: no-repeat;
+
−
}
+
−
.cr-bgimg div span{
+
−
position: absolute;
+
−
width: 100%;
+
−
height: 100%;
+
−
top: 0px;
+
−
left: 0px;
+
−
-webkit-transform: scale(1.5);
+
−
-moz-transform: scale(1.5);
+
−
-o-transform: scale(1.5);
+
−
-ms-transform: scale(1.5);
+
−
transform: scale(1.5);
+
−
opacity: 0;
+
−
z-index: 2;
+
−
text-indent: -9000px;
+
−
}
+
−
 
+
−
.cr-bgimg div:nth-child(1) span{
+
−
background-position: 0px 0px;
+
−
}
+
−
.cr-bgimg div:nth-child(2) span{
+
−
background-position: -150px 0px;
+
−
}
+
−
.cr-bgimg div:nth-child(3) span{
+
−
background-position: -300px 0px;
+
−
}
+
−
.cr-bgimg div:nth-child(4) span{
+
−
background-position: -450px 0px;
+
−
}
+
−
.cr-gallery input:checked ~ .cr-bgimg div span{
+
−
-webkit-animation: scaleOut 0.6s ease-in-out;
+
−
-moz-animation: scaleOut 0.6s ease-in-out;
+
−
-o-animation: scaleOut 0.6s ease-in-out;
+
−
-ms-animation: scaleOut 0.6s ease-in-out;
+
−
animation: scaleOut 0.6s ease-in-out;
+
−
}
+
−
@-webkit-keyframes scaleOut{
+
−
0%{ -webkit-transform: scale(1); opacity: 1; }
+
−
100%{ -webkit-transform: scale(1.5); opacity: 0; }
+
−
}
+
−
@-moz-keyframes scaleOut{
+
−
0%{ -moz-transform: scale(1); opacity: 1; }
+
−
100%{ -moz-transform: scale(1.5); opacity: 0; }
+
−
}
+
−
@-o-keyframes scaleOut{
+
−
0%{ -o-transform: scale(1); opacity: 1; }
+
−
100%{ -o-transform: scale(1.5); opacity: 0; }
+
−
}
+
−
@-ms-keyframes scaleOut{
+
−
0%{ -ms-transform: scale(1); opacity: 1; }
+
−
100%{ -ms-transform: scale(1.5); opacity: 0; }
+
−
}
+
−
@keyframes scaleOut{
+
−
0%{ transform: scale(1); opacity: 1; }
+
−
100%{ transform: scale(1.5); opacity: 0; }
+
−
}
+
−
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
+
−
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
+
−
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
+
−
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
+
−
{
+
−
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
+
−
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
+
−
-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
+
−
-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
+
−
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
+
−
-webkit-animation: none;
+
−
-moz-animation: none;
+
−
-o-animation: none;
+
−
-ms-animation: none;
+
−
animation: none;
+
−
opacity: 1;
+
−
-webkit-transform: scale(1);
+
−
-moz-transform: scale(1);
+
−
-o-transform: scale(1);
+
−
-ms-transform: scale(1);
+
−
transform: scale(1);
+
−
z-index:10000;
+
−
}
+
−
.cr-titles h3{
+
−
color: #fff;
+
−
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+
−
}
+
−
.cr-titles h3 span{
+
−
z-index: 10000;
+
−
position: absolute;
+
−
width: 100%;
+
−
left: 0px;
+
−
text-align: center;
+
−
opacity: 0;
+
−
top: 50%;
+
−
}
+
−
.cr-titles h3 span:nth-child(1){
+
−
left: 0px;
+
−
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
+
−
font-size: 70px;
+
−
letter-spacing: 7px;
+
−
color: transparent;
+
−
text-shadow: 0px 0px 10px #fff;
+
−
-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
+
−
-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
+
−
-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
+
−
-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
+
−
transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
+
−
}
+
−
.cr-titles h3 span:nth-child(2){
+
−
margin-top: 84px;
+
−
letter-spacing: 0px;
+
−
background: rgba(104,171,194,0.9);
+
−
font-size: 14px;
+
−
padding: 10px 0px;
+
−
font-style: italic;
+
−
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
+
−
-webkit-transition: opacity 0.8s ease-in-out;
+
−
-moz-transition: opacity 0.8s ease-in-out;
+
−
-o-transition: opacity 0.8s ease-in-out;
+
−
-ms-transition: opacity 0.8s ease-in-out;
+
−
transition: opacity 0.8s ease-in-out;
+
−
}
+
−
.cr-gallery input:checked ~ .cr-titles h3 span{
+
−
opacity: 0;
+
−
text-shadow: 0px 0px 30px #fff;
+
−
}
+
−
.cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
+
−
.cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
+
−
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
+
−
.cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
+
−
opacity: 1;
+
−
text-shadow: 0px 0px 1px #fff;
+
−
}
+
−
.cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
+
−
.cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
+
−
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
+
−
.cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
+
−
opacity: 1;
+
−
}
+
−
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
+
−
@media screen and (max-width: 768px) {
+
−
.cr-gallery input{
+
−
display: inline;
+
−
width: 24%;
+
−
margin-top: 350px;
+
−
z-index: 1000;
+
−
position: relative;
+
−
}
+
−
.cr-gallery label{
+
−
display: none;
+
−
}
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*________________________________________gallery-end___________________________________________*/
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*____________________________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: 90%; 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:20px 0 0 0;
+
−
float: left;
+
−
display: block;
+
−
}
+
−
 
+
−
.alpha {margin-left:0;}
+
−
.omega {margin-right:0;}
+
−
.gallery-list {margin:0;padding:0;}
+
−
.little_respond {display:none;}
+
−
 
+
−
.container{
+
−
width: 100%;
+
−
max-width: 1000px;
+
−
margin: auto;
+
−
+
−
}
+
−
 
+
−
 
+
−
 
+
−
.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;
+
−
}
+
−
}
+
−
 
+
  
−
/*____________________________//grid.css________________________________*/
+
</body>
 +
</html>

Revision as of 04:53, 4 September 2015

<!DOCTYPE html>

JUDGING

  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.

6/6 Bronze Requirements

fermentum egestas, tortor ante vestibulum est, eget scelerisquefermentum egestas, tortor ante vestibulum est, eget scelerisque

Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.

6/6 Bronze Requirements

Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.

4/4 Silver Requirements

6/6 Bronze Requirements

Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.

6/6 Gold Requirements

6/6 Bronze Requirements

Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus.