Template:JSNU-China/styleCSS
/**/ <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Template:JSNU-China/resetCSS?action=raw&ctype=text/css" /> <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Template:JSNU-China/gridCSS?action=raw&ctype=text/css" /> <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Template:JSNU-China/superfishCSS?action=raw&ctype=text/css" />
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One); @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
input { outline: none !important; }
html {
width: 100%;
}
a[href^="tel:"] {
color: inherit; text-decoration:none; }
- {
-webkit-text-size-adjust: none; }
body {
font: 13px/19px Arial, Helvetica, sans-serif;
color:#666565;
position:relative;
min-width:960px;
background: #000;
background: url(../images/bg_body.jpg) center 0 no-repeat #d6bba0;
background-size: 100% auto;
background-attachment: fixed;
}
.ic, .ic a { border:0; float:right; background:#fff; color:#f00; width:50%; line-height:10px; font-size:10px; margin:-220% 0 0 0; overflow:hidden; padding:0 }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'Pathway Gothic One', sans-serif; color: #263555; }
h3 { font-size: 38px; line-height: 44px; color: #263555; text-transform: uppercase; margin-bottom: 50px; }
.page1 h3 { padding-top: 62px; margin-bottom: 54px; }
h4 { font-size: 20px; line-height: 20px; font-weight: 300; font-family: 'Open Sans Condensed', sans-serif; color: #fff; text-transform: uppercase; padding-top: 33px; margin-bottom: 8px; }
p {
margin-bottom: 19px;
}
img { max-width: 100%; }
address { font-style: normal; } ul { padding: 0; margin: 0; list-style: none; }
ul.list li{ padding-left: 35px; background: url(../images/marker.png) 0 3px no-repeat; color: #263555; font-size: 16px; line-height: 22.8px;
}
ul.list li+li { margin-top: 17.2px; }
ul.list1 li+li { margin-top: 35px; }
ul.list1 li+li+li { margin-top: 34px; }
ul.list1 .count { text-align: center; margin-top: 3px; margin-right: 25px; float: left; border-radius: 500px; float: left; width: 31px; line-height: 30px; height: 31px; color: #fff; border: 1px solid #4f93b2; background-color: #38afe5;
}
ul.list1 .text1 { margin-bottom: 9px; }
ul.list2 { padding-top: 2px; width: 34.5%; float: left; }
ul.list2 li+li { margin-top: 21px; }
ul.list2 li { background: url(../images/marker1.png) 0 5px no-repeat; font-size: 16px; line-height: 19px; color: #263555; padding-left: 23px; }
.hor_sep { border-bottom: 1px solid #dedbdb; padding-top:54px; }
h3.head1 { padding-top: 49px; padding-bottom: 1px; } /*links*/
a { text-decoration: none; color: inherit; outline: none; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; }
a:hover { color: #38afe5;
}
.boxes a.btn { padding: 4px 16px 4px ; } a.btn { color: #000; display: inline-block; background-color: #fbf6f8; border-radius: 5px; box-shadow: 0 1px 1px #dedbdb; font-size: 15px; border: 1px solid #b1aaaa; line-height: 15px; padding: 5px 16px 4px ; }
a.btn:hover { border-color: #476788; color: #fff; background-color: #38AFE5; }
a.link-1 { color: #fa7e7e; }
a.link-1:hover { color: #38AFE5; } /*preclass*/
.mb0 { margin-bottom: 0px !important; } .m0 { margin: 0 !important; }
.ind1 { margin-top: 11px; }
.pad0 { padding: 0 !important; }
.pt0 {
padding-top: 0;
}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
.img_inner {
max-width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
margin-bottom: 25px;
margin-top: 3px; position: relative;
}
.fleft { float: left; margin-right: 25px; margin-bottom: 0px; }
.fright { float: right !important; }
.upp { text-transform: uppercase; }
.alright { text-align: right; } .center { text-align: center; } .wrapper, .extra_wrapper { overflow: hidden; } .clear { float: none !important; clear: both; }
/*header*/
header { display: block; position: relative; z-index: 999; padding-bottom: 105px; }
header a:hover { color: #000; }
header h1 { position: absolute; float: none; width: 167px; top: 31px; left: 50%; margin-left: -84px; height: 168px; z-index: 999;
} header h1 a { display: block; overflow: hidden;
text-indent: -999px; transition: 0s ease; -o-transition: 0s ease; -webkit-transition: 0s ease; }
header h1 a img { display: block; }
.main { background: #fff; width: 1270px; margin: 0 auto; } .boxes { margin-bottom: 70px; }
.boxes>div { position: relative; }
.boxes figure figcaption{ background-color: #193149; position: absolute; top: 0; font-size: 13px; line-height: 19px; color: #cbc6c6; text-align: left; left: 0; height: 100%; width: 183px; padding: 0 11px; opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; -o-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
}
figcaption h3 { color: #ffffff; text-align: center; padding-top: 18px !important; font-size: 38px; margin-bottom: 18px !important; font-family: 'Open Sans Condensed', sans-serif;
}
figcaption a.btn { display: block; float: right; margin-top: 36px; margin-right: 4px; }
.boxes { margin-bottom: 70px; }
.boxes figure div {
overflow: hidden;
}
.boxes figure { -webkit-perspective: 1700px; -moz-perspective: 1700px; -ms-perspective: 1700px; -o-perspective: 1700px; perspective: 1700px;
-webkit-perspective-origin: 0 50%; -moz-perspective-origin: 0 50%; -ms-perspective-origin: 0 50%; -o-perspective-origin: 0 50%; perspective-origin: 0 50%;
background-color: #193149; }
.boxes a.btn {
box-shadow: none;
}
.boxes figure img { position: relative; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; }
.boxes figure:hover img { -webkit-transform: translateX(25%); -moz-transform: translateX(25%); -ms-transform: translateX(25%); transform: translateX(25%); }
.boxes figure:hover figcaption { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; -o-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; }
a.gal { display: block; margin-bottom: 23px; background: url(../images/magnify.png) center center no-repeat #373737; }
a.gal img { transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; }
a.gal:hover img { opacity: 0.5; }
.gallery .img_inner { margin-bottom: 0; }
.gallery .clear { height: 46px; }
/*Content*/
.content { padding-top: 123px; padding-bottom: 128px; }
.bottom_block {
background-color: #30455b;
color: #ffffff;
font-size: 12px;
padding-bottom: 34px;
}
.bottom_block ul li { font: 18px/18px 'Open Sans Condensed', sans-serif; text-transform: uppercase; }
.bottom_block ul li+li { margin-top: 10px; }
.bottom_block ul { padding-top: 42px; }
/************Footer***********/
footer { display: block; padding: 25px 0; color: #6b6868; }
.copy { text-align: center; color: #fff; font-size: 12px; }
