@import "layout.css";

#header {
background:#262F35 url(/images/bg-header.gif) repeat-x scroll left top;
float:left;
width:100%;
}

#topnav {
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:6px -6px 0pt 0pt;
text-align:right;
}

#topnav li {
padding:0pt 16px 1px;
}

#topnav a {
color:#FFFFFF;
font-size:11px;
margin:0pt 0pt 1.7em;
}

#userbox {
background:transparent url(/images/bg-userbox.png) no-repeat scroll left bottom;
float:right;
margin:0pt 0pt 20px;
padding:6px 16px 0pt;
width:205px;
}

#userbox p {
color:#CCCCCC;
font-size:11px;
margin:0pt 0pt 1.7em;
}

#userbox img {
background:#FFFFFF none repeat scroll 0%;
border:1px solid #424A53;
float:left;
margin:6px 12px 0pt 4px;
padding:4px;
}

#userbox strong, #userbox a  {
color:#FFFFFF;
}


#header_tiny {
background:#262F35 url(/images/bg-header-tiny.gif) repeat-x scroll left top; 
float:left;
width:100%;
height:60px;
}

#logo_tiny {
color:#FFFFFF;
float:left;
margin:12px 0pt 0pt;
width:342px;
}

#tiny_title {
	font-size:12px;
	font-style:verdana, arial black;
	font-weight:bold;
	color:rgb(88,126,253);
	padding-left:20px;
}

.wrapper, #main-wrapper {
margin:0pt auto;
text-align:left;
width:830px;
}

#main-wrapper {
width:716px;
/* height:550px; */
}

#main-banner {
  width: 100%;
  clear:right;

}

#logo {
color:#FFFFFF;
float:left;
margin:29px 0pt 0pt;
width:342px;
}

#logo span, #logo a {
/*background:transparent url(/images/logo.png) no-repeat scroll 0%;*/
border:medium none;
display:block;
height:36px;
width:342px;
}

#wrap {	
  float: left;
  margin-left: 0em;
  padding-top: 1ex;
  padding-left: 0em;
/*  background:#F6F9FF url(/images/bg-content.gif) repeat-x scroll left bottom;*/
width:100%;
/*min-height:502px;*/
}

#wrap #content {
float:left;
width:100%; 
padding:0pt 0pt 0px;
}

#wrap .leftcolumn {
float:left;
margin:0pt 20px 20px 0pt;
padding-left: 10px;
padding-right: 10px;
width:230px;
color: #697987;
}

#wrap .midcolumn {
float:left;
margin:0pt 0px 0px 0pt;
padding-left: 10px;
padding-right: 10px;
width:500px;
color: #697987;
}

#wrap .rightcolumn {
float:left;
margin:0pt 20px 20px 10pt;
padding-left: 10px;
padding-right: 10px;
width:280px;
color: #697987;
}

body {
 min-width: 830px;
 color: #697987;
 margin:0px;
 padding:0px;
}

p.left {
	margin:0pt 0pt 0pt 0pt;
	padding-top:2px;
	float: left;
}

p.right {
	float: right;
}

ul#list, ol#list {
font-size:11px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:20px 0pt;
padding-bottom:20px;
}

body, p, ol, ul, td {
  font-family: Verdana, arial, helvetica, sans-serif;
  font-size:   14px;
  line-height: 14px;
}

form {
margin-top:1em;
}

fieldset.last {
border:0pt none;
padding:0pt;
}

input.textfield, textarea {
background:#F9F9F9 none repeat scroll 0%;
border:2px solid #DDDDDD;
color:#777777;
font-family:Verdana,sans-serif;
padding:2px;

}

span.note {
color:#999999;
font-size:11px;
margin-left:20px;
}

table.formtable, table.adminformtable, table.formtablesubmit {
border-collapse:collapse;
}

