/* See https://www.w3schools.com/css/default.asp for help */

/* typical breakpoints for responsive pages */
/* 780px - 'medium'
/* 420px - 'small'


/* padding and borders don't add to box sizes */
/* set all paddings and margins to 0 */

* {box-sizing: border-box; padding: 0; margin: 0;}

img {border: 0;}


/*
This is an attempt to keep the footer at the bottom
of pages with minimal content. If the min-height of
.content is set to '100vh' (100% of the viewport height),
then the top of the footer (which is not in .content)
begins below the bottom of the viewport a number of
pixels equal to the height of the nav bar (which also
isn't in .content). So, the height of .content needs
to be reduced by the combined height of the nav bar
(currently 101px) and the footer (currently 371px).
*/
.content{min-height: calc(100vh - (101px + 371px));}


/* fonts */

@font-face{
	font-family: avenir-black;
	src: url("/fonts/avenir-black-webfont.ttf");
}

@font-face{
	font-family: avenir-light;
	src: url("/fonts/avenir-light-webfont.ttf");
}

@font-face{
	font-family: avenir-medium;
	src: url("/fonts/avenir-medium-webfont.ttf");
}



/* grid-view set-up */

/* implements 'clearfix' for .row elements */
.row::after, .clearfix::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



@media only screen and (max-width: 1000px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}


@media only screen and (max-width: 780px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}


/* set global attributes */

body{
	color: #5b6065;
  font-family: avenir-light, sans-serif;
  font-size: 100%;
  line-height: 1.43;
  margin: 0;
}

