Difference between revisions of "Template:JSNU-China/styleCSS"

(Created page with "→‎: @import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One); @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); @import "../css/rese...")
 
Line 1: Line 1:
 
/**/
 
/**/
 +
<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=Pathway+Gothic+One);
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
−
 
−
@import "../css/reset.css";
 
−
@import "../css/grid.css";
 
−
@import "../css/superfish.css";
 
  
 
input {
 
input {

Revision as of 14:56, 12 July 2016

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