Issue 2058 fixed. New layout skin(bootstrap.layout) created.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11180 201d5d3c-b55e-5fd7-737f-ddc643e51545

layouts/bootstrap.layout/bootstrap.layout.css

@@ -0,0 +1,105 @@
+@charset "utf-8";
+body{min-width:300px;padding:0 10px}
+body,table,input,textarea,button,select{font-family:돋움,Dotum,Arial,Helvetica,sans-serif}
+@media all and (min-width:768px){
+body{padding:0}
+@font-face{font-family:NG;src:url(../../common/font/NanumGothic.eot);src:local(※),url(../../common/font/NanumGothic.woff) format('woff')}
+body,table,input,textarea,select,button{font-family:나눔고딕,NanumGothic,NG,돋움,Dotum,Arial,Helvetica,sans-serif;font-size:13px}
+}
+h1,h2,h3,h4,h5,h6,th,strong,b{font-weight:600}
+/* Bootstrap Override */
+.x_close{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif}
+.x_btn-link{margin:0;padding:0}
+.x_navbar .x_brand{font-size:14px;color:#fff}
+h1,h2,h3,h4,h5,h6{line-height:1.5}
+h1{font-size:26px}
+h2{font-size:22px}
+h3{font-size:18px}
+h4{font-size:14px}
+h5{font-size:12px}
+h6{font-size:12px;color:#666;text-transform:none}
+/* Common */
+input[type=checkbox],
+input[type=radio]{margin:0}
+/* Layout */
+.header{position:relative;z-index:2;margin:15px 0}
+.body{position:relative;z-index:1;margin:15px 0;zoom:1}
+.body:after{content:"";display:block;clear:both}
+@media all and (min-width:980px){
+.body.sub{padding-left:220px}
+.body.sub>.content{float:right;width:100%;margin-left:-100%}
+.body.sub>.lnb{float:left;width:200px;position:relative;left:-220px}
+}
+.content{outline:0}
+.footer{margin:15px 0}
+.skip>a{height:1px;overflow:hidden;display:block;text-align:center;font-weight:bold;background:#333;margin:-1px 0 0 0;color:#fff;text-decoration:none}
+.skip>a:focus{height:auto;padding:8px 0;border-radius:0 0 4px 4px}
+/* Header */
+.header>.x_row{position:relative}
+.header h1 a{color:#333;font-family:Arial, Helvetica, sans-serif;text-decoration:none}
+/* GNB */
+.gnb.x_navbar .x_dropdown-menu{background:none;margin:0 10px}
+.gnb.x_navbar .x_dropdown-menu a{font-weight:normal}
+.gnb.x_navbar .x_dropdown-menu:before,
+.gnb.x_navbar .x_dropdown-menu:after{content:normal !important}
+.gnb.x_navbar-inverse .x_navbar-inner{background:#444;border-color:#444}
+.gnb.x_navbar-inverse .active .x_dropdown-toggle{background:#111}
+.gnb.x_navbar-inverse .x_dropdown-toggle{color:#fff}
+.gnb.x_navbar-inverse .x_dropdown-menu a{color:#fff}
+.gnb.x_navbar .x_navbar-form{border-color:#666;border-bottom:0;box-shadow:none;padding:10px 0}
+.gnb.x_navbar .x_btn-navbar{margin-right:0}
+@media all and (min-width:980px){
+.gnb.x_navbar{position:relative;z-index:1;margin:5px 0 20px 0}
+.gnb.x_navbar .x_dropdown-toggle{font-weight:bold;padding:10px 20px}
+.gnb.x_navbar .x_dropdown-menu{border-radius:0 0 6px 6px;margin:0}
+.gnb.x_navbar-inverse .x_dropdown-menu{background:#111}
+.gnb.x_navbar .x_navbar-form{padding:0}
+}
+/* Account */
+.account{position:absolute;right:0;bottom:5px;z-index:2;margin:0}
+/* Visual */
+.visual{display:none}
+.visual{display:block;position:relative;width:100%;overflow:hidden;margin:0 0 20px 0;border-radius:5px;overflow:hidden}
+.visual>.list{position:relative;z-index:1;width:100%;zoom:1}
+.visual>.list.count1{width:100%;left:0}
+.visual>.list.count2{width:200%;left:0}
+.visual>.list.count3{width:300%;left:-100%}
+.visual>.list:after{content:"";display:block;clear:both}
+.visual>.list>.item{position:relative;float:left;border-radius:5px;overflow:hidden;text-decoration:none}
+.visual>.list>.item>img{border-radius:5px;width:100%}
+.visual>.list>.item>p{position:absolute;width:86%;height:16px;font-size:16px;line-height:16px;top:50%;margin:-23px 0 0 0;padding:15px 7.1%;background-color:rgba(0, 0, 0, .5);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+@media all and (min-width:481px){
+.visual>.list>.item>p{height:30px;font-size:30px;line-height:30px;padding-top:30px;padding-bottom:30px}
+.visual>.list>.item:before{content:"";display:block;position:absolute;width:33%;height:100%;top:0;background:rgba(0, 0, 0, .25)}
+.body.sub .visual>.list>.item:before{content:normal}
+.visual>.list>.item:hover>p,
+.visual>.list>.item:focus>p{background-color:rgba(0, 0, 0, .75)}
+.visual>.list>.item.i1>p{top:0;border-radius:5px 5px 0 0;margin:0}
+.visual>.list>.item.i1:before{left:0;border-radius:5px 0 0 5px}
+.body.sub .visual>.list>.item.i1>p{border-radius:0;padding-top:15px;padding-bottom:15px;top:50%;margin-top:-30px}
+.visual>.list>.item.i2>p{top:50%;margin-top:-45px;text-align:center}
+.visual>.list>.item.i2:before{left:50%;margin-left:-16.5%}
+.visual>.list>.item.i3>p{top:auto;bottom:0;border-radius:0 0 5px 5px;text-align:right;margin:0}
+.visual>.list>.item.i3:before{right:0;border-radius:0 5px 5px 0}
+}
+.visual>.list.count1>.item{width:100%}
+.visual>.list.count2>.item{width:50%}
+.visual>.list.count3>.item{width:33.34%;margin-right:-0.01%}
+.visual>button{display:none}
+@media all and (min-width:481px){
+.visual>button{display:block;position:absolute;z-index:2;top:0;background:transparent;border:0;font:50px/0 Arial, Helvetica, sans-serif;width:80px;height:100%;color:#fff;margin:0;padding:0;zoom:1}
+.visual>button>i{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;opacity:.2;filter:alpha(opacity=20)}
+.visual>button:hover>i,
+.visual>button:focus>i{opacity:.4;filter:alpha(opacity=40);background:#fff}
+.visual>button.prev{left:0}
+.visual>button.next{right:0}
+}
+/* Content */
+.content a{text-decoration:underline}
+.document_popup_menu{text-align:right}
+/* LNB */
+.lnb>h2{margin:0}
+.lnb>h2>a{background:#111;color:#fff;display:block;font-size:14px;padding:8px 12px;margin:0 0 10px 0;border-radius:4px;text-decoration:none}
+/* Footer */
+.footer{border-top:1px solid #bbb;color:#666}
+.footer>p{margin:1em 0}

layouts/bootstrap.layout/bootstrap.layout.ie9fix.css

@@ -0,0 +1,3 @@
+@charset "utf-8";
+@font-face{font-family:NG;src:url(../../common/font/NanumGothic.eot);src:local(※),url(../../common/font/NanumGothic.woff) format('woff')}
+body,table,input,textarea,select,button{font-family:나눔고딕,NanumGothic,NG,돋움,Dotum,Arial,Helvetica,sans-serif;font-size:13px}

layouts/bootstrap.layout/bootstrap.layout.js

@@ -0,0 +1,280 @@
+jQuery(function($){
+// Remove content CSS /modules/editor/styles/
+	$('head>link[href*="/modules/editor/styles/"]').remove();
+
+// Skip to content
+	$('.skip>a').click(function(){
+		$($(this).attr('href')).attr('tabindex','0').focus();
+	});
+
+// GNB
+	var $gnb = $('.gnb');
+	var $gnb_drop_toggle = $gnb.find('a.x_dropdown-toggle');
+	var $gnb_drop_menu = $gnb.find('ul.x_dropdown-menu');
+	$(window).resize(function(){
+		var ww = $(window).width();
+		if(ww >= 980){
+			$gnb.addClass('desktop');
+			$gnb_drop_menu.hide();
+		} else {
+			$gnb.removeClass('desktop');
+			$gnb_drop_menu.show();
+		}
+	}).resize();
+	$gnb_drop_toggle.mouseover(function(){
+		var $t = $(this);
+		if($gnb.hasClass('desktop')){
+			$t.parent('li').addClass('active');
+			if($t.next('ul').length == 1){
+				$gnb_drop_menu.hide();
+				$t.next('ul').slideDown(200);
+			}
+		}
+	});
+	$gnb_drop_toggle.parent('li').mouseleave(function(){
+		if($gnb.hasClass('desktop')){
+			$(this).removeClass('active').find('>ul').slideUp(200);
+		}
+	});
+
+// Visual Slide
+	var $visual = $('.visual');
+	var $visual_list = $visual.find('>.list');
+	var $visual_prev = $visual.find('>.prev');
+	var $visual_next = $visual.find('>.next');
+	var itemNum = $visual.find('.item').length;
+	$visual_list.addClass('count'+itemNum);
+	$visual_prev.click(function(){
+		$visual_list.find('.item:last-child').prependTo($visual_list);
+	});
+	$visual_next.click(function(){
+		$visual_list.find('.item:first-child').appendTo($visual_list);
+	});
+	if(itemNum==1){
+		$visual.find('>button').remove();
+	} else if(itemNum==3){
+		$visual_prev.trigger('click');
+	}
+});
+
+// GNB RWD Version
+/* ===================================================
+ * bootstrap-transition.js v2.1.0
+ * http://twitter.github.com/bootstrap/javascript.html#transitions
+ * ===================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+  $(function () {
+
+    "use strict"; // jshint ;_;
+
+
+    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
+     * ======================================================= */
+
+    $.support.transition = (function () {
+
+      var transitionEnd = (function () {
+
+        var el = document.createElement('bootstrap')
+          , transEndEventNames = {
+               'WebkitTransition' : 'webkitTransitionEnd'
+            ,  'MozTransition'    : 'transitionend'
+            ,  'OTransition'      : 'oTransitionEnd otransitionend'
+            ,  'transition'       : 'transitionend'
+            }
+          , name
+
+        for (name in transEndEventNames){
+          if (el.style[name] !== undefined) {
+            return transEndEventNames[name]
+          }
+        }
+
+      }())
+
+      return transitionEnd && {
+        end: transitionEnd
+      }
+
+    })()
+
+  })
+
+}(window.jQuery);
+
+// GNB RWD Version
+/* =============================================================
+ * bootstrap-collapse.js v2.1.0
+ * http://twitter.github.com/bootstrap/javascript.html#collapse
+ * =============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* COLLAPSE PUBLIC CLASS DEFINITION
+  * ================================ */
+
+  var Collapse = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.collapse.defaults, options)
+
+    if (this.options.parent) {
+      this.$parent = $(this.options.parent)
+    }
+
+    this.options.toggle && this.toggle()
+  }
+
+  Collapse.prototype = {
+
+    constructor: Collapse
+
+  , dimension: function () {
+      var hasWidth = this.$element.hasClass('width')
+      return hasWidth ? 'width' : 'height'
+    }
+
+  , show: function () {
+      var dimension
+        , scroll
+        , actives
+        , hasData
+
+      if (this.transitioning) return
+
+      dimension = this.dimension()
+      scroll = $.camelCase(['scroll', dimension].join('-'))
+      actives = this.$parent && this.$parent.find('> .x_accordion-group > .x_in')
+
+      if (actives && actives.length) {
+        hasData = actives.data('collapse')
+        if (hasData && hasData.transitioning) return
+        actives.collapse('hide')
+        hasData || actives.data('collapse', null)
+      }
+
+      this.$element[dimension](0)
+      this.transition('addClass', $.Event('show'), 'shown')
+      $.support.transition && this.$element[dimension](this.$element[0][scroll])
+    }
+
+  , hide: function () {
+      var dimension
+      if (this.transitioning) return
+      dimension = this.dimension()
+      this.reset(this.$element[dimension]())
+      this.transition('removeClass', $.Event('hide'), 'hidden')
+      this.$element[dimension](0)
+    }
+
+  , reset: function (size) {
+      var dimension = this.dimension()
+
+      this.$element
+        .removeClass('x_collapse')
+        [dimension](size || 'auto')
+        [0].offsetWidth
+
+      this.$element[size !== null ? 'addClass' : 'removeClass']('x_collapse')
+
+      return this
+    }
+
+  , transition: function (method, startEvent, completeEvent) {
+      var that = this
+        , complete = function () {
+            if (startEvent.type == 'show') that.reset()
+            that.transitioning = 0
+            that.$element.trigger(completeEvent)
+          }
+
+      this.$element.trigger(startEvent)
+
+      if (startEvent.isDefaultPrevented()) return
+
+      this.transitioning = 1
+
+      this.$element[method]('x_in')
+
+      $.support.transition && this.$element.hasClass('x_collapse') ?
+        this.$element.one($.support.transition.end, complete) :
+        complete()
+    }
+
+  , toggle: function () {
+      this[this.$element.hasClass('x_in') ? 'hide' : 'show']()
+    }
+
+  }
+
+
+ /* COLLAPSIBLE PLUGIN DEFINITION
+  * ============================== */
+
+  $.fn.collapse = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('collapse')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('collapse', (data = new Collapse(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.collapse.defaults = {
+    toggle: true
+  }
+
+  $.fn.collapse.Constructor = Collapse
+
+
+ /* COLLAPSIBLE DATA-API
+  * ==================== */
+
+  $(function () {
+    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
+      var $this = $(this), href
+        , target = $this.attr('data-target')
+          || e.preventDefault()
+          || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
+        , option = $(target).data('collapse') ? 'toggle' : $this.data()
+      $this[$(target).hasClass('x_in') ? 'addClass' : 'removeClass']('x_collapsed')
+      $(target).collapse(option)
+    })
+  })
+
+}(window.jQuery);

layouts/bootstrap.layout/conf/info.xml

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<layout version="0.2">
+    <title xml:lang="ko">Bootstrap.Layout</title>
+    <title xml:lang="en">Bootstrap.Layout</title>
+    <description xml:lang="ko">부트스트랩 응용 레이아웃.</description>
+    <description xml:lang="en">Bootstrap application layout.</description>
+    <version>1.0</version>
+    <date>2012-09-01</date>
+    <author email_address="developer@xpressengine.com" link="http://xpressengine.com/">
+        <name xml:lang="ko">NHN</name>
+        <name xml:lang="en">NHN</name>
+    </author>
+    <menus>
+        <menu name="GNB" maxdepth="2" default="true">
+            <title xml:lang="ko">전역 네비게이션 바</title>
+            <title xml:lang="en">Global Navigation Bar</title>
+        </menu>
+    </menus>
+	<extra_vars>
+		<var name="LAYOUT_TYPE" type="select">
+			<title xml:lang="ko">레이아웃 유형</title>
+			<title xml:lang="en">Layout Type</title>
+			<options value="MAIN_PAGE">
+				<title xml:lang="ko">Main Page(1Column=GNB+Content)</title>
+				<title xml:lang="en">Main Page(1Column=GNB+Content)</title>
+			</options>
+			<options value="SUB_PAGE">
+				<title xml:lang="ko">Sub Page(2Column=GNB+LNB+Content)</title>
+				<title xml:lang="en">Sub Page(2Column=GNB+LNB+Content)</title>
+			</options>
+		</var>
+		<var name="VISUAL_USE" type="select">
+			<title xml:lang="ko">비주얼 이미지와 텍스트 사용</title>
+			<title xml:lang="en">Use visual image and text</title>
+			<options value="YES">
+				<title xml:lang="ko">비주얼 이미지와 텍스트를 사용</title>
+				<title xml:lang="en">Use visual image and text</title>
+			</options>
+			<options value="NO">
+				<title xml:lang="ko">비주얼 이미지와 텍스트를 사용하지 않음</title>
+				<title xml:lang="en">Do not use visual image and text</title>
+			</options>
+		</var>
+		<var name="VISUAL_IMAGE_1" type="image">
+			<title xml:lang="ko">비주얼 이미지 1</title>
+			<title xml:lang="en">Visual Image 1</title>
+		</var>
+		<var name="VISUAL_TEXT_1" type="text">
+			<title xml:lang="ko">비주얼 텍스트 1</title>
+			<title xml:lang="en">Visual Text 1</title>
+		</var>
+		<var name="VISUAL_LINK_1" type="text">
+			<title xml:lang="ko">비주얼 링크 1</title>
+			<title xml:lang="en">Visual Link 1</title>
+		</var>
+		<var name="VISUAL_IMAGE_2" type="image">
+			<title xml:lang="ko">비주얼 이미지 2</title>
+			<title xml:lang="en">Visual Image 2</title>
+		</var>
+		<var name="VISUAL_TEXT_2" type="text">
+			<title xml:lang="ko">비주얼 텍스트 2</title>
+			<title xml:lang="en">Visual Text 2</title>
+		</var>
+		<var name="VISUAL_LINK_2" type="text">
+			<title xml:lang="ko">비주얼 링크 2</title>
+			<title xml:lang="en">Visual Link 2</title>
+		</var>
+		<var name="VISUAL_IMAGE_3" type="image">
+			<title xml:lang="ko">비주얼 이미지 3</title>
+			<title xml:lang="en">Visual Image 3</title>
+		</var>
+		<var name="VISUAL_TEXT_3" type="text">
+			<title xml:lang="ko">비주얼 텍스트 3</title>
+			<title xml:lang="en">Visual Text 3</title>
+		</var>
+		<var name="VISUAL_LINK_3" type="text">
+			<title xml:lang="ko">비주얼 링크 3</title>
+			<title xml:lang="en">Visual Link 3</title>
+		</var>
+	</extra_vars>
+</layout>

layouts/bootstrap.layout/layout.html

@@ -0,0 +1,118 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />
+<load target="../../common/css/bootstrap.css" index="1" />
+<load target="../../common/css/bootstrap-responsive.css" index="1" />
+<load target="bootstrap.layout.css" index="2" />
+<load target="bootstrap.layout.ie9fix.css" index="2" targetie="IE 9" />
+<load target="../../common/js/respond.min.js" targetie="lt IE 9" />
+<load target="../../common/js/selectivizr-min.js" targetie="lt IE 9" />
+<load target="bootstrap.layout.js" type="body" />
+<div class="x_container">
+	<p class="skip"><a href="#content">{$lang->skip_to_content}</a></p>
+	<header class="header">
+		<div class="x_row">
+			<h1 class="x_span6"><a href="{geturl('')}" id="siteTitle"><img src="siteTitle.png" alt="XpressEngine"></a></h1>
+			<!-- ACCOUNT -->
+			<img widget="login_info" skin="bootstrap.login" />
+			<!-- /ACCOUNT -->
+		</div>
+		<!-- GNB -->
+		<nav class="gnb x_navbar x_navbar-inverse" id="gnb">
+			<div class="x_navbar-inner">
+				<div class="x_container">
+					<a class="x_btn x_btn-navbar" data-toggle="collapse" data-target=".x_nav-collapse">
+						<span class="x_icon-bar"></span>
+						<span class="x_icon-bar"></span>
+						<span class="x_icon-bar"></span>
+					</a>
+					<a class="x_brand" href="{geturl('')}">HOME</a>
+					<div class="x_nav-collapse">
+						<ul class="x_nav">
+							<li loop="$GNB->list=>$key1,$val1" class="x_dropdown"|cond="!$val1['selected']" class="x_dropdown x_active"|cond="$val1['selected']">
+								<a href="{$val1['href']}" class="x_dropdown-toggle" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
+								<ul cond="$val1['list']" class="x_dropdown-menu">
+									<li loop="$val1['list']=>$key2,$val2" class="x_active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
+								</ul>
+							</li>
+						</ul>
+						<!-- SEARCH -->
+						<form action="{getUrl()}" method="get" class="x_navbar-form x_pull-right">
+							<input type="hidden" name="vid" value="{$vid}" />
+							<input type="hidden" name="mid" value="{$mid}" />
+							<input type="hidden" name="act" value="IS" />
+							<input type="text" name="is_keyword" value="{$is_keyword}" required placeholder="{$lang->cmd_search}" title="{$lang->cmd_search}" style="width:120px;height:18px;line-height:18px" />
+							<input type="submit" value="{$lang->cmd_search}" class="x_btn x_btn-inverse" />
+						</form>
+						<!-- /SEARCH -->
+					</div>
+				</div>
+			</div>
+		</nav>
+		<!-- /GNB -->
+	</header>
+	<div class="body main"|cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'" class="body sub"|cond="$layout_info->LAYOUT_TYPE=='SUB_PAGE'">
+		<!-- CONTENT -->
+		<div class="content" id="content">
+			<!-- VISUAL | DEFAULT -->
+			<div class="visual" cond="!$layout_info->VISUAL_IMAGE_1 && !$layout_info->VISUAL_IMAGE_2 && !$layout_info->VISUAL_IMAGE_3 && $layout_info->VISUAL_USE=='YES'">
+				<div class="list">
+					<a href="{geturl('','module','admin','act','dispAdminConfigGeneral')}" class="item i1" cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'">
+						<img src="visual.main.1.jpg" alt="" />
+						<p>Click, to change the site title.</p>
+					</a>
+					<a href="{geturl('','module','admin','act','dispMenuAdminSiteMap')}" class="item i2" cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'">
+						<img src="visual.main.2.jpg" alt="" />
+						<p>Click, to change the site navigation.</p>
+					</a>
+					<a href="{geturl('','module','admin','act','dispLayoutAdminAllInstanceList')}" class="item i3" cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'">
+						<img src="visual.main.3.jpg" alt="" />
+						<p>Click, to change the site visual image.</p>
+					</a>
+					<a href="{geturl('','module','admin','act','dispLayoutAdminAllInstanceList')}" class="item i1" cond="$layout_info->LAYOUT_TYPE=='SUB_PAGE'">
+						<img src="visual.sub.jpg" alt="" />
+						<p>Click, to change the site visual image.</p>
+					</a>
+				</div>
+				<button type="button" class="prev"><i></i>&lsaquo;</button>
+				<button type="button" class="next"><i></i>&rsaquo;</button>
+			</div>
+			<!-- VISUAL | USER DEFINE -->
+			<div class="visual" cond="$layout_info->VISUAL_IMAGE_1 || $layout_info->VISUAL_IMAGE_2 || $layout_info->VISUAL_IMAGE_3 && $layout_info->VISUAL_USE=='YES'">
+				<div class="list">
+					<a href="{$layout_info->VISUAL_LINK_1}" class="item i1" cond="$layout_info->VISUAL_IMAGE_1">
+						<img src="{$layout_info->VISUAL_IMAGE_1}" alt="" />
+						<p>{$layout_info->VISUAL_TEXT_1}</p>
+					</a>
+					<a href="{$layout_info->VISUAL_LINK_2}" class="item i2" cond="$layout_info->VISUAL_IMAGE_2">
+						<img src="{$layout_info->VISUAL_IMAGE_2}" alt="" />
+						<p>{$layout_info->VISUAL_TEXT_2}</p>
+					</a>
+					<a href="{$layout_info->VISUAL_LINK_3}" class="item i3" cond="$layout_info->VISUAL_IMAGE_3">
+						<img src="{$layout_info->VISUAL_IMAGE_3}" alt="" />
+						<p>{$layout_info->VISUAL_TEXT_3}</p>
+					</a>
+				</div>
+				<button type="button" class="prev"><i></i>&lsaquo;</button>
+				<button type="button" class="next"><i></i>&rsaquo;</button>
+			</div>
+			<!-- /VISUAL -->
+			{$content}
+		</div>
+		<!-- /CONTENT -->
+		<!-- LNB -->
+		<nav class="lnb" cond="$layout_info->LAYOUT_TYPE == 'SUB_PAGE'">
+			<h2 loop="$GNB->list=>$key1,$val1" cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></h2>
+			<ul loop="$GNB->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']" class="x_nav x_nav-tabs x_nav-stacked">
+				<li loop="$val1['list']=>$key2,$val2" class="x_active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
+					<ul cond="$val2['list']">
+						<li loop="$val2['list']=>$key3,$val3" class="x_active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</nav>
+		<!-- /LNB -->
+	</div>
+	<footer class="footer">
+		<p>Powered by <a href="http://xpressengine.com/"><strong>XE</strong></a>.</p>
+	</footer>
+</div>