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; }

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 */

body { font:100%/1.5 sans-serif; *font-size:normal; }

select, input, textarea, button { font:99% sans-serif; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }

/*
 * minimal base styles
 */

body, select, input, textarea {
  color: #444;
}

h1,h2,h3,h4,h5,h6 { font-weight: bold; }

html { overflow-y: scroll; }

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; }

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;

  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

textarea { overflow: auto; }

.ie6 legend, .ie7 legend { margin-left: -7px; }

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; }

label, input[type=button], input[type=submit], button { cursor: pointer; }

button, input, select, textarea { margin: 0; }

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; }


::-moz-selection{ background: #a5e3ff; color:#161a1b; text-shadow: none; }
::selection { background:#a5e3ff; color: #161a1b; text-shadow: none; }

a:link { -webkit-tap-highlight-color: #37a7da; }

button {  width: auto; overflow: visible; }

a, :focus {
   outline: none;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

.ie7 img { -ms-interpolation-mode: bicubic; }

/*
 * Non-semantic helper classes
 */

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

.hidden { display: none; visibility: hidden; }

.visuallyhidden { position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;
}

.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

 /* Primary Styles
    Author: Kevin Finlayson
 */

html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }

body {
  background: #fff url(../graphics/bg.jpg) repeat center 2px;
  color: #869da4;
  font-family: "proxima-nova-1","proxima-nova-2", "helevetica neue", helvetica, arial;
/*  font-family: "calluna-sans-1","calluna-sans-2", "helevetica neue", helvetica, arial;*/
/*  text-shadow: 0px -1px 1px rgba(0,0,0,1);*/
}

h2, h3, h4 {
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", georgia, times, "times new roman", sans-serif;
  line-height: 1.3;
  color: #dde4e5;
  margin-bottom: 10px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-size: 2.25em;
  text-align: center;
  width: 810px;
  margin-bottom: 40px;
  padding: 0px 105px;
  text-shadow: 0px -2px 4px rgba(0,0,0,1);
}

h3 {
  font-size: 1.125em;
  font-weight: 700;
}

h4 {
  font-family: "proxima-nova-1","proxima-nova-2", "helevetica neue", helvetica, arial;
  font-size: 82.5%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 1.5em;
}

a, a:visited {
  color: #37a7da;
  text-decoration: none;
}

a:hover, a:focus {
  color: #fff;
}

ul, ol {
  margin-left: 0px;
}

ul {
  list-style-type: none;
}

ul, img, p {
  margin-bottom: 20px;
}

li {
  margin-bottom: 1em;
}

/*
structure
*/

#container {
  background: transparent url(../graphics/container-bg.jpg) no-repeat center top;
}

#content {
  margin: 0px auto;
  width: 1020px;
}

header {
  height: auto;
  min-height: 330px;
}

section {
  width: 1020px;
  margin: 0px auto 40px auto;
  float: left;
}

/*
global
*/

.first, #contact li.first {
  margin-left: 0px;
}

/*
header
*/

#logo a {
  width: 300px;
  height: 330px;
  text-indent: -999em;
  margin: 0px auto;
  background: transparent url(../graphics/logo.png) no-repeat center center;
  display: block;
}

/*
intro
*/

#strapline {
  width: 810px;
  margin: 0px 105px 40px 105px;
}

#strapline p {
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", georgia, times, "times new roman", sans-serif;
  font-size: 3em;
  line-height: 1.3;
  font-weight: 400;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0px -2px 4px rgba(0,0,0,0.75);
  color: #dde4e5;
}

#strapline a {
  color: #fff;
}

/*
slideshow
*/

#slideshow-container {
  position: relative;
  width: 954px;
  padding: 13px;
  min-height: 400px;
  height: auto;
  float: left;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #161a1b url(../graphics/slideshow-bg.png) repeat top center;
  -webkit-box-shadow: 0px 1px 2px rgba(255,255,255,0.15);
  -moz-box-shadow: 0px 1px 2px rgba(255,255,255,0.15);
  box-shadow: 0px 1px 2px rgba(255,255,255,0.15);
  margin: 0px 20px 60px;
}

#slideshow-container.thumb-display {
  padding: 16px 4px 0px 16px;
  width: 960px;
}

