Difference between revisions of "Team:CHINA CD UESTC/Template:RightStyle.css"

(Blanked the page)
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* General Slides */
 
  
/*************************************************
 
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;
 
}
 
 
#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
 
***********************************************/
 
#title {
 
position: fixed;
 
font-size: 80px;
 
left:260px;
 
z-index: 5;
 
 
}
 
 
#firstTitle {
 
font-family:  Arial, Helvetica, sans-serif;
 
position: fixed;
 
width:1000px;
 
margin-top:0;
 
margin-bottom:0;
 
top: 60px;
 
font-size: 80px;
 
color: #FFFFAA;
 
overflow: hidden;
 
 
}
 
#firstTitle p {
 
text-align: center;
 
}
 
 
.transparent_class  {
 
border-radius: 0px;
 
position: absolute;
 
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 {
 
position: absolute;
 
top: 510px;
 
width: 1040px;
 
left:28px;
 
right:8px;
 
background:#FFFFFF;
 
color: #000000;
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
}
 
 
 
.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;
 
}
 
 
 
h2 {
 
display:block;
 
margin:0 0 23px;
 
padding:0;
 
text-transform:none;
 
text-align:left;
 
font-style:normal;
 
border-bottom:1px solid #e0e0e0;
 
font-family: Helvetica ;
 
font-size: 40px;
 
line-height: 82px;
 
color:#343434;
 
font-weight: 300;
 
}
 
 
h3 {
 
margin:0;
 
padding:40px 0 32px 0;
 
text-align:center;
 
font-family: Helvetica ;
 
font-weight:800;
 
font-size:32px;
 
font-style:normal;
 
line-height:36px;
 
}
 
 
 
h4 {
 
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: 120px;
 
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 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___________________________________________*/
 
 
 
/**************gallery******************/
 
.gallery-items {
 
width:970px;
 
height: 1000px;
 
margin:100px 0 0 70px;
 
position: relative;
 
left: -150px;
 
}
 
.gallery-items a {
 
display:inline-block;
 
height:150px;
 
position:relative;
 
width:230px;
 
margin-left: 10px;
 
margin-right: 10px;
 
margin-top: 10px;
 
}
 
.gallery-items a img {
 
cursor:pointer;
 
display:inline-block;
 
height:100%;
 
left:0px;
 
position:absolute;
 
top:0px;
 
width:100%;
 
z-index:0;
 
border: 10px solid #fff;
 
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 
 
 
-moz-user-select: none;
 
-khtml-user-select: none;
 
user-select: none;
 
 
-moz-box-sizing:border-box;
 
-webkit-box-sizing:border-box;
 
box-sizing:border-box;
 
 
-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 
-webkit-transition-duration:0.5s;
 
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 
-moz-transition-duration:0.5s;
 
-o-transition-property:width, height, top, bottom, left, right, z-index, border;
 
-o-transition-duration:0.5s;
 
transition-property:width, height, top, bottom, left, right, z-index, border;
 
transition-duration:0.5s;
 
}
 
.gallery-items li:hover img{
 
border:15px solid #fff;
 
cursor:default;
 
height:190%;
 
position:absolute;
 
width:190%;
 
z-index:51;
 
 
box-shadow:1px 1px 5px #888;
 
-moz-box-shadow:1px 1px 5px #888;
 
-webkit-box-shadow:1px 1px 5px #888;
 
-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 
-webkit-transition-duration:0.5s;
 
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 
-moz-transition-duration:0.5s;
 
-o-transition-property:width, height, top, bottom, left, right, z-index, border;
 
-o-transition-duration:0.5s;
 
transition-property:width, height, top, bottom, left, right, z-index, border;
 
transition-duration:0.5s;
 
}
 
 
/* custom focus rules */
 
.gallery-items li:hover:nth-child(3n+1) img{
 
left: -100px;
 
z-index: 50;
 
}
 
.gallery-items li:hover:nth-child(3n+2) img{
 
left:-200px;
 
z-index: 50;
 
 
}
 
.gallery-items li:hover:nth-child(3n+3) img{
 
left:-300px;
 
z-index: 50;
 
 
}
 
.gallery-items li:hover:nth-child(n) img{
 
top:-100px;
 
z-index: 50;
 
 
}
 
.gallery-items li:hover:nth-child(n+7) img{
 
top:-150px;
 
z-index: 50;
 
 
}
 
.gallery-items li:hover:nth-child(n+10) img{
 
top:-295px;
 
z-index: 50;
 
 
}
 
 
p {
 
text-align: left;
 
font-size:15px;
 
 
}
 
/***********select-gallery*********/
 
.gallery-container{
 
width: 80%;
 
margin: 60px auto 30px 170px;
 
display: block;
 
}
 
 
 
 
.gallery-container label {
 
width: 20%;
 
height: 30px;
 
padding: 10px;
 
cursor: pointer;
 
line-height: 33px;
 
font-size: 19px;
 
 
color: rgba(255,255,255,1);
 
text-decoration: none;
 
background-color: rgba(219,87,5,1);
 
font-family: 'Yanone Kaffeesatz','Microsoft yahei';
 
display: block;
 
padding: 4px;
 
-webkit-border-radius: 8px;
 
-moz-border-radius: 8px;
 
border-radius: 8px;
 
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 
text-align: center;
 
 
-webkit-transition: all .3s ease;
 
-moz-transition: all .3s ease;
 
-ms-transition: all .3s ease;
 
-o-transition: all .3s ease;
 
transition: all .3s ease;
 
 
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 );
 
float: left;
 
}
 
