/* RESET ---------------------------------------------------------------------- */ 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,font,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0} /* 960 ---------------------------------------------------------------------- */ .container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12,.push_13,.pull_13,.push_14,.pull_14,.push_15,.pull_15{position:relative}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1} /* 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.4 2009-07-27 | 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 { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } 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 { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; 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 { /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ color: #444; /* set your base font here, to apply evenly */ /* font-family: Georgia, serif; */ } /* Headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */ h1,h2,h3,h4,h5,h6 { font-weight: bold; } /* 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; } ul, ol { margin-left: 1.8em; } ol { list-style-type: decimal; } /* Remove margins for navigation lists */ nav ul, nav li { margin: 0; } small { font-size: 85%; } strong, th { font-weight: bold; } td, td img { vertical-align: top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ .ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */ /* 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], 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: #FF5E99; color:#fff; text-shadow: none; } ::selection { background:#FF5E99; 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 www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* 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: */ /* 960 Grid System ~ Text CSS. Learn more ~ http://960.gs/ Licensed under GPL and MIT. */ /* `Basic HTML ----------------------------------------------------------------------------------------------------*/ body { font: .9em 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; } a:focus { outline: 1px dotted invert; } hr { margin: 17px 0 18px; height: 0; clear: both; border: solid #ddd; border-width: 1px 0 0; border-top: 1px solid #ddd; border-bottom: 1px solid #fff; } /* `Headings ----------------------------------------------------------------------------------------------------*/ h2,h3 {text-transform:uppercase; font-weight:bold; margin-bottom: 10px;} h1 { font-size: 1.5em; } h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h4 { font-size: 1em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } /* `Spacing ----------------------------------------------------------------------------------------------------*/ ul { list-style: none; } p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 20px; } #section h3 {border-bottom: 2px dotted #d4d4d4;} /* layout -------------------------------------------------------------*/ body {margin-top: 5px; background: #FFF url(/gfx/sideimg.jpg) top center repeat-y} .speaking_dates {float: right; clear: right;} .highlight a {background-color: #777DE8; color: white; text-transform:uppercase; padding:3px 5px 3px 5px; font-size:90%; margin: 0 5px 0 0;} #cse-search-box {float: right;} #twitter {text-align:right; margin:0 0 10px 0; width: 300px; position: absolute; top: 10px; right: 5px;} #twitter li{color: white;} /* images and video ---------------------------------------------------------------------- */ h1#logo {height: 115px; width: 980; background: url(/gfx/darke_logo.png) no-repeat 0 0; text-indent: -9999px; margin: 0; } h1#logo a {text-indent: -5000px; } #help {float: right; position: absolute; top: 0; right: 0;} .grid_1 img {width: 60px;} .grid_2 img {width: 140px;} .grid_3 img {width: 220px;} .grid_4 img {width: 300px;} .grid_5 img {width: 380px;} .grid_6 img {width: 460px;} #half_wrap {width:50%; float: left; margin: 0 10px 10px 0;} #half {width:50%;} /* blockquote ---------------------------------------------------------------------- */ blockquote {font-style: italic;font-size: 1.3em; background: #ececec; border-bottom: 1px dotted #d4d4d4; border-top: 1px dotted #d4d4d4; padding: 5px; margin-bottom: 10px;} blockquote p { font-size: 1em;} cite {text-transform:uppercase; font-weight: bold; } /* navigation ---------------------------------------------------------------------- */ #nav { background: black url(/gfx/navigation_bottom.jpg) no-repeat 0 100%; height: 40px; font-size: 13px; line-height: 13px; font-family: Helvetica, Arial; text-transform: uppercase; text-align: center; margin-top: 5px; margin-bottom: 5px; } #nav li { display: inline; } #nav li a { color: white; float: left; padding: 10px 0 17px 0; } #nav li a:hover, #nav li.on a { color: white; } #nav a.home { width: 70px; } #nav a.pole { width: 70px; } #nav a.coaching { width: 90px; } #nav a.blog { width: 50px; } #nav a.bio { width: 50px; } #nav a.speaking { width: 93px; } #nav a.if_you_fall { width: 80px; } #nav a.adaptive_sport { width: 100px; } #nav a.contact { width: 98px; } #nav li a.home:hover, #nav li.on a.home { background: url(/gfx/over_nav.png) no-repeat 50% 100%; } #nav li a.blog:hover, #nav li.on a.blog { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.coaching:hover, #nav li.on a.coaching { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.pole:hover, #nav li.on a.pole { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.if_you_fall:hover, #nav li.on a.if_you_fall { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.bio:hover, #nav li.on a.bio { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.speaking:hover, #nav li.on a.speaking { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.adaptive_sport:hover, #nav li.on a.adaptive_sport { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.stories:hover, #nav li.on a.stories { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.gear:hover, #nav li.on a.gear { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li a.technique:hover, #nav li.on a.technique { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } #nav li contact:hover, #nav li.on a.contact { background: url(/gfx/bio_nav.png) no-repeat 50% 100%; } /* article comments -----------------------------------------------------------------------------*/ #comments h6, #comment-form h6 { font-family:"lucida grande", lucida, arial, sans-serif; text-transform:uppercase; border-bottom:1px solid #aaa; font-size:11px; font-weight:normal; letter-spacing:1px; padding-bottom:5px; margin:25px 0 0 0; } #comments dl { padding:0; margin:0; } #comments dl dt { font-family:"lucida grande", lucida, arial, sans-serif; font-size:10px; text-transform:uppercase; } #comments .comment-date {font-family: georgia, times, "times new roman", serif; font-size:11px; } #comments .posted-by { text-transform:none; } #comments dl dd { margin:15px 0 0 0; font-size: 100%; line-height:18px; } #comments .comment-content { margin-bottom:15px; width:70%; padding:15px; } #comments .even { background-color:#eee; } fieldset#comment-form-field { background-color:#eee; border:1px solid #ccc; margin:25px 0 25px 0; padding:10px 0 10px 25px; } fieldset#comment-form-field label { font-size:12px; font-family: georgia, times, "times new roman", serif; color:#111; } form#comment-form-form { float:left; width:50%; clear:left; } #disclaimer { float:right; width:35%; clear:left; margin:30px 35px 0 0; } /* prev-next ---------------------------------------------------------------------- */ /* flickr ---------------------------------------------------------------------- */ #flickr { padding:14px 0 0 0px; padding:0; } #flickr a img {float:left; margin:0 1px 1px 0;} /* footer ---------------------------------------------------------------------- */ #footer {padding-top: 10px; border-top:1px dotted #777DE8;} #akreative {float: right;} /* * Media queries for responsive design */ @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */} @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */} /* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) { /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you j.mp/textsizeadjust html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ 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; } }