/* HTML5 ✰ Boilerplate style.css contains a reset, font normalization and some base styles. credit is left where credit is due. much inspiration was taken from these projects: yui.yahooapis.com/2.8.1/build/base/base.css camendesign.com/design/ praegnanz.de/weblog/htmlcssjs-kickstart */ /* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font:inherit;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} nav ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} a{background:transparent;font-size:100%;margin:0;padding:0;vertical-align:baseline} ins{background-color:#ff9;color:#000;text-decoration:none} mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700} del{text-decoration:line-through} abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help} table{border-collapse:collapse;border-spacing:0} hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0} input,select{vertical-align:middle} /* END RESET CSS */ /* fonts.css from the YUI Library: developer.yahoo.com/yui/ refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages there are three custom edits: * remove arial, helvetica from explicit font stack * we normalize monospace styles ourselves * table font-size is reset in the HTML5 reset above so there is no need to repeat */ body{font:13px/1.231 sans-serif;*font-size:small} /* hack retained to preserve specificity */ select,input,textarea,button{font:99% sans-serif} /* normalize monospace sizing * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre,code,kbd,samp{font-family:monospace, sans-serif} /* * minimal base styles */ body,select,input,textarea{color:#444;font-family:'Lato', arial, serif} h1,h2,h3,h4,h5,h6{font-family:'Crushed', arial, serif;font-weight:700} /* always force a scrollbar in non-IE: */ html{overflow-y:scroll} /* accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover,a:active{outline:none} a,a:active,a:visited{color:#607890} a:hover{color:#036;background:#e6e6e6} ol,.sections ul,#socially ul{list-style-type:none} /* remove margins for navigation lists */ nav ul,nav li{margin:0;display:inline} small{font-size:85%} strong,th{font-weight:700} td{vertical-align:top} /* set sub, sup without affecting line-height: gist.github.com/413930*/ sub,sup{font-size:75%;line-height:0;position:relative} sup{top:-0.5em} sub{bottom:-0.25em} pre {white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word;padding:15px} textarea{overflow:auto} .ie6 legend,.ie7 legend{margin-left:-7px} /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"]{vertical-align:text-bottom} input[type="checkbox"]{vertical-align: bottom} .ie7 input[type="checkbox"]{vertical-align: baseline} .ie6 input{vertical-align:text-bottom} /* hand cursor on clickable input elements */ label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer} /* webkit browsers add a 2px margin outside the chrome of form elements */ button,input,select,textarea{margin:0} /* colors for form validity */ input:valid,textarea:valid{} input:invalid, textarea:invalid{border-radius:1px;-moz-box-shadow: 0px 0px 5px red;-webkit-box-shadow: 0px 0px 5px red;box-shadow: 0px 0px 5px red} .no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd} /* These selection declarations have to be separate. No text-shadow: twitter.com/miketaylr/status/12228805301 Also: hot pink. */ ::-moz-selection{background:#000;color:#fff;text-shadow:none} ::selection { background:#000;color:#fff;text-shadow:none} /* j.mp/webkit-tap-highlight-color */ a:link{-webkit-tap-highlight-color:#FF5E99;} /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button{ width:auto;overflow:visible} /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img{-ms-interpolation-mode:bicubic} /*Non-semantic helper classes*/ /* for image replacement */ .ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr} /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden{display:none;visibility:hidden} /* Hide only visually, but have it available for screenreaders: by Jon Neal www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden{border:0 !important;clip:rect(0 0 0 0);height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important} /* Hide visually and from screenreaders, but maintain layout */ .invisible{visibility:hidden} /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ .clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden} .clearfix:after{clear:both} /* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix {zoom:1} /* Primary Styles - Author: Adam Roberts*/ h1{font-size:40px;text-align:center} h2{font-size:30px;text-align:center} nav{margin:15px 0;text-align:center} nav ul{margin:0 auto} nav a{border-bottom:2px solid #333;font-size:20px;margin:0 15px;text-decoration:none} nav a:hover{border-bottom:2px solid #555} .sections,.tweet{margin:20px auto;width:730px} .sections header{font:700 190% 'Crushed', arial, serif} .subtitle{font-size:20px} .bigger{font-size:200% !important;font-weight:500 !important} header span{font:60% 'Lato', arial, serif !important;display:block;clear:left} header span a{text-decoration:none !important} .sections article,#backtotop,.tweet .tweet_list li,.query .tweet_list li, #socially{font-size:125%;border:1px solid #CCC;-webkit-border-radius: 20px; -khtml-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow:inset 5px 5px 20px #CCC;-moz-box-shadow: inset 5px 5px 20px #CCC;box-shadow:inset 5px 5px 20px #CCC;padding:15px 20px 20px;margin:10px 0 20px;behavior:url(PIE.htc)} .sections ol footer,.sections ul footer{font-size:80%;opacity:0.7px} #backtotop{position:fixed;right:10px;top:10px} #socially{position:fixed;left:10px;bottom:10px} .ajaxd h2{font-size:37px} .ajaxd h3{font-size:27px;text-align:center} .ajaxd{font-size:150%} .ajaxd li{margin:5px 25px} .ajaxd li li{margin:5px 10px 5px 50px;list-style-type:disc} article p,.ajaxd p{margin:10px 0 5px} /*Twitter*/ .tweet{margin:10px 0 20px} .tweet,.query{font-size:100%} .tweet .tweet_list,.query .tweet_list{} .tweet .tweet_list .awesome,.tweet .tweet_list .epic,.query .tweet_list .awesome,.query .tweet_list .epic{text-transform:uppercase} .tweet .tweet_list li,.query .tweet_list li{overflow-x:hidden;overflow-y:auto;padding:5px;margin:10px 0} .tweet .tweet_list .tweet_avatar,.query .tweet_list .tweet_avatar{float:left;margin:7px} .tweet .tweet_list .tweet_avatar img,.query .tweet_list .tweet_avatar img{vertical-align:middle} /* Last.fm */ #last_fm{ margin: 5px 0; width: 324px; height: 200px; border: 1px solid #CCC; -webkit-border-radius: 20px; -khtml-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 5px 5px 20px #CCC; -moz-box-shadow: inset 5px 5px 20px #CCC; box-shadow: inset 5px 5px 20px #CCC; padding: 15px 20px 20px; margin: 10px 0 20px; } #last_fm img{ position: relative; left: 1px; } /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } }