/**
 * SudokuHub StyleSheet
 */

/* Start: Yahoo UI Library: Reset CSS */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	font-family:Tahoma,Arial,Sans-Serif;
	line-height:1.5em;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}
.clear {clear:both;}
/* End: YUI Reset */

a {
	color:#82A5D2;
}
a:hover {
	text-decoration:none;
}
em {
    font-style:italic;
}
input.styled, textarea.styled {
	border-top:2px solid #aaa;
	border-left:1px solid #bbb;
	border-right:1px solid #bbb;
	border-bottom:1px solid #ddd;
	background:#f3f3f3;
	padding:2px 4px;
	font-size:13px;
}
input.styled {
	height:17px;	/* 21px - 2*2px */
	width:170px;	/* 178px - 2*4px */
}
input.styled.ghost-label, textarea.styled.ghost-label {
	color:#999;
}
.error label {color:#900;}
.error-message {
	padding:12px;
	width:50%;
	background:#FCECEC;
	border:3px solid #900;
	margin-bottom:15px;
}
.error-message h2 {
	font-weight:bold;
	color:#900;
	margin-bottom:6px;
	font-size:16px;
}

a.button {
	background-image:url(/images/button_bg.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	cursor:pointer;
	display:block;
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
	color:#333;
	height:35px;
}
a.button span {
	background-image:url(/images/button_bg.png);
	background-repeat:no-repeat;
	background-position:100% 0;
	display:block;
	margin-left:13px;
	height:25px;
	padding:8px 13px 1px 0;
}
a.button:hover span {background-position:100% -36px;}
a.button:hover {background-position:0px -36px;}
a.button.down span , li.down a.button span {background-position:100% -72px; padding:9px 13px 0px 0;}
a.button.down , li.down a.button {background-position:0px -72px;}

body {
	text-align:center;
	background:url(/images/bg.png) repeat-x #C8DFF9;
	margin:0 0 30px;
	font-size:12px;
	color:#333;
}
div#main_wrapper {
	width:960px;
	margin:10px auto 0;
	text-align:left;
	background:#fff;
	position:relative;
}
div#main_content {
	padding:0 12px;
	margin:15px 0 30px;
}

h1, h2 {
	font-family:helvetica, arial, sans-serif;
	font-size:24px;
	margin-bottom:20px;
	line-height:1em;
}
h3 {
	padding:4px 6px;
	background:#e7e7e7;
	font-size:11px;
	font-weight:bold;
}
form label {
	font-weight:bold;
	display:block;
	margin:5px 0;
}

div.two-columns {
	padding:0 0 10px 12px;
}
div.two-columns div.column {
	float:left;
	width:319px;
	margin-right:12px;
}
div.two-columns div.column.last {
	margin-right:0px;
}

div.box {
	margin-bottom:20px;
}
.stuff {
	padding:8px;
}
.note-text {
	font-size:11px;
	color:#999;
}


/***********
Header Stuff
************/

div#header {padding:10px;}
a#logo {
	width:258px;
	overflow:hidden;
	height:0;
	padding-top:65px;
	display:block;
	background:url(/images/logo.png) no-repeat;
	margin:6px 0 0 6px;
	float:left;
}
div#header-right , #header form#login , ul#nav {float:right;}
div#header-right {
	width:450px;
	padding-right:3px;
	font-size:11px;
	color:#999;
}
ul#nav li {
	color:#ccc;
	font-size:11px;
	float:right;
	margin-left:3px;
}
ul#nav li a {
	text-decoration:none;
}
ul#nav li a:hover {
	text-decoration:underline;
}
#header form#login {
	margin-top:10px;
}
#header form#login li {
	margin-bottom:4px;
	position:relative;
}
#header form#login input#login-password {
	margin-left:4px;
}
#header form#login input#login-submit {
	float:right;
	position:absolute;
	right:4px;
	top:1px;
}


/*********
Game Stuff
**********/

div#game_wrapper {
	float:left;
	width:662px;
}	
ul#board_menu {
	position:absolute;
	top:414px;
	left:218px;
}
ul#board_menu li {
	float:left;
	margin-right:6px;
}
ul#board_menu li#ajax_activity {
	width:22px;
	height:35px;
}
ul#board_menu li#ajax_activity.loading {
	background:url(/images/activity_indicator.gif) no-repeat 0px 10px;
}
div#board_wrap {
	position:relative;
	width:670px;
	height:500px;
	float:left;
	margin-right:-286px;
}
div#sidebar {
	width:274px;
	float:right;
	padding:6px 12px 0;
}
#board_message_wrap {
	position:absolute;
	top:-10px;
}
#board_message_wrap tr {
	background-image:url(/images/message_bg.png);
	background-position:0% 0px;
	height:28px;
	font-size:12px;
	font-weight:bold;
	color:#333;
}
#board_message_wrap.fail tr {
	background-position:0% -28px;
}
#board_message_wrap.fail td {background-position:100% -28px;}
#board_message {
	background-image:url(/images/message_bg.png);
	background-position:100% 0px;
	margin-left:20px;
	display:block;
	height:16px;
	padding:4px 20px 8px 0;
}

