@import url("./webfonts/leaguegothic.css");

/* focus rect fix, as always ... */
:focus {
    outline: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}

body {

  x-box-sizing: border-box;
  x-padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  
  background-color: #333;
  background-image: url(/img/tactile_noise.png);
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), url(/img/tactile_noise.png), #333;
  background:    -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), url(/img/tactile_noise.png), #333;
  background:     -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), url(/img/tactile_noise.png), #333;
  background:      -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), url(/img/tactile_noise.png), #333;
  background:         radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), url(/img/tactile_noise.png), #333;
}

#notification {
  x-height: 20px;
  opacity: 0;
  
  border: 2px solid #666;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  font: 30px  "League Gothic", "Lucida Grande", Helvetica, Arial, sans-serif;
  min-width: 300px;
  width: 50%;
  margin: auto;
  text-align: center;
  
	animation-duration: 8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-name: notify;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-name: notify;
}

.warn {
  background-color: orange;
}



#container, nav#navcontainer {
  font: 30px  "League Gothic", "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #CCC;
}

#container form, #container form input {
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
}

#container form button, nav#navcontainer form button {
  font: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}

#container form button.key {
  x-width: 40px;
  padding: 0 10px;
  margin: 10px auto auto auto;
  border: 1px solid #666;
  border-radius: 10px;
  background-color: #DDD;
  font-size: 20px;
  
  color: black;
  
  float: right;
}


#container form input[type="password"],  
#container form input[type="text"] {
  width: 100%;
  border: 2px solid #666;
  border-radius: 10px;
  padding: 5px; 
  background: rgba(0,0,0,.5);
  
  color: #DDD;
}

#container form button:focus,
#container form input:focus,
#container form button:hover,
#container form input:hover {
  border-color: #DDD;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  body {
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), url(/img/tactile_noise_@2X.png) 0 0 5px 20px, #333;
    background:         radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), url(/img/tactile_noise_@2X.png) 0 0 5px 20px, #333;
  }
}

a {
  color: #aaa;
}

footer {
  position: absolute;
  bottom: 0;
  width: 98%;
  padding-bottom: 10px;
  z-index: 1;
}


div[role="topmover"] {
  display: none;
  color: white;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid silver;
  background-color: gray;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  cursor: pointer;
}



@-webkit-keyframes notify {
	0%   { opacity: .0; -webkit-transform: translateY(-100px); }
	10%   { opacity: 1; -webkit-transform: translateY(0%); }
	50%   { opacity: .9; -webkit-transform: translateY(-4%); }
	90%   { opacity: 1; -webkit-transform: translateY(0%); }
	100% { opacity: .0; -webkit-transform: translateY(-100px) }
}

@keyframes notify {
	0%   { opacity: .0; transform: translateY(-100px); }
	10%   { opacity: 1; transform: translateY(0%); }	
	50%   { opacity: .9; transform: translateY(-4%); }
	90%   { opacity: 1; transform: translateY(0%); }
	100% { opacity: .0; transform: translateY(-100px) }
}