Difference between revisions of "Template:Team:CHINA CD UESTC/cssstyle"

    font-size: 80px;

    text-align: left;

    font-family: inherit;

    font-size: 17px;

#owl-demo{position:relative;width:640px;height:390px;margin:20px auto 0 auto;}

#owl-demo .item{ position:relative;display:block;}

#owl-demo img{display:block;width:640px;height:390px;}

#owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;background-color: rgba(95, 193, 42, 0.53);}

.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;}

.owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(https://static.igem.org/mediawiki/2015/7/78/CHINA_CD_UESTC_pribg01.png);*display:inline;*zoom:1;}

.owl-pagination .active{width:25px;background-image:url(https://static.igem.org/mediawiki/2015/c/c9/CHINA_CD_UESTC_pribg02.png);}

.owl-buttons{display:none;}

.owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}

.owl-prev{left:0;background-image:url(https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_pribg03.png);}

.owl-next{right:-20px;background-image:url(https://static.igem.org/mediawiki/2015/d/dc/CHINA_CD_UESTC_pribg04.png);}

.owl-prev:hover{background-image:url(https://static.igem.org/mediawiki/2015/6/67/CHINA_CD_UESTC_pribg05.png);}

.owl-next:hover{background-image:url(https://static.igem.org/mediawiki/2015/f/f7/CHINA_CD_UESTC_pribg06.png);}

.owl-item {width: 100%;}

/* clearfix */

.owl-carousel .owl-wrapper:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

/* display none until init */

.owl-carousel{

display: none;

position: relative;

width: 100%;

-ms-touch-action: pan-y;

}

.owl-carousel .owl-wrapper{

display: none;

position: relative;

-webkit-transform: translate3d(0px, 0px, 0px);

}

.owl-carousel .owl-wrapper-outer{

overflow: hidden;

position: relative;

width: 100%;

border: 10px solid #fff;

    box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);

}

.owl-carousel .owl-wrapper-outer.autoHeight{

-webkit-transition: height 500ms ease-in-out;

-moz-transition: height 500ms ease-in-out;

-ms-transition: height 500ms ease-in-out;

-o-transition: height 500ms ease-in-out;

transition: height 500ms ease-in-out;

}

.grabbing {  

    cursor:url(grabbing.png) 8 8, move;

}

/* fix */

.owl-carousel .owl-wrapper,

.owl-carousel  .owl-item{

-webkit-backface-visibility: hidden;

  -webkit-transform: translate3d(0,0,0);

  -moz-transform: translate3d(0,0,0);

  -ms-transform: translate3d(0,0,0);

}

.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%;

/***************protocol************/

#page {

margin-bottom: 200px;

z-index: 1000;

#page ul li{

list-style: none;

}

.leftside{

float:left;

width:17%;

}

#page .leftside li a {

cursor:pointer;

color: #000;

}

.rightside{

margin-left:5%;

width:78%;

height:600px;  

overflow:hidden;

}

.protocol{

display:none;

width:95%;

margin-bottom:20px;

}

.protocolactive{

display:block;

width:95%;

margin-bottom:20px;

}

line-height: 38px;

font-size: 20px;

-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;

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;}

}

.vector img {

margin-top: 10px;

}

#brief_text {

margin: 0;

font-family: Helvetica;

font-weight: 600;

font-size: 20px;

font-style: normal;

line-height: 36px;

}

#pic_illustration {

    font-size: 15px;

    margin-left: -10%;

    width: 90%;

}

/*____________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: 94%; 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: 980px) {  

#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;}

#RightContentText 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;}

.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;}

.owl-next {right: 50px;}

.owl-pagination{width: 90%;}

.owl-carousel .owl-wrapper-outer {width: 90%;}

                        .clear {display: block;height: 30px;}

}

@media only screen and (min-width: 970px) and (max-width: 980px) {  

.gallery-list {display: none;}

}