CSS For Speed

include those to override some of the browser’s default definitions,
it should be placed in the few first CSS file to load, but after the “reset CSS” (if you use any),
and before any of the websites’ main style.

Continue reading

A Non-Blocking Font-Download – Pure CSS, No JavaScript!

Custom font-face are fun,
..I guess…

But when not allowing several alternatives of font-families (sans, sans-serif, etc.. are considered a “low-priority” but perfectly fine alternatives!), not using the “local(…)” syntax to allow sorter times, by loading a locally installed fonts from the OS, and pretty much limiting the page to use an external font-file,
The time the page will take until first-paint event might take few SECONDS(!)

There are few tricks that the browser will try to apply,
just to avoid all this waiting though..

You can avoid that “blocking” time,
by explicitly allow the browser to display the page as is,
and “swap” (official term..) ..which means update the page
once the external font-file will be downloaded.

You can do this (for web-developers) by adding font-display:swap; to your @font-face loading block part in your page’s CSS file.

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

And if you’re already *there*- you might be able
to tweak things to load the page much faster,
for example when using a common font-family.

<style type="text/css" media="all">
@font-face{
  font-family:  'Tahoma';
  font-weight:  400;
  font-style:   normal;
  font-display: swap;
  
  src: local('Tahoma')
      ,local('tahoma')
      ,local('tahoma.ttf')
      ,url(fonts/tahoma.eot?#iefix)   format('embedded-opentype')
      ,url(fonts/tahoma.woff)         format('woff')
      ,url(fonts/tahoma.ttf)          format('truetype')
      ;
}

/* normalise inheritage of font-family and stuff (for textarea and such..)
 a,abbr,acronym,address,applet,big,blockquote,body
,button,caption,cite,code,dd,del,dfn,div,dl,dt,em
,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe
,input,ins,kbd,label,legend,li,object,ol,p,pre,q,s
,samp,select,small,span,strike,strong,sub,sup,table
,tbody,td,textarea,tfoot,th,thead,tr,tt,ul,var{
  font:                   inherit;
  font-family:            inherit;
  font-style:             inherit;
  font-size:              inherit;
  font-weight:            inherit;

  font-display:           inherit;
  font-size-adjust:       inherit;
  font-stretch:           inherit;
}

/* the "actual magic" */
html{
  font-family: 'Tahoma', sans-serif;
}

/* are we having fun yet?? */
</style>

-reference…

CSS Snippet – The Magical Rotated Logo

Wish to place a logo that will be rotated 360-degrees back-and-forth gently on mouse-hover?

Here is your example.
right click it and select view frame’s-source to see the code behind it.

Using transition to transform the logo to rotate 360 degrees, is lovely,
but it is a one way animation-
– If you wish to keep on the movement as long the mouse-is-hovered upon the logo,
using keyframe-animation is the way to go.

right click it and select view frame’s-source to see the code behind it.

This would probably render an even higher-quality result,
since keyframe-animation uses, unambiguously, the GPU to render frames smoothly,
You can prefer the use of keyframe-animation in-favor of transition, or at-least use it in the same way, by specifying that the animation should repeat only one time.

Weirdly the ease-in-out effect, when a user no-longer hover the logo, and the animation is then rendered backward, back to the zero-position, seems to only work when using simple transition :/

Nevermind.. :]

Nice Scrollbars

Those bulky scrollbars with the useless ‘arrows’
are mostly the cause of large-font in compare to a low(er) screen-resolution.

The up/down arrows are mostly useless now-days anyway,
since it requires pin-point accuracy with the mouse,
which in most cases is not essential-
– and it is far more fun to just drag away the middle-thingy anyhow..

If you’re a page designer, HTML5 developer,
consider this minimal set of CSS3 rules to make your end result look far better:
The scrollbar will have constant dimensions, and will allow more efficient scrolling.

Continue reading

CSS3 Ninja – Pure CSS-KeyFrame Animation Example

An infinite, alternate animation converting a shape, with initial delay,
no javascript, pure css.

