Template:SZU China/Playground/demo/CSS

@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: #fff;
   background: #333;

} a {

   color: #ccc;
   text-decoration: none;

} a:hover {

   color: #000;

} .codropsheader {

   width: 100%;
   margin: 0 auto;
   text-align: left;
   padding: 1.4em;
   opacity: 0.7;
   visibility: visible;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;

} .codropsheader h1 {

   font-size: 2.125em;
   line-height: 1.3;
   margin: 0 0 0.6em 0;
   float: left;
   font-weight: 400;

} .codropsheader > span {

   display: block;
   position: relative;
   z-index: 9999;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5em;
   padding: 0 0 0.6em 0.1em;

} .codropsheader > span span:after {

   width: 30px;
   height: 30px;
   left: -12px;
   font-size: 50%;
   top: -8px;
   font-size: 75%;
   position: relative;

} .codropsheader > span span:hover:before {

   content: attr(data-content);
   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: #47a3da;
   background: #fff;

} .codropsheader nav {

   float: left;
   text-align: center;
   margin-left: 1.5em;
   display: block;

} .codropsheader nav a {

   display: inline-block;
   position: relative;
   text-align: left;
   width: 2.5em;
   height: 2.5em;
   background: #47a3da;
   border-radius: 50%;
   margin: 0 0.1em;
   border: 3px solid #fff;

} .codropsheader nav a > span {

   display: none;

} .codropsheader nav a:hover:before {

   content: attr(data-info);
   color: #fff;
   position: absolute;
   width: 600%;
   top: 120%;
   text-align: right;
   right: 0;
   pointer-events: none;

} .codropsheader nav a:hover {

   background: #fff;

} .bp-icon:after {

   font-family:'bpicons';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   text-align: center;
   color: #fff;
   -webkit-font-smoothing: antialiased;

} .codropsheader nav .bp-icon:after {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   line-height: 2;
   text-indent: 0;

} .codropsheader nav a:hover:after {

   color: #47a3da;

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

} .demos {

   display: inline-block;
   line-height: 2.4em;
   margin-left: 1em;
   float: right;

} .demos a {

   display: inline-block;
   color: #fff;
   margin: 0 0.5em;

} .demos a:hover, .demos a:focus, .demos a.current {

   color: rgba(0, 0, 0, .4);

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

   .codropsheader {
       text-align: center;
   }
   .codropsheader h1, .codropsheader nav, .demos {
       float: none;
       margin: 0 auto;
       padding: 0.15em 0;
   }
   .codropsheader > span {
       padding: 0;
   }
   .codropsheader > span span:after {
       display: none;
   }

} @media screen and (max-height: 30.25em) {

   .codropsheader nav {
       display: none;
   }

}