div {
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
}

div#logo {
	width: 298px;
	height: 71px;
	background-image: url(../img/logo.gif);
}

div#mainscreen {
	background-color: black;
	display: none;
}

div#loginControl {
	position: absolute;
	//top:0px;
	left:0px;
	width:1200px;
	height:800px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	//background-color: #c0c0ff;
}

div#loginControl div.roomTitle {
	position: absolute;
	top:100px;
	left:20px;
	width:1200px;
	height:40px;
	font-size: 32px;
	text-align: left;
}

div#loginControl div.nameLabel {
	position: absolute;
	top:150px;
	left:20px;
	height:40px;
	font-size: 12px;
}

div#loginControl input.nameInput {
	position: absolute;
	top:146px;
	left:160px;
	height:20px;
	width: 200px;
	font-size: 12px;
}

div#loginControl button.roomInButton {
	position: absolute;
	top:180px;
	left:160px;
	height:20px;
	width: 200px;
	font-size: 12px;
}

img#whiteboard {
	position: absolute;
	top:0px;
	left:0px;
	width:1200px;
	height:800px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	cursor: default;
}

div#colorPaletteControl {
	position: absolute;
	top: 220px;
	left: 20px;
	width: 48px;
	border: solid 1px #000;
	z-index: 200;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	box-shadow: 3px 3px 4px #ccc;
}


div#colorPaletteTitle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 48px;
	height: 16px;
	background-color: #cccccc;
}

div#colorPaletteControl button.palette {
	top: 20px;
	left: 20px;
	width: 48px;
	border: solid 1px #000;
	margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

div#colorPaletteControl button.selected {
	background-color: #ffffff;
	border: solid 2px #f00;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}



div#layerButtonControl {
	position: absolute;
	top: 500px;
	left: 750px;
	width: 80px;
	border: solid 1px #000;
	margin: 0px 0px 0px 0px;
	z-index: 201;
	box-shadow: 3px 3px 4px #ccc;
}

div#layerButtonTitle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 80px;
	height: 16px;
	background-color: #cccccc;
}

div#layerButtonControl button.layer {
	top: 20px;
	left: 20px;
	width: 80px;
	border: solid 1px #000;
	margin: 0px 0px 0px 0px;
}


div#layerButtonControl button.selected {
	background-color: #ffffff;
	border: solid 2px #f00;
}

div#commandIconControl {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 48px;
	border: solid 1px #000;
	z-index: 202;
	box-shadow: 3px 3px 4px #ccc;
}

div#commandIconTitle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 48px;
	height: 16px;
	background-color: #cccccc;
}

div#commandIconControl button.item {
	top: 520px;
	left: 20px;
	width: 48px;
	border: solid 1px #000;
	margin: 0px 0px 0px 0px;
}



div#commandIconControl button.selected {
	background-color: #ffffff;
	border: solid 2px #f00;
}

div#penSizeControl {
	position: absolute;
	top: 460px;
	left: 20px;
	width: 48px;
	border: solid 1px #000;
	z-index: 203;
	box-shadow: 3px 3px 4px #ccc;
}

div#penSizeTitle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 48px;
	height: 16px;
	background-color: #cccccc;
}

div#penSizeControl canvas {
	background-color: #f0f0ff;
	border: solid 1px #000;
	width: 46px;
	height: 46px;
}

div#penAALabel {
	position: absolute;
	top: 48px;
	left: 10px;
	width: 50px;
	height: 20px;
	font-size: 8px;
}

div#penSizeControl select {
	background-color: #f0f0ff;
	border: solid 1px #000;
	width: 48px;
	font-size: 6px;
}




div#colorChartControl.openPicker {
	position: absolute;
	top: 20px;
	left: 750px;
	width: 320px;
	height: 460px;
	border: solid 1px #000;
	background-color: #f0f0f0;
	z-index: 204;
	box-shadow: 3px 3px 4px #ccc;
}

div#colorChartControl.closePicker {
	position: absolute;
	top: 20px;
	left: 750px;
	width: 320px;
	height: 170px;
	border: solid 1px #000;
	background-color: #f0f0f0;
	z-index: 204;
	box-shadow: 3px 3px 4px #ccc;
}

div#colorChartTitle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 320px;
	height: 16px;
	background-color: #cccccc;
}

div#colorChartTitleMinIcon {
	position: relative;
	top: 4px;
	left: 296px;
	width: 19px;
	height: 8px;
	background-image: url(../img/tri_down.png);
}