#slideshow {
  width: 954px;
  height: 784px;
  float: left;
  filter:alpha(opacity=0);
  opacity: 0;
  display: none;
}

.slide {
  width: 954px !important;
}

.slide img {
  width: 940px;
  height: 770px;
  padding: 7px;
  margin-bottom: 0px;
}

.slide-overlay {
  float: none;
  display: none;
  padding: 0px;
  z-index: 1;
  width: 954px;
  height: 784px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent url(../graphics/slide-overlay.png) no-repeat center center;
}

.no-js #slideshow {
  filter:alpha(opacity=100);
  opacity: 1;
}

#slide-info {
  float: left;
  height: auto;
  width: 470px;
  padding: 10px 225px 0px 246px;
  margin: 0px 6px;
  min-height: 60px;
  text-align: center;
  font-size: 0.875em;
  display: none;
}

.slide-info {
  display: none;
}

#pager {
  float: left;
  filter:alpha(opacity=0);
  opacity: 0;
  display: none;
}

.thumb {
  margin: 0px 12px 12px 0px;
  width: 308px;
  height: auto;
  min-height: 252px;
  text-align: center;
  float: left;
  position: relative;
  display: block;


}
.thumb img {
  width: 300px;
  height: 244px;
  z-index: 0;
  float: left;
  padding: 4px;
  margin-bottom: 10px;
}

.thumb-overlay {
  float: none;
  padding: 0px;
  z-index: 1;
  width: 308px;
  height: 252px;
  margin-bottom: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent url(../graphics/thumb-overlay.png) no-repeat center center;
}

.ie8 .thumb-overlay, .ie7 .thumb-overlay {
  display: none;
  margin-top: -999em;
}

.thumb p {
  display: none;
}

.thumb h3 {
  float: left;
  color: #869da4;
  width: 308px;
  line-height: 1.1;
  text-shadow: 0px -1px 2px rgba(0,0,0,0.75);
  font-size: 1em;
  margin-bottom: 14px;
}

.visit {
  padding: 10px 10px 17px 10px;
  margin-bottom: 0px;
}

a.visit-button, a.visit-button:visited {
  color: #fff;
  background-color: #37a7da;
  padding: 9px 15px;
  line-height: 1em;
  height: 1em;
  -webkit-border-radius: 1.25em;
  -moz-border-radius: 1.25em;
  border-radius: 1.25em;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 1px -1px 1px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,1);
  -moz-box-shadow: 0px 2px 10px rgba(0,0,0,1);
  box-shadow: 0px 2px 10px rgba(0,0,0,1);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #54b4df), color-stop(100%, #2081ad));
  background-image:-moz-linear-gradient(top, #54b4df 0%, #2081ad 100%);
  background-image:linear-gradient(top, #54b4df 0%, #2081ad 100%);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

a.visit-button:hover, a.visit-button:focus {
  -webkit-box-shadow: 0px 0px 30px rgba(55,267,218,0.35);
  -moz-box-shadow: 0px 0px 30px rgba(55,267,218,0.35);
  box-shadow: 0px 0px 30px rgba(55,267,218,0.35);
}

.no-boxshadow a.visit-button:hover, .no-boxshadow a.visit-button:focus {
  background-color: #2081ad;
}

#top-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2000;
  display: block;
  height: 20px;
  width: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-indent: -999em;
  color: #fff;
  text-align: center;
  font-weight: 700;
  text-shadow: none;
  filter:alpha(opacity=0);
  opacity: 0;
  background-color: #66bfec;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.75);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #54b4df), color-stop(100%, #2081ad));
  background-image:-moz-linear-gradient(top, #54b4df 0%, #2081ad 100%);
  background-image:linear-gradient(top, #54b4df 0%, #2081ad 100%);
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.1s linear;
}

#top-close span {
  line-height: 20px;
  height: 20px;
  width: 20px;
  display: block;
  background: transparent url(../graphics/close.png) no-repeat center center;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.1s linear;
}

#top-close:hover, #top-close:focus {
  height: 26px;
  width: 26px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  margin-top: -2px;
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}

#top-close:hover span, #top-close:focus span {
  height: 26px;
  width: 26px;
}

#top-close:active {
  margin-top: 0px;
}

