/* general */
    body {background: #fff url(https://www.transparenttextures.com/patterns/binding-light.png) repeat fixed;}
    #container {width:550px; height:450px; top:0px; position:relative; margin: auto;}

    a{
      color: #0aa374;
      text-shadow: 1px 1px 1px #9fcbbf; 
      text-decoration: none; 
      -webkit-transition-duration: 1.0s; -moz-transition-duration: 1.0s; -o-transition-duration: 1.0s;
      }
      
    a:hover {
      text-decoration: none; 
      color:#919296; 
      } 
      
    body, a, a:hover {cursor:url(http://i.imgur.com/ONVDMqu.png), default;}
    b, em {font-weight:bold;color:#000;}
    .fa {color:#5b3278; padding-right:3px;} /* changes color or style of pictograms */

    body, a {cursor:url(http://i.imgur.com/ONVDMqu.png), default;} 
    a:hover {cursor:url(http://i.imgur.com/0p9CPwX.png), default;}

    .switcher-content { display: none; }

    ::selection {color: #0aa374;}
    ::-moz-selection {color: #0aa374;}

#s-m-t-tooltip {max-width:200px; width:auto; padding:3px 5px; margin:5px 0px 0px 10px; background-color: #fff; font-family: calibri, arial; font-size:8px; line-height: 8px; letter-spacing:+1px; text-transform:uppercase; text-align: justify; color:#000; text-shadow: 0px 0px 1px #a3a3a3; z-index:999999999999999999; -moz-box-shadow: 1px 2px 1px rgba(0,0,0,.1); -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,.1);}

    ::-webkit-scrollbar-thumb:vertical {background-color: #ddd7e0;}
    ::-webkit-scrollbar-button:horizontal {display:none;}
    ::-webkit-scrollbar {background-color:rgba(0,0,0,0.02); height:0px; width: 3px;}
    
    #infobg {z-index:100; position:absolute; opacity:0.8; left: -70px;top: -25px;}
    #infobg img {width:260px;}
      
  /* info section */
    #info {width:400px; height:150px; background-color:rgba(250,250,250,0.4); position:absolute; padding:10px; font-family:roboto condensed;color:#666;font-size:11px;font-weight:300; top:15px; z-index:10; float:right; left:100px; overflow:auto; box-shadow: 2px 3px 2px rgba(0,0,0,0.03);}
    .infoleft {padding:15px; text-align:right;height:150px;width:240px;position:absolute;bottom:0;left:-15px;}
    .inforight {width: 120px; height:100%; padding-left:20px; margin-left:250px; text-align:right;border-left:1px dotted #dfdfdf; }
    .icon {height:62px;border-radius:10%;-webkit-border-radius:10%;margin-top:10px;opacity:0.8; border: 1px dashed #148265;}
    #info li {line-height: 90%;}
    .name {
      font-size: 85px;
      font-weight: bold;
      line-height: 80%;
      font-family: 'Amatic SC';
      margin-top: 15px;
      display: block;
      text-shadow: 1px 2px 1px #9fcbbf;
      }
    .occupation {font-style:italic; font-weight:300; margin-top:5px; font-size:9px; text-transform:uppercase; display;block;}
    article {padding:5px;display:inline-block;vertical-align:bottom;margin-top:20px;}
    .stats {font-weight:300; font-size:9px; text-transform: uppercase; color:#666; padding:0!important; letter-spacing:1px; line-height:13px; margin-top:15px; width:180px; text-shadow: 0px 0px 1px #a3a3a3;}
    
  /* nav links */
    nav ul {list-style-type:none; padding:0; margin:7px 0 -7px 30px;}
    nav li {position:relative; text-align:right; margin:0 0 3px;}
    nav li::before {content:""; position:absolute; top:7px; left:-30px; right:0; height:1px; background-color:#D6D6D6;} 
    nav a {text-transform:uppercase;padding:0px 1px 0px 5px;background-color:rgba(250,250,250,1.0);color:#666;border:none;font-family:calibri, arial;leter-spacing:1px;font-size:8px;letter-spacing:1px;position:relative;text-align:right;}
    nav a:hover {padding-right:20px;background-color:rgba(250,250,250,1.0);}
    
  /* main content */
    #content {width: 520px; background-color:rgba(250,250,250,0.95); height:370px; position: absolute; top: 170px; border-image: repeating-linear-gradient(to right, #148265, #3be0ad) 10;border-bottom:3px solid #3be0ad; z-index: 2000;}
    #topbar {background: linear-gradient(to right, #148265, #3be0ad); filter: alpha(opacity=90);width:100%; height:7px; display: block; border-bottom:6px double #FFF;}
    #contentz {width:490px; padding:10px 15px 15px 15px; height:335px; overflow: hidden;}
    .main {width: 490px; height: 335px; padding-right:10px; overflow: auto; text-align: justify; font-family: calibri, arial; text-transform:uppercase; font-size:10px; letter-spacing: .5px; word-spacing: 2; padding-top: 3; text-shadow: 0px 0px 1px #a3a3a3;} 
    .main p {margin: 0 0 10px;}
    .main i {font-weight:bold;}
    .main a:hover {color:#f7bc09;}
    .leftscroll { float: left; width: 63%; height:100%; margin-left: 4px; padding-right:4px; overflow: auto; }
    .rightscroll { float: right; width: 32%; height:100%; padding-left:3px; padding-right:4px; overflow: auto; }
    .left { float: left; width: 48%; margin-left: 5px; }
    .right { float: right; width: 48%; }
    .summary {border: 1px dashed rgba(0,0,0,0.2); font-family:calibri; text-transform:none; font-size:8px; letter-spacing: 1px; line-height:120%; color:#333; text-align:justify; padding:7px; margin-bottom:10px;} 
    .summary .fa {color:#999;} /* changes the color of quotation marks or if you want your pictograms to looks different in a specific section */

  /* bio */
    bah {display: block; font-family:roboto condensed;color:#0aa374;font-size:9px;font-weight:300; text-transform:uppercase; line-height:150%; padding: 0; letter-spacing:.5px; margin-bottom:8px; margin-top:1px;}
    subtitle {font-family: calibri, arial; font-size:8px; color: #fff; line-height:10px; letter-spacing:1px; text-transform:uppercase; border-bottom: 1px dotted #c2c2c2; opacity:0.9; margin-bottom:1px; margin-top:1px;}  
    subtitle {text-indent:4px;display:block;padding:1px 0 1px 0; color:#000; letter-spacing:1px; text-shadow: 0px 0px 1px #a3a3a3;}

    category {font-family: calibri, arial; font-size:8px; line-height:10px; letter-spacing:1px; text-transform:uppercase; border-bottom: 1px solid #ffffff; background: linear-gradient(to right, rgba(218, 169, 38, 1), rgba(218, 169, 38, 0.75), transparent);}
    category {text-indent:4px;display:block;padding:1px 0 1px 0; color:#fff; letter-spacing:1px; text-shadow: 0px 0px 1px #a3a3a3;}

      
  /* misc */
  .family {height:20px; padding:1px; margin-bottom:8px;}
  .famicon {width:25px; float:right; background: repeating-linear-gradient(to bottom, rgba(91, 50, 120, 1), rgba(184, 159, 203, 0.75)); padding:0px; border-radius:50%; -webkit-border-radius:50%;}
  .famtitle {float:right; padding:0px 0px 0 0px; width:88%; overflow:hidden; text-transform:uppercase; font-weight: 300; display:block; font-family: calibri, arial; font-size:8px; line-height:80%; border-bottom: 1px solid rgba(0,0,0,0.08); letter-spacing:+1px; margin-bottom:2px;}  
  .famblurb {float:right; background: rgba(0,0,0,0); font-size:8px; width:82%;  overflow: auto;  line-height:10px;margin-bottom:5px;}
  .lineicon {width:52px; padding:2px;}

}}