From 6b10611d1b5efd2bce1cf94fbc832b4d4dd95f88 Mon Sep 17 00:00:00 2001
From: ChanMyeong <dece24@gmail.com>
Date: Tue, 27 Sep 2011 14:42:01 +0000
Subject: [PATCH] Admin HTML Markup Clean.

git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@9378 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/admin/tpl/css/admin.css               |   8 +-
 modules/admin/tpl/css/admin.min.css           |   8 +-
 modules/document/lang/lang.xml                |   4 +
 modules/document/tpl/category_info.html       | 115 +++++++++---------
 modules/document/tpl/category_list.html       |   2 +-
 modules/document/tpl/css/document.css         |  20 ---
 modules/document/tpl/header.html              |  15 +--
 modules/document/tpl/preview_page.html        |   2 +-
 modules/document/tpl/print_page.html          |  21 ++--
 modules/document/tpl/saved_list_popup.html    |   9 +-
 modules/page/tpl/content.html                 |  14 +--
 modules/page/tpl/mcontent.html                |  15 ++-
 modules/widget/tpl/css/widget.css             | 110 ++++++++---------
 modules/widget/tpl/js/widget.js               |  12 +-
 modules/widget/tpl/widget_layer.html          |  65 +++++-----
 .../widget_style_generate_code_in_page.html   |   4 +-
 16 files changed, 194 insertions(+), 230 deletions(-)
 delete mode 100644 modules/document/tpl/css/document.css

diff --git a/modules/admin/tpl/css/admin.css b/modules/admin/tpl/css/admin.css
index 68c38d1fc..9399acb18 100644
--- a/modules/admin/tpl/css/admin.css
+++ b/modules/admin/tpl/css/admin.css
@@ -230,9 +230,13 @@ body>.popup{margin:1em}
 html.modalContainer,
 body.modalContainer{_height:100%;_width:100%} /* IE6 only */ 
 /* Layer */