– centring the shape using the top0-left0-right0-bottom0-margin_auto trick.
– sizing the share using viewport

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side

HTML5 Ninja – CSS3 To Make Your Website Behave and Render Faster, Including A More Responsive Scrolling

html,body{
  /* makes some presentations attribute to properly be inherited by page's elements */
  width:                    100%;
  height:                   100%;
  text-size-adjust:         100%;
  box-sizing:               border-box;

  /* set rendering-engine to avoid picture-perfect in favor of speedy/very responsive page */
  text-rendering:           optimizeSpeed;
  -webkit-font-smoothing:   none;

  /* ditch some special-rules in font-faces, allowing the rendering-engine simpler processing of text for view. */
  font-kerning:             none;
  font-feature-settings:    "kern" 0;
}

CSS3 – Let Your Users Know They Can Use [CTRL]+[A] To Select The Code In PRE and CODE elements

PRE, CODE and essentially every element having the contentEditable=”true” attribute is made 100% well.. editable,
which is very useful if you want to have “textarea like” qualities such as pressing [CTRL]+[A] to select all of the code in those elements (mostly for copy&paste).

But, since this is not the default behaviour, there is a need to inform your users of the UI quality, usually in this case you can use the title attribute (but it requires setting text for each element), in this case a CSS only solution, either TEXT or an IMAGE will work wonderfully with our requirements.

icompile-eladkarako-com_inform_your_users_of_ctrl_a_option_in_contenteditable_true_containers-png
Continue reading

HTML5 Ninja – Custom CheckBox

This is a checkbox, CLICK IT:

– I miss the “square”, where is it???

