@charset "UTF-8";
/* ------------- */
/* --- RESET --- */
/* ------------- */

*{ margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit;
   font-style: inherit; font-size: 100%; font-family: inherit; text-decoration: none;
}
:focus, :active { outline: 0 }
ol, ul { list-style: none }

@font-face{
	font-family: 'PressStart2P';
    src: url('pressstart2p-webfont.eot');
    src: url('pressstart2p-webfont.eot?#iefix') format('embedded-opentype'),
         url('pressstart2p-webfont.woff') format('woff'),
         url('pressstart2p-webfont.ttf') format('truetype'),
         url('pressstart2p-webfont.svg#press_start_2pregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* --------------- */
/* --- GENERAL --- */
/* --------------- */
html { background-color: #1b222f; height: 100%; position: relative; }
body {
     width: 800px; min-height: 100%;
	margin: 0 auto;
	color: white; background-color: transparent;
	font: 10pt arial, sans-serif;
	text-align: left;
}
header, nav, aside, footer, section { display: block }

#content{ display: table; }
#content-wide{ width: 799px; }

/* Shadows and Glows */
div section, #intro, #quote, #linkbox{
     -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
     -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
     box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
}
.spoot, .title, .game, .avatar, .avatartap{
	background-color: #333;
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,0.05));
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,0.05));
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(0,0,0,0.05)));
}
.shadow{
     -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
     -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
     box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
     margin: 30px 0 15px;
}

img.graph{ border-radius: 6px; }


section ul { list-style: disc; margin: 20px 0 10px 20px; }
h1 { font: 18px/24px Arial, Helvetica, sans-serif; padding: 0 ; margin: 0 0 8px; }
b { font-weight: bold; }  s { text-decoration: line-through; }  u { text-decoration: underline; } i { font-style: italic; }
a { color: #b9d3ff; }
     a.user{ font-weight: bold; } a.user:hover{ text-decoration: underline; }
p { margin-bottom: 18px }
hr{ border: 0px none; color: black; background-color: black; height: 1px; width: 99%; margin: 5px 0; padding: 0; }

section{
    background: #384968;
    color: white;
    margin: 0 0 15px 0;
	padding: 10px 15px 10px;
	border-radius: 10px;
    box-shadow: 0 0 1px #000;
}

object{
	margin: 0 0 15px 0;
}

.smaller{ font-size: 11px; }
.up{ vertical-align: top; }
.drop{ position: relative; top: 2px; }

.suboption{
	border-radius: 10px;
	font-weight: bold;
	text-decoration: none;
	background: rgba(0,0,0,0.4);
	box-shadow: 0 0 4px rgba(255,255,255,0.7);
	padding: 2px 17px;
	margin: 15px 5px 5px;
	display: inline-block;
	text-align: center;
	color: white;
}
	.suboption:hover{
		box-shadow: 0 0 8px #fff;
		background: rgba(0,0,0,.7);
		cursor: pointer;
	}

#fortune{
	color: black;
	left: 290px;
	position: absolute;
	top: 88px;
}
	#fortune{
		height: 53px;
		text-align: center;
		vertical-align: middle;
		width: 180px;
	}

.h-links{
	display: table;
	width: 500px;
	margin: 0 auto 10px;
	position: relative;
	z-index: 10;
}
	.h-links a{
		display: table-cell;
		margin: 0 3px;
		text-align: center;
		font-weight: bold;
	}

