@font-face {
    font-family: 'MuseoSansRounded700';
    src: url('museosansrounded-700-webfont.eot');
    src: url('museosansrounded-700-webfont.eot?iefix') format('eot'),
         url('museosansrounded-700-webfont.woff') format('woff'),
         url('museosansrounded-700-webfont.ttf') format('truetype'),
         url('museosansrounded-700-webfont.svg#webfonta13rQBab') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  background: #f0f0f0;
  padding: 0 0 100px 0;
}

abbr {
  font-family: Times; /* I like circular periods, not square ones */
}

::selection {
  background: #9acade;
  color: #fff; 
}

header,
section,
article,
aside,
footer {
  display: block;
}

a {
  color: #6da4ba;
}

.wrapper {
  margin: 0 auto;
  width: 755px;
  position: relative;
}

header#main {
  z-index: 0;
  position: relative;
  padding: 0 0 80px 0;
  background: #9BC9DD; /* old browsers */
  background: -moz-linear-gradient(top, #AED5E4 1%, #9BC9DD 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#AED5E4), color-stop(100%,#9BC9DD)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AED5E4', endColorstr='#9BC9DD',GradientType=0 ); /* ie */
}

header#main article {
  width: 470px;
  padding: 0 0 25px 20px;
  margin: 0 0 -10px 0;
}

header#main article h2 {
  font-size: 40px;
  letter-spacing: -2px;
  color: #6da4ba;
  margin: 35px 0 10px 0;
  font-family: "MuseoSansRounded700", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

header#main article p {
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  margin: 0 0 20px 0;
}

header#main article p:last-child {
  margin: 0;
}

header#main a {
  -webkit-transition: color .1s ease-in;
}

header#main a:hover {
  color: #fff;
}

header#main aside {
  width: 175px;
  height: 193px;
  position: absolute;
  right: 42px;
  bottom: 0;
}

#top {
    background: #9acade;
    height: 28px;
}

#top h1 a {
  display: block;
  width: 84px;
  height: 17px;
  float: left;
  margin: 5px 0;
  font-size: 18px;
  color: rgba(255,255,255,.85);
  font-weight: normal;
  text-decoration: none;
  text-transform: lowercase;
  font-family: "MuseoSansRounded700", Helvetica, Arial, sans-serif;
}

#top h1 a:hover {
  color: #fff;
}

#top h1 a span {
  position: absolute;
  left: -9999px;
}

#top nav {
  float: right;
}

#top nav h2 {
  display: inline-block;
  margin: 0 5px 0 0;
  font-size: 11px;
  color: #6da4ba;
}

#top nav a {
  display: inline-block;
  -moz-border-radius: 3px;
  border-radius:      3px;
  font-size: 12px;
  padding: 0 5px 0 25px;
  height: 22px;
  line-height: 22px;
  margin: 3px 0;
  font-weight: bold;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  background: #7bb5cf url(../images/contact-icon.png) 5px 5px no-repeat;
  -webkit-transition: color .1s ease-in;
}

#top nav a:hover {
  color: rgba(255,255,255,1);
}

#content {
  background: #fff;
  width: 715px;
  padding: 20px;
  margin: -70px auto 20px;
  position: relative;
  z-index: 1;
  -moz-border-radius: 10px;
  border-radius:      10px;
}

#content nav ul li {
  height: 150px;
  width: 715px;
  margin: 0 0 20px 0;
}

#content nav ul li a {
  display: block;
  float: left;
  margin: 0 0 0 20px;
  width: 225px;
  height: 150px;
}

#content nav ul li a .img_cont {
  background: white url(../images/loading.gif) no-repeat 50% 50%;
  float: left;
  height: 100%;
  width: 100%;
  display: block;
  -moz-border-radius: 3px;
  border-radius:      3px;
}

#content nav ul li a img {
  -webkit-transition: opacity .1s ease-in;
  display: none;
}

#content nav ul li a img:hover {
  opacity: .9;
}

#content nav ul li a:nth-child(3n+1) {
  margin: 0;
}

#content aside#clients {
  float: left;
  width: 480px;
  margin: 30px 10px 0 0;
}

#content aside#clients ul {
  float: left;
  width: 480px;
  padding: 0 0 0 0;
}

#content aside#clients ul#at-thoughtbot {
  margin: 10px 0 0 0;
}

#content aside#clients ul li:first-child {
  font-weight: bold;
  display: block;
  width: 480px;
  color: #c0e3f2;
  font-size: 12px;
}

