guys i am having problems with my jquery code . the slider that has the words "portfolio , service , contacts" etc . doesn't seem to be working here is my site here
http://homejobsinc.t35.com/test2.html
here is my source code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="GENERATOR" content="Created by BlueVoda">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/stylez.css">
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/sprite.js"></script>
<link rel="stylesheet" type="text/css" href="css/stylez.css">
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function PreloadImages()
{
var imageObj = new Image();
var images = new Array();
images[0]="./images/Facebook.png";
for (var i=0; i<=0; i++)
{
imageObj.src = images[i];
}
}
// -->
</script>
<body bgcolor="#666666" text="#000000" <div id="nav"><!-- T35 Hosting Ad Code Begin -->
<style type="text/css">
#t35ad{font: 14px arial,helvetica; text-decoration: none; line-height:1.5em; text-align: center; }
#t35ad a{font: 14px arial,helvetica; text-decoration: none; }
#t35ad a:hover{background-color: black; color: white; font-size:medium; font-weight: bold; }
#t35ad ul{display: inline; list-style-type: none; padding: 0;}
#navlist li{display: inline; list-style-type: none; padding-right: 0px; padding-left: 0px; padding: 0;}
</style>
<!-- T35 Hosting Ad Code End -->
<ul id="navigation">
<li><a class="home" href="#"></a></li>
<li><a class="services" href="#"></a></li>
<li><a class="portfolio" href="#"></a></li>
<li><a class="about" href="#"></a></li>
<li><a class="contact" href="#"></a></li>
</ul>
</div>
<div id="bv_Shape1" style="position:absolute;left:5px;top:118px;width:651px;height:359px;z-index:2;" align="left">
<div class="rotator">
<ul id="rotmenu">
<li>
<a href="rot1">Portfolio</a>
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Our Works</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot2">Services</a>
<div style="display:none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">We serve</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot3">Contact</a>
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Get in touch</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot4">Experiments</a>
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">We do crazy stuff</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot5">Applications</a>
<div style="display:none;">
<div class="info_image">5.jpg</div>
<div class="info_heading">Working things</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="650" height="352" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<div id="bv_Shape2" style="position:absolute;left:695px;top:118px;width:272px;height:357px;z-index:1;" align="center">
<img src="images/bv01154.gif" id="Shape2" align="top" alt="" title="" border="0" width="272" height="357"></div>
<div id="bv_Shape3" style="position:absolute;left:5px;top:494px;width:656px;height:359px;z-index:0;" align="center">
<div id="ei_menu" class="ei_menu">
<ul>
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
</li>
<li>
<a href="#" class="pos2">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>David</h2>
<h3>Guitar</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
</li>
<li>
<a href="#" class="pos3">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Andrew</h2>
<h3>Bass</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
</li>
<li>
<a href="#" class="pos4">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Sean</h2>
<h3>Drums</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
</li>
</div>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="bv_Shape4" style="position:absolute;left:695px;top:494px;width:273px;height:655px;z-index:3;" align="center">
<img src="images/bv01156.gif" id="Shape4" align="top" alt="" title="" border="0" width="273" height="655"></div>
<div id="bv_Shape5" style="position:absolute;left:662px;top:465px;width:35px;height:36px;z-index:4;" align="center">
<img src="images/bv01164.png" id="Shape5" align="top" alt="" title="" border="0" width="37" height="37"></div>
<div id="bv_Shape6" style="position:absolute;left:0px;top:1178px;width:1027px;height:288px;z-index:5;" align="center">
<img src="images/bv01158.gif" id="Shape6" align="top" alt="" title="" border="0" width="1026" height="288"></div>
<div id="bv_Text1" style="position:absolute;left:758px;top:1217px;width:150px;height:17px;z-index:7;" align="left">
<font style="font-size:15px" color="#282828" face="Times New Roman"><a href="http://google.com">Contact Us</font></div>
<div id="bv_Text2" style="position:absolute;left:758px;top:1243px;width:150px;height:17px;z-index:8;" align="left">
<font style="font-size:15px" color="#282828" face="Times New Roman">About Us</font></div>
<div id="bv_Text3" style="position:absolute;left:758px;top:1268px;width:150px;height:17px;z-index:9;" align="left">
<font style="font-size:15px" color="#282828" face="Times New Roman">About Us</font></div>
<div id="bv_Text4" style="position:absolute;left:758px;top:1291px;width:150px;height:17px;z-index:10;" align="left">
<font style="font-size:15px" color="#282828" face="Times New Roman">Contact Us</font></div>
<div id="bv_Text5" style="position:absolute;left:758px;top:1316px;width:150px;height:17px;z-index:11;" align="left">
<font style="font-size:15px" color="#282828" face="Times New Roman">Contact Us</font></div>
<div id="bv_Text6" style="position:absolute;left:757px;top:1339px;width:150px;height:17px;z-index:12;" align="left">
<font style="font-size:15px" color="#282828" face="Times New Roman">Contact Us</font></div>
<div id="bv_Text8" style="position:absolute;left:94px;top:1375px;width:366px;height:15px;z-index:11;" align="left">
<font style="font-size:13px" color="#282828" face="Times New Roman">© Copyright 2010 Kingdom of Light Ministries All Rights Reserved</font></div>
<div id="bv_Text7" style="position:absolute;left:183px;top:1397px;width:190px;height:21px;z-index:12;" align="left">
<font style="font-size:13px" color="#282828" face="Times New Roman">Desing By :</font><font style="font-size:13px" color="#282828" face="Viner Hand ITC"> </font><font style="font-size:13px" color="#990000" face="Viner Hand ITC">XSFX</font><font style="font-size:13px" color="#282828" face="Times New Roman"> Productions</font></div>
<div id="bv_Image1" style="overflow:hidden;position:absolute;left:481px;top:1319px;z-index:13" align="left">
<a href="http://www.facebook.com"><img src="images/facebook_04.png" id="Image1" alt="" align="top" border="0" style="width:62px;height:62px;"></div>
<div id="bv_Image3" style="overflow:hidden; position:absolute; left:641px; top:1319px; z-index:14" align="left">
<a href="http://www.youtube.com"><img src="images/Youtube.png" id="Image3" alt="" align="top" border="0" style="width:64px;height:59px;">
</div>
<div id="bv_Marquee2" style="position:absolute;left:700px;top:496px;width:256px;height:651px;background-color:#1E1E1E;z-index:15;" align="left">
<marquee direction="up" height="651" scrolldelay="99" scrollamount="2" behavior="scroll" loop="0" style="background-color:#1E1E1E; border:-1px #FFFFFF dotted;" id="Marquee2"><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More<br>
<br>
<br>
<br>
<br>
</b></font><font style="font-size:19px" color="#3333DC" face="Times New Roman"> Just testing the websites functions <br>
out.Lets see how this goes, hope <br>
everyone likes it. Well, that's about<br>
....</font><font style="font-size:19px" color="#FF0000" face="Times New Roman"><b>Read More</b></font></marquee></div>
<div id="bv_Text9" style="position:absolute;left:95px;top:1227px;width:374px;height:135px;z-index:16;" align="left">
<font style="font-size:13px" color="#000000" face="Times New Roman">Kingdom of Light Ministries was inaugurated on 8th Febraury 2003. The founding pastor is Pastor Samson Makinwa. He is an engineer and was a successful entrepreneur before going into ministry.<br>
The Church started with few members and as at today the headquarters has a membership of one thousand. KLM has five branches in Lagos, Nigeria and one in London.Our objectives is to win many souls to his kingdom through worldwide evangelism, outreaches, crusades. Also to make God's people successful and lead them to his kingdom in comfort.</font></div>
<div id="bv_Shape7" style="position:absolute;left:97px;top:1371px;width:359px;height:3px;z-index:17;" align="center">
<img src="images/bv01165.gif" id="Shape7" align="top" alt="" title="" border="0" width="359" height="3"></div>
<div id="bv_Image2" style="overflow:hidden;position:absolute;left:557px;top:1319px;z-index:18" align="left">
<a href="http://twitter.com/"><img src="images/twitter (2).png" id="Image2" alt="" align="top" border="0" style="width:62px;height:62px;"></div>
<div id="bv_Image4" style="overflow:hidden;position:absolute;left:698px;top:120px;z-index:20" align="left">
<img src="images/Fashiongal 1.png" id="Image4" alt="" align="top" border="0" style="width:271px;height:359px;"></div>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#ei_menu > ul'),
$menuItems = $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems = $menuItems.length,
ExpandingMenu = (function(){
/*
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
*/
var current = -1,
/*
@anim
if we want the default opened item to animate initialy set this to true
*/
anim = true,
/*
checks if the current value is valid -
between 0 and the number of items
*/
validCurrent = function() {
return (current >= 0 && current < totalMenuItems);
},
init = function() {
/* show default item if current is set to a valid index */
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu = function() {
/* get the item for the current */
var $item = $menuItems.eq(current);
/* if anim is true slide out the item */
if(anim)
slideOutItem($item, true, 900, 'easeInQuint');
else{
/* if not just show it */
$item.css({width : '400px'})
.find('.ei_image')
.css({left:'0px', opacity:1});
/* decrease the opacity of the others */
$menuItems.not($item)
.children('.ei_preview')
.css({opacity:0.2});
}
},
initEventsHandler = function() {
/*
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close it!)
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this = $(this).parent(),
idx = $this.index();
if(current === idx) {
slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
current = -1;
}
else{
if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, 250, 'jswing');
current = idx;
slideOutItem($this, true, 250, 'jswing');
}
return false;
});
},
/* if you want to trigger the action to open a specific item */
openItem = function(idx) {
$menuItemsImgWrapper.eq(idx).click();
},
/*
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
*/
slideOutItem = function($item, dir, speed, easing, mLeave) {
var $ei_image = $item.find('.ei_image'),
itemParam = (dir) ? {width : '400px'} : {width : '75px'},
imageParam = (dir) ? {left : '0px'} : {left : '75px'};
/*
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
.stop()
.animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);
/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};
return {
init : init,
openItem : openItem
};
})();
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});
</script>
<script type="text/javascript">
$(function() {
var current = 1;
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,3000);
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
if(!repeat)
$this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
current = parseInt($this.index() + 1);
var elem = $('a',$this);
elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});
$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','651').attr('height','352')
);
}
});
</script>
</noscript></noframes>
<!-- T35 Hosting Ad Code Begin -->
<!-- Start of Stat Code -->
<img src="http://c11.statcounter.com/1120767/0/78e6f3a5/1/" width="1" height="1" alt="stats" border="0" />
<script type="text/javascript">
_qoptions={
qacct:"p-f2Rp-GHnsAESA"
};
</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<noscript><img src="http://pixel.quantserve.com/pixel/p-f2Rp-GHnsAESA.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/></noscript>
<!-- End of Stat Code -->
<div id="t35ad" align="center" style="display:block;">
<br/>Hosted by <a target="_blank" href="http://www.t35.com/" rel="nofollow">T35</a> <a target="_blank" href="http://www.t35.com/">Free Web Hosting</a>. <a target=_blank href=http://www.shoes2world.com/ title='Gucci Sneakers'>Gucci Sneakers</a> - <a target=_blank href=http://www.987mb.com/ title='Cheap Website Hosting'>Cheap Website Hosting</a> - <a target="_blank" href="http://www.monsterbacklinks.com/">Get Backlinks</a> - <a target=_blank href=http://www.uk-cheapest.co.uk>Domains</a> - <a target=_blank href=http://www.isubmit.com/ title='Backlinks'>Submit Your Site</a></div>
<!-- T35 Hosting Ad Code End -->
</body>
</html>here is where i got the slider from
http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/
