/******************************************************************************
 Font embedding
******************************************************************************/
@font-face
{
    font-family:HPSimplified;
    font-style:normal;
    font-weight:normal;
    src:url("fonts/latin-e-regular-eot.eot");
    src:
        url('fonts/latin-e-regular-eot.eot?#iefix') format('embedded-opentype'), 
        url('fonts/latin-e-regular-woff.woff') format('-woff.woff'),
        url('fonts/latin-e-regular-ttf.ttf') format('truetype');
}

@font-face
{
    font-family:HPSimplified;
    font-style:normal;
    font-weight:bold;
    src:url('fonts/latin-e-bold-eot.eot');
    src:
        url('fonts/latin-e-bold-eot.eot?#iefix') format('embedded-opentype'), 
        url('fonts/latin-e-bold-woff.woff') format('-woff.woff'), 
        url('fonts/latin-e-bold-ttf.ttf') format('truetype');
}

@font-face
{
    font-family:HPSimplified;
    font-style:italic;
    font-weight:normal;
    src:url('fonts/latin-e-regular-italic-eot.eot');
    src:
        url('fonts/latin-e-regular-italic-eot.eot?#iefix') format('embedded-opentype'), 
        url('fonts/latin-e-regular-italic-woff.woff') format('-woff.woff'), 
        url('fonts/latin-e-regular-italic-ttf.ttf') format('truetype');
}

@font-face
{
    font-family:HPSimplified;
    font-style:italic;
    font-weight:bold;
    src:url('fonts/latin-e-bold-italic-eot.eot');
    src:
        url('fonts/latin-e-bold-italic-eot.eot?#iefix') format('embedded-opentype'), 
        url('fonts/latin-e-bold-italic-woff.woff') format('-woff.woff'), 
        url('fonts/latin-e-bold-italic-ttf.ttf') format('truetype');
}

@font-face
{
    font-family:HPSimplified;
    font-style:normal;
    font-weight:lighter;
    src:url('fonts/latin-e-light-eot.eot');
    src:
        url('fonts/latin-e-light-eot.eot?#iefix') format('embedded-opentype'), 
        url('fonts/latin-e-light-woff.woff') format('-woff.woff'), 
        url('fonts/latin-e-light-ttf.ttf') format('truetype');
}

@font-face
{
    font-family:HPSimplified;
    font-style:italic;
    font-weight:lighter;
    src:url('fonts/latin-e-light-italic-eot.eot');
    src:
        url('fonts/latin-e-light-italic-eot.eot?#iefix') format('embedded-opentype'), 
        url('fonts/latin-e-light-italic-woff.woff') format('-woff.woff'), 
        url('fonts/latin-e-light-italic-ttf.ttf') format('truetype');
}
/******************************************************************************
 * GLOBAL
 *****************************************************************************/
*
{
    padding: 0;
    margin: 0;
}
html
{
    _filter: expression(document.execCommand("backgroundImageCache", false, true));
}
body
{
    background: #fff;
    font-size: 14px;
    color: #000;
}
a img
{
    border: 0;
}
a
{
    color: #007dba;
}
em
{
    font-style: normal;
}
/******************************************************************************
 * BASIC
 *****************************************************************************/
