* {
  margin: 0;
  padding: 0;
  }

body {
  font-size:100%;
  font-family: Arial,'Lucida Grande',Verdana,sans-serif;
  text-align:center;
  background:#000000 url(images/background.gif) no-repeat center;
}


#page {width:992px; margin:0px auto; text-align:center;}

#header {
  height:191px;
  width:992px;
  background:url(images/topbg.gif);
  text-align:left;
}

#logo {
  text-align:left;
  letter-spacing:-2px;
  text-shadow:0px 0px 8px #000;
  font:48px Georgia, Arial, "Times New Roman", Times;
  margin-left:18px;
  margin-top:94px;
  color:#FFF;
  width:364px;
  height:97px;
  float: left;
}

.green {
color:#AEF080;
}

#slogan {
  text-align:left;
  margin-left:100px;
  font:14px Arial, "Times New Roman", Times;
  letter-spacing:0px;
  color:#FFF;
}


/* TOP NAVIGATION BAR */
#nav {
  width:610px;
  float:left;
  margin-top:136px;
}

#nav-menu-left {
  background:url(images/navbar-left.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu-right {
  background:url(images/navbar-right.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu {
  background:url(images/navbar-bg.gif) repeat-x top left;
  height:55px;
  width:556px;
  float: left;
}

#nav-menu ul {
  list-style:none;
}
  
#nav-menu ul a {
  background-image: url(images/navbar-divider.gif);
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 12px;
  padding-left: 12px;
  padding-top:5px;
  display: block;
  line-height: 50px;
  text-decoration: none;
  text-shadow:1px 1px 1px #000;
  font-family: Arial, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #FFF;
}
	
#nav-menu ul a:hover {
  text-decoration:underline;
  text-shadow:0px 0px 4px #FF0000;
}
 
#nav-menu li {
  float:left;
}
/* END NAVIGATION BAR */

/* Large header image of grass and flower, with slogans */
#header2 {
  background:url(images/header.jpg) no-repeat top left;
  width:992px;
  height:224px;
  text-shadow:1px 1px 1px #000;
}

#header2-slogan1 {
  font:48px Georgia, Arial, "Times New Roman", Times;
  padding:68px 0px 0px 106px;
  color:#FFF;
  text-align:left;
  letter-spacing:-2px;
}
#header2-slogan2 {
  font:48px Georgia, Arial, "Times New Roman", Times;
  padding:0px 0px 0px 267px;
  color:#FFF;
  text-align:left;
  letter-spacing:-2px;
}
/* end large header */

/* clears all floated elements */
.clearfloats {
  clear:both;
}
/* end clear floats */

/* first content section, lighter green area */
#content {
  background:#007285 url(images/body-bg.gif) no-repeat top left;
  width:992px;
  min-height:270px;
  text-align:left;
  padding-top:35px;
  padding-bottom:20px;
}

.content-padding {
  padding:0px 20px 0px 20px;
}

.content-padding a {
  font:16px Arial, "Times New Roman", Times;
  color:#CEFF9F;
  text-shadow:1px 1px 1px #104D00;
}

.content-padding a:hover {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-decoration:none;
  text-shadow:0px 0px 3px #FF0000;
}


#content h1 {
  font:36px Georgia, Arial, "Times New Roman", Times;
  color:#FFF;
  padding-bottom:10px;
  text-shadow:1px 1px 2px #000;
}

#content p {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-align:justify;
  padding-bottom:10px;
}
html {
    background-color: #eed3ba;
    font-family: 'Poppins', Arial, sans-serif;
}

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

#page-title {
    text-align: center;
    color: green;
}

.p-Table {
    display: grid;
    grid-template-columns: 
        repeat(18, [group] minmax(5em, 1fr));
    grid-template-rows: repeat(7, 
        [period] 1fr) [row6x] 1fr [row7x] 1fr;
    grid-gap: -5.0em;
    counter-reset: atomic-number;
}

.p-Table::before {
    content: '';
    grid-row: row6x / span 2;
    grid-column: 1 / 3;
}

.ele {
    border: thin solid black;
    border-spacing: 0;
    text-align: center;
    opacity: 0.85;
    width: 50%;
    height: 10;
}

.ele:hover,
.ele:focus {
    opacity: 1;
    font-weight: bold;
}

.ele-name {
    border-bottom: none !important;
    text-decoration: none !important;
    word-break: break-all;
    hyphens: auto;
    font-size: 0.65em;
    counter-increment: atomic-number;
}

