/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav {
  display: block; }

body {
  margin: 0;
  padding: 0 0 20px 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #333333;
  text-align: left;
  font-size: 1em; }

div, figure {
  margin: 0;
  padding: 0; }

a {
  color: #185b96; }

a:hover {
  text-decoration: none;
  cursor: pointer; }

/* HEADINGS */
h1, h2 {
  font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2em;
  clear: both;}

h2 {
  font-size: 1.25em;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 1.5em;
  margin-bottom: .5em;
  padding-bottom: 0;
  clear: both; }

h3 {
  font-size: 1em;
  font-weight: 700;
  margin-bottom: .5em;
  margin-top: 1.5em;
  padding-bottom: 0;
  clear: both; }

h2+h3 {
  margin-top: 1em;
}

h2 + p, h2 + ul {
  margin-top: .8em; }

.singleColumn h1:first-child, .main h1:first-child, .sidebar h2:first-child {
  margin-top: 0;
  padding-top: 0; }

p {
  font-size: 1em;
  line-height: 1.4em; }

em {
  font-style: normal;
  background-color: #f8fcbf; }
  
#intro em {
  background-color: transparent;
  font-weight: 700;
}

img {
  max-width: 100%;
  border: none; }
  
figure {
  margin-bottom: 2em;
}

figcaption a {
  color: #333;
  text-decoration: none;
}

#projectThumbnails figcaption {
  margin-top: .5em;
  padding-top: .2em;
  margin-bottom: .0;
  text-align: center;
  color: #333333;
}

th {
  text-align: left; }

li {
  margin-bottom: 1em; }

dt {
  font-weight: 700;
  margin-bottom: 1em;}

dd {
  margin-bottom: 1em;
}

/* LAYOUT */
#content, #headerContent {
  clear: both;
  padding: 0;
  margin: 0 1.5em 0 1.5em;}
  
.main {
  max-width: 45em;
}

.main, .sidebar {
  float: none;
  padding-left: 0;
}

.sidebar {
  margin-bottom: 2.5em;
}

.sidebar > :first-child {
  padding-top: 0; }

/* SITE HEADER */
#headerWrapper {
  margin-bottom: 2em;
  }

#logobar {
  padding: 3em 0 1.25em 0; }

#logobar p {
  margin: 0;
  padding: 0; }

#logobar a#logotype {
  font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #26623a;
  font-size: 2.75em;
  font-weight: 600;
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.65); }

#logobar #firstName {
  color: #40a361; }

#logobar #professionalRole {
  margin-left: .3em; }

/* NAVIGATION */
nav {
  margin: 0;
  padding: 0;
  text-align: left; }

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
  font-weight: 400; }

nav li, #contactLinks li, #footer li {
  display: inline;
  margin: 0;
  padding: 0; }

nav li a {
  height: 1.4em;
  margin: 0;
  padding: .35em .5em 0 .3em;
  text-decoration: none; }

nav li a {
  color: #26623a; }

nav li a:hover {
  text-decoration: underline; }

nav li a.active, nav li a.active:hover {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  cursor: default; }

.sidebar > #subnav li {
  display: block;
  margin-bottom: 1em;
}
  
#contactLinks a, .sidebar > #subnav a, #lowernav a {
  text-decoration: none;
  color: #185b96; 
}

#contactLinks a:hover, .sidebar > #subnav a:hover, #lowernav a:hover {
  text-decoration: underline;
}

.sidebar #subnav a.active, .sidebar #subnav a.active:hover {
  font-weight: 700;
  color: #333;
  text-decoration: none;
  cursor: default;
}

.sidebar #subnav ul {
  padding-left: 0;
  list-style-type: none;}

#lowernav {
  margin-top: 2em;
}

#lowernav p {
  text-align: right;
}

/* MISC */

img.outline {
  border: 1px solid #999; }

.clear {
  clear: both; }

.skiplink {
  display: none; }

.screenshot {
  border: 1px solid #ccc;
}

/* HOME */
#intro ul {
  list-style-type: none;
  padding-left: 0;
}