#content aside#clients ul li {
  font-size: 11px;
  color: #bbb;
  float: left;
  display: inline-block;
  width: 150px;
  margin: 0 10px 5px 0;
}

#content section#my-resume {
  float: right;
  width: 225px;
  margin: 30px 0 0 0;
}

#content section#my-resume a img {
  float: left;
}

#content section#my-resume #download-resume {
  width: 130px;
  float: right;
}

#content section#my-resume #download-resume a {
  display: inline-block;
  -moz-border-radius: 3px;
  border-radius:      3px;
  font-size: 12px;
  padding: 0 5px 0 18px;
  height: 22px;
  line-height: 22px;
  margin: 25px 0 0 0;
  font-weight: bold;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  background: #7bb5cf url(../images/download-icon.png) 5px 6px no-repeat;
  -webkit-transition: color .1s ease-in;
  border: 1px solid #6B9FB6;
}

#content section#my-resume #download-resume a em {
  font-weight: normal;
  font-size: 9px;
  font-style: normal;
  color: rgba(255,255,255,.65);
}

#content section#my-resume #download-resume span {
  color: #bbb;
  margin: 7px 0 0 0;
  display: block;
  font-size: 11px;
}

#content section#my-resume #download-resume strong {
  display: block;
  color: #C0E3F2;
}

#content section#the-latest strong {
  background: #fafafa;
  display: block;
  text-align: center;
  font-weight: normal;
  line-height: 16px;
  padding: 100px 65px;
  font-size: 11px;
  color: #d3d3d3;
  border: 2px dashed #eee;
}

#content section#the-latest strong a {
  color: #bbb;
}

#content header {
  font-size: 12px;
  text-transform: uppercase;
  color: #999;
  font-weight: bold;
  margin: 0 0 10px 0;
}

footer #contact {
  float: left;
  width: 470px;
  margin: 0 0 0 20px;
}

footer aside#footer-info {
  float: right;
  width: 225px;
  min-height: 200px;
  background: url(../images/ne-map.png) 10px 0 no-repeat;
  margin: 0 20px 0 0;
}

footer aside#footer-info ul {
  float: left;
  width: 150px;
}

footer aside#footer-info ul li {
  color: #bbb;
  margin: 0 0 5px 0;
  font-size: 11px;
  text-indent: 11px;
}

footer aside#footer-info ul li strong {
  color: #999;
}

footer aside#footer-info ul a {
  border-bottom: 1px dotted #bbb;
}

footer aside#footer-info ul li:first-child {
  text-indent: 0;
}

footer aside#footer-info nav#links {
  float: right;
  width: 75px;
}

footer aside#footer-info nav#links a {
  display: block;
  margin: 0 0 5px 0;
  width: 75px;
  text-align: right;
  font-size: 11px;
  text-decoration: none;
  -webkit-transition: color .1s ease-in;
}

footer aside#footer-info a {
  color: #bbb;
  text-decoration: none;
  -webkit-transition: color .1s ease-in;
}

footer aside#footer-info a:hover {
  color: #bbb;
}

/* Work pages */
#work header h2 {
  float: left;
  width: 340px;
  font-family: "MuseoSansRounded700", Helvetica, Arial, sans-serif;
  text-transform: none;
  font-weight: normal;
  font-size: 48px;
  letter-spacing: -2px;
  color: #6da4ba;
}

#work header {
  margin: 0 0 20px 0;
}

#work header aside {
  float: right;
  width: 357px;
}

#work header aside p {
  font-size: 11px;
  color: #bbb;
  margin: 0 0 15px 0;
  line-height: 15px;
  text-transform: none;
  font-weight: normal;
}

#work header aside p:last-child {
  margin: 0;
}

#work-images {
  background: #ddd;
  padding: 50px 20px;
  -moz-border-radius: 5px;
  border-radius:      5px;
}

#work-images li {
  margin: 0 0 50px 0;
  width: 675px;
  padding: 32px 0 0 0;
  background: url(../images/faux-browser.png) 0 0 no-repeat;
  -webkit-box-shadow: 0 0 30px rgba(0,0,0,.5);
  -moz-box-shadow:    0 0 30px rgba(0,0,0,.5);
  box-shadow:         0 0 30px rgba(0,0,0,.5);
}

#work-images li.no-browser {
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
}

#work-images li img {
  margin: 0 0 -2px 0;
}

#work-images li:last-child {
  margin: 0;
}