h6{
   font-family: HPSimplified, Arial, Helvetica, Sans-Serif;
   color: #5A5A5A;
       outline: none;
    /* box sizing makes all elements respect the same rule when setting their dimensions */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 1em;
}
p1#greyBorderPanel {
  padding: 2px;
  margin: 0px;
  color: #555555;
  background-color: #eeeeee;
  border: #dddddd 2px solid;
}
body, input, button, select, textarea, a, p, ul, ol, li, span, h1, h2, h3, h4, h5, div, dl, dd, dt, table, thead, tbody, tfoot, tr, th, td
{
    font-family: HPSimplified, Arial, Helvetica, Sans-Serif;
    outline: none;
    /* box sizing makes all elements respect the same rule when setting their dimensions */
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
table, input, select, textarea, button, a
{
    font-size: 1em;
}
/* forces controls to have no default behavior for rendering... all renders as a solid box */
body.js input, 
body.js select, 
body.js textarea
{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
/* Used to separate code portions for accessibility pourposes */
hr
{
    display: none;
}
/******************************************************************************
 * HEADER

+=============================================================================+
| +-----------+ +---------------------------------+       +-----------------+ |
| |           | | strong.product                  |       | p#WelcomeHeader | |
| | p.brand a | +---------------------------------+       +-----------------+ |
| |           | | p#HomeDeviceName p#HomeDeviceId |       |      a#EwsLogin | |
| +-----------+ +---------------------------------+       +-----------------+ |
+-----------------------------------------------------------------------------+
| div#menuTabs                                                                |
+-----------------------------------------------------------------------------+

<div#header>
    <div.product>
        <div.user>
            <div.user-content>
                <p#HomeUserName> User: NAME </p>
                <p>
                    <a#HomeLink.home> Home </a>
                    |
                    <a#EwsLogoff.logoff> Sign Out </a>
                </p>

                OR

                <p#WelcomeHeader> WELCOME </p>
                <p>
                    <a#EwsLogin.logoff> Sign In </a>
                </p>
            </div>
        </div>

        <p#brandLink.brand>
            <a> http://www.hp.com </a>
            <strong.product> PRODUCT NAME </strong>
        </p>

        <div.info>
            <p#HomeDeviceName.device-name> DEVICE NAME </p>
            <p#HomeDeviceId.ip-address> ADDRESS </p>
        </div>

        <div#menuTabs.tabs>
            ...
        </div>
    </div>
</div>

 *****************************************************************************/
#page, #header
{
    min-width: 800px;
}
#page
{
    z-index: 1;
}
#header
{
    position: fixed;
    top: 0;
    left: 0;
    height: 125px;
    width: 100%;
    z-index: 10;
}
/* The product information and the login */
#header div.product
{
    position: relative;
    background: #fff;
    padding: 0;
    height: 89px;
    color: #000;
    border-top: 5px solid #0096d6;
    display: block;
}
/* The brand link of the HP logo */
#header p.brand a
{
    position: absolute;
    top: 18px;
    left: 30px;
    background: url(img/hp_logo.png) no-repeat;
    text-decoration: none;
    text-indent: -1000em;
    height: 48px;
    width: 48px;
}
#header p.brand strong
{
    position: fixed;
    top: 12px;
    left: 108px;
    font-size: 2.3em;
    right: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
/* The login and header image */
#header div.user
{
    position: fixed;
    right: 30px;
    top: 22px;
    text-align: right;
    z-index: 11;
}
#header div.user-content
{
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
    display: inline-block;
}
#header div.user-content a
{
    color: #000;
    text-decoration: underline;
    line-height: 1.85em;
    vertical-align: middle;
    margin-left: 5px;
}
#header div.user-content a:hover,
#header div.user-content a:focus
{
    color: #007dba;
}
/* The description of the product and IP */
#header div.info
{
    position: fixed;
    top: 50px;
    left: 108px;
    font-size: 1.5em;
    font-weight: lighter;
    right: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
#header div.info p
{
    display: inline;
}
#header div.info p.ip-address
{
    padding-left: 1em;
}
#header div.user-content p#HomeUserName
{
    width: 18em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	display: inline-block;
}
#header div.user-content a.home,
#header div.user-content a.msg-center 
{
    width:17px;
    height:1.85em;
	background-position: 0px 5px;
	background-repeat: no-repeat;
	text-decoration: none;
	text-indent: -1000em;
	display: inline-block;
	text-align: left;
}
#header div.user-content a.home:hover,
#header div.user-content a.home:focus
{
	background-position: 0px -95px;
}
/******************************************************************************
 * MESSAGE CENTER: ICON AND STYLIZED TOOLTIP
 *****************************************************************************/
#header div.user-content a.msg-center.info
{
	background-position: 0px -95px;
}
#header div.user-content a.msg-center.warning
{
	background-position: 0px -195px;
}
#header div.user-content a.msg-center.error
{
	background-position: 0px -295px;
}
#header div.user-content a.msg-center.job-status
{
	background-position: 0px -395px;
}
#header div.user-content a.home 
{
    background-image: url(img/home.png);
}
#header div.user-content a.msg-center 
{
    background-image: url(img/msg-center.png);
}
.tooltip div.body ul.fancy
{
    list-style: none;
	margin: 0;
	padding: 0;
}
.tooltip div.body ul.fancy li
{
	background-image: url(img/msg-center.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	text-decoration: none;
	padding-left: 24px;
	margin: 8px 0;
}
.tooltip div.body ul.fancy li.info
{
	background-position: 0px -98px;
}
.tooltip div.body ul.fancy li.warning
{
	background-position: 0px -198px;
}
.tooltip div.body ul.fancy li.error
{
	background-position: 0px -298px;
}
.tooltip div.body ul.fancy li.job-status
{
	background-position: 0px -398px;
}
/******************************************************************************
 * SEARCH ON HEADER
 *****************************************************************************/
#header div.searchBox
{
    position: relative;
    white-space:nowrap;
    display: inline-block;
    vertical-align: bottom;
}
#header div.searchBox div.text
{
    position: relative;
    background-color: #fff;
}
#header div.searchBox div.text,
#header div.searchBox div.text input
{
    width:10em;
    height:1.85em;
}
#header div.searchBox div.text input
{
    padding-right: 26px;
    background-color: transparent;
    z-index: 3;
    position: absolute;
    right: 0;
}
#header div.searchBox div.text div.magnifier
{
    position: absolute;
    top:2px;
    right:2px;
    width:22px;
    height:22px;
    background-image: url(img/magnifier.png);
	background-repeat: no-repeat;
	background-position: 2px 1px;
    z-index: 2;
}
#header div.searchBox div.text input[type=text]:hover + div.magnifier,
#header div.searchBox div.text input[type=text]:focus + div.magnifier
{
    background-position: 2px -99px;
}
/******************************************************************************
 * CONTROL - TABS
 *****************************************************************************/
/* floating hacks */
div.tabs, 
div.tabs ul,
div.secondarytabs,
div.secondarytabs ul
{
    zoom:1;
    _height: 1%;
}
div.tabs
{
    display: block;
    margin: 0!important;
    border-collapse: collapse;
    position: relative;
    background-color: #5a5a5a;
    padding: 0 0 0 1em!important;
    height: 36px;
}
div.secondarytabs
{
    display: block;
    margin: 0!important;
    border-collapse: collapse;
    position: relative;
    background-color: #5a5a5a;
    padding: 0 0 0 1em!important;
    height: 34px;
}
div.tabs ul,
div.secondarytabs ul
{
    margin: 0;
    display: table-row;
    display: inline\9;
    *padding: 0;
    white-space: nowrap;
}
div.tabs li,
div.secondarytabs li
{
    margin: 0;
    display: table-cell;
    display: inline\9;
    vertical-align: center;
    border: 0;
    text-decoration: none;
    text-align: center;
    *float: none;
    *position: relative;
    *margin: 0;
    *zoom: 1;
}
div.tabs a,
div.tabs span,
.buttonTab
{
    padding: 0 1em;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    float: none;
    *float: left;
    clear: both;
    height: 36px;
    line-height: 36px;
    font-size: 1.3em;
}
div.secondarytabs a,
div.secondarytabs span,
.buttonTab
{
    padding: 0 1em;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    float: none;
    *float: left;
    clear: both;
    height: 36px;
    line-height: 34px;
    font-size: 1.3em;
}
div.tabs input.buttonTab,div.secondarytabs input.buttonTab
{
    *padding: 0;
}
div.tabs a,div.secondarytabs a
{
    *float: none;
}
div.tabs a:hover,div.secondarytabs a:hover
.buttonTab:hover
{
    background-color: #767676;
}
div.tabs a.current:hover,div.secondarytabs a.current:hover
{
    background-color: #006699;
}
/* The menu tab is inside of "a" and the others in "li -> span" */
div.tabs li.current span,div.secondarytabs li.current span,
div.tabs a.current,div.secondarytabs a.current,
div#menuTabs li.current span,
div#menuTabs li.current a
{
    background-color: #0096d6;
    border: 0;
    white-space: nowrap;
}
.buttonTab
{
    border: none;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
}
div.tabs li.current,div.secondarytabs li.current
{
    *padding-bottom: 0;
    *border-bottom-width: 0;
}
/* The border in the page of the tab */
div.tab-content,div.secondarytabs-content
{
    margin: 0;
}
#menuTabs
{
    position: absolute;
    top: 87px;
    left: 0;
    width: 100%;
    box-shadow: 0 3px 6px 0 #ccc;
    -moz-box-shadow: 0 3px 6px 0 #ccc;
    -webkit-box-shadow: 0 3px 6px 0 #ccc;
}
div.sections div.tabs,div.secondarytabs
{
    margin: 0 -2.15em 30px -2.15em!important;
    overflow: hidden;
}
/******************************************************************************
 * COLUMNS
 *****************************************************************************/
/* floating hacks */
div.columns, div.columns-content, div.content, div.column-menu, div.column-content
{
    zoom: 1;
    _height: 1%;
}
div.columns:after, div.columns-content:after, div.content:after, div.column-menu:after, div.column-content:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div.columns
{
    position: fixed;
    top: 125px;
    left: 0;
    right: 0;
    bottom: 50px;
}
div.column-menu ul#localMenu
{
    position: fixed;
    top: 125px;
    left: 0;
    bottom: 50px;
    width: 230px;
    *width: 192px;
    padding: 30px 8px 8px 30px;
    border-right: 1px solid #ccc;
    overflow-y: auto;
}
div.column-content
{
    position: fixed;
    top: 125px;
    left: 230px;
    right: 0;
    bottom: 50px;
}
/******************************************************************************
 * MENUS
 *****************************************************************************/
/* Other Links */
div.other-links
{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    *height: 40px;
    border-top: 1px solid #ccc;
    background-color: #f2f2f2;
    padding: 5px 30px;
    color: #5a5a5a;
}
div.other-links h3
{
    display: none;
}
div.other-links ul
{
    float: right;
    text-align: right;
    display: table-row;
    display: inline\9;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
div.other-links li
{
    display: table-cell;
    display: inline\9;
}
div.other-links li+li
{
    border-left: 1px solid #5a5a5a;
}
div.other-links a
{
    color: #5a5a5a;
    display: inline-block;
    font-weight: normal;
    padding: 0 6px;
    text-decoration: none;
    font-size: .9em;
    white-space: nowrap;
    max-width: 150px;
    width: auto;
    width: 150px\9;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
	text-align: right\9;
}
div.other-links a:hover,
div.other-links a:focus
{
    text-decoration: underline;
}
div.other-links ul:after
{
    position: absolute;
	bottom: 4px;
	right: 30px;
    content: "\00A9		Copyright 2010-2017 HP Development Company, L.P.";
    font-size: .9em;
    white-space: nowrap;
}
/* Navigation
 * Global - horizontal menu
 * Local - vertical menu */
/* floating hacks */
ul.nav-global, 
ul.nav-local
{
    zoom: 1;
    _height: 1%;
}
ul.nav-global:after, 
ul.nav-local:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
ul.nav-local a.state, 
ul.nav-local span.state, 
ul.nav-local li.state a,
ul.nav-local li.state span
{
    padding-left: 20px;
    background: url(img/status-icons.png) no-repeat 0px 2px;
}
ul.nav-local
{
    list-style: none;
    margin: 0;
    border: none;
    padding: 0;
    display: block;
}
ul.nav-local li
{
    float: left;
    clear: both;
    width: 100%;
    padding: 0 0 8px 0;
}
ul.nav-local li a,
ul.nav-local li span
{
    display: block;
    padding: 0;
    font-weight: normal;
    color: #5a5a5a;
    text-decoration: none;
}
ul.nav-local li a:hover,
ul.nav-local li span:hover,
ul.nav-local li a:focus,
ul.nav-local li a.open,
ul.nav-local li span.open
{
    color: #007dba;
}
ul.nav-local li.title
{
    color: #BCCEDF;
    letter-spacing: 1px;
    padding: 5px 5px 3px 15px;
    text-transform: uppercase;
    border-bottom: 1px solid #007dba;
    border-color: #EEE;
}
ul.nav-local li.current a,
ul.nav-local li.current span
{
    color: #007dba;
}
ul.nav-local li.MenuItem b /* Naveen */
{
    color: #5a5a5a;
}
ul.nav-local li.sub-menu
{
    border-top: 1px solid #fff;
    border-bottom: none;
    padding-left: 26px;
}
ul.nav-local li.parent-menu a
{
    background-image: url(img/treeview.png);
    background-repeat: no-repeat;
    background-position: 0 -155px;
    padding-left: 26px;
    cursor: pointer;
    height: 26px;
    float: left;
}
ul.nav-local li.parent-menu.collapsed a
{
    background-position: 0 -103px;
}
ul.nav-local li.parent-menu ul
{
    list-style: none;
    padding-top: 8px;
}
ul.nav-local li.parent-menu.collapsed ul
{
    display: none;
}
ul.nav-local li.sub-menu a
{
    background-image: none;
    font-weight: normal;
}
ul.nav-local li.state a,
ul.nav-local li.state.sub-menu a
{
    padding-left: 26px;
    background-position: 0 2px;
    background-image: url(img/status-icons.png);
    background-repeat: no-repeat;
}
ul.nav-local li.state.sub-menu a
{
    padding-left: 44px;
    background-position: 24px 2px;
}
/******************************************************************************
 * PAGE HEADER
 *****************************************************************************/
div.page-header
{
    position: fixed;
    top: 125px;
    left: 230px;
    right: 0;
    height: 76px;
    *height: 24px;
    padding: 30px 30px 22px 30px;
    background-image: url(img/header_separator.png);
    background-repeat: repeat-x;
    background-position: 0 bottom;
}
div.page-header h1
{
    font-size: 1.4em;
    font-weight: bold;
    color: #5a5a5a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.page-header_Airprint
{
    position: fixed;
    top: 125px;
    left: 0px;
    right: 0;
    height: 76px;
    *height: 24px;
    padding: 30px 30px 22px 30px;
    background-image: url(img/header_separator.png);
    background-repeat: repeat-x;
    background-position: 0 bottom;
}
/** Link Help */
div.page-header a.help
{
    float: right;
    margin: -20px 0 0 0;
    _position: relative;
    _display: block;
}
/******************************************************************************
 * PAGE CONTENT
 *****************************************************************************/
div#content
{
    position: fixed;
    top: 250px;
    left: 230px;
    right: 0;
    bottom: 50px;
    overflow: auto;
    padding: 30px 30px 8px 30px;
}
div#content_Airprint
{
    position: fixed;
    top: 250px;
    left: 0px;
    right: 0;
    bottom: 50px;
    overflow: auto;
    padding: 30px 30px 8px 30px;
}
div.secondarytab {
    position: fixed;
    top: 202px;
    left: 230px;
    right: 0;
    bottom: 50px;
    padding: 30px 30px 8px 30px;
}
div#content > form
{
    min-width: 800px;
}
div#content.fixed
{
    bottom: 96px;
}
div.content p.page-description
{
    margin: 0 0 10px 0;
}

body.mac.safari div#content.fixed
{
    bottom: 50px;
    padding-bottom: 64px;
}

/******************************************************************************
 * width <= 1024px responsive solution
 * Vertical menu expands on hover
 *****************************************************************************/
@media (max-width: 1024px)
{
/* halidha*/

.tooltip
{
display: none !important;
}
.tooltip div.arrow
{
display: none !important;
}
    #page div.columns div.columns-content div.column.column-content,
    #page div.columns div.columns-content div.column.column-content div.sections div.buttons.bottom.fixed, 
    #page div.columns div.columns-content div.column.column-content div.buttons.fixed
    {
        left: 0px;
    }
    #page div.columns div.columns-content div.column.column-menu ul#localMenu
    {
        /* removed animation for now
        -webkit-transition: left .3s ease-out;
        -moz-transition: left .3s ease-out;
        -o-transition: left .3s ease-out;
        transition: left .3s ease-out;*/
        background-color: #fff;
        background-image: url(img/menu-arrow-blue-r.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding-left: 30px;
        -webkit-box-shadow: 3px 0 6px 0 #ccc;
        -moz-box-shadow: 3px 0 6px 0 #ccc;
        box-shadow: 3px 0 6px 0 #ccc;
        overflow-y: hidden;
        z-index: 5;
        /* vertical menu as vertical bar on the left */
        left: -215px;
        background-position: 0px 50%;
        /* vertical menu as a tag on the left */
        left: -205px;
        background-position: 5px 50%;
        border-radius: 0 8px 8px 0;
        top: 50%;
        bottom: 50%;
        margin: -50px -10px -50px 0;
    }
    #page div.columns div.columns-content div.column.column-menu ul#localMenu:hover
    {
        /* vertical as for larger resolutions */
        left: 0px;
        background-image: none;
        overflow-y: auto;
        border-radius: 0;
        top: 125px;
        bottom: 50px;
        margin: 0;
    }
    /* Vertical menu items are "invisible" when the menu is off */
    #page div.columns div.columns-content div.column.column-menu ul#localMenu li
    {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
    }
    #page div.columns div.columns-content div.column.column-menu ul#localMenu:hover li
    {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
    }
    /**************************************************************************
     * Horizontal menu turns into a drop down menu 
     *************************************************************************/
    div.sections div.tabs
    {
        overflow: visible;
    }
    div.tabs ul li.current
    {
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
    }
    div.tabs ul li.current a,
    div.tabs ul li.current span
    {
        background-color: #5a5a5a!important;
        background-image: url(img/menu-buttons.png);
        background-repeat: no-repeat;
        background-position: 13px 11px;
        background-attachment: scroll;
        padding-left: 48px;
    }
    div.tabs ul:hover li.current a,
    div.tabs ul:hover li.current span,
    div.tabs ul li.current a:hover
    {
        background-position: 13px -39px;
    }
    div.tabs ul
    {
        overflow: hidden;
        height: 0px;
        width: 0px;
        /* removed animation for now
        -webkit-transition: width .3s ease-out;
        -moz-transition: width .3s ease-out;
        -o-transition: width .3s ease-out;
        transition: width .3s ease-out;*/
        -webkit-box-shadow: 3px 3px 6px 0 #ccc;
        -moz-box-shadow: 3px 3px 6px 0 #ccc;
        box-shadow: 3px 3px 6px 0 #ccc;
        position: relative;
    }
    div.tabs ul:hover
    {
        position: absolute;
        top: 0px;
        left: 30px;
        display: block;
        background-color: #5a5a5a;
        height: auto;
        min-width: 230px;
        width: auto;
        margin-top: 36px;
        overflow: inherit;
        z-index: 2000;
    }
    div.tabs ul li
    {
        display: none;
    }
    div.tabs ul:hover li.current
    {
        top: -36px;
        left: -30px;
    }
    div.tabs ul:hover li
    {
        display: block;
    }
    div.tabs ul li a,
    div.tabs ul li input
    {
        width: 100%;
        display: block;
        text-align: left;
    }
    div.tabs ul li a:hover,
    div.tabs ul li input:hover
    {
        background-color: #0096d6;
    }
    /**************************************************************************
     * Horizontal menu turns into an item with left and right arrows 
     *************************************************************************
    div.tabs li
    {
        display: none;
    }
    div.tabs li.current,
    div.tabs li.before,
    div.tabs li.after
    {
        display: table-cell;
    }
    div.tabs li.before a,
    div.tabs li.after a,
    div.tabs li.before input,
    div.tabs li.after input
    {
        background-image: url(img/menu-buttons.png);
        background-repeat: no-repeat;
        width: 30px;
        text-indent: -1000em;
    }
    div.tabs li.before a,
    div.tabs li.before input
    {
        background-position: 50% -91px;
    }
    div.tabs li.after a,
    div.tabs li.after input
    {
        background-position: 50% -141px;
    }
    /* OPTION 1: 
     * current tab is gray
     * hover turns the button blue *
    div.tabs li.current a,
    div.tabs li.current span
    {
        background-color: transparent!important;
    }
    div.tabs li.current:hover a,
    div.tabs li.before:hover a,
    div.tabs li.after:hover a,
    div.tabs li.current:hover input,
    div.tabs li.before:hover input,
    div.tabs li.after:hover input
    {
        background-color: #0096d6;
    }
    /* OPTION 2: 
     * current tab is blue
     * hover changes the image only *
    div.tabs li.current span,
    div.tabs li.current span:hover,
    div.tabs li.current a
    {
        background-color: #0096d6;
    }
    div.tabs li.before:hover a,
    div.tabs li.after:hover a,
    div.tabs li.before:hover input,
    div.tabs li.after:hover input
    {
        background-color: transparent!important;
    }
    div.tabs li.before:hover a,
    div.tabs li.before:hover input
    {
        background-position: 50% -191px;
    }
    div.tabs li.after:hover a,
    div.tabs li.after:hover input
    {
        background-position: 50% -241px;
    }
    /* Page header */
    div.page-header
    {
        position: absolute;
        top: 0;
        left: 0;
    }
    /* Page content */
    div#content
    {
        left: 0;
    }
    
    div.thin-width-column span.button input
    {
        max-width:60px;
    } 
}
/******************************************************************************
 * MODULE SECTIONS
 *****************************************************************************/
/* floating hacks */
div.sections, div.sections div.body
{
    zoom: 1;
    _height: 1%;
}
div.sections:after, div.sections div.body:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div.sections div.title
{
    background: #f2f2f2;
    color: #5a5a5a;
    padding: .25em 2.15em .25em 2.15em;
    margin: 0 -2.15em .75em -2.15em;
}
div.sections div.title h2,
div.sections div.titleA h2
{
    display: inline;
    font-size: 1em;
    border: 0;
}

div.sections div.titleA
{
    background: #f2f2f2;
    color: #5a5a5a;
    padding: .25em 2.15em .25em 2.15em;
    margin: 0 -2.15em .75em -1.15em;
}

div.sections div.body
{
    padding: 0 0 .75em 0;
    clear: both;
}

div.dss-bound,
div.module-locked
{
    display: none;
}
/******************************************************************************
 * FORMS
 *****************************************************************************/
/* Give the ability to the user to uses the [ENTER] for submiting and sending 
the right button. This is places right after the form beggining. */
form span.FormButtonSubmitBaseFocus
{
    position: absolute;
    left: -1000em;
    top: -1000em;
}
div.form p
{
    margin: 0 0 5px 0;

}
div.form para
{
    margin: 0 0 5px 0;
	color: #767676;
	display: block;
    font-style: normal;
}
/* a line to group control elements */
div.line
{
    clear: both;
    margin: 0;
}
/* floating hacks */
div.form,
div.form div.group,
div.form div.line,
div.form div.control
{
    zoom: 1;
    _height: 1%;
}
div.form:after,
div.form div.group:after,
div.form div.line:after,
div.form div.control:after
{
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div.form h3
{
    border-bottom: 1px solid #DADADA;
    padding: 3px 0;
    margin: 0 0 5px 0;
    font-size: 1em;
    color: #5a5a5a;
}
/******************************************************************************
 * TOOLTIP
 * jquery's Ballon widget 
<div.tooltip> 
    <h3>TITLE</h3>
    <div.body>TEXT</div>
    <div.arrow></div>
</div>
 *****************************************************************************/
div.tooltip
{
    position: absolute;
    z-index: 3000;
    max-width: 400px;
    min-width: 100px;
    margin: 15px;
    background-color: #fff;
    border: 2px solid #ccc;
}
.tooltip div.body
{
	margin: 0;
    font-size: .9em;
    font-weight: normal;
    padding: 1.45em;
    word-break: break-word;
}
.tooltip h3
{
	margin: 0;
    font-size: 1em;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding: .75em 1.45em;
}
.tooltip div.arrow
{
    display: block!important;
    border: 0;
    float: none!important;
    padding: 0;
    margin: 0;
    position: absolute;
    background-image: url(img/tooltip.png);
	background-repeat: no-repeat;
	background-position: left bottom;
    height: 15px;
    width: 30px;
}
.tooltip ul
{
    margin: 0;
    padding: 0 0 0 15px;
}
.tooltip ul li
{
    word-break: break-word;
}
.tooltip div.arrow.left
{
	right: 15px;
}
.tooltip div.arrow.right,
.tooltip div.arrow.left.top
{
    left: 15px;
}
.tooltip div.arrow.top
{
	top: -15px;
}
.tooltip div.arrow.bottom
{
    background-position: left top;
}
.tooltip div.arrow.center
{
    left: 50%;
    margin-left: -15px;
}
/******************************************************************************
 * CONTROLS - COMMON STYLES
 *****************************************************************************/
div.control
{
    padding: 1.3em 1.3em 1em 0;
    float: left;
    position: relative;
}
.right div.control,
div.control.right
{
    padding: 1.3em 0 1em 1.3em;
}
div.control label
{
    color: #5a5a5a;
    display: block;
    font-weight: bold;
    line-height: 1.45em;
    margin: -1.4em 0 0 0;
}
div.light-label div.control label
{
    font-weight: normal;
}
div.control label.disabled
{
    color: #ccc;
}
em.desc, p.desc, 
em.note, p.note, div.note, 
em.example, p.example, 
em.help, p.help
{
    padding-top: .2em;
    clear: both;
    color: #767676;
    display: block;
    font-style: normal;
	line-height: 1.3em;
}
/* same width for all form elements */
div.text,
div.textarea,
div.password,
div.select,
div.select1,
div.radio,
div.checkbox,
div.checkbox1,
div.data,
div.file,
div.action-list,
div.action-list h3 div.control-column
{
    width: 19.3em;
    *width: 18.3em;
}
div.text input,
div.textarea textarea,
div.password input,
div.select select,
div.select1 select,
div.data p,
div.action-list input.add-input
{
    width: 18em;
    *width: 17.3em;
    margin: 0;
    line-height: 1.5em;
}
div.file input
{
    width: 18.3em;
    margin: 0;
    line-height: 1.5em;
}
div.data p,
div.text input,
div.password input,
div.action-list input.add-input,
a.button span
{
    *height: 1.5em!important; /* IE 7 */
}
body.js div.control input[type=checkbox],
body.js div.control input[type=radio]
{
    position: absolute;
    top:0px;
    left:0px;
    z-index: -1;
    opacity: 0;
    filter: alpha(opacity=0);
}
/******************************************************************************
 * CONTROLS - TEXT FIELDS
<div.control.text/password/file/textarea.ID>
    <label[for=ID]>TEXT</label>
    <input[type=text/password/file]/textarea#ID>
    <em.note>NOTE</em>
</div>
 * CONTROL - DATA LITERAL FIELDS
<div.control.data>
    <label>TEXT</label>
    <p>VALUE</p>
    <em.note>NOTE</em>
</div>
******************************************************************************/
div.data.inline
{
    width: auto!important;
}
div.data.inline label
{
    display: inline;
}
div.data.inline p
{
    border: none!important;
    display: inline!important;
}
div.data p,
div.text input[type=text],
div.password input[type=password],
div.textarea textarea,
div.select1 select,
div.select select,
div.action-list input.add-input
{
    border: 2px solid #ccc;
}
div.file input[type=file]
{
    border: none;
}
div.data p,
div.text input[type=text],
div.password input[type=password],
div.file input[type=file],
div.action-list input.add-input
{
    height: 1.85em;
    padding: 0 .35em;
}
div.file input[type=file]
{
    padding: 0;
    margin: 0;
}
div.textarea textarea
{
    height: 4.71em;
    padding: 0 .35em;
    resize: none;
    overflow-y: scroll;
}
/*vishal*/
div.data para
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    border: 2px solid #ccc;
    height: 1.85em;
    padding: 0 .35em;
}
div.data p
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
}
input[type=text]
{
   width: 30 em;
}

/* hover and focus */
div.text input[type=text]:hover,
div.text input[type=text]:focus,
div.text label:hover + input[type=text], 
div.text label:focus + input[type=text], 
div.password input[type=password]:hover,
div.password input[type=password]:focus,
div.password label:hover + input[type=password], 
div.password label:focus + input[type=password], 
div.textarea textarea:hover,
div.textarea textarea:focus,
div.select1 select:hover,
div.select select:hover,
div.select1 select:focus,
div.select select:focus,
div.action-list input.add-input:hover,
div.action-list input.add-input:focus
{
	border-color: #767676;
}
/* disabled */
div.text input[type=text][disabled=disabled],
div.text label:hover + input[type=text][disabled=disabled],
div.disabled.text input[type=text],
div.disabled.text label:hover + input[type=text],
div.disabled.password input[type=password],
div.disabled.password label:hover + input[type=password],
div.disabled.textarea textarea,
div.disabled.textarea label:hover + textarea,
div.select1 select[disabled=disabled],
div.select select[disabled=disabled],
div.select1.disabled select,
div.select.disabled select
{
    border-color: #b9b8b8; 
    background-color: #e5e8e8; 
    color: #b9b8b8;
    -webkit-text-fill-color: #B9B8B8;
}
/* error */
div.control.error a select,
div.control.error div.replace input + a.menu,
div.control.error a select + a,
div.control.error input,
div.control.error textarea,
div.select-hack.error span
{
	border-color: #ff0000 !important;
}
div.select-hack.error span.select-hack-button
{
	background-position: -1px -56px !important;
}
/* error with focus and hover */
div.control.error a select:hover,
div.control.error a select:focus,
div.control.error div.replace input:hover + a.menu,
div.control.error div.replace input:focus + a.menu,
div.control.error a:hover select + a,
div.control.error a:focus select + a,
div.control.error input:hover,
div.control.error input:focus,
div.control.error textarea:hover,
div.control.error textarea:focus
{
    border-color:#bc0000 !important;
}

ul.text-replace
{
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #CCC;
    background: #fff;
    position: fixed;
    z-index: 1000;
}
ul.text-replace a,
ul.text-replace a:visited
{
    color: #007dba;
    text-decoration: none;
    display: block;
    padding: 3px 10px;
    white-space: nowrap;
}
ul.text-replace a:hover
{
    background-color: #dbedff!important;
    color: #000;
}
div.custom_text
{

}
div.custom_text input
{
    margin: 0;
    line-height: 1.5em;
}
/*vivek*/
div.custom_text1
{
    padding: .15em;
	
}
div.custom_text1 input
{
    margin: 0;
    line-height: 1.5em;
}

div.data p,
div.custom_text1 input
{
    *height: 1.5em!important; /* IE 7 */
}



div.custom_text1 input[type=text]
{
    border: 2px solid #ccc;
}
div.custom_text1 input[type=text]
{
    height: 1.85em;
    padding: 0 .35em;
}


/* hover and focus */
div.custom_text1 input[type=text]:hover,
div.custom_text1 input[type=text]:focus,
div.custom_text1 label:hover + input[type=text], 
div.custom_text1 label:focus + input[type=text]
{
                border-color: #767676;
}
/* disabled */
div.custom_text1 input[type=text][disabled=disabled],
div.custom_text1 label:hover + input[type=text][disabled=disabled],
div.disabled.custom_text1 input[type=text],
div.disabled.custom_text1 label:hover + input[type=text]
{
    border-color: #b9b8b8; 
    background-color: #e5e8e8; 
    color: #b9b8b8;
    -webkit-custom_text-fill-color: #B9B8B8;
}
div.custom_text_3width1 input
{
    width: 3.2em;
    *width: 3.3em;
}
/*vivek*/

div.custom_text_3width input
{
    width: 4.5em;
    *width: 4em;
}
div.custom_text_14width input
{
    width: 14.5em;
    *width: 14em;
}

div.custom_text input
{
    *height: 1.5em!important; /* IE 7 */
}



div.custom_text input[type=text]
{
    border: 2px solid #ccc;
}

div.custom_text input[type=text]
{
    height: 1.85em;
    padding: 0 1em;
}

div.data p
{
    white-space: nowrap;
    overflow: hidden;
    custom_text-overflow: ellipsis;
    line-height: 1.5em;
}
/* hover and focus */
div.custom_text input[type=text]:hover,
div.custom_text input[type=text]:focus,
div.custom_text label:hover + input[type=text], 
div.custom_text label:focus + input[type=text]
{
	border-color: #767676;
}
/* disabled */
div.custom_text input[type=text][disabled=disabled],
div.custom_text label:hover + input[type=text][disabled=disabled],
div.disabled.custom_text input[type=text],
div.disabled.custom_text label:hover + input[type=text]
{
    border-color: #b9b8b8; 
    background-color: #e5e8e8; 
    color: #b9b8b8;
    -webkit-custom_text-fill-color: #B9B8B8;
}

div.custom_text input[type=text]
{
    border: 2px solid #ccc;
}
div.data p,
div.custom_text input[type=text]
{
    height: 1.85em;
    padding: 0 .35em;
}

div.data p
{
    white-space: nowrap;
    overflow: hidden;
    custom_text-overflow: ellipsis;
    line-height: 1.5em;
}
/* hover and focus */
div.custom_text input[type=text]:hover,
div.custom_text input[type=text]:focus,
div.custom_text label:hover + input[type=text], 
div.custom_text label:focus + input[type=text]
{
                border-color: #767676;
}
/* disabled */
div.custom_text input[type=text][disabled=disabled],
div.custom_text label:hover + input[type=text][disabled=disabled],
div.disabled.custom_text input[type=text],
div.disabled.custom_text label:hover + input[type=text]
{
    border-color: #b9b8b8; 
    background-color: #e5e8e8; 
    color: #b9b8b8;
    -webkit-custom_text-fill-color: #B9B8B8;
}
div.custom_text_2width input

{

	height: 1.00em;
    width: 2.1em;
    *width: 3.3em;
}
div.custom_text_2width input

{

	height: 1.00em;
    width: 4.1em;
    *width: 5.3em;
}
div.custom_text_reducedWidth ,
div.custom_select_reducedWidth
{
padding-top:1px;
height:12.5px;
    width: 2.2em;
    *width: 2.3em;
}
div.custom_dimensions input[type=text]
{

	width:30px;
    height: 23px;
}
/*****************************************************************************/
/*vishal */
/* same width for all form elements */
div.custom_select
{
    width: 3.3em;
    *width: 4.3em;
}

div.custom_select select
{
    width: 3em;
    *width: 4em;
    margin: 0;
    line-height: 1.5em;
}
div.custom_select select
{
    border: 2px solid #ccc;
}

div.custom_select select:hover,
div.custom_select select:focus
{
	border-color: #767676;
}

div.custom_select select[disabled=disabled],
div.custom_select.disabled select
{
    border-color: #b9b8b8; 
    background-color: #e5e8e8; 
    color: #b9b8b8;
    -webkit-text-fill-color: #B9B8B8;
}

div.custom_select select
{
    height: 1.85em;
	text-indent: .15em;
    margin: 0;
	padding: 0;
	padding: 0 .15em\9;
}
/* select width adjustment */
div.control.custom_select select
{
    *width: 4.1em;
}
div.custom_select select option
{
    padding: .28em .3em;
}
div.custom_select ul
{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
div.custom_select ul li
{
    display: block;
}
div.custom_select-compact select
{
    height: auto;
    height: 8em!important\9;
}

div.custom_select a{
	position: relative;
	display: inline-block;
}
/*vishal*/
/*vivek*/
div.custom_select1 select {
  display: block;
  margin: 0;
  appearance: none;
  box-shadow: none;
  border: 2px solid #CCCCCC;
  Background-color:#ffffff;
  Font-color:#000000;
}
div.custom_select1 select:focus {
  border: 2px solid #5A5A5A;
 Font-color:#000000;
}
div.custom_select1 select:hover {
  border: 2px solid #5A5A5A;
  Background-color:#ffffff;
  Font-color:#000000;
}

div.custom_select1 select:disabled {
 Background-color:#E5E5E5;
 border: 2px solid #CCCCCC;
 Font-color:#B3B3B3;
}
/*vivek*/
div.select1 select,
div.select select
{
    height: 1.85em;
	text-indent: .15em;
    margin: 0;
	padding: 0;
	padding: 0 .15em\9;
}
/* select width adjustment */
div.control.select select,
div.control.select1 select
{
    *width: 18.1em;
}
div.select1 select option,
div.select select option
{
    padding: .28em .3em;
}
div.select1 ul,
div.select ul,
div.list ul
{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
div.select1 ul li
{
    display: block;
}
div.select1-compact select,
div.select-compact select
{
    height: auto;
    height: 8em!important\9;
}

div.text-replace div.replace,
div.text-replace a.menu,
div.select1 a,
div.select a
{
	position: relative;
	display: inline-block;
}
div.text-replace div.replace input[type=text]
{
	padding-right: 1.5em;
}
div.text-replace a.menu,
div.control a select + a
{
    text-indent: -1000em;
	background-color:#fff;
	background-repeat:no-repeat;
	padding:0;
	margin:0;
	width:1.85em;
	height:1.85em;
	position:absolute;
	right:0px;
	top:0px;
	cursor:pointer;
	border: 2px solid #ccc;
	border-left: 1px solid #ccc;
}
div.control a select + a
{
	pointer-events: none; /* clicks on the link will pass trought via css */
}
div.text-replace div.replace:hover input,
div.text-replace div.replace:hover a.menu,
div.text-replace input:hover + a.menu,
div.text-replace input:focus + a.menu,
div.text-replace input:active + a.menu,
div.control a select:hover,
div.control a select:focus,
div.control a select:active,
div.control a select:hover + a,
div.control a select:focus + a,
div.control a select:active + a,
div.control a:hover select,
div.control a:focus select,
div.control a:active select,
div.control a:hover select + a,
div.control a:focus select + a,
div.control a:active select + a,
div.control a:hover a,
div.control a:focus a,
div.control a:active a
{
	border-color: #767676;
}
div.control.disabled a select,
div.text-replace.disabled div.replace:hover input,
div.text-replace.disabled div.replace:hover input + a.menu,
div.control.disabled div.replace input + a.menu,
div.control.disabled a select + a
{
	background-color: #e5e8e8;
	border-color: #b9b8b8;
}
div.text-replace div.replace input + a.menu
{
	background-position: -1px -2px;
	background-image: url(img/adds.png);
}
div.text-replace.error div.replace input:hover + a.menu,
div.text-replace.error div.replace input:focus + a.menu
{
	background-position: -1px -110px;
	background-image: url(img/adds.png);
}
div.control a select + a
{
	background-position: -1px -29px;
	background-image: url(img/selects.png);
}
div.text-replace div.replace input + a.menu:hover,
div.text-replace div.replace input + a.menu:focus,
div.text-replace div.replace input + a.menu:active,
div.control a select:hover + a,
div.control a select:focus + a,
div.control a select:active + a,
div.control a:hover select + a,
div.control a:focus select + a,
div.control a:active select + a
{
	background-position: -1px -29px;
}
div.control.disabled div.replace input + a.menu,
div.control.disabled a select + a
{
	background-position: -1px -83px;
}
div.control.error div.replace input + a.menu,
div.control.error a select + a
{
	background-position: -1px -56px;
}
/* text replace (custom drop down list) */
div.text-replace input
{
    *width: 15.8em!important; /* IE 7 */
}
div.text-replace a.menu
{
	*width: 1.65em; /* IE 7 */
    *right: .2em;
	*top: .1em;
	*height: 1.5em;
}
/******************************************************************************
 * CONTROLS - CHECKBOXES AND RADIOBUTTONS
<div.checkbox/radio.ID>
    <input[type=checkbox/radio]#ID>
    <label[for=ID]>TEXT</label>
</div>
******************************************************************************/
div.select li label,
div.select1 li label,
div.checkbox label,
div.radio label
{
    margin: 0;
	line-height: 1.85em;
	display: inline-block;
}
div.select1-full ul label,
div.select-full ul label
{
    font-weight: normal;
}
div.checkbox,
div.radio
{ 
    padding: 1.3em 1.3em 1em 0;
}
div.select div.checkbox,
div.select1 div.radio
{
    padding: 0 1.3em .43em 0;
}
body.js div.select1 li label,
body.js div.select li label,
body.js div.checkbox label,
body.js div.radio label
{
    padding: 0 0 1px 21px;
    *display: inline-block;
}
div.select li label.disabled,
div.checkbox.disabled label,
div.select1 li label.disabled,
div.radio label.disabled,
div.radio.disabled label
{
    color: #CCC;
}
/**********************************************
 * CHECKBOX and SELECT 
 **********************************************/
/* starting state */
body.js div.checkbox label,
body.js div.select li label
{
    background-repeat: no-repeat;
    background-image: url(img/checkboxes.png);
    background-position: left 3px;   
}
/* hover/focus */
body.js div.select li label:hover,
body.js div.select li input:focus + label,
body.js div.checkbox label:hover,
body.js div.checkbox input:focus + label
{
    background-position: left -105px;
}
/* disabled */
body.js div.select li label.disabled,
body.js div.checkbox label.disabled,
body.js div.checkbox label.disabled:hover,
body.js div.checkbox input:focus + label.disabled
{
    background-position: left -320px;
}
/* checked */
body.js div.select li label.checked,
body.js div.checkbox label.checked
{
    background-position: left -213px;
}
/* error */
body.js div.select li label.error,
body.js div.select li input:focus + label.error,
body.js div.checkbox label.error,
body.js div.checkbox input:focus + label.error
{
    background-position: left -428px;
}
/* checked + hover/focus */
body.js div.select li label.checked:hover,
body.js div.select li input:focus + label.checked,
body.js div.checkbox label.checked:hover,
body.js div.checkbox input:focus + label.checked
{
    background-position: left -536px;
}
/* checked + disabled */
body.js div.select li label.checked.disabled,
body.js div.select li input:focus + label.checked.disabled,
body.js div.checkbox label.checked.disabled,
body.js div.checkbox input:focus + label.checked.disabled
{
    background-position: left -644px;
}
/* checked + error */
body.js div.select li label.checked.error,
body.js div.select li input:focus + label.checked.error,
body.js div.checkbox label.checked.error,
body.js div.checkbox input:focus + label.checked.error
{
    background-position: left -753px;
}
/**********************************************
 * RADIO BUTTON and SELECT1 
 **********************************************/
/* starting state */
body.js div.radio label,
body.js div.select1 li label
{ 
    background-repeat: no-repeat; 
    background-image: url(img/radiobuttons.png);
    background-position: left 4px;
}
/* hover/focus */
body.js div.select1 li label:hover,
body.js div.radio label:hover,
body.js div.select1 li input:focus + label,
body.js div.radio input:focus + label
{
    background-position: left -101px;
}
/* disabled */
body.js div.select1 li label.disabled,
body.js div.radio label.disabled
{
    background-position: left -308px;
}
/* checked/selected */
body.js div.select1 li label.checked,
body.js div.radio label.checked
{
    background-position: left -205px;
}
/* error */
body.js div.select1 li label.error,
body.js div.radio label.error
{
    background-position: left -413px;
}
/* checked/selected + hover */
body.js div.select1 li label.checked:hover,
body.js div.radio label.checked:hover,
body.js div.select1 li input:focus + label.checked,
body.js div.radio input:focus + label.checked
{
    background-position: left -519px;
}
/* checked/selected + disabled */
body.js div.select1 li label.checked.disabled,
body.js div.radio label.checked.disabled,
body.js div.select1 li input:focus + label.checked.disabled,
body.js div.radio input:focus + label.checked.disabled
{
    background-position: left -626px;
}
/* checked/selected + error */
body.js div.select1 li label.checked.error,
body.js div.select1 li input:focus + label.checked.error,
body.js div.radio label.checked.error,
body.js div.radio input:focus + label.checked.error
{
    background-position: left -733px;
}
/******************************************************************************
 * CONTROL - BUTTONS
 *****************************************************************************/
/* floating hacks */
div.buttons
{
    zoom: 1;
    height: 1%;
}
div.buttons:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* buttons after the sections can be fixed in the bottom of the page */
div.buttons,
div.sections div.section div.buttons.bottom
{
    border-top: 1px solid #ccc;
    background-color: #fff;
}
div.sections div.section div.buttons.bottom.fixed,
div.buttons.fixed
{
    position: fixed;
    bottom: 50px;
    left: 0px;    
    right: 0px;
    height: 46px;
    *height: 26px;
    margin: 0;
    border-top: 1px solid #ccc;
    background-color: #fff;
    text-align: right;
    padding-right: 30px;
    z-index: 5;
}
div.buttons.fixed_Airprint
{
    position: fixed;
    bottom: 50px;
    left: 0px;
    right: 0px;
    height: 46px;
    *height: 26px;
    margin: 0;
    border-top: 1px solid #ccc;
    background-color: #fff;
    text-align: right;
    padding-right: 30px;
    z-index: 5;
}
div.buttons
{
    padding: 10px 10px 10px 30px;
    margin: 0 -30px 0 -30px;
}
/* buttons inside sections have no border and top margin */
div.sections div.section div.buttons
{
    position: inherit;
    border: 0;
    padding: 10px 0 0 30px;
    *padding-bottom: 10px;
    text-align: left;
    height: auto;
    top: inherit;
    right: inherit;
    bottom: inherit;
    left: inherit;
}
/* inside the buttons line, we have an extra bottom margin */
div.sections div.section div.buttons span.button,
div.sections div.section div.buttons a.button
{
    margin: 0 1.3em 1em 0;
}

/* button advanced outside sections are aligned to the left */
div.buttons.fixed span.button.action.left,
div.buttons.fixed a.button.action.left
{
    margin: 0 1.1em 0 0!important;
}

/* buttons line outside sections are aligned to the right */
div.buttons.fixed span.button,
div.buttons.fixed a.button
{
    margin: 0 0 0 1.1em!important;
}
/* left margin if aligned to the right */
div.sections div.section div.buttons span.button.right,
div.sections div.section div.buttons a.button.right
{
    margin: 0 2.15em 1em 1.3em;
}
/* a button inside a control have no margin, it relies on the control padding */
div.control a.button,
div.control span.button
{
    margin: 0;
}
a.control.button,
span.control.button
{
    padding: 1.3em 1.3em 1em 0;
    margin: 0;
}
/* common button appearance */
a.button span,
span.button input
{
    height: 1.85em;
    line-height:1.1em;
    border: 0;
    color: #FFF;
    overflow: hidden;
    margin: 0;
    white-space: nowrap;
    padding: 0 .75em;
    display: block;
    background: #767676;
    width:auto;
    text-align: center;
    border-radius: 0 4px;
}
/* default button have margin to the right */
a.button,
span.button
{
    display: -moz-inline-block;
    display: -moz-inline-box;
    display: inline-block;
    margin: 0 1.3em 0 0;
    white-space: nowrap;
}
/* except when they are aligned to the right */
.right span.button,
a.button.right,
span.button.right
{
    margin: 0 0 0 1.3em;
}
/* hover/focus */
a.button:hover span,
a.button:focus span,
span.button input:hover,
span.button input:focus
{
    background-color: #5a5a5a;
}
/* Active/onfocus */
a.button:active,
span.button:active,
a.button:focus,
span.button:focus,
a.default,
span.default
{

}
a.button:active span,
span.button:active input,
a.button:focus span,
span.button:focus input,
a.default span,
span.default input
{
    background-color: #0096d6;
}
a.default:hover span,
a.default:focus span,
span.default input:hover,
span.default input:focus
{
    background-color: #006699;
}
/* Disabling the button */
a.disabled,
span.disabled,
a.disabled:hover,
a.disabled:focus,
a.disabled:active
{
    cursor: default;
}
a.disabled span,
span.disabled input,
a.disabled:hover span,
span.disabled input:hover,
a.disabled:focus span,
span.disabled input:focus,
a.disabled:active span,
span.disabled input:active
{
    background-color: #e5e8e8;
}
a.button
{
    float: left;
    text-decoration: none;
    cursor: default;
}
a.button span
{
    padding-top: .3em;
}
/* Button next to div.control, keep the same margin-top */
span.control
{
    padding-top: 1.3em;
}
/******************************************************************************
 * CONTROL - GRID
+-------+------+-------+
| COL1  | COL2 | COLN  |
| CHECK |      |       |
+-------+------+-------+
| CHECK | TEXT | TEXT  |
| RADIO | [+]  | INPUT |
| [+]   | [-]  |       |
| [-]   |      |       |
+-------+------+-------+
The control grid is the standard for grids in the system.
It consists of a table inside a div.control.grid.
The header line should be inside a thead, while the rest of the rows should
be inside a tbody.
<div.control.grid>
    <table>
        <colgroup>
            <col[width=?]/>
        </colgroup>
        <thead>
            <tr>
                <th>TITLE</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>CONTENT</td>
            </tr>
        </tbody>
    </table>
</div>
+---------+
|\TITLE\\\|
+---------+
| CONTENT |
+---------+
A script running from basic.js will apply the class "alternate" to every odd
row inside the tbody.
To create a subgroup inside the grid, add the class "sub" to the tr. That will
make the line darker and without hover effect.
<tr class="sub">
    <td>CONTENT</td>
</tr>
+---------+
|/CONTENT/|
+---------+
To put a checkbox or radio in the first column of the grid, you must add the
class "command" to the td.
<tr>
    <td class="command">CHECK</td>
</tr>
+-----+
| [ ] |
+-----+
Sometimes you might want to make a line collapseable, having an image in front
of the text ([+] when it is collapsed or [-] when it is expanded). To make it
so, you must add the class "leaf" to the column where you want the image [-]
to appear. To make the [+] appear, add the extra class "closed" to the same
column.
When the line is collapsed, you should hide its children rows by adding the
class "hidden" to the tr. Remove the "hidden" class to make the children visible
again.
You might also want to align the text on the lines under a collapseable line.
To make it so, add the class "child" to the columns you want aligned correctly.
-------------------------------------------------------------------------------
<tbody>                                               +---------+-------------+
    <tr class="sub">                                  |/CONTENT/|/[+]/CONTENT/|
        <td>CONTENT</td>                              +---------+-------------+
        <td class="leaf">CONTENT</td>
    </tr>
    <tr class="hidden">
        <td>CONTENT</td>
        <td class="child">CONTENT</td>
    </tr>
    ...
</tbody>
- OR --------------------------------------------------------------------------
<tbody>                                               +---------+-------------+
    <tr class="sub">                                  |/CONTENT/|/[-]/CONTENT/|
        <td>CONTENT</td>                              +---------+-------------+
        <td class="leaf closed">CONTENT</td>          | CONTENT |     CONTENT |
    </tr>                                             +---------+-------------+
    <tr>
        <td>CONTENT</td>
        <td class="child">CONTENT</td>
    </tr>
</tbody>
 *****************************************************************************/
div.grid
{
    padding: 0;
    float: none;
    position: relative;
}
div.grid table
{
    clear: both;
    border: 1px solid #B9B8B8;
    width: 100%;
    border-collapse: collapse;
}
div.grid th
{
    background: #767676;
    text-align: left;
    color: #FFF;
    padding: 2px 3px;
}
div.grid th,
div.grid td
{
	height: 2.5em;
	line-height: 1.85em;
    *position: relative;
}
div.grid th.command,
div.grid td.command
{
    text-align: center;
    width: 10px;
}
div.grid table div.control
{
    padding-bottom: 0;
    padding-right: 0;
}
div.grid th.command div.control,
div.grid td.command div.control,
div.grid table div.radio,
div.grid table div.checkbox,
div.grid table div.radio label,
div.grid table div.checkbox label
{
    height: 1.85em;
	line-height: 1.85em;
    width: 20px;
}
div.grid th.command div.control input,
div.grid td.command div.control input,
div.grid table div.radio input,
div.grid table div.checkbox input,
div.grid table div.radio label input,
div.grid table div.checkbox label input
{
    padding: 0 !important;
    margin: 7px 4px 0 0 !important;
}
body.js div.grid table div.checkbox
{
    *float: none!important;
}
body.js div.grid table div.checkbox label span
{
    *margin: 8px 0 0 -1px !important;
}
div.grid table th.command div.control label input,
div.grid table td.command div.control label input
{
    float: right;
    margin: 7px 4px 0 0 !important;
}
div.grid tr
{
    background-color: #FFF;
}
div.grid tr.alternate
{
    background-color: #F2F2F2;
}
div.grid.no-hover tr:hover
{
    background-color:#fff!important;
}
div.grid.no-hover tr.alternate:hover
{
    background-color:#f2f2f2!important;
}
/* automatic alternate wont work for all browsers
div.grid tbody tr:not(.sub):nth-child(odd)
{
    background-color: #EFEFEF;
} */
div.grid tr.sub td
{
    font-weight: bold;
    background-color: #efefef;
}
body.js div.grid tr td.leaf
{
    font-weight: bold;
    background-image: url(img/treeview.png);
    background-repeat: no-repeat;
    background-position: 10px -147px;
}
body.js div.grid tr td.leaf.closed
{
    background-position: 10px -95px;
}
div.grid tr td.leaf,
div.grid tr td.child
{
    padding-left: 40px;
}
div.grid tbody tr.child-hidden
{
    display: none !important;
}
div.grid tr.selected
{
    background-color: #99CCFF;
}
/* tr:hover */
div.grid tr:hover
{
	background-color:#dbedff!important;
}
div.grid tr.selected
{
    background-color: #99CCFF;
}
/* tr.selected:hover */
div.grid tr.selected:hover
{
	background:#7ebdfc!important;
}
div.grid div.control
{
    padding: 0;
    margin: 0;
}
div.grid div.empty
{
    clear: both;
    border: 1px solid #B9B8B8;
    padding: 10px 10px;
    color: #767676;
}
div.grid tr.empty td
{
    text-align: center;
    background: #FFF;
}
div.grid td,
div.grid th
{
    cursor: default;
    padding: 0 0 0 .75em;
}
div.grid .center
{
    text-align: center;
}
/* EM inside a grid should be gray */
div.grid em
{
    color: #767676;
}
/******************************************************************************
 * INLINE STATUS ICONS
 *****************************************************************************/
span.status,
span.status-inline,
div.control.data.status p
{
    background-color: transparent;
    background-image: url(img/status-icons.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0 0;
}
span.status
{
    display: inline-block;
    text-indent: -1000em;
    width: 20px;
    *width: 0px;
    *padding-left: 20px;
    *text-indent: 0px!important;
    *overflow: hidden;
    height:22px;
    line-height: 1.85em;
    vertical-align: middle;
}
span.status-inline
{
    float:left;
	margin-right:5px;
	text-indent:0;
	width:auto;
	height:auto;
	padding-left:20px;
}
div.control.data.status p
{
	padding-left:21px;
}
div.double-width.control.data.status p
{
	*width: 35.7em!important;
}
ul.status-list
{
    list-style: none;
}
ul.status-list li,
ul.status-list li.tooltip strong
{
	background-image: url(img/status-icons.png);
	background-repeat: no-repeat;
	padding:0 0 0 20px;
}
/* yellow sign with white exclamation point */
span.status-alert,
span.status-warning,
ul.status-list li.warning
{
    background-position: 0px 4px;
}
/* blue sign with white letter i */
span.status-information
{
    background-position: 0px -396px;
}
/* status inside the strong tag of a ul.status-list li.tooltip aligned different */
ul.status-list li.tooltip strong
{
    background-position: 0px -400px;
}
/* green sign with a white "V" (check sign) */
span.status-normal,
span.status-success,
span.status-on,
ul.status-list li,
span.status-yes
{
    background-position: 0px -596px;
    line-height: 1.85em;
}
/* gray sign with a white "V" (check sign) */
span.status-normal-gray,
span.status-success-gray,
span.status-factory
{
    background-position: 0px -696px;
}
/* red sign with a white "X" */
span.status-error,
span.status-no
{
    background-position: 0px -196px;
}
/* gray sign with a white "X" */
span.status-error-gray
{
    background-position: 0px -296px;
}
/* white sign with a gray "X" */
span.status-error-disabled,
span.status-error-white,
span.status-off
{
    background-position: 0px -796px;
}

/* warning sign inside .control.data */
div.control.data.status-warning p
{
    background-position: 2px 3px;
}
/* inside the .control.data the status-on has different positioning */
div.control.data.status-on p
{
    background-position: 2px -597px;
}
/* inside the .control.data the status-off looks like an status-error-gray */
div.control.data.status-off p
{
    background-position: 2px -297px;
}

/* gray circle that rotates*/
span.status-progress
{
	background-image: url(img/snake_transparent.gif)!important;
}
/* text that is next to the status icon */
span.status-text
{
    text-indent: 0;
    width: auto;
    padding-left: 20px;
}
/* the warning icon (yellow sign with black exclamation point) in a note */
p.note-warning
{
    background-color: transparent;
    background-image: url(img/status-icons.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    padding: 0 5px 0 20px;
}
p.custom_warning
{
	width: 530px;
	background-image: url(img/status-icons.png);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}
/* the information icon (blue sign with white letter i) in a note */
p.note-information
{
    background: transparent url(img/status-icons.png) no-repeat 1px -397px;
    padding: 1px 5px 5px 20px;
}
/******************************************************************************
 * CONTROL - MODAL DIALOG
 * jquery-ui-custom-dialog.min.js
 *****************************************************************************/
/* Overlays */
.ui-widget-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 50% 50% repeat-x;
    opacity: .6;
    filter: Alpha(Opacity=60);
    z-index: 20;
}
/*.ui-widget-shadow
{
    margin: -8px 0 0 -8px;
    padding: 8px;
    background: #aaaaaa 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}*/
/* Dialog */
.ui-dialog
{
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 300px;
    background-color: #fff;
    z-index: 21;
    border: 2px solid #ccc;
}
.ui-dialog .ui-dialog-titlebar
{
    padding: 3px 10px;
    background-color: #5a5a5a;
    position: relative;
}
.ui-dialog .ui-dialog-titlebar-close
{
    border: none;
    background-color: transparent;
    float: right;
}
.ui-dialog .ui-dialog-titlebar-close .ui-button-text
{
    display: none;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick
{
    width: 14px;
    height: 20px;
    float: right;
    background-image: url(img/close-buttons.png);
    background-position: center -197px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-color: transparent;
}
.ui-dialog .ui-dialog-titlebar-close:hover .ui-icon-closethick,
.ui-dialog .ui-dialog-titlebar-close:active .ui-icon-closethick
{
    background-position: center -297px;
}
.ui-dialog .ui-dialog-content
{
    border: 2px solid #ccc;
    border-top: none;
}
.ui-dialog iframe.ui-dialog-content
{
    border: none;
    width: 100%!important;
    height: 600px!important;
}
/******************************************************************************
 * CONTROL - MESSAGES
+--------------------------------+
| +------+ +-------------------+ |
| | ICON | | CONTENT           | |
| +------+ | [ TITLE ]         | |
|          | [ DESCRIPTION ]   | |
|          | [ ITEMS ]         | |
|          +-------------------+ |
+--------------------------------+
<div#ID.message.message-TYPE>
    <div.icon/>
    <div.content>
        <h2>TITLE</h2>
        <p>DESCRIPTION</p>
        <ol>
            <li>
                <label#IDitem[for=IDfield]>ITEM</label>
            </li>
            { li's }
        </ol>
    </div>
</div>
 *****************************************************************************/
div.modal
{
    display: none;
}
/* floating hacks */
div.message, div.message div.content
{
    zoom: 1;
    _height: 1%;
}
div.message:after, div.message div.content:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div.message
{
    clear: both;
    margin-bottom: 30px;
    background-color: #fff;
    position: relative;
    border-radius: 0;
    border: none;
    border-left-width: 4px;
    border-left-style: solid;
    z-index: 4;
}
div.message div.icon
{
    background-image: url(img/message-icon.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 21px;
    left: 21px;
}
div.message div.content
{
    float: none;
    position: relative;
    padding: 0 10px 0 89px;
    margin: 0;
    word-wrap: break-word;
    min-height: 89px;
}
div.message ol
{
    padding: 0 0 20px 1.5em;
}
div.message label
{
    background: transparent;
    padding: 0;
    cursor: text;
}
div.message h2,
div.message h3
{
    padding-top: 20px;
    font-size: 1em;
    border: 0;
}
div.message div.items
{
    margin: 10px 10px 10px 0;
}
div.message div.items span.number
{
    float: left;
    font-weight: bold;
}
div.message div.items li
{
    margin: 0;
}
div.message div.items ul
{
    margin: 0 0 10px 0;
    padding: 0 0 0 12px;
    list-style-position: inside;
}
div.message div.buttons
{
    background-color: #fff;
    padding: 10px 0 10px 5em;
    border: 0;
}
/* INFORMATION */
div.message-information
{
    background-color: #f4f8fa; /* bootstrap color */
    border-color: #007dba; /* onevoice color */
}
div.message-information div.icon
{
    background-position: center -1px;
}
div.message-information h2,
div.message-information h3
{
    color: #007dba; /* onevoice color */
}
/* WARNING */
div.message-warning,
div.message-state,
div.message-dssbound
{
    background-color: #fcf8f2; /* bootstrap color */
    border-color: #f0ad4e; /* bootstrap color */
}
div.message-warning div.icon
{
    background-position: center -47px;
}
div.message-warning h2,
div.message-warning h3,
div.message-state h2,
div.message-state h3,
div.message-dssbound h2,
div.message-dssbound h3
{
    color: #f0ad4e; /* bootstrap color */
}
/* SUCCESS */
div.message-success
{
    background-color: #f4ffef; /* onevoice color */
    border-color: #008428; /* onevoice color */
}
div.message-success div.icon
{
    background-position: center -92px;
}
div.message-success h2,
div.message-success h3
{
    color: #008428; /* onevoice color */
}
/* ERROR */
div.message-error
{
    background-color: #f7d7d7; /* official onevoice color */
    background-color: #fdf7f7; /* onevoice (from bootstrap) color */
    border-color: #ff0000; /* onevoice color */
}
div.message-error div.icon
{
    background-position: center -137px;
}
div.message-error h2,
div.message-error h3
{
    color: #ff0000; /* onevoice color */
}
div.message-error li label
{
    cursor: pointer;
}
/* STATE */
div.message-state div.icon
{
    background-position: center -180px;
}
div.message-state ol
{
    margin: 5px 0;
    padding-left: 1.5em;
}
/* DSSBOUND */
div.message-dssbound div.icon
{
    background-position: center -223px;
    width: 50px;
}
div.message-dssbound ol
{
    list-style: disc;
    padding: 0 0 0 15px;
}
/******************************************************************************
 * CONTROL - PROGRESS BAR
 ******************************************************************************
regular progress is a box on the top of the page, much like the summary is
MESSAGE is optional, since the TITLE is enough on most cases
CANCEL is optional, since not all operations can be cancelled
CANCEL can be rendered using NVelocity.Button method
+----------------------------------+
| TITLE                            |
+----------------------------------+
| MESSAGE                          |
| [ barber pole image ] [ CANCEL ] |
+----------------------------------+
<div#ID1.message.message-progress>
	<h2#ID2>TITLE</h2>
	<div.content>
		<p>MESSAGE</p>
        <div.barber-pole></div>
        <span.button.action>
            <input[type=submit]#IDcancel/>
        </span>
	</div>
</div>
*/
div.message-progress,
div.message-progress-inline
{
    border: none;
}
div.message-progress
{
    margin: 0!important;
}
div.message-progress div.content div.barber-pole
{
    background: url(img/progress-bar.gif) no-repeat left center;
    float: left;
    margin: 6px 0;
    width: 337px;
    height: 11px;
    text-indent: -1000em;
}
/* when rendered inside an "ui-dialog", progress modal has some differences:
TITLE has no background.
[ barber pole ] appears first.
MESSAGE appears under the barber pole. */
.ui-dialog div.ui-dialog-content.message-progress
{
    border: none;
    padding: 10px 30px;
}
.ui-dialog div.ui-dialog-content.message-progress h2
{
    display: block;
    background: transparent;
    color: #000;
    border: none;
    padding: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: bold;
}
.ui-dialog div.ui-dialog-content.message-progress div.content
{
    border: none;
    padding: 0;
}
.ui-dialog div.ui-dialog-content.message-progress div.content div.barber-pole
{
    width: 100%;
    background-position: center;
    float: none;
    margin: 0;
}
.ui-dialog div.ui-dialog-content.message-progress div.content p
{
    padding: 10px 0 0 0;
    margin: 0;
}
/* progress inline is a box floating to left
MESSAGE is optional, since the TITLE is enough on most cases
CANCEL is optional, since not all operations can be cancelled
CANCEL can be rendered using NVelocity.Button method
+----------------------------------+
| TITLE                            |
+----------------------------------+
| MESSAGE                          |
| [ barber pole image ] [ CANCEL ] |
+----------------------------------+
<div#ID1.message.message-progress-inline>
    <h2#ID2>TITLE</h2>
	<div.content>
		<p>MESSAGE</p>
        <div.barber-pole></div>
        <span.button.action>
            <input[type=submit]#IDcancel/>
        </span>
	</div>
</div>
*/
div.message-progress-inline
{
    float: left;
    clear: none;
    margin: 0;
}
div.message-progress h2,
div.message-progress-inline h2
{
    display: block;
    background-color: #5a5a5a;
    color: #fff;
    padding: 5px 10px;
}
div.message-progress div.content,
div.message-progress-inline div.content
{
    margin: 0;
    padding: 10px;
    min-height: inherit;
    border: 2px solid #ccc;
    border-top: none;
}
div.message-progress div.content p,
div.message-progress-inline div.content p
{
    margin: 0 0 10px 0;
}
div.message-progress-inline div.content div.barber-pole
{
    background: url(img/progress-bar.gif) no-repeat left center;
    float: left;
    margin: 6px 0;
    width: 337px;
    height: 11px;
    text-indent: -1000em;
}
div.message-progress div.content span.button,
div.message-progress-inline div.content span.button
{
    margin: 0 0 0 10px;
}
/******************************************************************************
 * CONTROL - PAGINATION
 *****************************************************************************/
/* floating hacks */
div.pagination
{
    zoom: 1;
    _height: 1%;
}
div.pagination:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div.pagination
{
    margin: 4px 0 0 0;
    float: right;
}
div.pagination label
{
    float: left;
    margin: 0 3px 0 0;
    display: block;
    position: relative;
    overflow: hidden;
}
div.pagination label input
{
    position: absolute;
    top: -50000px;
}
div.pagination label span
{
    display: block;
    color: #007dba;
    font-weight: normal;
    padding: 0 4px 0 0;
    border: 1px solid #E5E8E8;
    padding: 3px 5px;
}
div.pagination span.ellipsis
{
    float: left;
    margin: 0 3px 0 0;
    display: block;
    padding: 6px 5px 0;
}
div.pagination label.prev span,
div.pagination label.next span
{
    font-weight: bold;
    font-size: 1.1em;
}
div.pagination label span:hover
{
    background: #E5E8E8;
}
div.pagination label.disabled span,
div.pagination label.disabled span:hover
{
    background: none;
    color: #b9b8b8;
    text-decoration: none;
}
div.pagination label.disabled span:hover
{
    font-weight: normal;
}
div.pagination label.current span,
div.pagination label.current span:hover
{
    border-color: #fff;
    color: #000;
    font-weight: bold;
}
div.pagination div.select1
{
    width: auto;
    float: left;
    margin: 1px 0;
    padding: 0 !important;
}
div.pagination div.select1 select
{
    min-width: 0em !important;
    width: 60px !important;
    padding: 0;
    margin: 0;
}
div.pagination div.select1 div.select-hack,
div.pagination div.select1 div.select-hack span.select-hack-text
{
	width: 60px;
}
div.pagination div.select1 label
{
	margin: -1.4em 0 0 0;
}
/******************************************************************************
 * cipher Overlay
 *****************************************************************************/
 table.cipherOverlay {
  display: none;
  width:30%;
  margin-top:-319px;
  float: right;
  z-index: 1;
  color: black;
  background-color: white;
}

td.closebtn {
  cursor:pointer;
  font-size: 30px;
}

table.cipherOverlay-table  {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  font-size: 12px;
}

table.cipherOverlay-table th {
  border: 1px solid black;
}

table.cipherOverlay-table td {
  border: 1px solid black;
}

/******************************************************************************
 * CONTROL - ACTION LISTS
 * Action lists can be used in several ways
 ******************************************************************************
 * USE #1: list of items with a trash button for each

+-----------------+
| ITEM          T | => delete (trash) button
|                 |
|                 |
+-----------------+

<div.control.action-list>
    <ul>
        <li>
            <span.actions>
                <label.action.remove[for=IDRemove_n]>
                    <input#IDRemove_n[type=submit][name=IDRemove][value=Remove]/>
                </label>
            </span>
            <span#IDn.item>
                ITEM
            </span>
        </li>
    </ul>
</div>

 ******************************************************************************
 * USE #2: same as #1, but with a title that looks like the header of a grid

+-----------------+
| TITLE           | => title is like the grid title
+-----------------+
| ITEM          T | => delete (trash) button
|                 |
|                 |
+-----------------+

<div.control.action-list>
    <h3>
        TITLE
    </h3>
    <ul>
    ... and so on

 ******************************************************************************
 * USE #3: list of items with move up, down and trash button for each
 * you can see this case on LdapDataBaseSearchSettingsView.vm
 * the action list actually replaces a text field, the original content
 * is a list separated by pipes ("|") and it is viewed as a list for the
 * sake of user experience

LABEL => label as every other control label
[                 ] [ ADD ] => a textbox followed by an add button
+-----------------+
| ITEM      U D T | => move up, down and trash buttons
|                 |
|                 |
+-----------------+

<div.control.action-list>
    <label[for=ID]>
        LABEL
    </label>
    <input#ID[type=text][name=ID]/> => this input is invisible, it contains the actual list separated by pipes
    <div.add-group>
        <input#ID-Js.add-input[type=text]/> => this input is for 
        <span.button.action.add>
            <input#ID-AddButton[type=submit][name=add-button][value=ADD]/>
        </span>
    </div>
    <ul>
        <li>
            <span.actions>
                <label.action.move-up.disabled[for=IDMoveUp_n]> => first move up is disabled
                    <input#IDMoveUp_n[type=submit][value=Move Up][disabled=disabled]/>
                </label>
                <label.action.move-down.disabled[for=IDMoveDown_n]> => last move down is disabled
                    <input#IDMoveDown_n[type=submit][value=Mode Down][disabled=disabled]/>
                </label>
                <label.action.remove[for=IDRemove_n]>
                    <input#IDRemove_n[type=submit][value=Remove]/>
                </label>
            </span>
            <span#IDn.item>
                ITEM
            </span>
        </li>
    </ul>
</div>

 ******************************************************************************
 * USE #4: action list with title, but with checkboxes as items
 * Such action lists have no "action" actually (the button on the right) and
 * because of that they wont have the span.actions nor span.item.
 * The checkbox control will be directly inside the li.

+-----------------+
| TITLE           | => title is like the grid title
+-----------------+
| [ ] ITEM        | => checkbox
|                 |
|                 |
+-----------------+

 ******************************************************************************
 * USE #5: action list with extra formatting in the items
 * The content of the li span.item don't need to be plain text, you can add
 * whatever html you want. See Fax Send Setup > Quick Sets, the left action list
 ******************************************************************************
 * USE #6: action list with checkboxes and formated content as items
 * You can use css classes to render differently a checkbox, inside an
 * .action-list li you can use:
 *   .item-bold => to force bold to the text
 *   .item-highlight => to force a bold blue highlighted color to the text
 *   .item-normal => to enforce the regular text appearance
 * See Fax Send Setup > Quick Sets, the right action list
 ******************************************************************************
 * USE #7: action list as a grid
 * It is possible to use an action list to appear as a grid (at least for one
 * or two columns). The reasoning for using an action list as a grid is because
 * the action list can have its content scrolled (and that is tricky in a pure
 * grid).
 * Use div.control-column inside the h3 (the grid header) to enforce the columns
 * in the title with the same default width of a control.
 * Use any (we tested checkboxes and dropdown lists without labels) control as the
 * columns inside the li's.
 * See General > Control Panel Customization > Control Panel Language and Keyboard
 * Layout section. There you can see action lists with one or two columns.
 *****************************************************************************/
div.action-list ul,
div.action-list li
{
    zoom:1;
    _height:1%;
}
div.action-list ul:after,
div.action-list li:after
{
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
div.action-list
{
    padding: 0;
    float: left;
    margin: 0;
    clear: both;
    width:100%;
}
/* when the list is empty the default rendering (mvc control) will contain a div.empty
otherwise, ul will appear simply as an empty box */
div.action-list div.empty
{
    
}
/* label for the action list with jquery ui string list plugin */
div.action-list label.action-label
{
    margin: 0;
}
/* title for the action list (optional) */
div.action-list h3
{
    border: none;
    line-height: 1.85em;
    padding: 5px 5px 5px 10px;
}

div.action-list h3,
div.action-list h3 div.checkbox,
div.action-list h3 label
{
    background-color:#767676;
    color:#fff;
    margin:0;
    float:none;
    clear:both;
    display:block;
}
div.action-list h3 div.control-column
{
    padding: 0;
    position: relative;
    display: inline-block;
}
div.action-list h3 div.checkbox
{
    padding: 3px 0;
}
/* the actual list and its items */
div.action-list ul
{
    overflow: auto;
    padding: 0;
    border: 2px solid #ccc;
    height: 154px;
    margin: 0;
    display: block;
    clear: both;
	position: relative;
}
div.action-list h3 + ul
{
    border-top: none;
}
div.action-list li
{
    margin: 0;
    clear: both;
    list-style: none;
}
div.action-list li:hover
{
    background-color: #dbedff!important;
}
div.action-list li.alternate
{
    background-color: #F2F2F2;
}
/* the text for the item */
div.action-list span.item
{
    padding: 5px 0 5px 0;
    margin: 0 0 0 7px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* all action buttons are inside this area */
div.action-list span.actions
{
    float: right;
}
/* basic definition for the action button */
div.action-list label.action
{
    float: left;
    width: 20px;
    height: 20px;
	background-color:transparent;
	background-repeat:no-repeat;
	position: relative;
	margin:4px 2px 0 2px;
}
div.action-list label.action:hover
{
    background-color:#007dba;
}
div.action-list label.action:active
{
    background-color:#000;
}
div.action-list label.action.disabled
{
    background-color:transparent!important;
}
/* action input CANNOT use display block or some browsers wont submit */
div.action-list label.action input
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block!important;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}
/* specific definition for a remove (trash), move-up and down use buttons */
div.action-list .remove,
div.action-list .move-up,
div.action-list .move-down
{
	background-image:url(img/action-list-buttons.png);
}
/* background images offset */
div.action-list .move-up
{
	background-position:3px 0px;
}
div.action-list .move-up:hover,
div.action-list .move-up:active
{
	background-position:3px -20px;
}		
div.action-list .move-up.disabled
{
	background-position:3px -40px!important;
}
div.action-list .move-down
{
	background-position:3px -60px;
}
div.action-list .move-down:hover,
div.action-list .move-down:active
{
	background-position:3px -80px;
}	
div.action-list .move-down.disabled
{
	background-position:3px -100px!important;
}
div.action-list .remove
{
   	background-position:3px -120px;
}
div.action-list .remove:hover,
div.action-list .remove:active
{
   	background-position:3px -140px;
}
div.action-list .remove.disabled
{
   	background-position:3px -160px!important;
}
/* special case #1: a checkbox as an item and action */
div.action-list li div.control
{
    padding:4px 0 4px 7px;
}
div.action-list li div.control.checkbox label,
div.action-list li div.control.radio label
{
    font-weight: normal;
}
/* special case #2: force an item to be bold */
div.action-list li .item-bold
{
    font-weight: bold!important;
}
/* special case #3: force an item to be highlighted blue and bold */
div.action-list li .item-highlight
{
    font-weight: bold!important;
    color: #007dba!important;
}
/* special case #3: force an item to be normal */
div.action-list li .item-normal
{
    font-weight: normal!important;
}
/******************************************************************************
 * ACTION LIST using jquery plugin
 * jquery.ui.string.list.js
The action list used with the string list plugin is very much like the 
regular action list, with some extra elements like a label with a search box 
and an add button on top of it.
It starts with a simple text box, that is transformed using javascript in a
whole new group of html elements as follows.
*/
div.action-list div.add-group
{
    float: left;
    width: auto!important;
    white-space: nowrap;
    padding-bottom: 5px;
}
/* hide the original input text (actually all inputs are hidden) */
div.action-list input
{
    display: none!important;
}
/* display only these inputs */
div.action-list input.add-input,
div.action-list span.add input,
div.action-list div.checkbox input,
div.action-list div.radio input
{
    display: inline!important;
}
div.action-list input.add-input,
div.action-list span.add
{
	float:left;
}
div.action-list span.add
{
	margin:0 0 0 1.3em;
}
/******************************************************************************
 * CONTROL - DATE AND TIME PICKERS
 * jquery Date and time pickers
 *****************************************************************************/
.ui-datepicker
{
    width: 17em;
    padding: .2em .2em 0;
    color: #5A5A5A;
}
.ui-datepicker .ui-datepicker-header
{
    position: relative;
    padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next
{
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev
{
    left: 2px;
}
.ui-datepicker .ui-datepicker-next
{
    right: 2px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span
{
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title
{
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}
.ui-datepicker .ui-datepicker-title select
{
    float: left;
    font-size: 1em;
    margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year
{
    width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year
{
    width: 49%;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year
{
    float: right;
}
.ui-datepicker table
{
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}
.ui-datepicker th
{
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}
.ui-datepicker td
{
    border: 0;
    padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a
{
    display: block;
    padding: .2em;
    text-align: center;
    text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane
{
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button
{
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current
{
    float: left;
}
.ui-datepicker
{
    display: none;
    background: #FFF;
    border: 1px solid #ccc;
    font-size: 1.2em;
    -moz-box-shadow: 5px 5px 10px #000;
}
.ui-datepicker .ui-datepicker-header
{
    border-bottom: 1px solid #E5E8E8;
    padding: 0;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next
{
    margin: 7px 5px;
    text-indent: -1000em;
    height: 19px;
    width: 20px;
    background: url(img/datepicker-controls.png) no-repeat;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover
{
    background-position: 0 -19px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:active
{
    background-position: 0 -38px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next
{
    background-position: -20px 0;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover
{
    background-position: -20px -19px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:active
{
    background-position: -20px -38px;
}
.ui-datepicker .ui-datepicker-title
{
    font-weight: bold;
    font-size: 1.3em;
}
.ui-datepicker .ui-datepicker-today a
{
    background: #F2F2F2;
    color: #5A5A5A;
}
.ui-datepicker .ui-state-default
{
    background: #0096D6;
    border: 1px solid #007DBA;
    color: #FFF;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium;
}
.ui-datepicker .ui-state-default:hover
{
    background-color: #006699!important;  
    color: #FFF;
}
/* selected day */
.ui-datepicker .ui-datepicker-current-day a
{
    background: #FFF;
    color: #5A5A5A;
}
/* IE6 IFRAME FIX (taken from datepicker 1.5.3) */
.ui-datepicker-cover
{
    display: none; /*sorry for IE5*/
    display: /**/ block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}
.ui-timepicker
{
    -moz-box-shadow: 5px 5px 10px #000;
    border: 1px solid #ccc;
    overflow: auto;
    height: 150px;
    width: 8.35em;
    background: #FFF;
    position: fixed;
}
.ui-timepicker dl
{
    display:block;
}
.ui-timepicker a
{
    display: block;
    padding: 3px 8px;
    text-decoration: none;
}
.ui-timepicker a:hover
{
    background-color: #DBEDFF!important;
    color: #000;
}
/******************************************************************************
 * FORMATTING COLUMNS
 *****************************************************************************/
/* Put two columns side-by-side - automatic */
.auto-width-column
{
    float: left;
    width: auto;
}
/* Put two columns side-by-side - 40% */
.half-width-column
{
    float: left;
    width: 40% !important;
}
/* A thin column to use between 2 half width columns - 10% */
.thin-width-column
{
    float:left;
    width:10%;
    text-align:center;
}
.thin-width-column .button input
{
    min-width: inherit!important;
    max-width: 120px;
    text-overflow:ellipsis;
}
/******************************************************************************
 * CONTACTS
 *****************************************************************************/
div.half-width-column div.action-list div.addressbook,
div.half-width-column div.action-list span.information span.icon,
div.grid tr td.command div.addressbook,
div.grid tr td span.information span.icon
{
    background-image: url(img/contacts-icons.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
div.half-width-column div.action-list div.addressbook,
div.grid tr td.command div.addressbook
{
    width: auto;
    float: none;
    white-space: nowrap;
    position: static;
}
div.half-width-column div.action-list div.addressbook
{
    padding: 4px 0 4px 7px;
}
div.half-width-column div.action-list div.control.addressbook label
{
    padding-left:50px;
}
div.half-width-column div.action-list div.addressbook label
{
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left:25px;
    line-height: 1.85em;
    display: block;
}
div.half-width-column div.action-list span.information
{
    float:right;
    margin: 5px 7px 0 0;
}
div.half-width-column div.action-list span.information span.icon,
div.grid tr td span.information span.icon
{
    display: inline-block;
    width: 20px;
    height:20px;
    vertical-align: middle;
}
div.half-width-column div.action-list span.information span.icon
{
    float: left;
    margin-left: 5px;
}
div.action-list span.information label.action
{
    margin: -2px -5px 0 5px;
}
div.half-width-column div.action-list div.control.addressbook.group
{
    background-position: 30px -22px;
}
div.grid tr.group td.command div.control.addressbook
{
    background-position: 22px -27px;
}
div.half-width-column div.action-list div.control.addressbook.contact
{
    background-position: 30px 3px;
}
div.grid tr.contact td.command div.control.addressbook
{
    background-position: 22px -1px;
}
div.half-width-column div.action-list div.addressbook.group
{
    background-position: 6px -22px;
}
div.half-width-column div.action-list div.addressbook.contact
{
    background-position: 6px 3px;
}
div.half-width-column div.action-list span.information span.icon.email,
div.grid tr td span.information span.icon.email
{
    background-position: 0px -54px;
}
div.half-width-column div.action-list span.information span.icon.email.disabled,
div.grid tr td span.information span.icon.email.disabled
{
    background-position: 0px -77px;
}
div.half-width-column div.action-list span.information span.icon.fax,
div.grid tr td span.information span.icon.fax
{
    background-position: 0px -102px;
}
div.half-width-column div.action-list span.information span.icon.fax.disabled,
div.grid tr td span.information span.icon.fax.disabled
{
    background-position: 0px -127px;
}
div.half-width-column div.action-list span.information span.icon.network-folder,
div.grid tr td span.information span.icon.network-folder
{
    background-position: 0px -153px;
}
div.half-width-column div.action-list span.information span.icon.network-folder.disabled,
div.grid tr td span.information span.icon.network-folder.disabled
{
    background-position: 0px -179px;
}
/******************************************************************************
 * EXTRA FORMATTING
 *****************************************************************************/
/* forces a left spacing before notes in a control.
useful for notes that act like units for the control.
example: on alerts, threshold appears as follows
+----------------------+
| LABEL                |
+----------------------+
| [INPUT TEXT]<NOTE>   |
+----------------------+
adding the inline-note class to a control makes a small spacing before the
note
+----------------------+
| LABEL                |
+----------------------+
| [INPUT TEXT]  <NOTE> |
+----------------------+ */
div.control.inline-note em,
em.note.inline
{
    display: inline!important;
    padding-left: 7px!important;
}
/* Padding formatting */
.padding-left
{
    padding-left: 15px!important;
}
.padding-top
{
    padding-top: 30px!important;    
}
.half-padding-top
{
    padding-top: 15px!important;
}
.no-padding-vert
{
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.small-padding-vert
{
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}
.padding-vert
{
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
.control-padding-vert
{
    padding-top:15px!important;
    padding-bottom:10px!important;
}
.no-padding-top,
.no-padding-top .control
{
    padding-top: 0!important;
}
.no-padding-bottom
{
    padding-bottom: 0!important;
}
.extra-padding
{
    padding-top: 18px!important;
}
.small-padding-bottom
{
    padding-bottom:10px!important;
}
/* Margin formatting */
.no-margin-vert
{
    margin-top: 0!important;
    margin-bottom: 0!important;
}
.no-margin-left
{
    margin-left: 0!important;    
}
.no-margin-horiz
{
    margin-left:0!important;
    margin-right:0!important;
}
.no-margin-top
{
    margin-top: 0!important;
}
.no-margin-top div.control
{
    margin-top: 0;
}
.small-margin-horiz
{
    margin-left: 7px!important;
    margin-right: 7px!important;
}
.half-small-margin-top
{
    margin-top: 5px!important;
}
.small-margin-top
{
    margin-top: 10px!important;
}
.medium-margin-top
{
    margin-top: 20px!important;
}
.large-margin-top
{
    margin-top:100px!important;
}
/* Floating */
.left
{
    float: left!important;
}
.right
{
    float: right!important;
}
.clear
{
    clear: both;
}
.text-align-center
{
    text-align: center;
}
/* To place a button aligned to the bottom of a control (considering its bottom padding/margin) in the same line */
.relative
{
    position: relative!important;
}
.absolute-bottom-right
{
    position: absolute!important;
    bottom: 10px!important;
}
/* Set a checkbox to be right below an input element. */
div.input-and-check div.checkbox
{
    clear: both;
    position: relative;
    padding: 0;
    top: -1em;
}
div.input-and-check
{
    float: left;
}
/* Align a group under a checkbox, useful for groups that depend of a setting */
div.group-under-check
{
    padding-left: 21px;
	width : 45em!important;
	}
/* 	vishal : group-under-subcheck is provided for under check without color */ 
div.group-under-subcheck
{
    padding-left: 21px;
	width : 45em!important;
	}
/* Single lined controls, such as radio buttons or check boxes, when used
 alone in a line don't need the vertical padding to match heights with other
 labelled controls. */
div.single-line div.control
{
    padding-top: 0;
    padding-bottom: 0;
}
div.control.single-line
{
    padding-top: 0!important;
    padding-bottom: 0!important;
}
/* Lined controls, such as radio buttons or check boxes, when used without
 notes and need extra space on the bottom to clearly separate them from other
 controls. */
div.double-line div.control,
div.control.double-line
{
    padding-top: 18px;
    padding-bottom: 30px;
}
/* Doubles the regular width of form elements */
div.double-width.text,
div.double-width div.text,
div.double-width div.checkbox,
div.double-width.textarea,
div.double-width div.textarea,
div.double-width.select1,
div.double-width div.select1,
div.double-width.select,
div.double-width div.select,
div.double-width.file,
div.double-width.data,
div.double-width.control,
div.double-width.action-list
{
/* vishal changes 58 to 35 & 57 to 34 */
    width: 58.6em!important;
	*width: 57.85em!important;
}

div.double-width.action-list
{
	*width: 39.1em!important;
}
div.double-width.select-full ul,
div.double-width.text input,
div.double-width div.text input,
div.double-width.textarea textarea,
div.double-width div.textarea textarea,
div.double-width.select1 select,
div.double-width div.select1 select,
div.double-width.select select,
div.double-width div.select select,
div.double-width div.grid table,
div.double-width.file input,
div.double-width.data p,
div.double-width div.action-list input.add-input,
div.double-width div.action-list ul,
div.double-width.action-list h3,
div.double-width.action-list ul
{
    width: 37.3em!important; /* 18em + 1.3em + 18em = 37.3em */
	*width: 36.8em!important;
}
div.double-width div.action-list ul,
div.double-width.action-list ul
{
	*width: 37.5em!important;
}
div.double-width.select1 select,
div.double-width div.select1 select,
div.double-width.select select,
div.double-width div.select select
{
	*width: 37.7em!important;
}
div.very-small-width
{
    width:5.3em!important;
}
div.very-small-width.text input
{
    width:4em!important; /* arbitrary */
}
div.half-width
{
    width:9.65em!important;
	*width:8.5em!important;
}
div.half-width.text input,
div.half-width.password input,
div.half-width div.ui-timepicker
{
    width:8.35em!important; /* 8.35em + 1.3em + 8.35em = 18em */
    *width: 7.5em!important;
}
div.half-width.select1 select
{
    width:8.35em!important;
}
div.small-width div.select1
{
    width:4.35em!important;
}
/* Specify a basic height for textareas (the default height is not enough) */
div.basic-height textarea
{
    height: 12em;
    min-height: 12em;
}
div.textarea-height.data p
{
    height: 6em!important;
    overflow: auto;
	word-wrap: break-word;
	white-space: normal;
	text-overflow: inherit;
}
div.auto-width div.control,
div.auto-width.control p
{
    width: auto;
}
div.auto-width
{
    width: auto!important;
}
/* Static bullet lists */
div.static-list ul
{
    padding-left: 30px;
}
/* Scroll box on a select full control */
div.select-full.scroll-box ul
{
    clear: both;
    border: 1px solid #ABADB3;
    padding: 0 5px;
    height:9.7em;
    overflow: auto;
}
/* Custom control to render a label over a boxed unordered list (ul) with scroll
<div.control.simple-list-view>
    <label>TEXT</label> (optional)
    <ul> (or OL)
        <li>TEXT</li>
        <li>TEXT</li>
            <ul>
                <li>TEXT</li>
                <li>TEXT</li>
            </ul>
        <li>TEXT</li>
        <li class="empty">EMPTY</li>
    </ul>
</div> */
div.control.simple-list-view
{
    float:none!important;
}
div.control.simple-list-view ul,
div.control.simple-list-view ol
{
    clear: both;
    border: 1px solid #ABADB3;
	padding:10px 30px;
	height:19.4em;
	overflow:auto;
	margin:0;
}
div.control.simple-list-view ul ul,
div.control.simple-list-view ol ol
{
	border:0;
	padding:5px 30px;
	height:auto;
	overflow:visible;
}
div.control.simple-list-view li.empty
{
    font-style: italic;
    color: #767676;
    list-style-type: disc;
}
/* Stretch width and auto overflow */
div.stretch-auto
{
    overflow:auto;
    width:100%;
}
/* To hide anything */
.hidden
{
    display: none!important;
}
.invisible
{
    position: absolute!important;
    z-index: -1!important;
    opacity: 0!important;
    -moz-opacity: 0!important;
    filter: alpha(opacity=0)!important;
}
/* Labels are usually in bold, use "label-normal" on a control to make its label appear normal.
Example: radio buttons or checkboxes that should look like being inside a radio list or check list. */
div.control.label-normal label
{
    font-weight: normal!important;
}
/* Custom control for date and time:
it is actually create by putting 3 controls inside a div decorated with class control and data or time.
<DIV.control.date>
    <label>TEXT</label>
    <DAY>
    <MONTH>
    <YEAR>
</DIV>
where day and year are text inputs and month is a select input.
also, day, month and year can be in any order.
<DIV.control.time>
    <label>TEXT</label>
    <HOUR>
    <MINUTE>
    <AM/PM>
</DIV>
where hour and minute are text inputs and am/pm is a select input.

to fill the 19.3em width we had to set different dimensions for the controls
[ 19.3em                                             ] the space for a single control
[[ 6.5em         ][ 6.4em          ][ 6.4em         ]] select + text + text; select has +.1em to make the sum right
but we have to consider the 1.3em margin to the right
[[ 18m                                       ] 1.3em ] control + margin
[[ 5.2em ] 1.3em ][[ 5.1em ] 1.3em ][[ 5.1em ] 1.3em ] select + margin + text + margin + text + margin
 */
div.control.date,
div.control.time
{
    width: 19.3em!important;
	*width: 19.6em!important;
    padding-right: 0;
}
div.control.date div.control,
div.control.time div.control
{
    width: 6.4em!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
}
div.control.date div.control.select1,
div.control.time div.control.select1
{
    width: 6.5em!important;
}
div.control.date div.control,
div.control.time div.control,
div.control.date div.control.select1,
div.control.time div.control.select1
{
    *width: 5.2em!important;
}
div.control.date input,
div.control.time input
{
    width: 5.1em!important;
	*width: 4.2em!important;
}
div.control.date select,
div.control.time select
{
    width: 5.2em!important;
	*width: 5em!important;
}
/* Put two columns side-by-side - automatic */
.auto-width-column
{
    float: left;
    width: auto;
}
/* Put two columns side-by-side - 40% */
.half-width-column
{
    float: left;
    width: 40% !important;
}
/* A thin column to use between 2 half width columns - 10% */
.thin-width-column
{
    float:left;
    width:10%;
    text-align:center;
}
.thin-width-column .button input
{
    min-width: inherit!important;
}
/* Creates a line that separate two different sections */
.section-separation
{
    margin: 10px 0px 10px 0px;
    border-top: 1px solid #E5E8E8;
}
/* CONTROL - BUTTON action inside a grid */
div.grid table span.button.action
{
    cursor: pointer;
    background-image:none;
    vertical-align: middle;
}
div.grid table span.button.action input:focus
{
    color:#006699;
}
div.grid table span.button.action input:hover
{
    background-color:#0096d6;
    color:#fff;
}
div.grid table span.button.action input:active
{
	background-color:#006699;
	color:#fff;
}
div.grid table span.button.action input
{
	color:#007dba;
	background-image:none;
	background-color:transparent;
	padding:1px 8px;
	margin:0;
	text-decoration:underline;
}	
div.grid table span.button.action.disabled input
{
	background-color:transparent;
}
div.grid table span.button.action.disabled input:hover,
div.grid table span.button.action.disabled input
{
	color:#b9b8b8;
}
/* Change a text to be bold */
div.text-bold p
{
    border:0;
    padding:0;
    font-size:1.5em;
    font-weight:bold;
    width:auto;
}
div.control.label-nowrap label
{
    white-space: nowrap;
}
/*Break the line when the word is to much long*/
div.grid td.word-break
{
    word-break: break-word;
}
/*APP BUTTON - The example of an Control Panel Application in the EWS
Used in the quick set summary and in the wizard page
The app-$APPLICATION informs which icon will be show and the title's background color
Frame is the icon background
+-----------------------------+
| |------| TITLE              |
+ | ICON |--------------------+
| |------| CONTENT            |
+-----------------------------+
<DIV.app-button.app-$APPLICATION">
    <h2#ID>TITLE</h2>
    <DIV.content#ID>DESCRIPTION</DIV>
    <span.frame>
        <span.icon></span>
    </span>
</DIV>
Change it to be displayed as
+----------+
| +------+ |
| | ICON | |
| +------+ |
| TITLE    |
| CONTENT  |
+----------+
*/
div.app-button
{
    position: relative;
}
div.app-button h2
{
    background-color: transparent;
    padding-top: 140px;
	font-size:1.6em;
	font-weight:normal;
}
div.app-button div.content
{
	font-size:1.3em;
}
div.app-button span.frame
{
    display: block;
	background-color:transparent;
	width: 140px;
	height: 140px;
	position: absolute;
	top: 0;
	left: 0;
}
div.app-button span.icon
{
    display: block;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center;
	height:140px;
	width:140px;
	margin:0;
}
div.app-button div.content span.button
{
    background: transparent;
    margin: 0;
    padding: 0;
}
div.app-button div.content span.button input
{
	background: transparent;
    cursor: pointer;
	color: #007dba;
	text-decoration: underline;
	text-align: left;
	padding: 0;
	height: auto;
	white-space:normal;
}
/*Quicksets and OneTouch images are added "after" the icon*/
div.app-button.quickset span.icon:after
{
    content: "";
    width: 140px;
    height: 140px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-image: url(/hp/device/Image?id=BadgeOptions.140x140.png);
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
div.app-button.quickset.instant span.icon:after
{
    background-image: url(/hp/device/Image?id=BadgeStart.140x140.png);
}
/*app button Copy*/
div.app-button.app-copy span.icon
{
	background-image:url(/hp/device/Image?id=Copy.140x140.png);
}
/*app button E-mail*/
div.app-button.app-email span.icon
{
	background-image:url(/hp/device/Image?id=ScanToEmail.140x140.png);
}
/*app button Fax*/
div.app-button.app-fax span.icon
{
	background-image:url(/hp/device/Image?id=ScanToFax.140x140.png);
}
/*app button Folder*/
div.app-button.app-folder span.icon
{
	background-image:url(/hp/device/Image?id=ScanToFolder.140x140.png);
}
/*app button SharePoint*/
div.app-button.app-sharepoint span.icon
{
	background-image:url(/hp/device/Image?id=ScanToSharepoint.140x140.png);
}
/*app button USB*/
div.app-button.app-usb span.icon
{
	background-image:url(/hp/device/Image?id=ScanToUSB.140x140.png);
}
/******************************************************************************
 * INPUT FILE HACK
 *****************************************************************************/
body.js div.control.file
{
    width: 30.6em!important;
    *width: 29.6em!important;
}
body.js div.double-width.control.file
{
    width: 38.6em!important;
    *width: 37.3em!important;
}
div.file-hack
{
    width: 29.3em!important;
    *width: 29.6em!important;
    position: relative;
    display: block;
    height: 1.85em;
    overflow: hidden;
}
div.double-width div.file-hack
{
    width: 37.3em!important;
}
div.file-hack span.file-hack-text
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 18em!important;
    *width: 17em!important;
    height: 1.85em;
    *height: 1.6em;
    line-height: 1.85em;
    padding: 0 .35em;
    border: 2px solid #ccc;
    display: block;
    font-weight: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}
div.double-width div.file-hack span.file-hack-text
{
    width: 26em!important;
    *width: 24.9em!important;
}
div.file-hack:hover span.file-hack-text,
div.file-hack input:focus + span.file-hack-text
{
    border: 2px solid #767676;
}
div.file-hack span.file-hack-button
{
    position: absolute;
    top: 0px;
    left: 19.3em;
    *left: 19.4em;
    width: 10em!important;
    *width: 8.5em!important;
    height: 1.85em;
    line-height:1.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    color: #fff;
    white-space: nowrap;
    padding: 0 .75em;
    display: block;
    background: #767676;
    text-align: center;
    border-radius: 0 4px;
    font-weight: normal;
}
div.double-width div.file-hack span.file-hack-button
{
    left: 27.3em;
}
div.file-hack:hover span.file-hack-button,
div.file-hack input:focus + span.file-hack-text ~ span.file-hack-button
{
    background-color: #5a5a5a;
}
div.file-hack input[type=file]
{
    position: absolute;
    top: -2em;
    left: -2em;
    height: 1em!important;
    width: 1em!important;
    cursor: pointer;
    background: transparent;
    border: 0;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}
div.control.disabled div.file-hack span.file-hack-text
{
    border-color: #b9b8b8;
    background-color: #e5e8e8;
    color: #b9b8b8;
    -webkit-text-fill-color: #b9b8b8;
}
div.control.disabled div.file-hack span.file-hack-button
{
    background-color: #e5e8e8;
}
/******************************************************************************
 * SELECT HACK
 *****************************************************************************/
div.select-hack
{
    width: 18em;
    position: relative;
    display: block;
    height: 1.85em;
    overflow: hidden;
	z-index: 3 !important;
}
div.select-hack span.select-hack-text
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 18em;
    *width: 17em;
    height: 1.85em;
    *height: 1.6em;
    line-height: 1.5em;
    padding: 0 .35em;
    border: 2px solid #ccc;
    display: block;
    font-weight: normal;
	text-align: left;
	background-color: #fff;
	color: #000;
}
div.select-hack:hover span.select-hack-text,
div.select-hack select:focus + span.select-hack-text
{
	background-color: #fff;
    border: 2px solid #767676;
}
div.select-hack span.select-hack-button
{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 1.85em;
    height: 1.85em;
    *height: 1.6em;
    line-height:1.85em;
    overflow: hidden;
    border: 2px solid #ccc;
	border-left-width: 1px;
    display: block;
	background-color: #fff;
	background-position: -1px -29px;
	*background-position: 0px -29px;
	background-image: url(img/selects.png);
}
div.select-hack:hover span.select-hack-button,
div.select-hack select:focus + span.select-hack-text ~ span.select-hack-button
{
    background-position: -1px -29px;
    *background-position: 0px -29px;
	border-color: #767676;
}
div.control.disabled div.select-hack span.select-hack-text
{
	background-color: #e5e8e8;
	color: #b9b8b8;
	border-color: #b9b8b8;
}
div.control.disabled div.select-hack span.select-hack-button
{
	background-position: -1px -83px;
	*background-position: 0px -83px;
	background-color: #e5e8e8;
	border-color: #b9b8b8;
}
div.control.error div.select-hack span.select-hack-button
{
	background-position: -1px -56px;
	*background-position: 0px -56px;
}

.double-width div.select-hack,
.double-width div.select-hack span.select-hack-text
{
	width: 37.3em!important;
}

.half-width div.select-hack,
.half-width div.select-hack span.select-hack-text
{
	width: 8.35em!important;
	width: 7.5em!important;
	background-color: #FFF;
}

.control.date div.select-hack,
.control.date div.select-hack span.select-hack-text,
.control.time div.select-hack,
.control.time div.select-hack span.select-hack-text
{
	width: 5.2em!important;
}

div.select-hack select
{
    position: absolute;
    top: 0px;
    left: 0px;
	right: 0px;
	bottom: 0px;
    cursor: pointer;
    background: transparent;
    border: 0px;
	outline: 0px;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    z-index: 1000;
}
div.select-hack select option
{
	border: 0px;
	outline: 0px;
	padding: .2em .3em;
}
/*****************************************************************************
* No menu - repositions content
*****************************************************************************/
body.noMenu div.column-content,
body.noMenu div.column-content div.page-header,
body.noMenu div.column-content div#content,
body.noMenu div.column-content div#content div.buttons.fixed
{
    left: 0;
}

body.noMenu div.column-content,
body.noMenu div.column-content div#content div.buttons.fixed
{
    bottom: 0;
}

body#PageSignIn #EwsLogin
{
    display: none;
}
/******************************************************************************
 * ERROR PAGE
 *****************************************************************************/
#PageError pre
{
    padding-bottom: 10px;
}
.pre,
#PageError pre
{
    white-space: pre-wrap!important; /* css-3 */
    white-space: -moz-pre-wrap!important; /* Mozilla, since 1999 */
    white-space: -pre-wrap!important; /* Opera 4-6 */
    white-space: -o-pre-wrap!important; /* Opera 7 */
    word-wrap: break-word!important; /* Internet Explorer 5.5+ */
}
.mono,
#PageError pre
{
    font-family: Monospace!important;
}
/*****************************************************************************
* Required rule for all form elements
*****************************************************************************/
div.text.required label:after,
div.textarea.required label:after,
div.password.required label:after,
div.radio.required label:after,
div.checkbox.required label:after,
div.data.required label:after,
div.file.required label:after,
div.grid.required div.empty:after,
div.select.required span.required:after,
div.select1.required span.required:after
{
    content: " *";
    color: #ff0000;
    font-weight: bold;
}
div.select span.required,
div.select1 span.required
{
    display:none;
}
div.select.required span.required,
div.select1.required span.required
{
    display:inline;
}
/*****************************************************************************/
body.modal div#content
{
    top: 76px;
    bottom: 46px;
}

body.modal div.buttons.fixed
{
    bottom: 0;
    left: 0;
}

body.modal div.page-header
{
    top: 0;
    left: 0;
}

div.dataTable
{
    padding: 0;
    float: none;
    position: relative;
}
div.dataTable table
{
    clear: both;
    border: 1px solid #B9B8B8;
    border-collapse: collapse;
}
div.dataTable th
{
    background: #767676;
    text-align: left;
    color: #FFF;
    padding: 2px 3px;
}
div.dataTable th,
div.dataTable td
{
	height: 2.5em;
	line-height: 1.85em;
    *position: relative;
}
div.dataTable th.command,
div.dataTable td.command
{
    text-align: center;
    width: 10px;
}
div.dataTable table div.control
{
    padding-bottom: 0;
    padding-right: 0;
}
div.dataTable th.command div.control,
div.dataTable td.command div.control,
div.dataTable table div.radio,
div.dataTable table div.checkbox,
div.dataTable table div.radio label,
div.dataTable table div.checkbox label
{
    height: 1.85em;
	line-height: 1.85em;
    width: 20px;
}
div.dataTable th.command div.control input,
div.dataTable td.command div.control input,
div.dataTable table div.radio input,
div.dataTable table div.checkbox input,
div.dataTable table div.radio label input,
div.dataTable table div.checkbox label input
{
    padding: 0 !important;
    margin: 7px 4px 0 0 !important;
}
body.js div.dataTable table div.checkbox
{
    *float: none!important;
}
body.js div.dataTable table div.checkbox label span
{
    *margin: 8px 0 0 -1px !important;
}
div.dataTable table th.command div.control label input,
div.dataTable table td.command div.control label input
{
    float: right;
    margin: 7px 4px 0 0 !important;
}
div.dataTable tr
{
    background-color: #FFF;
}
div.dataTable tr.alternate
{
    background-color: #F2F2F2;
}
/* automatic alternate wont work for all browsers
div.dataTable tbody tr:not(.sub):nth-child(odd)
{
    background-color: #EFEFEF;
} */
div.dataTable tr.sub td
{
    font-weight: bold;
    background-color: #efefef;
}

body.js div.dataTable tr td.leaf
{
    font-weight: bold;
    background-image: url(img/treeview.png);
    background-repeat: no-repeat;
    background-position: 10px -147px;
}
body.js div.dataTable tr td.leaf.closed
{
    background-position: 10px -95px;
}
div.dataTable tr td.leaf,
div.dataTable tr td.child
{
    padding-left: 40px;
}
div.dataTable tbody tr.child-hidden
{
    display: none !important;
}
div.dataTable tr.selected
{
    background-color: #99CCFF;
}
/* tr:hover */
div.dataTable tr:hover
{

}
div.dataTable tr.selected
{
    background-color: #99CCFF;
}
/* tr.selected:hover */
div.dataTable tr.selected:hover
{
	background:#7ebdfc!important;
}
div.dataTable div.control
{
    padding: 0;
    margin: 0;
}
div.dataTable div.empty
{
    clear: both;
    border: 1px solid #B9B8B8;
    padding: 10px 10px;
    color: #767676;
}
div.dataTable tr.empty td
{
    text-align: center;
    background: #FFF;
}
div.dataTable td,
div.dataTable th
{
    cursor: default;
    padding: 0 .75em 0 .75em;
}
div.dataTable .center
{
    text-align: center;
}
/* EM inside a dataTable should be gray */
div.dataTable em
{
    color: #767676;
}
/*Data Table used in IPSec*/

div.dataTableIPSec
{
    padding: 0;
    float: none;
    position: relative;
}
div.dataTableIpsec table
{
    clear: both;
    border: 1px solid #B9B8B8;
    border-collapse: collapse;
}
div.dataTableIpSec th

{
	height: 1.5em;
	line-height: 1.85em;
    *position: relative;
}
div.dataTableIpSec td
{
height: 25 px;;
	line-height: 15px;
    *position: relative;
}
div.dataTableIpSec table div.checkbox,
div.dataTableIpSec table div.checkbox label
{
    height: 1.85em;
	line-height: 1.85em;
    width: 20px;
}

div.dataTableIpSec tr
{
    background-color: #F2F2F2;
}
div.dataTableIpSec td,
div.dataTableIpSec th
{
    cursor: default;
    padding: 0 .50em 0 .50em;
}
.dataTableIpSec td{
  
   border-top:1px solid #ccc;
   vertical-align:top;
    padding:2px 5px 1px 5px;
}
div.dataTableIpSec
{
 border:none;
}
div.dataTableIpSec tr.capRowNoSep th {
   background-color:#767676;
   font: HPSimplified
   font-weight:bold;
   text-align:left;
   vertical-align:top;
   padding:3px 5px 2px 5px;
   color:#ffffff; 
}
div .dataTableIpSec h3
{
color:#ffffff;
}
div.dataTableIpSec tr.customBackgroundColorHeading
{
    background-color: #5A5A5A;
}
th.seperatorMedium  {
   border-right:3px solid #fff;
}
td.seperatorMedium  {
   border-right:3px solid #fff;
}
.scrollingTableDiv {
   clear:both;
   overflow:scroll; 
   width:100%;
   appearance: none;
  box-shadow: none;
  border: 2px solid #CCCCCC;
  Background-color:#ffffff;
  Font-color:#000000;

}


/* vishal:for other settings page */
/* same width for all form elements */

div.vsmall-width
{
}
div.vsmall-width.text input
{
    width:8.35em!important; /* 8.35em + 1.3em + 8.35em = 18em */
    *width: 7.5em!important;
}
/* same width for all form elements */

div.smallCheckbox

{
    width: 14.3em;
    *width: 13.3em;
}

div.smallCheckbox_14width

{
    width: 10.3em;
    *width: 10.3em;
}
body.js div.control label input[type=checkbox]
{
    position: absolute;
    top:0px;
    left:0px;
    z-index: -1;
    opacity: 0;
    filter: alpha(opacity=0);
}

div.smallCheckbox label
{
    margin: 0;
	line-height: 1.85em;
	display: inline-block;
}
div.smallCheckbox
{ 
    padding: .4em .4em .7em 0;
}
div.select div.smallCheckbox
{
    padding: 0 1.3em .43em 0;
}

body.js div.smallCheckbox label
{
    padding: 0 0 1px 21px;
    *display: inline-block;
}

div.smallCheckbox.disabled label
{
    color: #CCC;
}
/**********************************************
 * smallCheckbox and SELECT 
 **********************************************/
/* starting state */
body.js div.smallCheckbox label
{
    background-repeat: no-repeat;
    background-image: url(img/checkboxes.png);
    background-position: left 3px;   
}
/* hover/focus */
body.js div.smallCheckbox label:hover,
body.js div.smallCheckbox label input:focus + label
{
    background-position: left -105px;
}
/* disabled */
body.js div.smallCheckbox label.disabled,
body.js div.smallCheckbox label.disabled:hover,
body.js div.smallCheckbox input:focus + label.disabled
{
    background-position: left -320px;
}
/* checked */
body.js div.smallCheckbox label.checked
{
    background-position: left -213px;
}
/* error */
body.js div.smallCheckbox label.error,
body.js div.smallCheckbox input:focus + label.error
{
    background-position: left -428px;
}
/* checked + hover/focus */
body.js div.smallCheckbox label.checked:hover,
body.js div.smallCheckbox input:focus + label.checked
{
    background-position: left -536px;
}
/* checked + disabled */
body.js div.smallCheckbox label.checked.disabled,
body.js div.smallCheckbox input:focus + label.checked.disabled
{
    background-position: left -644px;
}
/* checked + error */
body.js div.smallCheckbox label.checked.error,
body.js div.smallCheckbox input:focus + label.checked.error
{
    background-position: left -753px;
}
div.action-list h3 div.smallCheckbox
{
    background-color:#767676;
    color:#fff;
    margin:0;
    float:none;
    clear:both;
    display:block;
}
div.action-list h3 div.smallCheckbox
{
    padding: 3px 0;
}
div.action-list li div.control.smallCheckbox label
{
    font-weight: normal;
}
/* display only these inputs */
div.action-list div.smallCheckbox input
{
    display: inline!important;
}
div.input-and-check div.smallCheckbox
{
    clear: both;
    position: relative;
    padding: 0;
    top: -1em;
}

/* Set a smallCheckbox to be right below an input element. */
div.input-and-check div.smallCheckbox
{
    clear: both;
    position: relative;
    padding: 0;
    top: -1em;
}

div#smallcontent
{
    position: fixed;
    top: 200px;
    left: 230px;
    right: 0;
    bottom: 50px;
    overflow: auto;
    padding: 30px 30px 8px 30px;
}

div#smallcontent > form
{
    min-width: 800px;
}
div#smallcontent.fixed
{
    bottom: 96px;
}
div.smallcontent p.page-description
{
    margin: 0 0 10px 0;
}
/******************************************************************************
 * width <= 1024px responsive solution
 * Vertical menu expands on hover
 *****************************************************************************/
@media (max-width: 1024px)
{
.tooltip
{
display: none !important;
}
.tooltip div.arrow
{
display: none !important;
}
    #page div.columns div.columns-smallcontent div.column.column-smallcontent,
    #page div.columns div.columns-smallcontent div.column.column-smallcontent div.sections div.buttons.bottom.fixed, 
    #page div.columns div.columns-smallcontent div.column.column-smallcontent div.buttons.fixed
    {
        left: 0px;
    }
    #page div.columns div.columns-smallcontent div.column.column-menu ul#localMenu
    {
        /* removed animation for now
        -webkit-transition: left .3s ease-out;
        -moz-transition: left .3s ease-out;
        -o-transition: left .3s ease-out;
        transition: left .3s ease-out;*/
        background-color: #fff;
        background-image: url(img/menu-arrow-blue-r.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding-left: 30px;
        -webkit-box-shadow: 3px 0 6px 0 #ccc;
        -moz-box-shadow: 3px 0 6px 0 #ccc;
        box-shadow: 3px 0 6px 0 #ccc;
        overflow-y: hidden;
        z-index: 5;
        /* vertical menu as vertical bar on the left */
        left: -215px;
        background-position: 0px 50%;
        /* vertical menu as a tag on the left */
        left: -205px;
        background-position: 5px 50%;
        border-radius: 0 8px 8px 0;
        top: 50%;
        bottom: 50%;
        margin: -50px -10px -50px 0;
    }
    #page div.columns div.columns-smallcontent div.column.column-menu ul#localMenu:hover
    {
        /* vertical as for larger resolutions */
        left: 0px;
        background-image: none;
        overflow-y: auto;
        border-radius: 0;
        top: 125px;
        bottom: 50px;
        margin: 0;
    }
    /* Vertical menu items are "invisible" when the menu is off */
    #page div.columns div.columns-smallcontent div.column.column-menu ul#localMenu li
    {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
    }
    #page div.columns div.columns-smallcontent div.column.column-menu ul#localMenu:hover li
    {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
    }
div.app-button div.smallcontent
{
    background-color:transparent;
	background:transparent;
    padding:4px 8px 8px 100px;
	font-size:1.3em;
	min-height:97px;
	position: relative;
}
div.app-button div.smallcontent span.button
{
    background: transparent;
    position: absolute;
    width: 260px;
    height: 85px;
    left: 100px;
    top: 5px;
    margin: 0;
    padding: 0;
}
div.app-button div.smallcontent span.button input
{
	background: transparent;
    cursor: pointer;
	color: #007dba;
	text-decoration: underline;
	text-align: left;
	padding: 0;
	height: auto;
	white-space:normal;
}
div.app-button h2,
div.app-button div.smallcontent
{
    word-wrap:break-word;
}
tr.captionRow th {
   background-color:#968F89;
   font-weight:bold;
   text-align:left;
   vertical-align:top;
   padding:3px 5px 2px 5px;
   color:#fff; 
   border-right:1px solid #ccc;
}

tr.capRowTopBorder th 
{
   border-top:1px solid #ccc;
   }




th.noBorder
{
border:none;
margin:0 px;
padding:0 px;
}

div.custom_checkbox
{
    	padding-top: 1px;
		padding-left:6px;
}
div.custom_text_2width
{
    	padding-top: 2px;
		padding-left:2px;
}
div.custom_text_4width
{
    	padding-top: 2px;
		padding-left:2px;
}
div.customStyle
{
padding: 0px 20px 2px 15px;
}

div.custom-width
{
    width:10.65em!important;
	*width:8.5em!important;
}
div.custom-width.select1 select
{
    width:10.35em!important;
}
.custom-width div.select-hack,
.custom-width div.select-hack span.select-hack-text
{
	width: 10.35em!important;
	width: 10.5em!important;
}


div.custom_select select {
  display: block;
  margin: 0;
  appearance: none;
  box-shadow: none;
  border: 2px solid #CCCCCC;
  Background-color:#ffffff;
  Font-color:#000000;
}
div.custom_select select:focus {
  border: 2px solid #5A5A5A;
 Font-color:#000000;
}
div.custom_select select:hover {
  border: 2px solid #5A5A5A;
  Background-color:#ffffff;
  Font-color:#000000;
}

div.custom_select select:disabled {
 Background-color:#E5E5E5;
 border: 2px solid #CCCCCC;
 Font-color:#B3B3B3;
}


div.checkbox1 label

{
    margin: 0;
	line-height: 1.85em;
}

div.checkbox1

{ 
    padding: 1.3em 1.3em 1em 0;
}
div.select div.checkbox1
{
    padding: 0 1.3em .43em 0;
}

body.js div.checkbox1 label

{
    padding: 0 0 1px 21px;
    *display: inline-block;
}

div.checkbox1.disabled label

{
    color: #CCC;
}
/**********************************************
 * CHECKBOX and SELECT 
 **********************************************/
/* starting state */
body.js div.checkbox1 label

{
    background-repeat: no-repeat;
    background-image: url(img/checkboxes.png);
    background-position: left 3px;   
}
/* hover/focus */

body.js div.checkbox1 label:hover,
body.js div.checkbox1 label input:focus + label
{
    background-position: left -105px;
}
/* disabled */

body.js div.checkbox1 label.disabled,
body.js div.checkbox1 label.disabled:hover,
body.js div.checkbox1 input:focus + label.disabled
{
    background-position: left -320px;
}
/* checked */

body.js div.checkbox1 label.checked
{
    background-position: left -213px;
}
/* error */

body.js div.checkbox1 label.error,
body.js div.checkbox1 input:focus + label.error
{
    background-position: left -428px;
}
/* checked + hover/focus */

body.js div.checkbox1 label.checked:hover,
body.js div.checkbox1 input:focus + label.checked
{
    background-position: left -536px;
}
/* checked + disabled */

body.js div.checkbox1 label.checked.disabled,
body.js div.checkbox1 input:focus + label.checked.disabled
{
    background-position: left -644px;
}
/* checked + error */

body.js div.checkbox1 label.checked.error,
body.js div.checkbox1 input:focus + label.checked.error
{
    background-position: left -753px;
}

/*****************************************************************************
* Required rule for all form elements
*****************************************************************************/
div.smallCheckbox.required label:after,
div.checkbox1.required label:after
{
    content: " *";
    color: #ff0000;
    font-weight: bold;
}

.ui-helper-hidden-accessible
{
    display: none;
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}