form {}
     input, textarea, select, option{
     	padding: 3px;  margin:  3px 3px 12px 0;
     	border: solid 1px #E5E5E5;
        border-radius: 5px;
     	font: normal 12px Verdana, Tahoma, sans-serif;
     	background: #FFFFFF;
     	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
     	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 20px);
     	background: -o-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 20px);
     	box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px;
     }
     option{
     	padding: 0 5px;  margin: 0;
     	font: normal 13px/100% Verdana, Tahoma, sans-serif;
     	background: #FFFFFF;
     }
     textarea{ width: 650px; margin-bottom: 3px; }
     fieldset { width: 97%; border: 2px solid rgba(255,255,255,0.4); margin-bottom: 15px; padding: 10px 7px 12px; border-radius: 10px;}
     legend{
          background: #253041;
          background-image: -moz-linear-gradient(top, #334259, #1d2633);
		background-image: -o-linear-gradient(top, #334259, #1d2633);
          background-image: -webkit-gradient(linear, left top, left bottom, from(#334259), to(#1d2633));
          font-size: 1.1em; color: #fff;
     	border: 1px solid #000; margin-left: 10px;
     	padding: 3px 6px; font-weight: bold;
     	border-radius: 5px;
     }
     [disabled]{ opacity: 0.7; }
     input[type="submit"], input[type="reset"], input[type="button"]{
     	width: auto;
     	padding: 4px 5px;
     	background: #bbb;
     	font-weight: bold;
     	border: 1px solid #666;
     	color: #000;
     	border-radius: 5px;
     	background-image: -moz-linear-gradient(top, #ddd, #aaa);
     	background-image: -o-linear-gradient(top, #ddd, #aaa);
     	background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
     }
     input[type="radio"]{
     	margin: 0;
     }
     input[type="submit"].green{
     	background-color: #8AFF99;
     	background-image: -moz-linear-gradient(top, #8AFF99, #6ECC7A);
     	background-image: -o-linear-gradient(top, #8AFF99, #6ECC7A);
     	background-image: -webkit-gradient(linear, left top, left bottom, from(#8AFF99), to(#6ECC7A));
     }
     input[type="submit"].greengray{
     	background-color: #D6FFDB;
     	background-image: -moz-linear-gradient(top, #D6FFDB, #C1E6C5);
     	background-image: -o-linear-gradient(top, #D6FFDB, #C1E6C5);
     	background-image: -webkit-gradient(linear, left top, left bottom, from(#D6FFDB), to(#C1E6C5));
     }
     input[type="submit"].red{
     	background-color: #E66E65;
     	background-image: -moz-linear-gradient(top, #E66E65, #D96860);
     	background-image: -o-linear-gradient(top, #E66E65, #D96860);
     	background-image: -webkit-gradient(linear, left top, left bottom, from(#E66E65), to(#D96860));
     }
     input[type="submit"].redgray{
     	background-color: #FFBCB5;
     	background-image: -moz-linear-gradient(top, #FFBCB5, #F2B2AC);
     	background-image: -o-linear-gradient(top, #FFBCB5, #F2B2AC);
     	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFBCB5), to(#F2B2AC));
     }
     label{ cursor: pointer; }
	#togglemode{
		float: right;
		margin: 0 10px 0 0;
		text-align: right;
		width: 200px;
	}
		#viewmode{
			font-size: 0.8em;
		}
		#togglemode input[type="button"]{
			position: relative; top: -3px;
		}


th{
    text-align: center;
    font-weight: bold;
    padding: 5px;
}


/* -------------- */
/* --- NAVBAR --- */
/* -------------- */
nav#menu {
    height: 40px;
    width: 800px;
    margin-bottom: 15px;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    background-image: -moz-linear-gradient(top, #555, #333);
    background-image: -o-linear-gradient(top, #555, #333);
    //background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
    box-shadow: 0 2px 0 #000;
}
    #menu ul{
        text-align: center;
        height: 40px;
        margin: 0 0 0 15px;
        display: table;
    }
        #menu ul li{
            position: relative;
            list-style: none;
            float: left;
        }
            #menu ul li:hover ul{
                visibility:visible;
                z-index: 2000;
            }
            #menu li a{
                font-size: 12px;
                display: block;
                line-height: 40px;
                padding: 0 25px;
                color: #fff;
                font-weight: bold;
            }
               #menu li:hover, #menu ul li a:hover, a#logout:hover{
               	border: none;
               	background: #222;
               }
               #menu ul li ul{
                    margin: 0;
                    width: 140px;
               	    background: #222;
                    position: absolute;
                    top: 40px;
                    visibility: hidden;
               	    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
               }
                    #menu ul li ul li{ width: 100%; }
                    #menu ul li ul li a{ line-height: 40px; height: 40px; }
                    #menu ul li ul li a:hover{ background: #000; }
                    #menu ul li ul li:last-child a:hover, #menu ul li ul li:last-child:hover{
                    	border-radius: 0 0 10px 10px;
                    }

#logout{
     display: block;
     float: right;
     color: white;
     height: 40px;
     text-align: center;
     line-height: 40px;
     font-weight: bold;
     margin: 0 30px 0 0;
     padding: 0 15px;
}

li#login:hover{
	background-color: transparent;
}


nav#submenu{
    display: block;
    background-color: #222;
    margin: 0 0 15px;
}
    nav#submenu a{
        display: inline-block;
        color: white;
        height: 40px;
        min-width: 80px;
        text-align: center;
        line-height: 40px;
        padding: 0 15px;
    }


/* --------------- */
/* --- NOTICES --- */
/* --------------- */
.alert{
    font-family: 'PressStart2P';
	text-align: center;
    padding: 30px 15px;
    margin: 10px auto;
    border: 3px solid white;
    width: 700px;
    background: #000;
    color: #FFF;
    border-radius: 15px;
    box-shadow: 0 0 1px #000;
}

.update-g, .update-y, .update-r{
     border-radius: 10px;
     text-align: left;
     margin: 7px 10px;  max-width: 90%;  width: 90%;
     padding: 10px 10px 10px 40px;
     background-image: url('images/update.png');
     background-repeat: no-repeat;
     background-position: 15px 10px;
     box-shadow: 0 0 2px black;
}
     .update-g a, .update-y a, .update-r a{
          color: blue;
     }
     .update-g{
          background-color: #8AFF99; color: black;
          font-size: 16px;
     }
     .update-y{
          background-color: #FFF896; color: black;
     }
     .update-r{
          background-color: #FFA1A1; color: black;
          font-size: 16px;
     }

.PM{
     position: fixed; top: 75px; left: 0px;
     z-index: 10;
}

.live{
     position: fixed; left: 0px; top: 160px;
}

#bflag{
     position: fixed; top: 75px; right: 0px;
     z-index: 10;
     border-radius: 10px 0 0 10px;
     font-size: 0.8em;
     background-color: #fff6ce;
     color: black;
     border: 1px solid black;
     width: 150px;
     padding: 5px 2px 5px 5px;
}
     #bflag a{ color: blue; } #bflag a:hover{ color: red; text-decoration: underline; }
     #bflag table{ margin: 3px auto; width: 128px; text-align: center; }
     #bflag span{ cursor: pointer; color: #550000; }
     #bflag span:hover{ color: #cc0000; text-decoration: underline;}

.help{
     font-weight: bold;
     background: #888; color: white;
     padding: 0px 3px;
     font-size: 10px;
     position: relative;
     top: -3px;
     border-radius: 3px;

     -moz-box-shadow: 0 0 1px #000; -webkit-box-shadow: 0 0 1px #000;
     box-shadow: 0 0 1px #000;
}

span.info{
     position:relative;
     z-index:1;
     text-decoration:none;
}
     span.info:hover{z-index:250;}
     span.info span{display: none;}
     span.info:hover span{
          display: block;
          padding: 7px;
          position:absolute;
          bottom: 16px; left: 0px;
          text-align: left;
          font-weight: bold; font-size: 12px;
          border: 3px solid #FFF;
          background-color: black;
          color: white;
          white-space: nowrap;
          border-radius: 10px;
          box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
     }

     span.info span table{ font-weight: normal; }
     span.info span table tr td:first-child { text-align: center; }

     span.info:hover span hr{ background: white; opacity: 0.4; }
     span.info:hover span.limit{
          min-width: 200px;
          max-width: 250px;
          text-align: center;
          white-space: normal;
     }
     	span.info:hover span a, span.info:hover span.limit a{ color: #b9d3ff; }

     .live span.info:hover span{
          top: -72px; left: 27px; bottom: auto;
     }

     div.comment:first-child span.info:hover span{ top: 16px; bottom: auto; }


/* --------------- */
/* --- LINKBOX --- */
/* --------------- */

#linkbox{
     font-size: 11px; text-align: center;
     margin: -5px auto 9px;
     height:auto; box-shadow: none; background: transparent !important; color:black;
}

 #linkbox div:first-child{ display: table-cell; }
 #linkbox div:nth-last-child(2){
    border: 10px solid transparent;
    border-right-color: #feffde;
    border-top: 0;
    position: relative;
    border-left: 0;
    top: -9px;
 }
 #linkbox div:last-child{     
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    background-color: #feffde;
    padding: 0 20px;
    border-radius: 5px; 
    text-align: center;
    position: relative;
    color: black !important;
}
#linkbox a{ text-decoration: underline; color: black !important; }
#linkbox span.info{ position: absolute; bottom: 5px; right: 5px; top: auto; }
#linkbox span.info:hover span{
    top: 0px; bottom: auto; left: -100px;
}

.highlight{
	border-radius: 12px;
	font-weight: bold;
	text-decoration: none;
	background: rgba(0,0,0,0.05);
	-moz-box-shadow: 0 0 4px rgba(255,255,255,0.7);
	-webkit-box-shadow: 0 0 4px rgba(255,255,255,0.7);
	box-shadow: 0 0 4px rgba(255,255,255,0.7);
	padding: 0 7px;
}

/* -------------- */
/* --- HEADER --- */
/* -------------- */

#intro{
     background: #2c394d;
     background-image: -moz-linear-gradient(top, #334259, #1d2633);
     background-image: -o-linear-gradient(top, #334259, #1d2633);
     background-image: -webkit-gradient(linear, left top, left bottom, from(#334259), to(#1d2633));
     color: #223;
     text-align: center;
	margin: 0 0 15px;
	padding: 20px 0;
     border-radius: 10px;
     position: relative;
}
     #intro h1{ font-weight: bold; }

#genericbanner{
     font-family: 'PressStart2P';
     font-size: 32px;
	 font-variant: small-caps;
     text-align: left; z-index: 1;
     text-shadow: 2px 2px black, 2px -2px black, -2px 2px black, -2px -2px black;
     line-height: 135%;
     color: white;
     height: 100px;
     margin: 0 0 5px 20px;
}
	#genericbanner span{ font-size: 40px; }

#vs{
     position: absolute;
     top: 30px; right: 30px;
     font-family: 'PressStart2P';
     font-size: 24px;
     text-align: left; z-index: 1;
     text-shadow: 2px 2px black, 2px -2px black, -2px 2px black, -2px -2px black;
     color: white;
}
	#vs div{ display: inline-block; position: relative; top: -25px; }

.spoot{
     position: relative;
     background: #253041; /*#b2ad91;*/
     background-image: -moz-linear-gradient(top, #334259, #1d2633);
     background-image: -o-linear-gradient(top, #334259, #1d2633);
     background-image: -webkit-gradient(linear, left top, left bottom, from(#334259), to(#1d2633));
	border-radius: 16px;
	font-size: 18px;
	padding: 5px 5px 5px 50px;
}
     .spoot img{
          position: absolute;
          top: -17px; left: 0px;
          -moz-transform: rotate(-5deg);
          -webkit-transform: rotate(-5deg);
          -o-transform: rotate(-5deg);
     }

.title{
     background: #253041;
     background-image: -moz-linear-gradient(top, #334259, #1d2633);
     background-image: -o-linear-gradient(top, #334259, #1d2633);
     background-image: -webkit-gradient(linear, left top, left bottom, from(#334259), to(#1d2633));
     color: #fff;
	border-radius: 16px;
	text-align: center;
	font-size: 22px;
	padding: 5px;
	position: relative;
}
	.title a{ color: #fff; }


/* ------------------- */
/* --- NOW PLAYING --- */
/* ------------------- */

.nowplaying{ position: relative; }
.npimage{
     position: absolute;
     top: 2px; left: -12px;
}

.npgame{
     display: table;
     width: 775px;
     margin: 0 10px;
     padding: 2px 0;
     border-top: 1px solid black;
     text-align: left;
}
	.npgame div{
	     display: table-cell;
	     vertical-align: middle;
	     text-align: left;
	}

	.npgame div:nth-child(4){
		padding-left: 3px;
	}

	.npgame div:last-child{
	     padding-left: 7px;
	     float:right;
	}

	.npgame:last-child{
	     border-bottom: 1px solid black;
	}

.npinfo{
	display: none;
	width: 765px;
	margin: 0 10px;
	padding: 5px;
	border-top: 1px solid black;
	text-align: left;
	background-color: rgba(0,0,0,0.1);
}

.nparr{
	cursor: pointer;
	-webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
}

ul.np {
     list-style-type: none;
     padding: 0;
     margin: 0;
}
     ul.np li{
          margin: 9px 0 0 0;
          padding: 0 0 0 20px;
          text-indent: -20px;
     }
          ul.np li span{ font-size: 0.9em; }

table.achievebar{
     width: 200px;
     margin-top: 2px;
}
     table.achievebar tr{
          border: 1px solid black;
          height: 8px;
     }


/* --------------- */
/* --- CONTENT --- */
/* --------------- */

#maincolumn{
     display: block;
     width: 475px;
	 position:relative;
}


.statusbars{ margin: 5px auto 13px; }
     .progress-border {
		height: 14px;
		width: 350px;
		border: 1px solid #333;
		margin: 0 3px;
		border-radius: 4px;
		background: rgba(255,255,255,0.5);
     }
     .progress-bar {
          height: 14px; border-radius: 3px;
     }
	.un{
          background-color: #657026;
          background-image: -moz-linear-gradient(top, #b0c141, #657026);
		background-image: -o-linear-gradient(top, #b0c141, #657026);
          background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #b0c141),color-stop(1, #657026));
     }
     .u{
          background-color: #990000;
          background-image: -moz-linear-gradient(top, #C77, #990000);
		background-image: -o-linear-gradient(top, #C77, #990000);
          background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C77),color-stop(1, #990000));
     }

     .b{
          background-color: #BDBDBD;
          background-image: -moz-linear-gradient(top, #EEE, #9B9B9B);
		background-image: -o-linear-gradient(top, #EEE, #9B9B9B);
          background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #EEE),color-stop(1, #9B9B9B));
     }

     .c{
          background-color: #FFCC66;
          background-image: -moz-linear-gradient(top, #FDB, #CCAA44);
		background-image: -o-linear-gradient(top, #FDB, #CCAA44);
          background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FDB),color-stop(1, #CCAA44));
     }

     .ui{
          background-color: #430000;
          background-image: -moz-linear-gradient(bottom, #660000, #330000);
		background-image: -o-linear-gradient(bottom, #660000, #330000);
          background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #660000),color-stop(1, #330000));
     }

     .bi{
          background-color: #414248;
          background-image: -moz-linear-gradient(bottom, #56575e, #37383d);
		background-image: -o-linear-gradient(bottom, #56575e, #37383d);
          background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #56575e),color-stop(1, #37383d));
     }

     .ci{
          background-color: #483b22;
          background-image: -moz-linear-gradient(bottom, #604f2e, #3c321d);
          background-image: -o-linear-gradient(bottom, #604f2e, #3c321d);
          background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #604f2e),color-stop(1, #3c321d));
     }

     .invert{
          background-color: #333; border-color: #000;
          background-image: -moz-linear-gradient(bottom, #444, #222);
		background-image: -o-linear-gradient(bottom, #444, #222);
          background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444),color-stop(1, #222));
     }
     .left-bar{
     	border-radius: 3px 0 0 3px;
     }
     .right-bar{
     	border-radius: 0 3px 3px 0;
     }
     .small{ height: 6px; width: 247px; }


#sysgrid{ border-collapse:collapse; }
#sysgrid tr:nth-child(2n+1) { background: rgba(0,0,0,0.05);}
#sysgrid tr:nth-child(2n) { background: rgba(255,255,255,0.1);}
#sysgrid tr td{ text-align: right; width: 70px; }
#sysgrid tr td:last-child{ width: 90px;  padding-right: 10px; }
#sysgrid tr td:nth-child(n+2) a{ font-weight: normal; }
.rbl{ border-radius: 0 0 20px 0; }

.sysbox{
     color: white;
     padding: 0px;
     display: block;
     border: 1px solid black;
     text-align: center;
     font-weight: bold;
     width: 150px;
     margin: 2px 10px 2px 0;
     background-color: #777;
     background-image: -moz-linear-gradient(top, #999, #666);
     background-image: -o-linear-gradient(top, #999, #666);
     background-image: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666));
     text-shadow: 0 0 3px black;
}
     .sysbox:hover, .activesys{
     	background-color: #999;
          background-image: -moz-linear-gradient(top, #eee, #888);
          background-image: -o-linear-gradient(top, #eee, #888);
          background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
     }
     .sysfirst{ border-radius: 19px 19px 0 0; }
     .syslast{ border-radius: 0 0 0 19px; }
     .syslast2{ border-radius: 0 0 19px 19px; }

.antiboo{ opacity: 0.7; }
	.antiboo:hover{ opacity: 1; } .antiboo:focus{ opacity: 1; }

#blog{
     width: 440px;
     margin-left: 14px;
     margin-top: 0px;
}
     #blog img{
          display: none;
          visibility: none;
     }

.comment{ display: table; margin: 2px 0; border-bottom: 1px solid black; }
.comment-row{ display: table-row; width: 100%; }
.comment-left{ display: table-cell; padding: 5px; }
.comment-right{ display: table-cell; padding: 5px; width: 100%; max-width: 328px; }
.spoiler{ background: black; color: black; }

.avatarsize{
	width: 80px;
	text-align: center;
}
	.avatarsize img{
		max-width: 80px;
		max-height: 80px;
	}
	.avatarmain{
		float: left;
		margin-right: 5px;
		height: 80px;
	}
.avatarmultitap{
	width: 40px;
	text-align: center;
	float: left;
	margin-right: 5px;
}
	.avatarmultitap img{
		max-width: 40px;
		max-height: 40px;
	}

.system{
	border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     margin: 20px 0 0;
}

.gamebox{
	max-width: 574px;
	border-radius: 0;
	margin: 0;
	position: relative;
	z-index: 2;
	padding: 7px 15px;
	border-top: none;
}

.gamebox h2{
     background: #b2ad91;
     background-image: -moz-linear-gradient(top, #e5e1cf, #b2ad91);
     background-image: -o-linear-gradient(top, #e5e1cf, #b2ad91);
     background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e1cf), to(#b2ad91));
	border-radius: 20px;
	font-size: 16px;
	padding: 3px 12px 4px;
}
	.gamebox h2 img{
		vertical-align: middle;
		padding-bottom: 2px;
	}
.gamebox div.gamerow{
     margin: 0 10px; padding: 3px 0;
     border-top: 1px solid rgba(0,0,0,0.25);
}
     .gamebox div.gamerow:first-of-type, .gamebox table:first-child{
          border: none;
     }

.gamebox div .gamebox{
     -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
	border: none;
}

.subheader{
    font-size: 19px;
	padding-top: 15px;
	padding-bottom: 0;
	text-align: center;
	font-weight: bold;
}

.gamecom-arrows{
	text-align: center;
	font-size: 8px;
	cursor: pointer;
	border-radius: 5px;
	width: 96%; margin: 5px auto 0;
	background-image: -moz-linear-gradient(top, rgba(200,200,200,0.2), rgba(50,50,50,0.2));
	background-image: -o-linear-gradient(top, rgba(200,200,200,0.2), rgba(50,50,50,0.2));
	background-image: -webkit-gradient(linear,left top, left bottom,color-stop(0, rgba(200, 200, 200, 0.2)),color-stop(1,rgba(50, 50, 50, 0.2)));
}

.systemend{
     border-radius: 0 0 20px 20px;
     height: 10px;
     border-top: none;
     top: -1px;
}

.boxtop{
     border-radius: 20px 20px 0 0;
     height: 10px;
     border-top: none;
     top: 8px
}

.filterbox{
	width: 154px;
	text-align: center;
}
	.filterbox p{
		margin: 0 0 12px;
	}
	.filterbox form{ text-align: right; }
	.filterbox select{ width: 125px; display: inline-block; }


#statustabs{
     position: absolute;
     top: -25px;
     right: 30px;
}
     #statustabs li{
          display: inline;
          background: #2c394d;
          padding: 3px 10px 2px;
          cursor: pointer;
          -moz-box-shadow: 0 0 1px black;
          -webkit-box-shadow: 0 0 1px black;
          box-shadow: 0 0 1px black;
          border-radius: 5px 5px 0 0;
     }
     #statustabs .activetab{
          background-image: -moz-linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.1));
          background-image: -o-linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.1));
          background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.15)), to(rgba(255,255,255,0.1)));
          font-weight: bold;
          box-shadow: none;
          position: relative;  top: -2px;
          z-index: 100;
     }
          #statustabs li:hover{
               position: relative;
               top: -2px;
          }

.option-item{
	display: inline-block; vertical-align:top; text-align: center; width: 150px; margin: 0 25px 20px;
}

/* --------------- */
/* --- SIDEBAR --- */
/* --------------- */

aside{
     display: table-cell;
     vertical-align: top;
}
     aside section{
          margin-left: 15px;
          width: 279px;
     }
     aside section p{ margin: 5px 0; }

     aside section span.info:hover span{
          left: auto;
          right: 0;
     }

.avatar{
     border-radius: 20px;
	font-size: 18px;
}
     .avatar img:first-child{
          position: relative;
          top: -6px; left: -2px;
          margin: 0 5px 0 0;
     }


.lessmore{
     position: relative;
     left: 2px;
     font-weight: bold;
     display: inline-block;
     cursor: pointer;
}

#note{
      font-size: 9pt; overflow: hidden; max-height: 165px;
}

.friend{ margin: 10px 0 -20px; }
.friend a:first-child{ font-size: 15px; }

.stat { float: left; margin-right: 3px; }

.filtered{
     position: relative; top: 3px;
	background-color: rgba(255, 255, 255, 0.2);
     -moz-box-shadow: inset 1px 1px 3px black; -webkit-box-shadow: inset 1px 1px 3px black; box-shadow: inset 1px 1px 3px black;
}

.joiner{
	cursor: pointer; font-size: 40px;
	font-weight: bold; position: absolute;
	z-index: 50; top: 18px; left: 8px;
	line-height: 5px; height: 10px;
}

/* -------------- */
/* --- FOOTER --- */
/* -------------- */
#quote{
    background: #253041;
    background-image: -moz-linear-gradient(top, #334259, #1d2633);
    background-image: -o-linear-gradient(top, #334259, #1d2633);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#334259), to(#1d2633));
    color: #fff;
	text-align: center;
	padding: 5px;
    font-weight: bold;
	margin: 0 0 15px;
	border-radius: 10px;
}

footer{
     position: relative;
	font-size: 0.9em;
     height: 25px;
     width: 98%;
     display: table;
     color: white;
	margin: 7px auto 0;
	padding: 10px;
	border: 1px solid #292929;
	border-radius: 16px 16px 0 0;
	background-color: #333;
	background-image: -moz-linear-gradient(top, #555, #333);
	background-image: -o-linear-gradient(top, #555, #333);
     background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
	box-shadow: 0 2px 0 #000;
}
	footer img{ position: relative; top: -22px; left: 10px; }
	footer a{ color: #FFF; }
	footer a:hover{ text-decoration: underline; }
     footer div{
          display: table-cell;
          padding: 0 20px;
          text-align: center;
          vertical-align: middle;
     }


/* -------------- */
/* --- Manual --- */
/* -------------- */

#slideshow {
     position: relative;
     margin: 0 auto;
     width: 445px;
     height: 321px;
     background: white url(images/manual0.png);
	background-repeat: no-repeat;
}
     #slides li {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          list-style-type: none;
     }
          #slides li img {
               opacity: 0;
               filter:alpha(opacity=0);
          }
          #slides li:target {
               z-index: 5;
          }
          #slides li:target img {
               opacity: 1;
               filter:alpha(opacity=100);
          }

#slidelegend{
	position: absolute;
	text-align: center;
	top: 3px;
	width: 445px;
	display: none;
}

#manualnav {
     position: absolute;
     bottom: -32px; left: -13px;
     z-index: 10;
}
     #manualnav li {
          display: inline;
          font-size: 0.8em;
     }
     #manualnav a, #manualnav span {
          padding: 3px 10px;
          margin: 0 0 0 3px;
          border-radius: 12px;
          font-weight: bold;
          text-decoration: none;
          color: #fff;
          background: rgb(0,0,0);
          background: rgba(0,0,0,0.4);
     }
          #manualnav a:hover, #manualnav a:focus, #manualnav span:hover, #manualnav span:focus {
               -moz-box-shadow: 0 0 8px #fff;
               -webkit-box-shadow: 0 0 8px #fff;
               box-shadow: 0 0 8px #fff;
               background: rgba(0,0,0,0.7);
               cursor: pointer;
          }


/* -------------- */
/* --- JQuery --- */
/* -------------- */

.moor-box{
	color: black;
}

.ui-state-default{
     border: 1px solid black;
     padding: 5px;
     width: 120px;
     background: #333;
     color: #FFF;
}

/* -------------- */
/* ---  Misc  --- */
/* -------------- */

#comlist{
     margin: 0 20px 0;
     overflow: auto;
     height: 430px;
}

#comlist li{
     list-style: none;
     font-size: 13px;
     padding: 10px;
     clear: both;
}
#comlist li:nth-child(2n-1) { background: rgba(0,0,0,0.15); }

     #comlist li a:first-child{
          font-weight: bold;
     }

     #comlist li a:last-child{
          letter-spacing: 2px;
     }

     #comlist li img{
          float: left;
          width: 40px;
          margin: -3px 10px 0 0;
     }