.formtable th, .formtablesubmit th {
border-bottom:1px solid #DDDDDD;
padding:15px 15px 15px 15px;
text-align:right;
vertical-align:top;
width:170px;
}


.formtable td, .formtable td.alt {
border-bottom:1px solid #DDDDDD;
margin:0pt 0pt 10px;
padding:15px 15px 15px 0pt;
text-align:left;
vertical-align:top;
width:250px;
}

.adminformtable th {
border-bottom:1px solid #DDDDDD;
padding:15px 15px 15px 15px;
text-align:right;
vertical-align:top;
width:170px;
}

.adminformtable td, .adminformtable td.alt {
border-bottom:1px solid #DDDDDD;
margin:0pt 0pt 10px;
padding:15px 15px 15px 0pt;
text-align:left;
vertical-align:top;
width:400px;
}

table.formgrid {
border-collapse:collapse;
}

.formgrid th {
border-bottom:1px solid #DDDDDD;
padding:15px 15px 0pt 0pt;
text-align:center;
vertical-align:top;
width:170px;
}


.formgrid td, .formgrid td.alt {
border-bottom:1px solid #DDDDDD;
margin:0pt 0pt 10px;
padding:15px 15px 15px 0pt;
text-align:left;
vertical-align:top;
width:250px;
}


.formtablesubmit th {
background:#E1F1FF url(/images/bg-listbox.gif) repeat-x scroll 0%;
border-color:#C4E3FF;
border-style:solid;
border-width:4px 0pt 1px;
padding:20px 15px 20px 0pt;
}



.formtablesubmit td {
background:#E1F1FF url(/images/bg-listbox.gif) repeat-x scroll 0%;
border-color:#C4E3FF;
border-style:solid;
border-width:4px 0pt 1px;
padding:20px 15px 20px 0pt;
width: 250px;
}

.formtablesubmit td input.inputsubmit {
margin-right:5px;
padding-bottom:3px;
padding-top:2px;
}

.navigation_disabled {
	font-size:11px;
	color: black;
}

.navigation_current {
	color: black;
}

.pagination a:link, a:visited {
	text-decoration: none;
	color: #697987;
	border: none;
	font-size:11px;
}

.pagination a:hover {
	text-decoration: underline;
	font-size:11px;	
}

#friends-wrapper
{
	margin:0pt auto;
	width: 830px;
}

#friends_banner {
  width: 100%;
  clear:right;

}

#friends_content {
  width: 450px;
  float:left;

}

.friend_finder, .friend_requests, .invite_friends {
border-bottom:1px solid #CCCCCC;
margin:4px 8px 0px;
padding:10px 0px 10px 24px;
font-size: 11px;
clear:both;
}


#navigation {
  width: 250px;
  float:right;
  background:#E1F1FF url(/images/bg-listbox.gif) repeat-x scroll 0%;
}

.navigation_item_header {
  font-size: 12px;
  margin-left: 20px;	
	
}

.small-title {
  font-weight: bold;
  font-size: 12px;
  margin-left: 3px;	
}

input.action {
padding-left:25px;
padding-right:25px;
}

.inputbutton, .inputsubmit {
background-color:#3B5998;
border-color:#D9DFEA rgb(14, 31, 91) rgb(14, 31, 91) rgb(217, 223, 234);
border-style:solid;
border-width:1px;
color:#FFFFFF;
font-family:verdana,arial,sans-serif;
font-size:11px;
padding:2px 15px 3px;
text-align:center;
}

#home #splash {
background:#F6F9FF url(/images/bg-content.gif) repeat-x scroll left bottom;
float:left;
width:100%;
height:370px;
}

#home h1#headline {
height:41px;
margin:80px 0pt 15px;
font-size: 14px;
/*background-color:#FFE640;
*/
width:390px;
/* text-indent:-9000px; */
}

#home #signup {
float:left;
margin-bottom:5px;
padding-bottom:40px;
width:390px;
background-color:#FFE640;
}