#projectThumbnails > figure {
  float: none;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 2em;
}

#projectThumbnails > figure:last-of-type {
  border-bottom: 0;
}


/* PORTFOLIO */
h1#top {
  margin-bottom: .25em;
}

p#company {
  margin-top: 0;
}

#summary h2, #summary p {
   margin: 0;
   font-size: 1em;
}

#summary p {
   margin-bottom: 15px;
}

/* RESUME */
#resume h3#maternityLeave {
  font-weight: 400;
}
#resume h3 > span {
  font-weight: 400;
}

#resume h3 + p {
  margin-top: 0;
  margin-bottom: .5em;
}

#experience h3 {
  margin-top: 2em;
  border-top: 1px solid #e6e6e6;
  padding-top: 1em;
  margin-bottom: 0;
}

#experience h3:first-of-type {
  margin-top: 1em;
  border-top: 0;
  padding-top: 0;
}

#contactLinks {
  padding-left: 0;
  font-size: .85em;}

#contactLinks li {
  margin-right: .8em;
  padding-right: .8em;
  border-right: 1px solid #555; }
  
#contactLinks li:last-child {
  border-right: 0;
}

 /* ABOUT */
  #about figure {
    margin: auto auto 2em auto;
    max-width: 15em;
}
  #about figure img {
    border-radius: 50%;
}

/* FOOTER */
footer, #footer {
  border-top: 1px dotted #c2c2c2;
  font-size: .85em;
  margin-top: 3em;
  padding: 1.5em 0 2.5em 0;
  clear: both; }

#date {
  display: inline; }


@media screen and (min-width: 30em) {
  #logobar a#logotype {
    font-size: 3em;
    padding-right: 2em;
  }
}

@media screen and (min-width: 40em) {
  #content, #headerContent {
    padding: 0 .9em 0 .9em;
    margin: 0 2.2em 0 2.2em; }

  .sidebar li a.active, .sidebar li a.active {
    font-weight: 700;
  }

  h1 {
    font-size: 1.8em;
    line-height: 1.3em; }

  p {
    line-height: 1.5em; }

  .container {
    margin: 0 auto; }

  #projectThumbnails > figure {
    float: left;
    width: 45%;
    margin-bottom: 3em;
  }
  
  
  #projectThumbnails > figure {
    width: 43%;
    padding: 2%;
    background-color: #f4f4f4;
  }
  
  #projectThumbnails > figure:hover {
    background-color: #e9e9e9;
  }
  
  #projectThumbnails figure:nth-child(odd) {
    margin-right: 5%;
  }
  
  #projectThumbnails > figure {
    border-bottom: 0;
  }
  
  #summary div {
    float: left;
    width: 45%;
  }

  #summary div:nth-child(odd) {
    margin-right: 10%;
  }
  

@media screen and (min-width: 60em) {
  #content, #headerContent {
    max-width: 75em;
    margin: 0 auto 0 auto;
  }

  #headerWrapper {
    padding-bottom: 1.5em;
    background: #f4f4f4;
    border-bottom: 1px solid #e6e6e6;
  }
  
  #intro, #titleArea {
    margin-left: 3em;
    margin-bottom: 2em;
    max-width: 45em;
  }
  
  #projectThumbnails {
    margin: 0 auto 0 3em;
  }

  #logobar {
    float: left;
    margin-left: 3em;
    padding-bottom: 0;
    text-align: left;
  }

  #navWrapper {
    padding-top: 3.3em;
  }

  .main {
    margin: 0 0 0 3em;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    width: 63%;
    padding-bottom: 2.2em;
    padding-right: 3em; }

    h2 {
    margin-top: 2em;}
    
    
  #resume > .main > h2:first-of-type {
    margin-top: 0;
  }

  .sidebar {
    float: right;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    width: 25%;
    margin-right: 3em;}
    
    #resume .sidebar {
      float: left;
    }
  
  #footer {
    margin-left: 3em;
  }
  
}