/* Main menu JSCook Begin */
/*
 * ThemeGray Style Sheet
 * by Ian Reyes and Heng Yuan
 */


.ThemeGrayMenu
{
    margin-left: -1px;
    margin:            	2px 0 2px 0;
    border-collapse: 	separate;
    border-spacing: 	1px;
    width: 100%;
}

.ThemeGrayMenu tr td, .ThemeGraySubMenu tr td, .ThemeGrayMenu li
{
    vertical-align: middle;
    color: #000001;
    cursor: pointer;
    border-radius: 1px;
    position: relative;
}

.ThemeGrayMenu
{
    border: 1px solid #FFFFFF;
    height: 34px;
}

.ThemeGraySubMenuTable
{
    border: 1px solid #FFFFFF;
    border-collapse: collapse;
    width: 200px;
    text-align: left;
    vertical-align: middle;
    background-color: white;
    /* background:linear-gradient(to top, #999999 , #AAAAAA); */
    margin: 0px;
}

.ThemeGraySubMenu
{
    margin-top: 1px;
}

.ThemeGraySubMenuTable tr td
{
    border: 0px;
    height: 30px;
}

.ThemeGrayMenuItem,.ThemeGrayMenuItemHover,.ThemeGrayMenuItemActive
{
    color:      #FFFFFF;
    cursor:     default;
    border: 0px;
}

.ThemeGrayMenuItem
{
    text-align: left;
    border:     0px;
    background-color: rgba(192, 192, 192, 0.33);
}


.ThemeGrayMainItem
{
    width:150px;
    text-align: center;
    color: #000000;
    font-weight:normal;
    background-color: rgba(192, 192, 192, 0.33);
    /* background:linear-gradient(to top, #999999 , #AAAAAA); */
    border-radius: 2px;
    border:     0px;
    border-bottom: 1px solid transparent;

}

.ThemeGrayMainItemHover
{
    width:150px;
    text-align: center;
    border:     0px;
    color: #000000;
    background-color: 	 rgba(35, 176, 186, 0.33);
    /* background:linear-gradient(to top, #888800 , #999900); */
    border-radius: 2px;
    font-weight: normal;
    border-bottom: 1px solid rgb(35, 176, 186);
}

.ThemeGrayMainItemActive
{
    width:150px;
    text-align: center;
    border:     0px;
    color: #FFFFFF;
    background-color: 	 rgba(35, 176, 186, 0.33);
    /* background:linear-gradient(to top, #888800 , #999900); */
    border-radius: 2px;
    font-weight: normal;
    border-bottom: 1px solid rgb(35, 176, 186);
}

.ThemeGrayMenuItemHover,
.ThemeGrayMenuItemActive
{
    background-color: 	 rgba(35, 176, 186, 0.33);
    /* background:linear-gradient(to top, #888800 , #999900); */
    border-radius: 2px;
    font-weight: normal;
}

/* horizontal main menu sub components */
/* panel doesn't really support horizontal menus */
/* there are simpler approaches, but the setting here allows me to
   set a background image for the menu without lines all over it */

.ThemeGrayMainFolderLeft,
.ThemeGrayMainItemLeft,
.ThemeGrayMainFolderText,
.ThemeGrayMainItemText,
.ThemeGrayMainItemRight,
.ThemeGrayMainFolderRight
{
    border: 0px;
    background-color: transparent;
}

/* sub menus sub components */

.ThemeGrayMenuFolderLeft,
.ThemeGrayMenuItemLeft
{
    border:     0px;
    white-space:    nowrap;
}

.ThemeGrayMenuFolderText,
.ThemeGrayMenuItemText
{
    color:#000000;
    border:     0px;
    white-space:    nowrap;
    background-color:   inherit;
}

.ThemeGrayMenuItemRight,
.ThemeGrayMenuFolderRight
{
    color: #FFFFFF;
    text-align: right;
    border:     0px;
    white-space:    nowrap;
    background-color:   inherit;
    width: 10px;
}

