@font-face {
font-family: "DejaVu";
src: url("/chara_profiles/ff14/compendium_assets/dejavu-sans.book.eot");
src: url("/chara_profiles/ff14/compendium_assets/dejavu-sans.book.woff") format("woff"),;
}

body {
  font-family: "DejaVu";
}

hr {
   border: 1px dashed #A29077;
}

.menu{  
  position:absolute;
  top: 10%;
  left:5%;
  
  width: 15%;
  height: 70%;
}

.explain_profile {
  position:absolute;
  top: 30%;
  left:30%;
  
  width: 65%;
  height:50%;
}

.explain_concept {
  position:absolute;
  top: 15%;
  left:30%;
  
  width: 65%;
  height:50%;
}

/* LIST STYLING */

.list {
  position:relative;
  left:-15%;
  height:80%;
}

li { 
  list-style-type: none;
  font-size: medium;  
  }


.profile li::before {
  content: url('/chara_profiles/ff14/compendium_assets/profile_bullet.png');
  position:relative;  
  padding-right: 10px;/* space enough to accommodate asterisk size */
  vertical-align: middle;
  font-size: 31px;
  }
  
.concept li::before {
  content: url('/chara_profiles/ff14/compendium_assets/concept_bullet.png');
  position:relative;  
  padding-right: 10px;/* space enough to accommodate asterisk size */
  vertical-align: middle;
  font-size: 31px;
  }
  
/* SCROLL BAR styling */
.list , .explain_concept, .explain_profile {
  overflow-y: auto;
  scrollbar-color: #7C624A50 transparent;
  scrollbar-width: thin;
  }