/**
 * @author Jevgeni Virves
 * @since 2014-09-09
 */


body {
    font-family: 'trebuchet ms', arial, helvetica, sans-serif;
    font-size: 14px;
    margin: 10px;
}

#periodic_table {
    width: 1300px
}

[period] {
    display: block;
    position: relative;
    clear: both;
    white-space: nowrap;
}

[element] {
    display: inline-block;
    position: relative;
    clear: none;
    box-sizing: border-box;
    width: 60px;
    height: 50px;
    margin: 1px;
    border: solid 1px #ddd;
    vertical-align: top;
    cursor: pointer;
}

[element]:hover {
    border: solid 1px #aaa;
}
[element].selected {
    border: solid 1px #888;
}
[element].highlighted {
    border: solid 1px #000;
}

[element="0"] {
    border: solid 1px transparent;
    cursor: default;
}

[element="0"]:hover {
    border: solid 1px transparent;
}

[element].hidden {
    visibility: hidden;
}

[period_nr] {
    display: inline-block;
    position: relative;
    clear: none;
    box-sizing: border-box;
    width: 60px;
    height: 50px;
    margin: 1px;
    border: solid 1px transparent;
    vertical-align: top;
    text-align: center;
    line-height: 50px;
}

[group_nr] {
    display: inline-block;
    position: relative;
    clear: none;
    box-sizing: border-box;
    width: 60px;
    height: 50px;
    margin: 1px;
    border: solid 1px transparent;
    vertical-align: top;
    text-align: center;
    line-height: 50px;
}

.symbol {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    font-weight: bold;
    text-align: center;
}
.atomic_number {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 80%;
}
.name {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    font-size: 60%;
    text-align: center;
}
.atomic_weight {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 60%;
    text-align: center;
}

#element_info {
    display: inline-block;
    margin: 50px 0 0 60px;
    padding: 0;
    list-style: none;
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
}
#element_info li {
    padding: 3px 10px;
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
    cursor: pointer;
}
#element_info li:hover {
    background: #eee;
}
#element_info label {
    display: inline-block;
    width: 160px;
    cursor: pointer;
}

.nonmetal {
    background: #e7ff8f;
}
.nonmetal.noble_gase {
    background: #c0ffff;
}
.alkali_metal {
    background: #ff6666;
}
.alkaline_earth_metal {
    background: #ffdead;
}
.metalloid {
    background: #cccc99;
}
.metal {
    background: #cccccc;
}
.metal.transition_metal {
    background: #ffc0c0;
}

.languages {
    display: block;
    text-align: center;
    padding-top: 50px;
}

.languages li {
    display: inline-block;
    clear: none;
    padding: 20px;
}

#search {
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 61px;
    left: 315px;
}