/* ============================================================================= HTML5 Boilerplate CSS: h5bp.com/css ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 2px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ===== Initializr Styles ===================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body{ font:16px/26px Helvetica, Helvetica Neue, Arial; } .wrapper{ width:90%; margin:0 5%; } /* =================== ALL: Orange Theme =================== */ #header-container{ border-bottom: 20px solid #e44d26; } #footer-container{ border-top: 20px solid #e44d26; } #main aside { border-top: 20px solid #e44d26; } #header-container, #footer-container, #main aside{ background:#f16529; } #title{ color:white; } ::-moz-selection { background: #f16529; color: #fff; text-shadow: none; } ::selection { background: #f16529; color: #fff; text-shadow: none; } /* ============== MOBILE: Menu-specific ============== */ header nav a{ display:inline-block; margin-bottom:10px; padding:15px 1%; width:98%; background:#e44d26; color:white; text-align:center; text-decoration:none; font-weight:bold; white-space:nowrap; } header nav ul li{ display:block; width:100%; } nav a:hover, nav a:visited{ color:white; } nav a:hover{ text-decoration:underline; } /* =================== ALL: Blue Theme =================== */ #header-container{ border-bottom: 20px solid #3F5765; } #footer-container{ border-top: 20px solid #3F5765; } #main aside { border-top: 20px solid #3F5765; } #header-container{ background:#BDD4DE; } #footer-container{ background:#BDD4DE; color:darkslategray; text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); /* To make the white text pop */ } #main aside{ color:white; background: #2B3A42; } #title, #subtitle{ color:#2B3A42; } ::-moz-selection { background: #f16529; color: #fff; text-shadow: none; } ::selection { background: #f16529; color: #fff; text-shadow: none; } header nav a{ background:#3F5765; } /* Theme from Kuler: http://kuler.adobe.com/#themeID/1945976 Lightblue: #BDD4DE Darkblue: #2B3A42 Medium blue-slate: #3F5765 Nearwhite: #EFEFEF Bright-orange: #FF530D */ /* ============== MOBILE: Main ============== */ #main{ padding:30px 0; } #main h1{ font-size:2em; } #main article h1{ margin-top:1em; } #main aside{ padding:0px 5% 10px; float:none; } blockquote{ background:#f9f9f9;border-left:1em solid #eee;margin:1.5em 1em;padding:.5em 1em;quotes:"\201C""\201D"; } blockquote:before{ color:#808080;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em; } blockquote :first-child{ display:inline; } blockquote :last-child{ margin-bottom:0; } small.de-em{ color:gray; } #footer-container footer{ padding:20px 0; } #title-and-logo-box{ display:inline-block; white-space:nowrap; } #title-and-logo-box a{ text-decoration:none; display:block; } #logo-box{ padding:.1em 0 .5em; display:inline-block; vertical-align: top; } #title{ display:inline-block; } /* =============== ALL: IE Fixes =============== */ .ie7 #title{ padding-top:20px; } /* ===== Primary Styles ======================================================== Author: Roy Ronalds ========================================================================== */ /* Address & Contact Info */ .vcard{ margin-bottom:1.5em; display:block; color:#333; background-color:white; border-radius:1em; padding:.5em .5em .5em 2em; } address .country-name{ display:none; } .vcard #contact-tel{ padding-left:2em; margin-top:1em; } #contact-email a{ line-height:20px; } figure .photo{ border-radius:50%; display:block; margin-right:4px; max-width:100%; max-height:260px; padding: 15px; background-color: white; box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); -moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); } aside figure figcaption{ text-align:center; } aside h3{ border-radius:.2em; padding:.3em; background-color:lightblue; color:#333; text-align:center; } aside .social + .social{ margin-top:1em; } /* Contact social media/developer links */ #other-sites-section:after{ content:"\2335"; margin-left:1em; } #other-sites-section:active:after{ text-shadow:0 0 2px white; } #other-sites-section.toggled:after{ content:"\2335"; } #contact-footer-box{ min-height:14em; } #contact-footer{ display:none; background-color:ghostwhite; color:#333; border:thick solid teal; padding:.1em .5em; } .no-js #contact-footer{ display:inherit; } #odesk-area-box{ display:block; height:55px; } #odesk-area-box .interior{ float:left; padding: 9px; } #odesk-area-box .interior img{ border:0; } #contact #contact-tel a, #contact #contact-email a, #fork-on-github a{ background-color:rgba(240, 240, 240, .7); padding:.1em; display:inline-block; border-radius:.2em; font-weight:bold; } #contact-tel{ margin-bottom:.5em; } /* Scale images down instead of blowing out the news section */ #news img{ max-width:100%; } /* Hide controls */ .iframe-controls-container, .tmblr-iframe--unified-controls{ display:none !important; } .tumblr_title, .tumblr_title a{ font-size: 2em; font-weight: bold; text-decoration:overline; } .tumblr_post{ padding-top:3em; border-bottom:medium dashed lightgreen; } #tumblr-widget{ background-color: rgba(255, 255, 255, 0.9); padding-top:.3em; } #tumblr-widget ol{ list-style-type:upper-roman; padding-left:.3em; } #tumblr-widget li.tumblr_post:before{ content:\x2605; color:lightgreen; } .tumblr_posts>:first-child{ margin-top:0; padding-top:.3em; } article header#intro h1{ line-height:.85; } article header h1, article h1{ margin-top:0; padding-top:0; margin-bottom:1em; text-shadow: 1px 1px 1px gray; } header .typewriter{ font-size:.8em; word-spacing:-.1em; } header .typewriter:before{ content:"\00a0"; display:block; margin:0; padding:0; } article header h2{ margin:.5em 0; } #available{ color:green; } #unavailable{ color:red; } /* Typography */ .typewriter{ font-family: 'Lucida Console', Monaco, monospace; } p.intro{ font-size:1.2em; } #portfolio h3{ font-size:1.5em; } /* font-face section, loaded first for speed reasons Generated by Font Squirrel (http://www.fontsquirrel.com) on %March %5, %2010 the font-family actually just declares the family name to be used elsewhere */ @font-face { font-family: 'AirstreamRegular'; src: url('/fonts/Airstream.eot'); src: local('Airstream'), local('Airstream'), url('/fonts/Airstream.woff') format('woff'), url('/fonts/Airstream.ttf') format('truetype'), url('/fonts/Airstream.svg#Airstream') format('svg'); } @font-face { font-family: 'Gentium Basic'; font-style: normal; font-weight: 400; src: local('Gentium Basic'), local('GentiumBasic'), url(//themes.googleusercontent.com/static/fonts/gentiumbasic/v5/KCktj43blvLkhOTolFn-MZ_RtrTXGeaL_Dia6_H9gNs.woff) format('woff'); } @font-face { font-family: 'Gentium Basic'; font-style: italic; font-weight: 400; src: local('Gentium Basic Italic'), local('GentiumBasic-Italic'), url(//themes.googleusercontent.com/static/fonts/gentiumbasic/v5/qoFz4NSMaYC2UmsMAG3lySC-qRU_6_vWulQf4LzJBHg.woff) format('woff'); } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: local('Ubuntu'), url(//themes.googleusercontent.com/static/fonts/ubuntu/v5/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff'); } @font-face { font-family: 'Ubuntu Condensed'; font-style: normal; font-weight: 400; src: local('Ubuntu Condensed'), local('UbuntuCondensed-Regular'), url(//themes.googleusercontent.com/static/fonts/ubuntucondensed/v4/DBCt-NXN57MTAFjitYxdrFzqCfRpIA3W6ypxnPISCPA.woff) format('woff'); } h1.airstream {font: 60px/68px 'AirstreamRegular', "Helvetica Neue", Arial, Helvetica, sans-serif;letter-spacing: 0;} h2.airstream, h2 .airstream {font: 30px/34px 'AirstreamRegular', "Helvetica Neue", Arial, Helvetica, sans-serif;letter-spacing: 0;} .airstream{font-family:'AirstreamRegular', 'Helvetica Neue', Arial, Helvetica, sans-serif;font-weight:normal;} .classy{font-family:'Gentium Basic', Georgia, serif;} .straightforward{font-family:'Ubuntu', sans-serif;font-weight:400;} h1#intense {font: 60px/68px Georgia, serif;color:rgba(0, 128, 255, 0.9);font-size:2.5em;} #title{font-family:'Ubuntu Condensed', sans-serif;} h4{font-family:'Ubuntu',sans-serif;font-weight:bold;} /* ============================================================================= Media Queries ========================================================================== */ @media only screen and (min-width: 480px) { /* ==================== INTERMEDIATE: Menu ==================== */ header nav a{ display:inline-block; width:96%; padding:25px 1%; } header nav li:first-child a{ margin-left:0; } header nav li:last-child a{ margin-right:0; } /* ======================== INTERMEDIATE: IE Fixes ======================== */ header nav ul li{ display:inline-block; } .oldie nav a{ margin:0 0.7%; } #title-and-logo-box{ width:48%; } } @media only screen and (min-width: 768px) { /* ==================== WIDE: CSS3 Effects ==================== */ header nav a{ margin-bottom:0; } #header-container, #main aside{ -webkit-box-shadow:0 5px 10px #aaa; -moz-box-shadow:0 5px 10px #aaa; box-shadow:0 5px 10px #aaa; } /* ============ WIDE: Menu ============ */ header nav{ display:inline-block; width:50%; vertical-align:bottom; } header nav li{ max-width:20%; } header nav li:first-child a{ border-top-left-radius:1em; } header nav li:last-child a{ border-top-right-radius:1em; } /* ============ WIDE: Main ============ */ #main article{ float:left; width:57%; } #main aside{ float:right; width:28%; } } @media only screen and (min-width: 1140px) { /* =============== Maximal Width =============== */ .wrapper{ width:1026px; /* 1140px - 10% for margins */ margin:0 auto; } } /* ============================================================================= Non-Semantic Helper Classes ========================================================================== */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ============================================================================= Print Styles ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { 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; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* Pretty Table Styling CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/ */ table { overflow:hidden; border:1px solid #d3d3d3; background:#fefefe; width:70%; margin:5% auto 0; -moz-border-radius:5px; /* FF1+ */ -webkit-border-radius:5px; /* Saf3-4 */ border-radius:5px; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } th, td {padding:9px 14px 9px; text-align:center; } th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;} td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;} tr.odd-row td {background:#f6f6f6;} td.first, th.first {text-align:left} td.last {border-right:none;} /* Background gradients are completely unnessary but a neat effect. */ td { background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); } tr.odd-row td { background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6)); } th { background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed); background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb)); } /* Originator wrote: I know this is annoying, but we need dditional styling so webkit will recognize rounded corners on background elements. Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it. */ tr:first-child th.first { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; /* Saf3-4 */ } tr:first-child th.last { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; /* Saf3-4 */ } tr:last-child td.first { -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; /* Saf3-4 */ } tr:last-child td.last { -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; /* Saf3-4 */ } .price,#rate-card b{ color:#336633; } p.accented{ font-family:'Gentium Basic', serif; background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; color:#c40; } .accented.fee.float-right{ border:thick solid dashed; float:right; font-weight:bold; text-transform:uppercase; } #emergency-services{ color:brown; } /* Widgets */ .text-centered{ text-align:center; } .centered{ text-align:center;margin-left:auto;margin-right:auto; } .glass-box{ display:block; margin:1em; } /* Fancy-number-list */ .fancy-list { min-width:320px; padding:1em; } .fancy-list ol { font-family:Georgia, Times, serif; font-size:1.3em; } .fancy-list ol li { margin-bottom:0 } .fancy-list ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:1.1em; border-left: 1px solid #999; } .fancy-list ol li p em { display:block; } /* Main page sizing */ .description{ text-align:left;font-size:1.2em; } #skills{ box-sizing:border-box; } .skill-text{ font-family:'Ubuntu Condensed',sans-serif; box-sizing:border-box; line-height:2em; display:inline-block; width: 30%; text-align:right; padding:0 1em; font-size:smaller; } .skill-bar{ font-family:'Ubuntu Condensed', sans-serif;font-weight:400; box-sizing:border-box; display:inline-block; line-height:2em; background-color:black; color:white; padding:0 1em; } .skill-bar:hover{ overflow:visible; text-shadow:3px 1px 3px #222; } .skill-bar.first{ width:70%; background-color:rgb(10, 10, 10); } .skill-bar.second{ width:50%; margin-right:10%; background-color:rgb(20, 20, 20); } .skill-bar.middle{ width:40%; margin-right:20%; background-color:rgb(40, 40, 40); } .skill-bar.next-to-last{ width:30%; margin-right:30%; background-color:rgb(70, 70, 70); } .skill-bar.last{ width:20%; margin-right:40%; background-color:rgb(100, 100, 100); } #skills br{ clear:both; } .projects .flagship{ background-color:brown;color:white;display:inline-block;padding:.5em; }