jacobemerick/web

body {
  background: #fafafa;
  color: #081118;
  font-family: Molengo, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 15px;}
.stripes {
  background: #de7a22 repeating-linear-gradient(
    45deg,
    #de7a22 -20px,
    #de7a22 110px,
    #20948b 110px,
    #20948b 260px
  );}
.bow-tie-container {
  background: url('/image/bow-tie-cutout.png');
  height: 100%;
  width: 100%;}
.portfolio-container a {
  color: #7b9465;
  text-decoration: none;}
.portfolio-container a:hover {
  border-bottom: 1px solid;
  color: #9abca4;}

.portfolio-container {
  margin: 0 auto;
  width: 850px;}

.portfolio-container .header {
  border-bottom: 1px solid #14414f;
  padding: 10px 5px 0;}
.portfolio-container .header h3 {
  float: left;
  font-size: 1.5em;
  font-weight: normal;
  margin: 0;}
.portfolio-container .header h3 a {
  color: inherit;}
.portfolio-container .header h3 a:hover {
  border-bottom: none;
  color: inherit;}
.portfolio-container .header ul {
  float: right;
  margin: 0;
  padding: 7px 0 0;}
.portfolio-container .header li {
  display: inline;
  padding: 0 0 0 10px;}
.portfolio-container .header::after {
  clear: both;
  content: " ";
  display: block;}

.portfolio-container .window {
  line-height: 1.5em;
  padding-top: 50px;}
.portfolio-container .window::after {
  clear: both;
  content: ' ';
  display: block;}
.portfolio-container .window h1 {
  color: #14414f;
  font-size: 3.7em;
  font-weight: normal;
  line-height: .8em;
  margin: 0 0 20px;
  padding: 0;}

.portfolio-container #jake-picture {
  border: 1px solid #14414f;
  float: right;}
.portfolio-container .introduction {
  margin-right: 200px;}
.portfolio-container .introduction p {
  margin-bottom: 15px;}
.portfolio-container .introduction ul {
  list-style: inherit;
  padding-left: 30px;}

.portfolio-container .projects h2 {
  font-size: 1.5em;
  margin: 30px 0 5px;}
.portfolio-container .projects p {
  margin-bottom: 10px;}

.portfolio-container .resume hr {
  border: solid #f0f0f0;
  border-width: 1px 0 0;}
.portfolio-container .resume .contact-card {
  background: white;
  border 1px solid #f0f0f0;
  float: left;
  margin: 0 5px;
  padding: 7px 7px 10px;
  width: 250px;}
