a.solid:link {color: #000000; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.solid:visited {color: #000000; text-decoration: none;}
a.solid:hover {color: #686868; text-decoration: underline;
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;  
			   /* -webkit-transform:scale(2.0, 1.0);
               -moz-transform:scale(2.0, 1.0);
               -ms-transform:scale(2.0, 1.0);
               -o-transform:scale(2.0, 1.0);
               transform:scale(2.0,1.0); */}
a.solid:active {color: #000000;  text-decoration: none;}

a.liquid:link {color: #4573da; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.liquid:visited {color: #4573da; text-decoration: none;}
a.liquid:hover {color: #749bf3; text-decoration: underline;
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;  
			   /* -webkit-transform:scale(2.0, 1.0);
               -moz-transform:scale(2.0, 1.0);
               -ms-transform:scale(2.0, 1.0);
               -o-transform:scale(2.0, 1.0);
               transform:scale(2.0,1.0); */}
a.liquid:active {color: #4573da;  text-decoration: none;}

a.gas:link {color: #b71b2a; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.gas:visited {color: #b71b2a; text-decoration: none;}
a.gas:hover {color: #ec2538; text-decoration: underline;
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;  
			   /* -webkit-transform:scale(2.0, 1.0);
               -moz-transform:scale(2.0, 1.0);
               -ms-transform:scale(2.0, 1.0);
               -o-transform:scale(2.0, 1.0);
               transform:scale(2.0,1.0); */}
a.gas:active {color: #b71b2a;  text-decoration: none;}

a.unknown:link {color: #000000; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.unknown:visited {color: #000000; text-decoration: none;}
a.unknown:hover {color: #686868; text-decoration: underline;
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;}
a.unknown:active {color: #000000;  text-decoration: none;}

a.types:link {color: #999999; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.types:visited {color: #999999; text-decoration: none;}
a.types:hover {color: #151b8d; text-decoration: underline;
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;  
			   -webkit-transform:scale(2.0, 1.0);
               -moz-transform:scale(2.0, 1.0);
               -ms-transform:scale(2.0, 1.0);
               -o-transform:scale(2.0, 1.0);
               transform:scale(2.0,1.0);}

figcaption.group {
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 text-size: 8pt;}

code {
 color: #903;}

ul.compounds {
 list-style-image: url('../images/bullet.png');
 padding: 0;
 margin: 20px 0 20px 80px;}

li.compounds {
 font-size: 12pt;
 color: #666666;
 margin: 0;
 padding: 0;
 line-height: 150%;
 font-weight: 100;}
 
.sub-spacing {
 margin: 10px 0 20px 0;
 padding: 0 0 0 20px;
 color: #666666;}

.subheading {
 padding: 0 0 0 20px;}

.leadingmarg {
 padding: 0 0 0 20px;}
 
h6 {
 font-size: 9px;
 color: #666666;
 text-align: center;
 line-height: 110%;
 margin: 0;
 padding: 0;}
 
.periodic {
 margin: 40px 0 10px 0;
 color: #377ac5;}
 
.description {
 font-size: 12pt;
 color: #666666;
 margin: 0 0 10px 0;
 padding: 0;}
 
.notes {
 font-size: 10pt;
 color: #666666;
 margin: 0 0 10px 0;
 padding: 0;}
 
.bold {
 font-weight: 700;}
 
.right {
 text-align: right;}
 
.left {
 text-align: left;}
 
.box {
 width: 60px;
 height: 60px;
 border: 1px solid #999999;
 border-radius: 2px;
 margin: 1px 1px 0 0;
 vertical-align: middle;
 padding: 0;
 z-index: 1;}
 
.emptyBox {
 width: 60px;
 height: 60px;
 border: 0 solid #999999;
 border-radius: 2px;
 margin: 1px 1px 0 0;
 vertical-align: middle;
 padding: 0;}
 
.emptyBoxBorder {
 width: 60px;
 height: 60px;
 border: 1px solid #999999;
 border-radius: 2px;
 margin: 1px 1px 0 0;
 vertical-align: middle;
 padding: 0;
 background-color: #f1f0f4;}
 
.hNumber {
 width: 60px;
 height: 15px;
 border: 0 solid #999999;
 border-radius: 2px;
 margin: 0 0 1px 1px;
 padding: 0 0 5px 0;
 vertical-align: top;
 text-align: center;}
 
.vNumber {
 width: 15px;
 height: 60px;
 vertical-align: middle;
 padding: 25px 0 0 0;
 margin: 0;
 border: 0 solid #999999;}
 
.reference {
 font-size: 8pt;
 color: #999999;
 padding: 0 0 5px 0;
 margin: 0;
 text-align: center;}
 
.element {
 font-family: Arial, Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-weight: 700;
 text-align: center;
 margin: 8px 0 3px 0;
 padding: 0;
 line-height: 100%;
 color: #000000;}
 
.commonName, .atomicWeight {
 font-family: Arial, Arial, Helvetica, sans-serif;
 font-size: 7px;
 text-align: center;
 margin: 0 0 3px 0;
 padding: 0;}
 
.atomicNumber {
 font-family: Arial, Arial, Helvetica, sans-serif;
 font-size: 7px;
 text-align: left;
 margin: 0 0 3px 0;
 padding: 0;
 display: inline-block;
 float: left;}
 
.energyLevels {
 font-family: Arial, Arial, Helvetica, sans-serif;
 font-size: 5px;
 text-align: right;
 margin: 0 0 3px 0;
 padding: 0;
 display: inline-block;
 float: right;}
 
.arrow {
 font-family: Arial, Arial, Helvetica, sans-serif;
 font-size: 18px;
 text-align: center;
 margin: 0 0 3px 0;
 color: #999999;
 padding: 0;}
 
.groupName {
 color: #cccccc;
 font-size: 6px;
 text-align: center;
 padding: 0;
 margin: 0;}

.reactiveNonMetals {
 background-color: #80d577;}
 
.nobelGases {
 background-color: #C9F;
 border: 1px solid #999999;
 border-radius: 2px;}
 
.alkaliMetals {
 background-color: #FC6;}
 
.alkalineEarthMetals {
 background-color: #FF6;}
 
.postTransitionMetals {
 background-color: #6FF;}
 
.metaloids {
 background-color: #6CF;}
 
.transitionMetals {
 background-color: #ff9b99;}
 
.lanthanoids {
 background-color: #CCF;}
 
.actinoids {
 background-color: #CC9;}
 
.swatch {
 width: 25px;
 height: 25px;
 display: inline-block;
 border: 1px solid #999999;
 border-radius: 2px;
 text-align: left;}
 
figure {
 text-align: center;
 display: inline-block;
 width: 125px;}
 
.white {
 color: #ffffff;
 font-weight: 700;
 text-shadow: 0 0 5px #000;}
 
.popup {
 position: relative;
 display: inline-block;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 }

/* The actual popup */
.popup .popuptext {
 visibility: hidden;
 width: 200px;
 background-color: #555;
 color: #c4c4c8;
 text-align: left;
 border-radius: 6px;
 border: 1px solid #FC0;
 box-shadow: 0 0 10px #039;
 padding: 8px 8px;
 position: absolute;
 
 bottom: 115%;
 left: 50%;
 margin-left: -80px;
 font-size: 10px;}

/* Popup arrow */
.popup .popuptext::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;}

/* Toggle this class - hide and show the popup */
.popup .show {
 visibility: visible;
 -webkit-animation: fadeIn 1s;
 animation: fadeIn 1s;
 z-index: 999;}
 
#phase-Transistion {
 width: 800px;
 height: 240px;
 margin: 0 auto;
 padding: 0;
 display: block;
 float: none;}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
 from {opacity: 0;} 
 to {opacity: 1;}}

@keyframes fadeIn {
 from {opacity: 0;}
 to {opacity:1 ;}}
 
.bg-periodic {
 background: url(../images/bg-periodic.png) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: #ffffff;}