/** *******************************************************************************************************
 *  Dropdown Menu Styles
 *  *******************************************************************************************************
 */
.jx-menu, .jx-menu * {
    margin  : 0;
    padding : 0;
    z-index : 1500;
    width   : auto;
    height  : auto;
}

.jx-menu li {
    list-style  : none;
    float       : left;
}

.jx-menu li a {                         /* <-- main link style */
    display         : block;
    color           : #787878 !important;
    text-align      : center;
    text-decoration : none !important;
}

.jx-menu li a:hover {                   /* <-- main link hover style */
    /* none for now */
}

.jx-menu div {                          /* <-- dropdown style */
    position        : absolute;
    display         : none;
    background-color: #c7c8ca;
    border          : 3px solid #c7c8ca;
}

.jx-menu div a {                        /* <-- dropdown link style */
    position        : relative;
    display         : block;
    padding         : 2px 0px 2px 17px;
    width           : 155px;            /* <-- must set width here */
    white-space     : nowrap;
    text-align      : left;
    text-decoration : none;
    background-color: transparent;
    color           : #6a6a6a;
    font            : 11px arial;
    z-index         : 1500;
}

.jx-menu div a:hover {                  /* <-- dropdown link hover style */
    background-color: #e0e1e2;
    color           : #6a6a6a;
}

.jx-menu2, .jx-menu2 * {
    margin  : 0;
    padding : 0;
    z-index : 1500;
    width   : auto;
    height  : auto;
}

.jx-menu2 li {
    list-style  : none;
    float       : left;
}

.jx-menu2 li a {                         /* <-- main link style */
    display         : block;
    color           : #444 !important;
    text-align      : center;
    text-decoration : none !important;
}

.jx-menu2 li a:hover {                   /* <-- main link hover style */
    /* none for now */
}

.jx-menu2 div {                          /* <-- dropdown style */
    position        : absolute;
    display         : none;
    background-color: #ffffff;
    border          : 1px solid #999;
}

.jx-menu2 div a {                        /* <-- dropdown link style */
    position        : relative;
    display         : block;
    padding         : 1px 0px 1px 18px;
    width           : 165px;            /* <-- must set width here */
    white-space     : nowrap;
    text-align      : left;
    text-decoration : none;
    background-color: transparent;
    color           : #444;
    font            : 11px arial;
    z-index         : 1500;
}

.jx-menu2 div a:hover {                  /* <-- dropdown link hover style */
    text-decoration : underline !important;
}

.jx-adframe, .jx-adframe * {
    z-index : 1;
    margin  : 0;
    padding : 0;
}



/** *******************************************************************************************************
 *  Dynamic Form Styles
 *  *******************************************************************************************************
 */
.jx-field {                             /* <-- default style for jx-fields */
    font-family      : arial, verdana; 
    font-size        : 10px;
    margin           : 0;
    padding          : 0;
    padding-top      : 1px;
    padding-left     : 1px;
    height           : 18px;
    background-color : #FFFFFF;
    border-top       : 1px solid #848484;
    border-left      : 1px solid #C3C3C3;
    border-right     : 1px solid #C3C3C3;
    border-bottom    : 1px solid #E1E1E1;
}
 
.jx-field-active {                      /* <-- style for active field (on focus) */
    background-color : #FDFDFF !important;
    border-top       : 1px solid #000000 !important;
    border-left      : 1px solid #888888 !important;
    border-right     : 1px solid #888888 !important;
    border-bottom    : 1px solid #A8A8A8 !important;
}

.jx-field-error {                       /* <-- style for field with error (NO focus) */
    background-color : #FFF1EF !important;
    border-top       : 1px solid #E23232 !important;
    border-left      : 1px solid #E23232 !important;
    border-right     : 1px solid #E23232 !important;
    border-bottom    : 1px solid #E23232 !important;
}

.jx-field-active-error {                /* <-- style for active field with error (on focus) */
    background-color : #FFFFFF !important;
    border-top       : 1px solid #E23232 !important;
    border-left      : 1px solid #E23232 !important;
    border-right     : 1px solid #E23232 !important;
    border-bottom    : 1px solid #E23232 !important;
}



/** *******************************************************************************************************
 *  Dynamic For ERROR Tooltip styles (use !important for styles)
 *  *******************************************************************************************************
 */
