Template:SZU China/Playground/Introduction/CSS

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

}