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