*,
body
{
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}


body
{
	margin: 0;
	padding: 0;
}

a
{
	color: #00a9ce;
	text-decoration: none;
}

a:hover
{
	color: #a7d800;
}

a img
{
	border: none;
}

body.sketch
{
	background: #606060 url(/images/bg_transparent.gif) repeat top left;
}

.image-letters
{
	white-space: nowrap;
	overflow: hidden;
}

.avatar,
.own_avatar,
.own_avatar img
{
	width: 80px;
	height: 80px;
	/*border-width: 1px;
	border-style: solid;	*/
}

body{cursor: default;}

#debug_message_container
{
	display: none;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 700px;
	height: 100px;
	overflow-y: scroll;
	background-color: black;
	color: white;
	font-size: 10px;
	padding: 5px;
	z-index: 5;
}

body.sketch #main
{
	display: block;
	/*overflow: scroll;*/
	width: 100%;
}

body.sketch #main table
{
	z-index: 2;
}

#canvas_wrapper
{
	position: relative; /* IMPORTANT! */
	background-color: white;
	display: block;
	margin: 0 auto;
}

#canvas_wrapper canvas
{
	position: absolute;
}

#focused_top
{
	height: 345px;
	margin-bottom: -345px;
	background: #7ca000 url("/images/bg_focused_top.jpg") repeat-x top center;
}

body.focused
{
	background: #7ca000 url("/images/bg_focused_middle.jpg") repeat bottom center;
}

.shadow-top
{
	margin-top: -19px;
	height: 19px;
	line-height: 19px;
	overflow: hidden;
	background: transparent url("/images/shadow_top.png") repeat-x bottom center;
	position: relative;
}

.shadow-bottom
{
	height: 25px;
	line-height: 25px;
	overflow: hidden;
	background: transparent url("/images/shadow_bottom.png") repeat-x top center;
}

.elevated-paper
{
	padding: 50px 0;
	background: white url("/images/bg_paper_top.gif") repeat-x top center;
}

body.focused .footer
{
	position: fixed;
	bottom: 0px;
}

.footer
{
	width: 100%;
	text-align: center;
	vertical-align: bottom;
	font-size: 12px;
	z-index: 1;
}

.footer,
.footer a
{
	color: white;
}

body.focused .footer
{
	padding-top: 319px;
	line-height: 20px;
	background: #7ca000 url("/images/bg_focused_bottom.jpg") repeat-x bottom center;
}

.clear
{
	clear: both;
	height: 1px;
	line-height: 1px;
	overflow: hidden;
}


table.cbs > tbody > tr > td,
table.button_1 > tbody > tr > td,
table.style-wrap-1 > tbody > tr > td
{
	overflow: hidden;
}

table.style-wrap-1 > tbody > tr.top > td.left,
table.style-wrap-1 > tbody > tr.top > td.middle,
table.style-wrap-1 > tbody > tr.top > td.right,
table.style-wrap-1 > tbody > tr.bottom > td.left,
table.style-wrap-1 > tbody > tr.bottom > td.middle,
table.style-wrap-1 > tbody > tr.bottom > td.right
{
	height: 14px;
	line-height: 9px;
}

table.style-wrap-1 > tbody > tr.top > td.left,
table.style-wrap-1 > tbody > tr.top > td.right,
table.style-wrap-1 > tbody > tr.middle > td.left,
table.style-wrap-1 > tbody > tr.middle > td.right,
table.style-wrap-1 > tbody > tr.bottom > td.left,
table.style-wrap-1 > tbody > tr.bottom > td.right
{
	width: 14px;
}

table.style-wrap-1 > tbody > tr.top > td.left
{
	background: transparent url('/images/e1_tl.png') no-repeat right bottom;
}
table.style-wrap-1 > tbody > tr.top > td.center
{
	background: transparent url('/images/e1_tc.png') repeat-x center bottom;
}
table.style-wrap-1 > tbody > tr.top > td.right
{
	background: transparent url('/images/e1_tr.png') no-repeat left bottom;
}

table.style-wrap-1 > tbody > tr.middle > td.left
{
	background: transparent url('/images/e1_ml.png') repeat-y right bottom;
}
table.style-wrap-1 > tbody > tr.middle > td.center
{
	/*background: transparent url('/images/e1_mc.png') repeat center 50%;*/
	background-color: #a7d800;
}
table.style-wrap-1 > tbody > tr.middle > td.right
{
	background: transparent url('/images/e1_mr.png') repeat-y left bottom;
}

table.style-wrap-1 > tbody > tr.bottom > td.left
{
	background: transparent url('/images/e1_bl.png') no-repeat right bottom;
}
table.style-wrap-1 > tbody > tr.bottom > td.center
{
	background: transparent url('/images/e1_bc.png') repeat-x center bottom;
}
table.style-wrap-1 > tbody > tr.bottom > td.right
{
	background: transparent url('/images/e1_br.png') no-repeat left bottom;
}


table.cbs > tbody > tr.top > td.left,
table.cbs > tbody > tr.top > td.middle,
table.cbs > tbody > tr.top > td.right,
table.cbs > tbody > tr.bottom > td.left,
table.cbs > tbody > tr.bottom > td.middle,
table.cbs > tbody > tr.bottom > td.right
{
	height: 3px;
	line-height: 3px;
}

