/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
html { height: 100%; font-size: 100%}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #f9f9f9;
font-weight: 300;
font-size: 1em;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.main,
.container > header {
width: 95%;
max-width: 1240px;
margin: 0 auto;
position: relative;
padding: 0 30px 50px 30px;
}
.container > header {
padding: 30px;
}
.container > header h1 {
font-size: 34px;
line-height: 38px;
margin: 0;
font-weight: 700;
color: #333;
float: left;
}
.container > header h1 span {
display: block;
font-size: 20px;
font-weight: 300;
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.8);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos {
float: right;
padding-top: 10px;
}
.codrops-demos a {
display: inline-block;
margin: 10px;
color: #666;
font-weight: 700;
line-height: 30px;
border-bottom: 4px solid transparent;
}
.codrops-demos a:hover {
color: #000;
border-color: #000;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
color: #aaa;
border-color: #aaa;
}
.support-note {
clear: both;
}
.support-note span{
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
/*************************
DEMO STYLES
*************************/
@import url('demo.css');
/* Component Style */
body {
background-color: #fff;
}
img {
width: auto;
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
.highlight {
background: transparent;
min-height: 32px;
min-height: 2rem;
box-shadow: inset 0 0 5px hsla(0, 0%, 0%, .15);
}
.highlight .highlight {
background: #7BCDC8;
box-shadow: none;
}
.decoration:before {
content: "IE D\003A";
font-weight: bold;
white-space: pre;
}
.resize {
position: fixed;
background-color: #7BCDC8;
background-color: hsla(176, 45%, 64%, .75);
color: #fff;
bottom: 0;
right: 0;
padding: .5em 4em 3em;
-webkit-transform: translate(70px, 15px) rotate(-45deg);
-o-transform: translate(70px, 15px) rotate(-45deg);
transform: translate(70px, 15px) rotate(-45deg);
z-index: 1000;
}
/* typography modifiers */
.ac { text-align: center;}
/* layout modifiers */
.mb-alpha {
margin-bottom: 16px;
margin-bottom: 1rem;
}
.mb-gamma {
margin-bottom: 48px;
margin-bottom: 3rem;
}
.d-iblock { display: inline-block;}
/*!
* Gridpak Beta CSS
*
* Generator - http://gridpak.com/
* Created by @erskinedesign
*/
.row {
margin-left: -24px;
margin-left: -1.5rem;
}
.ie8 .row { /* margin-left: 0 */}
/* Reusable column setup */
.col {
position: relative;
float: left;
border: 0px solid transparent;
border-left-width: 24px;
border-left-width: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
}
.ie8 .col { /* padding: 0 24px; */}
.span_1_ie8 { width: 8.33333333333%;}
.span_2_ie8 { width: 16.6666666667%;}
.span_3_ie8 { width: 25.0%;}
.span_4_ie8 { width: 33.3333333333%;}
.span_5_ie8 { width: 41.6666666667%;}
.span_6_ie8 { width: 50.0%;}
.span_7_ie8 { width: 58.3333333333%;}
.span_8_ie8 { width: 66.6666666667%;}
.span_9_ie8 { width: 75.0%;}
.span_10_ie8 { width: 83.3333333333%;}
.span_11_ie8 { width: 91.6666666667%;}
.span_12_ie8 {
margin-left: 0;
width: 100%;
}
.pull_1_ie8 { left: -8.33333333333%;}
.pull_2_ie8 { left: -16.6666666667%;}
.pull_3_ie8 { left: -25.0%;}
.pull_4_ie8 { left: -33.3333333333%;}
.pull_5_ie8 { left: -41.6666666667%;}
.pull_6_ie8 { left: -50.0%;}
.pull_7_ie8 { left: -58.3333333333%;}
.pull_8_ie8 { left: -66.6666666667%;}
.pull_9_ie8 { left: -75.0%;}
.pull_10_ie8 { left: -83.3333333333%;}
.pull_11_ie8 { left: -91.6666666667%;}
.pull_12_ie8 { left: -100%;}
.push_1_ie8 { right: -8.33333333333%;}
.push_2_ie8 { right: -16.6666666667%;}
.push_3_ie8 { right: -25.0%;}
.push_4_ie8 { right: -33.3333333333%;}
.push_5_ie8 { right: -41.6666666667%;}
.push_6_ie8 { right: -50.0%;}
.push_7_ie8 { right: -58.3333333333%;}
.push_8_ie8 { right: -66.6666666667%;}
.push_9_ie8 { right: -75.0%;}
.push_10_ie8 { right: -83.3333333333%;}
.push_11_ie8 { right: -91.6666666667%;}
.push_12_ie8 { right: -100%;}
/* 1. 12 Column Grid 0px
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */
@media screen and (min-width: 0) {
.decoration:before { content: "\003A\0020\0029";}
.span_1_vpalpha { width: 8.33333333333%;}
.span_2_vpalpha { width: 16.6666666667%;}
.span_3_vpalpha { width: 25.0%;}
.span_4_vpalpha { width: 33.3333333333%;}
.span_5_vpalpha { width: 41.6666666667%;}
.span_6_vpalpha { width: 50.0%;}
.span_7_vpalpha { width: 58.3333333333%;}
.span_8_vpalpha { width: 66.6666666667%;}
.span_9_vpalpha { width: 75.0%;}
.span_10_vpalpha { width: 83.3333333333%;}
.span_11_vpalpha { width: 91.6666666667%;}
.span_12_vpalpha {
margin-left: 0;
width: 100%;
}
.pull_push_0_vpalpha { left: auto; right: auto;}
.pull_1_vpalpha { left: -8.33333333333%;}
.pull_2_vpalpha { left: -16.6666666667%;}
.pull_3_vpalpha { left: -25.0%;}
.pull_4_vpalpha { left: -33.3333333333%;}
.pull_5_vpalpha { left: -41.6666666667%;}
.pull_6_vpalpha { left: -50.0%;}
.pull_7_vpalpha { left: -58.3333333333%;}
.pull_8_vpalpha { left: -66.6666666667%;}
.pull_9_vpalpha { left: -75.0%;}
.pull_10_vpalpha { left: -83.3333333333%;}
.pull_11_vpalpha { left: -91.6666666667%;}
.pull_12_vpalpha { left: -100%;}
.push_1_vpalpha { right: -8.33333333333%;}
.push_2_vpalpha { right: -16.6666666667%;}
.push_3_vpalpha { right: -25.0%;}
.push_4_vpalpha { right: -33.3333333333%;}
.push_5_vpalpha { right: -41.6666666667%;}
.push_6_vpalpha { right: -50.0%;}
.push_7_vpalpha { right: -58.3333333333%;}
.push_8_vpalpha { right: -66.6666666667%;}
.push_9_vpalpha { right: -75.0%;}
.push_10_vpalpha { right: -83.3333333333%;}
.push_11_vpalpha { right: -91.6666666667%;}
.push_12_vpalpha { right: -100%;}
}
/* 2. 12 Column Grid 480px
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */
@media screen and (min-width: 30em) {
.decoration:before {
content: "\21A2";
}
.span_1_vpbeta { width: 8.33333333333%;}
.span_2_vpbeta { width: 16.6666666667%;}
.span_3_vpbeta { width: 25.0%;}
.span_4_vpbeta { width: 33.3333333333%;}
.span_5_vpbeta { width: 41.6666666667%;}
.span_6_vpbeta { width: 50.0%;}
.span_7_vpbeta { width: 58.3333333333%;}
.span_8_vpbeta { width: 66.6666666667%;}
.span_9_vpbeta { width: 75.0%;}
.span_10_vpbeta { width: 83.3333333333%;}
.span_11_vpbeta { width: 91.6666666667%;}
.span_12_vpbeta {
margin-left: 0;
width: 100%;
}
.pull_push_0_vpbeta { left: auto; right: auto;}
.pull_1_vpbeta { left: -8.33333333333%;}
.pull_2_vpbeta { left: -16.6666666667%;}
.pull_3_vpbeta { left: -25.0%;}
.pull_4_vpbeta { left: -33.3333333333%;}
.pull_5_vpbeta { left: -41.6666666667%;}
.pull_6_vpbeta { left: -50.0%;}
.pull_7_vpbeta { left: -58.3333333333%;}
.pull_8_vpbeta { left: -66.6666666667%;}
.pull_9_vpbeta { left: -75.0%;}
.pull_10_vpbeta { left: -83.3333333333%;}
.pull_11_vpbeta { left: -91.6666666667%;}
.pull_12_vpbeta { left: -100%;}
.push_1_vpbeta { right: -8.33333333333%;}
.push_2_vpbeta { right: -16.6666666667%;}
.push_3_vpbeta { right: -25.0%;}
.push_4_vpbeta { right: -33.3333333333%;}
.push_5_vpbeta { right: -41.6666666667%;}
.push_6_vpbeta { right: -50.0%;}
.push_7_vpbeta { right: -58.3333333333%;}
.push_8_vpbeta { right: -66.6666666667%;}
.push_9_vpbeta { right: -75.0%;}
.push_10_vpbeta { right: -83.3333333333%;}
.push_11_vpbeta { right: -91.6666666667%;}
.push_12_vpbeta { right: -100%;}
}
/* 3. 12 Column Grid 640px
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */
@media screen and (min-width: 40em) {
.decoration:before {
content: "\005f\005f\005f \0020 \005f\005f\005f \0020 \005f \0020 \005f \000A \005f \0020 \005f \0020 \005f \0020 \005f\005f\005f\005f\005f \000A \005f\005f\005f\005f\005f \0020 \005f \0020 \005f \0020 \005f \000A \0020 \005f \0020 \005f \0020 \005f\005f\005f \0020 \005f\005f\005f";
}
.span_1_vpgamma { width: 8.33333333333%;}
.span_2_vpgamma { width: 16.6666666667%;}
.span_3_vpgamma { width: 25.0%;}
.span_4_vpgamma { width: 33.3333333333%;}
.span_5_vpgamma { width: 41.6666666667%;}
.span_6_vpgamma { width: 50.0%;}
.span_7_vpgamma { width: 58.3333333333%;}
.span_8_vpgamma { width: 66.6666666667%;}
.span_9_vpgamma { width: 75.0%;}
.span_10_vpgamma { width: 83.3333333333%;}
.span_11_vpgamma { width: 91.6666666667%;}
.span_12_vpgamma {
margin-left: 0;
width: 100%;
}
.pull_push_0_vpgamma { left: auto; right: auto;}
.pull_1_vpgamma { left: -8.33333333333%;}
.pull_2_vpgamma { left: -16.6666666667%;}
.pull_3_vpgamma { left: -25.0%;}
.pull_4_vpgamma { left: -33.3333333333%;}
.pull_5_vpgamma { left: -41.6666666667%;}
.pull_6_vpgamma { left: -50.0%;}
.pull_7_vpgamma { left: -58.3333333333%;}
.pull_8_vpgamma { left: -66.6666666667%;}
.pull_9_vpgamma { left: -75.0%;}
.pull_10_vpgamma { left: -83.3333333333%;}
.pull_11_vpgamma { left: -91.6666666667%;}
.pull_12_vpgamma { left: -100%;}
.push_1_vpgamma { right: -8.33333333333%;}
.push_2_vpgamma { right: -16.6666666667%;}
.push_3_vpgamma { right: -25.0%;}
.push_4_vpgamma { right: -33.3333333333%;}
.push_5_vpgamma { right: -41.6666666667%;}
.push_6_vpgamma { right: -50.0%;}
.push_7_vpgamma { right: -58.3333333333%;}
.push_8_vpgamma { right: -66.6666666667%;}
.push_9_vpgamma { right: -75.0%;}
.push_10_vpgamma { right: -83.3333333333%;}
.push_11_vpgamma { right: -91.6666666667%;}
.push_12_vpgamma { right: -100%;}
}
<!doctype html>
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a title</title>
<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<header class="cf">
<div class="support-note">
<span class="note-ie">Sorry, only modern browsers. Even you... IE8.</span>
</div>
</header>
<div class="main">
<div class="resize"><small><strong>resize me!</strong></small></div>
<div class="row cf">
<div class="highlight mb-alpha col span_12_vpalpha span_8_vpgamma span_8_ie8">
<div class="row cf">
<div class="highlight col span_7_vpalpha span_5_vpbeta span_6_vpgamma span_6_ie8"></div>
<div class="highlight col span_5_vpalpha span_7_vpbeta span_6_vpgamma span_6_ie8"></div>
</div>
</div>
<div class="highlight mb-alpha col span_12_vpalpha span_4_vpgamma span_4_ie8">
<div class="row cf">
<div class="highlight col span_9_vpalpha span_4_vpbeta span_6_vpgamma span_6_ie8"></div>
<div class="highlight col span_3_vpalpha span_8_vpbeta span_6_vpgamma span_6_ie8"></div>
</div>
</div>
<div class="highlight mb-alpha col span_12_vpalpha span_6_vpgamma span_6_ie8">
<div class="row cf">
<div class="highlight col span_4_vpalpha span_3_vpbeta span_4_vpgamma span_4_ie8"></div>
<div class="highlight col span_6_vpalpha span_8_vpbeta span_4_vpgamma span_4_ie8"></div>
<div class="highlight col span_2_vpalpha span_1_vpbeta span_4_vpgamma span_4_ie8"></div>
</div>
</div>
<div class="highlight mb-alpha col span_12_vpalpha span_2_vpbeta span_6_vpgamma span_6_ie8">
<div class="row cf">
<div class="highlight col span_11_vpalpha span_12_vpbeta span_12_vpgamma span_12_ie8"></div>
</div>
</div>
<div class="highlight mb-alpha col span_12_vpalpha span_10_vpbeta span_6_vpgamma span_6_ie8">
<div class="row cf">
<div class="highlight col span_11_vpalpha span_2_vpbeta push_10_vpbeta span_12_vpgamma pull_push_0_vpgamma span_12_ie8"></div>
</div>
</div>
<div class="highlight mb-alpha col span_12_vpalpha span_6_vpgamma span_6_ie8">
<div class="row cf">
<div class="highlight col span_4_vpalpha span_3_vpbeta span_4_vpgamma span_4_ie8"></div>
<div class="highlight col span_6_vpalpha span_8_vpbeta span_4_vpgamma span_4_ie8"></div>
<div class="highlight col span_2_vpalpha span_1_vpbeta span_4_vpgamma span_4_ie8"></div>
</div>
</div>
<div class="highlight mb-alpha col span_12_vpalpha span_4_vpgamma span_4_ie8">
<div class="row cf">
<div class="highlight col span_9_vpalpha span_4_vpbeta span_6_vpgamma span_6_ie8"></div>
<div class="highlight col span_3_vpalpha span_8_vpbeta span_6_vpgamma span_6_ie8"></div>
</div>
</div>
<div class="highlight mb-alpha col span_12_vpalpha span_8_vpgamma span_8_ie8">
<div class="row cf">
<div class="highlight col span_7_vpalpha span_5_vpbeta span_6_vpgamma span_6_ie8"></div>
<div class="highlight col span_5_vpalpha span_7_vpbeta span_6_vpgamma span_6_ie8"></div>
</div>
</div>
</div>
<div class="ac"><span class="decoration"></span></div>
</div>
</div><!-- /container -->
</body>
</html>