* {box-sizing: border-box;}

html,h1,h2,h3,h4,ul,li{margin:0;padding:0;}
body{ font-size-adjust:none; color:#fff;background:#000;font:16px arial, sans-serif;margin:0;padding:0; background-image: url("images/background.png"); padding-top:50px;padding-bottom:25px;}
img{border:0;}
p{margin:0;}
img { border: 0; }
.pagesnarrow a {text-decoration:none; border: 3px solid #C8C8C8;padding:4px;background:none;color:#C8C8C8;margin:0px;border-radius:3px;cursor:pointer;}
.pagesnarrow a:hover {text-decoration:none;border: 3px solid #F00;color:#F00;}
.pagesnarrow .active {border: 3px solid #F00;color:#F00;}
button {border: 3px solid #C8C8C8;padding:4px;background:none;color:#C8C8C8;margin:0px;border-radius:3px;cursor:pointer;}
button:hover {border: 3px solid #F00;color:#F00;}
input { padding: 4px; font:16px arial, sans-serif;}
textarea { padding: 5px; font:16px arial, sans-serif;}
A:link {text-decoration: none; color: white;}
A:visited {text-decoration: none; color: white;}
A:active {text-decoration: none; color: white;}
A:hover {text-decoration: none; color: red;}
H1 { padding-top:10px;text-align:left;font-size:20px;}
#menubar {position:fixed;z-index:99;top:0;width:100%; overflow: hidden;background:#333;height:50px;}
#achivementbar {text-align:center;position:fixed;z-index:199;top:0;width:100%; overflow: hidden;background:#4F7998;height:50px;max-height:0px;transition: max-height 0.2s ease;}
#keyboardbar {text-align:center;position:fixed;z-index:99;bottom:0;width:100%; overflow: none;background:#333;height:auto;max-height:0px;transition: max-height 0.2s ease;}
#menubuttonopen { display:block;  }
#menubuttonclose { display:none;  }
#usermenubuttonopen { display:block;  }
#usermenubuttonclose { display:none;  }
#menu { z-index:100;position:fixed; top:50px;left:0px;width:100%;max-width:512px;max-height:0px;overflow:hidden;transition: max-height 0.2s ease; }
#menu ul { overflow:hidden;background:#222;}
#menu ul li { text-align:center;text-transform:uppercase;cursor:pointer;color:#fff; width:100%;padding:2px;}
#menu ul li a { border:1px solid #555;border-radius:0px;height:60px;display:block;width:100%;background:#222;}
#menu ul li a:hover{ color: #fff;background:#aaa;}
#usermenu { z-index:100;position:fixed; top:50px;right:0px;width:100%;max-width:512px;max-height:0px;overflow:hidden;transition: max-height 0.2s ease; }
#usermenu ul { overflow:hidden;background:#222;}
#usermenu ul li { text-align:center;text-transform:uppercase;cursor:pointer;color:#fff; width:100%;padding:2px;}
#usermenu ul li a { border:1px solid #555;border-radius:0px;height:40px;padding:10px;display:block;width:100%;background:#222;}
#usermenu ul li a:hover{ text-decoration: none;color:#fff;background:#aaa;}
.content { padding:15px; padding-top:10px;text-align:center;}
.content p { padding-top:10px;text-align:left; }
.filebox {border: 3px solid #C8C8C8;padding:4px;background:none;color:#C8C8C8;margin:0px;border-radius:3px;cursor:pointer;max-width:100%;}
.filebox:hover {border: 3px solid #F00;color:#F00;}
.ranktext {color:#aaa;}
.descriptiontext {font-style: italic;padding-top:5px;}
.levels {clear:both;padding-top:5px;}
.achivementimage {height:32px;margin-top:9px;}
.screen640 {width:100%;max-width:640px;height:auto;border:2px solid #d3d3d3;background:#000;border-radius:10px;}
.screen512 {width:100%;max-width:512px;height:auto;border:2px solid #d3d3d3;background:#000;border-radius:10px;}
.thearea { width:100%;max-width:640px;height:auto;border:2px solid #d3d3d3;background:#000;border-radius:10px;display:inline-block;}
.keyboard {width:100%;max-width:312px;height:auto;}
.advert { padding-top:10px;padding-bottom:10px;}
.menubutton { cursor:pointer; width:32px;height:32px;position:absolute; top:8px; left:5px;}
.closebutton { cursor:pointer; width:32px;height:32px;position:absolute; top:8px; right:5px;}
.signinbutton { cursor:pointer; width:auto;height:32px;position:absolute; top:8px; right:5px;}
.username { width:auto;height:32px;position:absolute; top:16px; right:45px;}
.userimagebutton { cursor:pointer; width:32px;height:32px;position:absolute; top:8px; right:5px;border-radius:25%;}
.userimage { float:left;vertical-align:middle;margin-right:10px;width:100px;height:100px;}
.userimagethumb { vertical-align:middle;margin-right:10px;width:40px;height:40px;}
.titlelogo { height:32px;position:absolute; top:9px; left:40px;}
.menutext { font-size:20px;text-transform:uppercase;font-weight:bold;white-space: nowrap; overflow:hidden;float:left; color:#fff; padding-top:16px;padding-left:10px;height:50px;}
.thebox { padding-top:15px;padding-bottom:15px;border-bottom:1px solid #fff;}
.thebottombox { padding:20px;}
.levelbuttongreen { cursor:pointer;margin:1px;font-size: 16px;line-height: 30px;text-align: center;float:left;border: 2px solid #74D97C;border-radius:50%;width:28px;height:28px;overflow:hidden;background: linear-gradient(135deg, #23C32E, #126518); }
.levelbuttonred { cursor:pointer;margin:1px;font-size: 16px;line-height: 30px;text-align: center;float:left;border: 2px solid #EC9494;border-radius:50%;width:28px;height:28px;overflow:hidden;background: linear-gradient(135deg, #CB2929, #6B1414); }
.levelbuttongreen:hover { background:#000;color:#74D97C;border: 2px solid #FFF;} 
.levelbuttonred:hover { background:#000;color:#EC9494;border: 2px solid #FFF;} 
.levelbuttontext { margin-top:-3px;display:block;text-decoration:none; }
.formtext { width:100%;text-align:left;padding:10px 10px 0px 10px;}
.spacer6 { clear:both;padding-top:6px;text-align:center; }
.spacer30 { clear:both;padding-top:30px;text-align:center;}
.spacer10 { clear:both;padding-top:10px;text-align:center; }
.boxtext { clear:both;text-align:left;padding:0px;padding-left:10px;padding-right:10px; }
#cookiebar{ line-height:1.5em;text-align:center;color:#FFF;position:fixed;z-index:99;bottom:0;background:#333;width:100%;padding:5px; }