@charset "gb2312";
/* CSS Document */
html{ text-align:center;}
body{ text-align:left; width:800px; margin:0 auto; font:12px/25px Arial,"Microsoft Yahei",Simsun;}
a{ color:inherit; text-decoration:none;}
.impt{ color:red; font-weight:bold; padding:0 5px;}
.bold{ font-weight:bold; padding:0 5px;}
.small{ font-weight:normal; font-size:12px; color:#666;}
.clear{ clear:both; font-size:0; line-height:0; height:0;}
#header{}

/*=ioPart*/

#ioPart{ padding:10px 0;}

.tabs{ overflow:hidden;}
.tabs li{ float:left; height:30px; margin-right:5px; background-color:#09f; cursor:pointer;
		  color:white; text-align:center; line-height:30px;
		  border-top-left-radius:5px; border-top-right-radius:5px;}
.tabs li.now,.tabs li:hover{ font-weight:bold; background:#09f url(images/tabs.png) repeat-x center bottom;}
.tabs li a{ padding:0 20px; height:100%;}
.tabcs{ overflow:hidden; width:100%;}
.tabcs li,#coolPart,#helpPart{ padding:10px; border:1px solid #09f; background:url(images/shadow.png) repeat-x center 1px; display:none;
		   border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}

#wordtomake,#srctomake{ border:1px solid #ddd; background-color:#f9f9f9; border-radius:5px;
			 width:500px; height:40px;
			 font-size:30px; line-height:40px; padding:5px 10px; color:#ccc;}
#srctomake{ font-size:18px;}
#imgtomake{ border:1px solid #ddd; background-color:#f9f9f9; width:500px; height:25px; padding:0 10px; margin-top:15px;}

#wPaintCtrl{ padding:5px 0;}
#wPaintCtrl button{ margin-right:10px;}

/*=workPart*/

#workPart{}
#workPart h3,#copyright{ border:1px solid #eee; border-radius:4px; color:#09f; padding-left:10px; margin:5px auto; background-color:#f9f9f9;}
#copyright{ clear:both; padding-top:10px;}

#result{}
#result #hong{border:1px solid #ccc; width:100%; height:172px; font:12px/15px Arial;}

#brushPart{ width:520px; float:left;}
#brushPart p{ font-size:12px;}
#paperPart{ width:260px; float:right;}

#tools{}
#paper{ position:relative;}
/*=brush*/
#brush ul{ overflow:hidden;}
#brush ul li{float:left; width:20px; height:20px; margin:2px; border:1px solid #eee;
			 text-indent:-999em; cursor:pointer;}
/*=paper*/
#paperBackground{width:260px; overflow:hidden;
				 text-align:center; line-height:100%; font-size:200px; color:#ddd;}
#paperBackground img{ width:260px;}
#paperTable{width:260px; background:url(images/bg.gif);
			position:absolute; left:0; top:0; z-index:20;}