#home #screenshot {
background:transparent url(/images/ruby.png) no-repeat scroll right bottom;
float:left;
width:100%;
margin-top: 60px;
}


.column_title {
	font-size:   14px;
	font-weight:bold;
	color: #252F35;
}

a img {
	border: none; 
}

p.imgrollover a , p.imgrollover img { 	
	width:32px; 
	float: right;
	margin:0pt 0pt 0pt 0pt;
	padding-top:2px;
}

.imgrollover a:hover { 
	float: right;
}

a {
  text-decoration: none;
  font: sans-serif;
  border: 1px dotted blue;
  
}

a:link, a:visited {
	text-decoration: none;
	color: #FF4218;
	border: none;
}

a:hover {
	text-decoration: underline;
}

.even{
margin:0pt 0pt 0pt 0pt;
background:#ffffff;
padding-top:3px;
padding-bottom:3px;
}

.odd{
	
margin:0pt 0pt 0pt 0pt;
background:#E8F2FE;
padding-top:3px;
padding-bottom:3px;
}

#banner {
  background: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 2px solid #79b9f3;
}

#banner img {
  float: left;
  border: none;
}

#banner_tiny {
  background: #fff;
  padding-top: 1px;
  padding-bottom: 1px;
  color: gray;
  line-height:40px;
}

#banner_tiny img {
  float: left;
}



#ellapsed_seconds {
	font-size:20px;
	font-style:verdana, arial black;
	font-weight:bold;
	color:gray;
	padding-left:60px;
}


#tiny_comment {
	font-size:9px;
	font-style:verdana, arial black;
	font-weight:bold;
	color:#3a90d3;
	padding-left:20px;
}


#columns {
  background: #601138;
}

#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}

#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
	}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
	}
		
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
/*
#footer {
	width: 100%;
	height: 74px;
	clear: both;
	background: #eeeeee;
	color: #356AA0;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;    
}
*/
#footer {
background:#F2F2F2 url(/images/bg-footer.gif) repeat-x scroll left top;
border-top:4px solid #D9D9D9;
color:#999999;
float:left;
font-size:11px;
padding:0pt 0pt 10px;
text-align:center;
width:100%;
}

#footer p {
font-family:Verdana,arial,helvetica,sans-serif;
font-size:11px;
line-height:11px;
}

/* Mail styles */

#mail-wrapper {
margin:0pt auto;
text-align:left;
width:830px;
}

#mail_banner {
  width: 100%;
  clear:right;

}

#sidebar {
  padding-left: 1em;
  padding-bottom: 1em;
  width:170px;
  height: 420px;
  background:#E1F1FF url(/images/bg-listbox.gif) repeat-x scroll 0%;
  float:left;
}

#arena-sidebar {
  padding-left: 1em;
  padding-bottom: 1em;
  width:170px;
  height: 420px;
  float:left;
}

#mailnav {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:6px -6px 0pt 0pt;
text-align:right;
}

#mailnav li {
padding:0pt 16px 1px;
}

#mailnav a {
color:#000;
font-size:11px;
margin:0pt 0pt 1.7em;
}

table.mailtable {
border-collapse:collapse;
}

.mailtable td {
height:17px;
border-bottom:1px solid #DDDDDD;
padding:15px 15px 0pt 0pt;
text-align:right;
vertical-align:top;
font-size: 12px;
white-space: nowrap;
}



div.pitch {
background-color:#FFF;
margin:17px 25px;
padding:8px 25px;
float:left;
width:380px;
}

div.action {
background-color:#FFE640;
margin:0px 0px;
padding:15px 15px;
clear:left;
width:350px;
}

#avatar-container {
		width:160px;
		margin:0px auto;
		text-align:left;
		padding:15px;

}

/*div.screenshot {
background-color:#FFF;
float:left;
margin:5px 25px;
padding:5px 25px;
}*/

