/* Copyright 2007 Mark Ivey */

/* Title */
h1 {
  z-index: 1;
  position: absolute;
  left: 7em;
  top: .5em;
  margin: 0em;
  padding: .3em;
}

h1 .box {
  padding: .2em;
  border: solid 1px;
  background-color: #ffffdd;
}

/* Ads */
.right {
  float: right;
}

/* main table */
.table_element a {
  text-decoration: none;
  color: black;
}

.table_element a:hover {
  text-decoration: underline;
  color: blue;
}

table {
  margin-bottom: 1em;
}

.table_element, #large_zoom, .standalone_element {
  border: solid 1px;
  text-align: center;
}

.table_element {
  background-color: #ddddff;
  width: 2.8em;
  height: 2.8em;
  padding: .1em;
}

.short_date,
.short_name,
.short_series,
.short_melting_point,
.short_boiling_point,
.short_mass {
  display: none;
  font-size: 80%;
}

.number {
  font-size: 70%;
}

.copyright {
  font-size: 80%;
}

.permalink {
  display: none;
}

.fully_zoomed .permalink {
  display: inline;
  font-size: 20%;
  position: absolute;
  bottom: 1em;
  left: 1em;
}

.debug {
  font-size: 80%;
  display: none;
}

#medium_zoom, .selected {
  cursor: pointer;
}

/* full-size elements */
.selected, #large_zoom, .standalone_element {
  background-color: #FFFFDD;
}

.standalone_element .number, .standalone_element .symbol {
  font-size: 400%;
}

.standalone_element {
  height: 28em;
  width: 28em;
}

.details {
  display: none;
}

.fully_zoomed .details {
  display: block;
  font-size: 25%;
}

td {
  position: relative;
}

#large_zoom {
  overflow: hidden;
  z-index: 2;
  position: absolute;
}

.close {
  border: solid 1px;
  font-family: sans-serif;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  display: none;
  width: 1em;
  height: 1em;
  margin: .5em;
  cursor: pointer;
  z-index: 5;
  position: absolute;
  right: 0;
  top: 0;
}

.fully_zoomed .close {
  display: block;
  font-size: 25%;
}

#medium_zoom {
  width: 5em;
  height: 5em;
  position: absolute;
  z-index: 1;
  border: solid 1px;
  background-color: #FFFFdd;
  text-align: center;
}

.small, .medium, .large {
  display: none;
}

.table_element .small {
  display: block;
}

#medium_zoom .medium {
  display: block;
}

.fully_zoomed .large, .standalone_element .details {
  display: block;
}