div#colorChartControl canvas.colorBar0 {
	position: relative;
	top: 20px;
	left: 30px;
	width: 258px;
	height: 15px;
	border: solid 1px #000;
	background-color: #f0f0f0;
	cursor: hand;
}

div#colorChartControl canvas.colorBar1 {
	position: relative;
	top: 30px;
	left: 30px;
	width: 258px;
	height: 15px;
	border: solid 1px #000;
	background-color: #f0f0f0;
	cursor: hand;
}

div#colorChartControl canvas.colorBar2 {
	position: relative;
	top: 40px;
	left: 30px;
	width: 258px;
	height: 15px;
	border: solid 1px #000;
	background-color: #f0f0f0;
	cursor: hand;
}


div#colorChartControl canvas.colorBar3 {
	position: relative;
	top: 50px;
	left: 30px;
	width: 258px;
	height: 15px;
	border: solid 1px #000;
	background-color: #f0f0f0;
	cursor: hand;
}


div#colorChartControl canvas.colorBar4 {
	position: relative;
	top: 50px;
	left: 30px;
	width: 258px;
	height: 15px;
	border: solid 1px #000;
	cursor: hand;
}

div#colorChartControl div.cursor {
	position: relative;
	top: 0px;
	left: 0px;
	width: 13px;
	height: 7px;
	background-image: url(../img/cursor_tri.png);
	cursor: hand;
}


div#colorPickerControl {
	position: relative;
	top: 90px;
	left: 0px;
	width: 320px;
	height: 256px;
	background-color: #f0f0f0;
}




div#penPressureControl {
	position: absolute;
	top: 90px;
	left: 0px;
	width: 320px;
	height: 256px;
	background-color: #f0f0f0;
}

div#penPressureControl {
	position: absolute;
	top: 210px;
	left: 100px;
	width: 320px;
	height: 120px;
	background-color: #f0f0f0;
	z-index: 300;
	border: solid 1px #000;
	font-size: 12px;
	box-shadow: 3px 3px 4px #ccc;
	#padding: 2px 2px 2px 2px;
	display: none;
}


div#penPressureTitle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 320px;
	height: 16px;
	background-color: #cccccc;
}




div#textchatControl {
	position: absolute;
	top: 500px;
	left: 150px;
	width: 400px;
	height: 200px;
	border: solid 1px #000;
	box-shadow: 3px 3px 4px #ccc;
	z-index: 206;
	background-color: #fff;
	//filter: alpha(opacity=70);
	//-moz-opacity:0.70;
	//opacity:0.70;
}

div#textchatTitle {
	position: relative;
	top: 0px;
	left: 0px;
	width: 400px;
	height: 16px;
	background-color: #cccccc;
}

div#textchatTitleMinIcon {
	position: relative;
	top: 4px;
	left: 376px;
	width: 19px;
	height: 8px;
	background-image: url(../img/tri_down.png);
}


div#textchatControl div.talk {
	position: absolute;
	top: 16px;
	left: 0px;
	width: 300px;
	height: 150px;
	border: solid 1px #ccc;
	//box-shadow: 3px 3px 4px #ccc;
	background-color: #fff;
	word-break: break-all;
	font-size: 12px;
	overflow: auto;
}

div#textchatControl input.send {
	position: absolute;
	top: 174px;
	left: 0px;
	width: 338px;
	height: 20px;
	border: solid 1px #ccc;
	background-color: #fff;
	word-break: break-all;
	font-size: 12px;
}

div#textchatControl button.send {
	position: absolute;
	top: 173px;
	left:340px;
	width: 40px;
	height: 20px;
	//border: solid 1px #ccc;
	font-size: 12px;
}

div#textchatControl div.memberList {
	position: absolute;
	top: 16px;
	left:300px;
	width: 98px;
	height: 150px;
	border: solid 1px #ccc;
	overflow: auto;
}

div#textchatControl div.member {
	width: 98px;
	//height: 16px;
	font-size:12px;
}

div#informationControl {
	position: absolute;
	top: 10px;
	left: 100px;
	width: 400px;
	height: 200px;
	background-color: #fff;
	z-index: 300;
	border: solid 4px #080;
	font-size: 12px;
	line-height:13px;

}

div#browserAlert {
	position: absolute;
	top:  0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #fff;
	box-shadow: 3px 3px 4px #ccc;
	z-index: 999;
}