.gallery-container label.gallery-label-type-all{
 
border-radius: 3px 0px 0px 3px;
 
}
 
.gallery-container label.gallery-label-type-3{
 
border-radius: 0px 3px 3px 0px;
 
}
 
.gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all,
 
.gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1,
 
.gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2,
 
.gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
 
 
 
 
-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
-moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
background-color: rgba(255, 178, 29, 0.9);
 
color: rgb(255, 255, 255);}
 
.gallery-container input{
 
display: none;
 
}
 
 
 
 
.gallery-items li{
 
margin: 0px;
 
float: left;
 
width: 300px;
 
height: 200px;
 
-webkit-transition: all 0.6s ease-in-out;
 
-moz-transition: all 0.6s ease-in-out;
 
-o-transition: all 0.6s ease-in-out;
 
-ms-transition: all 0.6s ease-in-out;
 
transition: all 0.6s ease-in-out;
 
}
 
.gallery-items img {
 
width: 400px;
 
height: 400px;
 
}
 
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1,
 
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2,
 
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{
 
opacity: 1;
 
-webkit-transform: scale(1.1);
 
-moz-transform: scale(1.1);
 
-o-transform: scale(1.1);
 
-ms-transform: scale(1.1);
 
transform: scale(1.1);
 
}
 
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1),
 
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2),
 
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){
 
opacity: 0.1;
 
-webkit-transform: scale(0.5);
 
-moz-transform: scale(0.5);
 
-o-transform: scale(0.5);
 
-ms-transform: scale(0.5);
 
transform: scale(0.5);
 
}
 
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span,
 
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span,
 
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{
 
display:none;
 
}
 
 
/**********select-gallery over*******/
 
 
#three-line-text p{
 
margin-left: 20px;
 
font-family: "Microsoft yahei";
 
color: #0073A5;
 
}
 
#three-line-text a{
 
font-family: "Microsoft yahei";
 
color: #0073A5;
 
}
 
 
#threeline-left {
 
float: left;
 
width: 270px;
 
margin:10px 0 0 50px;
 
}
 
#threeline-middle {
 
float: left;
 
width: 290px;
 
margin:10px 0 0 20px;
 
}
 
#threeline-right {
 
float: right;
 
width: 290px;
 
margin: 10px 60px;
 
 
}
 
/* ____________________________________ Slide 10 照片____________________________________ */
 
#slide10 {
 
width:90%;
 
padding: 20px 0 0 30px;
 
}
 
 
/* _________________ 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;
 
}
 
.portfolio_link {
 
right:-77px;
 
}
 
.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 50px;
 
text-transform:uppercase;
 
font-size:18px;
 
}
 
.img_block:hover .item_description {
 
top:20px;
 
}
 
.img_block .portf_img {
 
position:absolute;
 
left:18px;
 
top:18px;
 
width: 100%;
 
height: 90%;
 
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 ___________________*/
 
 
 
 
 
 
 
 
/****************gallery in education**********/
 
/****gallery ***********/
 
.gallery{
 
width: 600px;
 
height: 100%;
 
position: relative;
 
text-align: center;
 
margin-right: 20px;
 
display: inline;
 
}
 
 
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg,
 
