/* General Demo Style */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); html { height: 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/ */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { font-family: 'Lato', Calibri, Arial, sans-serif; font-weight: 300; font-size: 15px; color: #333; height: 100%; } a { color: #555; text-decoration: none; } .container { width: 100%; height: 100%; position: relative; } .container > header, .main { padding: 0 30px 50px 30px; width: 100%; max-width: 600px; margin: 0 auto; } .container > header { padding: 30px; } .container > header h1 { font-size: 34px; line-height: 38px; margin: 0; font-weight: 700; color: #fff; float: left; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } .container > header h1 span { font-size: 18px; font-weight: 300; display: block; } /* 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; } .codrops-demos a { display: inline-block; margin: 10px; color: #fff; 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: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.5); }