body {
    color: #333333; 
    font-family: Arial; 
    font-size: 11px; 
}

.tooltip{
    background:#eeeeee;
    font-size:10px;
    padding:2px;
    border:1px solid #000000;
    position: absolute;
    display: none;
    margin-top: 15px;
    margin-left: 15px;
    max-width: 200px;
    text-align:center;
}

.form { margin:0px; display: table; }
.form .form-row  
{
    clear:both;
}
.form .form-cell { position: relative; float:left; min-height: 30px; }
.form label {
    width: 100px;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px;
    margin: 2px;
    display: block;
    margin-top: 8px;
}
.form input[type=checkbox] {
    width: 20px; 
    margin-right: 180px; 
} 
.form .date-box{
    /*margin-right: 117px !important;*/
} 
.form .date-time-box{
    /*margin-right: 72px !important;*/
}
.form input[type=checkbox], .form .input[type=radio] { margin-top: 8.5px; }
.form input[type=text], .form input[type=password], .form textarea, .form select { margin-top: 3px; } 

input[type=text], input[type=password], input[type=radio], textarea, select { 
    width: 200px; 
    border: 1px solid #cccccc; 
    margin: 2px;
    color: #333333;
    font-family: Arial; 
    font-size: 11px;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    padding: 4px;
}
textarea {
    height: 70px; 
}

.text-radio { width: auto !important; }
.text-radio input[type=radio] { width: auto !important; float: left; padding: none; margin: 0 8px 0 0 !important; border: none; }

.text-check { width: auto !important; }
.text-check input[type=checkbox] { width: auto !important; float: left; padding: none; margin: 0 8px 0 0 !important; border: none; }
 
.date-box{
    /*width: 85px !important;*/
    background-image: url("../images/calendar.gif"); 
    background-position: right; 
    background-repeat: no-repeat;
    cursor: default;
}

.date-time-box{
    /*width: 130px !important;*/
    background-image: url("../images/calendar.gif"); 
    background-position: right; 
    background-repeat: no-repeat;
    cursor: default;
}

