/* hello, friend. this is moonball typing. */

/* moonball = echo */

/* you may use this source code to gather css knowledge, play around and perhaps learn from my mistakes ;) */
/* if this has helped you (or not) i'd love to know! send me some mail: moonball at echoing dot org */

body, html {
background-image: url('thegiftbg.jpg');
background-repeat: no-repeat;
background-color: #000;
color: #000;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

p {
padding: 5px;
}

h1 {
font: bold 24px Verdana, Arial, Helvetica, sans-serif;
}

h2 {
padding: 10px;
text-align: center;
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
}

h3 {
padding: 10px;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

#topborder {
background-color: #000000;
height: 5px;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}

#toptextimage {
text-align: center;
background-color: transparent;
height: 40px;
left: 450px;
position: absolute;
top: 25px;
width: 400px;
}

#first {
background-color: #000000;
background-image: url('first.gif');
background-repeat: no-repeat;
color: #fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
border: 0px;
height: 400px;
left: 25px;
position: absolute;
top: 100px;
width: 50px;
}

#second {
background-color: #000000;
background-image: url('second.gif');
background-repeat: no-repeat;
color: #fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
height: 400px;
left: 100px;
position: absolute;
top: 100px;
width: 50px;
}

#third {
background-color: #000000;
background-image: url('third.gif');
background-repeat: no-repeat;
color: #fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
height: 400px;
left: 175px;
position: absolute;
top: 100px;
width: 50px;
}

#fourth {
background-color: #000000;
background-image: url('fourth.gif');
background-repeat: no-repeat;
color: #fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
height: 400px;
left: 250px;
position: absolute;
top: 100px;
width: 50px;
}

#main {
overflow: auto;
background-image: url('mainbg.gif');
background-repeat: no-repeat;
background-color: a;
color: #182B39;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
height: 400px;
left: 450px;
position: absolute;
top: 100px;
width: 400px;
}

#fifth {
background-color: #000000;
background-image: url('fifth.gif');
background-repeat: no-repeat;
color: #fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
height: 400px;
left: 900px;
position: absolute;
top: 100px;
width: 50px;
}

#bottomborder {
background-color: #000000;
bottom: 79px;
height: 5px;
left: 0px;
position: absolute;
top: 550px;
width: 100%;
}

#copyright {
text-align: center;
color: #fff;
background-color: transparent;
height: 25px;
left: 450px;
position: absolute;
top: 500px;
width: 400px;
}

a:link, a:visited, a:active {
color: #000000;
text-decoration:none;
border-bottom: 1px dashed #000000;
}

a:hover {
color: #ffffff;
text-decoration:none;
border-bottom: 1px solid #000000;
} 

input,select,textarea {
margin: 5px;
background-color: #000000;
color: #7BB3D6;
font: 11px Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #7BB3D6;
}