@import url("https://fonts.googleapis.com/css?family=Special+Elite");

/* general */
body {
    font-family:'Special Elite',sans-serif;
    font-size:14px;
    background-color:#ffffff;
    background-image:url('images/background_tlbr.png');
    background-position:center top;
    background-repeat:repeat;
}

h1 {
    color:#000066;
    padding:0;
    margin:0;
}

em {
    font-style:italic;
}

#page {
    position:relative;
    text-align:center;
    width:800px;
    height:600px;
    margin:auto;
    border:1px solid #000000;
    padding:0;
}

#noscriptpage {
    position:relative;
    text-align:center;
    border:0;
    margin:auto;
    padding:0;
}

::selection {
    background:#000000;
    color:#ffffff;
}

::-moz-selection {
	background:#000000;
	color:#ffffff;
}

/* content */
#content {
    z-index:4;
    position:absolute;
    left:0;
    top:0;
    width:800px;
    min-height:600px;
    margin:0;
    padding:0;
}

#content a {
    text-decoration:none;
    font-style:italic;
    color:#660000;
}

div#backtohome, div#prepage {
    text-align:center;
    font-size:12px;
}

div#backtohome a {
    text-decoration:none;
    font-style:italic;
    color:#660000;
}

/* menu */
.menuitem {
    position:absolute;
    font-size:15px;
    margin:0;
    padding:0;
    text-align:center;
    width:80px;
    height:80px;
    line-height:80px;
    border:1px solid #000000;
    background-color:#ffffff;
    background-image:url('images/background_tlbr.png');
    background-position:center top;
    background-repeat:repeat;
}
.menuitem:hover {
    background-color:#eeeeee;
    background-image:none;
}
#menu_item1 { /* resume */
    left:170px;
    top:150px;
}
#menu_item2 { /* blog */
    left:550px;
    top:200px;
}
#menu_item3 { /* projects */
    left:130px;
    top:400px;
}
#menu_item4 { /* email */
    left:450px;
    top:500px;
}

/* pong */
#pong_table {
    z-index:3;
    position:absolute;
    left:0;
    top:0;
    width:800px;
    height:600px;
    margin:0;
    padding:0;
    background-color:#ffffff;
    background-image:url('images/background_trbl.png');
    background-position:center top;
    background-repeat:repeat;
}
#pong_paddle1, #pong_paddle2 {
    position:absolute;
    width:12px;
    height:80px;
    background-color:#000000;
}
#pong_paddle1 {
    left:4px;
}
#pong_paddle2 {
    right:4px;
}
#pong_ball {
    position:absolute;
    width:11px;
    height:11px;
    margin:0;
    padding:0;
}
#pong_ball img {
    position:absolute;
    left:0;
    top:0;
}
#pong_number1, #pong_number2, #pong_number3, #pong_number4 {
    position:absolute;
    width:40px;
    height:80px;
}
#pong_number1 {
    top:0px;
    left:130px;
}
#pong_number2 {
    top:0px;
    left:180px;
}
#pong_number3 {
    top:0px;
    right:180px;
}
#pong_number4 {
    top:0px;
    right:130px;
}
.numberpiece {
    position:absolute;
    left:0;
    top:0;
}

/* extra buttons */
#extrabuttons {
    text-align:center;
    position:absolute;
    left:0;
    top:605px;
    margin:0;
    padding:0;
    width:800px;
}

/* projects */
div.project {
    margin:0;
    padding:0;
    float:left;
    width:198px;
    height:198px;
    border:1px solid #000000;
    text-align:justify;
    overflow:auto;
    overflow-x:hidden;
}

div.project a img {
    border-style:none;
}

.hidden {
    visibility:hidden;
}

.hiddenoverflow {
    overflow:hidden !important;
}

div.projtitle {
    border-bottom:1px solid #000000;
    padding:0 2px;
}

span.projname {
    font-size:12px;
    font-weight:bold;
    float:left;
}

span.projname a {}

span.projlang {
    font-size:9px;
    float:right;
    text-align:right;
}

*>html .projname {
 /* IE browsers hack */
 width:49%;
}

*>html .projlang {
 /* IE browsers hack */
 width:49%;
}

div.projdesc {
	font-family:sans-serif;
    font-size:13px;
    padding:0 2px;
}