/* Layout Styles */
.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: normal;
  text-align: center;
}
  
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
  
.header {
  background: white;
  padding: 10px;
}
  
.footer {
  background: white;
}
  
.main {
  text-align: left;
  background: white;
}
  
.sidemenu {
  background-color: #deeaf6;
}
/* /Layout Styles */

/* menu navigation bar */
.navigation {
  list-style: none;
  margin: 0;
  background: #12127d;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: yellow;
  font-family: Arial, Helvetica, sans-serif;
}

.navigation a:hover {
  color: black;
  background: #c8c8ff;
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }

  .navigation a {
    text-align: center;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .navigation li:last-of-type a {
    border-bottom: none;
  }
}
/* /menu navigation bar */

/* 
  changes based on screen width 
  see navigation bar section above for other changes
*/
@media all and (min-width: 600px) {
  .aside { flex: .75 0 0; }
}
  
@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .sidemenu { order: 1; } 
  .main    { order: 2; }
  .footer  { order: 4; }
}
/* changes based on screen width */

body {
  padding: 1em; 
}

/* header content */
.title {
  text-align: left;
  margin-left: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
}
/* /header content */

/* 
  plain text left content (eg about page) 
  Use this as one of two main div tags
  The other one to use is resume-content 
  for a centered page

  ToDo? rename these as left and center content?
*/
.normal-content {
  font-weight: normal;
  width: 90%;
  text-align: left;
  margin-left: 30px;
}

.margins-15 {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 25Px;
}

/* side menu */
.sidebuttons {
  width: 95%;
  text-align: center;
}

.sidebuttons ul {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}

.sidebuttons li {
  margin-top: 0px;
  margin-right: -20px;
  margin-bottom: 0px;
  margin-left: -20px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  display: block;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
  font-family: Arial, Helvetica, sans-serif;
}

.sidebuttons li a {
  color: yellow;
  background-color: #12127d;
  border-top-width: 1px;
  border-top-style: outset;
  border-top-color: #9191ff;
  border-right-width: 1px;
  border-right-style: outset;
  border-right-color: #9191ff;
  border-bottom-width: 1px;
  border-bottom-style: outset;
  border-bottom-color: #9191ff;
  border-left-width: 1px;
  border-left-style: outset;
  border-left-color: #9191ff;
  text-decoration: none;
  display: block;
}

.sidebuttons li a:hover {
  color: black;
  background-color: #c8c8ff;
}

.sidemenuleft {
  text-align: left;
}

.side-menu-line {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 60%;
  height: 2px;
  background-color: #12127d; 
  border: none;
}

.side-frame {
  border: none;
  width: 100%;
  height: 750px;
}
/* /side menu */

/****** Resume Styles ******/
.resume-content {
  font-weight: normal;
  width: 90%;
  text-align: center;
}

.small-content {
  text-align: left;
  font-size: xx-small;
  margin-left: 60px;
}

/* used only once */
.resume-title {
  font-size: xx-large;
  font-weight: bold;
}

/* used only once */
.resume-sub-title {
  font-size: normal;
  font-weight: normal;
}

.resume-section-title {
  font-size: normal;
  font-weight: bold;
}

.resume-block-text {
  text-align: justify;
  margin: 0 auto;
  width: 93%;
}

.resume-line {
  width: 60%; 
  height: normal; 
  color: black; 
  border-style: solid; 
  margin-left: auto; 
  margin-right: auto;
  margin-bottom: 15px;
}

.resume-experience-flex {
  width: 93%;
  margin-left:auto; 
  margin-right:auto;
  display: flex; 
  justify-content: space-between;  
}

.bold {
  font-weight: bold;
}

.small-text-flex {
  display: flex;
  text-align: left;
  width: 93%;
}

.small-flex-col-width {
  flex: 0 0 10em;
}
/****** /Resume Styles ******/

/* use this in a default mode? */
.border-none table {
  border: none
}

.border-blue td,th,table {
  border: 1px solid #12127d;
}

.deco-table table {
  width: 100%;
  border-collapse: collapse;
}

.deco-table th,caption {
  background: #12127d;
  color: yellow;
  font-weight: bold;
}

.table-thirds td:nth-child(1) {
  width: 33%;
}

.table-thirds td:nth-child(2) {
  width: 33%;
}

.lookout-table-widths td:nth-child(1) {
  width: 30%;
}

.lookout-table-widths td:nth-child(2) {
  width: 50px;
  text-align: center;
}

.lookout-table-widths td:nth-child(3) {
  width: 50px;
  text-align: center;
}

.lo-stats-table-widths td:nth-child(1) {
  width: 200px;
}

.lo-stats-table-widths td:nth-child(2) {
  width: 40px;
}

.lo-stats-table-widths td:nth-child(3) {
  width: 200px;
}

.lo-stats-table-widths td:nth-child(4) {
  width: 40px;
}

