CSS3 5 Colored Navigation Menus - Snippet

Preview
HTML
CSS
JS

<!-- CSS3 Navigation System Using Images -->
<!-- Created By: Omari Celestine -->
<!-- Email: OmariCelestine@gmail.com -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>5 Colored CSS3 Navigation System</title>
  <link rel="stylesheet" href="css/navigation.css" type="text/css" />
</head>

<body>

    <center>
        <h2>5 Colored CSS3 Navigation System</h2>
        <h3>Well Commented HTML Template File</h3>
    </center>

<!-- Red Navigation -->
    <!-- Start Main Navigation Container -->
    <div id="nav" class="red_nav_container">
        <ul>
        <!-- Start Main Navigation Links -->
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">Policies</a></li>
            <li><a href="#">Live Chat</a></li>
            <li><a href="#">Contact</a></li>
        <!-- Start Main Navigation Links -->
        </ul>
    </div>
    <!-- End Main Navigation Container -->

    <br />

<!-- Orange Navigation -->
    <!-- Start Main Navigation Container -->
    <div id="nav" class="orange_nav_container">
        <ul>
        <!-- Start Main Navigation Links -->
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">Company</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">Policies</a></li>
            <li><a href="#">Live Chat</a></li>
            <li><a href="#">Contact</a></li>
        <!-- Start Main Navigation Links -->
        </ul>
    </div>
    <!-- End Main Navigation Container -->

    <br />

<!-- Purple Navigation -->
    <!-- Start Main Navigation Container -->
    <div id="nav" class="purple_nav_container">
        <ul>
        <!-- Start Main Navigation Links -->
            <li><a href="#">Home</a></li>
            <li><a href="#">Company</a></li>
            <li class="active"><a href="#">Services</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">Policies</a></li>
            <li><a href="#">Live Chat</a></li>
            <li><a href="#">Contact</a></li>
        <!-- Start Main Navigation Links -->
        </ul>
    </div>
    <!-- End Main Navigation Container -->

    <br />

<!-- Blue Navigation -->
    <!-- Start Main Navigation Container -->
    <div id="nav" class="blue_nav_container">
        <ul>
        <!-- Start Main Navigation Links -->
            <li><a href="#">Home</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="#">Services</a></li>
            <li class="active"><a href="#">Testimonials</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">Policies</a></li>
            <li><a href="#">Live Chat</a></li>
            <li><a href="#">Contact</a></li>
        <!-- Start Main Navigation Links -->
        </ul>
    </div>
    <!-- End Main Navigation Container -->

    <br />

<!-- Green Navigation -->
    <!-- Start Main Navigation Container -->
    <div id="nav" class="green_nav_container">
        <ul>
        <!-- Start Main Navigation Links -->
            <li><a href="#">Home</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Testimonials</a></li>
            <li class="active"><a href="#">Works</a></li>
            <li><a href="#">Policies</a></li>
            <li><a href="#">Live Chat</a></li>
            <li><a href="#">Contact</a></li>
        <!-- Start Main Navigation Links -->
        </ul>
    </div>
    <!-- End Main Navigation Container -->

</body>

</html>

/* ***********************************************
    CSS3 Navigation Using Images
    By: Omari Celestine
    Email: OmariCelestine@gmail.com
    DeviantART: OmariCelestine.DeviantART.com
***********************************************
   ================================================== */

/* ===[ Body Styles ]=== */

body {
    font-family: Calibri, Tahoma, Arial, Verdana, sans-serif;
    color: #ffffff;
    text-decoration: none;
    background-color: #333333;
}

/* ===[ General properties ]=== */

#nav {
    width: 886px; /* Width of Navigation Bar */
}

/* ===[ List Styling ]=== */

ul {
    padding: 0;
    margin: 0;
}

li {
    display: inline;
    padding: 0;
}

li a {
    font-family: Arial;
    font-size: 12pt;
    text-decoration: none;
    float: left;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 24px;
    color: #fff;
}

/* ===[ Main Container ]=== */