.jx-tooltip, .jx-tooltip table, .jx-tooltip table td {
    margin          : 0 !important;
    padding         : 0 !important;
    border-width    : 0 !important;
    border-spacing  : 0 !important;
    border-style    : none !important;
    height          : 32px !important;
    z-index         : 150 !important;
    background-color: transparent !important;
}

.jx-tooltip {
    position    : absolute;
    visibility  : hidden;
    display     : inline;
}

.jx-tooltip table td.ttleft {           /* <-- left side of tooltip */
    background-image    : url(/content/shared/jx/jx-images/tooltip-left.gif);
    background-repeat   : no-repeat;
    width               : 20px !important;
}

.jx-tooltip table td.ttcenter {         /* <-- center of tooltip (where text is displayed */
    background-image    : url(/content/shared/jx/jx-images/tooltip-center.gif);
    background-repeat   : repeat-x;
    vertical-align      : top !important;
    text-align          : center !important;
    font-size           : 11px !important;
    font-weight         : bold !important;
    color               : #E23232 !important;
    padding-top         : 6px !important;
}

.jx-tooltip table td.ttright {          /* <-- right side of tooltip */
    background-image    : url(/content/shared/jx/jx-images/tooltip-right.gif);
    background-repeat   : no-repeat;
    width               : 13px !important;
}



/** *******************************************************************************************************
 *  QAS Address Verification Popup styles
 *  *******************************************************************************************************
 */
.jx-address-pop * {
    margin      : 0;
    padding     : 0;
    font-family : arial, verdana;
    font-size   : 11px;
}

.jx-address-pop p {                     /* <-- USPS error message at top of popup */
    color       : #E23232;
}

.jx-address-pop .address-option {       /* <-- option style (wraps the radio button) */
    display     : block;
    font-size   : 12px !important;
    font-weight : bold;
    padding     : 5px;
    margin-top  : 5px;
    height      : 25px;
    clear       : both;
    cursor      : pointer;
    white-space : nowrap;
}

.jx-address-pop .address-option-content {   /* <-- content block that appears below the option */
    display     : block;
    padding-left: 30px;
    clear       : both;
}

.jx-address-pop .address-option-content-hidden {  /* <-- content block when option is not selected */
    opacity     : 0.5;
    filter      : alpha(opacity = 50);
}

.jx-address-pop .form-field {               /* <-- block inside content with an input field (for when more info is needed) */
    display     : inline;
    float       : left;
    width       : 230px;
    margin      : 10px;
}

.jx-address-pop .form-field input {         /* <- the form input field itself */
    font-family      : arial, verdana; 
    font-size        : 10px;
    margin           : 0;
    padding          : 0;
    padding-top      : 1px;
    padding-left     : 1px;
    height           : 18px;
    width            : 80px;
    background-color : #FFFFFF;
    border-top       : 1px solid #848484;
    border-left      : 1px solid #C3C3C3;
    border-right     : 1px solid #C3C3C3;
    border-bottom    : 1px solid #E1E1E1;
}

.jx-address-pop .recommended-address {      /* <-- block that shows the "recommened" address */
    display          : inline;
    float            : left;
    width            : 230px;
    background-color : #e4f4e4;
    padding          : 10px;
    margin           : 10px;
}

.jx-address-pop .entered-address {          /* <-- block that shows the "you entered" address */
    display          : inline;
    float            : left;
    width            : 230px;
    background-color : #f8e4e4;
    padding          : 10px;
    margin           : 10px;
}

.jx-address-pop .picklist {                 /* <-- block that displays the list of "possible values" */
    display          : block;
    width            : auto;
    margin           : 10px;
    padding          : 5px;
    line-height      : 16px;
    height           : 100px;
    overflow         : auto;
    background-color : #f1f1f1;
}

.jx-address-pop a.show-picklist {           /* <-- the link to show the "possible values" */
    color   : #cc290e;
}

.jx-address-pop a.show-picklist:hover {
    color   : #cc9933;
}

.jx-address-pop a.picklist-item {           /* <-- the links for each "possible value" */
    color   : #cc290e;
}

.jx-address-pop a.picklist-item:hover {
    color   : #cc9933;
}