.cr-bgimg div span:nth-child(1){
 
background-image: url(https://static.igem.org/mediawiki/2015/c/cb/CHINA_CD_UESTC_KINDER01.JPG);
 
background-size: 400%;
 
}
 
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg,
 
.cr-bgimg div span:nth-child(2){
 
background-image: url(https://static.igem.org/mediawiki/2015/5/55/CHINA_CD_UESTC_KINDER02.JPG);
 
background-size: 400%;
 
 
}
 
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg,
 
.cr-bgimg div span:nth-child(3){
 
background-image: url(https://static.igem.org/mediawiki/2015/3/3c/CHINA_CD_UESTC_KINDER03.JPG);
 
background-size: 400%;
 
 
}
 
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg,
 
.cr-bgimg div span:nth-child(4){
 
background-image: url(https://static.igem.org/mediawiki/2015/6/62/CHINA_CD_UESTC_KINDER04.JPG);
 
background-size: 400%;
 
}
 
/*************gallery 2***********/
 
 
#gal {
 
position:relative;
 
width:700px;
 
height:400px;
 
margin:0 120px 0 150px;
 
background:#FFF;
 
}
 
#gal:after {
 
content:'';
 
position:absolute;
 
bottom:24px;
 
right:0;
 
left:0;
 
width:100%;
 
height:1px;
 
background:rgba(255,255,255,0.35);
 
z-index:3;
 
}
 
input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] {
 
position:absolute;
 
bottom:80px;
 
display:block;
 
width:22px;
 
height:22px;
 
top:350px;
 
-webkit-border-radius:50%;
 
-moz-border-radius:50%;
 
border-radius:50%;
 
cursor:pointer;
 
}
 
input[class="re_radio"] {
 
opacity:0;
 
z-index:200;
 
}
 
input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;}
 
input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;}
 
input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;}
 
input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;}
 
input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;}
 
input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;}
 
input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;}
 
input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}
 
 
input[class="re_radio"] + label[class="re_label"] {
 
background:rgba(2, 2, 2, 0.46);
 
z-index:7;
 
-webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 
-moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 
box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 
-webkit-transition:all .3s;
 
-moz-transition:all .3s;
 
-o-transition:all .3s;
 
transition:all .3s;
 
}
 
[class*="entypo-"]:before {
 
position:absolute;
 
font-family: 'entypo', sans-serif;
 
}
 
figure[class*="entypo-"]:before {
 
left:10px;
 
top:5px;
 
font-size:2rem;
 
color:rgba(255,255,255,0);
 
z-index:1;
 
-webkit-transition:color .1s;
 
-moz-transition:color .1s;
 
-o-transition:color .1s;
 
transition:color .1s;
 
}
 
a[class*="entypo-"]:before {
 
top:8px;
 
left:9px;
 
font-size:1.5rem;
 
color:white;
 
}
 
a:hover[class*="entypo-"]:before {
 
color:white;
 
}
 
figure, figure img, figcaption {
 
position:absolute;
 
top:0;
 
right:0;
 
}
 
figure {
 
bottom:0;
 
left:0;
 
width:600px;
 
height:300px;
 
display:block;
 
overflow:hidden;
 
}
 
figure img {
 
bottom:0;
 
left:0;
 
display:block;
 
width:700px;
 
height:400px;
 
z-index:1;
 
-webkit-transform:translateX(600px);
 
-moz-transform:translateX(600px);
 
-ms-transform:translateX(600px);
 
-o-transform:translateX(600px);
 
transform:translateX(600px);
 
-webkit-transition:all .15s .15s, z-index 0s;
 
-moz-transition:all .15s .15s, z-index 0s;
 
-o-transition:all .15s .15s, z-index 0s;
 
transition:all .15s .15s, z-index 0s;
 
}
 
