.center_field {

    text-align: center;
    height: 100%;
    width: 100%;
    margin-left:auto;
    margin-right: auto;
}

.center_field * {
    position: relative;
    font-family: Trebuchet MS;
    
    padding: 5px 15px;
} 

#overlay{

  background-color: rgba(255, 255, 255, 0.85);
  width: 100%;
}

#info_div{
	
	display: none;
	 position: absolute;
	 z-index: 10;
	  width:100%;
	  height: auto;
	   text-align:center;
}

#headlines{
  top:20%;
}

.center_field br {
    background-color: rgba(0, 0, 0, 0);
}

.bottom_field {
    position: absolute;
    text-align: center;
    bottom: 5px;
    width: inherit;
    padding: 0px;
}

#label, #items {
    word-spacing: 0.5em;
    color: rgba(21, 26, 26, 0.6);

}



#labelhelp {
    font-size: 12pt;
    padding: 5px 15px;
    color: rgba(21, 26, 26, 0.5);

}

#set {
    text-align: center;
    font-size: 26pt;
    border: none;
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(255, 255, 255, 0);
    top: 60%;
}

#sethelp {
    font-size: 12pt;
    color: rgba(21, 26, 26, 0.5);
    background: none;
    top: 25%;
}

#selector_div button {

    background-color: rgba(0, 0, 0, 0.6);
    border: medium none;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-size: 20pt;
    margin-top: -4em;
    width: 5em;
    position: absolute; 
    margin-left: -2em;

}

.dice_place {
    position: absolute;
    border: solid black 1px;
}


* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}



/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}



.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

#svg *, .noselect * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#waitform {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10000;
    cursor: wait;
}

a {
    color: gray;
}

em {
    border: 1px rgba(0, 0, 0, 0.2) solid;
    font-style: normal;
    padding: 0px 3px;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}



h6 {
    font-size: 100%;
    font-weight: normal;
    margin: 0px;
}



.control_panel {
    padding: 15px;
    padding-bottom: 0px;
    position: absolute;
    z-index: 10;
}