/**
 * iOS
 * 
 * 
 */

html, body, ul {
  margin:  0;
  padding: 0;
}

body {
  background-color: #e4e4e4;
  background-image: -moz-linear-gradient(to left, #e4e4e4 0%, #e4e4e4 20%, #dddddd 20%, #dddddd 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #e4e4e4), color-stop(0.2, #e4e4e4), color-stop(0.2, #dddddd));
  background-size: 7px 10px;
  font: bold 16px sans-serif;
}

#header {
  padding: 10px 0;
  border-top: solid 1px #bec5cf;
  border-bottom: solid 1px #3f4e63;
  background-color: #7488a1;
  background-image: -moz-linear-gradient(to bottom, #acb9c9 0%, #8395af 50%, #7388a5 50%, #7488a1 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acb9c9), color-stop(0.5, #8395af), color-stop(0.5, #7388a5), color-stop(1, #7488a1));
  color: #fff;
  text-shadow: 0 1px 0 #434b57;
  text-align: center;
}

#main {
  max-width: 750px;
  margin: 0 auto;
  padding: 10px;
  color: #4c566c;
}

.list {
  margin: 5px 0;
  border-radius: 10px;
  border: solid 1px #bbb;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px #ddd inset;
  background-color: #fff;
  color: #000;
}

.list li {
  list-style: none;
  padding: 12px;
  position: relative;
  border-bottom: solid 1px #ddd;
}

.list li:last-child {
  border-bottom: none;
}

.inactive {
  color: #ccc;
}

.center {
  text-align: center;
}

.head {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.text {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  font-weight: normal;
}

.button-nt:hover, 
.button-on {
  border-top: solid 1px #29354e;
  border-left: solid 1px #163d8d;
  border-right: solid 1px #163d8d;
  border-bottom: solid 1px #1b49a5;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #3770e0;
  background-image: -moz-linear-gradient(to bottom, #759ae9 0%, #3770e0 50%, #2260dd 50%, #2462de 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #759ae9), color-stop(0.5, #3770e0), color-stop(0.5, #2260dd), color-stop(1, #2462de));
  color: #fff;
  text-shadow: 0 1px 0 #29354e;
  cursor: pointer;
}

.redbutton {
  border-top: solid 1px #512f32;
  border-left: solid 1px #512f32;
  border-right: solid 1px #512f32;
  border-bottom: solid 1px #8c0f18;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background-color: #bd1422;
  background-image: -moz-linear-gradient(to bottom, #ef868d 0%, #c7343e 50%, #bd1422 50%, #bd1422 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef868d), color-stop(0.5, #c7343e), color-stop(0.5, #bd1422), color-stop(1, #bd1422));
  color: #fff;
  text-shadow: 0 1px 0 #512f32;
}

.redbutton-nt:hover, 
.redbutton-on {
  background-color: #840e18;
  background-image: -moz-linear-gradient(to bottom, #a75c61 0%, #8c272d 50%, #840e18 50%, #840e18 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a75c61), color-stop(0.5, #8c272d), color-stop(0.5, #840e18), color-stop(1, #840e18));
  cursor: pointer;
}

.mt20 {
  margin-top: 20px;
}

li input {
  width: 580px;
  position: absolute;
  top: 8px;
  right: 0;
  border: none;
  background-color: transparent;
  font-weight: normal;
  font-size: 120%;
}

form {
  display: inline;
}

input[type=text]:focus,
input[type=password]:focus {
  outline: none;
}

#nojs {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(51,51,51,0.7);
  color: #fff;
  font: 12pt normal;
  text-shadow:  1px 0 0 #222;
  box-shadow:0 1px 3px rgba(51,51,51,0.5);
}

#nojs > div {
  padding: 10px;
}

#nojs .title {
  color: #ff0;
  font-weight: bold;
  margin-bottom: 10px;
}

#ahide {
  position: absolute;
  width: 0;
  height: 0;
  top: -99999px;
  left: -99999px;
  visibility: hidden;
}

.fail span {
  color: #f20;
}