social icons
TRANSCRIPT
SOCIAL ICONS
1. ROTATING IMAGE
CSS STYLE
/* Extra Addedsocial img {
margin-left: 20px; margin-top: 10px;
}
div#social {width: XXpx;height: YYpx;position: absolute;top: 1px;left: 1200px;}
*/
#social a:hover {background-color: transparent;opacity:0.7;
}
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;
}
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);
}
HTML CODE
<right><div id="social">
<!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.htmltutsplus.com/wp-content/uploads/2013/03/facebook.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.htmltutsplus.com/wp-content/uploads/2013/03/twitter.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Start Linkedin Icon--> <a title="Follow Us On Linkedin" rel="nofollow" href="YOUR-LINKEDIN-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.htmltutsplus.com/wp-content/uploads/2013/03/linkedin.png" alt="Follow Us On Linkedin"/></a>
<!--Flickr Icon--><a title="Follow Us On Flickr" rel="nofollow" href="YOUR-FLICKR-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.htmltutsplus.com/wp-content/uploads/2013/03/flickr.png" alt="Follow Us on Flickr" /></a>
<!--MySpace Icon--> <a title="Follow Us On MySpace" rel="nofollow" href="YOUR-MYSPACE-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.htmltutsplus.com/wp-content/uploads/2013/03/myspace.png" alt="Follow Us on MySpace" /></a>
<!--StumbleUpon Icon--> <a title="Follow Us On StumbleUpon" rel="nofollow" href="YOUR-STUMBLEUPON-URL-HERE" target="_blank">
<img style="margin-right:1px;" src="http://www.htmltutsplus.com/wp-content/uploads/2013/03/stumbleupon.png" alt="Follow Us on StumbleUpon" /></a>
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.htmltutsplus.com/wp-content/uploads/2013/03/rss.png" style="margin-right:1px;" alt="Icon"/></a>
</div> <br/> </right>
2.
.social-follow-button-container { background-attachment: scroll; background-clip: border-box; background-origin: padding-box; display: inline-block; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: bold; line-height: 1em; margin: 3px 0 0 0; outline-color: #333; outline-style: none; outline-width: 0px;
overflow: hidden; padding: 2px 3px 3px 5px; position: relative; text-align: left; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.496) 0px 1px 0px; vertical-align: top; visibility: visible; white-space: nowrap; width: auto; position: relative; background-color: #f8f8f8; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede)); background-image: -moz-linear-gradient(top, #fff, #dedede); background-image: -o-linear-gradient(top, #fff, #dedede); background-image: -ms-linear-gradient(top, #fff, #dedede); background-image: linear-gradient(top, #ffffff, #dedede); border: #ccc solid 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #333; font-weight: bold; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; height: auto; overflow: hidden}
.social-follow-button-container:before { content: '\03b1'; font-size: 14px; font-weight: bold; color: brown}
.social-follow-button-container a { text-decoration: none; color: inherit}
.social-follow-button-container:hover { border-color: #bbb; background-color: #f8f8f8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d9d9d9)); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -ms-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}
.social-counter-container { display: inline-block; background: #fff; border: #bbb solid 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; height: 11px; vertical-align: top; padding: 3px 3px 3px 3px; margin: 3px 0 0 0; line-height: 1em}
.social-counter-container a { text-decoration: none; color: #333}
.social-counter-container a:hover { text-decoration: underline}
.sharing-icons { display: inline; float: right; margin-top: 11px}
.sharing-icons-full { display: block; margin: 20px auto 40px auto; text-align: center}
.sharing-icons a+a, .sharing-icons-full a+a { margin-left: 5px}
a.share-icon { display: inline-block; background-color: transparent; box-sizing: content-box; box-shadow: none; padding: 1px; line-height: normal; border-radius: 50%; border: 2px solid #a2a2a2; width: 28px !important; height: 28px !important; background-size: 144px 72px; background-repeat: no-repeat; background-position: center center; background-image: url("/images/sharing_icons_4-2x.svg")}
a.share-icon:hover { background-color: #a2a2a2}
a.share-icon.twitter { background-position: -3px -3px}
a.share-icon.twitter:hover { background-color: #00aced; background-position: -3px -39px; border-color: #0075a1; border-color: #00aced}
a.share-icon.facebook { background-position: -39px -2px}
a.share-icon.facebook:hover { background-color: #3B5998; background-position: -39px -38px; border-color: #1e2d4d; border-color: #3B5998}
a.share-icon.googleplus { background-position: -75px -3px}
a.share-icon.googleplus:hover { background-color: #d34836; background-position: -75px -39px; border-color: #872e23; border-color: #d34836}
a.share-icon.email { background-position: -111px -3px}
a.share-icon.email:hover { background-color: #5e9eda; background-position: -111px -39px; border-color: #3a6287; border-color: #5e9eda}
a.share-icon.linkedin, a.share-icon.appnet, a.share-icon.amazon,a.share-icon.flattr, a.share-icon.dropbox, a.share-icon.github,a.share-icon.flickr, a.share-icon.appstore, a.share-icon.rss, a.share-icon.youtube,a.share-icon.delicious { background-image: url("/images/sharing_icons_extras-2x.svg"); background-size: 216px 144px}
a.share-icon.linkedin { background-position: -2px -3px}
a.share-icon.linkedin:hover { background-color: #5080ba; background-position: -2px -75px; border-color: #35547a;
border-color: #5080ba}
a.share-icon.appnet { background-position: -74px -4px}
a.share-icon.appnet:hover { background-color: #49484d; background-position: -74px -76px; border-color: #2a224d; border-color: #49484d}
a.share-icon.amazon { background-position: -110px -3px}
a.share-icon.amazon:hover { background-color: #e79e23; background-position: -110px -75px; border-color: #825a14; border-color: #e79e23}
a.share-icon.flattr { background-position: -146px -3px}
a.share-icon.flattr:hover { background-color: #7eb226; background-position: -146px -75px; border-color: #4a6916; border-color: #7eb226}
a.share-icon.dropbox { background-position: -182px -2px}
a.share-icon.dropbox:hover { background-color: #4f78e3; background-position: -182px -74px; border-color: #2e4785; border-color: #4f78e3}
a.share-icon.github { background-position: -2px -38px
}
a.share-icon.github:hover { background-color: #86d1fc; background-position: -2px -110px; border-color: #50717d; border-color: #86d1fc}
a.share-icon.flickr { background-position: -37px -39px}
a.share-icon.flickr:hover { background-color: #ff0084; background-position: -37px -111px; border-color: #4058d9; border-color: #ff0084}
a.share-icon.appstore { background-position: -74px -40px}
a.share-icon.appstore:hover { background-color: #77a9e5; background-position: -74px -112px; border-color: #2f42a8; border-color: #77a9e5}
a.share-icon.rss { background-position: -110px -39px}
a.share-icon.rss:hover { background-color: #f60; background-position: -110px -111px; border-color: #874c1c; border-color: #f60}
a.share-icon.youtube { background-position: -146px -39px}
a.share-icon.youtube:hover { background-color: #bc272f; background-position: -146px -111px;
border-color: #000000; border-color: #bc272f}
a.share-icon.delicious { background-position: -182px -38px}
a.share-icon.delicious:hover { background-color: #6793fc; background-position: -182px -110px; border-color: #666; border-color: #6793fc}
HTML
<div class="sharing-icons">
<a href="https://twitter.com/intent/tweet?url=http://mattgemmell.com/empathy/&text=Empathy%20by%20@mattgemmell" title="Share on Twitter" class="share-icon twitter"></a>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://mattgemmell.com/empathy/&p[images][0]=&p[title]=Empathy%20by%20Matt%20Gemmell&p[summary]=" title="Share on Facebook" class="share-icon facebook" target="_blank"></a>
<a href="https://plus.google.com/share?url=http://mattgemmell.com/empathy/" title="Share on Google Plus" class="share-icon googleplus" target="_blank"></a>
<a href="mailto:?subject=Empathy%20by%20Matt%20Gemmell&body=http://mattgemmell.com/empathy/" title="Share via email" class="share-icon email" target="_blank"></a>
</div>
ALL CSS
@charset "UTF-8";html, body, div, span, applet, object, iframe, h1, h2,h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub,sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline}
html { line-height: 1}
ol, ul { list-style: none}
table { border-collapse: collapse; border-spacing: 0}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle}
q, blockquote { quotes: none}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none}
a img { border: none}
article, aside, details, figcaption, figure, footer, header, hgroup,menu, nav, section, summary { display: block}
article, aside, details, figcaption, figure, footer, header, hgroup,menu, nav, section, summary { display: block}
a { color: #0061c9}
a:visited { color: #981b1b}
a:focus { color: #0061c9}
a:hover { color: #0061c9}
a:active { color: #981b1b}
aside.sidebar a { color: #0061c9}
aside.sidebar a:focus { color: #0061c9}
aside.sidebar a:hover { color: #0061c9}
aside.sidebar a:active { color: #981b1b}
html { background: #fff}
body>div { background: transparent}
body>div>div { background: transparent; border-right: 1px solid #212121}
.heading, h1, h2, h3, h4, h5, h6 { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif}
.sans, html .gist .gist-file .gist-meta, #blog-archives a.category,#blog-archives time, .fusiontext, .fusion_attrib_footer { font-family: "HelveticaNeue-Light", "HelveticaNeue", Helvetica, Arial, sans-serif}
.serif, body, body>nav form .search, article header p.meta, article>footer,#content .blog-index a[rel=full-article], #content .blog-index footer,body>footer { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif}
.mono, pre, code, tt, p code, li code { font-family: PragmataPro, Menlo, Monaco, "Andale Mono", "Lucida Console", "Courier New", monospace}
body>header h1 { font-size: 1.9em; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; font-weight: normal; line-height: .6em}
body>header h2 { font-size: 5.775em !important; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif}
body { font-size: 1.225em; line-height: 1.6em; color: #333}
h1 {
font-size: 2.1em; line-height: 1.2em}
@media only screen and (min-width: 768px) { h1 { font-size: 2.6em; line-height: 1.2em }}
h1, h2, h3, h4, h5, h6 { text-rendering: optimizelegibility; margin-bottom: 1em; font-weight: 600; color: #111}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #0061c9 !important}
h2, section h1 { font-size: 1.5em}
h3, section h2, section section h1 { font-size: 1.3em}
h4, section h3, section section h2, section section section h1 { font-size: 1em}
h5, section h4, section section h3 { font-size: .9em}
h6, section h5, section section h4, section section section h3 { font-size: .8em}
p, blockquote, ul, ol { margin-bottom: 1.5em}
ul { list-style-type: circle}
ul ul { list-style-type: disc; margin-bottom: 0px}
ul ul ul { list-style-type: square; margin-bottom: 0px}
ol { list-style-type: decimal}
ol ol { list-style-type: lower-alpha; margin-bottom: 0px}
ol ol ol { list-style-type: lower-roman; margin-bottom: 0px}
ul, ul ul, ul ol, ol, ol ul, ol ol { margin-left: 1.3em}
strong { font-weight: bold}
em { font-style: italic}
mark { color: #626262; background-color: transparent; font-weight: normal; font-style: italic; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif}
sup, sub { font-size: 0.8em; position: relative; display: inline-block
}
sup { top: -1em}
sub { bottom: -0.5em}
q { font-style: italic}
q:before { content: "\201C"}
q:after { content: "\201D"}
em, dfn { font-style: italic}
strong, dfn { font-weight: bold}
del, s { text-decoration: line-through}
abbr, acronym { border-bottom: 1px dotted; cursor: help}
sub, sup { line-height: 0}
hr { margin-bottom: 0.2em}
small { font-size: .8em
}
big { font-size: 1.2em}
blockquote { font-style: italic; position: relative; font-size: 1.2em; line-height: 1.5em; padding-left: 1em; border-left: 4px solid rgba(136, 136, 136, 0.5)}
blockquote cite { font-style: italic}
blockquote cite a { color: #888 !important; word-wrap: break-word}
blockquote cite:before { content: '\2014'; padding-right: .3em; padding-left: .3em; color: #888}
@media only screen and (min-width: 992px) { blockquote { padding-left: 1.5em; border-left-width: 4px }}
.pullquote-right:before, .pullquote-left:before { padding: 0; border: none; content: attr(data-pullquote); float: right; width: 45%; margin: .5em 0 1em 1.5em; position: relative; top: 7px; font-size: 1.4em; line-height: 1.45em
}
.pullquote-left:before { float: left; margin: .5em 1.5em 1em 0}
.force-wrap, article a { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word}
.group, body>header, body>nav, body>footer, body #content>article,body #content>div>article, body #content>div>section, body div.pagination,aside.sidebar { *zoom: 1}
.group:after, body>header:after, body>nav:after, body>footer:after,body #content>article:after, body #content>div>article:after, body #content>div>section:after,body div.pagination:after, aside.sidebar:after { content: ""; display: table; clear: both}
body { -webkit-text-size-adjust: none; max-width: 676px; position: relative; margin: 0 auto}
body>header, body>nav, body>footer, body #content>article, body #content>div>article,body #content>div>section { padding-left: 18px; padding-right: 18px}
@media only screen and (min-width: 480px) { body>header, body>nav, body>footer, body #content>article, body #content>div>article, body #content>div>section { padding-left: 18px;
padding-right: 18px }}
@media only screen and (min-width: 768px) { body>header, body>nav, body>footer, body #content>article, body #content>div>article, body #content>div>section { padding-left: 18px; padding-right: 18px }}
@media only screen and (min-width: 992px) { body>header, body>nav, body>footer, body #content>article, body #content>div>article, body #content>div>section { padding-left: 18px; padding-right: 18px }}
body div.pagination { margin-left: 18px; margin-right: 18px}
@media only screen and (min-width: 480px) { body div.pagination { margin-left: 18px; margin-right: 18px }}
@media only screen and (min-width: 768px) { body div.pagination { margin-left: 18px; margin-right: 18px }}
@media only screen and (min-width: 992px) { body div.pagination { margin-left: 18px; margin-right: 18px }}
body>header {
font-size: 1em; padding-top: 1.5em; padding-bottom: 0.75em}
#content>div, #content>article { width: 100%}
aside.sidebar { float: none; padding: 0 18px 1px}
.flex-content, table, article img, article video, article .flash-video { max-width: 100%; height: auto}
.basic-alignment.left, table.left, article img.left, article video.left,article .left.flash-video { float: left; margin-right: 1.5em}
.basic-alignment.right, table.right, article img.right, article video.right,article .right.flash-video { float: right; margin-left: 1.5em}
.basic-alignment.center, table.center, article img.center, article video.center,article .center.flash-video { display: block; margin: 0 auto 1.5em}
.basic-alignment.left, table.left, article img.left, article video.left,article .left.flash-video, .basic-alignment.right, table.right, article img.right,article video.right, article .right.flash-video { margin-bottom: .8em}
.toggle-sidebar, .no-sidebar .toggle-sidebar { display: none}
@media only screen and (min-width: 750px) { body.sidebar-footer aside.sidebar {
float: none; width: auto; clear: left; margin: 0; padding: 0 18px 1px }
body.sidebar-footer aside.sidebar section.odd, body.sidebar-footer aside.sidebar section.even { float: left; width: 48% }
body.sidebar-footer aside.sidebar section.odd { margin-left: 0 }
body.sidebar-footer aside.sidebar section.even { margin-left: 4% }
body.sidebar-footer aside.sidebar.thirds section { width: 30%; margin-left: 5% }
body.sidebar-footer aside.sidebar.thirds section.first { margin-left: 0; clear: both }}
body.sidebar-footer #content { margin-right: 0px}
body.sidebar-footer .toggle-sidebar { display: none}
#content { border-right: none}
@media only screen and (min-width: 550px) { body>header { font-size: 1em }
body>nav fieldset.mobile-nav { display: none !important }
body>nav ul.main-navigation { display: block !important }
fieldset[role=search] .search { width: 200px }}
@media only screen and (min-width: 750px) { aside.sidebar { float: none; width: auto; clear: left; margin: 0; padding: 0 18px 1px }
aside.sidebar section.odd, aside.sidebar section.even { float: left; width: 48% }
aside.sidebar section.odd { margin-left: 0 }
aside.sidebar section.even { margin-left: 4% }
aside.sidebar.thirds section { width: 30%; margin-left: 5% }
aside.sidebar.thirds section.first { margin-left: 0; clear: both }}
@media only screen and (min-width: 768px) { body { -webkit-text-size-adjust: auto
}
body>header { font-size: 1.3em }
#main { *zoom: 1; padding: 0; margin: 0 auto }
#main:after { content: ""; display: table; clear: both }
#content { *zoom: 1; margin-right: 240px; position: relative }
#content:after { content: ""; display: table; clear: both }
.no-sidebar #content { margin-right: 0; border-right: 0 }
.collapse-sidebar #content { margin-right: 20px }
#content>div, #content>article { padding-top: 9px; padding-bottom: 9px; float: left }
aside.sidebar { *zoom: 1; width: 210px; padding: 0 15px 15px;
clear: none; float: left; margin: 0 -100% 0 0 }
aside.sidebar:after { content: ""; display: table; clear: both }
aside.sidebar section { width: auto; margin-left: 0 }
aside.sidebar section.odd, aside.sidebar section.even { float: none; width: auto; margin-left: 0 }
.collapse-sidebar aside.sidebar { float: none; width: auto; clear: left; margin: 0; padding: 0 18px 1px }
.collapse-sidebar aside.sidebar section.odd, .collapse-sidebar aside.sidebar section.even { float: left; width: 48% }
.collapse-sidebar aside.sidebar section.odd { margin-left: 0 }
.collapse-sidebar aside.sidebar section.even { margin-left: 4% }
.collapse-sidebar aside.sidebar.thirds section { width: 30%; margin-left: 5% }
.collapse-sidebar aside.sidebar.thirds section.first { margin-left: 0; clear: both }}
@media only screen and (min-width: 992px) { body>header { font-size: 1.3em }
#content { margin-right: 300px }
#content>div, #content>article { padding-top: 9px; padding-bottom: 9px }
aside.sidebar { width: 260px; padding: 1.2em 20px 20px }
.collapse-sidebar aside.sidebar { padding-left: 18px; padding-right: 18px; *zoom: 1 }
.collapse-sidebar aside.sidebar:after { content: ""; display: table; clear: both }}
dl { margin-bottom: 1em}
dt { font-weight: bold}
dt, dd, li { padding-bottom: .25em}
@media only screen and (min-width: 550px) { dt { float: none }}
@media only screen and (min-width: 750px) { dt { clear: left; float: left; padding-right: .5em; width: 10em }}
table { -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; -ms-border-radius: 0.3em; -o-border-radius: 0.3em; border-radius: 0.3em; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 10px; box-shadow: rgba(0, 0, 0, 0.25) 0 2px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: #aaa 1px solid; padding: .25em .25em; background-color: #eaeaea}
table thead, table thead th { font-weight: bold; font-size: 1em}
table thead { border-bottom: 2px solid #333}
table th, table td { padding: 0; border-left: 1px solid #eee; border-bottom: 1px solid #eee}
body>header {
border-bottom: 3px solid #272727; text-align: center}
body>header h1 { font-weight: normal}
body>header h2 { color: #000; font-weight: bold; margin-top: .2em; margin-bottom: .5em}
body>header h2 a, body>header h2 a:visited { color: #000; text-decoration: none}
body>nav { background-color: transparent; background: transparent, transparent; border: none}
body>nav form { -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; margin: 0; padding: 0}
body>nav form .search { width: 120px; padding: .3em .5em .3em; font-size: .75em; line-height: 1.1em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; -ms-border-radius: 0.5em; -o-border-radius: 0.5em; border-radius: 0.5em; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; border: 1px solid #e9e9e9; color: #888
}
body>nav form .search:focus { color: #333; border-color: #0061c9; -webkit-box-shadow: #004896 0 0 4px, #004896 0 0 3px inset; -moz-box-shadow: #004896 0 0 4px, #004896 0 0 3px inset; box-shadow: #004896 0 0 4px, #004896 0 0 3px inset; background-color: #fff; outline: none}
body>nav fieldset.mobile-nav { float: left; width: 48%}
body>nav fieldset.mobile-nav select { width: 100%; font-size: .8em; border: 1px solid #888}
body>nav ul { display: none}
body>nav ul { list-style: none; float: left; display: block; margin-left: 0; padding-top: .95em}
body>nav ul li { margin: 0; list-style-image: none; list-style-type: none; margin-left: 0; white-space: nowrap; display: inline; float: left; padding-left: 0; padding-right: 0}
body>nav ul li+li { margin-left: .8em
}
body>nav a { color: #333; font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; float: left; text-decoration: none; font-size: 0.8em; padding: 0; line-height: 1.55em}
body>nav a:visited { color: #333}
body>nav a:hover { color: #0061c9}
@media only screen and (min-width: 768px) { body>nav a { font-size: 1.15em }}
body>nav form { float: right; text-align: left; padding: 0; padding-top: .8em}
body>nav form .search { font-size: .95em; line-height: 1.2em}
body>nav ul[data-subscription$=email]+form { width: 131px}
body>nav ul[data-subscription$=email]+form .search { width: 91%}
body>nav fieldset.mobile-nav { display: inline; padding-top: 0.95em
}
body>nav ul.main-navigation { display: none}
@media only screen and (min-width: 992px) { body>nav form { width: -12px }
body>nav ul[data-subscription$=email]+form { width: 184px }}
@media only screen and (min-width: 550px) { .maskImage body>nav ul[data-subscription$=email]+form { width: 157px }}
@media only screen and (min-width: 992px) { .maskImage body>nav ul[data-subscription$=email]+form { width: 210px }}
.maskImage ul.subscription { position: relative; top: .2em}
.maskImage ul.subscription li, .maskImage ul.subscription a { border: 0; padding: 0}
article { padding-top: 1em}
article header { position: relative}
article header h1 { font-size: 2.4em; margin: 0
}
article header h1 a { text-decoration: none}
article header h1 a: { text-decoration: none}
article header p { font-size: 0.9em; color: #a2a2a2; margin: 0}
article header p.meta { font-size: 0.9em}
@media only screen and (min-width: 768px) { article header { padding-bottom: .5em }}
article h2 { padding-top: 0.8em}
.entry-content article h2:first-child, article header+h2 { padding-top: 0}
article h2:first-child, article header+h2 { background: none}
article .feature { padding-top: .5em; margin-bottom: 1em; padding-bottom: 1em; background: #666 bottom left repeat-x; line-height: 1.3em}
article img, article video, article .flash-video { -webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em; -ms-border-radius: 0.3em; -o-border-radius: 0.3em; border-radius: 0.3em; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 10px; box-shadow: rgba(0, 0, 0, 0.25) 0 2px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: #aaa 1px solid; padding: .25em; background-color: #fff}
article .no-border { border: none; border-radius: 0; -moz-border-radius: 0; box-shadow: none; background: transparent; padding: 0}
article video, article .flash-video { margin: 0 auto 1.5em}
article video { display: block; width: 100%}
article .flash-video>div { position: relative; display: block; padding-bottom: 56.25%; padding-top: 1px; height: 0; overflow: hidden}
article .flash-video>div iframe, article .flash-video>div object,article .flash-video>div embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%
}
article>footer { color: #888; padding-bottom: 2.5em; margin-top: 2em}
article>footer p.meta { margin-top: 0.8em; margin-bottom: .8em; font-size: 1em; clear: both; overflow: hidden; border-top: 3px solid #272727}
article>footer div.sharing+p.meta { border-top: 0}
article>header+p { margin-top: 1.5em}
#content .blog-index article { padding-top: 3em; padding-bottom: 1.5em; border-top: 4px solid #e6e6e6}
#content .blog-index article:first-child { padding-top: 1em; border-top: none}
#content .blog-index article header { background: none}
#content .blog-index article h1 a { color: inherit}
#content .blog-index article h1 a:hover { color: #0061c9}
#content .blog-index a[rel=full-article] {
display: inline-block; padding: .4em 0; margin-right: .5em; text-decoration: underline; color: #0061c9; -webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; transition: background-color 0.5s}
#content .blog-index a[rel=full-article]:hover { text-shadow: none}
#content .blog-index a[rel=full-article]:visited { color: #981b1b}
#content .blog-index footer { margin-top: 1em}
.separator, article>footer .byline+time:before, article>footer time+time:before,article>footer .comments:before, article>footer .byline ~ .categories:before { content: "—"; padding: 0 .4em 0 .2em; display: inline-block}
#content div.pagination { *zoom: 1; text-align: center; font-size: .95em; position: relative; padding-top: 1.5em; padding-bottom: 1.5em; border-top: 1px solid #fff}
#content div.pagination:after { content: ""; display: table; clear: both}
#content div.pagination a { text-decoration: none; color: #888
}
#content div.pagination a.prev { position: absolute; left: 0}
#content div.pagination a.next { position: absolute; right: 0}
#content div.pagination a:hover { color: #0061c9}
#content div.pagination a[href*=archive]:before, #content div.pagination a[href*=archive]:after { content: '\2014'; padding: 0 .3em}
.profile-image { width: 256px; height: 256px; margin: 0 auto; margin-bottom: -1.5em; background-repeat: no-repeat; background-size: 200px 200px}
@media only screen and (min-width: 550px) { .profile-image { float: none }}
@media only screen and (min-width: 751px) { .profile-image { float: right }}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .profile-image { background-image: url(/images/[email protected]) }
}
.get-vcard { margin-top: 1em; font-size: .875em}
.vcard dt { float: left; padding-right: .5em; text-align: right; width: 5em}
.vcard dd { margin-left: 5em}
.vcard dt, .vcard dd { padding-bottom: .25em}
.sharing { width: 100%; overflow: hidden}
p.meta+.sharing { padding-top: 1em; padding-left: 0}
.highlight, html .gist .gist-file .gist-syntax .gist-highlight { border: 1px solid #e7dec3 !important}
.highlight table td.code, html .gist .gist-file .gist-syntax .gist-highlight table td.code { width: 100%}
.highlight .line-numbers, html .gist .gist-file .gist-syntax .gist-highlight .line-numbers { text-align: right; font-size: 13px; line-height: 1.45em; background: #fdf8e8 !important; border-right: 1px solid #ebe4ce !important; -webkit-box-shadow: #fef9ed -1px 0 inset;
-moz-box-shadow: #fef9ed -1px 0 inset; box-shadow: #fef9ed -1px 0 inset; text-shadow: #f1ecdc 0 -1px; padding: .8em !important; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0}
.highlight .line-numbers span, html .gist .gist-file .gist-syntax .gist-highlight .line-numbers span { color: #93a1a1 !important}
figure.code, .gist-file, pre { -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px; -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px; box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px}
figure.code .highlight pre, .gist-file .highlight pre, pre .highlight pre { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}
html .gist .gist-file { margin-bottom: 1.8em; position: relative; border: none; padding-top: 26px !important}
html .gist .gist-file .gist-syntax { border-bottom: 0 !important; background: none !important}
html .gist .gist-file .gist-syntax .gist-highlight { background: #fdf6e3 !important}
html .gist .gist-file .gist-meta { padding: .6em 0.8em; border: 1px solid #f1ecdc !important; color: #93a1a1; font-size: .7em !important;
background: #fef9ed; border: 1px solid #e7dec3 !important; border-top: 1px solid #fef9ed !important; line-height: 1.5em}
html .gist .gist-file .gist-meta a { color: #75878b !important; text-decoration: none}
html .gist .gist-file .gist-meta a:hover { text-decoration: underline}
html .gist .gist-file .gist-meta a:hover { color: #586e75 !important}
html .gist .gist-file .gist-meta a[href*='#file'] { position: absolute; top: 0; left: 0; right: -10px; color: #474747 !important}
html .gist .gist-file .gist-meta a[href*='#file']:hover { color: #0061c9 !important}
html .gist .gist-file .gist-meta a[href*=raw] { top: .4em}
pre { background: #fdf6e3; border: 1px solid #e7dec3; line-height: 1.45em; font-size: 13px; margin-bottom: 2.1em; padding: .8em 1em; color: #586e75; overflow: auto}
h3.filename+pre { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px}
p code, li code { display: inline-block; white-space: no-wrap; font-size: .9em; line-height: 1.5em; color: #626262; background: #eaeaea; margin: -1px 0; padding-left: .25em; padding-right: .25em; border: none}
p .meta code, li .meta code { color: #888; font-style: normal}
p pre code, li pre code { font-size: 1em !important; background: none; border: none}
.pre-code, html .gist .gist-file .gist-syntax .gist-highlight pre,
.highlight code { font-family: PragmataPro, Menlo, Monaco, "Andale Mono", "Lucida Console", "Courier New", monospace !important; overflow: scroll; overflow-y: hidden; display: block; padding: .8em !important; overflow-x: auto; line-height: 1.45em; background: #fdf6e3 !important; color: #586e75 !important}
.pre-code *::-moz-selection, html .gist .gist-file .gist-syntax .gist-highlight pre *::-moz-selection,.highlight code *::-moz-selection { background: #fff; color: inherit;
text-shadow: #fdf6e3 0 1px}
.pre-code *::-webkit-selection, html .gist .gist-file .gist-syntax .gist-highlight pre *::-webkit-selection,.highlight code *::-webkit-selection { background: #fff; color: inherit; text-shadow: #fdf6e3 0 1px}
.pre-code *::selection, html .gist .gist-file .gist-syntax .gist-highlight pre *::selection,.highlight code *::selection { background: #fff; color: inherit; text-shadow: #fdf6e3 0 1px}
.pre-code span, html .gist .gist-file .gist-syntax .gist-highlight pre span,
.highlight code span { color: #586e75 !important}
.pre-code span, html .gist .gist-file .gist-syntax .gist-highlight pre span,
.highlight code span { font-style: normal !important; font-weight: normal !important}
.pre-code .c, html .gist .gist-file .gist-syntax .gist-highlight pre .c,
.highlight code .c { color: #93a1a1 !important; font-style: italic !important}
.pre-code .cm, html .gist .gist-file .gist-syntax .gist-highlight pre .cm,
.highlight code .cm { color: #93a1a1 !important; font-style: italic !important}
.pre-code .cp, html .gist .gist-file .gist-syntax .gist-highlight pre .cp,
.highlight code .cp { color: #93a1a1 !important; font-style: italic !important}
.pre-code .c1, html .gist .gist-file .gist-syntax .gist-highlight pre .c1,
.highlight code .c1 { color: #93a1a1 !important; font-style: italic !important}
.pre-code .cs, html .gist .gist-file .gist-syntax .gist-highlight pre .cs,
.highlight code .cs { color: #93a1a1 !important; font-weight: bold !important; font-style: italic !important}
.pre-code .err, html .gist .gist-file .gist-syntax .gist-highlight pre .err,
.highlight code .err { color: #dc322f !important; background: none !important}
.pre-code .k, html .gist .gist-file .gist-syntax .gist-highlight pre .k,
.highlight code .k { color: #cb4b16 !important}
.pre-code .o, html .gist .gist-file .gist-syntax .gist-highlight pre .o,
.highlight code .o { color: #586e75 !important; font-weight: bold !important}
.pre-code .p, html .gist .gist-file .gist-syntax .gist-highlight pre .p,
.highlight code .p { color: #586e75 !important}
.pre-code .ow, html .gist .gist-file .gist-syntax .gist-highlight pre .ow,
.highlight code .ow { color: #2aa198 !important; font-weight: bold !important}
.pre-code .gd, html .gist .gist-file .gist-syntax .gist-highlight pre .gd,
.highlight code .gd { color: #586e75 !important; background-color: #f4c5b6 !important; display: inline-block}
.pre-code .gd .x, html .gist .gist-file .gist-syntax .gist-highlight pre .gd .x,
.highlight code .gd .x {
color: #586e75 !important; background-color: #f1b1a4 !important; display: inline-block}
.pre-code .ge, html .gist .gist-file .gist-syntax .gist-highlight pre .ge,
.highlight code .ge { color: #586e75 !important; font-style: italic !important}
.pre-code .gh, html .gist .gist-file .gist-syntax .gist-highlight pre .gh,
.highlight code .gh { color: #93a1a1 !important}
.pre-code .gi, html .gist .gist-file .gist-syntax .gist-highlight pre .gi,
.highlight code .gi { color: #586e75 !important; background-color: #e5e3b5 !important; display: inline-block}
.pre-code .gi .x, html .gist .gist-file .gist-syntax .gist-highlight pre .gi .x,
.highlight code .gi .x { color: #586e75 !important; background-color: #cdd088 !important; display: inline-block}
.pre-code .gs, html .gist .gist-file .gist-syntax .gist-highlight pre .gs,
.highlight code .gs { color: #586e75 !important; font-weight: bold !important}
.pre-code .gu, html .gist .gist-file .gist-syntax .gist-highlight pre .gu,
.highlight code .gu { color: #6c71c4 !important}
.pre-code .kc, html .gist .gist-file .gist-syntax .gist-highlight pre .kc,
.highlight code .kc { color: #859900 !important; font-weight: bold !important}
.pre-code .kd, html .gist .gist-file .gist-syntax .gist-highlight pre .kd,
.highlight code .kd {
color: #268bd2 !important}
.pre-code .kp, html .gist .gist-file .gist-syntax .gist-highlight pre .kp,
.highlight code .kp { color: #cb4b16 !important; font-weight: bold !important}
.pre-code .kr, html .gist .gist-file .gist-syntax .gist-highlight pre .kr,
.highlight code .kr { color: #d33682 !important; font-weight: bold !important}
.pre-code .kt, html .gist .gist-file .gist-syntax .gist-highlight pre .kt,
.highlight code .kt { color: #2aa198 !important}
.pre-code .n, html .gist .gist-file .gist-syntax .gist-highlight pre .n,
.highlight code .n { color: #268bd2 !important}
.pre-code .na, html .gist .gist-file .gist-syntax .gist-highlight pre .na,
.highlight code .na { color: #268bd2 !important}
.pre-code .nb, html .gist .gist-file .gist-syntax .gist-highlight pre .nb,
.highlight code .nb { color: #859900 !important}
.pre-code .nc, html .gist .gist-file .gist-syntax .gist-highlight pre .nc,
.highlight code .nc { color: #d33682 !important}
.pre-code .no, html .gist .gist-file .gist-syntax .gist-highlight pre .no,
.highlight code .no { color: #b58900 !important}
.pre-code .nl, html .gist .gist-file .gist-syntax .gist-highlight pre .nl,
.highlight code .nl { color: #859900 !important}
.pre-code .ne, html .gist .gist-file .gist-syntax .gist-highlight pre .ne,
.highlight code .ne { color: #268bd2 !important; font-weight: bold !important}
.pre-code .nf, html .gist .gist-file .gist-syntax .gist-highlight pre .nf,
.highlight code .nf { color: #268bd2 !important; font-weight: bold !important}
.pre-code .nn, html .gist .gist-file .gist-syntax .gist-highlight pre .nn,
.highlight code .nn { color: #b58900 !important}
.pre-code .nt, html .gist .gist-file .gist-syntax .gist-highlight pre .nt,
.highlight code .nt { color: #268bd2 !important; font-weight: bold !important}
.pre-code .nx, html .gist .gist-file .gist-syntax .gist-highlight pre .nx,
.highlight code .nx { color: #b58900 !important}
.pre-code .vg, html .gist .gist-file .gist-syntax .gist-highlight pre .vg,
.highlight code .vg { color: #268bd2 !important}
.pre-code .vi, html .gist .gist-file .gist-syntax .gist-highlight pre .vi,
.highlight code .vi { color: #268bd2 !important}
.pre-code .nv, html .gist .gist-file .gist-syntax .gist-highlight pre .nv,
.highlight code .nv { color: #268bd2 !important}
.pre-code .mf, html .gist .gist-file .gist-syntax .gist-highlight pre .mf,
.highlight code .mf { color: #2aa198 !important}
.pre-code .m, html .gist .gist-file .gist-syntax .gist-highlight pre .m,
.highlight code .m { color: #2aa198 !important}
.pre-code .mh, html .gist .gist-file .gist-syntax .gist-highlight pre .mh,
.highlight code .mh { color: #2aa198 !important}
.pre-code .mi, html .gist .gist-file .gist-syntax .gist-highlight pre .mi,
.highlight code .mi { color: #2aa198 !important}
.pre-code .s, html .gist .gist-file .gist-syntax .gist-highlight pre .s,
.highlight code .s { color: #2aa198 !important}
.pre-code .sd, html .gist .gist-file .gist-syntax .gist-highlight pre .sd,
.highlight code .sd { color: #2aa198 !important}
.pre-code .s2, html .gist .gist-file .gist-syntax .gist-highlight pre .s2,
.highlight code .s2 { color: #2aa198 !important}
.pre-code .se, html .gist .gist-file .gist-syntax .gist-highlight pre .se,
.highlight code .se { color: #dc322f !important}
.pre-code .si, html .gist .gist-file .gist-syntax .gist-highlight pre .si,
.highlight code .si { color: #268bd2 !important}
.pre-code .sr, html .gist .gist-file .gist-syntax .gist-highlight pre .sr,
.highlight code .sr { color: #2aa198 !important}
.pre-code .s1, html .gist .gist-file .gist-syntax .gist-highlight pre .s1,
.highlight code .s1 { color: #2aa198 !important}
.pre-code div .gd, html .gist .gist-file .gist-syntax .gist-highlight pre div .gd,
.highlight code div .gd, .pre-code div .gd .x, html .gist .gist-file .gist-syntax .gist-highlight pre div .gd .x,.highlight code div .gd .x, .pre-code div .gi, html .gist .gist-file .gist-syntax .gist-highlight pre div .gi,.highlight code div .gi, .pre-code div .gi .x, html .gist .gist-file .gist-syntax .gist-highlight pre div .gi .x,.highlight code div .gi .x { display: inline-block; width: 100%}
.highlight, .gist-highlight { margin-bottom: 1.8em; background: #fdf6e3; overflow-y: hidden; overflow-x: auto}
.highlight pre, .gist-highlight pre { background: #fdf6e3; -webkit-border-radius: none; -moz-border-radius: none; -ms-border-radius: none; -o-border-radius: none; border-radius: none; border: none; padding: 0; margin-bottom: 0}
.highlight table, .gist-highlight table { border: 0; margin: 0}
.highlight .highlight th, .highlight .highlight td, .gist-highlight .highlight th,
.gist-highlight .highlight td { padding: 0; border: 1px solid #090909; border-bottom: none}
pre::-webkit-scrollbar, .highlight::-webkit-scrollbar, .gist-highlight::-webkit-scrollbar { height: .5em; background: rgba(0, 0, 0, 0.15)}
pre::-webkit-scrollbar-thumb:horizontal, .highlight::-webkit-scrollbar-thumb:horizontal,.gist-highlight::-webkit-scrollbar-thumb:horizontal { background: rgba(0, 0, 0, 0.15); -webkit-border-radius: 4px; border-radius: 4px}
.highlight code { background: #000}
figure.code { background: none; padding: 0; border: 0; margin-bottom: 1.5em}
figure.code pre { margin-bottom: 0}
figure.code figcaption { position: relative}
figure.code .highlight { margin-bottom: 0}
.code-title, html .gist .gist-file .gist-meta a[href*='#file'], h3.filename,figure.code figcaption { text-align: center; font-size: 13px; line-height: 2em; text-shadow: #cbcccc 0 1px 0; color: #474747; font-weight: normal; margin-bottom: 0; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
background: #aaa url('/images/code_bg.png?1368109031') top repeat-x; border: 0px solid #565656; border-top-color: #cbcbcb; border-left-color: #a5a5a5; border-right-color: #a5a5a5; border-bottom: 0}
.download-source, html .gist .gist-file .gist-meta a[href*=raw], figure.code figcaption a { position: absolute; right: .8em; text-decoration: none; color: #666 !important; z-index: 1; font-size: 13px; text-shadow: #cbcccc 0 1px 0; padding-left: 3em}
.download-source:hover, html .gist .gist-file .gist-meta a[href*=raw]:hover,figure.code figcaption a:hover { text-decoration: underline}
#archive #content>div, #archive #content>div>article { padding-top: 0}
#blog-archives { width: 100%; overflow: scroll; color: #888}
#blog-archives article { padding: 1em 0 1em; position: relative}
#blog-archives article:last-child { background: none}
#blog-archives article footer { padding: 0; margin: 0; font-size: .75em}
#blog-archives h1 { color: #333; margin-bottom: 0}
#blog-archives h2 { display: none}
#blog-archives h1 { font-size: 1.5em}
#blog-archives h1 a { text-decoration: none; color: inherit; font-weight: normal; display: inline-block}
#blog-archives h1 a:hover { text-decoration: underline}
#blog-archives h1 a:hover { color: #0061c9}
#blog-archives a.category, #blog-archives time { color: #888}
#blog-archives .entry-content { display: none}
#blog-archives time { font-size: .875em; line-height: 1.2em}
#blog-archives time .month, #blog-archives time .day { display: inline-block}
#blog-archives time .month { text-transform: none}
#blog-archives p { margin-bottom: 1em}
#blog-archives a, #blog-archives .entry-content a { color: inherit}
#blog-archives a:hover, #blog-archives .entry-content a:hover { color: #0061c9}
#blog-archives a:hover { color: #0061c9}
@media only screen and (min-width: 550px) { #blog-archives article { margin-left: 5em }
#blog-archives h2 { margin-bottom: .3em; font-weight: normal; display: inline-block; position: relative; top: -1px; float: left }
#blog-archives h2:first-child { padding-top: .75em }
#blog-archives time { position: absolute; text-align: right; left: 0em; top: 1.8em }
#blog-archives .year { display: none }
#blog-archives article { padding-left: 4.5em; padding-bottom: .7em
}
#blog-archives a.category { line-height: 1.1em }}
#content>.category article { margin-left: 0; padding-left: 6.8em}
#content>.category .year { display: inline}
body>footer { font-size: .9em; text-align: center; color: #272727; position: relative; padding-top: .5em; padding-bottom: 1em; margin-bottom: 0; z-index: 1; border-top: 3px solid #272727}
body>footer a { color: #272727}
body>footer a:visited { color: #272727}
body>footer a:hover { color: #0061c9}
body>footer p { margin-bottom: 0}
body>footer ul { list-style: none; margin-left: 0}
body>footer ul li { float: left; text-transform: uppercase; margin-right: 0.5em}
body>footer ul li:last-child { float: right; text-transform: none; margin-right: 0}
body>footer #readtrustcredit { font-size: 0.9em; margin: 0; padding: 0}
#fusion_ads_container { display: block; width: 200px; position: absolute; top: 426px; right: -250px}
@media only screen and (max-device-width:480px), only screen and (min-device-width: 481px) and (max-device-width: 1024px) { #fusion_ads_container { position: relative; top: 0; right: 0; left: 0; margin: 5px auto }}
.fusionentire, .fusion_attrib_footer { display: block; width: 200px; padding: 0; margin: 0 auto}
.fusionentire { margin: 0 auto 0 auto}
.fusionentire, .fusion_attrib_footer, .fusiontext {
font-size: 12px; line-height: 1.5em; text-align: center}
.fusiontext { margin: 20px 0}
.fusiontext, .fusiontext a { color: #333}
.fusionimg { text-align: center; border: 0; margin-bottom: 10px}
.fusionimg a { border: 0}
.fusion_attrib_footer { margin: 10px auto 0 auto; font-size: 11px; border: none}
.fusion_attrib_footer a { color: #888}
.fusionentire a, .fusion_attrib_footer a { text-decoration: none; border: none}
.screenshot { text-align: center; margin-bottom: 30px}
.screenshot p { margin: 0; border: 0; padding: 0}
.screenshot img { width: auto !important; height: auto !important}
.screenshot p.caption { font-size: 14px; color: #333; border: 1px solid #ddd; text-align: center; background-color: #fafafa; padding: 5px 8px; margin: 5px 10px 10px 0px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px}
.footnote { margin-top: 40px; padding: 5px; border: 1px solid #999; background-color: #ffffe0}
.matt { color: #09f}
.neil { color: #f60}
.iain { color: #090}
.chris { color: #f00}
#readandtrust { text-align: center; margin-top: 50px; border: 0}
#readandtrust img, #readandtrust a {
border: 0; box-shadow: none}
#adn_follow_aside { text-align: center; margin-top: 30px; border: 0}
hr { margin: 40px 0; border: 0; height: 0; color: #999; background-color: #999; border-bottom: 2px solid #999}
#content { background-image: none}
.follow_buttons_byline { display: block; margin: 30px 0 10px 0}
body>header h1 { display: block; position: relative; margin: 0; padding: 0; margin-top: 0px; font-family: Georgia, serif; font-size: 2.8em}
body>header h1 a, body>header h1 a:visited { text-decoration: none; color: black}
body>header { float: none; border: 3px bottom #333; display: block}
#footnotediv { position: absolute; width: 400px; overflow: visible}
#footnotediv { background-color: #fcf4dd; font-size: 1.0em; color: black; padding: 5px 12px; border: 1px solid #aaa; box-shadow: 0 0 10px #333; -webkit-box-shadow: #333 0 0 10px; -moz-box-shadow: 0 0 10px #333}
#footnotediv p { margin: 0; padding: 5px 0}
a.footnotebacklink { border-bottom: none}
a.footnotebacklink img { margin: 0; padding: 0; border: 0}
#footnotecloselink { color: #888; text-decoration: none; text-align: right; margin: 0; padding: 0 5px; font-size: 1.0em; position: absolute; float: right; top: 0; right: 0; font-family: Arial, sans-serif; font-weight: bold}
sup a { margin: 0;
padding: 0 4px 5px 4px}
sup { padding: 0}
.footnotes a[rev=footnote] { padding-left: 0.4em}
mark { color: #333; font-weight: normal; font-style: normal}
.marks-highlighted, .author-marks-help { padding: 0 2px; background-color: #fcf4dd !important; -webkit-border-radius: 0.4em; -moz-border-radius: 0.4em; -ms-border-radius: 0.4em; -o-border-radius: 0.4em; border-radius: 0.4em; border: 1px solid #e1b509}
.toggle-marks-highlight { display: none; font-size: 0.8em; color: inherit !important; background: none; text-decoration: none}
@media only screen and (min-width: 480px) { .toggle-marks-highlight { font-size: inherit }
.toggle-marks-highlight:before { content: "\2756\00a0"; color: inherit }}
.toggle-marks-highlight.marks-highlighted { color: #333 !important
}
header .toggle-marks-highlight { margin-left: 1em}
.author-marks-help { display: none; color: #333 !important; text-decoration: none; padding: 0 0.5em; -webkit-border-radius: 1em; -moz-border-radius: 1em; -ms-border-radius: 1em; -o-border-radius: 1em; border-radius: 1em}
@media only screen and (min-width: 480px) { .marks-highlighted ~ .author-marks-help { display: inline }}
.flattr-button { display: inline; width: auto; margin-left: 31px}
footer div.sharing { padding: 0 0 15px 0 !important}
footer { padding-bottom: 10px !important}
footer p.meta { padding-top: 20px !important}
.social-follow-button-container { background-attachment: scroll; background-clip: border-box; background-origin: padding-box; display: inline-block; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px;
font-style: normal; font-variant: normal; font-weight: bold; line-height: 1em; margin: 3px 0 0 0; outline-color: #333; outline-style: none; outline-width: 0px; overflow: hidden; padding: 2px 3px 3px 5px; position: relative; text-align: left; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.496) 0px 1px 0px; vertical-align: top; visibility: visible; white-space: nowrap; width: auto; position: relative; background-color: #f8f8f8; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede)); background-image: -moz-linear-gradient(top, #fff, #dedede); background-image: -o-linear-gradient(top, #fff, #dedede); background-image: -ms-linear-gradient(top, #fff, #dedede); background-image: linear-gradient(top, #ffffff, #dedede); border: #ccc solid 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #333; font-weight: bold; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; height: auto; overflow: hidden}
.social-follow-button-container:before { content: '\03b1'; font-size: 14px; font-weight: bold; color: brown}
.social-follow-button-container a { text-decoration: none; color: inherit}
.social-follow-button-container:hover { border-color: #bbb; background-color: #f8f8f8; background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d9d9d9)); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -ms-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}
.social-counter-container { display: inline-block; background: #fff; border: #bbb solid 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; height: 11px; vertical-align: top; padding: 3px 3px 3px 3px; margin: 3px 0 0 0; line-height: 1em}
.social-counter-container a { text-decoration: none; color: #333}
.social-counter-container a:hover { text-decoration: underline}
article .entry-content ul li { padding-bottom: 15px
}
article .entry-content h3 { padding-top: 20px}
article .entry-content>p { margin-top: 15px}
article .entry-content p { text-wrap: avoid}
#content #blog-archives { overflow: visible !important}
#content #blog-archives article h1 { word-wrap: break-word}
blockquote.example { font-style: inherit; text-decoration: none; background-color: #f5f5f5; padding: 20px 25px !important; border: 2px solid #999; white-space: pre-wrap}
blockquote.example p { margin: 0; padding: 0}
article header p.meta { display: inline-block; width: auto; margin-top: 15px; margin-bottom: 40px}
.blog-index article header p.meta { margin-bottom: 0px; margin-top: 0px}
#content .blog-index article h1 a:visited:hover {
color: #981b1b !important}
a:visited:hover { color: #981b1b !important}
.blog-index article header { height: auto; padding-bottom: 0px !important; line-height: normal}
article header h1.entry-title { margin-top: 40px}
article .entry-content ul, article .entry-content ol { margin-top: 30px; margin-bottom: 30px}
article .entry-content ul li, article .entry-content ul li+li, article .entry-content ol li,article .entry-content ol li+li { padding: 0; margin: 20px 0px}
article .entry-content ul li p, article .entry-content ul li+li p, article .entry-content ol li p,article .entry-content ol li+li p { padding: 0; margin: 0}
article .entry-content ul li p+p, article .entry-content ul li+li p+p,article .entry-content ol li p+p, article .entry-content ol li+li p+p { margin: 20px 0px}
.kindleWidget img { box-shadow: none}
div.kindleWidget { vertical-align: middle; margin-top: -4px}
div.kindleWidget { margin-right: 20px}
.reading-time-container { display: block; color: #a2a2a2 !important; font-size: 18px !important}
.reading-time { font-weight: normal}
.sharing-icons { display: inline; float: right; margin-top: 11px}
.sharing-icons-full { display: block; margin: 20px auto 40px auto; text-align: center}
.sharing-icons a+a, .sharing-icons-full a+a { margin-left: 5px}
a.share-icon { display: inline-block; background-color: transparent; box-sizing: content-box; box-shadow: none; padding: 1px; line-height: normal; border-radius: 50%; border: 2px solid #a2a2a2; width: 28px !important; height: 28px !important; background-size: 144px 72px; background-repeat: no-repeat; background-position: center center; background-image: url("/images/sharing_icons_4-2x.svg")}
a.share-icon:hover {
background-color: #a2a2a2}
a.share-icon.twitter { background-position: -3px -3px}
a.share-icon.twitter:hover { background-color: #00aced; background-position: -3px -39px; border-color: #0075a1; border-color: #00aced}
a.share-icon.facebook { background-position: -39px -2px}
a.share-icon.facebook:hover { background-color: #3B5998; background-position: -39px -38px; border-color: #1e2d4d; border-color: #3B5998}
a.share-icon.googleplus { background-position: -75px -3px}
a.share-icon.googleplus:hover { background-color: #d34836; background-position: -75px -39px; border-color: #872e23; border-color: #d34836}
a.share-icon.email { background-position: -111px -3px}
a.share-icon.email:hover { background-color: #5e9eda; background-position: -111px -39px; border-color: #3a6287; border-color: #5e9eda}
a.share-icon.linkedin, a.share-icon.appnet, a.share-icon.amazon,a.share-icon.flattr, a.share-icon.dropbox, a.share-icon.github,
a.share-icon.flickr, a.share-icon.appstore, a.share-icon.rss, a.share-icon.youtube,a.share-icon.delicious { background-image: url("/images/sharing_icons_extras-2x.svg"); background-size: 216px 144px}
a.share-icon.linkedin { background-position: -2px -3px}
a.share-icon.linkedin:hover { background-color: #5080ba; background-position: -2px -75px; border-color: #35547a; border-color: #5080ba}
a.share-icon.appnet { background-position: -74px -4px}
a.share-icon.appnet:hover { background-color: #49484d; background-position: -74px -76px; border-color: #2a224d; border-color: #49484d}
a.share-icon.amazon { background-position: -110px -3px}
a.share-icon.amazon:hover { background-color: #e79e23; background-position: -110px -75px; border-color: #825a14; border-color: #e79e23}
a.share-icon.flattr { background-position: -146px -3px}
a.share-icon.flattr:hover { background-color: #7eb226; background-position: -146px -75px; border-color: #4a6916; border-color: #7eb226}
a.share-icon.dropbox { background-position: -182px -2px}
a.share-icon.dropbox:hover { background-color: #4f78e3; background-position: -182px -74px; border-color: #2e4785; border-color: #4f78e3}
a.share-icon.github { background-position: -2px -38px}
a.share-icon.github:hover { background-color: #86d1fc; background-position: -2px -110px; border-color: #50717d; border-color: #86d1fc}
a.share-icon.flickr { background-position: -37px -39px}
a.share-icon.flickr:hover { background-color: #ff0084; background-position: -37px -111px; border-color: #4058d9; border-color: #ff0084}
a.share-icon.appstore { background-position: -74px -40px}
a.share-icon.appstore:hover { background-color: #77a9e5; background-position: -74px -112px; border-color: #2f42a8; border-color: #77a9e5}
a.share-icon.rss { background-position: -110px -39px}
a.share-icon.rss:hover { background-color: #f60; background-position: -110px -111px; border-color: #874c1c; border-color: #f60}
a.share-icon.youtube { background-position: -146px -39px}
a.share-icon.youtube:hover { background-color: #bc272f; background-position: -146px -111px; border-color: #000000; border-color: #bc272f}
a.share-icon.delicious { background-position: -182px -38px}
a.share-icon.delicious:hover { background-color: #6793fc; background-position: -182px -110px; border-color: #666; border-color: #6793fc}
HTML5 data-* attributes are great
and you know ithttp://stats.buysellads.com/click.go?
z=1239385&b=4272441&g=&s=&sw=1680&sh=1050&br=safari,537.74,mac&r=0.6931359181180596&link=http://www.wix.com/eteamhtml/400?
utm_campaign=ma_bsalongtail&experiment_id=ma_marcofolio.net_cube_html5_green_468x60_400Like I said in my previous article, all information about HTML5 is way too big to put into one blog article. We first looked at what HTML5 microdata can do for us, and today we'll dive into another feature W3C added to their HTML specification. It's called custom data attributes (by developers mostly referenced as data-* attributes), and I'll explain what it is and what problems it fixes for us.
The data-* attributes are extremely useful, especially for JavaScript developers. W3C describes the use of these kind of attributes as: Embedding custom non visible data to your HTML. But why would you need it? Let's take a dive into this new HTML specification. Although this article has a strong focus on jQuery, I assume you understand it counts for any other library and (of course) JavaScript itself.
Uses of technologiesChris Coyier created this useful overview for the correct use of the several webdesign technologies:
Now let's focus on two techniques Chris points out here: HTML and JavaScriptappropriate use in mind, since it's very important to know the difference.
JavaScript pluginsJavaScript plugins are great. jQuery has loads of official jQuery plugins which extend the capabilities of the framework just that little bit further (I wrote some plugins for jQuery too). Since you want the plugin to be used by loads of people, you make it easy to use and as flexible as possible.Although jQuery allows options to be used to change the behaviour of the plugin, sometimes you need to put data inside the HTML for it to make it work. For example, take a look at this piece of code:
<img class="pic-0" /><img class="pic-1" /><img class="pic-2" />
for(var i = 0; i < $("img").length; i++) { $(".pic-" + i).doStuff(); // Do something }
I know this isn't the best example I came up with, but that isn't the goal of this article. The plugin loops through all the elements starting with the pic- class and does something with them (for example: Arrange them according to their index). But why it this o-so-very-wrong?The main problem here, is the mis-use of the class attribute; That should mainly be used as a reference for CSS. And the use of prefixes (in this case: pic-) is just extremely dirty. But let's take a look at another example for creating tooltips:
<p> This is the actual text <span>This is the tooltip</span></p>
$("p span").hide();$("p").hover(function() { $("span", this).show();});
So here we "hide" the information stored in the tooltip inside a span-element (hiding could be done with CSS too). When we hover the paragraph, the tooltip will show it's contents. But what's wrong with this solution?Once again, we mis-use something here. This time, it's the span-element that is out of place. We manually need to hide it and it doesn't "feel" right at that place. But how should we tackle these kind of problems, the right way?
The jQuery solutionFor these kind of problems, jQuery already has a pretty nifty solution. Since we don't want our HTML-elements or attributes to be mis-used, we can dynamically add data to the DOM using the .data() API. This allows jQuery developers to add the data they want to the HTML elements, without abusing the HTML itself. Let's take a look at how the two previous examples could be re-written using the .data() API.
<img /><img /><img />
var i = 0;$("img").each(function(){ $(this).data("iterator", i); // Store data i++;}); $("img").hover(function(){ alert($(this).data("iterator")); // Retrieve data});
Did you see that? We don't have any dirty class attribute mis-use anymore, since we can simply iterate over the HTML element and add the index dynamically (I know the method would be better in this case, but just for the sake of the example, I kept it simple). Looks like a very good solution for our problem we had before!But now for the tricky part: How would you re-write the tooltip example to use the API? You don't want to store the tooltip text inside the JavaScript file. If you do this, it would mean that you would update the JS file each time you want to add a new tooltip. Also, you would store your content inside JavaScript instead of the place where it belongs: The HTML. So, how should we fix this problem?
Bring in the data-*The custom data attributes give us a very clean solution for this problem. We can now store any data and add it to the HTML as an attribute, as long as it starts with take a look at how we could have re-written the two previous examples, but now using the
custom data attributes.
<img data-index="0" /><img data-index="1" /><img data-index="2" /> <p data-tooltip="This is the tooltip"> This is the actual text</p>
I know the first example looks very silly, but I'll come to that later. The second one, on the other hand, is pretty cool! We now have the appropriate place to store that kind of information. Another upside, is that it's hidden by default and we can easily retrieve it using JavaScript to display the tooltip. When using jQuery, you could simply retrieve the value using the .attr() method, like this:
var index = $("img").attr("data-index"); var tooltip = $("p").attr("data-tooltip");
Take note the .customdata() plugin is a lot more flexible for custom data attributes.But now back to the images. Although the data-index isn't that useful, we can make a lot more use of the custom data attributes. Another advantage is that we are not limited to one data attribute! We can add as many as you want, as long as they all have a unique name. Check out the following HTML:
<img alt="My alt text" data-longdescr="My long description" data-geo="Location I took the picture" data-cam="The type of camera I used" data-time="The time I took the picture" />
Did you see that? I'm suddenly capable of adding loads and loads of more data to single image. Imagine how you would write this when you couldn't use the custom data attributes? Logically, it probably wouldn't make as much sense as above. Now you can use
these attributes to display them using JavaScript. This is the kind of power you get when using custom data attributes.
http://www.marcofolio.net/webdesign/html5_microdata_what_is_it_and_why_should_you_care_.html