/* START STYLES FOR SVG TABLE OF ELEMENTS */

/* div that contains the svg table of elements on the index page */
div.itselemental{
padding: 0 20px;
}

/* size the svg within its div */
div.itselemental svg{
width: 100%;
height: auto;
margin: 20px auto 40px;
display: block;
padding: 0 40px;
}

/* use more of the screen on smaller devices */
@media screen and (max-width: 780px) {
  div.itselemental svg{padding: 0;}
}


/* outline each element block */
rect.element-box{
stroke:black;
stroke-width:1;
stroke-opacity:1;
}

/* colors for solids, liquids and gases */
svg a.solid{
fill: #1aff1a;
/* fill: #6f6; */
fill-opacity:0.4;
}

svg a.liquid{
fill: #1a75ff;
/* fill: #6FF; */
fill-opacity:0.4;
}

svg a.gas{
fill: yellow;
/* fill: #ff9; */
fill-opacity:0.4;
}

svg a.unknown{
fill: #ccc;
fill-opacity:0.4;
}

/* highlight on mouseover */
svg a:hover{
fill-opacity:1;
text-decoration: none;
}

/* element text color */
svg text{
fill: black;
fill-opacity:1;
}

.atomic-number{
font-size: 1rem;
}

.chemical-symbol{
font-size: 1.8rem;
text-anchor: middle; /* centers text on insertion point */
}

/* END STYLES FOR SVG TABLE OF ELEMENTS */



/* highlight name of selected index page */
div.extra-navigation .highlight{
background-color: #ffff99;
}


/* toggle navigation blocks for different size screens */
#large-index-navigation{display: block;}
#medium-index-navigation{display: none;}
#small-index-navigation{display: none;}

@media screen and (max-width: 780px) {
	#large-index-navigation{display: none;}
	#medium-index-navigation{display: block;}
	#small-index-navigation{display: none;}
}

@media screen and (max-width: 420px) {
	#large-index-navigation{display: none;}
	#medium-index-navigation{display: none;}
	#small-index-navigation{display: block;}
}


/* turn off selected text */
span.small{display: inline;}
span.smallest{display: inline;}

@media screen and (max-width: 780px) {
    span.small{display: none;}
}
@media screen and (max-width: 420px) {
    span.smallest{display: none;}
}


/* ToE header text on different screen sizes */
div.toe-title, div.toe-title-small{
margin-top: 2rem;
text-align: center;
font-size: 2.2rem;
font-weight: bold;
}

div.toe-title-small{
display: none;
}

@media screen and (max-width: 780px) {
  div.toe-title{margin-top: .8rem;}
}

@media screen and (max-width: 420px) {
  div.toe-title{
    margin-top: .8rem;
    font-size: 1.5rem;
  }
}



div.extra-navigation{
text-align: center;
font-size: 1rem;
}


/* list of resources on ToE index pages */
div.content > p.indexlist{
text-indent: 0;
line-height: 1.4rem;
margin-top: .5rem;
margin-bottom: .5rem;
padding-left: 2rem;
}



/* redefine sup and sub */

sub, sup{
line-height: 50%;
font-size: 0.75rem;
background-color:transparent;
}




/* ToE name/symbol/number index lists */

/* reset color of the ToE header text, which is a link on these pages */
div.toe-title.element-list a{
color: #5b6065;
}

/* reposition the top of the element listing */
div.row.element-list{
padding-top: 2rem;
font-size: 1.2rem;
}


/* The width of the name field is set by the length of the longest name. */
/* Since the list is made from 4 independent tables, we get odd offsets */
/* when the tables are stacked in 2 and 1 column modes. */
/* Set some minimum widths, based on character size, */
/* so that the tables stack seamlessly. */
table tr td.ele-name{min-width: 15ch;}
table tr td.ele-number{min-width: 5ch; text-align: right;}
table tr td.ele-symbol{min-width: 5ch;}


div.row.element-list td{
padding: 0 .5rem;
}

.col-3.element-list{padding-top: 0; padding-bottom: 0;}

/* reset column definitions for smaller screens */
@media screen and (max-width: 1200px) {
  .col-3.element-list{width: 50%;}
}

