@charset "UTF-8";
/**
 * dialog.css
 */


/* <dialog> for settings
   https://github.com/GoogleChrome/dialog-polyfill */
dialog {
	border:               .1em solid #ff8000;
	padding:              1em;
	background:           /*#2e3436*/  #444;
	color:                #eee;
	
	/*position:             fixed;
	top:                  50%;
	transform:            translate(0, -50%);*/
	
	width:                25em;
	max-width:            100%;
	
	height:               18em;
	max-height:           100%;
	
	z-index:              100;
	
	/*left:                 50%;
	top:                  50%;*/
	
	/* Use this for centering if unknown width/height *
	transform:            translate(-50%, -50%);
	
	/* If known, negative margins are probably better (less chance of blurry text). */
	/* margin: -200px 0 0 -200px; */
	
	box-shadow:           0 0 60px 10px rgba(0, 0, 0, 0.9);
	
}

dialog h3 {
	margin:               0 0 1.5em;
}

dialog button.close {
	position:             absolute;
	top:                  .3em;
	right:                .3em;
	font-size:            3em;
	font-family:          "Source Sans Pro", sans-serif;
	font-weight:          300;
	border:               0;
	background:           none;
	cursor:               pointer;
	color:                #d3d7cf;
	line-height:          .75em;


	display: none;
}

dialog button.close:focus {
	outline:              0;
}

dialog::backdrop { /* native */
	background-color:     rgba(0, 0, 0, 0.9);
}
dialog + .backdrop { /* polyfill */
	background-color:     rgba(0, 0, 0, 0.6);
}



/********************************************************************
 *                                                                  *
 *                          fade-in effekt                          *
 *                                                                  *
 ********************************************************************/

@keyframes appear {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

dialog {
	/* Fade on */
	visibility:           visible;
	opacity:              1;
	/*transition:         opacity 0.5s linear;*/
	animation:            appear .5s ease-in-out;
}

dialog:not([open]) {
	visibility:           hidden;
	opacity:              0;
	transition:           transform .3s ease-in-out, opacity .3s ease-in-out;
}



#settings_form div {
	margin: 0 0 .6em;
}