table.cbs > tbody > tr.top > td.left,
table.cbs > tbody > tr.top > td.right,
table.cbs > tbody > tr.middle > td.left,
table.cbs > tbody > tr.middle > td.right,
table.cbs > tbody > tr.bottom > td.left,
table.cbs > tbody > tr.bottom > td.right
{
	width: 3px;
}

table.cbs > tbody > tr.top > td.left
{
	background: transparent url('/images/cbs_tl.png') no-repeat right bottom;
}
table.cbs > tbody > tr.top > td.center
{
	background: transparent url('/images/cbs_tc.png') repeat-x center bottom;
}
table.cbs > tbody > tr.top > td.right
{
	background: transparent url('/images/cbs_tr.png') no-repeat left bottom;
}

table.cbs > tbody > tr.middle > td.left
{
	background: transparent url('/images/cbs_ml.png') repeat-y right bottom;
}
table.cbs > tbody > tr.middle > td.center:hover
{
	background: transparent url('/images/control_button_hover.png') no-repeat center 50%;
}

table.cbs > tbody > tr.middle > td.center,
table.cbs > tbody > tr.middle > td.center a
{
	display: block;
	width: 65px;
	height: 65px;
	overflow: hidden;
}

table.cbs > tbody > tr.middle > td.center
{
	background: transparent url('/images/control_button.png') no-repeat center 50%;
	text-align: center;
	cursor: pointer;
}

table.cbs > tbody > tr.middle > td.right
{
	background: transparent url('/images/cbs_mr.png') repeat-y left bottom;
}

table.cbs > tbody > tr.bottom > td.left
{
	background: transparent url('/images/cbs_bl.png') no-repeat right bottom;
}
table.cbs > tbody > tr.bottom > td.center
{
	background: transparent url('/images/cbs_bc.png') repeat-x center bottom;
}
table.cbs > tbody > tr.bottom > td.right
{
	background: transparent url('/images/cbs_br.png') no-repeat left bottom;
}


table.button_1 > tbody > tr.top > td.left,
table.button_1 > tbody > tr.top > td.middle,
table.button_1 > tbody > tr.top > td.right,
table.button_1 > tbody > tr.bottom > td.left,
table.button_1 > tbody > tr.bottom > td.middle,
table.button_1 > tbody > tr.bottom > td.right
{
	height: 9px;
	line-height: 9px;
}

table.button_1 > tbody > tr.top > td.left,
table.button_1 > tbody > tr.top > td.right,
table.button_1 > tbody > tr.middle > td.left,
table.button_1 > tbody > tr.middle > td.right,
table.button_1 > tbody > tr.bottom > td.left,
table.button_1 > tbody > tr.bottom > td.right
{
	width: 9px;
}

table.button_1 > tbody > tr.top > td.left
{
	background: transparent url('/images/button_1_tl.png') no-repeat right bottom;
}
table.button_1 > tbody > tr.top > td.center
{
	background: transparent url('/images/button_1_tc.png') repeat-x center bottom;
}
table.button_1 > tbody > tr.top > td.right
{
	background: transparent url('/images/button_1_tr.png') no-repeat left bottom;
}

table.button_1 > tbody > tr.middle > td.left
{
	background: transparent url('/images/button_1_ml.png') repeat-y right bottom;
}

table.button_1 > tbody > tr.middle > td.center
{
	background-color: #00b0d5;
	text-align: center;
	cursor: pointer;
}

table.button_1 > tbody > tr.middle > td.right
{
	background: transparent url('/images/button_1_mr.png') repeat-y left bottom;
}

table.button_1 > tbody > tr.bottom > td.left
{
	background: transparent url('/images/button_1_bl.png') no-repeat right bottom;
}
table.button_1 > tbody > tr.bottom > td.center
{
	background: transparent url('/images/button_1_bc.png') repeat-x center bottom;
}
table.button_1 > tbody > tr.bottom > td.right
{
	background: transparent url('/images/button_1_br.png') no-repeat left bottom;
}



.color-1-face
{
	width: 24px;
	height: 43px;
}

.color-1-background
{
	background-color: black;
}
.color-faces
{
	margin: 11px auto; /* (65-43)/2 = 11 */
	height: 43px;
	width: 43px;
	background-color: white;
}

.color-wheel
{
	display: block;
	width: 340px;
	height: 340px;
	overflow: hidden;
	background: transparent url('/images/color_wheel.png') no-repeat 50% 50%;
}


.color-box
{
	margin: 76px auto 0;
	display: block;
	width: 188px;
	height: 188px;
	line-height: 188px;
}

.pixel-crosshair
{
	float: left;
	display: block;
	height: 5px;
	line-height: 5px;
	width: 5px;
	margin-top: -2px;
	margin-left: -2px;
	margin-bottom: -3px;
	margin-right: -3px;
	background: transparent url('/images/pixel_crosshair.png') no-repeat top center;
	position: relative;
	z-index: 5;
}


#controls,
#controls_popout
{
	position: absolute;
	top: 120px;
	display: block;
	overflow: hidden;
}

#controls
{
	left: 0px;
	z-index: 3;
}

#controls_popout
{
	left: 93px;
	z-index: 2;
}

.tool_size-ball
{
	margin: 32px auto 0 auto;
	display: block;
	width: 2px;
	height: 2px;
	overflow: hidden;	
	line-height: 1px;
	background-color: white;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;

	/*border: solid white 1px;*/
}