#previous, #next {
  filter:alpha(opacity=0);
  opacity: 0;
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 390px;
  text-indent: -999em;
  z-index: 1000;
  background-color: #66bfec;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.75);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #54b4df), color-stop(100%, #2081ad));
  background-image:-moz-linear-gradient(top, #54b4df 0%, #2081ad 100%);
  background-image:linear-gradient(top, #54b4df 0%, #2081ad 100%);
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.1s linear;
}

#previous {
  left: 5px;
}

#next {
  right: 5px;
}

#previous span, #next span {
  display: block;
  height: 30px;
  width: 30px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.1s linear;
}

#previous span {
  background: transparent url(../graphics/slideshow-arrow-left.png) no-repeat center center;
}

#next span {
  background: transparent url(../graphics/slideshow-arrow-right.png) no-repeat center center;
}

#previous:hover, #previous:focus, #next:hover, #next:focus {
  height: 36px;
  width: 36px;
  margin-top: -2px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}

#previous:hover span, #previous:focus span, #next:hover span, #next:focus span {
  height: 36px;
  width: 36px;
}

#previous:active, #next:active {
  margin-top: 0px;
}

.no-csstransitions #previous:hover, .no-csstransitions #previous:focus, .no-csstransitions #next:hover, .no-csstransitions #next:focus {
  margin-top: 0px;
  background-color: #2081ad;
  height: 30px;
  width: 30px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.no-csstransitions #top-close:hover, .no-csstransitions #top-close:focus {
   margin-top: 0px;
  background-color: #2081ad;
  height: 20px;
  width: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.no-csstransitions #top-close:hover span, .no-csstransitions #top-close:focus span {
  height: 20px;
  width: 20px;
}

.no-csstransitions #previous:hover span, .no-csstransitions #previous:focus span, .no-csstransitions #next:hover span, .no-csstransitions #previous:hover span {
  height: 30px;
  width: 30px;
}


/*
Introduction
*/

#why-me, #process, #tools {
  width: 300px;
  padding: 0px 20px;
  float: left;
}

#tools ul li ul {
  list-style-type: disc;
}


/*
manifesto
*/

#beliefs li {
  float: left;
  margin-bottom: 0px;
}

#beliefs li ul li {
  width: 420px;
  padding: 0px 20px 0px 70px;
}

#beliefs li ul li span {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  font-weight: 700;
  display: block;
  background-color: #465256;
  color: #1c2021;
  font-size: 1em;
  line-height: 2;
  height: 2em;
  width: 2em;
  text-align: center;
  font-weight: 700;
  float: left;
  margin-left: -50px;
  -webkit-font-smoothing: antialiased;
  text-shadow: none;
  -webkit-border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  font-weight: 700;
}

#beliefs li strong {
  color: #c9d4d7;
  -webkit-font-smoothing: antialiased;

}

/*
contact
*/

#deets, #work-with-me {
  width: 470px;
  float: left;
  padding: 0px 20px;
}


#project-sheet-container {
  padding: 10px 0px;
}

#project-sheet {
  display: inline-block;
  color: #fff;
  font-size: 0.875em;
  background-color: #37a7da;
  padding: 8px 15px;
  -webkit-border-radius: 1.25em;
  -moz-border-radius: 1.25em;
  border-radius: 1.25em;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 1px -1px 1px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
  box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #54b4df), color-stop(100%, #2081ad));
  background-image:-moz-linear-gradient(top, #54b4df 0%, #2081ad 100%);
  background-image:linear-gradient(top, #54b4df 0%, #2081ad 100%);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.ie7 #project-sheet {
  display: inline;
  margin-bottom: 20px;
}

#project-sheet a, #project-sheet a:visited {
  background: transparent url(../graphics/download.png) no-repeat left 2px;
  color: #fff;
  display: inline;
  padding: 5px 10px 5px 34px;
}

.no-borderradius #project-sheet {
  padding: 8px 10px;
}

.no-borderradius #project-sheet a {
  padding: 6px 5px 4px 34px;
}

#project-sheet:hover, #project-sheet:focus {
  -webkit-box-shadow: 0px 0px 30px rgba(55,267,218,0.35);
  -moz-box-shadow: 0px 0px 30px rgba(55,267,218,0.35);
  box-shadow: 0px 0px 30px rgba(55,267,218,0.35);
}

