/* Hewo, peeker of codes. 
   Feel free to use my codes (not the graphics) 
   for personal use, just give me credit. 
   I added comments to help you. */

/* Import Pixel Font */
@import url('04b03.css');

html, body { 
  height:100%; 
  }

/* Custom Cursor */
body, a, a:hover { 
   cursor:url('/images/cursor.png'), auto;
}

/* CSS Reset */
body {
   font-family: "04b03", Verdana;
   font-size: 12px;
   border: 0;
   margin: 0;
   padding: 0;
   color: #bc7cf4;
   line-height: 15px;
}
/* Cute Itty Bitty Scrollbar */
::-webkit-scrollbar {
   width: 8px;
   height: 8px;
   background: transparent;
}
::-webkit-scrollbar-button {
   width: 4px;
   height: 4px;
   background: transparent;
}
::-webkit-scrollbar-thumb {
   background-color: #d5a4ff;
   -webkit-border-radius: 0;
   border: 1px solid #a564df;
}
::-webkit-scrollbar-thumb:hover {
   background:#d5a4ff;
}
::-webkit-scrollbar-thumb:active {
   background:#d5a4ff;
}
::-webkit-scrollbar-track {
   background:0 0;
   border:none;border-radius:0;
}
::-webkit-scrollbar-track:hover {
   background:0 0;
}
::-webkit-scrollbar-track:active {
   background:0 0;
}
::-webkit-scrollbar-corner {
   background:0 0;
}

/* Text */
b, strong {
	color: #a564df;
	font-weight: bold;
	letter-spacing: 1.5px;
}

h1, h2, h3, h4 {
	color: #ffecfc;
	font-family: verdana;
	font-size: 7pt;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: normal;
	text-align: center;
	width: 98%;
	background-color: #d5a4ff;
	padding: 1px;
	border: 1px solid #bc7cf4;
}

/* Links */
a:link {
   color:#e081dd;
   text-decoration:none;
}
a:visited {
   color:#e081dd;
   text-decoration:none;
}
a:hover {
   color:#ffa4fc;
   text-decoration:none;
}
a:active {
   color:#e081dd;
   text-decoration:none;
}

/* Remove border on linked images */
a img {
   border: none;
}

/* Text area customizations */
textarea {
   font-family: "04b03", Verdana;
   font-size: 12px;
   color: #d5a4ff;
   height: 50px;
   width: 200px;
   background-color: #efe8f7;
   border-style: solid;
   border-color: #a564df;
   border-width: 1px;
   overflow: auto;
   
}


/* layout image - door closed */
.open_house {
	display: block;
	width: 200px;
	height: 300px;
	background-color: transparent;
	background-image: url("http://rosedryad.neocities.org/images/layout2close.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
  background-position: center top;
  padding-bottom: 10px; 
  padding-right: 346px; 
  z-index: -10;
  
}

/* layout image - door open on hover */
.open_house:hover {
	display: block;
	width: 200px;
	height: 300px;
	background-color: transparent;
	background-image: url("http://rosedryad.neocities.org/images/layout2open.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
  background-position: center top;
  padding-bottom: 10px; 
  padding-right: 346px; 
  z-index: -10;
  
}

/* layout content box top*/
#layouttop {
	display: block;
	position: absolute;
	width: 705px;
	height: 20px;
	top: 33.8%;
	left: 29%;
  z-index: 5;
  
}

/* character stats x1*/
.open_stats {
	display: block;
	width: 117px;
	height: 67px;
	background-color: transparent;
	background-image: url("http://rosedryad.neocities.org/images/layout2character.png");
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 5%;
	left: 25%;
	z-index: 1;
  
}

/* character stats x2 */
.open_stats:hover {
	display: block;
	width: 234px;
	height: 134px;
	background-color: transparent;
	background-image: url("http://rosedryad.neocities.org/images/layout2character2.png");
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 5%;
	left: 25%;
	z-index: 1;

}

/* character stats x1*/
.open_inventory {
	display: block;
	width: 109px;
	height: 87px;
	background-color: transparent;
	background-image: url("http://rosedryad.neocities.org/images/layout2inventory.png");
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 10%;
	left: 62%;
	z-index: 5;
  
}

/* character stats x2 */
.open_inventory:hover {
	display: block;
	width: 218px;
	height: 174px;
	background-color: transparent;
	background-image: url("http://rosedryad.neocities.org/images/layout2inventory2.png");
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 10%;
	left: 62%;
	z-index: 5;
}

/* For the main content box */
#main {
   position: absolute; 
   background: #ffffff;
   top: 36%; 
   left: 29%;
   width: 672px;
   height: 350px;
   border-radius: 0px 0px 25px 25px;
   padding: 15px;
   border: 1px dotted #a564df;
	 text-align: center;
   z-index: 11;
}

/* For the navigation box */
#nav {
   position: absolute; 
   background: #ffffff;
   top: 36%;
   left: 17%;
   width: 125px;
   height: 115px;
   border-radius: 25px;
   padding: 15px;
   border: 1px dotted #a564df;
   z-index: 10;
}
/* For music player */
#music {
   position: absolute;
   background: #ffffff;
   top: 56%;
   left: 17%;
   width: 125px;
   font-size: 11px;
   border-radius: 25px;
   padding: 15px;
   border: 1px dotted #a564df;
   z-index: 8;
   text-align: center;
}
/* For the update box */
#info {
   position: absolute;
   background: #ffffff;
   top: 36%;
   left: 74%;
   width: 170px;
   height: 350px;
   border-radius: 25px;
   padding: 15px;
   border: 1px dotted #a564df;
   z-index: 9;
}

/* For the copyright info box */
#footer {
  font-size: 11px;
  text-align: center;
   position: absolute;
   background: #ffffff;
   top: 85%;
   left: 29%;
   width: 671px;
   height: 20px;
   border-radius: 25px;
   padding: 15px;
   border: 1px dotted #a564df;
   z-index: 8;
}