-.x .layer{position:absolute;background:#fff;padding:0 1em;*padding:1em;border:8px solid #ddd;z-index:2;zoom:1;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5pxbox-shadow:0 0 6px #666;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)}
+.x .layer,
+.x.layer{position:absolute;background:#fff;padding:0 1em;*padding:1em;border:8px solid #ddd;z-index:2;zoom:1;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5pxbox-shadow:0 0 6px #666;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)}
 .x .layer h2{font-size:14px}
-.x .layer ul, .layer ol, .layer .lined, .layer .table{margin-bottom:1em}
+.x .layer ul, 
+.x .layer ol, 
+.x .layer .lined, 
+.x .layer .table{margin-bottom:1em}
 .x .layerClose{position:absolute;right:-8px;top:-8px;border:0;background:#ddd;padding:0;width:28px;height:28px;font-size:14px;font-weight:bold;cursor:pointer;color:#999;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
 .x .layerBlur{position:absolute;top:0;right:0;border:0;background:none;padding:0;width:1px;height:1px;overflow:hidden}
 /* H2 Anchor */
diff --git a/modules/admin/tpl/css/admin.min.css b/modules/admin/tpl/css/admin.min.css
index 68c38d1fc..9399acb18 100644
--- a/modules/admin/tpl/css/admin.min.css
+++ b/modules/admin/tpl/css/admin.min.css
@@ -230,9 +230,13 @@ body>.popup{margin:1em}
 html.modalContainer,
 body.modalContainer{_height:100%;_width:100%} /* IE6 only */ 
 /* Layer */
-.x .layer{position:absolute;background:#fff;padding:0 1em;*padding:1em;border:8px solid #ddd;z-index:2;zoom:1;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5pxbox-shadow:0 0 6px #666;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)}
+.x .layer,
+.x.layer{position:absolute;background:#fff;padding:0 1em;*padding:1em;border:8px solid #ddd;z-index:2;zoom:1;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5pxbox-shadow:0 0 6px #666;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)}
 .x .layer h2{font-size:14px}
-.x .layer ul, .layer ol, .layer .lined, .layer .table{margin-bottom:1em}
+.x .layer ul, 
+.x .layer ol, 
+.x .layer .lined, 
+.x .layer .table{margin-bottom:1em}
 .x .layerClose{position:absolute;right:-8px;top:-8px;border:0;background:#ddd;padding:0;width:28px;height:28px;font-size:14px;font-weight:bold;cursor:pointer;color:#999;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
 .x .layerBlur{position:absolute;top:0;right:0;border:0;background:none;padding:0;width:1px;height:1px;overflow:hidden}
 /* H2 Anchor */
diff --git a/modules/document/lang/lang.xml b/modules/document/lang/lang.xml
index 31d5eaaab..e17f77fcf 100644
--- a/modules/document/lang/lang.xml
+++ b/modules/document/lang/lang.xml
@@ -850,4 +850,8 @@
 		<value xml:lang="ko"><![CDATA[분류를 선택하세요.]]></value>
 		<value xml:lang="en"><![CDATA[Select a category.]]></value>
 	</item>
+	<item name="category_description">
+		<value xml:lang="ko"><![CDATA[카테고리 설명]]></value>
+		<value xml:lang="en"><![CDATA[Category Description]]></value>
+	</item>
 </lang>
\ No newline at end of file
diff --git a/modules/document/tpl/category_info.html b/modules/document/tpl/category_info.html
index ce7e49275..26d094672 100644
--- a/modules/document/tpl/category_info.html
+++ b/modules/document/tpl/category_info.html
@@ -1,66 +1,61 @@
 
 <input type="hidden" name="category_srl" value="{$category_info->category_srl}" />
 <input type="hidden" name="parent_srl" value="{$category_info->parent_srl}" />
-
-<div class="layer boxModelController" style="display:block">
-
-    <h3 class="h3">{$lang->category}</h3>
-    <button class="xButton" type="button" onclick="hideCategoryInfo();return false" ><span>{$lang->cmd_close}</span></button>
-
-    <div class="layerBody">
-		<div class="table">
-        	<table width="100%" border="1" cellspacing="0">
-        <!--@if($category_info->parent_category_title)-->
-        <tr>
-            <th scope="row">{$lang->parent_category_title}</th>
-            <td >{$category_info->parent_category_title}</td>
-        </tr>
-        <!--@end-->
-        <tr>
-            <th scope="row">{$lang->category_title}</th>
-            <td>
-                <input type="text" name="category_title" id="category_name" value="{$category_info->title}"  />
-                <a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','category_name')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row">{$lang->category_color}</th>
-            <td>
-                <input type="text" name="category_color" value="{htmlspecialchars($category_info->color)}" class="color-indicator inputTypeText" />
-                <p>{$lang->about_category_color}</p>
-            </td>
-        </tr>
-        
-        <tr>
-            <th scope="row">{$lang->category_description}</th>
-            <td >
-            	<textarea name="category_description" id="category_description" >{htmlspecialchars($category_info->description)}</textarea>
-            	<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','category_description')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
-            	<p>{$lang->about_category_description}</p>				
-            </td>
-        </tr>
-        
-        <tr>
-            <th scope="row">{$lang->expand}</th>
-            <td>
-                <input type="checkbox" name="expand" value="Y" <!--@if($category_info->expand=="Y")-->checked="checked"<!--@end--> class="checkbox" />
-                <p>{$lang->about_expand}</p>
-            </td>
-        </tr>
-        <tr >
-            <th scope="row2">{$lang->category_group_srls} <input type="checkbox" onclick="XE.checkboxToggleAll('group_srls[]'); return false;" /></th>
-            <td>
-                <!--@foreach($group_list as $key=>$val)-->
-                <div><input type="checkbox" name="group_srls[]" value="{$key}" id="group_{$key}" <!--@if(is_array($category_info->group_srls)&&in_array($key, $category_info->group_srls))-->checked="checked"<!--@end--> class="checkbox" /> <label for="group_{$key}">{$val->title}</label></div>
-                <!--@end-->
-                <p>{$lang->about_category_group_srls}</p>
-            </td>
-        </tr>
-        </table>
-		</div>
-		<div class="btnArea">
-			<span class="btn"><input type="submit" value="{$lang->cmd_save}" /></span>
-		</div>
+<div class="layer">
+	<button type="button" class="layerClose" title="Close this layer." onclick="jQuery(this).closest('#category_info').hide();">X</button>
+	<h3 class="h3">{$lang->category}</h3>
+	<div class="table">
+		<table width="100%" border="1" cellspacing="0">
+			<!--@if($category_info->parent_category_title)-->
+			<tr>
+				<th scope="row">{$lang->parent_category_title}</th>
+				<td >{$category_info->parent_category_title}</td>
+			</tr>
+			<!--@end-->
+			<tr>
+				<th scope="row">{$lang->category_title}</th>
+				<td>
+					<input type="text" name="category_title" id="category_name" value="{$category_info->title}"  />
+					<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','category_name')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
+				</td>
+			</tr>
+			<tr>
+				<th scope="row">{$lang->category_color}</th>
+				<td>
+					<input type="text" name="category_color" value="{htmlspecialchars($category_info->color)}" class="color-indicator inputTypeText" />
+					<p>{$lang->about_category_color}</p>
+				</td>
+			</tr>
+			
+			<tr>
+				<th scope="row">{$lang->category_description}</th>
+				<td >
+					<textarea name="category_description" id="category_description" >{htmlspecialchars($category_info->description)}</textarea>
+					<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','category_description')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
+					<p>{$lang->about_category_description}</p>				
+				</td>
+			</tr>
+			
+			<tr>
+				<th scope="row">{$lang->expand}</th>
+				<td>
+					<input type="checkbox" name="expand" value="Y" <!--@if($category_info->expand=="Y")-->checked="checked"<!--@end--> class="checkbox" />
+					<p>{$lang->about_expand}</p>
+				</td>
+			</tr>
+			<tr >
+				<th scope="row2">{$lang->category_group_srls}</th>
+				<td>
+					<!--@foreach($group_list as $key=>$val)-->
+					<div><input type="checkbox" name="group_srls[]" value="{$key}" id="group_{$key}" <!--@if(is_array($category_info->group_srls)&&in_array($key, $category_info->group_srls))-->checked="checked"<!--@end--> class="checkbox" /> <label for="group_{$key}">{$val->title}</label></div>
+					<!--@end-->
+					<p>{$lang->about_category_group_srls}</p>
+				</td>
+			</tr>
+		</table>
+	</div>
+	<div class="btnArea">
+		<span class="btn"><input type="submit" value="{$lang->cmd_save}" /></span>
 	</div>
 </div>
 <script type="text/javascript">
diff --git a/modules/document/tpl/category_list.html b/modules/document/tpl/category_list.html
index 45e0331b5..d957a7df8 100644
--- a/modules/document/tpl/category_list.html
+++ b/modules/document/tpl/category_list.html
@@ -20,7 +20,7 @@
 <input type="hidden" name="module_srl" value="{$module_info->module_srl}" />
 <input type="hidden" name="xml_file" value="{$category_xml_file}" />
 <input type="hidden" name="success_return_url" value="{getRequestUriByServerEnviroment()}" />
-	<div id="category_info"></div>
+	<div id="category_info" class="x" style="position:absolute"></div>
 </form>
 <div id="menu">
 	<ul class="simpleTree">
diff --git a/modules/document/tpl/css/document.css b/modules/document/tpl/css/document.css
deleted file mode 100644
index fb3c10560..000000000
--- a/modules/document/tpl/css/document.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@charset "utf-8";
-
-ul.document_list_box { margin:0; padding:0; list-style:none; }
-.document_list_box { height:160px; overflow-y:scroll; overflow-x:hidden;}
-.document_list { margin-top:.5em; overflow:hidden; white-space:nowrap; clear:both;}
-.document_list input { float:left; margin-right:10px; }
-.document_list address { float:left; width:100px; margin-right:10px; overflow:hidden; white-space:nowrap;}
-.document_list .document_title { }
-
-div.printContent { padding:20px; }
-input.btnSubmit { background:url("../images/buttonInsert.gif") no-repeat 3px 2px; line-height:150%; height:23px; padding:2px 3px 2px 18px; border:1px solid; border-color:#d8d8d8 #a6a6a6 #a6a6a6 #d8d8d8; }
-
-#menu {margin:10px; }
-
-.menuListZone { table-layout:fixed; }
-.menuListZone td { vertical-align:top; }
-.menuListZone td.category_zone { padding-right:10px; }
-
-#category_list { padding:.5em 0 .5em 0; margin-bottom:2em; width:250px; overflow:hidden; float:left; position:absolute; left:10px;}
-#category_info { width:560px; position:absolute; margin:0 auto; left:0; right:0; z-index:9999;}
diff --git a/modules/document/tpl/header.html b/modules/document/tpl/header.html
index 010c7bb6b..58d89c400 100644
--- a/modules/document/tpl/header.html
+++ b/modules/document/tpl/header.html
@@ -1,12 +1,9 @@
 <load target="js/document_admin.js" usecdn="true" />
-
-<h3 class="xeAdmin">{$lang->document} <span class="gray">{$lang->cmd_management}</span></h3>
-
-<div class="header4 gap1">
-    <ul class="localNavigation">
-        <li <!--@if($act=='dispDocumentAdminList')-->class="on"<!--@end-->><a href="{getUrl('act','dispDocumentAdminList')}">{$lang->document_list}</a></li>
-        <li <!--@if($act=='dispDocumentAdminConfig')-->class="on"<!--@end-->><a href="{getUrl('act','dispDocumentAdminConfig')}">{$lang->cmd_module_config}</a></li>
-        <li <!--@if($act=='dispDocumentAdminDeclared')-->class="on"<!--@end-->><a href="{getUrl('act','dispDocumentAdminDeclared')}">{$lang->cmd_declared_list}</a></li>
-        <!--li <!--@if($act=='dispDocumentAdminTrashList')-->class="on"<!--@end-->><a href="{getUrl('act','dispDocumentAdminTrashList')}">{$lang->cmd_trash}</a></li-->
+<h3 class="h3">{$lang->document} {$lang->cmd_management}</h3>
+<div class="cnb">
+    <ul>
+        <li <!--@if($act=='dispDocumentAdminList')-->class="active"<!--@end-->><a href="{getUrl('act','dispDocumentAdminList')}">{$lang->document_list}</a></li>
+        <li <!--@if($act=='dispDocumentAdminConfig')-->class="active"<!--@end-->><a href="{getUrl('act','dispDocumentAdminConfig')}">{$lang->cmd_module_config}</a></li>
+        <li <!--@if($act=='dispDocumentAdminDeclared')-->class="active"<!--@end-->><a href="{getUrl('act','dispDocumentAdminDeclared')}">{$lang->cmd_declared_list}</a></li>
     </ul>
 </div>
diff --git a/modules/document/tpl/preview_page.html b/modules/document/tpl/preview_page.html
index ecc135ec6..e572be847 100644
--- a/modules/document/tpl/preview_page.html
+++ b/modules/document/tpl/preview_page.html
@@ -2,5 +2,5 @@
 <load target="./css/document.css" usecdn="true" />
 {$content}
 <div class="btnArea">
-	<button type="button" onclick="window.close();return false;">{$lang->cmd_close}</button>
+	<span class="btn"><button type="button" onclick="window.close();return false;">{$lang->cmd_close}</button></span>
 </div>
diff --git a/modules/document/tpl/print_page.html b/modules/document/tpl/print_page.html
index 02fa63073..19e3dc111 100644
--- a/modules/document/tpl/print_page.html
+++ b/modules/document/tpl/print_page.html
@@ -1,17 +1,14 @@
 <load target="./js/document_admin.js" usecdn="true" />
 <load target="./css/document.css" usecdn="true" />
-<div class="printContent">
-	<h1 class="h1">{$oDocument->getTitleText()}</h1>
-    <a href="#popup_menu_area" class="member_{$oDocument->get('member_srl')}">{$oDocument->get('nick_name')}</a>
-    {$oDocument->getRegdate()}
-    <!--@if($oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted()) )-->
-    <!--@foreach($oDocument->getExtraVars() as $key => $val)-->    
-	{$val->name}: {$val->getValueHtml()}
-    <!--@end-->
-	<!--@end-->    
-	{$oDocument->getContent(false, false)} 
-</div>
-
+<h1 class="h1">{$oDocument->getTitleText()}</h1>
+<a href="#popup_menu_area" class="member_{$oDocument->get('member_srl')}">{$oDocument->get('nick_name')}</a>
+{$oDocument->getRegdate()}
+<!--@if($oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted()) )-->
+<!--@foreach($oDocument->getExtraVars() as $key => $val)-->    
+{$val->name}: {$val->getValueHtml()}
+<!--@end-->
+<!--@end-->    
+{$oDocument->getContent(false, false)} 
 <script type="text/javascript">
 //<![CDATA[
     jQuery(window).load(function() { window.print(); } );
diff --git a/modules/document/tpl/saved_list_popup.html b/modules/document/tpl/saved_list_popup.html
index 1ac65ad5a..a67bf7e02 100644
--- a/modules/document/tpl/saved_list_popup.html
+++ b/modules/document/tpl/saved_list_popup.html
@@ -6,17 +6,16 @@
 	<caption>Total : {number_format($total_count)}, Page {number_format($page)}/{number_format($total_page)}</caption>
 <thead>
 	<tr>
-		<th class="title"><div>{$lang->date}</div></th>
-		<th class="title"><div>{$lang->title}</div></th>
-		<th class="title"><div>{$lang->cmd_select}</div></th>
+		<th class="title">{$lang->date}</th>
+		<th class="title">{$lang->title}</th>
+		<th class="title">{$lang->cmd_select}</th>
 	</tr>
 </thead>
 <tbody>
 	<!--@foreach($document_list as $no => $val)-->
 	<tr>
 		<td>{$val->getRegdate("Y-m-d H:i:s")}</td>
-		<td >
-			<div><a href="#" onclick="jQuery('#saved_document_{$val->document_srl}').toggle(); setFixedPopupSize(); return false;">{$val->getTitle()}</a></div>
+		<td > <a href="#" onclick="jQuery('#saved_document_{$val->document_srl}').toggle(); setFixedPopupSize(); return false;">{$val->getTitle()}</a>
 			<div id="saved_document_{$val->document_srl}" class="saved_content" style="display:none;">{$val->getContent(false)}</div>
 		</td>
 		<td><a href="#" onclick="doDocumentSelect('{$val->document_srl}'); return false;" class="buttonSet buttonActive"><span>{$lang->cmd_select}</span></a></td>
diff --git a/modules/page/tpl/content.html b/modules/page/tpl/content.html
index d580570ab..fb75c500f 100644
--- a/modules/page/tpl/content.html
+++ b/modules/page/tpl/content.html
@@ -1,18 +1,18 @@
-<div>{$page_content}</div>
+{$page_content}
 <!--@if($grant->manager)-->
-    <load target="./js/page_admin.js" usecdn="true" />
-    <div class="tRight gap1 clear">
+	<load target="./js/page_admin.js" usecdn="true" />
+    <div class="btnArea">
 		<!--@if($module_info->page_type == 'WIDGET')-->
-        <a href="#" onclick="doRemoveWidgetCache({$module_info->module_srl}); return false;" class="button blue"><span>{$lang->cmd_remake_cache}</span></a>
+        <span class="btn"><button type="button" onclick="doRemoveWidgetCache({$module_info->module_srl}); return false;">{$lang->cmd_remake_cache}</button></span>
         <!--@end-->
 		<!--@if($logged_info->is_admin=='Y')-->
-        <a href="{getUrl('act','dispPageAdminInfo','module_srl',$module_info->module_srl)}" class="button green"><span>{$lang->cmd_setup}</span></a>
+        <span class="btn"><a href="{getUrl('act','dispPageAdminInfo','module_srl',$module_info->module_srl)}">{$lang->cmd_setup}</a></span>
         <!--@end-->
 		<!--@if($module_info->page_type != 'OUTSIDE')-->
-        <a href="{getUrl('act','dispPageAdminContentModify','document_srl','')}" class="button red"><span>{$lang->cmd_page_modify}</span></a>
+        <span class="btn"><a href="{getUrl('act','dispPageAdminContentModify','document_srl','')}">{$lang->cmd_page_modify}</a></span>
         <!--@end-->
 		<!--@if($module_info->use_mobile =="Y")-->
-        <a href="{getUrl('act','dispPageAdminMobileContent','module_srl',$module_info->module_srl)}" class="button black"><span>Mobile</span></a>
+        <span class="btn"><a href="{getUrl('act','dispPageAdminMobileContent','module_srl',$module_info->module_srl)}">Mobile</a></span>
 		<!--@end-->
     </div>
 <!--@end-->
diff --git a/modules/page/tpl/mcontent.html b/modules/page/tpl/mcontent.html
index 51c35830a..e560ccbd2 100644
--- a/modules/page/tpl/mcontent.html
+++ b/modules/page/tpl/mcontent.html
@@ -1,14 +1,13 @@
-<div>{$page_content}</div>
-
+{$page_content}
 <!--@if($grant->manager)-->
     <load target="./js/page_admin.js" usecdn="true" />
-    <div class="tRight gap1 clear">
-        <a href="#" onclick="doRemoveWidgetCache({$module_info->module_srl}); return false;" class="button blue"><span>{$lang->cmd_remake_cache}</span></a>
+    <div class="btnArea">
+        <span class="btn"><button type="button" onclick="doRemoveWidgetCache({$module_info->module_srl}); return false;">{$lang->cmd_remake_cache}</button></span>
         <!--@if($logged_info->is_admin=='Y')-->
-        <a href="{getUrl('act','dispPageAdminInfo','module_srl',$module_info->module_srl)}" class="button green"><span>{$lang->cmd_setup}</span></a>
+        <span class="btn"><a href="{getUrl('act','dispPageAdminInfo','module_srl',$module_info->module_srl)}">{$lang->cmd_setup}</a></span>
         <!--@end-->
-        <a href="{getUrl('act','dispPageAdminMobileContentModify','document_srl','')}" class="button red"><span>{$lang->cmd_page_modify}</span></a>
-        <a href="{getUrl('act','','module_srl',$module_info->module_srl)}" class="button black"><span>PC</span></a>
-		<p style="color:#777">{$lang->about_mcontent}</p>
+        <span class="btn"><a href="{getUrl('act','dispPageAdminMobileContentModify','document_srl','')}">{$lang->cmd_page_modify}</a></span>
+        <span class="btn"><a href="{getUrl('act','','module_srl',$module_info->module_srl)}">PC</a></span>
+		<p>{$lang->about_mcontent}</p>
     </div>
 <!--@end-->
diff --git a/modules/widget/tpl/css/widget.css b/modules/widget/tpl/css/widget.css
index bdb66f1fc..d75c195c1 100644
--- a/modules/widget/tpl/css/widget.css
+++ b/modules/widget/tpl/css/widget.css
@@ -1,62 +1,50 @@
 @charset "utf-8";
-
-.widget_title { border:1px solid #DDDDDD; margin:10px 5px 5px 0; padding:3px; }
-.widget_mid_list { margin:0 0 5px 10px; }
-.widget_description { color:#AAAAAA; border-top:1px dotted #EEEEEE; margin:5px 0 0 0; padding:5px 0 0 0; }
-#colorset_area { margin-top:.5em; }
-
-#colorset_area .header { float:left; margin-right:.5em; padding-top:.2em;}
-#colorset_area .footer { float:left; }
-
-#zonePageContent { overflow:hidden; width:100%; padding:none !important; margin:none !important;}
-
-.pageAddContent { width:700px; }
-
-.widgetOutput { float:left; cursor:move; z-index:998; overflow:hidden; position:relative; width:100%; }
-
-.widgetOutput .widgetBorder { border:1px solid #C7DBE9; z-index:999; }
-.widgetOutput .widgetBoxBorder { border:1px solid #D2E9C7; z-index:999; }
-
-.widgetOutput .widgetResize { background:transparent url("../images/btn_resize.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:1px; right:1px; cursor:pointer; z-index:1000;}
-.widgetOutput .widgetResizeLeft { background:transparent url("../images/btn_resize_left.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:0; left:1px; cursor:pointer; z-index:1000;}
-.widgetOutput .widgetBoxResize { background:transparent url("../images/btn_resize.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:1px; right:1px; cursor:pointer; z-index:1000;}
-.widgetOutput .widgetBoxResizeLeft { background:transparent url("../images/btn_resize_left.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:0; left:1px; cursor:pointer; z-index:1000;}
-
-.widgetButtons { z-index:9999; overflow:hidden; *zoom:1; float:left; padding:3px; position:absolute; visibility:hidden;}
-#widgetButton { background-color:#C7DBE9;left:0; top:0;}
-#widgetBoxButton { background-color:#D2E9C7; right:0; top:0;}
-.widgetButtons div { float:left; }
-.widgetButtons .widgetStyle { background:transparent url("../images/widgetstyle_setup.gif") no-repeat 1px 1px; width:14px; height:14px;  cursor:pointer; z-index:1000;}
-.widgetButtons .widgetSetup { background:transparent url("../images/widget_setup.gif") no-repeat 1px 1px; width:14px; height:14px;  cursor:pointer; z-index:1000;}
-.widgetButtons .widgetCopy { background:transparent url("../images/widget_copy.gif") no-repeat 1px 1px; width:14px; height:14px;  cursor:pointer; z-index:1000;}
-.widgetButtons .widgetSize { background:transparent url("../images/widget_size.gif") no-repeat 1px 1px; width:14px; height:14px;  cursor:pointer; z-index:1000;}
-.widgetButtons .widgetRemove { background:transparent url("../images/widget_remove.gif") no-repeat 1px 1px; width:14px; height:14px;  cursor:pointer; z-index:1000;}
-.widgetButtons .widgetBoxCopy { background:transparent url("../images/widget_copy.gif") no-repeat 1px 1px; width:14px; height:14px; cursor:pointer; z-index:1000;}
-.widgetButtons .widgetBoxSize { background:transparent url("../images/widget_size.gif") no-repeat 1px 1px; width:14px; height:14px; cursor:pointer; z-index:1000;}
-.widgetButtons .widgetBoxRemove { background:transparent url("../images/widget_remove.gif") no-repeat 1px 1px; width:14px; height:14px; cursor:pointer; z-index:1000;}
-
-#pageSizeLayer { width:500px; overflow:hidden; border:1px solid #888888; background:#FFFFFF; z-index:2000; position:absolute; }
-#pageSizeLayer table { border:0; width:100%; table-layout:fixed; }
-#pageSizeLayer table th { padding:4px 0 4px 0; background-color:#DEDEDE; text-align:center; color:#888888;}
-#pageSizeLayer table th.line  { border-top:1px dotted #EEEEEE; }
-#pageSizeLayer table td { padding:4px 10px 4px 10px; background-color:#EFEFEF;}
-#pageSizeLayer table td div { margin-bottom:5px; }
-#pageSizeLayer table td.line  { border-top:1px dotted #999999; }
-#pageSizeLayer table td.buttonBox { background-color:#FFFFFF; white-space:nowrap; overflow:hidden; vertical-align:top; text-align:center; border-top:1px solid #888888; color:#DDDDDD;}
-#pageSizeLayer .input { background:#FFFFFF; border:1px solid #AAAAAA; padding:1px; font:8pt verdana; width:60px; }
-#pageSizeLayer .full_input { background:#FFFFFF; border:1px solid #AAAAAA; padding:1px; font:8pt verdana; width:90%; }
-#pageSizeLayer .small_input { background:#FFFFFF; border:1px solid #AAAAAA; padding:1px; font:8pt verdana; width:20px; }
-#pageSizeLayer .color_input { background:#FFFFFF; border:1px solid #AAAAAA; padding:1px; font:8pt verdana; width:44px; }
-#pageSizeLayer .submit { width:90%; border:1px solid #DEDEDE; background-color:#FFFFFF;}
-
-.help { padding:5px 0; background-color:#EFEFEF; border-top:1px solid #CCCCCC; }
-
-ul.midCommand { float:left; margin:0 0 0 10px;; padding:0; *zoom:1; }
-ul.midCommand li { display:block; margin-bottom:5px; list-style:none;}
-
-a.widgetStyle { float:left; margin:0 10px 10px 0; border:1px solid #fff; overflow:hidden; *zoom:1;  width:96px; height:96px; position:relative; text-decoration:none;}
-a.widgetStyle:hover { border:1px dashed #ccc; }
-a.widgetStyle:hover span { display:none; }
-a.widgetStyle.selected { border:1px dashed #999; }
-a.widgetStyle img {width:96px; height:96px; margin:1px; }
-a.widgetStyle span { position:absolute; left:0; bottom:0; display:block; width:96px; background-color:#888; color:#fff; padding:4px 3px 3px 3px; opacity:.8; filter:alpha(opacity=80); text-align:center; font-family:tahoma;}
+.widget_title{border:1px solid #ddd;margin:10px 5px 5px 0;padding:3px}
+.widget_mid_list{margin:0 0 5px 10px}
+.widget_description{color:#aaa;border-top:1px dotted #eee;margin:5px 0 0 0;padding:5px 0 0 0}
+#colorset_area{margin-top:.5em}
+#colorset_area .header{float:left;margin-right:.5em;padding-top:.2em}
+#colorset_area .footer{float:left}
+#zonePageContent{overflow:hidden;width:100%;padding:none !important;margin:none !important}
+.pageAddContent{width:700px}
+.widgetOutput{float:left;cursor:move;z-index:998;overflow:hidden;position:relative;width:100%}
+.widgetOutput .widgetBorder{border:1px dashed #ccc;z-index:999}
+.widgetOutput .widgetBoxBorder{border:1px dashed #ccc;z-index:999}
+.widgetOutput .widgetResize {border:0;background:transparent url("../images/btn_resize.gif") no-repeat left bottom;width:12px;height:12px;position:absolute;bottom:1px;right:1px;cursor:pointer;z-index:1000}
+.widgetOutput .widgetResizeLeft {border:0;background:transparent url("../images/btn_resize_left.gif") no-repeat left bottom;width:12px;height:12px;position:absolute;bottom:0;left:1px;cursor:pointer;z-index:1000}
+.widgetOutput .widgetBoxResize {border:0;background:transparent url("../images/btn_resize.gif") no-repeat left bottom;width:12px;height:12px;position:absolute;bottom:1px;right:1px;cursor:pointer;z-index:1000}
+.widgetOutput .widgetBoxResizeLeft{border:0;background:transparent url("../images/btn_resize_left.gif") no-repeat left bottom;width:12px;height:12px;position:absolute;bottom:0;left:1px;cursor:pointer;z-index:1000}
+.widgetButtons{z-index:9999;overflow:hidden;*zoom:1;float:left;padding:3px;position:absolute;visibility:hidden}
+#widgetButton{background-color:#C7DBE9;left:0;top:0}
+#widgetBoxButton{background-color:#D2E9C7;right:0;top:0}
+.widgetButtons div{float:left}
+.widgetButtons .widgetStyle{background:transparent url("../images/widgetstyle_setup.gif") no-repeat 1px 1px;width:14px;height:14px; cursor:pointer;z-index:1000}
+.widgetButtons .widgetSetup{background:transparent url("../images/widget_setup.gif") no-repeat 1px 1px;width:14px;height:14px; cursor:pointer;z-index:1000}
+.widgetButtons .widgetCopy{background:transparent url("../images/widget_copy.gif") no-repeat 1px 1px;width:14px;height:14px; cursor:pointer;z-index:1000}
+.widgetButtons .widgetSize{background:transparent url("../images/widget_size.gif") no-repeat 1px 1px;width:14px;height:14px; cursor:pointer;z-index:1000}
+.widgetButtons .widgetRemove{background:transparent url("../images/widget_remove.gif") no-repeat 1px 1px;width:14px;height:14px; cursor:pointer;z-index:1000}
+.widgetButtons .widgetBoxCopy{background:transparent url("../images/widget_copy.gif") no-repeat 1px 1px;width:14px;height:14px;cursor:pointer;z-index:1000}
+.widgetButtons .widgetBoxSize{background:transparent url("../images/widget_size.gif") no-repeat 1px 1px;width:14px;height:14px;cursor:pointer;z-index:1000}
+.widgetButtons .widgetBoxRemove{background:transparent url("../images/widget_remove.gif") no-repeat 1px 1px;width:14px;height:14px;cursor:pointer;z-index:1000}
+#pageSizeLayer{width:500px;overflow:hidden;border:1px solid #888;background:#fff;z-index:2000;position:absolute}
+#pageSizeLayer table{border:0;width:100%;table-layout:fixed}
+#pageSizeLayer table th{padding:4px 0 4px 0;background-color:#DEDEDE;text-align:center;color:#888}
+#pageSizeLayer table th.line {border-top:1px dotted #eee}
+#pageSizeLayer table td{padding:4px 10px 4px 10px;background-color:#EFEFEF}
+#pageSizeLayer table td div{margin-bottom:5px}
+#pageSizeLayer table td.line {border-top:1px dotted #999}
+#pageSizeLayer table td.buttonBox{background-color:#fff;white-space:nowrap;overflow:hidden;vertical-align:top;text-align:center;border-top:1px solid #888;color:#ddd}
+#pageSizeLayer .input{background:#fff;border:1px solid #aaa;padding:1px;font:8pt verdana;width:60px}
+#pageSizeLayer .full_input{background:#fff;border:1px solid #aaa;padding:1px;font:8pt verdana;width:90%}
+#pageSizeLayer .small_input{background:#fff;border:1px solid #aaa;padding:1px;font:8pt verdana;width:20px}
+#pageSizeLayer .color_input{background:#fff;border:1px solid #aaa;padding:1px;font:8pt verdana;width:44px}
+#pageSizeLayer .submit{width:90%;border:1px solid #DEDEDE;background-color:#fff}
+.help{padding:5px 0;background-color:#EFEFEF;border-top:1px solid #ccc}
+ul.midCommand{float:left;margin:0 0 0 10px;;padding:0;*zoom:1}
+ul.midCommand li{display:block;margin-bottom:5px;list-style:none}
+a.widgetStyle{display:inline-block;margin:0 10px 10px 0;border:1px solid #fff;overflow:hidden;*zoom:1; width:96px;height:96px;position:relative;text-decoration:none}
+a.widgetStyle:hover{border:1px dashed #ccc}
+a.widgetStyle:hover span{display:none}
+a.widgetStyle.selected{border:1px dashed #999}
+a.widgetStyle img {width:96px;height:96px;margin:1px}
+a.widgetStyle span{position:absolute;left:0;bottom:0;display:block;width:96px;background-color:#888;color:#fff;padding:4px 3px 3px 3px;opacity:.8;filter:alpha(opacity=80);text-align:center;font-family:tahoma}
diff --git a/modules/widget/tpl/js/widget.js b/modules/widget/tpl/js/widget.js
index b9ba21b6c..2bc4e1647 100644
--- a/modules/widget/tpl/js/widget.js
+++ b/modules/widget/tpl/js/widget.js
@@ -137,7 +137,7 @@ function getContentWidgetCode(childObj, widget) {
             if(!value) continue;
             attrs += name+'="'+escape(value)+'" ';
         }
-        return '<img src="./common/img/widget_bg.jpg" class="zbxe_widget_output" widget="widgetContent" style="'+getStyle(childObj)+'" body="'+body+'" document_srl="'+document_srl+'" widget_padding_left="'+getPadding(childObj,'left')+'" widget_padding_right="'+getPadding(childObj, 'right')+'" widget_padding_top="'+getPadding(childObj, 'top')+'" widget_padding_bottom="'+getPadding(childObj,'bottom')+'" '+attrs+' />';
+        return '<img class="zbxe_widget_output" widget="widgetContent" style="'+getStyle(childObj)+'" body="'+body+'" document_srl="'+document_srl+'" widget_padding_left="'+getPadding(childObj,'left')+'" widget_padding_right="'+getPadding(childObj, 'right')+'" widget_padding_top="'+getPadding(childObj, 'top')+'" widget_padding_bottom="'+getPadding(childObj,'bottom')+'" '+attrs+' />';
     }else{
         return '';
     }
@@ -269,10 +269,10 @@ function completeAddContent(ret_obj, response_tags, params, fo_obj) {
 
     var tpl = ''+
         '<div class="widgetOutput" style="'+fo_obj.style.value+'" widget_padding_left="'+fo_obj.widget_padding_left.value+'" widget_padding_right="'+fo_obj.widget_padding_right.value+'" widget_padding_top="'+fo_obj.widget_padding_top.value+'" widget_padding_bottom="'+fo_obj.widget_padding_bottom.value+'" document_srl="'+document_srl+'" widget="widgetContent">'+
-        '<div class="widgetResize"></div>'+
-        '<div class="widgetResizeLeft"></div>'+
+        '<button type="button" class="widgetResize"></button>'+
+        '<button type="button" class="widgetResizeLeft"></button>'+
         '<div class="widgetBorder">'+
-        '<div style="padding:'+fo_obj.widget_padding_top.value+'px '+fo_obj.widget_padding_right.value+'px'+fo_obj.widget_padding_bottom.value+'px'+fo_obj.widget_padding_left.value+'px"></div>'+content+'<div class="clear"></div>'+
+        '<div style="padding:'+fo_obj.widget_padding_top.value+'px '+fo_obj.widget_padding_right.value+'px'+fo_obj.widget_padding_bottom.value+'px'+fo_obj.widget_padding_left.value+'px"></div>'+content+
         '</div>'+
         '<div class="widgetContent" style="display:none;width:1px;height:1px;overflow:hidden;"></div>'+
         '</div>';
@@ -296,8 +296,8 @@ function completeAddContent(ret_obj, response_tags, params, fo_obj) {
 function doAddWidgetBox() {
     var tpl = ''+
     '<div class="widgetOutput" style="float:left;width:100%;height:12px;" widget="widgetBox" >'+
-        '<div class="widgetBoxResize"></div>'+
-        '<div class="widgetBoxResizeLeft"></div>'+
+        '<button type="button" class="widgetBoxResize"></button>'+
+        '<button type="button" class="widgetBoxResizeLeft"></button>'+
         '<div class="widgetBoxBorder">'+
             '<div class="nullWidget" style="width:100%;height:100px;"></div>'+
         '</div>'+
diff --git a/modules/widget/tpl/widget_layer.html b/modules/widget/tpl/widget_layer.html
index 138168a34..7ed9d31ed 100644
--- a/modules/widget/tpl/widget_layer.html
+++ b/modules/widget/tpl/widget_layer.html
@@ -1,7 +1,5 @@
-<div id="tmpPageSizeLayer" class="layer boxModelController">
-<form action="index.php">
-    <h3 class="h3">&nbsp;</h3>
-    <div class="layerBody">
+<div id="tmpPageSizeLayer" class="layer x">
+	<form action="index.php">
 		<div class="table">
 			<table width="100%" border="1" cellspacing="0">
 				<col width="140" />
@@ -13,35 +11,35 @@
 						<select name="widget_align">
 							<option value="left">{$lang->cmd_widget_align_left}</option>
 							<option value="right">{$lang->cmd_widget_align_right}</option>
-							</select>
-						</td>
-					</tr>
+						</select>
+					</td>
+				</tr>
 				<tr>
 					<th class="line">{$lang->cmd_widget_size}</th>
 					<td colspan="2" class="line"><input type="text" name="width" class="input" value="" /> - <input type="text" class="input" name="height" value="" /></td>
-					</tr>
+				</tr>
 				<tr>
 					<th rowspan="3" class="line">{$lang->cmd_widget_margin}</th>
 					<td colspan="2" class="line tCenter"><input type="text" name="margin_top" class="input" value="" />px</td>
-					</tr>
+				</tr>
 				<tr>
 					<td><input type="text" name="margin_left" class="input" value="" />px</td>
 					<td class="tRight"><input type="text" name="margin_right" class="input" value="" />px</td>
-					</tr>
+				</tr>
 				<tr>
 					<td colspan="2" class="tCenter"><input type="text" name="margin_bottom" class="input" value="" />px</td>
-					</tr>
+				</tr>
 				<tr>
 					<th rowspan="3" class="line">{$lang->cmd_widget_padding}</th>
 					<td colspan="2" class="line tCenter"><input type="text" name="padding_top" class="input" value="" />px</td>
-					</tr>
+				</tr>
 				<tr>
 					<td><input type="text" name="padding_left" class="input" value="" />px</td>
 					<td class="tRight"><input type="text" name="padding_right" class="input" value="" />px</td>
-					</tr>
+				</tr>
 				<tr>
 					<td colspan="2" class="tCenter"><input type="text" name="padding_bottom" class="input" value="" />px</td>
-					</tr>
+				</tr>
 				<tr>
 					<th rowspan="3" class="line">{$lang->cmd_widget_border}</th>
 					<td colspan="2" class="tCenter line">
@@ -49,42 +47,42 @@
 						<select name="border_top_type">
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
-							</select>
+						</select>
 						#<input type="text" name="border_top_color" value="" class="color_input" maxlength="6"/>
-						</td>
-					</tr>
+					</td>
+				</tr>
 				<tr>
 					<td>
 						<input type="text" name="border_left_thick" value="" class="small_input" />px
 						<select name="border_left_type">
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
-							</select>
+						</select>
 						#<input type="text" name="border_left_color" value="" class="color_input" maxlength="6"/>
-						</td>
+					</td>
 					<td class="tRight">
 						<input type="text" name="border_right_thick" value="" class="small_input" />px
 						<select name="border_right_type">
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
-							</select>
+						</select>
 						#<input type="text" name="border_right_color" value="" class="color_input" maxlength="6"/>
-						</td>
-					</tr>
+					</td>
+				</tr>
 				<tr>
 					<td colspan="2" class="tCenter">
 						<input type="text" name="border_bottom_thick" value="" class="small_input" />px
 						<select name="border_bottom_type">
 							<option value="solid">{$lang->cmd_widget_border_solid}</option>
 							<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
-							</select>
+						</select>
 						#<input type="text" name="border_bottom_color" value="" class="color_input" maxlength="6"/>
-						</td>
-					</tr>
+					</td>
+				</tr>
 				<tr>
 					<th class="line">{$lang->cmd_widget_background_color}</th>
 					<td colspan="2" class="line"><input type="text" name="background_color" value="" class="input" /></td>
-					</tr>
+				</tr>
 				<tr>
 					<th class="line">{$lang->cmd_widget_background_image_url}</th>
 					<td colspan="2" class="line">
@@ -95,21 +93,20 @@
 								<option value="no-repeat">{$lang->cmd_widget_background_image_no_repeat}</option>
 								<option value="repeat-x">{$lang->cmd_widget_background_image_x_repeat}</option>
 								<option value="repeat-y">{$lang->cmd_widget_background_image_y_repeat}</option>
-								</select>
-							</div>
+							</select>
+						</div>
 						<div>
 							{$lang->cmd_widget_background_image_x} : <input type="text" name="background_x" value="0" class="input" />
-							</div>
+						</div>
 						<div>
 							{$lang->cmd_widget_background_image_y} : <input type="text" name="background_y" value="0" class="input" />
-							</div>
-						</td>
-					</tr>
+						</div>
+					</td>
+				</tr>
 			</table>
 		</div>
 		<div class="btnArea">
 			<span class="btn"><input type="submit" value="{$lang->cmd_save}" /></span>
 		</div>
-	</div>
-</form>
+	</form>
 </div>
diff --git a/modules/widget/tpl/widget_style_generate_code_in_page.html b/modules/widget/tpl/widget_style_generate_code_in_page.html
index 45b727348..547f0aa02 100644
--- a/modules/widget/tpl/widget_style_generate_code_in_page.html
+++ b/modules/widget/tpl/widget_style_generate_code_in_page.html
@@ -12,7 +12,7 @@
 </script>
 
 <div class="x" style="padding: 0 10px;">
-	<h2 class="h2">{$lang->widgetstyle}</h2>
+	<h1 class="h1">{$lang->widgetstyle}</h1>
 
 	<form class="form" action="./" method="post" id="fo_widget">
 		<input type="hidden" name="module_srl" value="{$module_srl}" />
@@ -31,7 +31,7 @@
 		<a loop="$widgetStyle_list => $key, $widgetStyle" cond="$widgetStyle->preview" href="{getUrl('widgetstyle',$widgetStyle->widgetStyle)}" class="widgetStyle <!--@if($widgetStyle->widgetStyle==$widgetstyle)-->selected<!--@end-->"><img src="{getUrl()}{$widgetStyle->preview}" title="{$widgetStyle->title}" /><span>{$widgetStyle->title}</span></a>
 		<block cond="$widgetstyle_info">
 
-			<h3 class="h3">{$widgetstyle_info->title} ver {$widgetstyle_info->version}</h3>
+			<h2 class="h2">{$widgetstyle_info->title} ver {$widgetstyle_info->version}</h2>
 			<ul>
 				<li>
 					<p class="q">{$lang->description}</p>