@import url(reset.css);

/* @group CORE ---------------------------------------------------------------------------------- */

body {
  background: #FFF;
  color: #1e1e1e;
  font-family: 'Avenir Next W01 Light', Helvetica, Arial, sans-serif;
}

/* @end */

/* @group TYPOGRAPHY ---------------------------------------------------------------------------- */

a {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

a:hover {
  color: #ED7C22 !important;
}

/* @end */

/* @group HEADER -------------------------------------------------------------------------------- */

body > header {
  max-width: 60em; /* 960px / 16px */
  margin: 0 auto;
  padding: 0 2em;
  overflow: hidden;
}

body > header hgroup {
  float: left;
}

body > header h1 {
  margin-top: 0.5em;
  font-family: 'AvenirNextLTW01-Regular', Helvetica, Arial;
  font-size: 4.1em;
  font-weight: normal;
}

body > header h1 span {
  font-family: 'Avenir Next LT W01 Demi', Helvetica, Arial;
}

body > header h2 {
  display: none;
  margin-top: -0.6em;
  font-family: 'AvenirNextLTW01-Regular', Helvetica, Arial;
  font-weight: normal;
  font-size: 1.4375em; /* 23px / 16px */
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* @end */

/* @group CONTACT -------------------------------------------------------------------------------- */

.contact {
  float: right;
  position: relative;
  top: 2.2em;
  left: -3.5em;
  padding-left: 0;
  list-style-type: none;
}

.contact li {
  float: left;
  margin-left: 0.5em;
}

.contact li:first-child {
  margin-left: 0;
}

.contact li a {
  display: block;
  width: 29px;
  height: 29px;
  background-color: #000;
  border-radius: 30px;
}

.contact li a:hover {
  background-color: #ED7C22;
}

.contact li a {
  background-repeat: no-repeat;
  background-position: center;
}

.c_twitter a { background-image: url('../img/c_twitter.png'); }
.c_flickr a { background-image: url('../img/c_flickr.png'); }
.c_github a { background-image: url('../img/c_github.png'); }
.c_email a { background-image: url('../img/c_email.png'); }

/* @end */

/* @group CONTENT ------------------------------------------------------------------------------- */

.photo {
  width: 100%;
  height: 335px;
  margin: 1.5em 0 2.5em 0;
  background-image: url('../img/fishbowl_alt.jpg');
  background-size: cover;
  background-color: #282828;
  background-position: center;
}

main {
  max-width: 60em; /* 960px / 16px */
  margin: 0 auto;
  padding: 0 2em;
}

.bio {
  width: 60%;
  float: left;
}

.bio a:link, .bio a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #D9D9D9;
}

.bio p {
  color: #000;
}

.bio p b {
  font-family: 'AvenirNextLTW01-Medium', Helvetica, Arial;
  font-weight: normal;
}

/* @end */

/* @group SIDE PROJECTS -------------------------------------------------------------------------------- */

.side_projects {
  float: right;
}

.side_projects h3 {
  margin-top: 0.3em;
  color: #6f6f6f;
  font-family: 'Avenir Next W01 Thin', Helvetica, Arial;
  font-size: 0.8125em; /* 13px / 16px */
  font-weight: normal;
  text-transform: uppercase;
}

.side_projects ul {
  padding-left: 0;
  font-size: 1em;
}

.side_projects ul li {
  padding-bottom: 0.3em;
}

.side_projects ul a {
  font-family: 'AvenirNextLTW01-Regular', Helvetica, Arial;
  font-size: 1em;
  color: #6f6f6f;
  text-decoration: none;
}

/* @end */

/* @group PHOTO CAPTION -------------------------------------------------------------------------------- */

.photo_caption {
  max-width: 60em; /* 960px / 16px */
  margin: 0 auto;
  padding: 0 2em;
}

.photo_caption p {
  clear: both;
  padding: 1.5em 0;
  font-size: 0.8125em; /* 13px / 16px */
  color: #afafaf;
}

/* @end */

/* @group MEDIA QUERIES ------------------------------------------------------------------------- */

/* -- 980px / 16px = 61.25em */
@media screen and (max-width: 61.25em) {
  .contact { left: 0; }
  .photo { width: 100% }
	.bio { float: none; width: 85%; }
  .side_projects { float: none; margin-top: 2em; }
  .photo_caption { margin-top: 1em; }
}

/* -- 630px / 16px = 39.375em */
@media screen and (max-width: 39.375em) {
	body > header hgroup { float: none; text-align: center; }
  .contact { margin: 1.5em auto 0 auto; width: 7.1em; float: none; left: 0; top: 0; }
  .photo { height: 250px; }
}

/* -- 370px / 16px = 23.125em */
@media screen and (max-width: 23.125em) {
	body > header hgroup { font-size: 0.9em; }
  body > header h2 { font-size: 1.375em; }
  .bio { width: 100%; font-size: 0.9em; }
  .photo { height: 175px; }
  .side_projects { font-size: 0.9em; }
}

/* -- Retina */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .c_twitter a { background-size: 16px; background-image: url('../img/c_twitter@2x.png'); }
  .c_flickr a { background-size: 20px; background-image: url('../img/c_flickr@2x.png'); }
  .c_github a { background-size: 21px; background-image: url('../img/c_github@2x.png'); }
  .c_email a { background-size: 17px; background-image: url('../img/c_email@2x.png'); }
}

/* -- Print */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; }
  nav { display: none; }
  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: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

/* @end */