html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }


@font-face {
	font-family: Farouks;
	src: url("Farouks.ttf");
}

*:focus { outline: 0; }

::selection	{ background: #ff7100; color: white; /* Safari */ }
::-moz-selection	{ background: #ff7100; color: white; /* Safari */ }

body { line-height: 1em; color: black; background: #fff; }

ol, ul { list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: "" ""; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

img a { border: none; }


body { font-family: Helvetica, arial, sans-serif; font-size: 50px; font-weight: bold; color: #999999; padding-top: 50px; background: black; text-shadow: 1px 1px 1px black; }
h2 {
	margin-bottom: 20px;
}
p {font-size:40px;line-height:42px;}

.type {display:none;}

.clear { clear: both; float: none; }

.wrapper { width: 950px; margin: 0 auto; overflow: hidden; display: inline-block; width: 800px; margin-left: auto; margin-right: auto; position: relative; }
.wrapper { display: block; }

a { color: #555555; text-decoration: none; }
a:hover { color: black; }
a:hover	{ background: #ff7100; color: white;  }


#main { z-index: 99; -moz-border-radius-bottomleft: 50px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomright: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -webkit-border-top-left-radius: 50px; -moz-border-radius-topright: 50px; -webkit-border-top-right-radius: 50px; -moz-transform: rotate(2deg); -moz-transform-origin: left top; -webkit-transform: rotate(2deg); -webkit-transform-origin: left top; transform: rotate(2deg); transform-origin: left top; width: 800px; margin-left: auto; margin-right: auto; position: relative; height: 500px; -moz-box-shadow: 1px 1px 50px #000; -webkit-box-shadow: 1px 1px 50px #000;  border: 50px solid RGBA(255, 255, 255, 0.3); }

#main #inner { text-align: right; padding: 20px;background:#ccc; background: #ccc -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#bbbbbb)); height: 460px; -moz-box-shadow: 1px 1px 50px #000; -webkit-box-shadow: 1px 1px 50px #000; }

#logo { width: 285px; position: absolute; top: -80px; -moz-transform: rotate(-10deg); -moz-transform-origin: left top; -webkit-transform: rotate(-10deg); -webkit-transform-origin: left top; transform: rotate(-10deg); transform-origin: left top; left: -110px; }
#logo .pixel { width: 20px; height: 20px; float: left; border: none; margin: 0; }
#logo .pixel.black { background: black; }
#logo .pixel.pink { background: #f9efcc; }
#logo .pixel.rose { background: #f8b797; }
#logo .pixel.white { background: white; }
#logo .pixel.dblue { background: #060737; }
#logo .pixel.mblue { background: #0c0d5f; }
#logo .pixel.llblue { background: #4942a1; }
#logo .pixel.lblue { background: #2f2a7c; }
#logo .pixel.grey { background: #cccccc; }

#sprites { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; }

.sprite { z-index: 1; position: fixed; width: 201px; opacity: 0.5; margin-bottom: 10px; float: none; clear: both; }
.sprite .pixel { width: 40px; height: 40px; float: left; border: none; margin: 0; }
.sprite .pixel.colour { background: red; }
.sprite.ghost { top: 5px; left: 5px; -moz-transform: rotate(5deg); -moz-transform-origin: left top; -webkit-transform: rotate(5deg); -webkit-transform-origin: left top; transform: rotate(5deg); transform-origin: left top; }
.sprite.ghost .colour { background: teal; }
.sprite.pacman { top: 200px; left: 350px; -moz-transform: rotate(15deg); -moz-transform-origin: left top; -webkit-transform: rotate(15deg); -webkit-transform-origin: left top; transform: rotate(15deg); transform-origin: left top; }
.sprite.pacman .colour { background: yellow; }
.sprite.invader1 { top: 350px; left: 800px; -moz-transform: rotate(20deg); -moz-transform-origin: left top; -webkit-transform: rotate(20deg); -webkit-transform-origin: left top; transform: rotate(20deg); transform-origin: left top; }
.sprite.invader1 .colour { background: purple; }
.sprite.invader2 { top: 70px; left: 900px; -moz-transform: rotate(25deg); -moz-transform-origin: left top; -webkit-transform: rotate(25deg); -webkit-transform-origin: left top; transform: rotate(25deg); transform-origin: left top; }
.sprite.invader2 .colour { background: blue; }
.sprite.invader3 { top: 400px; left: 25px; -moz-transform: rotate(-5deg); -moz-transform-origin: left top; -webkit-transform: rotate(-5deg); -webkit-transform-origin: left top; transform: rotate(-5deg); transform-origin: left top; }
.sprite.invader3 .colour { background: red; }
.sprite.invader4 { top: 5px; left: 500px; -moz-transform: rotate(-10deg); -moz-transform-origin: left top; -webkit-transform: rotate(-10deg); -webkit-transform-origin: left top; transform: rotate(-10deg); transform-origin: left top; }
.sprite.invader4 .colour { background: green; }
.sprite.invader5 { top: 555px; left: 320px; -moz-transform: rotate(-15deg); -moz-transform-origin: left top; -webkit-transform: rotate(-15deg); -webkit-transform-origin: left top; transform: rotate(-15deg); transform-origin: left top; }
.sprite.invader5 .colour { background: navy; }

.profile { padding-top: 5px; width: 25px; display: block; }
.profile .pixel { display: block; height: 4px; width: 4px; float: left; }
.profile .pixel.colour { background: red; }

.disclaimer {
position:absolute;bottom:10px;right:10px;font-size:10px;text-shadow:none
}

.disclaimer:hover {
 color: #ff7100;
}