/* glossary index page 4 and 2-column versions */

div.glossary-4-column-layout{display: block;}
div.glossary-2-column-layout{display: none;}

/* switch from 4-column to 2-column */

@media screen and (max-width: 1180px) {
	div.glossary-4-column-layout{display: none;}
	div.glossary-2-column-layout{display: block;}
}



/* fix 2-column formatting when we go to single column mode (currently at 780px) */
@media screen and (max-width: 780px) {
  .glossary-2-column-layout > div.col-6.indexpage.glossary-index.right-side > p:nth-child(1){
    margin-top: 0;
  }
}



/* additional navigation */

/* normally off */
div.glossary-medium{display: none;}


/* turn on at this point */
@media screen and (max-width: 1070px) {
	div.desktop-size{display: none;}
	div.glossary-medium{display: block;}
}


/* Turn off 'medium' when we get really small. */
/* The regular 'div.smallest' definition, */
/* found in hp_2020.css (or similarly named file) */
/* takes over at this point. */
@media screen and (max-width: 780px) {
	div.glossary-medium{display: none;}
}


/* end additional navigation */




/* additional paragraph and other elements */

/* glossary item title and associated credit line */

div.content > p.glossary-title{
	text-indent: 0;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

div.content > p.glossary-title.glossary-yes-credit{
	margin-bottom: 0;
}

div.content > p.glossary-credit-line{
	text-indent:0;
	font-size: 1.2rem;
	text-align: center;
	margin-top: 0;
}




/* 'step' separators */
/* passed through from the database as '#step' */
div.content > p.step{
	text-indent: 0;
	padding-left: 0.6rem; /* use padding rather than indent to keep the text flush left if the line wraps */
	font-weight: bold;
	margin-top: 2rem;
}


/* 'substep' */
/* passed through from the database as '#substep' */
div.content > p.substep{
	text-indent: 0;
	padding-left: 1.2rem; /* use padding rather than indent to keep the text flush left if the line wraps */
	font-weight: bold;
	margin-top: 2rem;
}


/* 'list' and 'list-more-spacing' */
/* These are lines with extra indent, giving the appearance of an unordered list */
div.content > p.list,
div.content > p.list-more-spacing{
	text-indent: 0;
	padding-left:3rem;
	padding-right:3rem;
	margin-top: 0;
	margin-bottom: 0;
}

div.content > p.list-more-spacing{margin-bottom: 1rem;}




/* images that go along with the explanation text */
div.content > p.img{
	text-indent: 0;
	text-align: center;
	margin-top: 4rem;
	margin-bottom: 4rem;
}

/* reduce the top and bottom margins when the screen starts to get small */
@media screen and (max-width: 780px) {
	div.content > p.img{margin-top: 2rem; margin-bottom: 2rem;}
}

/* make the images responsive */
/* the simulator was fine without this, but my phone needs it */
div.content > p.img > img{
	max-width: 100%;
	height: auto;
}


/* captions that appear under images */
div.content > p.caption{
	text-indent: 0;
	margin: -4rem auto 4rem;
	font-size: 1rem;
	text-align: center;
	max-width: 650px; /* roughly half of the max width of the content section */
}

/* reduce the top and bottom margins when the screen starts to get small */
/* needs to mirror with what's being done with p.img */
@media screen and (max-width: 780px) {
	div.content > p.caption{margin-top: -2rem; margin-bottom: 2rem; max-width: 600px;}
}



/* centered text */
/* 'ex' originally meant 'example' */
/* the style name is coded in the database (with a leading '#ex') */
div.content > p.ex{
	text-align: center;
	text-indent: 0;
	margin-top: 25px;
	margin-bottom: 25px;
}

div.content > p.ex.first{margin-bottom: 0; line-height: normal;}
div.content > p.ex.mid{margin-top: 0; margin-bottom: 0; line-height: normal;}
div.content > p.ex.last{margin-top: 0; line-height: normal}

/* change the alignment to 'left' on small screens */
@media screen and (max-width: 420px) {
	div.content > p.ex{text-align: left;}
}


/* editor's note */
div.content > p.editor-note{
	text-indent: 0;
	text-align: justify;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-size: 1rem;
}




/* glossary tables */

div.content > div.glossary-table{
	padding-top: 20px;
}

div.content > div.glossary-table > table{
	margin: 0 auto 25px;
	text-align: center;
	border-spacing: 30px 10px;
	font-size: 1.2rem;
}

div.content > div.glossary-table p.glossary-table-title{
	font-size: 1.3rem;
	font-weight: bold;
	margin: 0 0 5px;
	text-align: center;
}

div.content > div.glossary-table td{
	vertical-align: top;
}

div.content > div.glossary-table td.glossary-table-data-title{
	font-weight: bold;
	vertical-align: top;
}

div.content > div.glossary-table .small, .small{
	font-size: 0.75rem;
}

div.content > div.glossary-table .right{
	text-align: right;
}


div.content > div.glossary-table .left{
	text-align: left;
}






/* embedded video */

.video{padding: 2rem;}


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    border: 1px solid black;
}

@media screen and (max-width: 780px) {
  .video{padding: .25rem;}
}


/* end additional paragraph and other elements */