.ele-name::before {
    font-size: 0.4rem;
    display: block;
    content: counter(atomic-number);
    color: black;
}

.ele-name::after {
    font-size: 0.5rem;
    display: block;
    content: attr(title);
}

.ele-57,
.ele-89 {
    position: relative;
}

.ele-57::before,
.ele-89::before,
.ele-57::after,
.ele-89::after {
    display: block;
    position: absolute;
    width: 100%;
    font-size: 1em;
    top: 25%;
    font-weight: normal !important;
}

.ele-57::before,
.ele-89::before {
    top: calc(-200% - 1rem);
}

.ele-57::before,
.ele-57::after {
    content: '*';
}

.ele-89::before,
.ele-89::after {
    content: '**';
}

.ele-57::after,
.ele-89::after {
    left: calc(-50% - 1rem);
}

.ele-5,
.ele-13 {
    grid-column: 13;
}

.ele-72,
.ele-104 {
    grid-column: 4;
}

.lan-group {
    grid-row: row6x;
    position: relative;
    top: 1em;
}

.a-grp {
    grid-row: row7x;
    position: relative;
    top: 1em;
}

.n-gas {
    grid-column: 18;
}

.legend {
    grid-row: 1 / 3;
    grid-column: 5 / span 6;
    border: medium ridge black;
    padding: 0.5em;
}

.legend h2 {
    margin: 0;
}

.legend ul {
    padding-left: 0;
    list-style: none;
}

.legend li {
    display: inline-block;
    padding: 0.25em;
    margin-bottom: 0.5em;
}

.lan {
    background-color: pink;
}

.actinide {
    background-color: hotpink;
}

.al-metal {
    background-color: #f66;
}

.alearth-metal {
    background-color: #ffdead;
}

.d-nonmetal {
    background-color: #e7ff8f;
}

.patomic-nonmetal {
    background-color: #a1ffc3;
}

.pTransition-metal {
    background-color: lightgray;
}

.metalloid {
    background-color: #cc9;
}

.n-gas {
    background-color: #c0ffff;
}

.trans {
    background-color: #8486f8
}

.liquid {
    color: darkgreen;
}

.gas {
    color: #c00;
}
/* end content 1 section */


/* image that divides the two different colored content sections */
#body-divider {
  background:#1D5600 url(images/body-divider.gif) no-repeat top left;
  width:992px;
  height:23px;
}
/* end content divider */

/* darker green content section, "content 2" */
#content2 {
  width:992px;
  min-height:250px;
  background:#007285;
  text-align:left;
  padding-top:10px;
  padding-bottom:30px;
}

#content2 p {
  font:16px Arial, "Times New Roman", Times;
  color:#FFF;
  text-align:justify;
  padding-bottom:10px;
}

#content2 h2,h3,h4,h5,h6 {
  background:#007285 url(images/headline-arrow.gif) no-repeat top left;
  font:normal 25px serif, "Times New Roman", Times;
  line-height:25px;
  color:#FFF;
  text-shadow:1px 1px 2px #000;
  padding-bottom:10px;
  padding-left:30px;
}

.content2-block {
  width:274px;
  float:left;
}

.content2-block p {
  width:274px; 
  float:left;
  text-align:left;
}

  /* three column area, vertical dotted divider */
  .content-divider {
    background:url(images/content-divider.gif) no-repeat top center;
    width:2px;
    height:274px;
    float:left;
    padding:0px 30px 0px 30px; 
  }
  /* end divider */

/* end content 2 */


/* subscribe form */
#subscribe {text-align:right; padding-right:15px;}
#subscribe input { margin:1px 0;}
.button {
  background:transparent url(images/submit.gif) no-repeat top left;
  padding-bottom:5px; 
  border:none;
  width:126px;
  height:33px;
  color:#FFFFFF;
  font:bold 13px Arial, Georgia, "Times New Roman", Times;
  cursor:pointer;
}
.inputstyle {
  background:#002200;
  width:200px;
  height:30px;
  color:#FFF;
  font-size:14px;
  padding:0px 5px 0px 10px;
  border:1px solid #427B23;
}
/* end subscribe form */



/* footer of page */
#footer-div {
  background:url(images/footer-div.gif) no-repeat top left;
  width:992px;
  height:6px;
}

#footer {
  padding-top:15px;
  width:992px;
  height:150px;
  background:#001800;
  text-align:center;
}

#footer p {
  font:12px Arial, "Times New Roman", Times;
  color:#FFF;
}

#footer a {
  font:12px Arial, "Times New Roman", Times;
  color:#FFF;
}
/* end footer */