* {
    box-sizing: border-box;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

/* default text settings */
body {
    font-weight: 400;
    font-size: 13px;
    line-height: 175%;
    color: #111;
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
}

/* keep paragraphs at max width, leave a margin at the top */
p { max-width: 42rem; margin: 0.5em 0; }

hr { 
  max-width: 42rem; 
  margin: 0.5em 0em 2em 0em; 
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #bbb);
}

#projects hr {
  max-width: 100%;
}

/* setup page structure */

#container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

#mast {float: left; width: 20%; min-width: 150px; padding: 1em;}
#content {float: right; height: 100%; width: 80%; padding: 0em 1em 0em 1em;}

article {
  margin-top: 1em;
}
/* style all links */


/* structure mast's header/nav section */
/* style cemcom logo */
header h1 {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
}

/* highlight the CEMCOM */
header h1 em {
  color: #555;
  font-style: normal;
}

header h1 a{
  text-decoration: none;
  color: #bbb;
}

/* no hover styling for "logo" */
header h1 a:hover   { color: #bbb; border: 0;}


/* style & structure navigation tools */
nav { 
  color: #ccc;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  margin-top: 2em;
}
nav li { list-style: none; }
nav li { margin-bottom: 0.5em; }
nav li:before { content: " / "; }

nav a {
    color: #274B95;
    text-decoration: none;  
    border-bottom: 1px solid #274B95;
    line-height: 24px;
}
nav a:visited  { color: #274B95; }
nav a:hover   { color: #F07241; border-bottom: 1px solid #F07241;}
nav a:active  { color: #000}
nav a.current { color: #000; border-bottom: 1px solid #F07241;}

/***********************************/


/* structure content section *******/

#content { }

#content h1, h2, h3, h4 {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  color: #111;
}

/* setup page title */
#content h2.title {
  font-size: 20px;
  margin: 0em;
  padding: 1em 0.5em 2em 0em;
}

/* scale header sizes */
#content h1 { font-size: 150%; }
#content h2 { font-size: 133%; }
#content h3 { font-size: 125%; }
#content h4 { font-size: 100%; }

/* top header should be excluded from the margins applied to subsequent ones */
#content h1:first-child { margin-top: 0em; }

/* 
  for home (or any) page, make a styling for image caption if there is an headline image 
  this requires the markdown to have an 
    - img first 
    - then a following *emphasised caption*
*/

#content img:first-of-type {
  width: 100%;
}

img:first-of-type + em {
  color: #111;
  display: block;
  text-align: right;
  margin-bottom: 2em;
  line-height: 100%;
  font-weight: 300;
  font-size: 1em;
}


/* structure specific pages */

/* clear fix floating "cells" for projects & people views */
.tabular:after {
  content: "";
  display: table;
  clear: both;
}


/* ****** Project pages ********/
#projects figure {  margin-bottom: 1em; }

#projects section {
  display:inline-block;
  float: left;
  width: 50%;
  padding: 2em;
  height: 540px; /* this is gonna be trouble later */
  overflow: hidden;
  margin: 0 auto;
}


/* view of one project */

/* ****** People view ********/

/* cap image size of each person */
#people img { max-width: 120px; height: auto; }

/* each person's content block*/
div.person {
  width: 66%;
  float: left;
  margin-bottom: 2em;
}

/* neither person or projects header should have a top margin. */
.person h3, #projects h3 { margin: 0em; } 

#content h3 a {
  color: #111;
  text-decoration: none;  
  border-bottom: 0;
}

#content h3 a:visited  { color: #111; }
#content h3 a:active  { color: #111; }
#content h3 a:hover   { color: #111; border-bottom: 2px solid #111;}

div.person {
  width: 100%;
  float: left;
  margin-bottom: 4em;
}

/* cap image size of each person */
/* keep a bit of space between the person and their description */

/* keep the person's image to the left */
div.person figure { float: left; width: 20%; max-width: 120px;}

div.person figcaption { 
  display: block; 
  float: left; 
  width: 70%; 
  padding-left: 1em; }

/* publications */

#publications ul { max-width: 50rem; margin: 0em 2em 0em 2em;}
#publications li { margin-bottom: 0.25em; } /* more space between references */
#publications em { font-weight: 700; font-style: normal}

/* responsive adjustments to follow */


  
@media (max-width: 720px) {
  #mast {
    float: none;
    width: 100%;
    content: "";
    display: table;
    clear: both;
  }
  #content {
    width: auto;
    float: none;
  }
  
  header {
    float: left; 
    display: block; 
  }
  
  nav ul {	columns: 3}
  nav {float: right;   margin-top: 0em;}
  nav li {  margin-top: 0em; }
/*
    float: left;
    display: inline;
*/  
  
  #projects section {
    display:inline-block;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0em 0em 3.5em 0em;
    height: auto;
  }
  
  #container {
    width: 100%;
    display: block
  } 
  
  /* setup page title */
  #content h2.title {
    font-size: 20px;
    margin: 0em;
    padding: 0.5em 0.5em 0.5em 0em;
  }
  
}