html{
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a{
    color: #ac172b;
    text-decoration: none;
}

a:hover, a:focus{text-decoration: underline;}



/* upper navigation from w3schools (edited) */

.topnav {
  max-width: 1315px;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #404145;
  text-align: center;
  text-transform: uppercase;
  padding: 10px 12px 0px;
  font: normal normal 500 1.25rem avenir-medium, sans-serif;
  position: relative;
  top: 62px;
}


/* fix some of the logo's characteristics */
.topnav a:first-child {
  padding: 10px 20px 5px 30px;
  margin: 0;
  top: 0;
}

/* RESPONSIVE .topnav ACTIONS CAN BE FOUND FURTHER DOWN */




/* search bar */

.topnav .search-container {
  position: absolute;
  top: 0;
  right: 0;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font: normal normal 500 1.25rem avenir-medium, sans-serif;
  border: none;
  background: #ddd;
  width: 210px;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #fff;
  font-size: 1.0625rem;
  border: none;
  cursor: pointer;
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



/* page contact and citation 'footer' */

/* place it at the bottoms of the .content div */
.page-contact{
position: absolute;
bottom: 0;
left: 25px;
}

.page-contact div{
font-size: .9rem;
line-height: .9rem;
}

@media screen and (max-width: 1000px) {
/* some of the page's padding goes away, so change the offset */
.page-contact{left: 5px;}
}

.page-contact div p:first-child{
padding-bottom: 10px;
}




main{
width: 100%;
background-image: linear-gradient(to right, rgb(244, 244, 245) 0%, rgb(209, 210, 211) 15%, rgb(209, 210, 211) 85%, rgb(244, 244, 245) 100%);
}


main div.content{
display: block;
position: relative;
max-width: 1315px;
background-color: white;
margin: 0 auto;
padding: 50px 60px 118px; /* large bottom to make room for the absolutely positioned citation and contact info */
}


h1.page-header{
border-bottom: 2px solid #a29f9f;
color: #ad172b;
font-family: avenir-medium;
font-size: 1.5063rem;
font-weight: 500;
line-height: 1.1;
text-transform: uppercase;
margin: 0 0 20px;
padding-bottom: 10px;
}


@media screen and (max-width: 780px) {
 /* reduce the gap after the seperation line when we're in small screen mode */
  .page-header{
    margin: 0;
  }
}




/* make images within 'content' generally responsive */

div.content img{
	max-width: 100%;
	height: auto;
}



/* stand-alone paragraphs in '.content' (immediate children of .content) */
div.content > p{
  max-width: 1050px;
  font-size: 1.2rem;
  margin: 1.2rem auto;
  text-indent: 1.2rem;
}


div.content > ul,
div.content > ol{
  max-width: 1050px;
	font-size: 1.2rem;
	margin: 0 auto;
/* 	list-style-position: inside; */
	padding-left: 2rem;
}

div.content > ul > li:not(:last-of-type),
div.content > ol > li:not(:last-of-type){
	padding-bottom: .4rem;
}

div.content > ul > li:last-of-type,
div.content > ol > li:last-of-type{
	padding-bottom: .8rem;
}

@media screen and (max-width: 780px) {
 /* add side space on small screens */
  div.content > p{padding-left: .8rem; padding-right: .8rem;}
  div.content > ul{padding-left: 2.8rem; padding-right: .8rem;}
  div.content > ol{padding-left: 2.8rem; padding-right: .8rem;}
}


div.content > p.center{
  text-indent: 0;
  text-align: center;
}

div.content > p.bold{
  font-weight: bold;
}

div.content > p.ni{
  text-indent: 0;
}

.nowrap{white-space: nowrap;}



/* fix what w3school's definition accidentally changed */
[class*="jl-col-"] {
  padding: 0;
}


.jl-col-left{
float: left;
width: 50%;
padding-right: 20px;
}

.jl-col-right{
float: left;
width: 50%;
padding-left: 20px;
}

@media screen and (max-width: 780px) {
  .jl-col-left, .jl-col-right{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}


.jl-col-1{
width: 100%;
}

.jl-col-2{
float: left;
width: 50%;
}

.jl-col-4{
float: left;
width: 25%;
min-width: 23%;
padding-right: 20px;
}


footer{
width: 100%;
background-image: linear-gradient(to right, rgb(244, 244, 245) 0%, rgb(209, 210, 211) 15%, rgb(209, 210, 211) 85%, rgb(244, 244, 245) 100%);
}

footer div.jlab-footer-background{
width: 100%;
background-image: linear-gradient(to right, #5b6064 0%, #5b6064 50%, #22292f 50%, #22292f 100%);
}

footer div.jlab-footer-content{
max-width: 1315px;
margin: 0 auto;
}

footer div.jlab-footer-left-container{
width: 865px;
background-color: #5b6064;
color: white;
float: left;
}

footer div.jlab-footer-left-content{
padding-left: 50px;
}

footer div.jlab-footer-resources{
font-size: 1.25rem;
text-transform: uppercase;
margin-bottom: 20px;
padding: 16px 0;
}

footer div.jlab-footer-left-links{
/*padding-right: 20px;*/
/* max-width: 23%; */
}

footer div.jlab-footer-left-links h2{
text-transform: uppercase;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.1;
padding-bottom: 10px;
}

footer div.jlab-footer-left-links li{
list-style: outside none none;
font-size: 0.875rem;
padding-bottom: 6px;
}

footer div.jlab-footer-left-container a{
color: #fff;
}

footer div.jlab-footer-left-container a:hover{
text-decoration: underline;
}

footer div.jlab-footer-left-bottom{
font-size: .875rem;
padding: 20px;
text-align: center;
text-transform: uppercase;
}

footer div.jlab-footer-right-container{
width: 450px;
background-color: #22292f;
color: white;
float: right;
padding-top: 20px;
padding-left: 40px;
padding-right: 15px;
}

footer div.jlab-footer-right-container p.address{
font-size: 1.25rem;
text-transform: uppercase;
margin-bottom: 2px;
}

footer div.jlab-footer-right-container p:nth-of-type(2){
padding-bottom: 15px;
}

footer div.jlab-footer-right-container p:nth-of-type(4){
padding-bottom: 20px;
}

footer div.jlab-footer-right-container p.address2{
font-size: 1.125rem;
margin-bottom: 2px;
}

footer div.jlab-footer-right-container li{
list-style: outside none none;
font-size: 0.75rem;
padding-bottom: 4px;
text-transform: uppercase;
}

footer div.jlab-footer-right-container div.extra-padding-left{
padding-left: 40px;
}

footer div.jlab-footer-right-container a{
color: #fff;
}

footer div.jlab-footer-right-container a:hover{
text-decoration: underline;
}





/* content areas stop growing once we hit 1314px */

@media only screen and (max-width: 1314px) {

 footer {background-image: none; background-color: rgb(209, 210, 211);} /* turns off the footer's gradient */
 footer div.scied-contact { width: 100%; }
 footer div.jlab-footer-content{ width: 100%; }
 footer div.jlab-footer-left-container{ width: 60%;}
 footer div.jlab-footer-left-content{padding-left: 30px;}
 footer div.jlab-footer-right-container{ width: 40%; }

}


/* footer goes from 4 columns to 2 columns */
@media screen and (max-width: 1000px) {
	.jl-smaller-screens{width: 50%; padding-bottom: 20px;}
}


/* footer goes from 2 columns to 1 column */
@media screen and (max-width: 780px) {
	.jl-smaller-screens{width: 100%; padding-bottom: 20px;}
	footer div.jlab-footer-left-container{width: 100%;}
	footer div.jlab-footer-right-container{width: 100%;}
	footer div.jlab-footer-right-container div.jl-col-1 div.jl-col-2{width: 100%;}
	footer div.jlab-footer-right-container div.jl-col-1 div.extra-padding-left{padding: 20px 0;}
}




/* When the screen is less than 1315 pixels wide, adjust the scied logo and the search box */
@media screen and (max-width: 1315px) {
  .topnav a:first-child {padding: 10px 20px 5px 30px}
  .topnav .search-container button {margin-right: 16px;}
}



/* When the screen is less than 1000 pixels wide, setup for displaying multi-row menu */
@media screen and (max-width: 1000px) {
  .topnav {padding-right: 270px;} /* mimic 'seeing' the absolutely positioned search box */
  .topnav a {top: 0;} /* lose the menu's vertical offset */
  .topnav a:first-child {padding-left: 20px;} /* shove the logo a bit to the left... */
  .topnav .search-container button {margin-right: 0} /* ...and the search bar a bit to the right */
  main div.content{padding: 50px 20px 88px;} /* reclaim some of the side margins */
}


/* When the screen is less than 780 pixels wide, hide all links, except for the first one ("SciEd Logo"). */
/*  Show the link that opens and closes the topnav (.icon). Adjust some other things. */
@media screen and (max-width: 780px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    color: #ac172b;
    font-size: 2.5rem;
  }
  .topnav {padding-right: 0;} /* get rid of the extra large padding that was used as a proxy for the search box */
  .topnav .search-container {display: none;}
  main div.content{padding: 15px 10px 88px;} /* reclaim some of the upper and side margins */

	footer div.jlab-footer-right-container{padding-left: 20px;}
	footer div.jlab-footer-left-content{padding-left: 20px;}

 /* gets rid of troublesome bottom border on search icon */
/* .topnav .search-container button:hover {
   border-bottom: none;
 } */
}


/* 'hamburger' icon to menu list is done here */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 780px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .search-container {position: static; display: block; padding: 0 10px;}
  .topnav .search-container button {float: none;}
}


@media screen and (max-width: 420px) {
  #myTopnav img{
    width: auto;
    height: 50px;
  }
  #myTopnav a:first-of-type{padding-left: 10px;}
  main div.content{padding-top: 5px;}
}


/* SciEd info in footer */

div.scied-lower-box{
	font-size: 1rem;
	font-weight: 500;
	padding-top: 0;
}

@media screen and (max-width: 780px) {
	div.scied-lower-box{
	padding-top: 0;
	padding-bottom: 15px;
	}
}






/* start general 'sideways' navigation between pages of a section */
/* like navigating between qa pages, etc. */

div.general-section-nav{
margin: 0 auto;
padding: 20px 0 0;
max-width: 1175px;
text-align: center;
font-size: 1.3rem;
line-height: normal;
}


div.general-section-nav p{
display: block;
}

div.general-section-nav div.left-general-nav-block,
div.general-section-nav div.right-general-nav-block{
padding-left: 0;
padding-right: 0;
}

div.general-section-nav div.left-general-nav-block p.nav-name,
div.general-section-nav div.right-general-nav-block p.nav-name{
max-width: 380px;
margin: 0 auto;
margin-top: 0.2rem;
}

div.general-section-nav p a{
color: black;
}

div.general-section-nav img{
max-width: 100%;
height: auto;
}

div.general-section-nav .nav-name{
font-size: .95rem;
}

/* end general sideways navigation */


/* turn on/off selected sections */
/* mainly used with 'sideways' navigation */

div.smallest-size{display: none;}

@media screen and (max-width: 780px) {
  div.desktop-size{display: none;}
  div.smallest-size{display: block;}

 
  /* puts additional space between the right and left arrows and the centered 'main index' text */
  /* might need to be adjusted section to section (qa, itselemental, etc. */
  /* those adjustments will be made in section-specific style sheets */
  div.general-section-nav.smallest-size div p a:nth-child(1) img{margin-right: 25px;}
  div.general-section-nav.smallest-size div p a:nth-child(3) img{margin-left: 25px;}
}

/* end this particular on/off selector */




/* database error messages */

#error{
font-family: avenir-medium, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
border: 3px solid #ea7b7b;
background-color: #fbeee9;
}

#error p{
	font-size: 1.1rem;
	font-weight: 100;
}

#error p.err{
padding: 15px 0;
text-align: center;
font-size: 1.4rem;
font-weight: 500;
}


/* google's search box on search page */
table.gsc-search-box{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 780px) {
  table.gsc-search-box{padding: 0;}
}