.cnvsContainer
{
    display: block;
    background: #ffffff;
    width: 800px;
}

#cnvsPanel
{
	position: relative;
	display: block;
	height: 250px;
	text-align: left;
}
#cnvsTigan
{
    padding: 20px 32px;
    text-align: left;
    width: 736px;
}

#cnvsText
{
	width: 750px;
	height: 800px;
	background: transparent;
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: text;
	display: none;
}
#cnvsPanel canvas 
{
	height: 800px;

	position: relative;
	top: 0px;
	left: 28px;
	cursor: crosshair;
}

.cnvsTools
{
	height: 71px;
	background: url(../images/cnvs_bk.jpg) repeat-x;
	background-size: 100%;
	vertical-align: top;
	font-size:14px;
}

.cnvs_opt:hover, #cnvs_clear:hover
{
	background-color: #efefef;
}

.cnvs_opt
{
    display: inline-block;
    position: relative;
    top: -10px;
    width: 95px;
    height: 100%;
    background: url(../images/cnvs_opt_bk.png) no-repeat scroll 0px 0px;
    font-size: 20px;
    color: #3c3c3c;
    cursor: pointer;
    line-height: 71px;
    margin: 0px;
    text-align: center;
}

.cnvs_opt_high
{
    background: url(../images/cnvs_opt_bk.png) no-repeat scroll 0px -71px;
    color: #2799be;
}

.cnvs_opt:hover
{
    color: #2799be;
}

.cnvs_opt_icon
{
    width: 23px;
    height: 32px;   
    display: inline-block;
    background-attachment: scroll;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    margin: auto 2px;
    vertical-align: middle;
}

.cnvs_opt:hover .cnvs_opt_icon, .cnvs_opt_high .cnvs_opt_icon
{
    background-position: 0px -32px;
}

#cnvs_brush .cnvs_opt_icon
{
    background-image: url(../images/cnvs_opt_icon_b.png);
}

#cnvs_text .cnvs_opt_icon
{
    background-image: url(../images/cnvs_opt_icon_t.png);
}

#cnvs_eraser .cnvs_opt_icon
{
    background-image: url(../images/cnvs_opt_icon_e.png);
}

.cnvs_opt_ext
{
    display: inline-block;
    height: 100%;
}

.cnvs_opt_range
{
    display: inline-block;
    width: 90px;
    height: 21px;
    margin-top: 24px;
}

.cnvs_opt_range input
{
    width: 85%;
    outline: none;
}

.cnvs_opt_size
{
    display: inline-block;
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    border-radius: 10px;
    border: solid 2px #999999;
    position: relative;
}

.cnvs_opt_color
{
    display:inline-block;
    height:40px;
    width: 40px;
    margin-top: 14px;
}

.cnvs_opt_color table
{
    border-spacing: 0;
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}

.cnvs_opt_color td
{
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}

.cnvs_opt_color_row
{
    height:20px;
    margin: 0px;
    padding: 0px;
}

.cnvs_opt_color_item
{
    display:inline-block;
    width: 20px;
    height: 20px;
    margin: 0px;
    cursor: pointer;
}

.cnvs_opt_color_item_high
{
    width:16px;
    height:16px;
    margin:2px;
}

#cnvs_color_black
{
    background-color: #4e4e4e
}

#cnvs_color_green
{
    background-color: #a0c833
}

#cnvs_color_red
{
    background-color: #f56e81
}

#cnvs_color_yellow
{
    background-color: #fcd40d
}

#cnvs_brush_size
{
    background-color: #4e4e4e;
    border-color:#4e4e4e;
}

.cnvs_opt_font
{
    display: inline-block;
    line-height: 69px;
    cursor: pointer;
    color: #7e7e7e;
}

.cnvs_opt_font_high
{
    color: #3c3c3c;
}

#cnvs_font
{
    position: relative;
    top: -10px;
}

#cnvs_font_s
{
    font-size: 14px;
}

#cnvs_font_m
{
    font-size: 16px;
}

#cnvs_font_l
{
    font-size: 18px;
}

#cnvs_clear
{
    display: inline-block;
    position: relative;
    top: -10px;
    background: url(../images/cnvs_clr_bk.png) no-repeat scroll 0px 0px;
    width: 100px;
    height: 38px;
    font-size: 14px;
    color: #3c3c3c;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
    margin-top: 16px;
}

.cnvs_opt_icon_clear
{
    display: inline-block;
    background: url(../images/cnvs_opt_icon_c.png) no-repeat scroll 0px 0px;
    width: 8px;
    height: 10px;
}

#cnvs_clear:hover
{
    background: url(../images/cnvs_clr_bk.png) no-repeat scroll 0px -38px;
    color: #2799be;
}

#cnvsTA
{
	display: none;
	position: absolute;
	background: transparent;
	border: none;
	outline: none;
	resize: none;
	overflow: hidden;
	font-size: 16px;
	line-height: 16px;
	font-family:sans-serif;
}

#cnvsTA::-ms-clear
{
    display:none;
}

#cnvs_btn_file
{
    display: inline-block;
    width: 80px;
    height: 26px;
    line-height: 26px;
    background: url(../images/cnvs_file.png) no-repeat scroll 0px 0px;
    font-size: 14px;
    color: #3c3c3c;
    position: relative;
    left: -100px;
}

#cnvs_ipt_file
{
    display: inline-block;
    width: 0px;
    height: 0px;
}

#cnvs_btn_file:hover
{
    background: url(../images/cnvs_file.png) no-repeat scroll 0px -26px;
}

#tools_sketch
{
    min-height: 300px;
    text-align: left;
}

#cnvsPreset
{
    position:absolute;
    left: 28px;
    top: 0px;
}

canvas#cnvs_temp
{
    position: absolute;
    left: 28px;
    top: 0px;
}
#tool
{height: 250px;position:absolute;float:left;}
#tool_left
{width: 80px;z-index:1;background: #EEE;position:absolute;left:0px;display:none;}
#tool_rihgt
{width: 28px; height: 100px;position:absolute;right:-28px;z-index:1;border-radius:0 5px 5px 0;background:#80c833;line-height: 33px; margin-top:22px; color:#fff;cursor:pointer;}
.ul_tool
{width: 100%; padding:0px;margin:0px;list-style:none;}
.ul_tool li
{
    text-align: center;
    border: 1px solid #DDCCCC;
    border-bottom:0px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
}
.ul_tool li:hover
{
	 background: #DDCCCC;
	}
.ul_tool_li_bg
{
    background: #DDCCCC;
}