<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="box"><div class="contain"><div class="leftt"><div class="headshot"></div><div class="title1"><div class="title2">Jericho</div><div class="numbercircle">20</div></div><div class="circletitle">island of secrets</div><div class="circle"><div class="cougar"></div></div></div><div class="rightt"><div class="bar">
<!-- BASICS -->
<div class="nav1"><div class="nav1title">basic info</div><div class="nav1content"><div class="basics">RANK
<div class="basicrounded">SHAMAN</div>
AGE
<div class="basicrounded">30 MOONS</div>
GENDER
<div class="basicrounded">SHE-CAT</div></div><div class="hollowslullaby"><div class="spikeshape"></div>Hollows lullaby</div></div></div>
<!-- PERSONALITY -->
<div class="nav2"><div class="nav2title">Personality</div><div class="nav2content"><div class="personality"><div class="personalityscroll"><div class="personalitycontent"><u>Personality</u><div class="personalitybox1">good<div class="personalitybox2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div></div><div class="personalitybox1">neutral<div class="personalitybox2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div></div><div class="personalitybox1">bad<div class="personalitybox2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div></div>
<hr><u>impressions</u><div class="personalitybox1">good<div class="personalitybox2">oleander--</div></div><div class="personalitybox1">neutral<div class="personalitybox2">TEXT</div></div><div class="personalitybox1">bad<div class="personalitybox2">TEXT</div></div></div></div></div></div></div>
<!-- SKILLS -->
<div class="nav3"><div class="nav3title">Skills</div><div class="nav3content"><div class="skills"><div class="skillsscroll"><div class="skillscontent"><u>Attributes and skills</u><div class="hp">hp</div><div class="hpbar">50/100</div><div class="magic">magic</div><div class="magicbar">50/100</div><div class="xp">xp</div><div class="xpbar">50/100</div><div class="skills1"><div class="skilltitle">skill</div><div class="skillbar1">5/10</div><div class="skilltitle">skill</div><div class="skillbar2">5/10</div><div class="skilltitle">skill</div><div class="skillbar3">5/10</div><div class="skilltitle">skill</div><div class="skillbar4">5/10</div></div><div class="skills2"><div class="skilltitle">skill</div><div class="skillbar5">5/10</div><div class="skilltitle">skill</div><div class="skillbar6">5/10</div><div class="skilltitle">skill</div><div class="skillbar7">5/10</div><div class="skilltitle">skill</div><div class="skillbar8">5/10</div></div></div></div></div></div></div>
<!-- HISTORY-->
<div class="nav4"><div class="nav4title">History</div><div class="nav4content"><div class="personality"><div class="personalityscroll"><div class="personalitycontent"><u>History</u><div class="personalitybox1">text<div class="personalitybox2">Lorem ipsum dolor sit amet</div></div></div></div></div></div></div>
<!-- INVENTORY -->
<div class="nav5"><div class="nav5title">Inventory</div><div class="nav5content"><div class="basics2"><u>Inventory</u><div class="inventory"><div class="inventorybox">flower</div><div class="inventorybox">flower</div><div class="inventorybox">flower</div><div class="inventorybox">flower</div><div class="inventorybox">flower</div><div class="inventorybox">flower</div><div class="inventorybox">flower</div><div class="inventorybox">flower</div></div></div><div class="money"><div class="inventoryrounded">money</div>
<img src="https://i.gyazo.com/f5744b777326b322d1169c525290c21b.png">
<div class="inventoryrounded">1000sfs</div></div></div></div>
<!-- FAMILY -->
<div class="nav6"><div class="nav6title">Family</div><div class="nav6content"><div class="familycontent"><div class="familyscroll"><div class="family"><h1><u>Family</u></h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><u>Relations</u><div class="relationsbox"><div class="relationscircle"><img src="https://i.imgur.com/kcLVuUM.png"></div><div class="relationstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><div class="relationsname">Sunrise</div></div>
<div class="relationsbox"><div class="relationscircle"><img src="https://i.imgur.com/kcLVuUM.png"></div><div class="relationstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><div class="relationsname">Sunrise</div></div></div></div></div></div>
<!-- LINKS -->
<div class="list"><div class="nav7title">Links</div><ul><li>.<ul><li><a href="https://deviantart.com">link 1</a></li><li><a href="https://deviantart.com">link 2</a></li><li><a href="https://deviantart.com">link 3</a></li></ul></li></ul></div></div></div></div></div>F
*{background:none; border:none;}
.gr-top span,.gr-top img, .gr h2, .gr1, .gr2, .gr3, .gr3, .tri, .gr-top img {display: none;}
.gr-box {width: 100%;}
.gr-top, h2 {margin: 0; padding: 0; border: 0;}
.gr-top .gr{padding: 0!important; border: 0;}
.gr-top .gr{
border: none;
padding: 0;
background: transparent;}
.commentslink{display:none;}
.gr-body{
background: #fff url(https://i.imgur.com/fh2QjtP.jpg);
background-size:100%;
background-attachment:fixed;
background-position: top center;
background-repeat:no-repeat;
height:570px;
}
hr{
border-top: 1px solid #903730;
}
h1{
font-family: 'Finger Paint', Arial;
font-size:18pt;
font-weight:100;
color: #b3635d;
text-align:center;
text-transform:uppercase;
top:5px;margin-bottom:-20px;
}
/* ----------- MAIN AREA ----------- */
.box{
position:absolute;
margin:auto;
left:0;
top:0;
width:100%;
height:800px;
background:transparent;
}
.contain {
position:absolute;
margin:auto;left:0;right:0;
top:100px;
width:665px;
height:325px;
background: transparent;
}
.leftt {
position:absolute;
margin:auto;left:0;
top:0px;
width:290px;
height:325px;
background: #d69b85;
}
.headshot{
position:absolute;
margin:auto;left:0;right:0;
top:10px;
width:265px;
height:305px;
background: #e9cebc;
border-radius:15px;
background-image:url(https://i.imgur.com/lYVb8tU.png);
background-repeat:no-repeat;
background-size:110%;
background-position:100% 30%;
}
.title1 {
position:absolute;
margin:auto;left:0;
top:-60px;
width:290px;
height:60px;
background: #903730;
}
.title2 {
position:absolute;
margin:auto;left:0;right:0;
top:7px;
width:270px;
height:46px;
background: #e9cebc;
border-radius:15px;
font-family: 'Finger Paint', Arial;
font-size:28pt;
font-weight:100;
color: #b3635d;
text-align:center;
text-transform:uppercase;
line-height:46px;
letter-spacing:2px;
}
.numbercircle {
position:absolute;
margin:auto;left:250px;right:0;
top:-12px;
width:70px;
height:70px;
background: #e9cebc;
border-radius:70px;
border: 7px solid #903730;
font-family: 'Finger Paint', Arial;
font-size:40pt;
font-weight:100;
color: #b3635d;
text-align:center;
text-transform:uppercase;
line-height:60px;
}
.circle{
position:absolute;
margin:auto;left:0;right:0;
top:280px;
width:130px;
height:130px;
border-radius:130px;
background: #b3635d;
border:10px solid #903730;
background-image:url(https://i.imgur.com/FOXNcLU.png);
background-repeat:no-repeat;
background-size:90%;
background-position:50% 0%;
overflow:hidden;
}
.circletitle{
position:absolute;
margin:auto;left:165px;
top:340px;
width:480px;
height:40px;
border-radius:15px;
background: #e9cebc;
border:10px solid #d69b85;
font-family: 'Finger Paint', Arial;
font-size:20pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
}
.cougar{
position:absolute;
margin:auto;left:0;right:0;
top:55px;
width:130px;
height:130px;
border-radius:130px;
background: transparent;
border:0px;
background-image:url(https://i.imgur.com/v3p5Ikr.png);
background-position:bottom center;
background-repeat:no-repeat;
-webkit-transition: top 0.5s ease;
-moz-transition:top 0.5s ease;
-o-transition: top 0.5s ease;
transition: top 0.5s ease;
}
.circle:hover .cougar{
top:0px;
-webkit-transition: top 0.5s ease;
-moz-transition:top 0.5s ease;
-o-transition: top 0.5s ease;
transition: top 0.5s ease;
}
.rightt {
position:absolute;
margin:auto;left:290px;
top:25px;
width:375px;
height:300px;
background: #903730;
border-radius: 0px 15px 15px 0px;
}
.bar{
position:absolute;
margin:auto;left:0px; right:0;
top:15px;
width:355px;
height:30px;
background:transparent;
overflow:visible;
}
/* ----------- BASICS ----------- */
.nav1{
position:absolute;
margin:auto;left:0px;
top:0;
width:45px;
height:35px;
background: #b3635d;
overflow:visible;
border-radius:14px 0px 0px 14px;
}
.nav1title {
position:absolute;
margin:auto;left:-5px;
top:-45px;
width:55px;
height:0px;
background: rgba(233,206,188,0.8);
border-radius:14px;
font-family: 'Finger Paint', Arial;
font-size:10pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:17px;
opacity:0;
overflow:hidden;
transform:translate(0px,10px);
-webkit-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.nav1content{
position:absolute;
margin:auto;left:0px; right:0;
top:35px;
width:355px;
height:240px;
background:transparent;
overflow:hidden;
opacity:1;
-webkit-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.basics {
position:absolute;
margin:auto;left:0px;
top:10px;
width:170px;
height:230px;
background:#b3635d;
border-radius:5px;
overflow:hidden;
font-family: 'Finger Paint', Arial;
font-size:18pt;
font-weight:100;
color: #e9cebc;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:37px;
overflow:hidden;
}
.basicrounded{
position:relative;
display:inline-block;
margin:auto;left:0;right:0px;
top:0px;
width:155px;
height:30px;
background:#e9cebc;
border-radius:15px;
overflow:hidden;
font-family: 'Open Sans', Arial;
font-size:18pt;
font-weight:100;
color: #000;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:30px;
overflow:hidden;
}
.hollowslullaby {
position:absolute;
margin:auto;right:0px;
top:10px;
width:170px;
height:230px;
background:#b3635d;
border-radius:5px;
overflow:hidden;
color:#e9cebc;
font-family: 'Finger Paint', Arial;
font-size:20pt;
font-weight:100;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:30px;
}
.spikeshape{
position:relative;
display:inline-block;
margin:auto;right:0px;
top:10px;
bottom:-30px;
width:170px;
height:160px;
background:transparent;
border-radius:5px;
overflow:hidden;
background-image:url(https://i.imgur.com/8fe3AhJ.png);
background-repeat:no-repeat;
background-size:90%;
background-position:50% 0%;
}
.nav1:hover .nav1title{
height:35px;
opacity:1;
transform:translate(0px,0px);
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
}
.nav1:hover .nav1content{
height:240px;
opacity:1;
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
}
/* ----------- PERSONALITY ----------- */
.nav2{
position:absolute;
margin:auto;left:60px;
top:0;
width:35px;
height:35px;
background: #e9cebc;
}
.nav2title {
position:absolute;
margin:auto;left:-40px;
top:-45px;
width:125px;
height:0px;
background: rgba(233,206,188,0.8);
border-radius:14px;
font-family: 'Finger Paint', Arial;
font-size:10pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:25px;
opacity:0;
overflow:hidden;
transform:translate(0px,10px);
-webkit-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.nav2content{
position:absolute;
margin:auto;left:-60px; right:0;
top:35px;
width:355px;
height:0px;
background:transparent;
overflow:hidden;
opacity:0;
-webkit-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.personality{
position:absolute;
margin:auto;left:0px; right:0;
top:10px;
width:355px;
height:230px;
background:#e9cebc;
border-radius:5px;
overflow:hidden;
opacity:1;
}
.personalityscroll{
position:absolute;
margin:auto;left:0px; right:0;
top:0px;
width:372px;
height:247px;
background:transparent;
border-radius:5px;
overflow:scroll;
opacity:1;
}
.personalitycontent{
position:absolute;
display:inline-block;
margin:auto;left:0px; right:0;
top:5px;
width:330px;
height:auto;
background:transparent;
overflow:hidden;
white-space:pre-wrap;
opacity:1;
font-family: 'Finger Paint', Arial;
font-size:20pt;
font-weight:100;
color: #b3635d;
text-align:center;
text-transform:uppercase;
line-height:36px;
letter-spacing:2px;
}
.personalitybox1{
position:relative;
display:inline-block;
margin:auto;left:0px; right:0;
top:5px;margin-bottom:25px;
width:330px;
height:40px;
background:#d69b85;
font-family: 'Finger Paint', Arial;
font-size:24pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
line-height:40px;
letter-spacing:2px;
opacity:1;
}
.personalitybox2{
position:relative;
margin:auto;left:0px; right:0;
top:0px;
width:310px;
padding:0;
height:0px;
overflow:hidden;
background:#f9e6d9;
border-radius: 0px 0px 5px 5px;
opacity:1;
font-family:'Open Sans', Arial;
font-size:10pt;
font-weight:100;
color:#000;
text-align:center;
text-transform:none;
line-height:17px;
letter-spacing:auto;
}
.personalitybox1:hover .personalitybox2{
height:auto;
padding:5px 10px 5px 10px;
}
.nav2:hover .nav2title{
height:25px;
opacity:1;
transform:translate(0px,0px);
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
}
.nav2:hover .nav2content{
height:240px;
opacity:1;
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
}
/* ----------- SKILLS ----------- */
.nav3{
position:absolute;
margin:auto;left:110px;
top:0;
width:35px;
height:35px;
background: #b3635d;
}
.nav3title {
position:absolute;
margin:auto;left:-20px;
top:-45px;
width:75px;
height:0px;
background: rgba(233,206,188,0.8);
border-radius:14px;
font-family: 'Finger Paint', Arial;
font-size:10pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:25px;
opacity:0;
overflow:hidden;
transform:translate(0px,10px);
-webkit-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.nav3content{
position:absolute;
margin:auto;left:-110px; right:0;
top:35px;
width:355px;
height:0px;
background:transparent;
overflow:hidden;
opacity:0;
-webkit-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.skills{
position:absolute;
margin:auto;left:0px; right:0;
top:10px;
width:355px;
height:230px;
background:#b3635d;
border-radius:5px;
overflow:hidden;
opacity:1;
font-family: 'Finger Paint', Arial;
font-size:18pt;
font-weight:100;
color: #e9cebc;
text-align:center;
text-transform:uppercase;
line-height:36px;
letter-spacing:1px;
}
.skillsscroll{
position:absolute;
margin:auto;left:0px; right:0;
top:0px;
width:372px;
height:247px;
background:transparent;
border-radius:5px;
overflow:scroll;
opacity:1;
}
.skillscontent{
position:absolute;
margin:auto;left:-10px; right:0;
top:0px;
width:372px;
height:430px;
background:transparent;
overflow:hidden;
opacity:1;
}
.hp{
position:absolute;
margin:auto;left:0px; right:0;
top:40px;
width:330px;
height:30px;
background:transparent;
border-radius:5px;
overflow:hidden;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:20pt;
font-weight:100;
color: #e9cebc;
text-align:left;
text-transform:uppercase;
line-height:36px;
letter-spacing:1px;
}
.hpbar{
position:absolute;
margin:auto;left:0px; right:0;
top:75px;
width:330px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:20pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:42px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .hpbar{
box-shadow: inset 165px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.magic{
position:absolute;
margin:auto;left:0px; right:0;
top:90px;
width:330px;
height:30px;
background:transparent;
border-radius:5px;
overflow:hidden;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:20pt;
font-weight:100;
color: #e9cebc;
text-align:left;
text-transform:uppercase;
line-height:36px;
letter-spacing:1px;
}
.magicbar{
position:absolute;
margin:auto;left:0px; right:0;
top:125px;
width:330px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:20pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:42px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .magicbar{
box-shadow: inset 165px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.xp{
position:absolute;
margin:auto;left:0px; right:0;
top:140px;
width:330px;
height:30px;
background:transparent;
border-radius:5px;
overflow:hidden;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:20pt;
font-weight:100;
color: #e9cebc;
text-align:left;
text-transform:uppercase;
line-height:36px;
letter-spacing:1px;
}
.xpbar{
position:absolute;
margin:auto;left:0px; right:0;
top:175px;
width:330px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:20pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:42px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .xpbar{
box-shadow: inset 165px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skills1{
position:absolute;
margin:auto;left:25px;
top:220px;
width:150px;
height:200px;
background:#d69b85;
border-radius:5px;
overflow:hidden;
}
.skills2{
position:absolute;
margin:auto;left:200px;
top:220px;
width:150px;
height:200px;
background:#d69b85;
border-radius:5px;
overflow:hidden;
}
.skilltitle{
position:relative;
display:block;
margin:auto;left:0px;right:0;
top:2px;bottom:2px;
width:130px;
height:30px;
background:transparent;
opacity:1;
font-family: 'Finger Paint', Arial;
font-size:16pt;
font-weight:100;
color:#903730;
text-align:left;
text-transform:uppercase;
line-height:30px;
letter-spacing:1px;
}
.skillbar1{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar1{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skillbar2{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar2{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skillbar3{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar3{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skillbar4{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar4{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skillbar5{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar5{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skillbar6{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar6{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skillbar7{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar7{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.skillbar8{
position:relative;
display:block;
margin:auto;left:0px; right:0;
top:2px;margin-bottom:5px;
width:130px;
height:10px;
background:#d4e1fc;
border-radius:5px;
opacity:1;
font-family: 'Open Sans Condensed', Arial;
font-size:14pt;
font-weight:100;
color: #e9cebc;
text-align:right;
text-transform:uppercase;
line-height:40px;
letter-spacing:1px;
box-shadow: inset 0px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .skillbar8{
box-shadow: inset 65px 0 0 0 #3b6ac9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav3:hover .nav3title{
height:25px;
opacity:1;
transform:translate(0px,0px);
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
}
.nav3:hover .nav3content{
height:240px;
opacity:1;
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
}
/* ----------- HISTORY ----------- */
.nav4{
position:absolute;
margin:auto;left:160px;
top:0;
width:35px;
height:35px;
background: #e9cebc;
}
.nav4title {
position:absolute;
margin:auto;left:-25px;
top:-45px;
width:90px;
height:0px;
background: rgba(233,206,188,0.8);
border-radius:14px;
font-family: 'Finger Paint', Arial;
font-size:10pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:25px;
opacity:0;
overflow:hidden;
transform:translate(0px,10px);
-webkit-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.nav4content{
position:absolute;
margin:auto;left:-160px; right:0;
top:35px;
width:355px;
height:0px;
background:transparent;
overflow:hidden;
opacity:0;
-webkit-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.nav4:hover .nav4title{
height:25px;
opacity:1;
transform:translate(0px,0px);
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
}
.nav4:hover .nav4content{
height:240px;
opacity:1;
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
}
/* ----------- INVENTORY ----------- */
.nav5{
position:absolute;
margin:auto;left:210px;
top:0;
width:35px;
height:35px;
background: #b3635d;
}
.nav5title {
position:absolute;
margin:auto;left:-35px;
top:-45px;
width:105px;
height:0px;
background: rgba(233,206,188,0.8);
border-radius:14px;
font-family: 'Finger Paint', Arial;
font-size:10pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:25px;
opacity:0;
overflow:hidden;
transform:translate(0px,10px);
-webkit-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.nav5content{
position:absolute;
margin:auto;left:-210px; right:0;
top:35px;
width:355px;
height:0px;
background:#903730;
overflow:hidden;
opacity:0;
-webkit-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.basics2 {
position:absolute;
margin:auto;left:0px;
top:10px;
width:200px;
height:230px;
background:#b3635d;
border-radius:5px;
overflow:hidden;
font-family: 'Finger Paint', Arial;
font-size:18pt;
font-weight:100;
color: #e9cebc;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:37px;
overflow:hidden;
}
.money {
position:absolute;
margin:auto;left:210px;
top:10px;
width:140px;
height:230px;
background:transparent;
border-radius:5px;
overflow:hidden;
}
.inventory{
position:absolute;
margin:auto;left:0px; right:0;
top:40px;
width:180px;
height:180px;
background:#e9cebc;
border-radius:5px;
overflow:hidden;
opacity:1;
}
.inventorybox{
position:relative;
display:inline-block;
margin:auto;left:0px;right:0;
margin-right:3px;
top:5px;
width:80px;
height:35px;
background:transparent;
border-radius:5px;
overflow:hidden;
opacity:1;
font-family: 'Open Sans', Arial;
font-size:12pt;
font-weight:100;
color: #000;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:35px;
}
.inventoryrounded{
position:relative;
display:inline-block;
margin:auto;left:0;right:0px;
top:0px;
width:140px;
height:30px;
background:#b3635d;
border-radius:15px;
overflow:hidden;
font-family: 'Finger Paint', Arial;
font-size:18pt;
font-weight:100;
color:#e9cebc;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:30px;
overflow:hidden;
}
.nav5:hover .nav5title{
height:25px;
opacity:1;
transform:translate(0px,0px);
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
}
.nav5:hover .nav5content{
height:240px;
opacity:1;
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
}
/* ----------- FAMILY ----------- */
.nav6{
position:absolute;
margin:auto;left:260px;
top:0;
width:35px;
height:35px;
background: #e9cebc;
}
.nav6title {
position:absolute;
margin:auto;left:-20px;
top:-45px;
width:75px;
height:0px;
background: rgba(233,206,188,0.8);
border-radius:14px;
font-family: 'Finger Paint', Arial;
font-size:10pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:25px;
opacity:0;
overflow:hidden;
transform:translate(0px,10px);
-webkit-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.nav6content{
position:absolute;
margin:auto;left:-260px; right:0;
top:35px;
width:355px;
height:0px;
background:#903730;
overflow:hidden;
opacity:0;
-webkit-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.familycontent{
position:absolute;
margin:auto;left:0px; right:0;
top:10px;
width:355px;
height:230px;
background:transparent;
border-radius:5px;
overflow:hidden;
opacity:1;
font-family: 'Finger Paint', Arial;
font-size:18pt;
font-weight:100;
color: #b3635d;
text-align:center;
text-transform:uppercase;
}
.familyscroll{
position:absolute;
margin:auto;left:0px; right:0;
top:0px;
width:372px;
height:247px;
background:transparent;
border-radius:5px;
overflow:scroll;
opacity:1;
}
.family{
position:relative;
display:inline-block;
margin:auto;left:0px; right:0;
top:0px;
width:355px;
height:125px;
background:#e9cebc;
overflow:hidden;
opacity:1;
border-radius:5px;
font-family:'Open Sans', Arial;
font-size:10pt;
font-weight:100;
color:#000;
text-align:center;
text-transform:none;
line-height:17px;
letter-spacing:auto;
}
.relationsbox{
position:relative;
display:block;
left:0px;
top:0px;
width:360px;
height:100px;
background:transparent;
opacity:1;
margin-bottom:-25px;
}
.relationscircle{
position:absolute;
left:0px;
top:0px;
width:88px;
height:88px;
background:#e9cebc;
opacity:1;
border-radius:100px;
border:7px solid #d69b85;
z-index:2;
}
.relationstext{
position:absolute;
left:51px;
top:24px;
width:244px;
height:54px;
padding:5px 5px 5px 55px;
background:#e9cebc;
overflow:hidden;
opacity:1;
border-radius:0px 5px 5px 0px;
z-index:1;
font-family:'Open Sans', Arial;
font-size:8pt;
font-weight:100;
color:#000;
text-align:center;
text-transform:none;
line-height:17px;
letter-spacing:auto;
}
.relationsname{
position:absolute;
right:5px;
top:0px;
width:120px;
height:20px;
padding:0px;
background:#d69b85;
overflow:hidden;
opacity:1;
border-radius:20px;
z-index:1;
font-family:'Finger Paint', Arial;
font-size:11pt;
font-weight:100;
color:#b3635d;
text-align:center;
text-transform:uppercase;
line-height:20px;
letter-spacing:2px;
}
.nav6:hover .nav6title{
height:25px;
opacity:1;
transform:translate(0px,0px);
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
}
.nav6:hover .nav6content{
height:240px;
opacity:1;
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s;
}
.list{
position:absolute;
margin:auto;left:310px;
top:0;
width:45px;
height:35px;
background: #b3635d;
border-radius: 0px 14px 0px 0px;
}
.nav7title {
position:absolute;
margin:auto;left:-15px;
top:-45px;
width:65px;
height:0px;
background: rgba(233,206,188,0.8);
border-radius:14px;
font-family: 'Finger Paint', Arial;
font-size:10pt;
font-weight:100;
color: #903730;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
line-height:25px;
opacity:0;
overflow:hidden;
transform:translate(0px,10px);
-webkit-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
transition: height 0s ease 0.5s, transform 0s ease 0.5s, opacity 0.5s ease-in-out 0s;
}
.list:hover .nav7title{
height:25px;
opacity:1;
transform:translate(0px,0px);
-webkit-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-moz-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
-o-transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
transition: height 0s ease 0s, opacity 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
}
.list ul li {
width:95px;
color:transparent!important;
text-transform:lowercase;
font-weight:100;
text-align:center;
line-height:40px;
letter-spacing:1px;
font-family:'Finger Paint', Verdana;
font-size:0px;
z-index:10;
}
.list ul li ul li {
width:100%;
font-family:'Finger Paint', 'Arial';
text-transform:lowercase;
font-size:18pt;
letter-spacing:1px;
z-index:10;
}
.list ul {
width:100%;
text-align:center;
list-style:none;
display:inline-block;
position:relative;
clear:both;
margin:auto;
margin-top:0px;
margin-bottom:0px;
border:none;
padding:0;
list-style:none;
background:transparent;
font-family:'Finger Paint', 'Arial';
font-size:18pt;
z-index:10;
}
.list ul:before, .list ul:after {
content:'';
display:table;
z-index:10;
}
.list ul:after {
clear:both;
z-index:10;
}
.list ul > li {
float:left;
position:relative;
z-index:10;
}
.list a {
display:block;
padding:8px 0px;
line-height:1.2em;
font-size:14pt;
color:#e9cebc;
transition:all 0.2s;
-moz-transition:all 0.2s;
-webkit-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
z-index:10;
}
.list a:hover {
text-decoration:none;
background:#d69b85;
color:#e9cebc;
z-index:10;
}
.list li ul {
position:absolute;
left:0;
z-index:10;
background:#d69b85;
margin-top:35px;
margin-left:-50px;
line-height:5px;
text-align:center;
z-index:10;
border-radius: 0px 0px 5px 5px;
}
.list li ul li {
width:100%;
z-index:10;
}
.list li ul a {
border:none;
z-index:10;
}
.list li ul a:hover {
}
.list li ul li {
overflow:hidden;
max-height:0;
z-index:10;
transition:max-height 0.5s ease;
-moz-transition:max-height 0.5s ease;
-webkit-transition:max-height 0.5s ease;
-ms-transition:max-height 0.5s ease;
-o-transition:max-height 0.5s ease;
}
.list ul > li:hover ul li {
max-height:150px;
}
.list li ul li:hover {
transition:all 0.2s ease-out, background 1s ease-in;
-moz-transition:all 0.2s ease-out, background 1s ease-in;
-webkit-transition:all 0.2s ease-out, background 1s ease-in;
-ms-transition:all 0.2s ease-out, background 1s ease-in;
-o-transition:all 0.2s ease-out, background 1s ease-in;
color:#e9cebc;
}