#registration label {
color:#333333;
float:left;
font-weight:bold;
margin:8px 4px 5px 10px;
text-align:right;
width:150px;
}

.clear {
  clear:both;	
}

#grid-container {
	
}

.main-content {
	  float: left;
	  width:460px;
	  padding-left: 1em;	
}

#window_message_content {
padding-left: 1em;		
}

.arena-main-content {
	  float: left;
	  width:460px;
	  padding-left: 50px;	
}

.huge {
	font-size:30px;
	text-align:center;
}

#sudogrid {
	
}

#players {
	width:213px;
	height:440px;
	
}

.player {
	width:210px;
	height:44px;
	padding:2px 2px 2px 2px;
	background-color: #f0f0f0;
	border: 1px solid gray;
	margin-bottom: 2px;
}

.friends_links {
	color: gray;
	text-align: left;
	font-size: 11px;
	line-height: 14px;
	
}

.players_links {
	color: gray;
	text-align: left;
	font-size: 11px;
	line-height: 14px;
	
}


.info {
	font-size:14px;
	font-weight:bold;
	font-style:Verdana, Arial gray;
	color: black;
}

.finisher {
	color: white;	
}

.rightmenu {
	float:left;
	width: 110px;
	border: #000 solid 1px;
}
#side {
  float: left;
  padding-top: 1em;
  padding-left: 1em;
  padding-bottom: 1em;
  width: 6em;
  background: #601138;
}

#side a {
  color: #fff;
  font: sans-serif;
}

#side a:hover {
  color: #f00;
}

#notice {
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 2em;
  background-color: #f0f0f0;
  font: bold sans-serif;
}



/*a:hover { color: #fff; background-color:#000; }

.hover { background-color: #888888; }
*/
.cell_mouseover {
	background-image:url('/images/target.png');
}

.pad_clickable {
	background-image:transparent;
	color: green;
}
.cell {
	font-size:   21px;
	font-weight: bold;
	line-height: 40px;
	width:40px;
	height:40px; 
	border: 1px solid gray; 
	border-collapse:collapse; 
	float:left;	
	text-align: center;
	vertical-align: bottom;
	color: black;
}


.fixed {
	color: blue;	
}




.digit {
	border: 1px solid green;
}

.legend_text {
	font-size:9px;
	font-style: Verdana;
	color: gray;
}

.legend {
	-moz-background-clip: -moz-initial; 
	-moz-background-origin: -moz-initial; 
	-moz-background-inline-policy: -moz-initial;
	border : #000 1px solid;
	height : 17px;
	width: 17px;
}
.color_0 {
	background: white none repeat scroll 0%;
}
.color_1 {
	background: #E0FAFC none repeat scroll 0%;
}
.color_2 {
	background: #C5F8FD none repeat scroll 0%;
}
.color_3 {
	background: #A9F6FD none repeat scroll 0%;
}
.color_4 {
	background: #8AF4FD none repeat scroll 0%;
}
.color_5 {
	background: #6DF1FD none repeat scroll 0%;
}
.color_6 {
	background: #51EFFD none repeat scroll 0%;
}
.color_7 {
	background: #34ECFC none repeat scroll 0%;
}
.color_8 {
	background: #19E9FC none repeat scroll 0%;
}
.color_9 {
	background: #03E8FD none repeat scroll 0%;
}
.color_10 {
	background: #03CBFD none repeat scroll 0%;
}

.row {
	width:126px;
	height:41px;
	clear: both;	
}

.grid {
	width:382px;
	height:381px;
	border: 5px solid gray; 
	float:left;
}

#grid-control {
	width:88px;
	height:254px;
	float:left;
	margin-left:0.8em;
}

#grid-control-one-col {
	width:44px;
	height:384px;
	float:left;
	margin-left:0.8em;
}

#control-bottom {
	width:382px;
	height:42px;
	clear:both;
	margin-top:0.8em;
}

