/* All CSS written by Jeffrey B. Madden 2017-2021. */

body {
   margin:0px;
   border:0px;
   padding:0px;
   background-color:Black;
}

#game_wrap {
   display:flex;
   width:100%;
   height:100%;
   line-height:1.2em;
   margin:0px;
   border:0px;
   padding:30px;
   color:White;
   font-size:1.2em;
   font-family:Verdana;
   background-color:Black;
   background-image:url('blocks/border_darkgrey_outset_01.png');
   background-repeat:repeat;
   background-position:center top;
   box-sizing:border-box;
   flex-direction:row;
   justify-content:center;
   align-items:flex-start;
   z-index:0;
}

#game_wrap .console {
   display:flex;
   width:930px;
   min-height:300px;
   margin:0px;
   padding:5px;
   justify-content:center;
   align-items:center;
}

#game_wrap .console .field_wrap {
   display:flex;
   margin:5px;
   padding:0px;
   box-sizing:content-box;
   flex-direction:column;
}

#game_wrap .console .field_wrap .field {
   display:flex;
   margin:0px;
   border:0px;
   padding:0px;
   box-sizing:border-box;
   flex-direction:column;
}

#game_wrap .console .score_wrap {
   display:flex;
   width:260px;
   height:auto;
   margin:5px;
   padding:10px;
   flex-direction:column;
   cursor:default;
}

#game_wrap .console .score_wrap .list {
   display:flex;
   width:100%;
   margin:0px 0px 15px 0px;
   border:0px;
   padding:0px;
   font-size:22px;
   letter-spacing:2px;
   flex-direction:row;
}

#game_wrap .console .score_wrap .list:last-child {
   margin-bottom:0px;
}

#game_wrap .console .score_wrap .list span {
   width:50%;
   margin:0px;
   border:0px;
   padding:0px;
}

#game_wrap .console .score_wrap .list span:last-child {
   text-align:right;
}

#game_wrap .console .block_wrap {
   display:flex;
   width:260px;
   height:240px;
   margin:5px;
   padding:10px;
   justify-content:center;
   align-items:center;
}

#game_wrap .console .block_wrap .preview {
   margin:0px;
   border:0px;
   padding:0px;
}

#game_wrap .console .block_wrap .preview div:first-child {
   position:relative;
}

#game_wrap .pop_wrap {
   display:flex;
   width:100%;
   height:100%;
   margin:0px;
   border:0px;
   padding:0px;
   background-color:rgba(0, 0, 0, 0.5);
   justify-content:center;
   align-items:center;
   z-index:1;
}

#game_wrap .button {
   height:50px;
   line-height:28px;
   margin:0px;
   padding:0px 24px 0px 24px;
   color:Black;
   font-size:26px;
   font-weight:bold;
   text-align:center;
   letter-spacing:4px;
   cursor:pointer;
}

/* Block Styles */

.row {
   display:flex;
   margin:0px;
   border:0px;
   padding:0px;
   justify-content:center;
}

.block {
   display:block;
   position:absolute;
   left:0px;
   top:0px;
   margin:0px;
   border:0px;
   padding:0px;
}

.grid {
   display:block;
   position:relative;
   margin:0px;
   border:0px;
   padding:0px;
   overflow:visible;
}

.on, .off {
   display:inline-block;
   position:relative;
   float:left;
   margin:0px;
   padding:0px;
}

.on { visibility:visible; }
.off { visibility:hidden; }

.on, .off, .inset, .outset, .button { border:10px solid transparent; box-sizing:border-box; }

.darkgrey { border-image:url('blocks/border_darkgrey_outset_01.png') 10 stretch; background-color:#212121; }
.grey { border-image:url('blocks/border_grey_outset_01.png') 10 stretch; background-color:#848484; }
.green { border-image:url('blocks/border_green_outset_01.png') 10 stretch; background-color:#8cc63f; }
.blue { border-image:url('blocks/border_blue_outset_01.png') 10 stretch; background-color:#0071bc; }
.red { border-image:url('blocks/border_red_outset_01.png') 10 stretch; background-color:#8c3c7c; }
.yellow { border-image:url('blocks/border_yellow_outset_01.png') 10 stretch; background-color:#baba1c; }
.purple { border-image:url('blocks/border_purple_outset_01.png') 10 stretch; background-color:#662d91; }
.orange { border-image:url('blocks/border_orange_outset_01.png') 10 stretch; background-color:#f7931e; }
.copper { border-image:url('blocks/border_copper_outset_01.png') 10 stretch; background-color:#a67c52; }
.maroon { border-image:url('blocks/border_maroon_outset_01.png') 10 stretch; background-color:#9e0b0f; }

.inset { background-color:Black; }
.inset.darkgrey { border-image:url('blocks/border_darkgrey_inset_01.png') 10 stretch; }
.inset.grey { border-image:url('blocks/border_grey_inset_01.png') 10 stretch; }
.inset.green { border-image:url('blocks/border_green_inset_01.png') 10 stretch; }
.inset.blue { border-image:url('blocks/border_blue_inset_01.png') 10 stretch; }
.inset.red { border-image:url('blocks/border_red_inset_01.png') 10 stretch; }
.inset.yellow { border-image:url('blocks/border_yellow_inset_01.png') 10 stretch; }
.inset.purple { border-image:url('blocks/border_purple_inset_01.png') 10 stretch; }
.inset.orange { border-image:url('blocks/border_orange_inset_01.png') 10 stretch; }
.inset.copper { border-image:url('blocks/border_copper_inset_01.png') 10 stretch; }
.inset.maroon { border-image:url('blocks/border_maroon_inset_01.png') 10 stretch; }

/* Creator */

#creator {
   display:flex;
   position:relative;
   right:-350px;
   width:220px;
   height:40px;
   margin:-90px auto 0px auto;
   border:0px;
   padding:0px;
   flex-direction:row;
   justify-content:center;
   align-items:center;
   z-index:1;
}

#creator span {
   margin:0px;
   border:0px;
   padding:12px;
   color:Black;
   font-size:16px;
   font-family:Verdana;
   text-decoration:none;
   cursor:default;
}

#creator a {
   width:74px;
   height:40px;
   margin:0px;
   border:0px;
   padding:0px;
   background-color:transparent;
   background-image:url('creator.png');
   background-repeat:no-repeat;
}