I have never seen this in all my css navigation menus.
The last item from left to right remains about 50% below the others in the list.
screenshot attached
Not live page as it is just a landing page concept now.
there is more than enough space on the left and right sides.
I changed the padding:0;margin:0; to text-align-left; and no change.
Ideally I want it to span across the whole area within the div it is inside.
Here is
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Extra Strength Responsive Grids</title>
<meta name="description" content="The Cure for Rigid Grid Syndrome">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="./favicon.ico" >
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One|PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href="css/grid.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\\/script>')</script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="page-wrap">
<header class="grid-whole padded header-top">
<div class="grid-demo grid-whole">
<div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-grid-2 padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
<div class="grid-1 s-hidden padded-sides"><div class="padded-inner content-box"></div></div>
</div>
<div class="grid-quarter padded">
<div class="hero-img-contain">
<img class="hero-img" src="img/box.png" />
</div>
</div>
<div class="grid-whole l-grid-9 padded">
<div class="l-padded">
<h1>Extra Strength Responsive Grids</h1>
<h2>The Cure for Rigid Grid Syndrome</h2>
<p><small><em>a <a href="http://dfcb.github.com">Draftfcb Open Source</a> project from <a href="https://twitter.com/johnpolacek">John Polacek</a></em></small></p>
</div>
</div>
<ul id="nav">
<li><a href="#">Divisional</a></li>
<li><a href="#">Wildcard</a></li>
<li><a href="#">Seahawks</a></li>
<li><a href="#">Niners</a></li>
<li><a href="#">Patriots</a></li>
<li><a href="#">Broncos</a></li>
<li><a href="#">Team Owners</a></li>
</ul>
</header>
<section id="main" role="main">
<div class="grid-whole padded content-top">
<div class="l-grid-two-thirds padded-sides">
<div class="padded-inner-sides">
<p><strong>Do you suffer from rigid grid syndrome?</strong> Wish your grids were a little more pliant? The key active ingredient in Extra Strength Responsive Grids is <em><strong>MQ</strong> (a.k.a media queries)</em>. Apply <em><strong>MQ</strong></em> to your grids today!</p>
<p>Have you tried responsive grids before? Did you run into issues where your <em>'responsive'</em> grids weren't responsive enough? Have you had a bad experience with a grid system that was afflicted with <em>'grid snap'?</em> Extra Strength Responsive Grids are percentage-based, for smooth, non-snappy width adjustments. Are you frustrated when collapsing your grid into a single column seems to be your only option for small screens? And what about those <em>pesky phablets?!</em></p>
<p><strong>Extra Strength Responsive Grids can cure all<sup>1</sup> your responsive layout problems!!</strong></p>
<div class="content-download center">
<a href="https://github.com/dfcb/extra-strength-responsive-grids/archive/master.zip" class="btn-big">⬇ Download Now</a>
<p>or <a href="https://github.com/dfcb/extra-strength-responsive-grids">view the project on Github</a></p>
</div>
</div>
</div>
<aside class="l-grid-third padded">
<div class="padded-inner content-box content-box-secondary">
<h2>Extra Strength Responsive Grids</h2>
<ul class="clearfix">
<li class="m-grid-half">Fluid Percentage-based</li>
<li class="m-grid-half">Media Queries</li>
<li class="m-grid-half">Easy Alignment</li>
<li class="m-grid-half">Nested Grids</li>
<li class="m-grid-half">Easy-To-Remember Classes</li>
<li class="m-grid-half">Great for Prototyping</li>
<li class="m-grid-half">Expressive</li>
<li class="m-grid-half">SASS-enabled</li>
<li class="m-grid-half"><em>Includes equalize.js!</em></li>
</ul>
</div>
</aside>
</div>
<div class="grid-whole padded">
<div class="grid-whole padded">
<div class="padded-inner-sides header-example">
<h3><em>With Extra Strength Responsive Grids, you can take total control of your layouts.</em></h3>
</div>
</div>
<div class="grid-whole equalize">
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">You can do the normal columns</div>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">that collapse to stacked</div>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">when you are on a small screen...</div>
</div>
<div class="grid-quarter m-grid-half s-grid-whole padded">
<div class="padded-inner content-box">How about four columns on large...</div>
</div>
<div class="grid-quarter m-grid-half s-grid-whole padded">
<div class="padded-inner content-box">two columns on medium (phablet!)...</div>
</div>
<div class="grid-quarter m-grid-half s-grid-whole padded">
<div class="padded-inner content-box">and stacked on small...</div>
</div>
<div class="grid-quarter m-grid-half s-grid-whole padded">
<div class="padded-inner content-box">Not a problem!</div>
</div>
</div>
</div>
<div class="grid-whole padded">
<div class="grid-whole padded-sides">
<div class="padded-inner content-box content-box-header">
<h3>Or take for example a content group with a header block...</h3>
</div>
</div>
<div class="l-grid-three-quarters padded-sides l-flow-opposite">
<div class="padded-inner-sides clearfix">
<p>and a main content area that goes to the right on large screens, but stacks on top of the sidebar on medium & small (via the <code>.flow-opposite</code> class - thanks <a href="https://github.com/davatron5000/Foldy960">foldy</a>)</p>
<h3>Go for it! <small><em>(resize your browser to see it in action)</em></small></h3>
</div>
</div>
<div class="l-grid-quarter padded">
<div class="padded-inner content-box clearfix">
<div class="m-grid-whole m-padded-sides">
<p>and a sidebar area</p>
</div>
<div class="equalize">
<div class="m-grid-quarter m-padded-sides">
<div class="padded-inner content-box content-box-inner">with inner boxes</div>
</div>
<div class="m-grid-quarter m-padded-sides">
<div class="padded-inner content-box content-box-inner">that stack on large screens,</div>
</div>
<div class="m-grid-quarter m-padded-sides">
<div class="padded-inner content-box content-box-inner">are columned on medium,</div>
</div>
<div class="m-grid-quarter m-padded-sides">
<div class="padded-inner content-box content-box-inner">then go back to stacked on small?</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-whole padded-inner">
<div class="padded-inner-sides header-example">
<p><strong>Do class names like <code>.grid-6</code> and <code>.grid-4</code> confuse you?</strong> Instead, try our simple to understand and easy to remember classes like <code>.grid-half</code> and <code>.grid-third</code>.</p>
</div>
</div>
<div class="grid-whole padded-sides">
<div class="grid-whole padded"><div class="padded-inner content-box center">.grid-12 = .grid-whole</div></div>
<div class="grid-half padded"><div class="padded-inner content-box center">.grid-6</div></div>
<div class="grid-half padded"><div class="padded-inner content-box center">.grid-half</div></div>
<div class="grid-third padded"><div class="padded-inner content-box center">.grid-third</div></div>
<div class="grid-two-thirds padded"><div class="padded-inner content-box center">.grid-two-thirds</div></div>
<div class="grid-quarter padded"><div class="padded-inner content-box center">.grid-quarter</div></div>
<div class="grid-three-quarters padded"><div class="padded-inner content-box center">.grid-three-quarters</div></div>
</div>
<div class="grid-whole padded-inner">
<div class="padded-inner header-example">
<p><strong>Do your grids suffer from bad alignment?</strong> Extra Strength Responsive Grids comes with padding classes so you can make sure all your boxes line up just right!</p>
</div>
</div>
<div class="grid-whole padded padding-demo">
<p><code>.padded</code></p>
<div class="grid-half s-grid-whole padded padding-demo">
<p><code>.padded</code> <small><em>(for grid gutter spacing)</em></small></p>
<div class="content-box padded-inner">
<p><code>.padded-inner</code> <small><em>(double padding for content)</em></small></p>
</div>
</div>
<div class="grid-half s-grid-whole padded padding-demo padding-demo-last">
<p><code>.padded</code></p>
<div class="content-box padded-inner-sides">
<p><code>.padded-inner-sides</code> <br /><small><em>(double padding only on the sides)</em></small></p>
</div>
</div>
</div>
<div class="grid-12 padded-inner">
<div class="padded-inner-sides header-example">
<p><strong>Do you like to nest your grids?</strong> With Extra Strength Responsive Grids, you can nest grids inside of grids that are nested within nested grids. Get crazy with it! Go bonkers! Fly your grid freak flag high!</p>
</div>
</div>
<div class="nesting-demo center padded-inner clearfix">
<div class="grid-half padded content-box">
<div class="content-box-transparent">
<div class="grid-quarter m-grid-whole s-grid-half padded content-box-transparent">
<div class="content-box-transparent">a</div>
</div>
<div class="grid-quarter m-grid-whole s-grid-half padded content-box-transparent">
<div class="content-box-transparent">b</div>
</div>
<div class="grid-whole l-grid-half padded content-box-transparent">
<div class="m-grid-half l-grid-quarter padded content-box-transparent">
<div class="content-box-transparent">c</div>
</div>
<div class="m-grid-half l-grid-quarter padded content-box-transparent">
<div class="content-box-transparent">d</div>
</div>
<div class="m-grid-half l-grid-quarter padded content-box-transparent">
<div class="content-box-transparent">e</div>
</div>
<div class="m-grid-half l-grid-quarter padded content-box-transparent">
<div class="content-box-transparent">f</div>
</div>
</div>
<div class="grid-whole padded content-box-transparent">
<div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">g</div>
</div>
<div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">h</div>
</div>
<div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">i</div>
</div>
<div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">j</div>
</div>
<div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">k</div>
</div>
<div class="s-grid-6 m-grid-4 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">l</div>
</div>
</div>
</div>
</div>
<div class="grid-half padded content-box">
<div class="content-box-transparent">
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">m</div>
</div>
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">n</div>
</div>
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">o</div>
</div>
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">p</div>
</div>
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">q</div>
</div>
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">r</div>
</div>
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">s</div>
</div>
<div class="grid-half padded content-box-transparent">
<div class="content-box-transparent">t</div>
</div>
<div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">u</div>
</div>
<div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">v</div>
</div>
<div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">w</div>
</div>
<div class="grid-4 m-grid-3 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">x</div>
</div>
<div class="grid-4 m-grid-6 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">y</div>
</div>
<div class="grid-4 m-grid-6 l-grid-2 padded content-box-transparent">
<div class="content-box-transparent">z</div>
</div>
</div>
</div>
</div><!-- .nesting-demo -->
<div class="padded-inner header-example">
<div class="padded-inner-sides">
<p>Also you can use the .padded-reverse (or .row if you are used to twitter bootstrap) class to help with nested grids.</p>
</div>
</div>
<div class="nesting-demo center padded-inner">
<div class="padded-inner grid-whole content-box">
<div class="grid-whole">
<div class="padded grid-4">
<div class="content-box-transparent">
<p><strong><em>no</em></strong> .padded-reverse</p>
</div>
</div>
<div class="padded grid-4">
<div class="content-box-transparent">
<p><strong><em>no</em></strong> .padded-reverse</p>
</div>
</div>
<div class="padded grid-4">
<div class="content-box-transparent">
<p><strong><em>no</em></strong> .padded-reverse</p>
</div>
</div>
</div>
<div class="grid-whole padded-reverse">
<div class="padded grid-4">
<div class="content-box-transparent">
<p>.padded-reverse</p>
</div>
</div>
<div class="padded grid-4">
<div class="content-box-transparent">
<p>.padded-reverse</p>
</div>
</div>
<div class="padded grid-4">
<div class="content-box-transparent">
<p>.padded-reverse</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid-12 padded-inner">
<div class="grid-whole padded-inner">
<p><strong>Bonus Offer!</strong> Extra Strength Responsive Grids comes with a free copy of <a href="http://tsvensen.github.com/equalize.js/">Equalize!</a> Equalize the heights<sup>2</sup> of your grids by adding the <code>.equalize</code> class to the parent grid container<sup>3</sup>.</p>
</div>
<div class="grid-whole padded">
<div class="grid-whole padded">
<h3>Before Equalize</h3>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">PBR squid helvetica, jean shorts next level gastropub <a href="http://hipsteripsum.me">Hipster Ipsum</a>.</div>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">Fixie fanny pack. Kogi mlkshk gentrify trust fund aesthetic, food truck flexitarian direct trade iphone helvetica pitchfork. Synth williamsburg mcsweeney's.</div>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">Thundercats cardigan fingerstache terry richardson VHS kale chips leggings. Portland four loko etsy beard, yr odd future echo park quinoa locavore terry richardson. Whatever fap keffiyeh vegan master cleanse. Art party banksy Austin.</div>
</div>
</div>
<div class="grid-whole padded equalize">
<div class="grid-whole padded">
<h3>After Equalize</h3>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">PBR squid helvetica, jean shorts next level gastropub <a href="http://hipsteripsum.me">Hipster Ipsum</a>.</div>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">Fixie fanny pack. Kogi mlkshk gentrify trust fund aesthetic, food truck flexitarian direct trade iphone helvetica pitchfork. Synth williamsburg mcsweeney's.</div>
</div>
<div class="grid-third s-grid-whole padded">
<div class="padded-inner content-box">Thundercats cardigan fingerstache terry richardson VHS kale chips leggings. Portland four loko etsy beard, yr odd future echo park quinoa locavore terry richardson. Whatever fap keffiyeh vegan master cleanse. Art party banksy Austin.</div>
</div>
</div>
</div>
<div class="grid-whole padded-inner">
<div class="padded-inner-sides header-example">
<p><strong>SASS-Enabled.</strong> Want to use an 18-column grid instead? Have your own ideas for modifications and features? This grid was built on top of <a href="http://sass-lang.com/">SASS</a>, so if you are a SASS enthusiast, you will find it easy to customize. All of the grid classes are created in a <code>gridGenerator()</code> mixin (see <a href="https://github.com/dfcb/extra-strength-responsive-grids/blob/master/css/grid.scss" target="_blank">grid.scss</a> and <a href="https://github.com/dfcb/extra-strength-responsive-grids/blob/master/css/_grid.generator.scss" target="_blank">_grid.generator.scss</a>).</p>
<p>Not into SASS? That's ok. Just ignore or delete the <code>grid.scss</code> file and be on your merry way.</p>
<p><strong>Self documenting. Expressive. Modular.</strong> Extra Strength Responsive Grids follows the approach of separating structural layout classes from content styling classes. In other words, let grid classes arrange content on the page, then for inner content, write your own classes to style everything else (color, typography, decorative styles, etc.). By keeping layout classes separate, it becomes easier to treat your content in a modular way.</p>
<p>No more searching through css to find and adjust the structure of the page. Once you become familiar with the Extra Strength Responsive Grids approach, you'll be able to quickly look at the markup and know what it is doing. Simply add or change classes to make adjustments on the fly.</p>
</div>
</div>
<div class="grid-12 padded-inner">
<div class="grid-whole padded-inner citations">
<p><small><sup>1</sup> Well, maybe not <strong><em>all</em></strong> of your layout problems! Refer to the side effects listed below.</small></p>
<p><small><sup>2</sup> Refer to the source code at the bottom of this page for more info.</small></p>
<p><small><sup>3</sup> If you do not wish to use equalize, simply do not embed the <code>equalize.min.js</code> script</small></p>
</div>
</div>
<div class="grid-12 padded content-box-header content-box-cta">
<div class="padded-inner center">
<h2><em>Try the Extra Strength Responsive Grid method today!</em></h2>
</div>
<div class="l-grid-three-quarters m-grid-two-thirds s-grid-whole padded-inner-sides">
<p><strong>From <a href="http://johnpolacek.com">John Polacek</a></strong>, maker of such other front end web remedies as <a href="http://johnpolacek.github.com/superscrollorama/">SuperScrollorama</a>, <a href="http://dfcb.github.com/BigVideo.js/">BigVideo.js</a> and <a href="http://dfcb.github.com/Responsivator/">Responsivator</a>. <a href="https://twitter.com/intent/user?screen_name=johnpolacek">Follow @johnpolacek</a> on Twitter to stay up-to-date. With contributions from <a href="http://timsvensen.com/">Tim Svensen</a> (<a href="https://twitter.com/intent/user?screen_name=johnpolacek">@tsvensen</a>) and <a href="https://github.com/apulley">Andrew Pulley</a>. This is another open source project from the <a href="http://opensource.draftfcb.net">team at Draftfcb Chicago</a>.</p>
</div>
<div class="l-grid-quarter m-grid-third s-grid-whole padded-inner-sides">
<a href="https://twitter.com/johnpolacek" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @johnpolacek</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="grid-12 padded">
<div class="padded-inner-sides warning">
<p><strong>Caution:</strong> Extra Strength Responsive Grids (ESRG) is an opinionated Grid Framework treatment. Review the side effects below prior to usage. You may wish to look into other treatment options for Rigid Grid Syndrome such as <a href="http://zengrids.com">Zen Grids</a> or <a href="http://www.profoundgrid.com">Profound Grid</a>.</p>
</div>
<div class="padded-inner-sides warning">
<p><strong>Side Effects:</strong> The use of ESRG may result in excessive container elements. <strong class="strong-very">If you are a developer who experiences adverse reactions to non-semantic container div classes, it is recommended that you avoid ESRG</strong>. Using in combination with horizontal margins may lead to side effects such as broken layouts and element collision. May cause headaches due to 'grid inception'.</p>
</div>
</div>
<div class="grid-12 padded">
<div class="padded-inner-sides warning">
<p><strong>About border-box and IE:</strong> The use of ESRG requires the use of <code>box-sizing:border-box;</code>, which is unsupported natively in IE7. However, the good news is there is a <code>boxsizing.htc</code> file that can enable border-box for oldIE browsers. <strong class="strong-very">Caution:</strong> The use of this .htc file may cause lag, especially when border-box is applied with a wildcard (*). If you are concerned about legacy IE browser support, it is recommended to only use <code>box-sizing:border-box;</code> on the grid containers, and not on the content within (as it is on the page you are lookin' at right now). <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">More info about border-box</a></p>
</div>
</div>
</section><!-- /#main -->
</div><!-- /.page-wrap -->
<img id="resize" src="img/resize.png" alt="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\\/script>')</script>
<script src="js/vendor/equalize.min.js"></script>
<script>
// smart resize - http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
$(function() {
// use equalize to equalize the heights of content elements
$('.equalize').equalize({children:'.content-box'});
// re-equalize on resize
$(window).smartresize(function(){
$('.equalize').equalize({reset:true, children:'.content-box'});
});
});
</script>
<!-- Add your own Google Analytics UA number or remove this snippet -->
<script>
var codes = ['UA-34145020-1'],
_gaq = _gaq || [];
for(i in codes) {
_gaq.push(['_setAccount', codes[i]]);
_gaq.push(['_trackPageview']);
}
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
/*
Colors
Blues #d9e8ff #c4d8f6 #4e7bc5
Red #a82121
*/
/* Normalize + H5BP - minified */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline;zoom:1;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif;color:#222;}body{font-size:1em;line-height:1.4;margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:.67em 0;}h2{font-size:1.5em;margin:.83em 0;}h3{font-size:1.17em;margin:1em 0;}h4{font-size:1em;margin:1.33em 0;}h5{font-size:.83em;margin:1.67em 0;}h6{font-size:.67em;margin:2.33em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}q:before,q:after{content:none;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}dd{margin:0 0 0 40px;}menu,ol,ul{padding:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}svg:not(:root){overflow:hidden;}fieldset{border:0;margin:0;padding:0;}legend{border:0;white-space:normal;margin-left:-7px;padding:0;}button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;width:13px;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;resize:vertical;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0;}.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;}.ir:before{content:"";display:block;width:0;height:150%;}.hidden{display:none!important;visibility:hidden;}.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0;}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0;}.invisible{visibility:hidden;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{zoom:1;}p,pre,dl,menu,ol,ul{margin:1em 0;}figure,form{margin:0;}::-moz-selection,::selection{background:#b3d4fc;text-shadow:none;}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}abbr[title]:after{content:" (" attr(title) ")";}.ir a:after,a[href^=javascript:]:after,a[href^=#]:after{content:"";}pre,blockquote{border:1px solid #999;page-break-inside:avoid;}thead{display:table-header-group;}tr,img{page-break-inside:avoid;}img{max-width:100%!important;}@page{margin:.5cm;}p,h2,h3{orphans:3;widows:3;}h2,h3{page-break-after:avoid;}}
body { font-family: 'PT Sans', sans-serif; background-color:#485671;}
h1,h2,h3,h4,h5,h6 { line-height: 1.2; margin: 0; }
h1 {
font-family: 'Alfa Slab One', cursive;
font-weight: normal;
letter-spacing: 1px;
}
h2,h3,h4,h5,h6 { font-weight: 700; }
ul { margin: .5em 0; padding: 0 0 0 1.5em; }
li { padding-right: 1em; }
small { font-weight: normal; font-size: .75em; }
sup { font-weight: normal; }
a, a:visited {
font-style: italic;
color: #4e7bc5;
font-weight: bold;
}
.page-wrap { max-width: 960px; margin: 0 auto; background-color:#fff; }
.header-example h1,
.header-example h2,
.header-example h3,
.header-example h4,
.header-example p {
margin-bottom: 0;
}
.grid-demo {
width: 98%;
height: 4.8em;
margin: .5em .5em 0;
}
.grid-demo .grid-1 { height: 4.8em; background: #d9e8ff; }
.grid-demo .grid-1 .content-box {
height: 3.6em;
background: rgba(255,255,255,.4);
border-left: dashed 1px #c4d8f6;
border-right: dashed 1px #c4d8f6;
}
.header-top h1 { margin: .4em 0 0; font-size: 2.2em; }
.header-top h2 {
margin: 0;
color: #a82121;
text-transform: uppercase;
font-style: italic;
font-weight: normal;
font-size: 1.1em;
}
#primary-header{height:92px;display:block;background-color:#173f7a; position:relative;}
.header-top p { margin: -.25em 0; opacity: .8; }
/* added */
#nav
{
padding:0;margin:0;
}
#nav li
{
display:inline;
}
#nav li a
{
font-family:Helvetica,Arial,sans-serif;text-shadow:0 0 4px #111;
font-size:15px;
letter-spacing:.0125em;
text-decoration: none;
float:left;
padding:10px 10px 10px 10px;
background-color: #325c8c;/*333333;*/
color:#fff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
text-transform:uppercase;
border:#ccc 1px solid;
}
#nav li a:hover
{
background-color:#9B1C26;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
/*margin:-1px;*/
border:#ccc 1px solid;
}
.hero-img-contain { position: relative; height: 4em; }
.hero-img {
position: absolute;
top: -3em; left: 14%;
width: 88%;
min-width: 10em;
}
.content-download { margin-bottom: 2em; }
.content-download p { margin: .25em; }
.content-box {background: #d9e8ff;border-radius: .25em; }
.content-box-header {background: #4e7bc5;color: #fff; }
.content-box-secondary {background: #4e7bc5;color:#fff; }
.content-box-inner { background: #c4d8f6; margin-bottom: .5em; }
.content-box-transparent {
background: rgba(78,123,197,.2);
}
.content-box p { margin: 0 0 1em; }
.padding-demo { border: dashed 1px #c4d8f6; color: #4e7bc5; }
.padding-demo-last { border-left: none; }
.padding-demo p {
margin: 0 0 .5em;
opacity: .8;
border-left: dashed 1px #4e7bc5;
}
.padding-demo .content-box p { border: dashed 1px #4e7bc5; }
.btn-big {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d9e8ff), color-stop(1, #c4d8f6) );
background:-moz-linear-gradient( center top, #d9e8ff 5%, #c4d8f6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9e8ff', endColorstr='#c4d8f6');
background-color:#d9e8ff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #c4d8f6;
display:inline-block;
color:#4e7cc5;
font-size:2em;
font-style: normal;
font-family: 'Alfa Slab One', cursive;
padding:6px 24px;
text-decoration:none;
text-shadow:0 1px 0 #ffffff;
}.btn-big:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c4d8f6), color-stop(1, #d9e8ff) );
background:-moz-linear-gradient( center top, #c4d8f6 5%, #d9e8ff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4d8f6', endColorstr='#d9e8ff');
background-color:#c4d8f6;
}.btn-big:active {
position:relative;
top:1px;
}
.content-box-cta {background: #a82121;color: #fff; }
.content-box-cta a, .content-box-cta a:visited {color: #fff;font-weight: bold; }
.content-box-cta p { margin: 0 0 1em; }
.warning { font-style: italic; }
.citations { border-top: dashed 1px #4e7bc5; }
.citations p { margin: 0 0 .5em; line-height: 1;}
.center { text-align: center; }
.strong-very { color: #a82121; }
#resize { position:fixed; bottom:0;right:0;}
form .input {
margin: 0 0 20px 0;
position: relative;
width: 74%;
clear: both; }
input[type=text], input[type=textarea]{
padding:4px;
font-size:15px;
border:2px solid #ccc;
background: white;
margin-bottom: 10px;
border-radius: 4px;
-webkit-transition: 0.5s ease-in-out all;
-moz-transition: 0.5s ease-in-out all;
-ms-transition: 0.5s ease-in-out all;
-o-transition: 0.5s ease-in-out all;
transition: 0.5s ease-in-out all;
margin: 0 0 20px 0;
position: relative;
width: 74%;
clear: both;
}
input[type=text]:focus, input[type=textarea]:focus{
}
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer;
background-color:#ffb32b;
font-size:16px;font-weight:bold;
padding:5px; border-radius: .25em; } /* 3 */
}
@media (max-width: 800px) {
.header-top h1, .header-top h2, .header-top p { padding-left: 16px;}
}
@media (max-width: 480px) {
.header-top h1 { font-size: 1.6em;}
.header-top h2 { font-size: .8em;}
.btn-big { font-size: 1.2em; }
}
what could I be missing?