table{}
tr{ height:20px;}
td{ width:20px; border:1px solid #ccc;}
td:hover{ background-color:#eee;}

/*=coolPart*/
#coolPart{ display:block;}
.coolshow{ overflow:hidden;}
.coolshow dt{ font-size:14px; font-weight:bold; color:#005d65; padding-left:5px;}
.coolshow dd{ float:left; padding:2px;}
.coolshow img{ padding:2px; border:1px solid #eee;}
.coolshow .design img{ width:260px;}
.coolshow .game img{ width:200px;}
.coolshow .hong textarea{ width:250px; height:300px;}
/*=helpPart*/
#helpPart{ display:block;}
#helpPart li{ line-height:30px;}
#helpPart li .num{ font-size:18px; font-style:italic; padding-right:5px; color:#09f; font-weight:bold;}
#helpPart li img{ padding:5px; border:1px solid #eee;}
#helpPart li .this p{ padding-left:20px;}
#helpPart li .this{ display:none;}
#helpPart li h3.more{ line-height:40px; font-size:28px; cursor:pointer;}
#helpPart li h3.more:hover,#helpPart li h3.now{ background-color:#f9f9f9;}
#helpPart li .show{ display:block;}

/*=icon*/
#brush ul li.icon0,td.icon0,div.icon0 td:hover{ background:url(images/icon.png) no-repeat -0px -0px;}
#brush ul li.icon1,td.icon1,div.icon1 td:hover{ background:url(images/icon.png) no-repeat -20px -0px;}
#brush ul li.icon2,td.icon2,div.icon2 td:hover{ background:url(images/icon.png) no-repeat -40px -0px;}
#brush ul li.icon3,td.icon3,div.icon3 td:hover{ background:url(images/icon.png) no-repeat -60px -0px;}
#brush ul li.icon4,td.icon4,div.icon4 td:hover{ background:url(images/icon.png) no-repeat -80px -0px;}
#brush ul li.icon5,td.icon5,div.icon5 td:hover{ background:url(images/icon.png) no-repeat -100px -0px;}
#brush ul li.icon6,td.icon6,div.icon6 td:hover{ background:url(images/icon.png) no-repeat -120px -0px;}
#brush ul li.icon7,td.icon7,div.icon7 td:hover{ background:url(images/icon.png) no-repeat -140px -0px;}
#brush ul li.icon8,td.icon8,div.icon8 td:hover{ background:url(images/icon.png) no-repeat -160px -0px;}
#brush ul li.icon9,td.icon9,div.icon9 td:hover{ background:url(images/icon.png) no-repeat -180px -0px;}
#brush ul li.icon10,td.icon10,div.icon10 td:hover{ background:url(images/icon.png) no-repeat -200px -0px;}
#brush ul li.icon11,td.icon11,div.icon11 td:hover{ background:url(images/icon.png) no-repeat -0px -20px;}
#brush ul li.icon12,td.icon12,div.icon12 td:hover{ background:url(images/icon.png) no-repeat -20px -20px;}
#brush ul li.icon13,td.icon13,div.icon13 td:hover{ background:url(images/icon.png) no-repeat -40px -20px;}
#brush ul li.icon14,td.icon14,div.icon14 td:hover{ background:url(images/icon.png) no-repeat -60px -20px;}
#brush ul li.icon15,td.icon15,div.icon15 td:hover{ background:url(images/icon.png) no-repeat -80px -20px;}
#brush ul li.icon16,td.icon16,div.icon16 td:hover{ background:url(images/icon.png) no-repeat -100px -20px;}
#brush ul li.icon17,td.icon17,div.icon17 td:hover{ background:url(images/icon.png) no-repeat -120px -20px;}
#brush ul li.icon18,td.icon18,div.icon18 td:hover{ background:url(images/icon.png) no-repeat -140px -20px;}
#brush ul li.icon19,td.icon19,div.icon19 td:hover{ background:url(images/icon.png) no-repeat -160px -20px;}
#brush ul li.icon20,td.icon20,div.icon20 td:hover{ background:url(images/icon.png) no-repeat -180px -20px;}
#brush ul li.icon21,td.icon21,div.icon21 td:hover{ background:url(images/icon.png) no-repeat -200px -20px;}
#brush ul li.icon22,td.icon22,div.icon22 td:hover{ background:url(images/icon.png) no-repeat -0px -40px;}
#brush ul li.icon23,td.icon23,div.icon23 td:hover{ background:url(images/icon.png) no-repeat -20px -40px;}
#brush ul li.icon24,td.icon24,div.icon24 td:hover{ background:url(images/icon.png) no-repeat -40px -40px;}
#brush ul li.icon25,td.icon25,div.icon25 td:hover{ background:url(images/icon.png) no-repeat -60px -40px;}
#brush ul li.icon26,td.icon26,div.icon26 td:hover{ background:url(images/icon.png) no-repeat -80px -40px;}
#brush ul li.icon27,td.icon27,div.icon27 td:hover{ background:url(images/icon.png) no-repeat -100px -40px;}
#brush ul li.icon28,td.icon28,div.icon28 td:hover{ background:url(images/icon.png) no-repeat -120px -40px;}
#brush ul li.icon29,td.icon29,div.icon29 td:hover{ background:url(images/icon.png) no-repeat -140px -40px;}
#brush ul li.icon30,td.icon30,div.icon30 td:hover{ background:url(images/icon.png) no-repeat -160px -40px;}
#brush ul li.icon31,td.icon31,div.icon31 td:hover{ background:url(images/icon.png) no-repeat -180px -40px;}
#brush ul li.icon32,td.icon32,div.icon32 td:hover{ background:url(images/icon.png) no-repeat -200px -40px;}
#brush ul li.icon33,td.icon33,div.icon33 td:hover{ background:url(images/icon.png) no-repeat -0px -60px;}
#brush ul li.icon34,td.icon34,div.icon34 td:hover{ background:url(images/icon.png) no-repeat -20px -60px;}
#brush ul li.icon35,td.icon35,div.icon35 td:hover{ background:url(images/icon.png) no-repeat -40px -60px;}
#brush ul li.icon36,td.icon36,div.icon36 td:hover{ background:url(images/icon.png) no-repeat -60px -60px;}
#brush ul li.icon37,td.icon37,div.icon37 td:hover{ background:url(images/icon.png) no-repeat -80px -60px;}
#brush ul li.icon38,td.icon38,div.icon38 td:hover{ background:url(images/icon.png) no-repeat -100px -60px;}
#brush ul li.icon39,td.icon39,div.icon39 td:hover{ background:url(images/icon.png) no-repeat -120px -60px;}
#brush ul li.icon40,td.icon40,div.icon40 td:hover{ background:url(images/icon.png) no-repeat -140px -60px;}
#brush ul li.icon41,td.icon41,div.icon41 td:hover{ background:url(images/icon.png) no-repeat -160px -60px;}
#brush ul li.icon42,td.icon42,div.icon42 td:hover{ background:url(images/icon.png) no-repeat -180px -60px;}
#brush ul li.icon43,td.icon43,div.icon43 td:hover{ background:url(images/icon.png) no-repeat -200px -60px;}
#brush ul li.icon44,td.icon44,div.icon44 td:hover{ background:url(images/icon.png) no-repeat -0px -80px;}
#brush ul li.icon45,td.icon45,div.icon45 td:hover{ background:url(images/icon.png) no-repeat -20px -80px;}
#brush ul li.icon46,td.icon46,div.icon46 td:hover{ background:url(images/icon.png) no-repeat -40px -80px;}
#brush ul li.icon47,td.icon47,div.icon47 td:hover{ background:url(images/icon.png) no-repeat -60px -80px;}
#brush ul li.icon48,td.icon48,div.icon48 td:hover{ background:url(images/icon.png) no-repeat -80px -80px;}
#brush ul li.icon49,td.icon49,div.icon49 td:hover{ background:url(images/icon.png) no-repeat -100px -80px;}
#brush ul li.icon50,td.icon50,div.icon50 td:hover{ background:url(images/icon.png) no-repeat -120px -80px;}
#brush ul li.icon51,td.icon51,div.icon51 td:hover{ background:url(images/icon.png) no-repeat -140px -80px;}
#brush ul li.icon52,td.icon52,div.icon52 td:hover{ background:url(images/icon.png) no-repeat -160px -80px;}
#brush ul li.icon53,td.icon53,div.icon53 td:hover{ background:url(images/icon.png) no-repeat -180px -80px;}
#brush ul li.icon54,td.icon54,div.icon54 td:hover{ background:url(images/icon.png) no-repeat -200px -80px;}
#brush ul li.icon55,td.icon55,div.icon55 td:hover{ background:url(images/icon.png) no-repeat -0px -100px;}
#brush ul li.icon56,td.icon56,div.icon56 td:hover{ background:url(images/icon.png) no-repeat -20px -100px;}
#brush ul li.icon57,td.icon57,div.icon57 td:hover{ background:url(images/icon.png) no-repeat -40px -100px;}
#brush ul li.icon58,td.icon58,div.icon58 td:hover{ background:url(images/icon.png) no-repeat -60px -100px;}
#brush ul li.icon59,td.icon59,div.icon59 td:hover{ background:url(images/icon.png) no-repeat -80px -100px;}
#brush ul li.icon60,td.icon60,div.icon60 td:hover{ background:url(images/icon.png) no-repeat -100px -100px;}
#brush ul li.icon61,td.icon61,div.icon61 td:hover{ background:url(images/icon.png) no-repeat -120px -100px;}
#brush ul li.icon62,td.icon62,div.icon62 td:hover{ background:url(images/icon.png) no-repeat -140px -100px;}
#brush ul li.icon63,td.icon63,div.icon63 td:hover{ background:url(images/icon.png) no-repeat -160px -100px;}
#brush ul li.icon64,td.icon64,div.icon64 td:hover{ background:url(images/icon.png) no-repeat -180px -100px;}
#brush ul li.icon65,td.icon65,div.icon65 td:hover{ background:url(images/icon.png) no-repeat -200px -100px;}
#brush ul li.icon66,td.icon66,div.icon66 td:hover{ background:url(images/icon.png) no-repeat -0px -120px;}
#brush ul li.icon67,td.icon67,div.icon67 td:hover{ background:url(images/icon.png) no-repeat -20px -120px;}
#brush ul li.icon68,td.icon68,div.icon68 td:hover{ background:url(images/icon.png) no-repeat -40px -120px;}
#brush ul li.icon69,td.icon69,div.icon69 td:hover{ background:url(images/icon.png) no-repeat -60px -120px;}
#brush ul li.icon70,td.icon70,div.icon70 td:hover{ background:url(images/icon.png) no-repeat -80px -120px;}
#brush ul li.icon71,td.icon71,div.icon71 td:hover{ background:url(images/icon.png) no-repeat -100px -120px;}
#brush ul li.icon72,td.icon72,div.icon72 td:hover{ background:url(images/icon.png) no-repeat -120px -120px;}
#brush ul li.icon73,td.icon73,div.icon73 td:hover{ background:url(images/icon.png) no-repeat -140px -120px;}
#brush ul li.icon74,td.icon74,div.icon74 td:hover{ background:url(images/icon.png) no-repeat -160px -120px;}
#brush ul li.icon75,td.icon75,div.icon75 td:hover{ background:url(images/icon.png) no-repeat -180px -120px;}
#brush ul li.icon76,td.icon76,div.icon76 td:hover{ background:url(images/icon.png) no-repeat -200px -120px;}
#brush ul li.icon77,td.icon77,div.icon77 td:hover{ background:url(images/icon.png) no-repeat -0px -140px;}
#brush ul li.icon78,td.icon78,div.icon78 td:hover{ background:url(images/icon.png) no-repeat -20px -140px;}
#brush ul li.icon79,td.icon79,div.icon79 td:hover{ background:url(images/icon.png) no-repeat -40px -140px;}
#brush ul li.icon80,td.icon80,div.icon80 td:hover{ background:url(images/icon.png) no-repeat -60px -140px;}
#brush ul li.icon81,td.icon81,div.icon81 td:hover{ background:url(images/icon.png) no-repeat -80px -140px;}
#brush ul li.icon82,td.icon82,div.icon82 td:hover{ background:url(images/icon.png) no-repeat -100px -140px;}
#brush ul li.icon83,td.icon83,div.icon83 td:hover{ background:url(images/icon.png) no-repeat -120px -140px;}
#brush ul li.icon84,td.icon84,div.icon84 td:hover{ background:url(images/icon.png) no-repeat -140px -140px;}
#brush ul li.icon85,td.icon85,div.icon85 td:hover{ background:url(images/icon.png) no-repeat -160px -140px;}
#brush ul li.icon86,td.icon86,div.icon86 td:hover{ background:url(images/icon.png) no-repeat -180px -140px;}
#brush ul li.icon87,td.icon87,div.icon87 td:hover{ background:url(images/icon.png) no-repeat -200px -140px;}
#brush ul li.icon88,td.icon88,div.icon88 td:hover{ background:url(images/icon.png) no-repeat -0px -160px;}
#brush ul li.icon89,td.icon89,div.icon89 td:hover{ background:url(images/icon.png) no-repeat -20px -160px;}
#brush ul li.icon90,td.icon90,div.icon90 td:hover{ background:url(images/icon.png) no-repeat -40px -160px;}
#brush ul li.icon91,td.icon91,div.icon91 td:hover{ background:url(images/icon.png) no-repeat -60px -160px;}
#brush ul li.icon92,td.icon92,div.icon92 td:hover{ background:url(images/icon.png) no-repeat -80px -160px;}
#brush ul li.icon93,td.icon93,div.icon93 td:hover{ background:url(images/icon.png) no-repeat -100px -160px;}
#brush ul li.icon94,td.icon94,div.icon94 td:hover{ background:url(images/icon.png) no-repeat -120px -160px;}
#brush ul li.icon95,td.icon95,div.icon95 td:hover{ background:url(images/icon.png) no-repeat -140px -160px;}
#brush ul li.icon96,td.icon96,div.icon96 td:hover{ background:url(images/icon.png) no-repeat -160px -160px;}
#brush ul li.icon97,td.icon97,div.icon97 td:hover{ background:url(images/icon.png) no-repeat -180px -160px;}
#brush ul li.icon98,td.icon98,div.icon98 td:hover{ background:url(images/icon.png) no-repeat -200px -160px;}
#brush ul li.icon99,td.icon99,div.icon99 td:hover{ background:url(images/icon.png) no-repeat -0px -180px;}
#brush ul li.icon100,td.icon100,div.icon100 td:hover{ background:url(images/icon.png) no-repeat -20px -180px;}
#brush ul li.icon101,td.icon101,div.icon101 td:hover{ background:url(images/icon.png) no-repeat -40px -180px;}
#brush ul li.icon102,td.icon102,div.icon102 td:hover{ background:url(images/icon.png) no-repeat -60px -180px;}
#brush ul li.icon103,td.icon103,div.icon103 td:hover{ background:url(images/icon.png) no-repeat -80px -180px;}
#brush ul li.icon104,td.icon104,div.icon104 td:hover{ background:url(images/icon.png) no-repeat -100px -180px;}
#brush ul li.icon105,td.icon105,div.icon105 td:hover{ background:url(images/icon.png) no-repeat -120px -180px;}
#brush ul li.icon106,td.icon106,div.icon106 td:hover{ background:url(images/icon.png) no-repeat -140px -180px;}
#brush ul li.icon107,td.icon107,div.icon107 td:hover{ background:url(images/icon.png) no-repeat -160px -180px;}
#brush ul li.icon108,td.icon108,div.icon108 td:hover{ background:url(images/icon.png) no-repeat -180px -180px;}
#brush ul li.icon109,td.icon109,div.icon109 td:hover{ background:url(images/icon.png) no-repeat -200px -180px;}
#brush ul li.icon110,td.icon110,div.icon110 td:hover{ background:url(images/icon.png) no-repeat -0px -200px;}
#brush ul li.icon111,td.icon111,div.icon111 td:hover{ background:url(images/icon.png) no-repeat -20px -200px;}
#brush ul li.icon112,td.icon112,div.icon112 td:hover{ background:url(images/icon.png) no-repeat -40px -200px;}
#brush ul li.icon113,td.icon113,div.icon113 td:hover{ background:url(images/icon.png) no-repeat -60px -200px;}
#brush ul li.icon114,td.icon114,div.icon114 td:hover{ background:url(images/icon.png) no-repeat -80px -200px;}
#brush ul li.icon115,td.icon115,div.icon115 td:hover{ background:url(images/icon.png) no-repeat -100px -200px;}
#brush ul li.icon116,td.icon116,div.icon116 td:hover{ background:url(images/icon.png) no-repeat -120px -200px;}
#brush ul li.icon117,td.icon117,div.icon117 td:hover{ background:url(images/icon.png) no-repeat -140px -200px;}
#brush ul li.icon118,td.icon118,div.icon118 td:hover{ background:url(images/icon.png) no-repeat -160px -200px;}