body {
		        padding-top:-15px; /* 60px to make the container go all the way to the bottom of the topbar */
		        background-color:#fff;
	  }
	  
	  .grouptitle {
		  border-color: white !important;
	  }
	  
	  .groupsnameperiod {
		  display: none;
	  }
      
      .leftside {
	      float: left;
      }
      
      .alkaline {
	      color: green;
      }
      
      .alkalineearth {
	      color: olive;
      }
      
      .transitionmetals {
	      color: #ff8100;
      }
      
      .nobles {
	      color: red;
      }
      
      .halides {
	      color: yellow;
      }
      
      .actinoids1 {
	      color: blue;
      }
      
      .lanthanoids1 {
	      color: fuchsia;
      }
      
      .poormetal {
	      color: lime;
      }
      
      .othermetal {
	      color: grey;
      }
      
      .mainbox {
      		float: right;
      		padding-left: 180px;
      		width: 550px;
      }
      
      .maindisplay {
	      float: right;
	      height: 225px;
      }
      
      .maininfo {
	      float: left;
	      height: 175px;
	      width: 375px;
	      margin-right: 5px;
	      clear: right;
      }
      .mainelement {
	      float: left;
	      height: 175px;
	      width: 165px;
	      margin-right: 5px;
	      clear: right;
      }
      
      .colourkey {
	      float: left;
	      width: 100%;
      }
      
      .rightside {
	      float: right;
      }
      
      .period {
      	height: 72px;
	      margin-bottom: 5px;
	      clear: both;
      }
      
      .period > h3 {
      		vertical-align: middle;
	  		padding-right: 30px;
      }
      .lanthanoid_gap {
	      padding-top: 30px;
      }
      
      /*
      .lanthanoid {
	      background-color: fuchsia;
      } */
      
      .element {
      	  float: left;
	      border: black 1px solid;
	      width: 48px;
	      height: 70px;
	      /*margin-bottom: 5px;*/
	      margin-right: 5px;
	      color:#000;
        -webkit-transition: background 0.25s linear;
        -moz-transition: background 0.25s linear;
        -ms-transition: background 0.25s linear;
        -o-transition: background 0.25s linear;
        transition: background 0.25s linear;
	 }
	 
	 .element:hover {
		 background-color: #d1d1d1 !important;
	 }
	      
	 .element > .name {
		 font-size: 10px;
		 text-align: center; 
		 margin-bottom: 6px;
	 }
	 
	 .element > .group {
		 font-size: 10px;
		 text-align: center; 
		 margin-bottom: 6px;
	 }
	 
	 .element > .smallname {
		 font-size: 9px;
	 }
	 
	 .element > .smallername {
		 font-size: 8px;
	 }
	 
	 .element > .atomicno {
	 	display: none;
		 font-size: 10px;
		 text-align: center; 
		 margin-bottom: 6px;
	 }
	 
	 .element > .letter {
	 	font-size: 30px;
	 	margin-bottom: 6px !important;
	 	text-align: center;
	 }
	 
	 .element > .smallerletter {
	 	font-size: 20px;
	 }
	 
	 .element > .mass {
		 font-size: 10px;
		 text-align: center;
	 }
	 
	 .elementbig {
      	  float: left;
	      border: black 1px solid;
	      width: 158px;
	      height: 165px;
	      /*background-color: #fff;*/
	 }
	 
	 .elementbig > .name {
	 	padding-top: 15px;
		 font-size: 28px;
		 text-align: center; 
		 margin-bottom: 38px;
	 }
	 
	 .elementbig > .smallname {
		 font-size: 24px;
	 }
	 
	 .elementbig > .smallername {
		 font-size: 20px;
	 }
	 
	 .elementbig > .atomicno {
	 	padding-top: 15px;
	 	display: none;
		 font-size: 28px;
		 text-align: center; 
		 margin-bottom: 38px;
	 }
	 
	 .elementbig > .letter {
	 	font-size: 70px;
	 	margin-bottom: 38px !important;
	 	text-align: center;
	 }

	 .elementbig > .smallerletter {
	 	font-size: 60px;
	 }
	 
	 .elementbig > .mass {
		 font-size: 30px;
		 text-align: center;
	 }
	 
	 .period > .right {
		 float: right !important;
	 }
    </style>