.no-boxshadow #project-sheet:hover, .no-box-shadow #project-sheet:focus {
  background-color: #2081ad;
}

#deets ul li {
  clear: left;
}

#deets ul li a, #mail {
  height: 16px;
  line-height: 1.3  ;
  padding: 4px 0px 4px 34px;
  background-repeat: no-repeat;
  background-position: left 0px;
  display: inline-block;
}

#deets ul li a:hover, #deets ul li a:focus,  #mail:hover, #mail:focus {
  background-position: left -24px;
}

#mail {
  background-image: url(../graphics/mail.png);
}

#blog {
  background-image: url(../graphics/blog.png);
}

#dribbble {
  background-image: url(../graphics/dribbble.png);
}

#twitter {
  background-image: url(../graphics/twitter.png);
}

/*
footer
*/

footer {
  clear: left;
  font-size: 0.875em;
  width: 940px;
  height: auto;
  min-height: 40px;
  text-align: center;
  color: #546970;
  padding: 20px;
}

footer a, footer a:visited {
  color: #546970;
  text-decoration: underline;
}

footer a:hover, footer a:focus {
  color: #869da4;
}

/*
webfont
*/

.wf-loading #strapline, .wf-loading h2 {
  visibility: hidden;
}


/*
 * Media queries for responsive design
 * These follow after primary styles so they will successfully override.
 */


@media only screen and (max-width: 1020px) and (min-width: 768px) { /* iPad portrait and other tablet/mid-sized viewports */
  #content { width: 768px; }
  #strapline { width: 600px; margin: 0px 84px 40px 84px; }
  #slideshow-container { width: 702px; }
  #slideshow-container.thumb-display {width: 708px; }
  #slideshow { width: 702px; height: 578px; }
  .thumb { width: 342px; }
  .thumb img { width: 334px; height: 272px; }
  .thumb-overlay { width: 342px; height: 280px; background-image: url(../graphics/thumb-overlay-ipad.png); }
  .slide { width: 702px !important; }
  .slide img { width: 688px; height: 564px; }
  .slide-overlay { width: 702px; height: 578px; background-image: url(../graphics/slide-overlay-ipad.png);
  }
  #slide-info { width: 344px; padding: 10px 186px 0px 179px; }
  #previous, #next { top: 288px; }
  h2 { width: 600px; padding: 0px 84px; }
  section { width: 768px; }
  #why-me, #process, #tools { width: 620px; padding: 0px 64px 0px 84px; margin-bottom: 20px; }
  section h4 { text-align: center; padding-right: 20px; }
  #why-me p, #process p { float: left; width: 290px; margin-right: 20px; }
  #tools ul li { width: 620px; float: left; }
  #tools ul li ul { margin-bottom: 0px; }
  #tools ul li ul li { width: 290px; margin: 0px 20px 0px 0px; }
  #beliefs li ul li { width: 300px; padding: 0px 20px 0px 64px; }
  #contact { width: 640px; padding: 0px 64px;  }
  #contact h2 { width: 600px; margin: 0px 0px 40px 0px; padding: 0px 20px; }
  #deets, #work-with-me { width: 280px; float: left; padding: 0px 20px;}
  footer { width: 728px; }
}