Too bad :[..
..Have a look:

<style>
 input[type="checkbox"]{ display:none; }
 input[type="checkbox"]          + label[for]:before{ content:'🍎 Red Apple';   color:red;  }
 input[type="checkbox"]:checked  + label[for]:before{ content:'🍏 Green Apple'; color:green;}
</style>
</head>
<input type="checkbox" id="check1"/><label for="check1"></label>
Code Notes:
-----------------

1. hide the "real" checkbox.
2. connect a label using the checkbox-id attribute.

-- now: when you'll click the label,
   you'll also change the state of the checkbox! --

3. place the label immediately after the checkbox,
   (we'll be using the CSS3 + relation).

-- now: you can style the label according to 
   the state of the checkbox using the :checked pseudo-state.

4. use :before and content: '....'
   visit umoji website
   and copy&paste some Unicode goodness...
   ...☐ ☑ ☒ ✔ ✘ ⚐ ⚑ ✅ ✖ ✦ ✧.

5. be creative, have fun!!

UMOJI – Unicode Emoji

UMOJI (= Unicode Emoji) is a nice little website at umoji.eladkarako.com gathering only the fun Unicode characters

Looking for all the fun Unicode characters is a waste of time,
being creative with text is a gr8 way to push some humor into your work and life (and code..)

started as a post named icompile.eladkarako.com/useful-char-map/

I’ve made a plain but useful website the allow quick COPY&&PASTE of most useful Unicode-Emojis (either low or high range) including some letters and math symbols too, because you never know when those stuff will be useful,
excluding most of the “letters based characters” (–that quote is not very reasonable..)

and also bidi control chars, and stuff that renders as empty square on fonts that are not “Courier New”

the entire page is “content-editable”, so you can use it as a makeshift Unicode-supported text-editor.
[You could easily add some text around and copy it (it’s just in your pc, it won’t effect the server version) this way you won’t need to look for an editor (if you’re on mac or linux..it’s kind’a helpful) that is Unicode-supported, set it and {copy char, switch window}:repeat X times.
just edit your stuff directly in the page]

mess/miss/mash? just reload the page.


December 2016 update:
New version available at https://eladkarako.github.io/umoji/ and as usual at http://umoji.eladkarako.com.

CSS3 Ninja – pointer-events attribute

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of thevisiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go “through” the element and target whatever is “underneath” that element instead.

Continue reading

Another Take On Label-Design Pure CSS3 and HTML5 Markers

<style>
[data-role="note"]{
  position: relative;
  font-style: italic;
  margin-left: 2em;
  padding-left: 50px;
}
[data-role="note"]::before {
  content: attr(data-label)" "attr(data-icon);
  text-transform: capitalize;

  position: absolute;
  top: -0.2em;
  left: -1.5em;
  padding: 1px 5px;

  letter-spacing: 1px;
  transform: rotate(-8deg);

  border: 1px solid rgba(0,128,0,.8);
  border-radius: 4px;
  box-shadow: 1px  1px 3px rgba(0,0,0,.8)  ,
             -1px -1px 1px rgba(0,0,0,.4)  ;
}

[data-role="note"][data-color="green"]        { color: rgba(0,128,0,.9);      background: rgba(221,255,221,.8);   }
[data-role="note"][data-color="green"]::before{ color: rgba(255,255,255,.9);  background: rgba(0,128,0,.8);       }

</style>

<p data-role="note" data-color="green" data-icon="?" data-label="FIY">
 The <a href="#mime-type-portion">MIME type portion</a> of a <a href="#parsable-mime-type">parsable MIME type</a>
 excludes any and all <a href="#parameters">parameters</a>.
</p>

taking “icons” (Unicode supported characters) from http://icompile.eladkarako.com/useful-char-map/ :)

Disabling Google-Translate Icon On Selected Text

Officially all you have to do is include HTML5 annotation on the containers that should not support the Google-Translate action: translate="no", but apparently if the user has installed the official extension (Firefox or Chrome), there will still be a floating button shown above the selected text,
icompile.eladkarako.com_google_translate_icon
the old-school class="notranslate" alternative won’t do much either.
icompile.eladkarako.com_google_translate_icon_dom_code

if you are a web-developer, you may try to catch the objects created, but a simpler solution will be just to hide the button (which includes two elements) that might break the page’s structure (especially if you’ve done some protection against text-copying or selecting the content).

just include the following style tag just before the </body>:

<style>*[id^="gtx-trans"],*[class^="gtx-trans"]{height:1px; width:1px !important; visibility:hidden !important; display:none !important; content:'' !important}</style>

if you think its too excessive, feel free to thin-it-down by keeping the display:none for both of the # and . rules. Leave the !important in, since the injected JavaScript is overriding adding a stylesheet that will override the rules, unless the !important annotation will be supplied..

HTML5 Ninja Techniques – Minimal HTML Markup Needed For Text

icompile.eladkarako.com_use_minimal_textSo we want to add some text, and style it,
but wrapping with span requires too much text adding: opening and closing tags + class="..." or HTML5’s data-*, this all so we can later “find” the node using CSS-Rules or JavaScript and style the hell-out of it :)


The idea is later to find the item, using CSS or JavaScript, in a very efficient way,
as fast as I know, I’m the first one ever implemented using this technique.. and in production (isn’t it the idea of every product eventually..?).

.. you have to think out of the box for this crazy trick to be seen reasonable to you.. (and there goes the 4’th wall..).

  1. you want a self-closing tag but one that will show you some text..
    # first attempt: <img alt=hello/>
    skipping the \" is permitted !!

    this works since the src is not specified, so the ALT kicks-in..
    but you’ll get the native border around which you should disable using border=0 attribute..
    but its MORE TEXT, so no-go

  2. that pesky border (CSS border is a different one) is there because we use W3C’s official ALT attribute, but we can do better,
    joining some CSS’s content and attr() and putting the text in one of the attributes.

    the HTML is:

    <img x=hello>

    and the CSS is:

    img{
      content:attr(x);
      font-size:30pt;
      color:darkblue;
      border:none;
    }

    but it won’t work, since the img tag’s text-content does not mean anything (unlike other tags, the img tag is actually just like rendering stuff with JavaScript new Image())

    lets change to something quite different either the :before or :after “area”, which technically uses same, still minimal self-closing tag of img, but just as a placeholder.

    ooopss… apparently you can only see the img :before if you’ll still place an ALT=".." non-empty attribute,

    hmmm.. so its not optimal since we’ve already adding quite a lot of text, and it is becoming a bit more complex than necessary.

  3. we can do better, using CSS we can cheat and use content="..." and attr()

    which is technically not in the HTML markup, and CSS are far more optimized than HTML, also, loaded parallel and optionally CPU-accelerated. so we’re good here..

    icompile.eladkarako.com_i_lv_minimal
    this was the result (works really well..)
    first is the html markup: <t x=hello> now the CSS markup which you can include in a separate CSS file

    /* minimal */
    t[x]:before{
        content:attr(x);
    }
    
    /* optional styling - very specific and easy to use */
    t[x=hello]:before{
      font-size:30pt;
    }
    
    /* optional styling - for all "minimal text tags" */
    t[x]:before{
        margin:4px 4px 4px 4px;
        padding:4px 4px 4px 4px;
        color:darkblue;
        background-color:lightgray;
        border:1px solid purple;
    }
    

    here is a little fun with http://jsfiddle.net/nra1jwjo/

  4. Fun!

CSS Ninja Techniques – Download Links Icon In Pure CSS

    Use advance CSS rules to give your users a little more information about links, that has the download attribute, this is similar to a previous article I’ve wrote, on how mark page’s external-links, similar to how its done in Wikipedia’s pages, using CSS3’s ::after pseudo-element.

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css

    first thing is downloading nice “download icon”,
    I’ve used the second download icon from the Font-Awesome package,

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css__original_icon_aka_download63
    here is just the png from the package above

    edit it (I’ve used Paint.Net), remove the white background, resize it to about 12px/12px, make it transparent so the background-colors of the page will blend with the image, making it less sharp and more “theme suitable”.. I’ve tuned it down to about 180 of 255 transparency (255 is the “100%”).

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css__modified_icon
    and here is the just the modified image

    convert it to base64 and add the mime-type prefix,
    following with inserting it to your main style css file, using the following rule:

    a[download]:before{
      content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAA6ElEQVQoU7VSwQqCQBBVcNVNXRVJQUEPCvoLRR/SB0T9QNfIEDp1da4e/NHeWsRS1q0Hj5mdN4/ZcdXeURTFQgjRuq5Lvu93VVU5T+k76roWnPMbUrIs65bnuXgoP/B/UxzHazT1pmmSruuE0hTlWdajKNo8OhWkacohHpBOBpWMsUMYhhz5J5qmYbZt75D2oDT0MOyyLGNS/4rnxD1SadjPTsDSHcLrKjifyrJM8UYrcIm9jqruOM5Vk4uqRUnUWjzw1jCM04xGsyaVmEzDMBC+Ho3jOEXN87yz/GV+MUkSQt8UgyC43AH4oj71EqujyQAAAABJRU5ErkJggg==") center right no-repeat;
      margin: 0 6px 0 0;
    }
    

    a good practice will be to limit the effect of the CSS-rule to a specific part of the page,
    for example, for my WordPress, I’ve set the selector to:

    .content .posts a[download]:before{
    

    so only the to the content at the main container will be effected..

Easy HTML-CSS3 Table 6-Columns

An Easy Web-Design, Uncomplicated Table’Like Flowing Data-Organizer.

/* size */
.ttable, .ttable:before, .ttable:after, .ttable.clear, .ttable.clear:before, .ttable.clear:after{
  content:       "";
  clear:         both;
  padding:       0px;
  margin:        0px;
  width:         100%;
}
.ttable div{ 
  float:         left;
  display:       inline;
  margin-right:  5px;
  margin-bottom: 5px;
}

.ttable div:last-child { margin-right: 0; }

/* style */
.ttable div{
  border:            1px solid black;
  padding-left:      10px;
  padding-right:     10px;
  background-color:  rgba(237,237,214,.4);
}
This is column 1
This is column 2
This is column 3
This is column 4
This is column 5
This is column 6

several width cases:
2014-09-27_134303

2014-09-27_134136

2014-09-27_134114


jsfiddle playground:

Web-Design Best Practices – CSS3 Responsive Style – Fluid Layout #4

/*
colors
red: #e51837; rgb(229,24,55)
gray: #808080;
*/

/************Reset**************/
* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}
html, body, div, object, iframe, fieldset { 
	margin: 0; 
	padding: 0; 
	border: 0;
} 
ol, ul { 
	list-style: none;
	margin: 0;
	padding: 0;
} 
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}
header, footer, nav, section, article, hgroup, figure {
	display: block;	
}
legend {
	display: none;
}
/************End Reset**************/

