/**
 * CSS for screen media
 * (c) 2010 Christofer Sandin
 * christofersandin.com
 */

/* @group - Typography */
/* ----------------------------------------------------------------------- */
body { font-size: 62.5%; font-family: Georgia, Times, serif; line-height: 1.8em; color: #222;}

h1, h2, h4 { font-family: "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }
h3, p, li, caption { font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2", georgia, serif; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.2; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #2C4181; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #000; text-decoration: none; }

p { font-weight: normal; line-height: 1;  }

h1 { font-size: 4em; font-weight: bold; margin: 0 0 0.5em 0; padding: 0;  } 
h2 { font-size: 3em; font-weight: bold; margin-top: 1em; margin-bottom: 0.75em; }
h3, caption  { font-size: 1.4em; font-weight: bold; margin-top: 1.75em; margin-bottom: 0.25em;} 
h4 { font-size: 1.2em; color: #999; margin-bottom: 0.5em; font-weight: bold; }  /* displayed at 12px */

p, ol, ul, ol li { font-size: 1.4em; line-height: 1.5;}
p { margin: 0 0 1em 0; }
ul { margin: 0 0 2em 0; padding: 0; line-height: 1; color: #222; color: rgba(255,255,255,0.7); }
li { margin: 0; padding: 0; line-height: 1.5; list-style-type: disc; }

blockquote { margin-left: 0px; color: #333; border-left: 1px solid #ccc; padding-left: 20px;   }

table { border-collapse: collapse; width: 100%; }
caption { border-bottom: 1px solid #000; padding-bottom: 0.5em;}
th, td { padding: 5px 5px; font-size: 12px; }
th { border-bottom: 1px solid #000; }
td { border-bottom: 1px solid #222; }
.pb { color: #EBD60E; }

a { color: #4D0A0B; }

/* fixes font rendering in safari but can make firefox a bit uneasy... */
/* 
body { -webkit-text-stroke:1px transparent; opacity: 0.99; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}
*/

/* @end */


/* @group - Basic Layout */
/* ----------------------------------------------------------------------- */
nav, section, header, footer, article, aside { display: block; }
time { display: block; }

html, body { height: 100%; margin: 0; padding: 0; }
body { text-align: center; background: url(/images/bg-body-paper.jpg) top left repeat-x; background: url(/images/bg-body-paper-topleft.jpg) top left no-repeat, url(/images/bg-body-paper.jpg) top left repeat-x; }

  header { background: #111; text-align: left; position: relative; height: 52px; }
  
    header h1 { font-size: 19px; line-height: 25px; color: #444; text-shadow: 0 1px 0 #000; text-align: center; padding-top: 0.7em; margin: 0 0 0 30px; float: left; }
    header h1 span, header h1 a { color: #444; text-decoration: none; }
    header h1 a:hover { color: #555; }
    header p { color: #444; text-shadow: 0 1px 0 #000; float: right; font-size: 17px; line-height: 25px; margin: 0 30px 0 0; padding: 0.7em 0 1em 0; }
    header p span { font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif; font-style: italic; }
    header img { float: right; margin: 12px 20px 12px 12px; }

    #searchform { position: absolute; top: 15px; right: 10px; }
    #searchform input#keywords { width: 130px; }
    #searchform input#search { width: 70px; }

    nav { background: #fff; background: rgba(255,255,255, 0.5); height: 50px; }
    nav ul { width: 490px; margin: 0 auto; padding: 8px 0; }
    nav li { float: left; list-style-type: none; margin: 0 10px 0 0; padding: 0; }
    nav li a { display: block; padding: 5px 10px; color: #000; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,0.2); font-weight: bold;}
    nav li a.last, nav li:hover a.last, nav li.active a.last { padding-right: 0; }
    nav li.active a { display: block; padding: 5px 10px; color: #395199; text-shadow: 0 1px 0 rgba(255,255,255,0.2);  }
    nav li:hover a { display: block; padding: 5px 10px; color: #0C1F3C; text-shadow: 0 1px 0 rgba(255,255,255,0.4);  }
    
  #wrapper { width: 70%; max-width: 800px; margin: 0 auto; }
  
  section { text-align: left; }
  
  article { float: right; text-align: left; width: 60%; padding-bottom: 5em; }
  article img { max-width: 100%; margin: 3em 0; }
  article a img { float: right; border: 0; margin: 20px 0 30px 50px; }
    
  aside { float: left; width: 33%; margin: 76px 3% 20px 0; padding-right: 2%; border-right: 1px solid #E4E2CE; color: #9E9A8A; }
  aside h3 { text-align: right; }
  aside p { font-size: 12px; line-height: 1.9; list-style-type: none; text-align: right;}
  aside li { font-size: 12px; line-height: 1.65; list-style-type: none; text-align: right;}
  aside li a {text-decoration: none; color: #9E9A8A; }
  aside li a:hover {text-decoration: none; color: #333; }
  aside .more { cursor: pointer; }

footer { font-size: 13px; background: #000; color: #333; clear: both; width: 100%; text-align: center; margin: 40px 0 0 0; padding: 3em 0; }
/* @end */



/* @group - Journal */
/* ----------------------------------------------------------------------- */
#startpage #wrapper { width: 90%; max-width: 900px; margin: 0 auto; }
.introduction p { margin: 4em 0 0 0; font-size: 1.8em; line-height: 1.6; text-align: left; color: #395199; }
.introduction p span { color: #0C1F3C; margin-left: -10px; }
.introduction a { color: #2C4181; }
#illustration { float: right; margin: -5em -2em 0 2em; }
#startpage aside { width: 15%; float: left; margin: 0 5% 0 0; text-shadow: 0 1px 0 rgba(255,255,255,0.7);  }
#startpage section { width: 50%; float: left; margin: 0; }
#startpage article { width: 100%;  margin: 0; padding-bottom: 2em; }
#startpage #projects { width: 20%; float: right; margin: 7px 0 0 0; text-align: left; }
#startpage ul { text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
#projects p, #projects li { font-size: 10px; color: #9E9A8A; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }
#projects h4 { color: #9E9A8A; }
#projects h4 span { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal; }
#projects a { color: #9E9A8A; text-decoration: none; }
#projects img { border: 0; margin: 1em 0; }
#archive ul { color: #000; }
footer { position: relative;  }
.entry { width: 70%; margin-right: 15%; }
.entry p { margin-right: 5%; }
.entry li { color: #395199; }
.journal-comment { border-left: 3px solid #000;  padding: 1px 20px; margin: 2em 0; }
.journal-comment.me { border-color: #900; }
.meta { color: #CAC8BE; }
h2 { text-shadow: 0 1px 0 #eee; }
h2.sub { color: #999; font-size: 10px; margin: -20px 0 20px 0;}
.back { text-align: center; margin-right: 20px; margin: 5em 0 0 0; padding: 1em 0 0 0;}
#prev { position: absolute; left: 3%; top: 45%; }
#next { position:absolute; right: 3%; top: 45%; }
#prev a img, #next a img { border: 0; } 
/* @end */



/* @group - About */
/* ----------------------------------------------------------------------- */
#about { background: #262626 url(/images/bg-body-fabric.jpg); background: url(/images/bg-body-fabric-topleft.jpg) 0 500px no-repeat, #262626 url(/images/bg-body-fabric.jpg); color: #ccc; text-shadow: 0 -1px 0 #000; }
#about nav { background: #202020; background: rgba(0,0,0,0.2); }
#about nav li a { color: #333; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
#about nav li.active a, #about nav li a:hover  { color: #eee; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
#about h2 { color: #f00; text-shadow: 0 -1px 0 rgba(0,0,0,0.9); }
#about article h3 { color: #f00; text-shadow: 0 -1px 0 rgba(0,0,0,0.9); }
#about article p { color: #888; }
#about .image { margin: 3em 0 8em 0; }
#about article p.caption { margin: -2em 0 2em -97%; font-style: italic; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.1); }
#about blockquote { border-color: #5B1912; color: #666; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); font-size: 1.1em; }
#about article a { color: #bbb; text-decoration: none; border-bottom: 1px dotted #666; }
#about article a:hover { color: #eee; text-decoration: none; border-bottom: 1px dotted #888; }
#about aside { text-align: right; width: 25%; margin-top: 22%; padding-right: 5%; color: #444; border: 0; }
#about aside span { color: #666;  }
#about aside img { border: 0; margin: 10px 0; }
#linkedin { margin-top: 150px; }
#about footer { background: rgba(0,0,0,0.1); color: #444; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }
/* @end */



/* @group - Athletics */
/* ----------------------------------------------------------------------- */
#athletics { background: #550E08 url(/images/bg-body-athletics.jpg); }
#athletics { background: url(/images/bg-body-athletics-left.jpg) no-repeat top left, #550E08 url(/images/bg-body-athletics.jpg); }
#athletics nav { background: #9A372B; background: rgba(0,0,0,0.2); }
#athletics nav li a { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); }
#athletics nav li.active a { color: #FFA30F; text-shadow: 0 -1px 0 rgba(0,0,0,0.6); }
#athletics h2, #athletics h3 { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); }
#athletics h4 { color: #999; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }
#athletics blockquote { border-color: #5B1912; color: #eee; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
#athletics article p { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); }
#athletics article a { color: #FFA30F; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); text-decoration: none; border-bottom: 1px dotted #FFA30F; }
#athletics article strong { color: #FFBE33; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); }
#athletics caption { border-color: #000; border-color: rgba(0,0,0,0.3); }
#athletics table { color: #999; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }
#athletics table th { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); border-color: #000; border-color: rgba(0,0,0,0.3); }
#athletics table td { border-color: #000; border-color: rgba(0,0,0,0.3); }
#athletics aside { text-align: right; width: 25%; margin-top: 22%; padding-right: 5%; color: #eee; border: 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
#athletics aside a { color: #bbb; border: 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); }
#athletics aside a:hover { color: #FFA30F;  }
#athletics aside img { border: 0; margin: 10px 0; }
#athletics footer { background: rgba(0,0,0,0.1); color: #999; }
/* @end */



/* @group - Work */
/* ----------------------------------------------------------------------- */
#work { background: url(/images/bg-body-concrete.jpg) top left repeat; }
#work { background: url(/images/bg-body-concrete-topleft.jpg) top left no-repeat, url(/images/bg-body-concrete.jpg) top left repeat; }
#work nav { background: #eee; background: rgba(255,255,255,0.4); }
#work nav li.active a { color: #B40007; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
#work h2.pull { margin-left: -70%; margin-bottom: 20%; }
#work article a { color: #B40007; }
.a { background: #111; background: rgba(0,0,0,0.7); color: #eee; margin: 4em -6em; padding: 1em 6em 2em 6em; text-shadow: 0 -1px 0 #000; }
.a a, #work article .a a { color: #888; text-shadow: 0 -1px 0 #000; text-decoration: none; border-bottom: 1px dotted #888; }
.a h2,
.a h3 { text-shadow: 0 -1px 0 rgba(0,0,0,0.8); }
.b { background: #f5f5f5; background: rgba(255,255,255,0.5); color: #333; margin: 8em -6em; padding: 1em 6em 4em 6em; text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.b a, #work article .b a { color: #EEAA2A; text-shadow: 0 1px 0 rgba(255,255,255,0.3); text-decoration: none; border-bottom: 1px dotted #EEAA2A; }
#work article ul { color: #999; text-shadow: 0 -1px 0 #000; }
#work h4 { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.2); text-align: center; margin-top: 3em; }
#work p.tableinfo { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.2); }
#work th { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.2); }
#work td { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.2); border-color: #fff; border-color: rgba(255,255,255,0.2); }
#work aside { text-align: right; width: 25%; margin-top: 22%; padding-right: 5%; color: #333; border: 0; }
#work aside img { border: 0; margin: 10px 0; }
#work #cha { margin-top: 1480px; 
  border: 10px solid #aaa; 
  border: 10px solid rgba(0,0,0,0.7);
  -moz-transform: rotate(3deg);  /* FF3.5+ */
  -o-transform: rotate(3deg);  /* Opera 10.5 */
  -webkit-transform: rotate(3deg);  /* Saf3.1+, Chrome */
}
#work #itu { margin-top: 1130px; 
  border: 10px solid #aaa;
  border: 10px solid rgba(0,0,0,0.7);
  -moz-transform: rotate(-2deg);  /* FF3.5+ */
  -o-transform: rotate(-2deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-2deg);  /* Saf3.1+, Chrome */
}
#work footer { background: none; background: rgba(0,0,0,0.1); }
/* @end */



/* @group - Photos */
/* ----------------------------------------------------------------------- */
:focus { outline: 0; }

#photos { background: url(/images/bg-body-wood2.jpg) repeat 0 0; }
#photos nav { background: #332214; background: rgba(0,0,0,0.5); }
#photos nav li a { color: #5D4635; text-shadow: 0 -1px 0 rgba(0,0,0,0.7) }
#photos nav li.active a { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }

#photos article { width: 100%; }
#photos article p { text-align: center; color: #fff; }
#photos div.image.portrait { width: 375px; margin: 0 auto; }
#photos div.image.landscape { width: 500px; margin: 0 auto; }
#photos h2 { color: #2A170C; text-shadow: 0 1px 0 rgba(255,255,255,0.1); text-align: center; }
#photos h2 a { color: #854827; text-shadow: 0 -1px 0 rgba(0,0,0,0.6); text-align: center; }
#photos h2 a:hover { color: #A35830; text-shadow: 0 -1px 0 rgba(0,0,0,0.6); text-align: center; }

#photos #main ul { margin: 0; padding: 20px 0 0 0; }
#photos #main li { float: left; list-style-type: none; margin: 23px; }
#photos #main li a { display: block; background: #111; width: 75px; height: 75px; border: 5px solid #000; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); }
#photos #main li img { margin: 0; padding: 0; }

#photos aside { border: 0; width: 100%; }
#photos aside div { 
  float: left; margin: 0 1%; background: rgba(0,0,0,0.2); 
  border-top: 1px solid rgba(0,0,0,0.2); 
  border-left: 1px solid rgba(0,0,0,0.1); 
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  -moz-border-radius: 10px; /* FF1+ */
  -webkit-border-radius: 10px; /* Saf3+, Chrome */
  border-radius: 10px; /* Opera 10.5, IE 9 */
}
#photos aside div.c25 { width: 23%; margin: 0 1%; background: rgba(0,0,0,0.2); }
#photos aside div.c50 { width: 47%; margin: 0 1%; background: rgba(0,0,0,0.2); }
#photos aside h3 { color: #8F6D53; text-align: left; margin: 20px 20px 10px 20px; padding: 0 0 5px 0; border-bottom: 2px dotted #8F6D53; }
#photos aside ul { float: left; margin: 0 0 20px 20px; }
#photos aside #flickr_contacts,
#photos aside #flickr_intrestingness { margin: 0 0 20px 0; }
#photos aside #flickr_contacts li,
#photos aside #flickr_intrestingness li { clear: both; list-style-type: none; background: none; padding: 4px 0; margin: 0; line-height: 15px;}
#photos aside #flickr_contacts img.comment_icon_small,
#photos aside #flickr_intrestingness img.comment_icon_small { float: left; margin: 1px 8px 0 20px; padding: 0; width: 16px; height: 16px; border: 0;}
#photos aside li { text-align: left; }
#photos aside a { color: #999; }
#photos aside a:hover { color: #ccc; }

#photos footer { background: rgba(0,0,0,0.3); color: #5E4629; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); }

#photosets li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
#photosets li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -10px;  -moz-transform: none; }
#photosets li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
#photosets li:nth-child(6n) a { -webkit-transform: rotate(-2deg); position: relative; top: 5px;  -moz-transform: rotate(-2deg); }
#photosets li:nth-child(8n) a { position: relative; right: 15px; top: 8px; -webkit-transform: rotate(9deg);  -moz-transform: rotate(9deg); }
#photosets li:nth-child(11n) a { position: relative; left: -5px; top: 13px; }
#photosets li:nth-child(12n) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }
#photosets li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }

#photosets a { -webkit-transition: -webkit-transform .15s linear; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.15); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.15); }
#photosets a { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); }

#photo_nav { clear: both; margin: 30px 20px 10px 20px; height: 22px; color: #854827; }
#photo_nav .prev { float: left; }
#photo_nav .next { float: right; }
#photo_nav a { color: #854827; font-size: 15px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
#photo_nav a:hover { color: #A35830; font-size: 15px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
 
/* comment */
#photos h3 { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.2); text-align: center; margin-bottom: 20px; }
#photos article .comment { width: 500px; margin: 30px auto; clear: both; color: #000;
  opacity: 0.3;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#photos article .comment:hover { opacity: 1.0; cursor: default; }
#photos article .comment p { margin: 0; color: #ccc; text-align: left; }
#photos article .comment p a { color: #eee; }
#photos article .comment_buddyicon { float: left; margin: 23px 20px 40px 0; border: 2px solid #fff; }
#photos article .comment_author { font-weight: bold; color: #000; }
#photos article .comment_author a { color: #000;  }
/* @end */



/* @group - General classes */
/* ----------------------------------------------------------------------- */

div.image img { margin: 0; padding: 0;}
div.image {
  clear: right; 
  border-top: 8px solid #fff;
  border-right: 8px solid #fff;
  border-bottom: 3px solid #fff;
  border-left: 8px solid #fff;
  position: relative;
  background: #ffffff; /* old browsers */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

div.image:after { 
  z-index: -1; 
  position: absolute; 
  background: transparent; 
  width: 40%; 
  height: 40%; 
  content: ''; 
  right: 10px; 
  bottom: 10px; 
  transform: skew(15deg) rotate(6deg);
  -webkit-transform: skew(15deg) rotate(6deg);
  -moz-transform: skew(15deg) rotate(6deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
} 

div.image:before { 
  z-index: -2; 
  position: absolute; 
  background: transparent; 
  width: 40%; 
  height: 40%; 
  content: ''; 
  left: 10px; 
  bottom: 10px; 
  transform: skew(-15deg) rotate(-6deg); 
  -webkit-transform: skew(-15deg) rotate(-6deg); 
  -moz-transform: skew(-15deg) rotate(-6deg); 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.entry div.image { float: right; margin: 0em 3em 2em 3em; padding: 0; }
.entry div.image.fullwidth { float: none; margin: 2em 0 2em 0; padding: 0; }

#startpage div.image { float: right; margin: 1em 0 2em 2em; padding: 0; }
#startpage div.image.fullwidth { float: right; margin: 1em 0 2em 0; padding: 0; width: 98%; max-width: 98%; }

#login { position: fixed; right: 10px; top: 10px; padding: 10px 30px; background: #fff; -moz-border-radius: 10px; border: 1px solid #ccc; }
#login a { text-decoration: none; color: #333; }
#login a:hover { text-decoration: underline; }

ul.archive li { list-style-type: none; text-align: left; font-size: 13px; }

.breadcrumbs { text-align: left; font-size: 11px; margin: 5px 0 0 0; }
.breadcrumbs a { color: #333; }
.breadcrumbs span { color: #999; padding: 0 5px; }

div.highlight:hover p { background: #000; cursor: pointer; }
.info { background: #FFF7B0; padding: 1em 15px; margin-bottom: 2em; }

.caption { margin: 1em;}

/* @end */




@media all and (max-device-width: 480px) and (orientation:portrait) { 
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
  #about { background: #262626 url(/images/bg-body-fabric.jpg); color: #ccc; text-shadow: 0 -1px 0 #000; }

  header { height: 90px; }
  header h1 { font-size: 2.2em; float: none; text-align: center; margin: 0; }
  header p { font-size: 1.2em; line-height: 1; float: none; text-align: center; margin: 0 5%; }

  nav { height: 40px; }
  nav ul { width: 89%; margin: 0 0 0 10%; }
  nav li a, nav li.active a, nav li:hover a { padding: 0 2px; font-size: 11px; }
  
  #wrapper,
  #startpage #wrapper { width: 85%; margin: 0 auto;}

  .introduction p { margin: 4% 0 10% 0; }
  #illustration { max-width: 40%; margin: 0; }
  #work h2.pull { margin-left: 0%; margin-bottom: 10%; }

  aside { width: 100%; border: 0; border-top: 1px solid #ccc; margin: 5% 0; padding: 2% 0; clear: both; }
  /* #startpage aside { width: 100%; border: 0; border-top: 1px solid #ccc; margin: 5% 0; padding: 2% 0; clear: both; } */
  #startpage aside { display: none; }

  #about aside { text-align: left; width: 100%; margin-top: 3%; padding: 0; color: #444; border: 0; }
  #athletics aside { text-align: left; width: 100%; margin-top: 3%; padding: 0; color: #eee; border: 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
  #work aside { text-align: left; width: 100%; margin-top: 3%; padding: 0; color: #333; border: 0; }
  
  aside p { text-align: left; }
  aside h3 { text-align: left; }
  aside li { text-align: left; }
  #linkedin { margin: 0; }
  #work #cha { clear: both; margin-top: 10px; display: none; }
  #work #itu { margin-top: 10px; display: none; }

  section,
  #startpage section { width: 100%; clear: both; }
  article { width: 100%; }
  h2 { font-size: 2em; }

  #startpage #projects { width: 100%; clear: both; }
  footer,
  #startpage footer { width: 100%; margin: 0; color: #ccc;}
}



@media all and (max-device-width: 480px) and (orientation:landscape) { 
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
  #about { background: #262626 url(/images/bg-body-fabric.jpg); color: #ccc; text-shadow: 0 -1px 0 #000; }

  header { height: 75px; }
  header h1 { font-size: 2.2em; float: none; text-align: center; margin: 0; }
  header p { font-size: 1.2em; line-height: 1; float: none; text-align: center; margin: 0 5%; }

  nav { height: 40px; }
  nav ul { width: 75%; margin: 0 0 0 22%; }
  nav li a, nav li.active a, nav li:hover a { padding: 0 2px; font-size: 11px; }
  
  #wrapper,
  #startpage #wrapper { width: 85%; margin: 0 auto;}

  .introduction p { margin: 4% 0 10% 0; }
  #illustration { max-width: 40%; margin: 0; }
  #work h2.pull { margin-left: 0%; margin-bottom: 10%; }

  aside { width: 30%; border: 0; border-right: 1px solid #ccc; margin: 0 8% 0 0; padding: 0 2% 0 0; clear: both; }
  #startpage aside { width: 30%; border: 0; border-right: 1px solid #ccc; margin: 0 5% 0 0; padding: 0 4% 0 0; clear: both; }
  #about aside { text-align: left; width: 100%; margin-top: 3%; padding: 0; color: #444; border: 0; }
  #athletics aside { text-align: left; width: 100%; margin-top: 3%; padding: 0; color: #eee; border: 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); }
  #work aside { text-align: left; width: 100%; margin-top: 3%; padding: 0; color: #333; border: 0; }
  
  #work aside h3, #work aside p, 
  #athletics aside h3, #athletics aside p { text-align: left; }

  
  #linkedin { margin: 0; }
  #work #cha { display: none; }
  #work #itu { display: none; }

  section,
  #startpage section { width: 60%; }
  article { width: 100%; }
  h2 { font-size: 2em; }

  #startpage #projects { width: 100%; clear: both; }
  #startpage #projects img { margin-right: 20px; }
  footer,
  #startpage footer { width: 100%; margin: 0; color: #ccc;}
}