/** HTML5 Reset http://host.sonspring.com/formalize/assets/stylesheets/html.css **/
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0; margin:0; padding:0; font-size:100%} /** why not border:none **/
article,aside,figure,figcaption,footer,header,hgroup,nav,section{display:block}
figure{}
figcaption{margin-left:auto; margin-right:auto; margin-bottom:10px; text-align:center; font-weight:700; font-size:24px}
html{overflow-y:scroll} /** prevent firefox scrollbar jump. firefox hides vertical scrollbar if content < visibile window by default **/
html,body{height:100%}
body{text-align:center; background-color:#fff; color:#000; -webkit-font-smoothing:antialiased} 
body:before{content:""; position:fixed; top:-15px; left:0; width:100%; height:15px; z-index:100; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,.9); -moz-box-shadow:0px 0px 10px rgba(0,0,0,.9); box-shadow:0px 0px 10px rgba(0,0,0,.9)}
a,h1 a{color:#000}
a img{display:block; border:none}

figure img,a.wp-flickr-title img{-moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000}
abbr,acronym{border:none; cursor:help; text-transform:uppercase; letter-spacing:0.1em; font-variant:small-caps}
b,strong{font-weight:700} /* b,strong{font-weight:bold} */
img{font-size:0}
table{border-collapse:collapse; border-spacing:0; padding-top:0.5em; padding-bottom:0.5em; margin:0.8em auto; -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; color:#000; width:80%}
tbody{}
th{font-weight:700; text-align:center; vertical-align:top; font-size:20px; padding-top:0.5em; padding-bottom:0.5em}
td,caption{font-weight:normal; vertical-align:top; text-align:left; font-size:18px}
tr{}
td{padding:4px}
.content td p{margin:5px auto; width:80%; font-size:22px; line-height:22px; padding:5px}
.content td + code{font-size:22px; line-height:22px; padding:5px}
.content td p code{padding:0}
td img{vertical-align:top} 
small{font-size:85%}
sub,sup{font-size:75%; line-height:0; position:relative} /*  gist.github.com/413930 */
sup{top:-0.5em}
sub{bottom:-0.25em}
fieldset{border:none}
address,caption,cite,dfn{font-style:normal; font-weight:normal}
var,key{}
del{text-decoration:line-through}
dfn[title]{border-bottom:1px dotted #000; cursor:help}
em,i{}
blockquote{margin:1em auto; width:90%; padding-top:2em; padding-bottom:2em; background-color:#fff; -webkit-box-shadow:0 0 4px #000; -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000}
blockquote cite{display:block; margin-right:1em}
blockquote cite a{display:block; text-align:right}
.content blockquote p{margin:1em; font-weight:700; padding:1em}
blockquote h3{text-align:left; text-indent:1em}
.content blockquote h3 + p{margin-top:0}
q{}
q:before,q:after{content:""}
p{color:#000}
ins{background-color:#fcd700; color:#000; text-decoration:none}
mark{background-color:#fcd700; color:#000; font-style:italic; font-weight:700}

header[role="banner"] { /* page header styles */ }
div[role="main"] { /* page div marked main role styles */ }
footer[role="contentinfo"] { /* page footer styles */ } 

.content{margin-right:auto; margin-left:auto; text-align:center; width:90%; background-color:#fff}
pre{white-space:pre; white-space:pre-wrap; white-space:pre-line; white-space:-pre-wrap; white-space:-o-pre-wrap; white-space:-moz-pre-wrap; white-space:-hp-pre-wrap; word-wrap:break-word; padding:0 5px 10px 5px; text-align:left; background-color:#ffff80; outline:1px solid #e6db55}
pre code{font-size:17px}
p code{background-color:#ffff80}
code{font-family:monospace}
ol,ul{list-style:none}
ol{text-align:left}

h1{margin-top:1.5em; margin-bottom:1.5em; font-size:30px; line-height:30px}
h2{font-size:24px; line-height:36px}
h3{font-size:22px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
h2.pointdos{}
h2.browserux{}

article + article{margin-top:1em; margin-bottom:1.5em}
article ul{text-align:left; padding-left:1em; padding-right:1em; margin:0.5em auto; width:90%}
article ul li{text-align:left; font-size:16px}
article + p{font-size:80px}

.sidebarpages,.sidebararchives,.sidebarmeta,.sidebarcategories{display:none}
.sidebarsubscribe{}
.sidebarnav h2{}
.sidebarnav li{}
.sidebarnav ul{}
.sidebarnav ul li{}
.sidebarnav ul li a{}
.sidebarnav ul li abbr{}

.pagenavigation{}


.nc{width:90%; margin-right:auto; margin-left:auto; color:#000; position:relative; background-color:#c0c0c0; z-index:30}
.seethru{position:absolute; top:0; left:0; width:100%; height:100%; background-color:#c0c0c0; opacity:0.5; z-index:10}
.block,article,.sidebar,.singlepostcommentbox{width:90%; margin-right:auto; margin-left:auto; background-color:#fff; color:#000; padding-top:1em; padding-bottom:2em; z-index:20}

.block p,.content p{text-align:left; font-size:22px; line-height:33px; color:#000; margin:1em; padding:1em}
.block p + p,.content p + p{margin-top:0; padding-top:0}






img.imgie7{-ms-interpolation-mode:bicubic} /* scale images in IE7 more attractively */
 /** add to ie6 style sheet **/
.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))} /* prevent BG image flicker upon hover */

.clearright{float:none; clear:right}
.clearleft{float:none; clear:left}
.clearfix:before,.clearfix:after{ content:"\020"; display:block; height:0; overflow:hidden}
.clearfix:after{clear:both}  
.clearfix{zoom:1}


.dropshadow{-webkit-box-shadow:0 0 4px #000; -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000}

.demobox{border:1px solid #000}
.demobox img{float:left; margin:10px}
.demobox p{float:left; width:50%}


object,embed{max-width:100%} /** rwd **/
/** add video here too! **/
.video embed,.video object,.video iframe{width:100%; height:auto} /** rwd **/
hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0}
::selection{background:#c3effd; color:#000} /** safari and opera **/
::-moz-selection{background:#c3effd; color:#000}



.formcomment{margin-left:auto; margin-right:auto; width:60%; /** background-color:#faf93c **/}
.formcomment fieldset{width:50%; margin-left:auto; margin-right:auto}
.formcomment label,.formcomment input,.formcomment textarea{display:block; text-align:left; background-color:#fff; font-size:18px}
.formcomment input,.formcomment textarea{width:100%}
.formcomment label{text-indent:0.5em; line-height:1.5; font-variant:small-caps; letter-spacing:-1px; font-weight:700}
.formcomment label input{padding:0.5em}
.reqlabel{float:right; margin-right:0.5em; font-size:18px; display:block}
.formcomment input#submit{width:160px; margin:0.5em auto}


.searchforms{float:left; width:600px; margin-top:-100%; outline:1px solid #000; display:none}
/** formalize css http://host.sonspring.com/formalize/assets/stylesheets/formalize.css **/
.input_tiny{width:50px}
.input_small{width:100px}
.input_medium{width:150px}
.input_large{width:200px}
.input_xlarge{width:250px}
.input_xxlarge{width:300px}
.input_full{width:100%}
/* Added via JS to <textarea> and class="input_full". Applies to IE6,IE7. Other browsers don't need it. */
.input_full_wrap{display:block; padding-right:8px}
::-moz-focus-inner{border:0}
input[type=search]::-webkit-search-decoration{display:none}
input,button,select,textarea{margin:0; vertical-align:middle}
button,input[type=reset],input[type=submit],input[type=button]{
-webkit-appearance:none; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;
background:#ddd url("http://bowdenweb.com/krs1/formorial/formalize-styles/button.png") repeat-x; background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#ddd)); background:-moz-linear-gradient(top center,#fff 0%,#ddd 100%);
border:1px solid; border-color:#ddd #bbb #999; cursor:pointer; color:#333; font:700 12px/1.2 Arial,sans-serif; outline:0; overflow:visible; padding:5px 15px 6px; text-shadow:#fff 0 1px 1px; width:auto;
*padding-bottom:3px /* IE7 */ }
button[disabled],input[type=reset][disabled],input[type=submit][disabled],input[type=button][disabled]{color:#888}
textarea,select,input[type=date],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{-webkit-appearance:none; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background-color:#fff; border:1px solid; border-color:#848484 #c1c1c1 #e1e1e1; color:#000; outline:0; padding:2px 3px; font-size:13px; font-family:Arial,sans-serif; height:1.8em;
/* IE7 */ *padding-top:1px; *padding-bottom:1px; *height:auto}
input.placeholder_text,textarea.placeholder_text{color:#888} /* Separate rule for Firefox. Cannot stack with WebKit's. */
::-webkit-input-placeholder{color:#888}
textarea[disabled],select[disabled],input[type=date][disabled],input[type=datetime][disabled],input[type=datetime-local][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled]{
background-color:#eee; color:#888}
button:focus,button:active,input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active{-moz-box-shadow:#06f 0 0 7px; -webkit-box-shadow:#06f 0 0 7px; box-shadow:#06f 0 0 7px; /* for Opera */ z-index:1}
.is_webkit select{background-image:url("http://bowdenweb.com/krs1/formorial/formalize-styles/select_arrow.gif"); background-repeat:no-repeat; background-position:right center; padding-right:20px} /* Tweaks for Safari + Chrome. */
textarea,select[multiple]{height:auto}
select[multiple],.is_webkit select[multiple]{background-image:none; padding:0}
textarea{overflow:auto; resize:vertical; width:100%}
optgroup{color:#000; font-style:normal; font-weight:400}

.ie6_button,* html button{background:#ddd url("http://bowdenweb.com/krs1/formorial/formalize-styles/button.png") repeat-x; border:1px solid; border-color:#ddd #bbb #999; cursor:pointer; color:#333; font:700 12px/1.2 Arial,sans-serif; padding:5px 15px 3px; overflow:visible; width:auto} /** ie6 **/
.ie6_input,* html textarea,* html select{background:#fff; border:1px solid; border-color:#848484 #c1c1c1 #e1e1e1; color:#000; padding:1px 3px; font-size:13px; font-family:Arial,sans-serif; vertical-align:top} /** ie6 **/
.placeholder_text,.ie6_input_disabled,.ie6_button_disabled{color:#888}/** ie6 **/
.ie6_input_disabled{background:#eee} /** ie6 **/

legend{display:none} /** fix this horrible fucking shitty excuse for a fix **/
label{display:block; text-align:left}
label input,label textarea{display:block}
.imgdiv,.idiv,.imgheader{margin-left:auto; margin-right:auto; text-align:center; position:relative} /** ?? -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000} **/
.promotemdndocs{display:block; height:118px; background-image:url("http://bowdenweb.com/i/social/tumblr/promote-mdn-header-03.png"); background-position:50% -118px; background-repeat:no-repeat}
.promotemdndocs:hover{background-position:50% 0}
.mariones{background-image:url("http://bowdenweb.com/wp/i/mario-transition-demo.png"); background-position:50% 0; background-repeat:no-repeat; background-color:#679ef6; width:100%; height:200px; -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000}
.imgdivuniversalsubtitle{width:268px; height:45px}
.imgdiv img{position:absolute; top:0}
img.universalsubtitle{left:0; clip:rect(0 268px 45px 0)}
img.universalsubtitle:hover{clip:rect(64px 268px 109px 0); top:-69px}


.imgw600{width:600px}
time{}
.browsercompatibility{text-align:left; text-indent:5px}
.browsercompatibility th{font-weight:700; color:#000; background-color:#c0c0c0; border:1px solid #333; line-height:1.5; font-size:150%}
.browsercompatibility td{font-size:110%}

.trident{}
.gecko{}
.webkit{}
.safari{}
.ie{}
.firefox{}
.opera{}
.chrome{}
.ie6{}
.ie7{}
.ie8{}
.ie9{}
.firefox3-6{}
.firefox4{}
.opera10-6{}
.safari3{}

.hcard{}


body:nth-of-type(1) .icon{list-style-type:none; margin-bottom:5px; padding-left:25px; position:relative}
body:nth-of-type(1) .icon:before{border:10px solid #000; border-radius:10px;  -moz-border-radius:10px; -webkit-border-radius:10px; content:""; left:0; position:absolute}
body:nth-of-type(1) .icon:after {color:#fff; font-size:16px; left:0; position: absolute; text-align: center; width:20px}
body:nth-of-type(1) .icon-checkmark:after{content:"✓"}


code.vcss:before{content:"\007B"}
code.vcss:after{content:"\007D"}
code.vcssp:before{content:"\003A"} /** single notation css3 pseudo-classes **/
code.vcsspp:before{content:"\003A\003A"} /** double notation css3 pseudo-selectors **/
code.vxhtml:before{content:"\003C"}
code.vxhtml:after{content:"\003E"}
code.vxhtmlatt:after{content:"\003D\0022\0022"}
code.vxhtmlattval{} /** attribute value filled in. what should we do here home skillet? **/
code.pipe:before{content:"\007C"}
code.at-sign:before{content:"\0040"}
code.vphp:before{content:"\003C\003F"}
code.vphp:after{content:"\003F\003C"}

strong.vhxtml{}
code.vhtml5{}
code.vxhtml2{}
code.vxhtml1{}
code.vhtml4{}

strong.vcss{}
b.vcss{}
b.vjs{}
strong.vjs{}
code.vjs{}
/* lib/framework stylee????  code.vjquery{} code.vdojo{} code.vprototype{} code.vsizzle{} **/

code.vjson{}
strong.vjson{}
b.vjson{}

code.vajax{}
strong.vajax{}
b.vajax{}
code.vajax2{}
strong.vajax2{}
b.vajax2{}
code.vascii{text-transform:capitalize; white-space:nowrap}
code.vascii:before{content:"&#38;&#35;"}
code.vascii:after{content:"&#59;"}

code.vunicode{text-transform:capitalize; white-space:nowrap; font-family:"Arial Unicode MS", "Microsoft Sans Serif", "Free Sans", "Gentium Plus", "Gentium Basic", "Gentium", "GentiumAlt", "DejaVu Sans", "DejaVu Serif", "Free Serif", "TITUS Cyberbit Basic", "Bitstream Cyberbit", "Bitstream CyberBase", "Doulos SIL", "Code2000", "Code2001"; font-size-adjust:0.54}
code.vunicode:before{content:"u&#43;"}

.noholla{text-transform:none; font-variant:normal}
.mildholla{text-transform:none}

/* latin */
code.ipa{font-family:"Gentium Plus", Gentium, GentiumAlt, "Charis SIL", "Doulos SIL", "DejaVu Sans", Code2000, "TITUS Cyberbit Basic", "Arial Unicode MS", "Lucida Sans Unicode", "Chrysanthi Unicode"}
/* unicode */
code.unicode{font-family:"Arial Unicode MS", "Microsoft Sans Serif", "Free Sans", "Gentium Plus", "Gentium Basic", "Gentium", "GentiumAlt", "DejaVu Sans", "DejaVu Serif", "Free Serif", "TITUS Cyberbit Basic", "Bitstream Cyberbit", "Bitstream CyberBase", "Doulos SIL", "Code2000", "Code2001"; font-size-adjust:0.54}
/* greek */
code.polytonic{font-family:"Athena Unicode", "Gentium Plus", Gentium, "Palatino Linotype", "Arial Unicode MS", "Lucida Sans Unicode", "Lucida Grande", Code2000}


/** **/
.jsfiddle{background-image:url("http://bowdenweb.com/i/cons/social/jsfiddle-32-sprite-04.png"); background-position:0 0; background-repeat:no-repeat; text-indent:30px; height:24px; display:block; line-height:24px}
.jsfiddle:visited{background-position:0 -50px} 
.jsfiddle:hover,.jsfiddle:active,.jsfiddle:focus{background-position:0 -25px} 

.seoispretty{text-indent:-9999px; display:block}

.humanstxt{background-image:url("http://bowdenweb.com/wp/i/humans.text-we-are-people-not-machines-logo-sprite.png"); background-position:50% -56px; background-repeat:no-repeat; height:55px}
.humanstxt:hover{background-position:50% 0}
.humanstxtlogo{line-height:15px; display:block; font-size:15px; background-image:url("http://bowdenweb.com/wp/i/humans.txt-sprite.png"); background-position:0 0; background-repeat:no-repeat; height:15px; text-indent:90px}
.humanstxtlogo:hover{background-position:0 -17px}

.badges{clear:left; float:none; margin-top:1em; text-align:center; width:100%}
.badges li{float:left; display:inline}
.badges .liners{display:block}
.badges a{float:left; display:block; text-indent:-9999px; margin-right:5px; color:#000; height:64px; background-repeat:no-repeat}
.fwp{background-image:url("http://bowdenweb.com/wp/i/cc-wordpress-logo-60-sprite.png"); background-position:100% 0}
.fmt{background-image:url("http://bowdenweb.com/wp/i/media-temple-sprite.png"); background-position:100% 0}
.fwtfpl{background-image:url("http://bowdenweb.com/a/i/wp/wtfpl-03.png"); background-position:0 0}
.fwtfpl:hover{background-position:0 -40px}
.fhtml5{background-image:url("http://dev.bowdenweb.com/a/i/html5/html5-logo-01-64.png"); background-position:0 0; width:64px}
.fcors{background-image:url("http://bowdenweb.com/wp/i/cors/cors-05.png"); background-position:0 0; width:75px; height:40px}
.flovevalidator{background-image:url("http://bowdenweb.com/wp/i/i-love-w3c-validator.png"); background-position:0 0; width:101px}
  .humanstext{width:200px; background-image:url("http://bowdenweb.com/wp/i/humans.text-we-are-people-not-machines-logo-sprite.png"); background-position:0 -56px}
  .humanstext:hover{background-position:0 0}
  .promotemdn-html,.promotemdn-css,.promotemdn-js,.promotemdn-tb,.promotemdn-docs{-moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000}
.promotemdn-html,.promotemdn-css,.promotemdn-js,.promotemdn-tb{background-position:0 -240px; width:120px; height:240px}
.promotemdn-html{background-image:url("http://bowdenweb.com/i/social/tumblr/promote-mdn-developer-powered-documents-html-sprite.png")}
.promotemdn-js{background-image:url("http://bowdenweb.com/i/social/tumblr/promote-mdn-better-documents-js-sprite.png")}
.promotemdn-css{background-image:url("http://bowdenweb.com/i/social/tumblr/promote-mdn-documents-for-developers-by-developers-css-sprite.png")}
.promotemdn-tb{background-image:url("http://bowdenweb.com/i/social/tumblr/promote-mdn-your-web-developer-toolbox-sprite.png")}
.promotemdn-html:hover,.promotemdn-css:hover,.promotemdn-js:hover,.promotemdn-tb:hover{background-position:0 0}
.promotemdn-docs{width:347px; height:118px; background-image:url("http://bowdenweb.com/i/social/tumblr/promote-mdn-header-03.png"); background-position:0 -118px}
.promotemdn-docs:hover{background-position:0 0}

, 600, 768, 1024, 1200. - @beep **/
@media all and (max-width:600px) { }
@media all and (min-width:600px) { }
@media print{}

/* Consider this:www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width:480px){} /*** or ***/ @media screen and (max-width:480px){}
/** whichever we go with, add webkit-text-size-adjust: none;   targeting iPhone in landscape mode  **/
@media all and (orientation:portrait){}
@media all and (orientation:landscape){}