@media screen and (max-width: 660px) {
  .col-3.element-list{width: 100%;}
}


/* element data page */

/* start element navigation */

div.element-nav{
margin: 0 auto;
padding: 20px 20px 0;
max-width: 950px;
text-align: center;
font-size: 1.3rem;
line-height: 1.125rem;
/* 
border: 1px black solid;
 */
}


div.element-nav p{
display: inline;
}

div.element-nav .left{
float: left;
}

div.element-nav .right{
float: right;
}

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

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

div.element-nav .nav-name{
font-size: .95rem;
}
/* end element navigation */

.subtitle{
margin-top: 1rem;
text-align: center;
font-size: 2.2rem;
font-weight: bold;
}

div.content p.other-data{
text-align: center;
font-size: .875rem;
margin: 0 auto;
text-indent: 0;
}


/* SVG styles for element-specific pages */

rect.element-specific-box{
stroke:black;
stroke-width:1;
stroke-opacity:1;
}

rect.solid{
fill: #1aff1a;
fill-opacity:0.4;
}

rect.liquid{
fill: #1a75ff;
fill-opacity:0.4;
}

rect.gas{
fill: yellow;
fill-opacity:0.4;
}

rect.unknown{
fill: #ccc;
fill-opacity:0.4;
}

.atomic-number-specific{
font-size: .6rem;
}

.chemical-symbol-specific{
font-size: 1.6rem;
text-anchor: middle; /* centers text on insertion point */
/* dominant-baseline: central; /* 'middle' is also an option */ */
}

.chemical-name-specific{
font-size: .4rem;
text-anchor: middle; /* centers text on insertion point */
}

.atomic-weight-specific{
font-size: .4rem;
text-anchor: middle; /* centers text on insertion point */
}

/* end SVG styles for element-specific pages */



div.element-data{
padding: 2.5rem 4rem 0;
}

svg.specific-element{
float: left;
max-width: 16.25rem;
margin-right: 2rem;
margin-bottom: 1rem;
}


span.section-title{
font-weight: bold;
}

div.element-data p{
font-size: 1.2rem;
margin: .9rem auto;
}

div.element-data p:first-of-type{
margin-top: 0;
}

div.element-history p{
text-indent: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}

span.extra-space{
padding-left: 1.5rem;
}

span.other-data{
font-size: .875rem;
padding-left: .25rem;
}


table.electron-config{
border-collapse: collapse;
}

table.electron-config p{
margin-bottom: 0;
padding-right: .5rem;
}

td.unconfirmed{
text-align: center;
}





/* there's a video in nitrogen's entry */

.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;
}



/* isotope data pages */


div.content > p.tbltitle{
text-indent: 0;
font-size:1.125rem;
font-weight: bold;
text-align: center;
margin: 1.875rem auto 1.25rem;
}

div.content > p.noiso{
text-indent: 0;
font-size:1.125rem;
text-align: center;
margin: -0.625rem auto 1.25rem;
}

div.isotope-table{
overflow: auto;
}

table.isotope{
border-collapse:collapse;
font-size: 1rem;
border: 0;
margin: .625rem auto 1.25rem;
}

table.isotope td{
text-align: center;
vertical-align: top;
padding: .3125rem .9375rem;
}

table.isotope td.hd{
font-weight: bold;
padding: 0 1.25rem 0;
}

table.isotope td.nat{
padding-top: .625rem;
}

table.isotope td.new{
padding-top: .9375rem;
}




/* turn on/off selected sections */
/* works 'backwards' of what was done on the ToE index pages */

div.smallest{display: none;}

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

  div.element-nav.smallest{
    text-align: center;
    margin-top: .8rem;
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    line-height: 1.43;
  }
  div.element-nav a{color: #5b6065;}

  .subtitle{margin-top: .25rem;}
  
  div.element-data{padding: 1.5rem .5rem 0;}

  svg.specific-element{
    float: left;
    max-width: 33%;
    margin-right: .75rem;
    margin-bottom: .75rem;
  }

  div.element-history p{
    text-indent: 1rem;
    padding-left: 0;
    padding-right: 0;
  }
  
  td{vertical-align: bottom;}

  .video{padding: .25rem;}
}