/* 
        screen: #C0B994
        offline: #989477
        offline darker: #74715B
*/

body {
        font-family: monospace;
        background: url('bg.png');
        text-align:center;
        font-size: 11px;
        color: #74715B
}
#game {
        margin: auto;
        margin-top: 49px;
        margin-bottom: 49px;
        background: url('background.png') top left no-repeat;
        width: 400px;
        height: 563px;
}
a { text-decoration: none; color: #989477; border-bottom: 1px solid #989477;}
a:hover { background-color: #74715B; }

/* my text mode friends */
#oldbrowserfriends { display: none; }

/* buttons */

#button1, #button2, #button3, #button4 {
        width: 35px; height: 35px;
}
#crosshairt, #crosshairr, #crosshairb, #crosshairl {
        width: 30px; height: 30px;
}
#minibutton1, #minibutton2 {
        width: 30px; height: 15px;
}
#screen {
        width: 230px;
        height: 325px;
        text-align: left;
}

/* positions */
#button1 { position: relative; top: 65px; left: 243px; }
#button2 { position: relative; top: 15px; left: 296px; }
#button3 { position: relative; top: 46px; left: 258px; }
#button4 { position: relative; top: -4px; left: 311px; }
#crosshairt { position: relative; top: -86px; left: 99px; }
#crosshairr { position: relative; top: -73px; left: 120px; }
#crosshairb { position: relative; top: -82px; left: 78px; }
#crosshairl { position: relative; top: -153px; left: 57px; }
#minibutton1 { position: relative; top: -87px; left: 160px; }
#minibutton2 { position: relative; top: -102px; left: 205px; }
#screen { position: relative; top: 20px; left: 80px; }

/* punch */
#button1 a, #button2 a, #button3 a, #button4 a, #crosshairt a,
#crosshairr a, #crosshairb a, #crosshairl a, #minibutton1 a,
#minibutton2 a {
        display: block; width: 100%; height: 100%;
        border: none; 
}
#button1 a:hover, #button2 a:hover, #button3 a:hover, #button4 a:hover, #crosshairt a:hover,
#crosshairr a:hover, #crosshairb a:hover, #crosshairl a:hover, #minibutton1 a:hover,
#minibutton2 a:hover { background-color: transparent; cursor: pointer; }

/* menu and content */
#screen #menu {
        width: 100%; 
        height: 5%;
        position: absolute;
        bottom: 0%;
        text-align: center;
        color: #989477;
}
#screen #menu ul {
        list-style: none; 
        margin: 3px 0px 0px 0px; padding: 0;
}
#screen #menu ul li {
        display: inline;
        border-bottom: 1px solid #989477;
}
#screen #content {
        width: 100%; height: 95%;
        overflow: hidden;
}

/* badges */
.badge {
        position: absolute;
        width: 50%;
        left: 25%; top: 25%;
        padding: 35% 0% 5% 0%;
        border: 1px solid #74715B;
        border-bottom: 3px solid #74715B;
        border-right: 3px solid #74715B;
        background-color: #C0B994;
        font-size: 15px;
        text-align: center;
}
#screen #homebadge {
        background: #C0B994 url('home.gif') no-repeat;
        background-position: 50% 10%;
}
#screen #textbadge {
        background: #C0B994 url('text.gif') no-repeat;
        background-position: 50% 10%;
}
#screen #aboutbadge {
        background: #C0B994 url('about.gif') no-repeat;
        background-position: 50% 10%;
}
#screen #studiobadge {
        background: #C0B994 url('studio.gif') no-repeat;
        background-position: 50% 10%;
}
#screen #filesbadge {
        background: #C0B994 url('files.gif') no-repeat;
        background-position: 50% 10%;
}
#screen #contactbadge {
        background: #C0B994 url('contact.gif') no-repeat;
        background-position: 50% 10%;
}
/* text */
#contenttext {
        margin: 10px 10px;
}
#contenttext ul {
        list-style: none; 
        margin: 0%; padding: 0%;
}
#contenttext ul li {
        margin-top: 3%;
        padding: 1% 0% 3% 10%;
}
#contenttext ul li#inkscape {
        background: url('inkscape.png') top left no-repeat;
}
#contenttext ul li#gimp {
        background: url('gimp.png') top left no-repeat;
}
#contenttext ul li#cyberduck {
        background: url('cyberduck.png') top left no-repeat;
}
#contenttext ul li#smultron {
        background: url('smultron.png') top left no-repeat;
}
#contenttext ul li#eclipse {
        background: url('eclipse.png') top left no-repeat;
}
#contenttext ul li#e-mail {
        background: url('email.png') top left no-repeat;
        padding-left: 20%;
}
#contenttext ul li#skype {
        background: url('skype.png') top left no-repeat;
}
#contenttext ul li#gizmo {
        background: url('gizmo.png') top left no-repeat;
}
p#kirby {
        margin-top: 30%; height: 160px; width: 100%;
        background: url('kirby.gif') top center no-repeat;
}
.folder p {
        padding: 3px 0px 3px 20px;
        background: url('folder.gif') center left no-repeat;
}
.folder ul.files li {
        background: url('file.gif') center left no-repeat;
        margin-left: 20px;
}