/* general */
body { 
  background-color: #efefef;
  background-image:url(https://i.imgur.com/vdGcoru.png);
  background-attachment: fixed;
  cursor: default;
}

/* highlighting effect */
  ::selection {background-color: rgba(254, 253, 253, 0.0); color: #9ae4ed;}
  ::-moz-selection {background-color:rgba(254, 253, 253, 0.0); color: #9ae4ed;}
  ::-webkit-selection {background-color:rgba(254, 253, 253, 0.0); color: #9ae4ed;}

/* taken entry: container */
.person {
  background-color: #ffffff;
  color: #000000;
  padding: 5px;
  margin: 8px;
  margin-left: 40px;
  width: 300px;
  border-width: 1px 0 0 0; border-style: solid;
      -webkit-border-image: -webkit-linear-gradient(right,  #969696, #ddd) 100% 1;
      -moz-border-image: -moz-linear-gradient(right,  #969696, #ddd) 100% 1;
      -o-border-image: -o-linear-gradient(right,  #969696, #ddd) 100% 1;
      border-image: linear-gradient(to right,  #969696, #ddd) 100% 1;
  box-shadow: 0px 0px 2px #ddd5cd;
}

/* taken entry: pb name */
.title {
  font-family: 'weverse', calibri, trebuchet ms, helvetica, arial;
  font-size: 20px;
  color: #08e8c7;
  line-height: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: lowercase;
}
  
/* taken entry: character name */
.char {
  color: #000000;
  font-family: calibri, trebuchet ms, helvetica, arial;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform:uppercase;
  padding-left: 10px;
}

/* links */
a {
  color:  #188971;
  cursor: default;
  text-decoration: none;
  -moz-transition-duration: .4s;
  -o-transition-duration: .4s;
  -webkit-transition-duration: .4s;
}
 
a:hover {
  color: #ddd;
  cursor: default;
  text-decoration: none;
  -moz-transition-duration: .4s;
  -o-transition-duration: .4s;
  -webkit-transition-duration: .4s;
}

/* taken entry: activity status */
.icons {
   color:  #aaa;
   font-family: calibri, trebuchet ms, helvetica, arial;
   font-size: 8px;
   font-weight: bold;
   margin-left: 20px;
   letter-spacing: 1px;
   line-height: 20px;
   text-transform: uppercase;
   width:80px;
}

/* key: container */
#nav {
  position:fixed;
  visibility: visible;
  top:50px;
  right:50.0%;
  margin-right: 430px;
  z-index:0;
  text-align:center;
  vertical-align: middle;
  width:210px;
}
  
/* key: icons */

.status {
 padding-left: 2px;
 width:12px;
}

.incomplete {
  display: inline-block;
  background: rgba(8,232,199,0);
  border: 3px #08e8c7 solid;
  border-radius: 100px;
  height:10px;
  width:10px;
  }
  
.complete {
  display: inline-block;
  background: rgba(8,232,199,1);
  border: 3px #08e8c7 solid;
  border-radius: 100px;
  height:10px;
  width:10px;
  }

.key {
  background-color: #ffffff;
  color: #000000;
  font-family: calibri, trebuchet ms, helvetica, arial;
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 25px;
  text-align:left;
  text-transform:uppercase;
  padding: 10px;
  padding-left: 20px;
  width: 200px;
  border-width: 1px 0 0 0; border-style: solid;
    -webkit-border-image: -webkit-linear-gradient(right, #08e8c7, #ddd) 100% 1;
    -moz-border-image: -moz-linear-gradient(right, #08e8c7, #ddd) 100% 1;
    -o-border-image: -o-linear-gradient(right, #08e8c7, #ddd) 100% 1;
    border-image: linear-gradient(to right, #08e8c7, #ddd) 100% 1;
  box-shadow: 0px 0px 2px #ddd5cd;
}

/* rules style */

#container {
  width: 650px; 
  margin: 0 auto; 
  padding-top: 20px; 
  padding-bottom: 20px;
  }

.box {
  display: block; 
  background: rgba(255,255,255,.75); 
  border: 1px solid rgba(255,255,255,1); 
  box-shadow: 1px 1px rgba(189,189,189,.35); 
  outline: 1px solid rgba(189,189,189,.25); 
  outline-offset: -3px; padding: 10px; 
  text-align: justify;
  font-family: calibri, trebuchet ms, helvetica, arial;
  font-size: 12px;
  }

.header {
  display: block;
  font-size: 35px; 
  font-family: 'weverse';
  line-height: 35px;  
  letter-spacing: 0px; 
  text-transform: lowercase; 
  color: #08e8c7; 
  text-shadow: 1px 1px 1px rgba(189,189,189,.3); 
  text-align: left;
  }

/* rules highlight */
.point {
  color: #08e8c7; 
  font-weight: bold; 
  font-style: italic; 
  text-transform: uppercase; 
  font-size: 10px; 
  text-shadow: 1px 1px 1px rgba(189,189,189,.3);
  font-family: calibri, trebuchet ms, helvetica, arial;
  font-size: 10px;
  }