CodePen

HTML

            
              <!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>What is Rude? | Samuel Loveland</title>
        <meta name="description" content="Sam discusses the sometimes-necessary evils of rudeness.">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/samuel-loveland.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 9]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->


        <header class="site-header" role="banner">
            <h1 class="site-title"><a href="http://www.samuelloveland.com/files/projects/redesign032013/single.html">Samuel Loveland</a></h1>

            <div class="nav-control">
                <span aria-hidden="true" class="icon-list"> </span>
                <span class="control-text"><a href="#" class="toggle">Show Menu</a></span>
            </div>

            <nav class="main-nav" role="navigation">
                
                <ul class="author-pages">
                    <li><a href="#"><span aria-hidden="true" class="icon-user"> </span>Me</a></li>
                    <li><a href="#"><span aria-hidden="true" class="icon-suitcase"> </span>What I Do</a></li>
                    <li><a href="#"><span aria-hidden="true" class="icon-book"> </span>My Nightstand</a></li>
                </ul>
                <ul class="category-pages">
                    <li><a href="#"><span aria-hidden="true" class="icon-megaphone"> </span>Ranting</a></li>
                    <li><a href="#"><span aria-hidden="true" class="icon-quill"> </span>Writing</a></li>
                    <li><a href="#"><span aria-hidden="true" class="icon-network"> </span>Web Stuff</a></li>
                </ul>
            </nav>

            <form action="POST" id="header-search" role="search">
                <div class="search">
                    <label for="p">Search</label>
                    <input type="text" class="search-field" id="p">
                    <button class="search-button" type="submit" value="Search">
                        <span aria-hidden="true" class="icon-search"></span>
                    </button>
                </div>
            </form>
        </header>



        <section class="page">
            <section class="main-content" role="main">
                
                <article class="post">
                    <h1 class="post-title">What is Rude?</h1>
                    <figure class="featured-image align-right">
                        <img src="img/how-rude.jpg" alt="">
                        <figcaption class="featured-caption"><p>Caption goes here, even if it is pretty long for a caption.</p></figcaption>
                    </figure>
                    <p>That was a trick question. I’m writing this post in the first place because I believe the question to be unanswerable. Bet you’ve never seen THAT one before.</p>
                    <p>The word simply doesn’t carry the same meaning between societies. And by societies, I mean whatever home you were raised in. Families growing up on the same street probably all have a very different idea on what sort of behavior constitutes as polite or appropriate, and therefore rude.</p>
                    <p>I think a more appropriate question to ask is <strong>“What isn’t rude?”</strong></p>
                    <p>You might have your own answers, here are mine:</p>
                    <ul>
                        <li><strong>Arguing</strong>. People can be, and often are, rude while arguing – but that doesn’t make it a two-way thing. Arguing is merely a way to point out a problem and begin working out possible solutions. A good sign of bad arguing is when the argument becomes about something other than a solution to the issue at hand. If it becomes about the people, then the argument has failed. The best possible end to an argument is compromise. The next is to go separate ways peacefully.</li>
                        <li><strong>Establishing Boundaries</strong>. It is perfectly appropriate to let people know when they’ve overstepped their bounds with you. I feel it’s best to set them up before or as soon as the problem becomes noticeable in order to keep things from exacerbating.</li>
                        <li><strong>Frankness</strong>. Sometimes politeness seems to be defined by an over-abundance of caveats and addendums. Frankness doesn’t mean that the person using it doesn’t care; quite the contrary. It could mean that they care most about the issue at hand.</li>
                        <li><strong>Unconventionalism</strong>. People tend to get a very strong opinion on how things should be done, and that can easily become dogma. Don’t get me wrong, being unconventional can sometimes be bad, or even downright wrong… but not necessarily so. We establish processes and conventions because, for the most part, they make things better – but we should also be willing to have them challenged and improved.</li>
                        <li><strong>Being Angry/Upset</strong>. It’s okay to be angry. The feeling, the upset part… there is absolutely nothing wrong with it. I’d go as far as to say that if it seeps into your tone, this is okay too.  Violence doesn’t come from sounding upset or feeling angry, but from trying to control others. You can very easily be angry and merely want your space.</li>
                    </ul>
                    <p><strong>Why I'm writing this post:</strong></p>
                    <p>I’ve struggled long and hard with trying to balance my desire to be diplomatic with my desire to be open and honest.</p>
                    <p>I’ve come to the conclusion that all the people I respect in life are most likely polite, but if it came to something important, they would be honest foremost.</p>
                    <p>In some of my recent fiction, most of my favorite characters show a trend: They all, at some time or another, were considered rude. More often than not. And I love them for it.</p>
                    <ul>
                        <li>Maria from the Sound of Music</li>
                        <li>Nynaeve and Matrim Cauthim from the Wheel of Time</li>
                        <li>Lightsong from Warbreaker</li>
                        <li>Ralph from Wreck-it-Ralph</li>
                        <li>Zuko and Sokka from Avatar: The Last Airbender</li>
                        <li>Bartimaeus from the Bartimaeus Trilogy</li>
                    </ul>
                    <p>As an already introspective person, I don’t see the benefit in worrying about being “Rude”. Doing so has been a waste of energy, and has hurt way more than it has helped.</p>
                    <p><em>Feel free to disagree with me. Don’t worry, I won’t automatically think you rude.</em></p>

                    <footer class="post-meta" role="contentinfo">
                        <p>Posted in <a href="#">Ranting</a> on <a href="#">March 19, 2013</a><br/>
                        <a href="#">assertiveness</a>, <a href="#">introspection</a>, <a href="#">life</a>, <a href="#">people</a></p>
                    </footer>
                </article><!-- .post -->

                <div class="comments-control">
                    <span aria-hidden="true" class="icon-chat"> </span>
                    <span class="control-text"><a href="#" class="toggle">Show Comments</a></span>
                </div>
                <section class="comments">
                    <h1 class="comments-title"><span aria-hidden="true" class="icon-chat"> </span>Comments</h1>

                    <ol class="comment-list">
                        <li>
                            <div class="comment-avatar">
                                <img src="img/somedude.jpeg" alt="">
                            </div>
                            <div class="comment-body">
                                <div class="comment-title">
                                    <a href="#" class="comment-author">Some Guy</a> on <time datetime="2013-03-06">March 6, 2013</time>
                                </div>
                                <div class="comment-content">
                                    <p>I have watched the first 6 videos…fantastic series so far…I hope you do more…These small bread and butter sites are I bet some of the most common sites that a lot of web designers work on..So a practical series such as this is very helpful…</p>
                                </div>
                            </div>

                            <ol class="reply-list">
                                <li>
                                    <div class="comment-avatar">
                                        <img src="img/somedude.jpeg" alt="">
                                    </div>
                                    <div class="comment-body">
                                        <div class="comment-title">
                                            <a href="#" class="comment-author">Some Guy</a> on <time datetime="2013-03-06">March 6, 2013</time>
                                        </div>
                                        <div class="comment-content">
                                            <p>I have watched the first 6 videos…fantastic series so far…I hope you do more…These small bread and butter sites are I bet some of the most common sites that a lot of web designers work on..So a practical series such as this is very helpful…</p>
                                        </div>
                                    </div>
                                </li>
                            </ol><!-- .reply-list -->
                        </li>

                        <li>
                            <div class="comment-avatar">
                                <img src="img/somedude.jpeg" alt="">
                            </div>
                            <div class="comment-body">
                                <div class="comment-title">
                                    <a href="#" class="comment-author">Some Guy</a> on <time datetime="2013-03-06">March 6, 2013</time>
                                </div>
                                <div class="comment-content">
                                    <p>I have watched the first 6 videos…fantastic series so far…I hope you do more…These small bread and butter sites are I bet some of the most common sites that a lot of web designers work on..So a practical series such as this is very helpful…</p>
                                </div>
                            </div>
                        </li>
                    </ol><!-- .comment-list -->
                </section><!-- .comments -->

                <div class="respond-control">
                    <span aria-hidden="true" class="icon-comment"> </span>
                    <span class="control-text"><a href="#" class="toggle">Show Comment Form</a></span>
                </div>
                <section class="respond">
                    <h2 class="comments-title"><span aria-hidden="true" class="icon-comment"> </span>Leave a Comment</h2>
                    <form action="POST">
                        <ul class="form-fields">
                            <li>
                                <label for="responseName">Name</label>
                                <input id="responseName" type="text">
                            </li>
                            <li>
                                <label for="responseEmail">Email</label>
                                <input id="responseEmail" type="email">
                            </li>
                            <li>
                                <label for="responseWebsite">Website</label>
                                <input id="responseWebsite" type="text">
                            </li>
                            <li>
                                <label for="responseMessage">Comment</label>
                                <textarea id="responseMessage" rows="5"></textarea>
                            </li>
                            <li>
                                <fieldset class="subscribe">
                                    <div class="comments-subscribe">
                                        <input id="commentSubscribe" type="checkbox">
                                        <label for="commentSubscribe">&nbsp; Subscribe to this comment thread.</label>
                                    </div>
                                    <div class="posts-subscribe">
                                        <input id="postsSubscribe" type="checkbox">
                                        <label for="postsSubscribe">&nbsp; Subscribe to new posts.</label>
                                    </div>
                                </fieldset>
                            </li>
                            <li>
                                <input type="submit" value="Send">
                            </li>
                        </ul>
                    </form>
                </section><!-- .respond -->

                


            </section><!-- .main-content -->


            <aside class="sidebar">
                <form action="POST" id="sidebar-search" role="search">
                    <div class="search">
                        <label for="q">Search</label>
                        <input type="text" class="search-field" id="q">
                        <button class="search-button" type="submit" value="Search">
                            <span aria-hidden="true" class="icon-search"></span>
                        </button>
                    </div>
                </form>

                <div class="widgets">
                    <div class="related-articles">
                        <h2 class="widget-title">Related Articles</h2>
                        <ul class="related-articles-list">
                            <li class="related-articles-item">
                                <a href="#" class="related-articles-link">
                                    <div class="related-title">
                                        Say Hello to my Little Friend... Sokka
                                    </div>
                                    <div class="related-image">
                                        <img src="img/sam+sokka.jpg" alt="">
                                    </div>
                                </a>
                            </li>

                            <li class="related-articles-item">
                                <a href="#" class="related-articles-link">
                                    <div class="related-title">
                                        Say Hello to my Little Friend... Sokka
                                    </div>
                                    <div class="related-image">
                                        <img src="img/sam+sokka.jpg" alt="">
                                    </div>
                                </a>
                            </li>

                            <li class="related-articles-item">
                                <a href="#" class="related-articles-link">
                                    <div class="related-title">
                                        Say Hello to my Little Friend... Sokka
                                    </div>
                                    <div class="related-image">
                                        <img src="img/sam+sokka.jpg" alt="">
                                    </div>
                                </a>
                            </li>

                            <li class="related-articles-item">
                                <a href="#" class="related-articles-link">
                                    <div class="related-title">
                                        Say Hello to my Little Friend... Sokka
                                    </div>
                                    <div class="related-image">
                                        <img src="img/sam+sokka.jpg" alt="">
                                    </div>
                                </a>
                            </li>

                            <li class="related-articles-item">
                                <a href="#" class="related-articles-link">
                                    <div class="related-title">
                                        Say Hello to my Little Friend... Sokka
                                    </div>
                                    <div class="related-image">
                                        <img src="img/sam+sokka.jpg" alt="">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div><!-- .related-articles -->

                </div><!-- .widgets -->
                
            </aside><!-- .sidebar -->
        </section><!-- .page -->



        <footer class="site-footer">
            <div class="contact">
                <h2 class="footer-title"><span aria-hidden="true" class="icon-phone"> </span>Get in Touch</h2>

                <form action="POST">
                    <ul class="form-fields">
                        <li>
                            <label for="contactName">Name</label>
                            <input id="contactName" type="text">
                        </li>
                        <li>
                            <label for="contactEmail">Email</label>
                            <input id="contactEmail" type="email">
                        </li>
                        <li>
                            <label for="contactSubLine">Subject</label>
                            <input id="contactSubLine" type="text">
                        </li>
                        <li>
                            <label for="contactMessage">Message</label>
                            <textarea id="contactMessage" rows="5"></textarea>
                        </li>
                        <li>
                            <input type="submit" value="Send">
                        </li>
                    </ul>
                </form>
            </div>
            <div class="social">
                <h2 class="footer-title"><span aria-hidden="true" class="icon-location"> </span>Find Me Online</h2>
                <div class="social-links">
                    <a href="http://www.facebook.com/#!/ssloveland" class="social-icon" title="Facebook"><span aria-hidden="true" class="icon-facebook"></span></a>
                    <a href="http://twitter.com/#!/samuelloveland" class="social-icon" title="Twitter"><span aria-hidden="true" class="icon-twitter"></span></a>
                    <a href="https://github.com/sloveland" class="social-icon" title="Github"><span aria-hidden="true" class="icon-github"></span></a>
                    <a href="http://codepen.io/sloveland" class="social-icon" title="Codepen"><span aria-hidden="true" class="icon-Button-Fill-Black"></span></a>
                </div>
            </div>
            <div class="other-stuff">
                <h2 class="footer-title"><span aria-hidden="true" class="icon-cool"> </span>Other Stuff</h2>
                <p>Proudly powered by <a href="http://wordpress.org/">Wordpress</a>.</p>
                <p>Built to be readable on all current devices and browsers using <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://modernizr.com/">Modernizr</a> and <a href="http://sass-lang.com/">Sass</a>. Icon fonts from <a href="http://icomoon.io/">IcoMoon App</a>.</p>
                <p>Other thanks to <a href="http://incident57.com/codekit/">Codekit</a> and <a href="http://codepen.io/">Codepen</a> for making the development process that much sweeter.</p>
                <p>Property of <span class="signature">Samuel Loveland</span></p>
                <p><span aria-hidden="true" class="icon-cc"></span><span aria-hidden="true" class="icon-cc-by"> </span><a href="http://creativecommons.org/licenses/by/3.0/">cite me and we're good</a>.</p>
            </div>
            
        </footer><!-- .main-footer -->







        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Condiment|PT+Sans+Narrow|Open+Sans);/* normalize.css v1.1.0 | MIT License | git.io/normalize */*{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*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}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0 0 0.67em 0}h2{font-size:1.5em;margin:0 0 0.83em 0}h3{font-size:1.17em;margin:0 0 1em 0}h4{font-size:1em;margin:0 0 1.33em 0}h5{font-size:0.83em;margin:0 0 1.67em 0}h6{font-size:0.67em;margin:0 0 2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:"courier new",monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 2em}menu,ol,ul{padding:0 0 0 2em}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}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}table{border-collapse:collapse;border-spacing:0}.chromeframe{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0}.chromeframe a{color:blue}@font-face{font-family:'icomoon';src:url("fonts/icomoon.eot");src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),url("fonts/icomoon.woff") format("woff"),url("fonts/icomoon.ttf") format("truetype"),url("fonts/icomoon.svg#icomoon") format("svg");font-weight:normal;font-style:normal}[data-icon]:before{font-family:'icomoon';content:attr(data-icon);speak:none;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}.icon-house,.icon-megaphone,.icon-quill,.icon-network,.icon-book,.icon-suitcase,.icon-user,.icon-phone,.icon-search,.icon-popup,.icon-export,.icon-comment,.icon-chat,.icon-download,.icon-list,.icon-ellipsis,.icon-arrow-left,.icon-arrow-down,.icon-arrow-up,.icon-arrow-right,.icon-cc,.icon-cc-by,.icon-feed,.icon-Button-Fill-Black,.icon-github,.icon-facebook,.icon-twitter,.icon-dribbble,.icon-stackoverflow,.icon-location,.icon-cool{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}.icon-house:before{content:"\e000"}.icon-megaphone:before{content:"\e001"}.icon-quill:before{content:"\e002"}.icon-network:before{content:"\e003"}.icon-book:before{content:"\e005"}.icon-suitcase:before{content:"\e006"}.icon-user:before{content:"\e004"}.icon-phone:before{content:"\e007"}.icon-search:before{content:"\e008"}.icon-popup:before{content:"\e009"}.icon-export:before{content:"\e00a"}.icon-comment:before{content:"\e00b"}.icon-chat:before{content:"\e00c"}.icon-download:before{content:"\e00d"}.icon-list:before{content:"\e018"}.icon-ellipsis:before{content:"\e00e"}.icon-arrow-left:before{content:"\e019"}.icon-arrow-down:before{content:"\e01a"}.icon-arrow-up:before{content:"\e01b"}.icon-arrow-right:before{content:"\e01c"}.icon-cc:before{content:"\e012"}.icon-cc-by:before{content:"\e013"}.icon-feed:before{content:"\e014"}.icon-Button-Fill-Black:before{content:"\e017"}.icon-github:before{content:"\e00f"}.icon-facebook:before{content:"\e010"}.icon-twitter:before{content:"\e011"}.icon-dribbble:before{content:"\e015"}.icon-stackoverflow:before{content:"\e01d"}.icon-location:before{content:"\e016"}.icon-cool:before{content:"\e01e"}body{background-color:#1e2539}html,button,input,select,textarea{color:#fff}body{font-family:"Open Sans",sans-serif;font-size:10px;line-height:1.4}@media (min-width: 201px){body{font-size:13px}}@media (min-width: 321px){body{font-size:13px}}@media (min-width: 481px){body{font-size:14px}}@media (min-width: 601px){body{font-size:15px}}@media (min-width: 769px){body{font-size:16px}}@media (min-width: 1201px){body{font-size:18px}}@media (min-width: 1601px){body{font-size:20px}}@media \0screen\,screen\9{body{font-size:16px}}h1,h2,h3,h4,h5,h6{font-family:"PT Sans Narrow",sans-serif;font-weight:normal}a{color:#8dd6c6}a:hover,a:focus{color:#fff}li{margin-bottom:1em}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}img{vertical-align:middle;max-width:100%}fieldset{border:0;margin:0;padding:0}.form-fields input[type="text"],.form-fields input[type="email"]{width:66%;margin-left:30%}.form-fields label{position:absolute}input[type="text"],input[type="email"]{box-sizing:content-box;font-size:1em;padding:0.4em 2% 0.28em;color:#000;border:none}textarea{box-sizing:content-box;margin-top:1.6em;font-size:1em;padding:0.4em 2% 0.28em;color:#000;border:none;resize:vertical;width:96%}input[type="submit"]{padding:0.4em 0.6em 0.28em;background-color:#2f8270;color:#fff;text-decoration:none;border:none;display:block;border:none;font-size:1.2em}input[type="submit"]:hover{background-color:#fff;color:#2f8270}::-moz-selection{background:#c5eae2;text-shadow:none}::selection{background:#c5eae2;text-shadow:none}.site-header{*zoom:1;padding:3em 10%;background-color:#1e2539}.site-header:before,.site-header:after{content:" ";display:table}.site-header:after{clear:both}@media (min-width: 769px){.site-header{padding:3em 6.25%}}@media (min-width: 801px){.site-header{padding:3em 4.166%}}@media \0screen\,screen\9{.site-header{padding:3em 4.166%}}@media \0screen\,screen\9{.site-header{overflow:hidden}}.site-title{font-size:3em;margin:0;padding:0;font-family:"Condiment",cursive}@media (min-width: 801px){.site-title{float:left;font-size:3.8em}}@media \0screen\,screen\9{.site-title{float:left;font-size:3.8em}}.nav-control,.comments-control,.respond-control{padding:0.4em 0.6em 0.28em;background-color:#2f8270;color:#fff;text-decoration:none;border:none;display:block;font-size:1.2em;font-family:"PT Sans Narrow",sans-serif;margin-bottom:.5em;display:none;visibility:hidden}.nav-control:hover,.comments-control:hover,.respond-control:hover{background-color:#fff;color:#2f8270}.nav-control:hover,.comments-control:hover,.respond-control:hover{cursor:pointer}.nav-control:hover .toggle,.comments-control:hover .toggle,.respond-control:hover .toggle{color:#2f8270}.toggle{color:#fff;text-decoration:none}.respond-control{margin-bottom:3em}.main-nav{*zoom:1}.main-nav:before,.main-nav:after{content:" ";display:table}.main-nav:after{clear:both}.main-nav ul{margin:0;padding:0}.main-nav ul li{list-style-type:none}.main-nav li{float:left;margin:0.5em 0;width:100%}@media (min-width: 321px){.main-nav li{margin:0 0.5em 0.5em 0;width:auto}}@media (min-width: 801px){.main-nav li{margin:0 0 0.5em 0.5em}}@media \0screen\,screen\9{.main-nav li{margin:0 0 0.5em 0.5em;width:auto}}.main-nav a{font-family:"PT Sans Narrow",sans-serif;font-size:1.2em;padding:0.4em 0.6em 0.28em;background-color:#2f8270;color:#fff;text-decoration:none;border:none;display:block}.main-nav a:hover{background-color:#fff;color:#2f8270}@media (min-width: 801px){.main-nav{float:right;width:50%}}@media \0screen\,screen\9{.main-nav{float:right;width:50%}}@media (min-width: 801px){.author-pages,.category-pages{float:right}}@media \0screen\,screen\9{.author-pages,.category-pages{float:right}}#header-search{margin-top:1em}#header-search .search{margin:0;padding:0}@media (min-width: 801px){#header-search{display:none;visibility:hidden}}@media \0screen\,screen\9{#header-search{display:none;visibility:hidden}}.page{*zoom:1;padding:3em 10%;background-color:#025159}.page:before,.page:after{content:" ";display:table}.page:after{clear:both}@media (min-width: 769px){.page{padding:3em 6.25%}}@media (min-width: 801px){.page{padding:3em 4.166%}}@media \0screen\,screen\9{.page{padding:3em 4.166%}}@media \0screen\,screen\9{.page{overflow:hidden}}.post{*zoom:1;margin-bottom:3em}.post:before,.post:after{content:" ";display:table}.post:after{clear:both}@media (min-width: 801px){.main-content{float:left;width:65%}}@media \0screen\,screen\9{.main-content{float:left;width:65%}}.featured-image{background-color:#1e2539;padding:1em}.featured-image img{width:100%;max-width:300px;display:block;margin:0 auto}@media (min-width: 481px){.featured-image{width:40%}}@media \0screen\,screen\9{.featured-image{width:40%}}.featured-caption p{margin-bottom:0}.align-right{margin:0 auto}@media (min-width: 481px){.align-right{float:right;margin-left:2em;margin-bottom:1em}}@media \0screen\,screen\9{.align-right{float:right;margin-left:2em;margin-bottom:1em}}.align-left{margin:0 auto}@media (min-width: 481px){.align-left{float:left;margin-right:2em;margin-bottom:1em}}@media \0screen\,screen\9{.align-left{float:left;margin-right:2em;margin-bottom:1em}}.align-center{float:none;margin:0 auto}.post-meta{background-color:#1e2539;padding:0.01em 1em}.comments{*zoom:1;margin-bottom:3em}.comments:before,.comments:after{content:" ";display:table}.comments:after{clear:both}.comment-list,.comment-list li{margin:0;padding:0}.comment-list li,.comment-list li li{list-style-type:none}.comment-list li{margin-bottom:2.45em;border-left:5px solid #1e2539;padding-left:1em}.comment-avatar{width:50px;float:left;position:relative}.comment-avatar img{max-width:50px}.comment-body{margin-left:50px;padding-left:1em}.comments-subscribe,.posts-subscribe{*zoom:1}.comments-subscribe:before,.comments-subscribe:after,.posts-subscribe:before,.posts-subscribe:after{content:" ";display:table}.comments-subscribe:after,.posts-subscribe:after{clear:both}.reply-list{margin:0;padding:0}.form-fields{margin:0;padding:0}.form-fields li{list-style-type:none}.respond{margin-bottom:3em}@media (min-width: 801px){.sidebar{float:right;width:25%}}@media \0screen\,screen\9{.sidebar{float:right;width:25%}}.widgets{background-color:#143040;padding:1em}.related-articles-list{margin:0;padding:0;*zoom:1}.related-articles-list li{list-style-type:none}.related-articles-list:before,.related-articles-list:after{content:" ";display:table}.related-articles-list:after{clear:both}.related-articles-item{*zoom:1;position:relative;min-height:70px}.related-articles-item:before,.related-articles-item:after{content:" ";display:table}.related-articles-item:after{clear:both}@media (min-width: 601px){.related-articles-item{font-size:.875em;float:left;width:30%;margin:0 1.66%}}@media (min-width: 801px){.related-articles-item{width:100%;margin:0;margin-bottom:1em}}@media \0screen\,screen\9{.related-articles-item{font-size:.875em;width:100%;margin:0;margin-bottom:1em}}.related-articles-link{background-color:#025159;display:block;text-decoration:none;color:#fff}.related-articles-link:hover,.related-articles-link:focus{background-color:#2f8270}.related-title{padding:1em 5.5em 1em 1em}.related-image{float:right;position:absolute;width:50px;max-width:40%;right:10px;top:10px}#sidebar-search{display:none;visibility:hidden}@media (min-width: 801px){#sidebar-search{display:block;visibility:visible}}@media \0screen\,screen\9{#sidebar-search{display:block;visibility:visible}}.search{margin-bottom:2em;*zoom:1;background-color:#fff}.search:before,.search:after{content:" ";display:table}.search:after{clear:both}.search label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.search label.focusable:active,.search label.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.search-field{width:74%;margin:0;float:left;font-size:1.2em}@media \0screen\,screen\9{.search-field{width:72%}}.search-button{padding:0.4em 0.6em 0.28em;background-color:#2f8270;color:#fff;text-decoration:none;border:none;display:block;width:21%;float:right;font-size:1.2em}.search-button:hover{background-color:#fff;color:#2f8270}@media \0screen\,screen\9{.search-button{width:20%}}.site-footer{*zoom:1;padding:3em 10%;background-color:#143040}.site-footer:before,.site-footer:after{content:" ";display:table}.site-footer:after{clear:both}@media (min-width: 769px){.site-footer{padding:3em 6.25%}}@media (min-width: 801px){.site-footer{padding:3em 4.166%}}@media \0screen\,screen\9{.site-footer{padding:3em 4.166%}}@media \0screen\,screen\9{.site-footer{overflow:hidden}}.footer-title{background-color:#025159;padding:0.4em 0.6em 0.28em;font-size:1.4em}.contact{margin-bottom:3em}@media (min-width: 769px){.contact{float:left;width:45%}}@media \0screen\,screen\9{.contact{float:left;width:45%}}.contact ul{margin:0;padding:0}.contact ul li{list-style-type:none}.social{margin-bottom:2.45em}@media (min-width: 769px){.social{float:right;width:45%}}@media \0screen\,screen\9{.social{float:right;width:45%}}.social-icon{font-size:3em;color:#fff;text-decoration:none;text-indent:-9999px}.social-icon:hover,.social-icon:focus{color:#2f8270}.other-stuff{margin-bottom:2.45em}@media (min-width: 769px){.other-stuff{float:right;width:45%}}@media \0screen\,screen\9{.other-stuff{float:right;width:45%}}@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:0.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var collapseElements = function(control, toCollapse) {
	control.css({visibility: 'visible', display: 'block'}).show();
	toCollapse.hide();

	control.click(function(){
		toCollapse.slideToggle();
	});
};

$( document ).ready(function() {
	if (Modernizr.mq("screen and (max-width:320px)")) {
		var navControl = $(".nav-control");
		var mainNav = $(".main-nav");
		var commentsControl = $(".comments-control");
		var comments = $(".comments");
		var respondControl = $(".respond-control");
		var respond = $(".respond");

		collapseElements(navControl, mainNav);
		collapseElements(commentsControl, comments);
		collapseElements(respondControl, respond);
	} else if (Modernizr.mq("screen and (max-width:480px)")) {
		var commentsControl = $(".comments-control");
		var comments = $(".comments");
		var respondControl = $(".respond-control");
		var respond = $(".respond");

		collapseElements(commentsControl, comments);
		collapseElements(respondControl, respond);
	} else if (Modernizr.mq("screen and (max-width:800px)")) {
		var commentsControl = $(".comments-control");
		var comments = $(".comments");

		collapseElements(commentsControl, comments);
	}
    
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................