/* ===[ Start Red Styling ]=== */

.red_nav_container {
    height: 36px;
    background: #d50000;
    background: -moz-linear-gradient(top,  #d50000 0%, #cc0000 23%, #ab0000 77%, #a30000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d50000), color-stop(23%,#cc0000), color-stop(77%,#ab0000), color-stop(100%,#a30000));
    background: -webkit-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: -o-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: -ms-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d50000', endColorstr='#a30000',GradientType=0 );
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Hover Effect ]=== */

.red_nav_container li a:hover {
    background: #d50000;
    background: -moz-linear-gradient(top,  #d50000 0%, #cc0000 23%, #ab0000 77%, #a30000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d50000), color-stop(23%,#cc0000), color-stop(77%,#ab0000), color-stop(100%,#a30000));
    background: -webkit-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: -o-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: -ms-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d50000', endColorstr='#a30000',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Active State ]=== */

.red_nav_container .active a {
    font-weight: bold;
    background: #d50000;
    background: -moz-linear-gradient(top,  #d50000 0%, #cc0000 23%, #ab0000 77%, #a30000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d50000), color-stop(23%,#cc0000), color-stop(77%,#ab0000), color-stop(100%,#a30000));
    background: -webkit-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: -o-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: -ms-linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    background: linear-gradient(top,  #d50000 0%,#cc0000 23%,#ab0000 77%,#a30000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d50000', endColorstr='#a30000',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ End Red Styling ]=== */

/* ===[ Main Container ]=== */

/* ===[ Start Blue Styling ]=== */

.blue_nav_container {
    height: 36px;
    background: #19b5f8;
    background: -moz-linear-gradient(top,  #19b5f8 0%, #17aff3 17%, #0a89d6 77%, #077ecd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b5f8), color-stop(17%,#17aff3), color-stop(77%,#0a89d6), color-stop(100%,#077ecd));
    background: -webkit-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: -o-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: -ms-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19b5f8', endColorstr='#077ecd',GradientType=0 );
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Hover Effect ]=== */

.blue_nav_container li a:hover {
    background: #19b5f8;
    background: -moz-linear-gradient(top,  #19b5f8 0%, #17aff3 17%, #0a89d6 77%, #077ecd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b5f8), color-stop(17%,#17aff3), color-stop(77%,#0a89d6), color-stop(100%,#077ecd));
    background: -webkit-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: -o-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: -ms-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19b5f8', endColorstr='#077ecd',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Active State ]=== */

.blue_nav_container .active a {
    font-weight: bold;
    background: #19b5f8;
    background: -moz-linear-gradient(top,  #19b5f8 0%, #17aff3 17%, #0a89d6 77%, #077ecd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b5f8), color-stop(17%,#17aff3), color-stop(77%,#0a89d6), color-stop(100%,#077ecd));
    background: -webkit-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: -o-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: -ms-linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    background: linear-gradient(top,  #19b5f8 0%,#17aff3 17%,#0a89d6 77%,#077ecd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19b5f8', endColorstr='#077ecd',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ End Blue Styling ]=== */

/* ===[ Main Container ]=== */

/* ===[ Start orange Styling ]=== */

.orange_nav_container {
    height: 36px;
    background: #d78d00;
    background: -moz-linear-gradient(top,  #d78d00 0%, #ce8300 26%, #b26500 74%, #a65800 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d78d00), color-stop(26%,#ce8300), color-stop(74%,#b26500), color-stop(100%,#a65800));
    background: -webkit-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: -o-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: -ms-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d78d00', endColorstr='#a65800',GradientType=0 );
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Hover Effect ]=== */

.orange_nav_container li a:hover {
    background: #d78d00;
    background: -moz-linear-gradient(top,  #d78d00 0%, #ce8300 26%, #b26500 74%, #a65800 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d78d00), color-stop(26%,#ce8300), color-stop(74%,#b26500), color-stop(100%,#a65800));
    background: -webkit-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: -o-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: -ms-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d78d00', endColorstr='#a65800',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Active State ]=== */

.orange_nav_container .active a {
    font-weight: bold;
    background: #d78d00;
    background: -moz-linear-gradient(top,  #d78d00 0%, #ce8300 26%, #b26500 74%, #a65800 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d78d00), color-stop(26%,#ce8300), color-stop(74%,#b26500), color-stop(100%,#a65800));
    background: -webkit-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: -o-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: -ms-linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    background: linear-gradient(top,  #d78d00 0%,#ce8300 26%,#b26500 74%,#a65800 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d78d00', endColorstr='#a65800',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ End orange Styling ]=== */

/* ===[ Main Container ]=== */

/* ===[ Start purple Styling ]=== */

.purple_nav_container {
    height: 36px;
    background: #7e00d7;
    background: -moz-linear-gradient(top,  #7e00d7 0%, #7400cd 26%, #5700b0 71%, #4a00a4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e00d7), color-stop(26%,#7400cd), color-stop(71%,#5700b0), color-stop(100%,#4a00a4));
    background: -webkit-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: -o-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: -ms-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e00d7', endColorstr='#4a00a4',GradientType=0 );
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Hover Effect ]=== */

.purple_nav_container li a:hover {
    background: #7e00d7;
    background: -moz-linear-gradient(top,  #7e00d7 0%, #7400cd 26%, #5700b0 71%, #4a00a4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e00d7), color-stop(26%,#7400cd), color-stop(71%,#5700b0), color-stop(100%,#4a00a4));
    background: -webkit-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: -o-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: -ms-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e00d7', endColorstr='#4a00a4',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Active State ]=== */

.purple_nav_container .active a {
    font-weight: bold;
    background: #7e00d7;
    background: -moz-linear-gradient(top,  #7e00d7 0%, #7400cd 26%, #5700b0 71%, #4a00a4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e00d7), color-stop(26%,#7400cd), color-stop(71%,#5700b0), color-stop(100%,#4a00a4));
    background: -webkit-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: -o-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: -ms-linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    background: linear-gradient(top,  #7e00d7 0%,#7400cd 26%,#5700b0 71%,#4a00a4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e00d7', endColorstr='#4a00a4',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ End purple Styling ]=== */

/* ===[ Main Container ]=== */

/* ===[ Start green Styling ]=== */

.green_nav_container {
    height: 36px;
    background: #97d500;
    background: -moz-linear-gradient(top,  #97d500 0%, #88c400 37%, #70a800 86%, #6ca300 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#97d500), color-stop(37%,#88c400), color-stop(86%,#70a800), color-stop(100%,#6ca300));
    background: -webkit-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: -o-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: -ms-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d500', endColorstr='#6ca300',GradientType=0 );
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Hover Effect ]=== */

.green_nav_container li a:hover {
    background: #97d500;
    background: -moz-linear-gradient(top,  #97d500 0%, #88c400 37%, #70a800 86%, #6ca300 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#97d500), color-stop(37%,#88c400), color-stop(86%,#70a800), color-stop(100%,#6ca300));
    background: -webkit-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: -o-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: -ms-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d500', endColorstr='#6ca300',GradientType=0 );
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ Active State ]=== */

.green_nav_container .active a {
    font-weight: bold;
    background: #97d500;
    background: -moz-linear-gradient(top,  #97d500 0%, #88c400 37%, #70a800 86%, #6ca300 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#97d500), color-stop(37%,#88c400), color-stop(86%,#70a800), color-stop(100%,#6ca300));
    background: -webkit-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: -o-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: -ms-linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    background: linear-gradient(top,  #97d500 0%,#88c400 37%,#70a800 86%,#6ca300 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d500', endColorstr='#6ca300',GradientType=0 );
    \: ;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-top: -2px;
    padding-bottom: 12px;
    box-shadow: 0px 2px 1px #000000;
    -webkit-box-shadow: 0px 2px 1px #000000;
    -mox-box-shadow: 0px 2px 1px #000000;
}

/* ===[ End green Styling ]=== */