@charset "utf-8";
/* CSS Document */ 
.menuElement {
    width: 145px;
    float: left;
    margin-right: 15px;
} 
.menuElement a, .menuElement a:visited {
    display: block;
    width: 145px;
    font-size: 10px;
    color: #FFFFFF;
    line-height: 15px;
    text-transform: uppercase;
    text-decoration: none;
} 
.menu .menuElement .dropdown a {
    padding: 2px 4px;
    width: 137px;
} 
.menuElement a span {
    display: block;
    padding-left: 4px;
    padding-right: 4px;
} 
.menu .headerContainer {
    position: relative;
} 
.menu .headerContainer img {
    display: block;
} 
.menu .menuHeader {
    background: url(../images/menu_off.jpg) no-repeat;
} 
.menu .menuElement:hover, .menu a:hover, .menu .hovered {
    position: relative;
    z-index: 1000;
} 
.menu .menuElement:hover .dropdown, .menu .hovered .dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
}

/*Orange Menu Item*/ 
.menu .menuElement:hover .orange, .menu .hovered .orange {
    background: url(../images/menu_on_orange.jpg) no-repeat;
}
.menu .orangeDropdown {
    padding: 8px 0px;
    background: url(../images/orange.png) repeat-y;
    display: none;
}
.menu .orangeDropdown a:hover {
    background: url(../images/orange.jpg);
}
.menu .active .orange {
    background: url(../images/menu_on_orange.jpg) no-repeat;
}

/*Red Menu Item*/ 
.menu .menuElement:hover .red, .menu .hovered .red {
    background: url(../images/menu_on_red.jpg) no-repeat;
} 
.menu .redDropdown {
    padding: 8px 0px;
    background: url(../images/red.png) repeat-y;
    display: none;
}
.menu .redDropdown a:hover {
    background: url(../images/red.jpg);
} 
.menu .active .red {
    background: url(../images/menu_on_red.jpg) no-repeat;
}

/*Teal Menu Item*/ 
.menu .menuElement:hover .teal, .menu .hovered .teal {
    background: url(../images/menu_on_teal.jpg) no-repeat;
} 
.menu .tealDropdown {
    padding: 8px 0px;
    background: url(../images/teal.png) repeat-y;
    display: none;
} 
.menu .tealDropdown a:hover {
    background: url(../images/teal.jpg);
} 
.menu .active .teal {
    background: url(../images/menu_on_teal.jpg) no-repeat;
}

/*Purple Menu Item*/ 
.menu .menuElement:hover .purple, .menu .hovered .purple {
    background: url(../images/menu_on_purple.jpg) no-repeat;
}  
.menu .purpleDropdown {
    padding: 8px 0px;
    background: url(../images/purple.png) repeat-y;
    display: none;
} 
.menu .purpleDropdown a:hover {
    background: url(../images/purple.jpg);
} 
.menu .active .purple {
    background: url(../images/menu_on_purple.jpg) no-repeat;
}

/*Green Menu Item*/ 
.menu .menuElement:hover .green, .menu .hovered .green {
    background: url(../images/menu_on_green.jpg) no-repeat;
} 
.menu .greenDropdown {
    padding: 8px 0px;
    background: url(../images/green.png) repeat-y;
    display: none;
} 
.menu .greenDropdown a:hover {
    background: url(../images/green.jpg);
} 
.menu .active .green {
    background: url(../images/menu_on_green.jpg) no-repeat;
}

/*Sky Menu Item*/ 
.menu .menuElement:hover .sky, .menu .hovered .sky {
    background: url(../images/menu_on_sky.jpg) no-repeat;
} 
.menu .skyDropdown {
    padding: 8px 0px;
    background: url(../images/sky.png) repeat-y;
    display: none;
} 
.menu .skyDropdown a:hover {
    background: url(../images/sky.jpg);
} 
.menu .active .sky {
    background: url(../images/menu_on_sky.jpg) no-repeat;
} 
.menu .menuElement img.home-on,
.menu .hoverable img.home-on {
    height: 0px;
    overflow: hidden;
} 
.menu .menuElement:hover img.home-on,
.menu .hovered img.home-on {
    height: 113px;
} 
.menu .menuElement img.home-off,
.menu .hoverable img.home-off {
    height: 113px;
    display: block;
} 
.menu .menuElement:hover img.home-off,
.menu .hovered img.home-off {
    height: 0px;
    overflow: hidden;
}