Difference between revisions of "Template:SZU China/Playground/Introduction/CSS"

(Created page with ".grid-gallery ul { list-style: none; margin: 0; padding: 0; } .grid-gallery figure { margin: 0; } .grid-gallery figure img { display: block; width: 100%; } .grid-gall...")
 
Line 1: Line 1:
−
.grid-gallery ul {
+
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
−
list-style: none;
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
  
−
.grid-gallery figure {
 
−
margin: 0;
 
−
}
 
  
−
.grid-gallery figure img {
 
−
display: block;
 
−
width: 100%;
 
−
}
 
  
−
.grid-gallery figcaption h3 {
+
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);
−
margin: 0;
+
@font-face {
−
padding: 0 0 0.5em;
+
font-family: 'icomoon';
 +
src:url('../fonts/icomoon.eot?yrquyl');
 +
src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'),
 +
url('../fonts/icomoon.woff?yrquyl') format('woff'),
 +
url('../fonts/icomoon.ttf?yrquyl') format('truetype'),
 +
url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');
 +
font-weight: normal;
 +
font-style: normal;
 
}
 
}
 +
[class^="icon-"], [class*=" icon-"] {
 +
font-family: 'icomoon';
 +
speak: none;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
line-height: 1;
  
−
.grid-gallery figcaption p {
+
/* Better Font Rendering =========== */
−
margin: 0;
+
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 
}
 
}
  
−
/* Grid style */
+
body, html { font-size: 100%; padding: 0; margin: 0;}
−
.grid-wrap {
+
−
max-width: 69em;
+
−
margin: 0 auto;
+
−
padding: 0 1em 1.875em;
+
−
}
+
  
−
.grid {
+
/* Reset */
−
margin: 0 auto;
+
*,
 +
*:after,
 +
*:before {
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 
}
 
}
  
−
.grid li {
+
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
−
width: 25%;
+
.clearfix:before,
−
float: left;
+
.clearfix:after {
−
cursor: pointer;
+
content: " ";
 +
display: table;
 
}
 
}
  
−
.grid figure {
+
.clearfix:after {
−
padding: 15px;
+
clear: both;
−
-webkit-transition: opacity 0.2s;
+
−
transition: opacity 0.2s;
+
 
}
 
}
  
−
.grid li:hover figure {
+
body{
−
opacity: 0.7;
+
background: #f9f7f6;
 +
color: #404d5b;
 +
font-weight: 500;
 +
font-size: 1.05em;
 +
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
 
}
 
}
 +
