/* SciEd home page and primary index pages */

/* the interior double columns */
.colidx-6{width: 50%;}
@media screen and (max-width: 550px) {
	.colidx-6{width: 100%;}
}

/* 1st column items (photo, intro text and address) */
.intro img{
max-width: 100%;
height: auto;
}

.intro h1{
color: #ad172b;
font-family: avenir-light;
font-size: 1.2rem;
font-weight: 100;
text-transform: uppercase;
margin-top: 10px;
}

.intro p{
margin-top: 10px;
font-size: 1.1rem;
line-height: 1.76rem;
}

.scied-address p{
padding-top: 20px;
text-align: center;
}


/* 2nd column items (quick links, announcements) */

.links p{
padding-bottom: 2px;
}

.links .title{
color: #ad172b;
text-transform: uppercase;
padding: 10px 0 5px;
margin-top: 10px;
border-top: 2px solid #aaaaaa;
}

.links .title:first-child{
margin-top: 0;
}

.links a{
color: #5b6065;
}

/* add a border, among other things, around the frostbite theater image */
.links img{
border: 1px #5b6065 solid;
max-width: 100%;
height: auto;
padding: 0;
margin: 5px 0;
}

/* multiple deadlines get mooshed together */
/* a 10px bottom margin will overlap the 10px top margin from the following 'title' paragraph */
p.deadline{margin-bottom: 10px;}

/* main index pages */

.left-side{
padding: 0 20px 0 0;
}

.right-side{
padding: 0 0 0 20px;
}

/* change the padding when we go to single column mode */
@media screen and (max-width: 780px) {
  .left-side, .right-side{
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* sometimes, an index page will have a paragraph or two between the page header and the content columns */
/* see, for instance, /indexpages/paper.html or /jlab_vft/index.html */
/* this is intended to add space after the final paragraph */
/* the typical spacing for paragraphs is controlled in main.css */
div.content > p:last-of-type{
 margin-bottom: 2rem;
}




/* column headers are h2 */
div.indexpage > h2{
text-align: center;
font-size: 1.25rem;
}

/* give extra top margin to all but the first h2 */
div.indexpage > h2:not(:first-child){
margin-top: 2.375rem;
}

div.indexpage > p{
margin: 0.7rem 0;
}


@media screen and (max-width: 780px) {
 /* give all h2 elements the same spacing when we're in small screen mode */
  div.indexpage > h2{
    margin-top: 1.4rem;
  }
}

/* 'show description' link that comes after some headers */
h2 + p.showdesc{
text-align: center;
font-size: .8rem;
margin: 0 0 .8rem;
}


/* column sub-headers are h3 */
div.indexpage > h3{
text-align: center;
font-size: 1rem;
margin-bottom: 10px;
}

/* give extra top margin to all but the first h3 */
div.indexpage > h3:not(:first-child){
margin-top: 1rem;
}

/* selects 'interior double column' lists items */
/* this was also selecting question list items on the qa index page */
h2 ~ div > div.indexpage > p {margin: 0 0 .6rem 0; font-size: .95rem; line-height: 1rem;} /* full margin definition needed to override definition given for 'div.indexpage > p' */




/* change the padding when smaller */
@media screen and (max-width: 1000px) {
  p.desc{
    padding: 0 10px;
  }
}





/* general page-to-page navigation within a section */

/* highlight name of selected index page */
/* used with itselemental name/symbol/atomic number index pages, for example */
div.extra-navigation .highlight{
background-color: #ffff99;
}








/* qa index page */

/* common question/archive list headers on the qa index page */
h2.qa-index-section-header{text-align: center;}

/* fancy way of selecting the second h2 header */
/* overkill since there are currently only 2 elements of this type on this page, */
/* but might make it easier in the future if others are added later */
h2.qa-index-section-header:not(:first-of-type){margin-top: 40px;}

/* single column spanning section headers in the common question section */
/* extra class needed to override a previous, more specifically defined, h3 style */
h3.qa-index-common-questions-section-header.qa-index{font-size: 1.25rem;}

/* section headers for the full archive list on the qa index page */
h3.qa-index-section-header{font-size: 1.25rem; text-align: center; margin: 30px 0 20px;}

/* header for the author-specific qa index pages */
/* styled like the main index page's h3 elements but called h2 in order */
/* to not confuse systems that depend on sequential headers */
/* since the author index pages don't have three natural header levels, */
/* don't want to go from h1 directly to h3 */
/* a 'missing' h2 might make something think that there wasn't going to be h3 content */
/* obviously, this is mainly concerning non-visual readers */
h2.qa-index-section-header.author-name{font-size: 1.25rem; text-align: center; margin: 30px 0 20px;}

/* listed links on qa index page */
div.indexpage.qa-index > p {font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 1rem;}

/* reduce the span of the columns when in full page mode */
div.indexpage.qa-index.left-side > p {padding-left: 50px;}
div.indexpage.qa-index.right-side > p {padding-right: 50px;}


/* reduce the padding of the column lists when we get narrower */
@media screen and (max-width: 1000px) {
	div.indexpage.qa-index.left-side > p {padding-left: 10px;}
	div.indexpage.qa-index.right-side > p {padding-right: 10px;}
}

/* change the padding when we go to single column mode */
@media screen and (max-width: 780px) {
	div.indexpage.qa-index.left-side > p {padding-left: 0;}
	div.indexpage.qa-index.right-side > p {padding-right: 0;}
}




/* glossary index page */

/* listed links on glossary index page */
div.indexpage.glossary-index > p {font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 1rem;}




/* NSTA materials page */

/* reduce the top margin to zero to prevent extra space between columns */
/* when two columns are displayed as one on smaller screens */

div.content > div.row > div.nsta > p{
	margin-top: 0;
}