$(document).ready(function() {
    //change color for 3 main div when mouseover/mouseleave
    var mouseoverSpeed = 200;
    var mouseleaveSpeed = 90;
    var mouseoverColor = "#ffe498";
    var mouseleaveColor = "#FFFFFF";

    $('#what').mouseover(function(e) {
    $('#what').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
    $('#what1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#what').mouseleave(function(e) {
    $('#what').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
    $('#what1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

    $('#what1').mouseover(function(e) {
    $('#what').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        $('#what1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#what1').mouseleave(function(e) {
    $('#what').animate({ backgroundColor: mouseleaveColor }, mouseoverSpeed);
        $('#what1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

    $('#why').mouseover(function(e) {
        $('#why').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        $('#why1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#why').mouseleave(function(e) {
        $('#why').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        $('#why1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

    $('#why1').mouseover(function(e) {
        $('#why').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        $('#why1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#why1').mouseleave(function(e) {
    $('#why').animate({ backgroundColor: mouseleaveColor }, mouseoverSpeed);
        $('#why1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

    $('#how').mouseover(function(e) {
        $('#how').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        $('#how1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#how').mouseleave(function(e) {
        $('#how').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        $('#how1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

    $('#how1').mouseover(function(e) {
        $('#how').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        $('#how1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#how1').mouseleave(function(e) {
    $('#how').animate({ backgroundColor: mouseleaveColor }, mouseoverSpeed);
        $('#how1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

    $('#meetHero').mouseover(function(e) {
        $('#meetHero').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        $('#meetHero1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#meetHero').mouseleave(function(e) {
        $('#meetHero').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        $('#meetHero1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

    $('#meetHero1').mouseover(function(e) {
        $('#meetHero').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        $('#meetHero1').animate({ backgroundColor: mouseoverColor }, mouseoverSpeed);
        return false;
    });

    $('#meetHero1').mouseleave(function(e) {
    $('#meetHero').animate({ backgroundColor: mouseleaveColor }, mouseoverSpeed);
        $('#meetHero1').animate({ backgroundColor: mouseleaveColor }, mouseleaveSpeed);
        return false;
    });

   

               $('#aboutUs').mouseover(function() {
    $(this).fadeTo("slow", 0.33);
               
    });

                $('#aboutUs').mouseleave(function() {
    $(this).fadeTo("slow",1);
    });

                $('#portfolio').mouseover(function() {
    $(this).fadeTo("slow", 0.33);
    });

                $('#portfolio').mouseleave(function() {
    $(this).fadeTo("slow", 1);
    });

                $('#clientList').mouseover(function() {
    $(this).fadeTo("slow", 0.33);
    });

                $('#clientList').mouseleave(function() {
    $(this).fadeTo("slow", 1);
    });

                $('#contactUs').mouseover(function() {
    $(this).fadeTo("slow", 0.33);
    });

                $('#contactUs').mouseleave(function() {
    $(this).fadeTo("slow", 1);
    }); 


});

var clear = "../unitpngfix/clear.gif"; //path to clear.gif
document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"><\/script>'); var ct = document.getElementById("ct"); ct.onreadystatechange = function() { pngfix() }; pngfix = function() { var els = document.getElementsByTagName('*'), ip = /\.png/i, al = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='", i = els.length, uels = new Array(), c = 0; while (i-- > 0) { if (els[i].className.match(/unitPng/)) { uels[c] = els[i]; c++; } } if (uels.length == 0) pfx(els); else pfx(uels); function pfx(els) { i = els.length; while (i-- > 0) { var el = els[i], es = el.style, elc = el.currentStyle, elb = elc.backgroundImage; if (el.src && el.src.match(ip) && !es.filter) { es.height = el.height; es.width = el.width; es.filter = al + el.src + "',sizingMethod='crop')"; el.src = clear; } else { if (elb.match(ip)) { var path = elb.split('"'), rep = (elc.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale', elkids = el.getElementsByTagName('*'), j = elkids.length; es.filter = al + path[1] + "',sizingMethod='" + rep + "')"; es.height = el.clientHeight + 'px'; es.backgroundImage = 'none'; if (j != 0) { if (elc.position != "absolute") es.position = 'static'; while (j-- > 0) if (!elkids[j].style.position) elkids[j].style.position = "relative"; } } } } }; };