.form { margin-right: 20px; }
.form .clear { clear: both; }
.form .form-cell input[type=text].error,
.form .form-cell input[type=password].error,
.form .form-cell textarea.error,
.form .form-cell select.error { border:1px solid #FF0000;}
.form label.error  
{
    background-color: #ffffff; 
    border: 1px solid #FF0000; 
    margin-top: -3px; 
    margin-left: 5px; 
    color: #FF0000; 
    font-size: 8px; 
    white-space: nowrap !important; 
    padding-left: 2px; 
    padding-right: 2px;  
    width: auto !important;
}

.form div.error { border: 1px solid #FF0000; }

input[type=button] {
    background: url("../images/th.png");
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 2px 6px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    margin: 3px;
    color: #333333; 
    font-family: Arial; 
    font-size: 11px; 
}

input[type=button]:hover{
    color: #ffffff; 
    background: url("../images/th-over.png") repeat; 
}

.buttons{
    display: table !important;
    padding-top: 10px;
    margin:auto !important;
}

.dialog {
    position: absolute;
}

.dialog .dialog-container{}

.dialog .dialog-header {
    background:url("../images/th.png");
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    vertical-align: middle;
    padding:10px 10px 10px 10px;
    height:16px;
    border-bottom: none;
    display:block;
 }
.dialog .dialog-title {
    font-weight: bold;
    font-size: 12px;   
    float:left; 
    margin-right: 20px;
}
.dialog .dialog-close {
    background: url("../images/close.png");
    width: 16px;
    height: 16px;
    cursor: pointer;
    position:relative;
    float:right;
}
.dialog .dialog-content {
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    clear: both;
    padding: 10px;
    background-color: #ffffff;
}
.dialog .dialog-footer {
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    border-top: none;
    background-color: #eeeeee;
    text-align: left;
    font-size: 8px;
    padding: 2px;
    padding-left: 4px;
}
.dialog-overlay { border: 0; left:0; top:0; margin: 0; padding: 0; position:absolute; background: #000000; opacity: 0.5; filter: alpha(opacity=50); }

.alert { width: 300px; }
.alert .message { text-align: center; }

.confirm { width: 300px; }
.confirm .message { text-align: center; }

.centered {
    position: absolute;
}

.dragging { 
    opacity: .50; 
    filter: alpha(opacity = 50); 
}

.drag-element{
    cursor: move;
}

.calendar { position: absolute; border-collapse:separate; background: #ffffff; padding: 5px; font-weight: bold; color: #000000; font-family: Arial; font-size: 10px; border: 1px solid #cccccc; }
.calendar .months { float: left; }
.calendar .years { }
.calendar .hours { float: left; margin-top: 8px; width: auto !important; }
.calendar .minutes { float: left; margin-top: 8px; width: auto !important; }
.calendar .seconds { float: left; margin-top: 8px; width: auto !important; }
.calendar .separator { float: left; margin: 0 !important;  margin-top: 8px !important; width: auto !important; }
.calendar .calendar-days { margin-top: 5px; } /*Month*/
.calendar .calendar-days thead tr {} /*Days Names*/
.calendar .calendar-days thead tr td { text-align: center; } /*Day Name*/
.calendar .calendar-days tbody tr {} /*Week*/
.calendar .calendar-days tbody tr.even { } /*Even Week*/
.calendar .calendar-days tbody tr.odd { background: #dddddd; } /*Odd Week*/
.calendar .calendar-days tbody tr td { text-align: right; cursor: pointer; border: 1px solid #cccccc; padding: 2px; } /*Day*/
.calendar .calendar-days tbody tr td:hover { color: #ff0000; } /*Day*/
.calendar .calendar-days tbody tr td.off-month { color: #cccccc; } /*Off Month Day*/
.calendar .calendar-days tbody tr td.weekend { color: #ff0000; } /*Weekend Day*/
.calendar .calendar-days tbody tr td.today { border: 1px solid #000000; } /*Today*/
.calendar select { width: auto !important; padding: 0px !important; }

.dataTable { border-collapse: collapse; width: 100%; }
.dataTable thead {}
.dataTable thead tr 
{
    background: url("../images/th.png") repeat;
    color: #333333;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.dataTable thead tr th 
{ 
    border-color: #999999;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}
.dataTable tbody {}
.dataTable tbody tr { color: #333333; vertical-align: middle; cursor: pointer; }
.dataTable tbody tr.even {  }
.dataTable tbody tr.odd { background-color: #dddddd; }
.dataTable tbody tr.over { background-color: #cccccc; }
.dataTable tbody tr.selected { background-color: #bcbcbc; }
.dataTable tbody tr td
{
    border-color: #999999;
    border-style: solid;
    border-width: 1px;
    line-height: 18px;
    padding-left: 2px;
}
.dataTable input[type=checkbox] { padding: 0px !important; margin: 0px !important; }

.menu { border: 1px solid #666666; background-color: #f9f9f9; position: absolute; display: none; margin-left: -2px; margin-top: -2px; }
.menu .menu-item { color: #362b36; font-weight: bold; border: 1px solid #ffffff; padding: 2px 4px 2px 4px; }
.menu .menu-item-over { color: #362b36; background-color: #dbdbdb; cursor: pointer; }

.tabbar { margin-left: 10px; display: inline-block; font-size: 12px; }
.tabbar .tabbar-head {}
.tabbar .tabbar-tail {}
.tabbar .tabbar-tabs { font-weight: bold; }
.tabbar .tabbar-tabs .tab
{ 
    padding: 2px 5px 2px 5px;
    cursor: pointer; 
    float: left; 
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    margin: 0 0 0 3px;
    background: url("../images/th.png") repeat;
    color: #333333;
}
.tabbar .tabbar-tabs .over { color: #ffffff; background: url("../images/th-over.png") repeat; }
.tabbar .tabbar-tabs .selected { color: #ffffff; background: url("../images/th-over.png") repeat;  }
.tabbar .tabbar-tabs .disabled  
{
    color: #cccccc; 
    background: url("../images/th.png") repeat;  
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    cursor: default;
}

.pager { clear: both; font-size: 10px; display: table; margin: auto; margin-top: 5px; }
.pager .pager-head { width: 11px; height: 14px; margin-right: 4px; background: url("../images/left.png");  float: left; cursor: pointer; }
.pager .pager-tail {  width: 11px; height: 14px; margin-left: 4px; background: url("../images/right.png");  float: left; cursor: pointer; }
.pager .pager-pages { float: left; }
.pager .pager-pages .page { width:12px; text-align:center; margin: 2px; margin-top: 0px; float: left; cursor: pointer; }
.pager .pager-pages .actual { font-weight: bold; color: #000000; text-decoration: underline; }
.pager .pager-pages .over { font-weight: bold; font-size: 10px; color: #000000; }

.panel {  }
.panel .panel-header { float: right; clear: both; padding: 5px; width:100%; }
.panel .panel-elements { clear: both; }
.panel .panel-footer { clear: both; }

.tree {}
.tree .node { clear: both; }
.tree .node .button  
{
    float: left; 
    width: 12px; 
    height: 12px; 
    background: url("../images/th.png");
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: #333333; 
    font-family: Arial; 
    font-size: 10px;
    line-height: 10px;
}
.tree .node .collapse { background: url("../images/collapse.png");  }
.tree .node .expand { background: url("../images/expand.png"); }
.tree .node .label { float: left; margin: 0px; margin-left: 4px; white-space: nowrap; cursor: pointer; padding: 0px 3px 1px 3px; }
.tree .node .children { padding-left: 15px; clear: both; padding-top: 2px; }
.tree .node .leaf { margin-left: 10px; }
.tree .node .leaf:hover { background-color: #bcbcbc; }
.tree .node .selected { background-color: #bcbcbc; }


.left { float: left }
.right { float: right }

.preloader-overlay { position:absolute; background: #000000; opacity: 0; filter: alpha(opacity=0); z-index: 100001; }
.preloader-image { width: 64px; height: 47px; position: absolute; background-image: url("../images/preloader.gif"); z-index: 100002; }

.demo {}
.demo .content { width: 900px; height: 500px; border: 1px solid #999999; padding: 10px; }
.photo { background: url("../images/th.png"); width: 30px; height: 30px; }

.list 
{
    width: 200px; 
    border: 1px solid #cccccc; 
    margin: 2px;
    color: #333333;
    font-family: Arial; 
    font-size: 11px;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    padding: 4px;
    background-color: #ffffff;
    min-height: 14px;
    max-height: 150px;
    overflow: auto;
}
.list .item { cursor: default; white-space: nowrap; }

.lookup { }
.lookup .lookup-items { float: left; max-height: 75px; }
.lookup .lookup-items .item { overflow: hidden; }
.lookup .lookup-arrow { background-image: url("../images/lookup-up.gif"); width: 14px; height: 14px; float: right; }
.lookup .lookup-message { background-color: #ffffff; margin: 2px; position: absolute; text-align: center; font-style: italic; border: 1px solid #cccccc; }
.lookup .lookup-select { position: absolute; width: auto; cursor: default; overflow-x: hidden; max-width: 400px; }
.lookup .lookup-select .item { text-align: left; font-style: normal; }
.lookup .lookup-input  { padding: 0px !important; margin: 0px !important; border: 0px !important; }
.lookup .lookup-preloader 
{
    border: 1px solid #cccccc; 
    margin: 2px;
    background-color: #ffffff;
    position: absolute;
    background-image: url("../images/miniloader.gif"); 
    background-position:center; 
    background-repeat: no-repeat; 
    height: 11px;
}

.file-manager { }
.file-manager .list { width:200px; }
.file-manager .list .item { overflow: hidden; }
.file-manager .upload-button { background-image: url("../images/attach.gif"); width: 16px; height: 16px; float: right; cursor: pointer; }
.file-manager .uploader { position: absolute; }