/************Global**************/
body {
	background: #fff;
	color: #000;
	font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
	padding: 0;
	-webkit-text-size-adjust: none;
}
a {
	color: #808080;
	text-decoration: none;
}
a:hover, a:focus {
	color: #e51837;
}
p {
	margin: 0 0 1em;
}
img, object, video {
	max-width: 100%;
	border: 0;
}
a img {
	border: 0;
	outline: 0;
}
h1 {
	font-size: 3em;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 0.2em;
}
h2 {
	font-size: 2em;
	line-height: 1.1;
	margin-bottom: 0.2em;
}
h3 {
	font-weight: normal;
	line-height: 1.1;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #ccc;
}
h1 a, h2 a, h3 a {
	display: block;
	color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover {
	color: #e51837;
}
blockquote {
	border-left: 0.5em solid #ddd;
	padding-left: 1em;
	margin-left: 1em;
}
small {
	color: #e51837;
}

input, textarea {
	border: 1px solid #000;
}

input[type=search] {
	-webkit-appearance: none;
	border-radius: 0;
}
::-webkit-input-placeholder {
	color: #808080;
}
:-moz-placeholder {  
    color: #808080;
}
/************End Global**************/

/************Classes**************/
.inactive {
	color: #ddd;
}
/************End Classes**************/

/************Structure**************/
.container {
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1em;
	overflow: hidden;
}
div[role=main] {
	padding-bottom: 1em;
}

/*Footer*/
footer[role=contentinfo] {
	color: #fff;
	background: #000;
	margin: 0 -1em;
	position: relative;
	z-index: 2;
}
footer[role=contentinfo] > div {
	max-width: 70em;
	padding: 0 1em;
	margin: 0 auto;
	overflow: hidden;
}
footer[role=contentinfo] p {
	margin: 0;
}
footer[role=contentinfo] .nav li a {
	display: block;
	border-bottom: 1px solid #808080;
	padding: 1em;
	margin: 0 -1em;
}
footer[role=contentinfo] a {
	display: inline-block;
	padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
	color: #fff;
}
footer[role=contentinfo] .f-rga {
	padding: 0.6em 0;
}
footer[role=contentinfo] img {
	max-width: 4.4em;
	display: inline-block;
	margin-bottom: -0.22em;
}
/*End Footer*/

/*Grid*/
.grid {
	margin: 0 -1em;
	overflow: hidden;
}
.grid:target {
	-webkit-animation: fadeout 5s 1 ease-out;
    -moz-animation: fadeout 5s 1 ease-out; 
    -o-animation: fadeout 5s 1 ease-out;
    animation: fadeout 5s 1 ease-out; 
}
.grid > h2 {
	margin-left: 0.45em;
}
.grid > section {
	padding: 1em 1em 0.5em;
}
.grid > section:target {
	-webkit-animation: fadeout 5s 1 ease-out;
    -moz-animation: fadeout 5s 1 ease-out; 
    -o-animation: fadeout 5s 1 ease-out;
    animation: fadeout 5s 1 ease-out; 
}
.grid ul {
	overflow: hidden;
}
.grid ul li {
	margin-bottom: 0.3em;
}
.featured:after {
	content: "*";
	color: #e51837;
}

/*Fluid*/
.fluid {
	display: block;
	margin: 0 auto;
	max-width: 40em;
}

/*Homepage*/
.home h1 {
	margin-bottom: 0.2em;
}
.intro {
	font-size: 1.8em;
	line-height: 1.2;
	margin: 0 auto;
}
.intro a:hover ,.intro a:focus {
	color: #000;
	border-bottom-color: #000;
}

.ani {
	position: relative;
	height: 15em;
	margin: 1em 0 0;
	width: 100%;
	z-index: 0;
}
.ani div {
	width: 100%;
}
.ani div b {
	display: block;
	position: absolute;
	top: 5%;
	right: 5%;
	bottom: 5%;
	left: 5%;
	background: rgba(229,24,55,0.22);
}

/* Button Stlyes */
.block-btn {
	color: #fff;
	background: #000;
	display: inline-block;
	margin: 1.5em 0;
	font-size: 110%;
	padding: 1em;
}
.block-btn:hover, .block-btn:focus {
	color: #fff;
	background: #e51837;
}

/*Patterns*/
.mod {
	padding: 1em;
}
.pattern {
	background: #f7f7f7;
	border-bottom: 1px solid #808080;
	margin-bottom: 1em;
	overflow: hidden;
}
.pattern-description h1 {
	font-size: 3.4em;
	margin-bottom: 0.5em;
}
.pattern-description {
	max-width: 40em;
	margin: 0 auto;
}
.pattern-description ul, .pattern-description ol {
	margin-bottom: 2em;
}
.pattern-description li {
	margin-bottom: 1em;
}


/*Blog*/
/*Blog Header*/
.blog .container {
	max-width: 62em;
}
.blog header[role=banner] {
	overflow: hidden;
	margin-bottom: 2em;
	padding: 2em 0 1em;
	border-bottom: 1px solid #000;
}
.blog-logo {
	font-weight: normal;
	font-size: 1.2em;
	margin: 0 0 1em;
}
.blog-logo img {
	width: 3.3em;
}
.blog-logo a {
	color: #000;
}
.search-form {
	width: 100%;
	margin-bottom: 1em;
}
.search-field {
	width: 100%;
	padding: 0.5em 0;
	border: 0;
	border-bottom: 1px solid #808080;
	outline: none;
}
.search-field:focus {
	background: #e51837;
	color: #fff;
}
.search-field:focus::-webkit-input-placeholder {
   color: #fff;
}

.search-field:focus :-moz-placeholder {  
   color: #fff; 
}

.blog .nav {
	clear: both;
}
.blog .nav a {
	display: block;
	font-weight: bold;
	color: #000;
}
.blog .nav a:hover {
	color: #e51837;
}

/*Posts*/
.posts ol > li {
	padding-bottom: 1em;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1em;
	overflow: hidden;
} 
.posts h2 {
	font-size: 1.4em;
	margin: 0.28em 0 0.1em;
	font-weight: normal;
}
.posts h2 a {
	color: #000;
}
.posts h2 a:hover, .posts h2 a:focus {
	color: #e51837;
}
.permalink {
	display: block;
	font-size: 0.8em;
	margin-bottom: 1.2em;
}
.post-body a {
	border-bottom: 1px solid #ccc;
}
.posts blockquote {
	margin: 0 0 1em;
	color: #666;
	border-left: 0.25em solid #ccc;
	padding-left: 1em;
}
.tags {
	float: left;
}
.tags li {
	display: inline-block;
	font-size: 0.8em;
	margin-right: 0.5em;
}

.posts ol > li .tags a, .permalink {
	color: #ccc;
	-webkit-transition: color 0.3s ease-out;  
     -moz-transition: color 0.3s ease-out;  
      -ms-transition: color 0.3s ease-out;  
       -o-transition: color 0.3s ease-out;  
          transition: color 0.3s ease-out;
}
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
	color: #808080;
}
.blog-nav {
	text-align: center;
	overflow: hidden;
	padding: 1em 0;
}
.posts .blog-nav a {
	border: 0;
}
.nav-next {
	float: right;
}
.nav-prev {
	float: left;
}