.portfolio-container .resume .contact-card img {
  border: 1px solid #f0f0f0;}
.portfolio-container .resume .contact-card h2,
.portfolio-container .resume .contact-card h3 {
  text-align: center;}
.portfolio-container .resume .contact-card h2 {
  font-size: 1.7em;
  font-weight: bold;
  margin-top: 15px;}
.portfolio-container .resume .contact-card h3 {
  margin-top: 9px;}
.portfolio-container .resume .contact-card ul {
  font-size: .8em;}
.portfolio-container .resume .contact-card ul.contact-methods {
  list-style: inherit;
  padding-left: 25px;}
.portfolio-container .resume .contact-card ul.profiles {
  text-align: center;}
.portfolio-container .resume .contact-card ul.profiles li {
  display: inline;
  padding: 0 5px;}
.portfolio-container .resume .main-pane {
  background: white;
  border: 1px solid #f0f0f0;
  font-size: .9em;
  line-height: 1.7em;
  margin-left: 270px;
  padding: 15px 10px 5px;}
.portfolio-container .resume .main-pane h1 {
  font-size: 2.4em;
  margin-bottom: 0;}
.portfolio-container .resume .main-pane > div {
  border-top: 1px solid #f0f0f0;
  margin-top: 10px;
  padding: 20px 0 15px;}
.portfolio-container .resume .main-pane h2 {
  color: #14414f;
  font-size: 1.2em;
  margin-bottom: 5px;}
.portfolio-container .resume .work-block > div {
  margin-bottom: 15px;}
.portfolio-container .resume .work-block > div:last-child {
  margin-bottom: 0;}
.portfolio-container .resume .work-block .role {
  font-size: 1.1em;}
.portfolio-container .resume .work-block .job-title {
  font-weight: bold;}
.portfolio-container .resume .work-block .summary {
  margin-top: 5px;}
.portfolio-container .resume .work-block ul.highlights {
  font-size: .9em;
  list-style: inherit;
  margin-top: 5px;
  padding-left: 15px;}
.portfolio-container .resume .skills-block .skill-level {
  font-size: .9em;
  font-style: italic;}
.portfolio-container .resume .skills-block dd {
  font-size: .9em;
  margin-bottom: 5px;}
.portfolio-container .resume .skills-block dd:last-child {
  margin-bottom: 0;}
.portfolio-container .resume .skills-block dd li {
  display: inline;
  padding: 0 4px;}
.portfolio-container .resume .education-block .role .degree {
  display: block;
  font-weight: bold;}
.portfolio-container .resume .awards-block .awards-title {
  display: block;
  font-weight: bold;}
.portfolio-container .resume .awards-block .summary {
  display: block;}
.portfolio-container .resume .interests-block dd {
  font-size: .9em;
  margin-bottom: 5px;}
.portfolio-container .resume .interests-block dd:last-child {
  margin-bottom: 0;}
.portfolio-container .resume .interests-block dd li {
  display: inline;
  padding: 0 4px;}

.portfolio-container .contact {
  float: left;
  width: 500px;}
.portfolio-container .contact form {
  margin: 20px 5px 0;}
.portfolio-container .contact li {
  margin-top: 15px;}
.portfolio-container .contact li:first-child {
  margin-top: 0;}
.portfolio-container .contact label {
  display: block;
  width: 250px;}
.portfolio-container .contact input,
.portfolio-container .contact textarea {
  border: 1px #9abca4 solid;
  font-size: 1.2em;
  padding: 2px 2px 0;}
.portfolio-container .contact .error input,
.portfolio-container .contact .error textarea {
  border-color: #c22e54;}
.portfolio-container .contact input {
  width: 250px;}
.portfolio-container .contact textarea {
  height: 80px;
  width: 400px;}
.portfolio-container .contact input[type="submit"] {
  background-color: #9abca4;
  color: white;
  font-size: 1.5em;
  padding: 10px 60px;
  width: auto;}
.portfolio-container .contact input[type="submit"]:hover {
  background-color: #7b9465;}
.portfolio-container .contact .success-message {
  font-size: 1.1em;
  margin-bottom: 20px;
  padding: 2px 5px;}
.portfolio-container .contact .error-message {
  color: #c22e54;
  float: right;
  font-size: .9em;
  text-align: right;}

.portfolio-container .sidebar {
  background: #e0e0e0;
  margin: 50px 0 0 550px;
  padding: 30px 20px 10px}
.portfolio-container .sidebar h3 {
  font-size: 1.5em;}
.portfolio-container .sidebar p {
  font-size: .9em;
  margin-top: 15px;}
.portfolio-container .sidebar ul {
  list-style: inherit;
  margin: 10px 5px;
  padding-left: 15px;}
.portfolio-container .sidebar a .description {
  font-size: .8em;
  font-style: italic;}

.bottom {
  border-top: 1px solid #14414f;
    font-size: .7em;
    margin-top: 80px;
    padding: 20px 0 30px;}
.bottom #site-links {
    float: left;
    width: 45%;}
.bottom #activity-feed {
    margin-left: 55%;}
.bottom #site-links h4,
.bottom #activity-feed h4 {
    font-size: 1.6em;
    font-weight: normal;
    margin: 0 0 10px;}
.bottom #site-links ul,
.bottom #activity-feed ul {
  list-style: inherit;
    padding-left: 20px;}
.bottom #site-links ul {
    font-size: 1.2em;}
.bottom #activity-feed ul {
    padding-right: 5px;}