.control-cell {
  width:42px;
  height:42px;	
  float:left;
}

.col_digit {
	float: left;
	width:42px; 
	height:252px;
	border: 1px solid #000;	
}


.col_digit2 {
	float: left;
	width:42px; 
	height:382px;
	border: 1px solid #000;	
}


.row_digit2 {
	float: left;
	width:382px; 
	height:42px;
	border: 1px solid #000;	
}


.separator {
  border-bottom: 1px dotted #282;
  clear: both;
  line-height:1px;
}

.button_action {
    background:#ddd url("/images/bg-btn.gif") repeat-x 0 0;
    float:left;
    margin:0 0 5px 0;
    text-decoration:none;
    color:#222;
    outline:none;
    color:#222222;
    font-family:Arial,Sans-serif;
    font-size:12px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    outline-color:invert;
    outline-style:none;
    outline-width:medium;
    text-decoration:none;
    border:solid #aaa 1px;
}

.button_action:hover {
    background:#ddd url("/images/bg- btn.gif") repeat-x 0 0;
    margin:0 0 5px 0;

}

.button_action:hover b {
    display: block;
    color: #3B5998;
}

.button_action b {
    display: block;
    padding: 2px 5px 2px 5px;
}

.button_action:active {
    display: block;
    margin:0 0 5px 0;
    color:#111;
}
.button_action:active b {
    display: block;
    background-image:none;
    background-color:#ccc;
}

.message {
	
}

div.messages {
  height:400px;
  margin-top:10px;
  overflow-x:hidden;
  overflow-y:auto;  
  border:1px solid #E8A400;
  background-color:white;
  padding:8px;
  width:560px;
}

.chatbox {
	clear:left;
	width: 270px;
	border: #000 solid 1px;
}

#chat-messages {
  width:252px;	
  height:372px;
  margin-top:1px;
  overflow-y:scroll;  
  border:1px solid #E8A400;
  background-color:white;
  padding:8px;
  float:left;
}

p.ex {
	  text-align: justify;
	width:268px;
}

.auto_complete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
z-index:10;
}

.auto_complete ul {
list-style-type: none;
margin:0px;
padding:0px;
}

.auto_complete ul li.selected
{
background-color: #bbf;

}

.auto_complete ul li {
list-style-type: none;
display:block;
margin:0;
padding:2px;
height:16px;
}
/*
.error {
background:transparent none repeat scroll 0%;
color:red;
font-size:90%;
font-weight:bold;
line-height:normal;
}*/

.spinner {
  background: url(../images/spinner.gif) no-repeat center center;
  height: 40px;
}


.error , input.error {
background:#FCFFDF;
color:#886E37;
font-size:11px;
line-height:150%;
margin-top:15px;
padding:3px 3px 3px 3px;
}

.error p {
margin-bottom:10px;
font-size:11px;
}

.error_message {
	/* background:#FCFFDF;*/
	color:#886E37;
	font-size:11px;
	line-height:150%;
	margin-top:15px;
	padding:3px 3px 3px 3px;
	font-size:11px;	
}

div.success {
	background:transparent url(/images/icon-checkmark24.gif) no-repeat scroll 0pt;
	color:#669933;
	font-family:'Helvetica Neue',Arial,Verdana,sans-serif;
	font-size:16px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	margin-top:15px;
	padding:6px 0pt 0pt 32px;
}

div.success p {
margin-bottom:10px;
font-size:14px;
}

.fieldWithErrors {
/*  padding: 2px;
  background-color: red;
  display: table; */
background:#FCFFDF;
color:#886E37;
font-size:11px;
line-height:150%;
margin-top:15px;
padding:3px 3px 3px 3px;
}

.fieldWithErrors p {
margin-bottom:10px;
font-size:11px;
}


#ErrorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#ErrorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#ErrorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#ErrorExplanation ul li {
  font-size: 12px;
  list-style: square;
}