#caption-link {
  font-weight: normal;
}
  /* unvisited link */
  #caption-link a:link {
    color: white;
  }

  /* visited link */
  #caption-link a:visited {
    color: white;
  }

  /* mouse over link */
  #caption-link a:hover {
    color: hotpink;
  }

  /* selected link */
  #caption-link a:active {
    color: hotpink;
  }

.nav-table-links {
  font-weight: normal;
}

/* unvisited link */
.nav-table-links a:link {
  color: cornflowerblue;
  text-decoration: none;
}

/* visited link */
.nav-table-links a:visited {
  color: cornflowerblue;
  text-decoration: none;
}

.nav-table-links a:hover {
  background-color: #12127d;
  color: yellow;
  font-weight: bold;
  text-decoration: none;
}

.underline-table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
}

.underline-table table {
  width: 90%;
}

.underline-table th {
  border: none;
  padding-left: 10px;
}

.underline-table td {
  border-bottom: 1px solid black;
  padding-left: 10px;
}

.underline-table tr:nth-child(even) {
  background: #deeaf6;
}

.faq-question {
  color: red;
  font-weight: bold;
}

.faq-answer {
  margin-top: -15px;
}

.highlight {
  background-color: yellow;
  font-style: italic;
}

.small-wingding {
  font-size: x-small;
  vertical-align: middle;
  margin-left: 2px;
}

.coordinates-right {
  float: right; 
  margin-left: 40px;
  border:1px solid black;
  padding:10px;
}

.coordinates-pic-left {
  float: left;
  margin-right: 40px;
  margin-bottom: 40px;
}

.image-right {
  float: right; 
  margin-left: 20px;
}

.image-left {
  float: left; 
  margin-right: 20px;
}

.clear-float {
  clear: both;
}

* {
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.img-container {
  float: left;
  width: 35%; /* three containers (use 25% for four, 33.33% for three and 50% for two, etc) */
  padding: 5px; /* if you want space between the images */
}

/*
.img-container1 {
  float: left;
  width: 50%; 
  padding: 5px;
}
*/

.img-container-dbl {
  float: left;
  width: 50%; /* three containers (use 25% for four, 33.33% for three and 50% for two, etc) */
  padding: 5px; /* if you want space between the images */
}

.img-container-trpl {
  float: left;
  width: 33%;
  padding: 5px;
}

.img-container-single {
  width: 75%;
  margin-bottom: 20px;
}


.tutorial-arrow {
  position: relative;
  display: inline-block;
}

.tutorial-arrow .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.tutorial-arrow:hover .img-top {
  display: inline;
}

.tutorial-table {
  width: 100%;
  border-collapse: collapse;
}

.tutorial-table td:nth-child(1) {
  width: 75px;
  vertical-align: text-top;
}

.tutorial-table td:nth-child(3) {
  width: 75px;
  vertical-align: text-top;
}

.tutorial-arrow-image {
  width: 75px;
}

.space-before-arrow-image {
  margin-top: 150px;
  position: fixed;
}

/* Alternating left-right images and text
.flex-img-txt {
  display:flex; 
  margin-bottom: 20px;

}

.flex-img-txt-orig {
  display:flex; 
  flex-wrap: nowrap; 
  align-items: right
}

Experimental */

/* detritus

.large-header th,caption {
  line-height: 28px;
}

.codebox {
  border:1px solid black;
  background-color: white;
  white-space: pre-line;
  padding:10px;
  font-size:0.9em;
  display: inline-block;
}

.half-width table {
  width: 50%;
}

 */

/* home page content (alt right/left pics table) 
replacing this functionality with flexbox
.left-right-pics {
  font-weight: normal;
  width: 90%;
}

.left-right-pics table {
  padding: 15px;
  border: none;
}

.left-right-pics td {
  padding-bottom: 30px;
}


.home-image-right {
  float: right; 
  margin-left: 20px;
}

.home-image-left {
  float: left; 
  margin-right: 20px;
}
 */

/* /home content */

/****** Resume Detritus ******/
/*
.resume-content table {
  border: none;
  margin-left: auto; 
  margin-right: auto;  
  width: 93%;
}

.resume-content th {
  font-weight: bold;
  border: none;
}

.resume-content td:nth-child(2) {
  text-align: right;
}

.resume-content td:nth-child(1) {
  text-align: left;
} */

/* .small-content table {
  width: 85%;
  margin-left: 5%;
  border: none;
}

.small-content th {
  text-align: center;
  font-size: x-small;
  font-weight: bold;
  border: none;
} */

/* 
.resume-experience-table {
  width: 93%;
  font-weight: bold;
  margin-left:auto; 
  margin-right:auto;
}

todo: replace these two styles with the td:nth-child(x) methodology
.right {
  text-align: right;
}

.left {
  text-align: left;
}
*/

/****** /Resume Detritus ******/