.bottom #site-links li,
.bottom #activity-feed li {
    margin-bottom: 6px;}
.bottom #site-links a {
    border-bottom-style: none;}
.bottom #site-links a:hover {
    border-bottom-style: solid;}
.bottom #site-links a .title {
    border-bottom: 1px dotted;}
.bottom #site-links a:hover .title {
    border-bottom-style: none;}
.bottom #site-links a .description {
    font-size: .9em;
    font-style: italic;
    padding-left: 3px;}
.bottom #activity-feed .meta {
    display: block;
    font-style: italic;
    margin-right: 10px;
    text-align: right;}
.bottom #activity-feed .read-more {
    float: right;}

#footer {
  color: #1f1b29;
  margin: 20px 0 200px;
  padding-left: 200px;
  text-align: center;
  width: 650px;}
#footer p {
  border-top: 1px solid;
  padding-top: 10px;}
#footer ul {
  margin-top: 8px;}
#footer li {
  display: inline-block;
  margin: 0 10px;}

@media all and (max-width: 860px) {
.portfolio-container {
  margin: 0 10px;
  width: auto;}

.portfolio-container .window h1 {
  font-size: 3em;}
.portfolio-container .introduction {
  margin-right: 0;}
.portfolio-container #jake-picture {
  margin: 0 0 5px 10px;}

.portfolio-container .resume .contact-card {
  width: 225px;}
.portfolio-container .resume .main-pane {
  margin-left: 240px;}
.portfolio-container .resume .contact-card ul.contact-methods {
  padding-left: 20px;}

.portfolio-container .contact {
  width: 55%;}
.portfolio-container .contact textarea {
  max-width: 400px;
  width: 100%;}
.portfolio-container .sidebar {
  margin-left: 60%;}

#footer {
  margin: 20px auto 150px;
  padding-left: 0;
  width: auto;}
}

@media all and (max-width: 700px) {
.portfolio-container {
  font-size: .9em;}

.portfolio-container .window {
  padding-top: 40px;}
.portfolio-container .window h1 {
  font-size: 2.5em;}
.portfolio-container .window h2 {
  font-size: 1.2em;}
.portfolio-container #jake-picture {
  height: auto;
  max-width: 150px;}

.portfolio-container .resume .contact-card {
  border: 1px solid #f0f0f0;
  float: none;
  margin: 0 0 10px;
  width: auto;}
.portfolio-container .resume .contact-card img {
  float: left;
  width: 200px;}
.portfolio-container .resume .contact-card .contact-content {
  margin-left: 210px;}
.portfolio-container .resume .main-pane {
  margin-left: 0;}

.portfolio-container .contact {
  float: none;
  width: auto;}
.portfolio-container .contact input[type=submit] {
  font-size: 1.2em;
  padding: 8px 40px;}

.portfolio-container .sidebar {
  margin-left: 0;
  padding-top: 20px;}
.portfolio-container .sidebar h3 {
  font-size: 1.2em;}

.bottom {
  margin-top: 50px;}
.bottom #site-links {
    float: none;
    width: auto;}
.bottom #activity-feed {
    margin: 30px 0 0 0;}

#footer {
  margin: 20px auto 150px;
  padding-left: 0;
  width: auto;}
}

@media all and (max-width: 525px) {
.portfolio-container .header h3 {
  float: none;}
.portfolio-container .header ul {
  float: none;}
.portfolio-container .header li {
  padding: 0 10px 0 0;}

.portfolio-container .window {
  padding-top: 30px;}
.portfolio-container .window h1 {
  font-size: 1.7em;
  margin-bottom: 10px;}
.portfolio-container #jake-picture {
  height: auto;
  max-width: 100px;}
.portfolio-container .introduction {
  margin-right: 0;}

.portfolio-container .resume .main-pane h1 {
  font-size: 1.6em;}
.portfolio-container .resume .contact-card img {
  float: left;
  width: 140px;}
.portfolio-container .resume .contact-card .contact-content {
  margin-left: 150px;}
}