.element.active{        z-index: 1; }
#shuffled{              z-index: 2; }
#info{                  z-index: 3; }


#stage{
    border:             2px solid #208DF3;
    }

#peripherals{
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    background:         black url(images/peripherals.png) 0 0 no-repeat;
    cursor:             pointer;
    -webkit-transform:  translateZ(0);
    }

#info{
    display:            none;
    position:           absolute;
    width:              100%;
    height:             58px;
    border-bottom:      2px solid #208DF3;
    color:              #208DF3;
    background-color:   #293991;
    text-align:         right;
    font-size:          40px;
    line-height:        58px;
    }

#info #group_name{
    position:           absolute;
    left:               12px;
    margin:             0;
    color:              #FFF;
    font-size:          48px;
    text-transform:     capitalize;
    }

#info div{
    display:            inline-block;
    margin-left:        12px;
    }

#info .value{
    padding:            0 12px 0 5px;
    color:              #FFF;
    font-family:        'league-gothic-1', 'league-gothic-2', sans-serif;
    font-size:          42px;
    }

#time #minutes,
#time #seconds{
    display:            inline-block;
    padding:            0 1px;
    }

#time #minutes{
    text-align:         right;
    }

#time #seconds{
    text-align:         left;
    }

#periodic_table,
#shuffled{
    position:           absolute;
    top:                110px;
    left:               90px;
    color:              #000;
    font-size:          0;
    }

.element{
    position:           absolute;
    width:              36px;
    height:             42px;
    border-style:       solid;
    border-width:       2px;
    border-color:       black;
    text-align:         center;
    font-size:          22px;
    line-height:        42px;
    }

.element.active:not(.matched){
    cursor:             pointer;
    }

.element div{
    display:            none;
    position:           absolute;
    left:               2px;
    font-size:          8px;
    line-height:        1;
    -webkit-text-stroke: 1px transparent;
    }

.element .atomic_number{
    top:                1px;
    font-family:        'league-gothic-1', 'league-gothic-2', sans-serif;
    }

.element .element_name{
    bottom:             1px;
    }

.element .element_name.small{
    font-size:          7px;
    bottom:             2px;
    }

.show_category .category_hydrogen{background-color: #60608D;}
.show_category .category_alkali_metals{background-color: #B8443A;}
.show_category .category_alkali_earth_metals{background-color: #CC6500;}
.show_category .category_transition_metals_part_1{background-color: #E2A547;}
.show_category .category_transition_metals_part_2{background-color: #E2A547;}
.show_category .category_lanthanides{background-color: #C2777B;}
.show_category .category_actinides{background-color: #6A0046;}
.show_category .category_other_metals{background-color: #8E973F;}
.show_category .category_metalloids{background-color: #607862;}
.show_category .category_nonmetals{background-color: #60608D;}
.show_category .category_halogens{background-color: #834C9D;}
.show_category .category_noble_gases{background-color: #9E5276;}
.show_category .category_unknown_metals{background-color: #C4C4C4;}

.show_period .period_1{background-color: #60608D;}
.show_period .period_2{background-color: #B8443A;}
.show_period .period_3{background-color: #CC6500;}
.show_period .period_4{background-color: #E2A547;}
.show_period .period_5{background-color: #8E973F;}
.show_period .period_6{background-color: #60608D;}
.show_period .period_7{background-color: #9E5276;}

.row_0{top: 0px;}
.row_1{top: 44px;}
.row_2{top: 88px;}
.row_3{top: 132px;}
.row_4{top: 176px;}
.row_5{top: 220px;}
.row_6{top: 264px;}
.row_7{top: 352px;}
.row_8{top: 396px;}
.row_9{top: 398px;}

.col_0{left: 0px;}
.col_1{left: 38px;}
.col_2{left: 76px;}
.col_3{left: 114px;}
.col_4{left: 152px;}
.col_5{left: 190px;}
.col_6{left: 228px;}
.col_7{left: 266px;}
.col_8{left: 304px;}
.col_9{left: 342px;}
.col_10{left: 380px;}
.col_11{left: 418px;}
.col_12{left: 456px;}
.col_13{left: 494px;}
.col_14{left: 532px;}
.col_15{left: 570px;}
.col_16{left: 608px;}
.col_17{left: 646px;}

.play_mode_button{
    position:           absolute;
    top:                285px;
    width:              140px;
    height:             40px;
    cursor:             pointer;
    background-repeat:  no-repeat;
    background-position:4px 4px;
    background-image:   url(images/off_button.png);
    }

.play_mode_button.active{
    background-image:   url(images/on_button.png);
    }

#category_play_mode{
    left:               366px;
    }

#period_play_mode{
    left:               513px;
    }

#high_scores {
  background:         #000 url(images/high_scores.png) 0 0 no-repeat;
  }

#high_scores .inner {
  margin:             170px 0 0 200px;
  }

#high_scores .log_in_message {
  bottom:             15px;
  }

/* MESSAGES */
._message span {
  color:              #FFD04A;
  }

.message {
  z-index:            200;
  }
.message > .inner {
  background-color:   rgba(0, 0, 0, 0.25);
  cursor:             pointer;
  }
  
#game_over_message {
  cursor:             pointer;
  }

#game_over_message .game_over,
#level_completed_message .congrats {
  display:            block;
  color:              #FFD04A;
  text-transform:     uppercase;
  font-size:          102px;
  }
.message .alert {
  display:            block;
  color:              #FFF;
  text-transform:     uppercase;
  font-size:          62px;
  margin:             10px;
  white-space:        pre;
  }