style.scss

---
---

//
// IMPORTS
//

@import "reset";
@import "variables";
// Syntax highlighting @import is at the bottom of this file

/**************/
/* BASE RULES */
/**************/

html {
  font-size: 100%;
}

body {
	background: $white;
  font: 15px/1.5 $helvetica; // 14px/1.4
  color: $darkGray;
}

//max-width: 740px; then 795 px:

.container {
  margin: 0 auto;
  max-width: 880px; // 835px TA original size // 900px a tad too big
  padding: 0 10px;
  width: 100%; 
}

.container-subnav {
  margin: 0 auto;
  max-width: 880px; // 835px TA original size  // 900px a tad too big
  padding: 0 10px;
  width: 100%;
  background-color: $lightGray;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $helveticaNeue;
  color: $darkerGray;
  font-weight: bold;

  line-height: 1.7;
  margin: 1em 0 15px;
  padding: 0;

  @include mobile {
    line-height: 1.4;
  }
}

h1 {
  font-size: 24px;  // 20px;
  font-weight: 300; // TA added
  color: #00003f; // Normally no color here
  a {
    color: inherit;
  }
}

h2 {
  font-size: 22px; // 18px;
  font-weight: 300; // TA added
  color: #00003f; // Normally no color here
  a {
    color: inherit;
  }
}

h3 {
  font-size: 19px; // 16px;
  font-weight: 300; // TA added
  color: #00003f; // Normally no color here
}

h4 {
  font-size: 14px;
  color: #00003f; // Normally $gray
}

p {
  margin: 15px 0;
}

a {
  color: $blue;
  text-decoration: none;
	cursor: pointer;
  &:hover, &:active {
    color: $blue;
  }
}

ul, ol {
  margin: 15px 0;
  padding-left: 30px;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ol ul, ul ol, ul ul, ol ol {
  margin: 0;
}

ul ul, ol ul {
  list-style-type: circle;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: bold;
}

img {
  max-width: 100%;
}

table-top {
  font-family:    Arial, Helvetica, sans-serif;
  text-align:center;
  font-size: 16px; // 16px;
  font-weight: 350; // TA added
  color: #00003f; // Normally no color here
}

table-bottom {
  font-family:    Arial, Helvetica, sans-serif;
  text-align:center;
  font-size: 14px; // 16px;
  font-weight: 350; // TA added
  color: #00003f; // Normally no color here
  font-weight:    bold;
}

// Fixes images in popup boxes from Google Translate
.gmnoprint img {
  max-width: none;
}

.date {
  font-style: italic;
  color: $gray;
}

// Specify the color of the selection
::-moz-selection {
  color: $black;
  background: $lightGray;
}
::selection {
  color: $black;
  background: $lightGray;
}

// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*********************/
/* LAYOUT / SECTIONS */
/*********************/

//
// .masthead
//

.wrapper-masthead {
  margin-bottom: 50px; // default 50px
}

.masthead {
  padding: 20px 0;
  // border-bottom: 1px solid $lightGray;

  @include mobile {
    text-align: center;
  }
}

.site-avatar {
  float: left;
  width: 60px;  // TA: 70px; default, 85px recently
  height: 60px; // TA: 70px; default, 85px recently
  vertical-align: middle; // TA: not here by default
  margin-right: 15px;

  @include mobile {
    float: none;
    display: block;
    margin: 0 auto;
  }

  img {
    border-radius: 5px;
  }
}

.site-info {
  float: left;

  @include mobile {
    float: none;
    display: block;
    margin: 0 auto;
  }
}

.site-name {
  margin: 0;
  //color: #00003f; //$darkGray
  color: #FFFFFF;
  cursor: pointer;
  font-family: $helveticaNeue;
  font-weight: 300;
  font-size: 28px; // TA: 28px default -- changed to 30px or 32px
  letter-spacing: 1px;
}

.site-description {
  margin: -5px 0 0 0;
  // color: $gray; //$gray
  color: #f6f6f6;
  font-family: $helveticaNeue;
  font-weight: 300;
  font-size: 18px; // 20px default -- changed to 22px -- changed to 20px (most of 2022)

  @include mobile {
    margin: 3px 0;
  }
}

nav {
  float: left;
  margin-top: 23px; // @TODO: Vertically middle align
  font-family: $helveticaNeue;
  font-size: 16.5px; // 16
  font-weight: 320; // 320
  //color: #00003f; // TA: not here by default
  color: #FFFFFF;
  line-height: 2.0; // TA: added new

  @include mobile {
    float: none;
    margin-top: 9px;
    display: block;
    font-size: 16px;
  }

  a {
    margin-left: 7px;
    margin-right: 7px; // normally on, 20px, margin-left
    // color: #00003f; // $darkGray
    color: #FFFFFF;
    text-align: left;
    font-weight: 320;
    letter-spacing: 1px;

    @include mobile {
      margin: 0 10px;
      color: $blue;
    }
  }
}

sub-nav {
  float: left;
  // margin-top: 5px; // @TODO: Vertically middle align
  font-family: $helveticaNeue;
  font-size: 15px;
  color: #00003f; // TA: not here by default
  line-height: 2.0; // TA: added new
  // margin-bottom: 15px;
	
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background-color: #FAFAFA; // #E4E5EA; // #739AC5; //#FAFAFA; 
  // background-color: #eeeeee;
  // background-color: #f2f2f2;
	
  width: 100%;
	
  @include mobile {
    float: none;
    // margin-top: 5px;
    // margin-bottom: 15px;
    display: block;
    font-size: 16px;
  }

  a {
    margin-left: 7px;
    margin-right: 7px;
    color: #00003f; // $darkGray
    text-align: left;
    font-weight: 300;
    letter-spacing: 1px;

    @include mobile {
      margin: 0 10px;
      color: $blue;
    }
  }
}

sub-nav-title {
  float: left;
  // margin-top: 5px; // @TODO: Vertically middle align
  font-family: $helveticaNeue;
  font-weight: 300; // TA added
  font-size: 24px; //28px big
  color: #00003f; // TA: not here by default
  line-height: 2.0; // TA: added new
  // margin-bottom: 15px;
	
  //border-top: 1px solid #ddd;
  //border-bottom: 1px solid #ddd;
  //border-left: 1px solid #ddd;
  //border-right: 1px solid #ddd;
  //background-color: #eeeeee;
  //background-color: #00003f;
	
  width: 100%;
	
  @include mobile {
    float: none;
    // margin-top: 5px;
    // margin-bottom: 15px;
    display: block;
    font-size: 24px;
  }

  a {
    //margin-left: 15px;
    margin-right: 5px;
    //color: #f2f2f2; // $darkGray
    color: #00003f;
    text-align: left;
    font-weight: 310;
    letter-spacing: 1px;

    //@include mobile {
    //  margin: 0 10px;
    //  color: $blue;
    //}
  }
}

.wrapper-subnav {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: $lightGray;
}



.side-by-side-wrapper {
    width:830px;
    margin: 0 auto;
}

#block1 {
    float:left;
    width: 380px;
}