/* Scoring */
#score-wrapper {
	width:115px;
	height:72px;
	background:url(/images/score_bg.png);
	float:left;
	margin-right:8px;
	position:relative;
}
.score {
	font-size:30px;
	line-height:40px;
	padding-top:4px;
	color:#333;
	text-align:center;
}
.score span.loading {
	font-size:11px;
	position:absolute;
	display:block;
	width:100%;
	text-align:center;
	color:#999;
}
.score-label {
	font-weight:bold;
	text-align:center;
	font-size:11px;
	width:100%;
}
#score-wrapper .score-label {
	position:absolute;
	bottom:12px;
}
#kid {
	background:url(/images/kid-sprite.png);
	float:left;
	width:132px;
	height:194px;
}
#kid.kid-1 {background-position:0px 0px;}
#kid.kid-2 {background-position:-130px 0px;}
#kid.kid-3 {background-position:-260px 0px;}
#kid.kid-4 {background-position:-390px 0px;}

/* Puzzle Completed Notification */
#win_box {
	padding:15px 14px;
	width:262px;
	height:205px;
	position:absolute;
	/* Centered on board by js */
	z-index:10;
	background:url(/images/win_bg.png) no-repeat;
}
#win_box .title {
	height:48px;
	background:url(/images/win_box_content_bg.png) no-repeat;
	padding:12px 0;
}
#win_box .title p , #win_box .title h2 {text-align:center;}
#win_box .title p {font-size:11px;}
#win_box .title h2 {margin-bottom:5px;}
#win_box .points {
	float:left;
	margin-top:3px;
	background:url(/images/win_box_content_bg.png) left top no-repeat;
	width:129px;
}
#win_box #earned {margin-right:3px;}
#win_box #total {width:130px;}
#win_box .points .right {
	background: url(/images/win_box_content_bg.png) top right no-repeat;
	height:72px;
	float:right;
	width:4px;
}
#continue-buttons {
	position:relative;
	height:55px;
	clear:both;
	background: url(/images/win_box_content_bg.png) 0px 3px no-repeat;
}
#continue-buttons li a {
	position:absolute;
	width:88px;
	text-align:center;
}
#continue-buttons li a#replay , #continue-buttons li a#sign_up {
	top:9px;
	left:133px;
}
#continue-buttons li a#new_game {
	top:9px;
	right:134px;
}
#continue-buttons .bottom {
	position:absolute;
	bottom:0;
	height:4px;
	width:100%;
	background: url(/images/win_box_content_bg.png) bottom left no-repeat;
}


ul#board {
	clear:both;
	left:133px;
	position:absolute;
	top:10px;
	width:404px;
	height:398px;
}
ul#board li {
	width:42px;
	height:38px;
	padding:4px 0 0 0;
	margin:0 2px 1px 0;
	float:left;
	background-image:url(/images/cell_bg.png);
	font-family:Helvetica,Arial,Sans-Serif;
	font-size:28px;
	text-align:center;
	color:#999;
	cursor:default;
	position:relative;
	line-height:32px; /* For firefox, IE, etc. */
}
::root ul#board li {
	line-height:28px; /* For Safari */
}
ul#board li span {
	position:absolute;
	width:36px;
	line-height:10px;
	text-align:left;
	top:4px;
	font-size:9px;
	left:4px;
}
ul#board li.fixed {color:#333;}
ul#board li.current {background-position:0px -84px;}
ul#board li.warning {background-position:0px -42px;}
ul#board li.current.warning {background-position:0px -126px;}
ul#board li.c_2 , ul#board li.c_5 {margin-right:7px;}
ul#board li.r_2 , ul#board li.r_5 {margin-bottom:6px;}
ul#board li.c_8 {margin-right:0px;}

ul#num_pad {
	position:absolute;
	width:116px;
	padding:5px 0 3px 6px;
	background:#fff;
}
ul#num_pad.left {left:8px;}
ul#num_pad.right {right:8px;}
ul#num_pad li {
	margin:0 4px 3px 0;
	float:left;
}
ul#num_pad li.clear {
	margin-left:26px;
}
ul#num_pad.taking_notes li.clear {
	display:none;
}
ul#num_pad li a.button {
	font-size:13px;
}


/***********************
Other game page features
************************/

input.multiplayer-link {
	padding:4px;
	border:1px solid #ccc;
	background:#f7f7f7;
	width:94%;
	margin-bottom:8px;
}
.stuff td {font-size:14px; vertical-align:center;}
.label {
	font-weight:bold;
	text-align:right;
	padding-right:8px;
}

#leaderboard li {
	padding:6px;
	border-bottom:1px solid #ddd;
}
#leaderboard .username {
	float:left;
}
#leaderboard .total-points {
	float:right;
}


/*****************
Task Flow Specific
******************/

div#main_wrapper.task-flow {
	padding:30px;
	border:10px solid #eee;
	width:500px;
	margin-top:0;
}
#task-flow-logo {
    display:block;
	background:url(/images/logo-blue-bg.png) no-repeat;
	width:258px;
	padding-top:115px;
	overflow:hidden;
	height:0;
}
.task-flow input {
	margin-bottom:4px;
}
.task-flow input.submit , .task-flow input.submit {
	margin-top:6px;
}
.task-flow .helpful-links {
	margin:6px 0;
}
.task-flow .help-text {
	margin:0 0 8px;
}
.task-flow .help-text strong {
    font-weight:bold;
    color:#666;
}
.task-flow textarea {
  width:60%;
  height:120px;
}