/* Sidebar */
.sidebar {
	font-size: 0.8em;
	padding-bottom: 1.4em;
}
.sidebar div {
	margin-bottom: 2em;
}
.sidebar h3 {
	font-weight: bold;
	font-size: 0.9em;
	line-height: 1;
	border-bottom: 1px solid #000;
}
.sidebar a {
	color: #808080;
}
.sidebar a:hover, .sidebar a:focus {
	color: #e51837;
}
.social-links {
	overflow: hidden;
}
.social-links li {
	float: left;
	margin-right: 1.2em;
}
.social-links li a {
	display: block;
	height: 17px;
	width: 16px;
	text-indent: -99999em;
	background: url(images/sprite_social.png) no-repeat;
}
.social-links li a.s-fb {
	background-position: -0px -76px;
}
.social-links li a.s-fb:hover {
	background-position: -16px -76px;
}
.social-links li a.s-twitter {
	background-position: -0px -37px;
}
.social-links li a.s-twitter:hover {
	background-position: -16px -37px;
}
.social-links li a.s-linkedin {
	background-position: -0px -113px;
}
.social-links li a.s-linkedin:hover {
	background-position: -16px -113px;
}
.social-links li a.s-rss {
	background-position: -0px -0px;
}
.social-links li a.s-rss:hover {
	background-position: -16px -0px;
}



