/* 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');

/* 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;
   background-color: transparent;
   color: #f9859c;
   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: #ffadbe;
   -webkit-border-radius: 0;
   border: 1px solid #dc677e;
}
::-webkit-scrollbar-thumb:hover {
   background:#ffadbe;
}
::-webkit-scrollbar-thumb:active {
   background:#ffadbe;
}
::-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;
}

/* Bold Color */
b {
   color: #dc677e;
}

/* Headings */
h1 {
   color: #f9859c;
   letter-spacing: 2px;
   font-size: 1.5em;
}

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

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

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

/* To make your layout mobile responsive: 
   Put a div with an id of "layout" around entire content of index.html 
   Position of #layout must be relative. 
   Width & height of divs need to be specified in pixels. 
   
   Use absolute positioning for the other elements. 
   Use percentages (not pixels) for top & left. 
   
   Elements should stay in positon relative to the 
   layout div as the window resizes. */

#layout {
   position: relative;
   display: block;
   margin-top: 6%;
   width: 703px;
   height: 502px;
}

/* Adds a white shadow around the layout image */
#layoutbg  {
   box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.9), 0 2px 2px 0 rgba(255, 255, 255, 0.9);
}

/* For the main content box */
#main {
   position: absolute; 
   top: 18%; 
   left: 41.5%;
   width: 344px;
   height: 344px;
}

/* For the navigation box */
#nav {
   position: absolute; 
   top: 40%;
   left: 7%;
   width: 125px;
   height: 115px;
}

/* For the update box */
#info {
   position: absolute;
   top: 71.5%;
   left: 7%;
   width: 125px;
   height: 75px;
}

/* For the copyright info box */
#footer {
   position: absolute;
   top: 92%;
   left: 11%;
   font-size: 11px;
}