figcaption {
 
display:block;
 
width:270px;
 
height:300px;
 
background-image: radial-gradient(rgba(161, 255, 0, 0.3), #D7E84B);  background-size:600px 600px;
 
background-repeat:no-repeat;
 
background-position:-300px -150px;
 
text-align:center;
 
z-index:3;
 
-webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 
-moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 
box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 
-webkit-transform:translateX(300px);
 
-moz-transform:translateX(300px);
 
-ms-transform:translateX(300px);
 
-o-transform:translateX(300px);
 
transform:translateX(300px);
 
-webkit-transition:all .35s;
 
-moz-transition:all .35s;
 
-o-transition:all .35s;
 
transition:all .35s;
 
}
 
 
figcaption nav ul {display:block;padding-top:10px;}
 
figcaption nav ul li {display:inline-block;margin-left:5px;}
 
figcaption nav ul li a {
 
position:relative;
 
display:block;
 
width:40px;
 
height:40px;
 
background:rgba(255,255,255,0.2);
 
text-decoration:none;
 
color:white;
 
-webkit-border-radius:50%;
 
-moz-border-radius:50%;
 
border-radius:50%;
 
-webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 
-moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 
box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 
-webkit-transition:all .15s;
 
-moz-transition:all .15s;
 
-o-transition:all .15s;
 
transition:all .15s;
 
}
 
figcaption nav ul li a:hover {
 
background:rgba(255,255,255,0);
 
-webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 
-moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 
box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 
}
 
figcaption p {
 
padding:5px 15px;
 
font-family:'Titillium Web', sans-serif;
 
font-weight:300;
 
color:#333;
 
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
 
background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 
background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 
background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 
background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 
background-size:1px 100%;
 
background-repeat:no-repeat;
 
background-position:50% 0%;
 
}
 
 
input[class="re_radio"]:hover + label[class="re_label"] {
 
background:rgba(255,255,255,0.6);
 
}
 
input[class="re_radio"]:checked + label[class="re_label"] {
 
background:rgba(255,209,0,1);
 
-webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 
-moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 
box-shadow:0px 0px 0px 5px rgba(0,0,0,0.8);
 
}
 
input[class="re_radio"]:checked + label[class="re_label"]:before {}
 
input[class="re_radio"]:checked ~ figure img {
 
z-index:2;
 
-webkit-transform:translatex(0px);
 
-moz-transform:translatex(0px);
 
-ms-transform:translatex(0px);
 
-o-transform:translatex(0px);
 
transform:translatex(0px);
 
-webkit-transition:all .15s, z-index 0s;
 
-moz-transition:all .15s, z-index 0s;
 
-o-transition:all .15s, z-index 0s;
 
transition:all .15s, z-index 0s;
 
}
 
input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before {
 
z-index:3;
 
color:rgba(255,255,255,0.5);
 
-webkit-transition:color .5s;
 
-moz-transition:color .5s;
 
-o-transition:color .5s;
 
transition:color .5s;
 
}
 
input[class="re_radio"]:checked ~ figure figcaption {
 
z-index:8;
 
-webkit-transform:translateX(0px);
 
-moz-transform:translateX(0px);
 
-ms-transform:translateX(0px);
 
-o-transform:translateX(0px);
 
transform:translateX(0px);
 
-webkit-transition:all .35s, .7s;
 
-moz-transition:all .35s, .7s;
 
-o-transition:all .35s, .7s;
 
transition:all .35s, .7s;
 
}
 
.entypo-forward {
 
margin: 0;
 
width: 100%;
 
height: 100%;
 
border: 17px solid #fff;
 
box-shadow:1px 1px 3px rgba(221, 226, 207, 0.26);
 
border-radius: 20px;
 
}
 
.entypo-forward p {
 
color: #000;
 
font-size: 19px;
 
font-family: 'Microsoft YaHei'
 
}
 
 
 
 
/************two line picture********/
 
.two_line_pic {
 
display: inline-block;
 
position: relative;
 
margin: 10px 0px 50px 20px;
 
padding: 20px;
 
border: 10px solid #fff;
 
box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);
 
}
 
.left_pic {
 
float: left;
 
margin-left: 50px;
 
}
 
.right_pic {
 
float: right;
 
margin-left: 5px;
 
}
 
/**************end two line pic******/
 
/********end of gallery 2*********/
 
 
/***************protocol************/#page {
 
margin-bottom: 200px;
 
z-index: 1000;
 
}
 
#page ul li{
 
list-style: none;
 
}
 
.leftside{
 
color: #000;
 
float:left;
 
width:17%;
 
}
 
#page .leftside li a {
 
cursor:pointer;
 
color: #000;
 
}
 
 
.rightside{
 
float:left;
 
margin-left:5%;
 
width:78%;
 
height:600px; 
 
overflow:hidden;
 
}
 
.protocol{
 
display:none;
 
width:95%;
 
margin-bottom:20px;
 
}
 
.protocolactive{
 
display:block;
 
width:95%;
 
border: 5px solid #DDE8E8;
 
 
margin-bottom:20px;
 
}
 
 
/*********green button***********/
 
.button{
 
width: 160px;
 
line-height: 38px;
 
text-align: center;
 
font-size: 20px;
 
position: relative;
 
overflow: hidden;
 
 
 
color: rgba(255,255,255,1);
 
text-decoration: none;
 
background-color: rgba(219,87,5,1);
 
font-family: 'Yanone Kaffeesatz','Microsoft yahei';
 
display: block;
 
padding: 4px;
 
-webkit-border-radius: 8px;
 
-moz-border-radius: 8px;
 
border-radius: 8px;
 
 
}
 