#block2
{
    float:right;
    margin: 10px 20px;
    padding: 20px;
    width: 380px;
}

//
// .main
//

.posts > .post {
  padding-bottom: 2em;
  border-bottom: 1px solid $lightGray;
}

.posts > .post:last-child {
  padding-bottom: 1em;
  border-bottom: none;
}

.post {
  blockquote {
    margin: 1.8em .8em;
    border-left: 2px solid $gray;
    padding: 0.1em 1em;
    color: $gray;
    font-size: 22px;
    font-style: italic;
  }

  .comments {
    margin-top: 10px;
  }

  .read-more {
    text-transform: uppercase;
    font-size: 15px;
  }
}

.wrapper-footer {
  margin-top: 50px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: $lightGray; 
}

.wrapper-header {
  // border-top: 1px solid #ddd;
  // border-bottom: 1px solid #ddd;
  // background-color: $lightGray;
  border-top: 1px solid #00003f;
  border-bottom: 1px solid #00003f;
  background-color: #00003f;
}

footer {
  padding: 20px 0;
  text-align: center;
}

// For boxes side by side https://stackoverflow.com/questions/23737427/how-to-put-two-iframes-side-by-side/23737699 

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

.boxright{
    float:left;
    margin-right:200px;
}

.boxrow{
}

#wrapper { 
    width: 750 px; 
    height: auto; 
    margin: 0 auto;
} 

.clear{
    clear:both;
}





/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.protocolmain {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


.flex{
  display:flex;
}


#content, html, body {
    height: 98%;
}
#leftNEW {
    float: left;
    width: 15%;
    //background: red;
    height: 100%;
    overflow: scroll;
}
#rightNEW {
    float: left;
    width: 85%;
    //background: blue;
    height: 100%;
    overflow: scroll;
}

pre code {
  overflow-x: scroll;
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 10px;
}

newcode { 
    background: hsl(220, 80%, 90%); 
}

newpre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}


// Settled on moving the import of syntax highlighting to the bottom of the CSS
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
@import "highlights";
@import "svg-icons";