/* these are names of the divs (dividers) that I've created on the page (they are not pet layout default divs). / / DO NOT EDIT IF YOU DO NOT KNOW HOW. You are obviously free to play around with them if you're learning and experimenting with code. */ {position:absolute;top:500px;left:300px;background-color:transparent;width:190px;height:25px;font-size:9px;z-index:5;overflow:hidden; opacity:.9;} {position:absolute;left:10px;top:80px;width:480px;height:400px;overflow:hidden;background-color:;text-align:left;font-size:10px;color:black!important;} :hover{overflow-y:auto;} {opacity: .2; background-color: transparent; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;} :hover {opacity: 1; background-color: white}

/* these are a few of the sections that are already found on the pet profile page. / / Please look up their names and what they do in the CSS Compendium as I'm not / / going to comment what every single one is. They are named pretty well as their names tell you what it does or holds. / / If you're learning how to code, look up the difference between "#" (id) and "." (class). It's very very very useful. */ {top:100px;left:150px;width:500px;min-height:500px!important; height:500px!important;border:2px solid ;margin:0px;padding:0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; border-top-right-radius: 15px; border-top-left-radius: 15px;} {position:absolute;left:230px;top:-25px;} .treasure_item{margin-top:1px;margin-left:1px;} .treasure_item_name,.statbar,.weapon_item,.pet_age_info_date,.pet_wco_info_date{display:none;} {text-transform:lowercase;position:absolute;left:270px;top:220px;font-size:8px; overflow: hidden; z-index:8;width:130px;background-color:; border: 5px solid white; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;} {width: 0px; height: 120px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;} :hover {width: 130px; height: 120px;} .pet_name{position:absolute;left:25px;top:15px;font-family:Georgia,Arial;font-size:28px;color:! important;background-color:;z-index:10;} .pet_spotlight{position:absolute;top:345px;left:500px;height:120px;width:130px;text-align:center center;background-color:;font-size:8px;z-index:8;border: 5px solid white; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;} .pet_spotlight a{color:;} .pet_spotlight a:hover{color:;} .pet_spotlight{width: 0px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;} .pet_spotlight:hover {width: 130px;} {display:none;} .owner{position:absolute;left:150px;top:37px;} .pet_color_info{position:fixed;position:absolute;top:37px;left:5px;width:160px;z-index:10;} {display: none;} .pet_like{position:absolute;left:10px;top:37px;}

{position:absolute;left:500px;top:50px;width:275px;height:120px;background-color:;overflow:hidden;align:left;z-index:8;padding:0px; border: 5px solid white; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;} :hover{overflow:auto;} {width: 0px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;} :hover {width: 275px;}

/* the webkit stuff is what's making the shiny awesome hover effects for the individual treasure chest items yayy (google to learn more) */ .treasure_item{margin-top:0px;margin-left:0px;height:60px!important;width:60px!important;opacity:.6;-webkit-transition: opacity .5s linear;-moz-transition: opacity .5s linear;border-left:1px solid ;} .treasure_item img{height:50px!important;width:50px!important;} .treasure_item:hover{opacity:1;-webkit-transition: opacity .5s linear;-moz-transition: opacity .5s linear;}

/* SUPER EDITABLE PART OF THE PROFILE. / / replace the Color name (like WHITE or BLACK) with a hex color code. / / CSS automatically knows certain colors like WHITE or BLACK or RED as they have preset hex codes */

{background-color:white;}

html,body{ background-color:black; /* okay, tacky comment place. But, if you want a background image, this is the code to put it in. / / it's very easy to google "how to set background image css" -- the code following the URL determines other background properties */ background-image:url(https://31.media.tumblr.com/fe71356550cf3ec1bacf30c877fc95a4/tumblr_inline_mxg7z4NqpB1rkylb2.png); background-repeat: tiled;}

/* color of your pet's name */ .pet_name{color: !important;;}

b{color:black;}

i{font-family:Georgia;color:black;}

u{border-bottom:1px dashed ;color:;}

hr{color:;background-color:;height:1px;width:90%;border:;}

h1{font-size:18px; text-align:right;}

a,a:link,a:active,a:visited{color:;}

a:hover{color:skyblue;}

/* IF YOU DO NOT WANT THIS EXTRA DIV, ERASE THE CODE THAT SAYS <div id="extra"> ....... ..... </div> / / feel free to play around with the coding here / / NOTE: All these divs are "inside" , / / so when I use position:absolute; I am referencing top:0px meaning 0px from the top of */ {position:absolute;top:100px;left:550px;height:1000px;width;1000px;}

</style> <div id="credit">Based on premade profile by </div>

<div id="main">

</div>

<div id="extra">