
---------------------------------------
CHANGELOG
---------------------------------------
---------------------------------------
-> 14 December 11 - v1.3
Fixed menu animation on hover
Added multilevel support for horizontal menu
Changed ajax loader image (for contact form)

-> 01 December 11 - v1.2
IE7 compatibility
Fixed some bugs in IE8

-> 27 November 11 - v1.1
Added skeleton PSD

-> 26 November 11 - v1.0
Initial release




--------------------------------------
HOW TO UPDATE FROM V1.2 TO V1.3
--------------------------------------
--------------------------------------
Next words are for people wich purchased theme before releasing v1.3 and need to update form v1.2 to v1.3 without losing any changes made.

Copy files from "manual update" folder and replace the original from v1.2 template.

Ij you've made changes in "style.css" and "script.js", you must update in another way.

1. Open "style.css" in a text editor and find this "nav#horizontal", now delete these styles and all styles with "#nav" selector.
2. Paste the following code instead:


/* MENU START:
---------------------------------------*/
nav#horizontal {
position: absolute;
width: auto;
top: -64px;
right: 55px;
z-index: 99999;
color: #ddd;
background: url(../images/menu.png) repeat 0 0;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

#nav {
margin: 2px 5px;
padding: 0;
}

#nav li {
float:left;
display:block;
background:none;
position:relative;
}

#nav li a {
position: relative;
font: 13px/1.6 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
display:block;
padding:0;
font-weight:700;
text-shadow: 0 -1px 0 rgba(0,0,0,.8);
line-height:34px;
text-decoration:none;
color:#fff;
padding:0 12px;
margin: 6px 3px 8px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
zoom:1;
}

#nav li a:hover, #nav li a.hov, #nav li a.active {
border: 0;
color:#000 !important;
background: #ddd;
text-shadow: 0 -1px 1px #fff;
}

#nav li a span{
position: absolute;
bottom: -9px;
left: 50%;
margin-left: -8px;
width: 16px;
height: 10px;
background: url(../images/mnarr.png) no-repeat 0 0;
display: none;
}

#nav li a:hover span, #nav li a.hov span, #nav li a.active span{
display: block;
}


/* group subnav */
.menuChildren {
position:absolute;
width:10px;
height:11px;
background:url(../images/sub_arr.png) no-repeat;
right:8px;
top:50%;
margin-top: -5px;
}
#nav ul {
position:absolute;
left:0;
display:none;
margin:0;
padding:5px;
list-style:none;
background: #ddd;
z-index: 99999;
border: 1px solid #fff;
-webkit-box-shadow: 0 8px 9px -6px #333;
   -moz-box-shadow: 0 8px 9px -6px #333;
		box-shadow: 0 8px 9px -6px #333;
		border-radius: 5px;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#nav ul li {
width:200px;
float:left;
text-align:left;
z-index: 99999;
background: #ddd !important;
}

#nav ul a {
display:block;
height:36px;
line-height:36px;
color:#333;
text-transform: none;
font-weight:400;
margin: 0 !important;
text-shadow: 0 -1px 1px #fff;
border: 1px solid #ddd;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#nav ul a:hover {
text-decoration:none;
color:#000 !important;
background: #eee !important;
border: 1px solid #fff;
text-shadow: 0 -1px 1px #fff;
}

#nav ul li a:hover {
border: 1px solid #fff;
color:#000 !important;
background: #ddd;
text-shadow: 0 -1px 1px #fff;
}

#nav ul li a.hov {
border: 1px solid #fff;
color:#000 !important;
background: #eee !important;
text-shadow: 0 -1px 1px #fff;
}

/* group sub-subnav */
#nav li ul li ul {
display:none;
}

#nav li ul li:hover ul {
left:100%;
top:0;
}

/* IE fix */
* html #nav ul {
margin:0 0 0 -2px;
}

/* MENU END
---------------------------------------*/
	

---------------------------------------------
3. Open "scripts.js" and delete this code:
---------------------------------------------

/* ====== MENU ===== */
/*normal*/
$('#nav li').hover(function() {
	$('ul', this).slideDown(200);
	$(this).children('a:first').addClass("hov");
}, function() {
	$('ul', this).hide(150);
	$(this).children('a:first').removeClass("hov");
});
$("#nav ul a").hover(function() {
	$(this).animate({ backgroundColor: "#eee" }, 300);
},function() {
	$(this).animate({ backgroundColor: "#ddd" }, 300);
});


------------------------------------------
4. Paste the following code instead:
------------------------------------------

/* ====== MENU  ====== */
var site = function() {
	this.navLi = $('#nav li').children('ul').hide().end();
	this.init();
};

site.prototype = {
 	
 	init : function() {
 		this.setMenu();
 	},
 	
 	setMenu : function() {
 	
 	$.each(this.navLi, function() {
 		if ( $(this).children('li ul li ul')[0] ) {
 			$(this)
 				.append('<span />')
 				.children('span')
 					.addClass('menuChildren')
 		}
 	});
 	
 		this.navLi.hover(function() {
 			// mouseover
			$(this).find('> ul').stop(true, true).slideDown('medium', 'easeOutCubic');
			$(this).children('a:first').addClass("hov");
 		}, function() {
 			// mouseout
 			$(this).find('> ul').stop(true, true).hide(); 
			$(this).children('a:first').removeClass("hov");			
		});
 		
 	}
 
}
new site();

$("#nav ul a").hover(function() {
	$(this).animate({ backgroundColor: "#eee" }, 300);
},function() {
	$(this).animate({ backgroundColor: "#ddd" }, 300);
});



---------------------------------------------
5. And at the end copy images from manual update folder in "images" folder and and click OK to replace "contact-ajax-loader.gif" .
---------------------------------------------

If you have any questions please contact me via email.

THAT'S ALL. THANK YOU, VERY MUCH FOR PURCHASE.

---------------------------------------------