.button.green{
 
-webkit-box-shadow:0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 
-moz-box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 
box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 
 
-webkit-transition: all .3s ease;
 
-moz-transition: all .3s ease;
 
-ms-transition: all .3s ease;
 
-o-transition: all .3s ease;
 
transition: all .3s ease;
 
 
 
}
 
.green.larrow:before{
 
background: #64C878;
 
}
 
.green.larrow:after{
 
-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
-moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
background-color: rgba(255, 178, 29, 0.9);
 
color: rgb(255, 255, 255);}}
 
 
/***green button over*/
 
table.tftable {font-size:12px;color:#333333;width:90%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;}
 
table.tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;}
 
table.tftable tr {background-color:#ffffff;}
 
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;}
 
/*******************end protocol**********/
 
 
 
 
 
/**************vector*****************/
 
.vector {
 
width: 80%;
 
    margin: 10px 0 0 200px;
 
}
 
.vector h2 {
 
    font-size: 20px;
 
    font-family: Helvetica;
 
    text-decoration: none;
 
    border: 0;
 
    font-weight: bold;
 
}
 
.vector p {
 
font-size: 20px;
 
font-family:Helvetica;
 
 
}
 
.vector img {
 
margin-top: 10px;
 
}
 
#brief_text {
 
margin: 0;
 
    font-family: Helvetica;
 
    font-weight: 600;
 
    font-size: 20px;
 
    font-style: normal;
 
    line-height: 36px;
 
}
 
 
 
/*____________________________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 (orientation: portrait) {
 
.slide{background-attachment: scroll;background-position:0 0 !important;
 
}
 
}
 
 
@media only screen and (min-width: 321px) and (max-width: 1024px) {
 
#title {
 
position: fixed;
 
font-size: 80px;
 
left:250px;
 
z-index: 5;
 
 
}
 
 
#firstTitle {
 
width:700px;
 
}
 
#firstTitle p {
 
font-size: 60px;
 
}
 
 
.transparent_class{
 
top: 280px;
 
width: 640px;
 
left: 20px;
 
}
 
#RightContentText {
 
top: 470px;
 
width: 655px;
 
left: 13px;
 
right: 8px;
 
}
 
.gallery-container {
 
width: 80%;
 
margin: 60px 0px 30px 100px;
 
display: block;
 
}
 
.gallery-items {
 
width: 800px;
 
}
 
.gallery-items li {
 
width: 210px;
 
height: 180px;
 
}
 
.gallery-items a {
 
height: 130px;
 
width: 190px;
 
margin-left: 4px;
 
margin-right: 4px;
 
margin-top: 10px;
 
}
 
#HZpic {
 
background-position: 0 0 !important;
 
width: 90%;
 
padding: 10px;
 
margin-top: 20px;}
 
 
.client_foto {
 
height: 380px;
 
width: 240px;
 
}
 
#slide12 {width: 97%;}
 
#slide12 h5 {
 
margin: 5px 0 0 0;
 
font-size: 25px;
 
line-height: 25px;
 
}
 
#slide12 h6 {
 
font-size: 15px;
 
line-height: 17px;
 
}
 
#slide12 p {
 
font-size: 14px;
 
font-family: Helvetica,'Microsoft Yahei';
 
text-align: initial;
 
}
 
#content {
 
height: 50px;
 
}
 
h2{font-size: 30px;
 
line-height: 52px;
 
}
 
 
h4 {font-size: 22px;
 
line-height: 36px;
 
}
 
 
p{
 
font-size: 15px;
 
}
 
#threeline-left {
 
float: left;
 
width: 150px;
 
margin: 10px 0 0 3px;
 
}
 
#threeline-middle {
 
float: left;
 
width: 230px;
 
margin: 10px 0 0 0px;
 
}
 
#threeline-right {
 
float: right;
 
width: 250px;
 
margin: 10px 20px 0 0px;
 
}
 
#gal {
 
width: 600px;
 
margin: 0 120px 0 0px;
 
}
 
.two_line_pic img {
 
width: 250px;
 
height: 180px;
 
}
 
.left_pic {
 
margin-left: 0px;
 
}
 
.button {
 
width: 120px;
 
}
 
 
.exhib_cont {
 
width: 240px;
 
}
 
.vector {
 
    width: 100%;
 
    margin: 10px 0 0 10px;
 
}
 
}
 
/*____________________________//grid.css________________________________*/
 

Latest revision as of 19:21, 11 September 2015