a{color: #2fa0ec;text-decoration: none;outline: none;}
 +
a:hover,a:focus{color:#74777b;};
  
−
.grid figcaption {
+
.htmleaf-container{
−
background: #e4e4e4;
+
margin: 0 auto;
−
padding: 25px;
+
text-align: center;
−
}
+
−
 
+
−
/* Slideshow style */
+
−
.slideshow {
+
−
position: fixed;
+
−
background: rgba(0,0,0,0.6);
+
−
width: 100%;
+
−
height: 100%;
+
−
top: 0;
+
−
left: 0;
+
−
z-index: 500;
+
−
opacity: 0;
+
−
visibility: hidden;
+
 
overflow: hidden;
 
overflow: hidden;
−
-webkit-perspective: 1000px;
 
−
perspective: 1000px;
 
−
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
 
−
transition: opacity 0.5s, visibility 0s 0.5s;
 
 
}
 
}
−
 
+
.htmleaf-content {
−
.slideshow-open .slideshow {
+
font-size: 150%;
−
opacity: 1;
+
padding: 1em 0;
−
visibility: visible;
+
−
-webkit-transition: opacity 0.5s;
+
−
transition: opacity 0.5s;
+
 
}
 
}
  
−
.slideshow ul {
+
.htmleaf-content h2 {
−
width: 100%;
+
margin: 0 0 2em;
−
height: 100%;
+
opacity: 0.1;
−
-webkit-transform-style: preserve-3d;
+
−
transform-style: preserve-3d;
+
−
-webkit-transform: translate3d(0,0,150px);
+
−
transform: translate3d(0,0,150px);
+
−
-webkit-transition: -webkit-transform 0.5s;
+
−
transition: transform 0.5s;
+
 
}
 
}
  
−
.slideshow ul.animatable li {
+
.htmleaf-content p {
−
-webkit-transition: -webkit-transform 0.5s;
+
margin: 1em 0;
−
transition: transform 0.5s;
+
padding: 5em 0 0 0;
 +
font-size: 0.65em;
 
}
 
}
−
 
+
.bgcolor-1 { background: #f0efee; }
−
.slideshow-open .slideshow ul {
+
.bgcolor-2 { background: #f9f9f9; }
−
-webkit-transform: translate3d(0,0,0);
+
.bgcolor-3 { background: #e8e8e8; }/*light grey*/
−
transform: translate3d(0,0,0);
+
.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
 +
.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
 +
.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
 +
.bgcolor-7 { background: #d0d6d6; }/*White tea*/
 +
.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
 +
.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
 +
.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
 +
.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
 +
.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
 +
/* Header */
 +
.htmleaf-header{
 +
padding: 1em 190px 1em;
 +
letter-spacing: -1px;
 +
text-align: center;
 
}
 
}
−
 
+
.htmleaf-header h1 {
−
.slideshow li {
+
font-weight: 600;
−
width: 660px;
+
font-size: 2em;
−
height: 560px;
+
line-height: 1;
−
position: absolute;
+
margin-bottom: 0;
−
top: 50%;
+
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
−
left: 50%;
+
−
margin: -280px 0 0 -330px;
+
−
visibility: hidden;
+
 
}
 
}
−
 
+
.htmleaf-header h1 span {
−
.slideshow li.show {
+
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
−
visibility: visible;
+
display: block;
 +
font-size: 60%;
 +
font-weight: 400;
 +
padding: 0.8em 0 0.5em 0;
 +
color: #c3c8cd;
 +
}
 +
/*nav*/
 +
.htmleaf-demo a{color: #1d7db1;text-decoration: none;}
 +
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
 +
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
 +
.htmleaf-demo a:hover{opacity: 0.6;}
 +
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
 +
/* Top Navigation Style */
 +
.htmleaf-links {
 +
position: relative;
 +
display: inline-block;
 +
white-space: nowrap;
 +
font-size: 1.5em;
 +
text-align: center;
 
}
 
}
  
−
.slideshow li:after {
+
.htmleaf-links::after {
−
content: '';
+
 
position: absolute;
 
position: absolute;
−
width: 100%;
 
−
height: 100%;
 
 
top: 0;
 
top: 0;
−
left: 0;
+
left: 50%;
−
background: rgba(255,255,255,0.8);
+
margin-left: -1px;
−
-webkit-transition: opacity 0.3s;
+
width: 2px;
−
transition: opacity 0.3s;
+
−
}
+
−
 
+
−
.slideshow li.current:after {
+
−
visibility: hidden;
+
−
opacity: 0;
+
−
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
+
−
transition: opacity 0.3s, visibility 0s 0.3s;
+
−
}
+
−
 
+
−
.slideshow figure {
+
−
width: 100%;
+
 
height: 100%;
 
height: 100%;
−
background: #fff;
+
background: #dbdbdb;
−
border: 50px solid #fff;
+
content: '';
−
overflow: hidden;
+
-webkit-transform: rotate3d(0,0,1,22.5deg);
 +
transform: rotate3d(0,0,1,22.5deg);
 
}
 
}
  
−
.slideshow figcaption {
+
.htmleaf-icon {
−
padding-bottom: 20px;
+
display: inline-block;
 +
margin: 0.5em;
 +
padding: 0em 0;
 +
width: 1.5em;
 +
text-decoration: none;
 
}
 
}
  
−
.slideshow figcaption h3 {
+
.htmleaf-icon span {
−
font-weight: 300;
+
display: none;
−
font-size: 200%;
+
 
}
 
}
  
−
/* Navigation */
+
.htmleaf-icon:before {
−
.slideshow nav span {
+
margin: 0 5px;
−
position: fixed;
+
text-transform: none;
−
z-index: 1000;
+
font-weight: normal;
−
color: #59656c;
+
−
text-align: center;
+
−
padding: 3%;
+
−
cursor: pointer;
+
−
font-size: 2.2em;
+
−
}
+
−
 
+
−
.slideshow nav span.nav-prev,
+
−
.slideshow nav span.nav-next {
+
−
top: 50%;
+
−
-webkit-transform: translateY(-50%);
+
−
transform: translateY(-50%);
+
−
}
+
−
 
+
−
.slideshow nav span.nav-next {
+
−
right: 0;
+
−
}
+
−
 
+
−
.slideshow nav span.nav-close {
+
−
top: 0;
+
−
right: 0;
+
−
padding: 0.5em 1em;
+
−
color: #31373a;
+
−
}
+
−
 
+
−
.icon:before,
+
−
.icon:after {
+
−
font-family: 'fontawesome';
+
−
speak: none;
+
 
font-style: normal;
 
font-style: normal;
−
font-weight: normal;
 
 
font-variant: normal;
 
font-variant: normal;
−
text-transform: none;
+
font-family: 'icomoon';
 
line-height: 1;
 
line-height: 1;
 +
speak: none;
 
-webkit-font-smoothing: antialiased;
 
-webkit-font-smoothing: antialiased;
−
-moz-osx-font-smoothing: grayscale;
 
 
}
 
}
−
 
+
/* footer */
−
span.nav-prev:before {
+
.htmleaf-footer{width: 100%;padding-top: 10px;}
−
content: "\e601";
+
.htmleaf-small{font-size: 0.8em;}
−
}
+
.center{text-align: center;}
−
 
+
/****/
−
span.nav-next:before  {
+
.related {
−
content: "\e600";
+
−
}
+
−
 
+
−
span.nav-close:before {
+
−
content: "\e602";
+
−
}
+
−
 
+
−
/* Info on arrow key navigation */
+
−
.info-keys {
+
−
position: fixed;
+
−
top: 10px;
+
−
left: 10px;
+
−
width: 60px;
+
−
font-size: 8px;
+
−
padding-top: 20px;
+
−
text-transform: uppercase;
+
 
color: #fff;
 
color: #fff;
−
letter-spacing: 1px;
+
background: #333;
 
text-align: center;
 
text-align: center;
 +
font-size: 1.25em;
 +
padding: 0.5em 0;
 +
overflow: hidden;
 
}
 
}
  
−
.info-keys:before,
+
.related > a {
−
.info-keys:after {
+
vertical-align: top;
−
position: absolute;
+
width: calc(100% - 20px);
−
top: 0;
+
max-width: 340px;
−
width: 16px;
+
display: inline-block;
−
height: 16px;
+
−
border: 1px solid #fff;
+
 
text-align: center;
 
text-align: center;
−
line-height: 14px;
+
margin: 20px 10px;
−
font-size: 12px;
+
padding: 25px;
 +
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
 
}
 
}
−
 
+
.related a {
−
.info-keys:before {
+
display: inline-block;
−
left: 10px;
+
text-align: left;
−
content: "\e603";
+
margin: 20px auto;
 +
padding: 10px 20px;
 +
opacity: 0.8;
 +
-webkit-transition: opacity 0.3s;
 +
transition: opacity 0.3s;
 +
-webkit-backface-visibility: hidden;
 
}
 
}
  
−
.info-keys:after {
+
.related a:hover,
−
right: 10px;
+
.related a:active {
−
content: "\e604";
+
opacity: 1;
 
}
 
}
  
−
/* Example media queries (reduce number of columns and change slideshow layout) */
+
.related a img {
−
 
+
max-width: 100%;
−
@media screen and (max-width: 60em) {
+
opacity: 0.8;
−
/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
+
border-radius: 4px;
−
.grid li {
+
−
width: 33.3%;
+
−
}
+
−
 
+
−
.slideshow li {
+
−
width: 100%;
+
−
height: 100%;
+
−
top: 0;
+
−
left: 0;
+
−
margin: 0;
+
−
}
+
−
 
+
−
.slideshow li figure img {
+
−
width: auto;
+
−
margin: 0 auto;
+
−
max-width: 100%;
+
−
}
+
−
 
+
−
.slideshow nav span,
+
−
.slideshow nav span.nav-close {
+
−
font-size: 1.8em;
+
−
padding: 0.3em;
+
−
}
+
−
 
+
−
.info-keys {
+
−
display: none;
+
−
}
+
−
 
+
 
}
 
}
−
 
+
.related a:hover img,
−
@media screen and (max-width: 35em) {
+
.related a:active img {
−
.grid li {
+
opacity: 1;
−
width: 50%;
+
−
}
+
 
}
 
}
−
 
+
.related h3{font-family: "Microsoft YaHei", sans-serif;}
−
@media screen and (max-width: 24em) {
+
.related a h3 {
−
.grid li {
+
font-weight: 300;
−
width: 100%;
+
margin-top: 0.15em;
−
}
+
color: #fff;
 
}
 
}
−
 
+
/* icomoon */
−
 
+
.icon-home:before {
−
/* General Blueprint Style */
+
content: "\e600";
−
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
−
@font-face {
+
−
font-family: 'bpicons';
+
−
src:url('../fonts/bpicons/bpicons.eot');
+
−
src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
+
−
url('../fonts/bpicons/bpicons.woff') format('woff'),
+
−
url('../fonts/bpicons/bpicons.ttf') format('truetype'),
+
−
url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
+
−
font-weight: normal;
+
−
font-style: normal;
+
−
} /* Made with http://icomoon.io/ */
+
−
 
+
−
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
−
body, html { font-size: 100%; padding: 0; margin: 0;}
+
−
 
+
−
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
−
.clearfix:before, .clearfix:after { content: " "; display: table; }
+
−
.clearfix:after { clear: both; }
+
−
 
+
−
body {
+
−
    font-family: 'Lato', Calibri, Arial, sans-serif;
+
−
    color: #47a3da;
+
 
}
 
}
  
−
a {
+
.icon-pacman:before {
−
color: #f0f0f0;
+
content: "\e623";
−
text-decoration: none;
+
−
outline: none;
+
 
}
 
}
  
−
a:hover {
+
.icon-users2:before {
−
color: #000;
+
content: "\e678";
 
}
 
}
  
−
.container > header {
+
.icon-bug:before {
−
width: 90%;
+
content: "\e699";
−
max-width: 69em;
+
−
margin: 0 auto;
+
−
padding: 2.875em 1.875em 1.875em;
+
 
}
 
}
  
−
.container > header h1 {
+
.icon-eye:before {
−
font-size: 2.125em;
+
content: "\e610";
−
line-height: 1.3;
+
−
margin: 0 0 0.6em 0;
+
−
float: left;
+
−
font-weight: 400;
+
 
}
 
}
  
−
.container > header > span {
+
.icon-eye-blocked:before {
−
display: block;
+
content: "\e611";
−
position: relative;
+
−
z-index: 200;
+
−
font-weight: 700;
+
−
text-transform: uppercase;
+
−
letter-spacing: 0.5em;
+
−
padding: 0 0 0.6em 0.1em;
+
 
}
 
}
  
−
.container > header > span span:after {
+
.icon-eye2:before {
−
width: 30px;
+
content: "\e612";
−
height: 30px;
+
−
left: -12px;
+
−
font-size: 50%;
+
−
top: -8px;
+
−
font-size: 75%;
+
−
position: relative;
+
 
}
 
}
  
−
.container > header > span span:hover:before {
+
.icon-arrow-up-left3:before {
−
content: attr(data-content);
+
content: "\e72f";
−
text-transform: none;
+
−
text-indent: 0;
+
−
letter-spacing: 0;
+
−
font-weight: 300;
+
−
font-size: 110%;
+
−
padding: 0.8em 1em;
+
−
line-height: 1.2;
+
−
text-align: left;
+
−
left: auto;
+
−
margin-left: 4px;
+
−
position: absolute;
+
−
color: #fff;
+
−
background: #47a3da;
+
 
}
 
}
  
−
.container > header nav {
+
.icon-arrow-up3:before {
−
float: right;
+
content: "\e730";
−
text-align: center;
+
 
}
 
}
  
−
.container > header nav a {
+
.icon-arrow-up-right3:before {
−
display: inline-block;
+
content: "\e731";
−
position: relative;
+
−
text-align: left;
+
−
width: 2.5em;
+
−
height: 2.5em;
+
−
background: #fff;
+
−
border-radius: 50%;
+
−
margin: 0 0.1em;
+
−
border: 4px solid #47a3da;
+
 
}
 
}
  
−
.container > header nav a > span {
+
.icon-arrow-right3:before {
−
display: none;
+
content: "\e732";
 
}
 
}
  
−
.container > header nav a:hover:before {
+
.icon-arrow-down-right3:before {
−
content: attr(data-info);
+
content: "\e733";
−
color: #47a3da;
+
−
position: absolute;
+
−
width: 600%;
+
−
top: 120%;
+
−
text-align: right;
+
−
right: 0;
+
−
pointer-events: none;
+
 
}
 
}
  
−
.container > header nav a:hover {
+
.icon-arrow-down3:before {
−
background: #47a3da;
+
content: "\e734";
 
}
 
}
  
−
.bp-icon:after {
+
.icon-arrow-down-left3:before {
−
font-family: 'bpicons';
+
content: "\e735";
−
speak: none;
+
−
font-style: normal;
+
−
font-weight: normal;
+
−
font-variant: normal;
+
−
text-transform: none;
+
−
text-align: center;
+
−
color: #47a3da;
+
−
-webkit-font-smoothing: antialiased;
+
 
}
 
}
  
−
.container > header nav .bp-icon:after {
+
.icon-arrow-left3:before {
−
position: absolute;
+
content: "\e736";
−
top: 0;
+
−
left: 0;
+
−
width: 100%;
+
−
height: 100%;
+
−
line-height: 2;
+
−
text-indent: 0;
+
 
}
 
}
  
−
.container > header nav a:hover:after {
 
−
color: #fff;
 
−
}
 
  
−
.bp-icon-next:after {
 
−
content: "\e000";
 
−
}
 
−
.bp-icon-drop:after {
 
−
content: "\e001";
 
−
}
 
−
.bp-icon-archive:after {
 
−
content: "\e002";
 
−
}
 
−
.bp-icon-about:after {
 
−
content: "\e003";
 
−
}
 
−
.bp-icon-prev:after {
 
−
content: "\e004";
 
−
}
 
−
 
−
@media screen and (max-width: 55em) {
 
  
−
.container > header h1,
+
@media screen and (max-width: 50em) {
−
.container > header nav {
+
.htmleaf-header {
−
float: none;
+
padding: 3em 10% 4em;
 
}
 
}
 +
.htmleaf-header h1 {
 +
        font-size:2em;
 +
    }
 +
}
  
−
.container > header > span,
 
−
.container > header h1 {
 
−
text-align: center;
 
−
}
 
  
−
.container > header nav {
+
@media screen and (max-width: 40em) {
−
margin: 0 auto;
+
.htmleaf-header h1 {
 +
font-size: 1.5em;
 
}
 
}
 +
}
  
−
.container > header > span {
+
@media screen and (max-width: 30em) {
−
text-indent: 30px;
+
    .htmleaf-header h1 {
−
}
+
        font-size:1.2em;
 +
    }
 
}
 
}

Revision as of 07:06, 17 September 2015

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}


@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800); @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?yrquyl'); src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'), url('../fonts/icomoon.woff?yrquyl') format('woff'), url('../fonts/icomoon.ttf?yrquyl') format('truetype'), url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;

/* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */

  • ,
    after,
    before {

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

body{ background: #f9f7f6; color: #404d5b; font-weight: 500; font-size: 1.05em; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; } a{color: #2fa0ec;text-decoration: none;outline: none;} a:hover,a:focus{color:#74777b;};

.htmleaf-container{ margin: 0 auto; text-align: center; overflow: hidden; } .htmleaf-content { font-size: 150%; padding: 1em 0; }

.htmleaf-content h2 { margin: 0 0 2em; opacity: 0.1; }

.htmleaf-content p { margin: 1em 0; padding: 5em 0 0 0; font-size: 0.65em; } .bgcolor-1 { background: #f0efee; } .bgcolor-2 { background: #f9f9f9; } .bgcolor-3 { background: #e8e8e8; }/*light grey*/ .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ .bgcolor-7 { background: #d0d6d6; }/*White tea*/ .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ /* Header */ .htmleaf-header{ padding: 1em 190px 1em; letter-spacing: -1px; text-align: center; } .htmleaf-header h1 { font-weight: 600; font-size: 2em; line-height: 1; margin-bottom: 0; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; } .htmleaf-header h1 span { font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; display: block; font-size: 60%; font-weight: 400; padding: 0.8em 0 0.5em 0; color: #c3c8cd; } /*nav*/ .htmleaf-demo a{color: #1d7db1;text-decoration: none;} .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;} .htmleaf-demo a:hover{opacity: 0.6;} .htmleaf-demo a.current{background:#1d7db1;color: #fff; } /* Top Navigation Style */ .htmleaf-links { position: relative; display: inline-block; white-space: nowrap; font-size: 1.5em; text-align: center; }

.htmleaf-links::after { position: absolute; top: 0; left: 50%; margin-left: -1px; width: 2px; height: 100%; background: #dbdbdb; content: ; -webkit-transform: rotate3d(0,0,1,22.5deg); transform: rotate3d(0,0,1,22.5deg); }

.htmleaf-icon { display: inline-block; margin: 0.5em; padding: 0em 0; width: 1.5em; text-decoration: none; }

.htmleaf-icon span { display: none; }

.htmleaf-icon:before { margin: 0 5px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'icomoon'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } /* footer */ .htmleaf-footer{width: 100%;padding-top: 10px;} .htmleaf-small{font-size: 0.8em;} .center{text-align: center;} /****/ .related { color: #fff; background: #333; text-align: center; font-size: 1.25em; padding: 0.5em 0; overflow: hidden; }

.related > a { vertical-align: top; width: calc(100% - 20px); max-width: 340px; display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; } .related a { display: inline-block; text-align: left; margin: 20px auto; padding: 10px 20px; opacity: 0.8; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; }

.related a:hover, .related a:active { opacity: 1; }

.related a img { max-width: 100%; opacity: 0.8; border-radius: 4px; } .related a:hover img, .related a:active img { opacity: 1; } .related h3{font-family: "Microsoft YaHei", sans-serif;} .related a h3 { font-weight: 300; margin-top: 0.15em; color: #fff; } /* icomoon */ .icon-home:before { content: "\e600"; }

.icon-pacman:before { content: "\e623"; }

.icon-users2:before { content: "\e678"; }

.icon-bug:before { content: "\e699"; }

.icon-eye:before { content: "\e610"; }

.icon-eye-blocked:before { content: "\e611"; }

.icon-eye2:before { content: "\e612"; }

.icon-arrow-up-left3:before { content: "\e72f"; }

.icon-arrow-up3:before { content: "\e730"; }

.icon-arrow-up-right3:before { content: "\e731"; }

.icon-arrow-right3:before { content: "\e732"; }

.icon-arrow-down-right3:before { content: "\e733"; }

.icon-arrow-down3:before { content: "\e734"; }

.icon-arrow-down-left3:before { content: "\e735"; }

.icon-arrow-left3:before { content: "\e736"; }


@media screen and (max-width: 50em) { .htmleaf-header { padding: 3em 10% 4em; } .htmleaf-header h1 { 

       font-size:2em;
   }

}


@media screen and (max-width: 40em) { .htmleaf-header h1 { font-size: 1.5em; } }

@media screen and (max-width: 30em) { 

   .htmleaf-header h1 {
       font-size:1.2em;
   }

}