@media only screen and (max-width: 767px) and (min-width: 480px) { /* iPhone landscape and other small viewports */
  #content { width: 480px; }
  #strapline { width: 440px; margin: 0px 20px 20px 20px; }
  #strapline p { font-size: 2.5em; margin-bottom: 10px;}
  #slideshow-container { width: 408px; padding: 16px; min-height: 200px; margin-bottom: 40px; }
  #slideshow { width: 408px; height: 336px; }
  .slide { width: 408px !important; }
  .slide img { width: 400px; height: 328px; padding: 4px; }
  .slide-overlay { width: 408px; height: 336px; background-image: url(../graphics/slide-overlay-iphone-landscape.png);
  }
  #slide-info { width: 400px; padding: 10px 0px 0px 0px; }
  #previous, #next { top: 170px; }
  .visit { margin-bottom: 4px; }
  h2 { font-size: 1.5em; width: 440px; padding: 0px 20px; margin-bottom: 40px; }
  section { width: 480px; margin-bottom: 20px; }
  #why-me, #process, #tools { width: 440px; margin-bottom: 20px; }
  #tools { width: 460px; padding: 0px 0px 0px 20px; margin-bottom: 0px;}
  section h4 { text-align: center; }
  #tools ul li { width: 460px; float: left; }
  #tools ul li ul { margin-bottom: 0px; }
  #tools ul li ul li { width: 210px; margin: 0px 20px 0px 0px; }
  h4 { font-size: 75%; }
  #beliefs li ul li { width: 390px; }
  #contact h2 { width: 440px; }
  #contact h4 { display: none; }
  #deets, #work-with-me { width: 440px; margin-bottom: 20px; }
  #project-sheet-container {  text-align: center; }
  #thanks { text-align: center; }
  #deets ul { width: 280px; padding: 0px 80px; }
  #deets p { display: none; }
  footer { width: 440px; }
}

@media only screen and ( max-width: 479px) and (min-width: 320px) { /* Smart phones portrait */
  #content { width: 320px; }
  #strapline { width: 280px; margin: 0px 20px 20px 20px; }
  #strapline p { font-size: 1.5em; margin-bottom: 10px;}
  #slideshow-container { width: 248px; padding: 16px; min-height: 200px; margin-bottom: 40px; }
  #slideshow { width: 248px; height: 205px; }
  .slide { width: 248px !important; }
  .slide img { width: 240px; height: 197px; padding: 4px; }
  .slide-overlay { width: 248px; height: 205px; background-image: url(../graphics/slide-overlay-iphone.png);
  }
  #slide-info { width: 240px; padding: 10px 0px 0px 0px; }
  #previous, #next { top: 103px; }
  .visit { margin-bottom: 4px; }
  h2 { font-size: 1.25em; width: 280px; padding: 0px 20px; margin-bottom: 40px; }
  section { width: 320px; margin-bottom: 20px; }
  #why-me, #process, #tools { width: 280px; margin-bottom: 20px; }
  #tool { margin-bottom: 0px; }
  section h4 { text-align: center; padding-right: 20px; }
  #tools ul li { width: 280px; float: left; margin-bottom: 0px; }
  #tools ul li ul { margin-bottom: 0px; }
  #tools ul li ul li { width: 280px; }
  h4 { font-size: 75%; }
  #beliefs li ul li { width: 230px; margin-bottom: 10px; }
  #contact h2 { width: 280px; }
  #contact h4 { display: none; }
  #deets, #work-with-me { width: 280px; margin-bottom: 20px; }
  #project-sheet-container {  text-align: center; }
  #thanks { text-align: center; }
  #deets ul { width: 280px; }
  #deets p { display: none; }
  footer { width: 280px; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {  /* retina graphics */
  #deets li a { background-size: 24px 48px; }
  #slideshow-container { background-image: url(../graphics/slideshow-bg-retina.png); background-size: 60px 60px; }
  #mail { background-image: url(../graphics/mail-retina.png); }
  #blog { background-image: url(../graphics/blog-retina.png); }
  #twitter { background-image: url(../graphics/twitter-retina.png); }
  #dribbble { background-image: url(../graphics/dribbble-retina.png); }
  #project-sheet a { background-image: url(../graphics/download-retina.png); background-size: 24px 24px; }
  #logo a { background-image: url(../graphics/logo-retina.png); background-size: 300px 330px; }
  #previous span { background-image: url(../graphics/slideshow-arrow-left-retina.png); background-size: 30px 30px; }
  #next span { background-image: url(../graphics/slideshow-arrow-right-retina.png); background-size: 30px 30px; }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-device-pixel-ratio: 2) and (orientation: landscape) {   /* retina graphics: landscape */
  /* .slide-overlay { background-image: url(../graphics/slide-overlay-iphone-landscape-retina.png); background-size: 408px; height: 336px; } */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-pixel-ratio: 2) and (orientation: portrait) {  /* retina graphics: portrai */
  /* .slide-overlay { background-image: url(../graphics/slide-overlay-iphone-retina.png); background-size: 248px; height: 205px; } */
}

/*
 * 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; }
}