.ThemeGrayMenuItemLeft,
.ThemeGrayMenuFolderLeft
{
    color: #FFFFFF;
    text-align: center;
    border:     0px;
    white-space:    nowrap;
    background-color:   inherit;
    width: 21px;
    padding-left: 3px;
    padding-right: 3px;
}

.ThemeGrayMenuItemText,
.ThemeGrayMenuFolderText
{
    color: #FFFFFF;
    text-align: left;
    border:     0px;
    min-width: 200px;
}

/* hoover and active border */
.ThemeGrayMenuItemHover .ThemeGrayMenuFolderLeft,
.ThemeGrayMenuItemActive .ThemeGrayMenuFolderLeft,
.ThemeGrayMenuItemHover .ThemeGrayMenuItemLeft,
.ThemeGrayMenuItemActive .ThemeGrayMenuItemLeft,
.ThemeGrayMenuItemHover .ThemeGrayMenuFolderText,
.ThemeGrayMenuItemActive .ThemeGrayMenuFolderText,
.ThemeGrayMenuItemHover .ThemeGrayMenuItemText,
.ThemeGrayMenuItemActive .ThemeGrayMenuItemText,
.ThemeGrayMenuItemHover .ThemeGrayMenuFolderRight,
.ThemeGrayMenuItemActive .ThemeGrayMenuFolderRight,
.ThemeGrayMenuItemHover .ThemeGrayMenuItemRight,
.ThemeGrayMenuItemActive .ThemeGrayMenuItemRight
.ThemeGrayMenuItemHover .ThemeGrayMenuFolderLeft,
.ThemeGrayMenuItemActive .ThemeGrayMenuFolderLeft,
.ThemeGrayMenuItemHover .ThemeGrayMenuItemLeft,
.ThemeGrayMenuItemActive .ThemeGrayMenuItemLeft
.ThemeGrayMenuItemHover .ThemeGrayMenuFolderText,
.ThemeGrayMenuItemActive .ThemeGrayMenuFolderText,
.ThemeGrayMenuItemHover .ThemeGrayMenuItemText,
.ThemeGrayMenuItemActive .ThemeGrayMenuItemText
.ThemeGrayMenuItemHover .ThemeGrayMenuFolderRight,
.ThemeGrayMenuItemActive .ThemeGrayMenuFolderRight,
.ThemeGrayMenuItemHover .ThemeGrayMenuItemRight,
.ThemeGrayMenuItemActive .ThemeGrayMenuItemRight
{
    border:     0px;
}

.ThemeGraySubMenuTable tr td.ThemeGrayMenuSplit
{
    height:     1px;
    border:     0px;
    background-color: rgba(192, 192, 192, 0.33);
    overflow:   hidden;
}

div.ThemeGrayMenuSplit
{
    margin: 0px;
    height: 1px;
    overflow: hidden;
}

/* image shadow animation */

/*
    seq1:   image for normal
    seq2:   image for hover and active

    To use, in the icon field, input the following:
    <img class="seq1" src="normal.gif" /><img class="seq2" src="hover.gif" />
*/

.ThemeGrayMenuItem img.seq1
{
    display:    inline;
}

.ThemeGrayMenuItemHover seq2,
.ThemeGrayMenuItemActive seq2
{
    display:    inline;
}

.ThemeGrayMenuItem .seq2,
.ThemeGrayMenuItemHover .seq1,
.ThemeGrayMenuItemActive .seq1
{
    display:    none;
}

.ThemeGrayMenuItem .ThemeGrayMenuFolderRight div.ThemeGrayMenuFolderRightBackground,
.ThemeGrayMenuItemHover .ThemeGrayMenuFolderRight div.ThemeGrayMenuFolderRightBackground
{
    background-image: url(/images/item-pointer-mover2.gif);
    background-repeat: no-repeat;
    background-position: center center;
    width: 10px;
    height: 100%
}

.ThemeGrayMenuSplit hr
{

    width: 99%;

    border: 1px solid rgba(35, 176, 186, 0.33);
    background-color: rgba(192, 192, 192, 0.33);
}

/* Main menu JSCook End */