body {
	font-family: Arial Unicode MS, Arial, sans-serif;
	font-size: small;
	margin: 5px;
	border: 0px;
	padding: 0px;
	text-align: center;
}

#body {
	margin: auto;
	max-width: 800px;
}

#header {
	text-align: center;
	clear: both;
}

#logo {
	float: left;
}

#login {
	text-align: right;
	float: right;
}

#nav {
	text-align: center;
	clear: both;
	font-size: 115%;
}

#content {
	text-align: center;
	clear: both;
}

#footer {
	text-align: center;
	clear: both;
}

#poweredBy {
	text-align: center;
	margin-top: 30;
	margin-bottom: 10;
	font-size: 75%;
}

#feedback {
	float: right;
}

.error {
	font-weight: bold;
	color: red;
}

.success {
	font-weight: bold;
	color: green;
}

.boxed {
	text-align: center;
	margin: auto;
	border: 2px solid #80A0FF;
}

.blackBox {
	border: 1px solid #808080;
}

.head {
	text-align: center;
	background-color: #E0E8FF;
	color: #202840;
	font-weight: bold;
}

.body {
	text-align: center;
	color: #202840;
	font-weight: bold;
}

.key {
	vertical-align: top;
	text-align: right;
	font-weight: bold;
}

.value {
	width: "100%";
	vertical-align: top;
	text-align: justify;
}

hr {
	color: #202840;
}

a {
	font-weight: bold;
}

a:link {
	text-decoration: none;
	color: #0000FF;
}

a:visited {
	text-decoration: none;
	color: #0000FF;
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: underline;
}

a.logo:hover {
	text-decoration: none;
	color: #405080;
}

a.logo:active {
	text-decoration: none;
	color: #405080;
}

img {
	border: 0;
}

h1 {
	font-size: 150%;
	text-align: center;
	color: teal;
}

h2 {
	text-align: left;
	font-size: 125%;
	color: teal;
}

.centered {
	margin: auto;
	text-align: center;
}

.justify {
	text-align: justify;
}

#platformLoading {
	margin: auto;
	height: 150px;
}

.title {
	font-size: 150%;
	font-weight: bold;
	color: teal;
}

.about {
	margin: auto;
	width: 400px;
	text-align: justify;
}

.notifications {
	background-color: #ffa500;
}

.bitSmaller {
	font-size: 85%;
}

.smaller {
	font-size: 70%;
}

.bitBigger {
	font-size: 115%;
}

.bold {
	font-weight: bold;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.progressBar {
	border: 1px solid #C0C0C0;
	background-color: white;
	text-align: left;
}

.progressBarFilled {
	background-color: blue;
}

/***** Chat Styles *****/
.joinMessage,.renameMessage,.gameCreateMessage,.playAgainMessage,.gameStarted {
	font-size: 80%;
	font-weight: bold;
	margin-left: 10px;
	color: #404040;
	opacity: 0.80;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: "alpha(opacity=80)";
}

/* TODO Fix opacity in IE */
.sayMessage {
	font-size: 100%;
	font-weight: bold;
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

/* TODO Fix opacity in IE */
.quitMessage,.gameIsOver {
	font-size: 80%;
	margin-left: 10px;
	opacity: 0.60;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: "alpha(opacity=60)";
}

/* TODO add more colors */
.color0 {
	color: blue;
}

.color1 {
	color: fuchsia;
}

.color2 {
	color: green;
}

.color3 {
	color: maroon;
}

.color4 {
	color: navy;
}

.color5 {
	color: olive;
}

.color6 {
	color: purple;
}

.color7 {
	color: red;
}

.color8 {
	color: teal;
}

/***** Game Styles *****/
.gameCountDown {
	font-size: 200%;
	font-weight: bold;
	text-align: center;
	margin: auto;
}

.gamePoints {
	text-align: center;
	margin: auto;
}

/***** TicTacToe Styles *****/
.tictactoeNone {
	font-size: 150%;
	font-weight: bold;
	visibility: hidden;
}

.tictactoeX {
	font-size: 150%;
	font-weight: bold;
	color: red;
}

.tictactoeO {
	font-size: 150%;
	font-weight: bold;
	color: green;
}