.top {
	clear: both;
	display: block;
	padding: 1em 0;
}
.top:before {
	content: '▲';
}


/* Wufoo Form */
.wufoo-form {
	margin: 2em 0;
}

/******Media Queries*******/

/* Medium Screens*/
@media all and (min-width: 35em) {
	.blog-logo {
		float: left;
		font-size: 2em;
		margin: 0 0 1em;
	}
	.blog-logo img {
		width: auto;
	}
}
@media all and (min-width:40em) {
	h1 {
		font-size: 5.6em;
	}
	.container {
		padding-bottom: 4em;
	}
	footer[role=contentinfo] {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
	}
	footer[role=contentinfo] .nav {
		float: left;
	}
	footer[role=contentinfo] .nav li {
		display: inline-block;
		margin-right: 0.8em;
	}
	footer[role=contentinfo] .nav li a {
		border: 0;
	}
	footer[role=contentinfo] .f-rga {
		float: right;
	}
	.grid ul li {
		width: 50%;
		float: left;
	}
	.grid ul li:nth-child(odd) {
		padding-right: 1em;
		clear: left;
	}
	.ani {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 4em;
		left: 0;
		width: 100%;
		height: 90%;
		margin: 0;
		z-index: 0;
	}
	.home {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 5em;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 90%;
		display: table;
		text-align: center;
		color: #fff;
		color: rgba(255,255,255,0.7);
	}
	.home > div {
		display: table-cell;
		vertical-align: middle;
	}
	.home .intro a {
		color: #fff;
		color: rgba(255,255,255,0.8);
		border-bottom: 1px solid rgba(255,255,255,0.8);
	}
	.home .intro a:hover, .home .intro a:focus {
		color: #000;
		border-bottom-color: #000;
	}
	
	
	/*Blog*/
	
	.search-form {
		float: right;
		width: 30%;
		max-width: 16em;
		padding-left: 0.8em;
		margin-top: 0.4em;
	}
	
	.posts {
		float: left;
		width: 64%;
	}
	.sidebar {
		float: right;
		width: 30%;
		max-width: 21em;
		margin: 0 0 1em;
		padding-left: 0.8em;
	}
}


/* Large Screens */
@media all and (min-width: 54em) {
	h1 {
		font-size: 6.4em;
	}
	.grid > section {
		float: left;
		width: 33.3333333%;
	}
	.grid > section:nth-of-type(3n+1) {
		clear: left;
	}
	.grid ul li {
		width: auto;
		float: none;
	}
	.grid ul li:nth-child(odd) {
		padding-right: 0;
	}
}	


/* CSS Animations */
@-webkit-keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}
@-moz-keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}
@-o-keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}
@keyframes fadeout {
  0%   { background: #fff; }
  10%   { background: #eee; }
  100% { background: #fff; }
}

Here's a column of text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.

Here's another column of text

Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.

Here's the third column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.

Here's a fourth column

Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.