/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 1) DataTable Example 1
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.datatable { border: 0; margin-bottom: 2em; border-collapse: collapse;  width: 100%;}
	
	table.datatable td, table.datatable th { border-bottom: 1px solid #DDD; vertical-align: top; padding: 5px 10px;} 
	
	table.datatable thead th { background-color: #333 !important; white-space: nowrap; color: #FFF; border-top: 1px solid #ccc; font-size: 13px; font-weight: bold; text-align: left;}	
		
	table.datatable tbody td { background-color: #FFF; font-size: 13px; }    
		
	table.datatable tr.even td { background-color: #F9F9F9; }
	table.datatable tr.odd td { background-color: #fff; }
	table.datatable tr.group td { background-color: #ddd; color: #000; font-weight:bold; }
	
	table.datatable tbody tr:hover td { background-color: #F5FAFA !important; }
	
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * 2) DataTables sorting
     * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    table.datatable .sorting_asc a, 
    table.datatable .sorting_desc a, 
    table.datatable .sorting a {color: White;}
    table.datatable .sorting_asc a:hover, 
    table.datatable .sorting_desc a:hover, 
    table.datatable .sorting a:hover {color: #eee;}

    table.datatable .sorting_asc { background: url(images/sort_asc.png) no-repeat center right;	padding-right:22px!important; }

    table.datatable .sorting_desc { background: url(images/sort_desc.png) no-repeat center right; padding-right:22px!important; }

    table.datatable .sorting { background: url(images/sort_both.png) no-repeat center right; padding-right:22px!important; }

    table.datatable .sorting_left { text-align:left!important; }
    table.datatable .sorting_right { text-align:right!important; }
    table.datatable .sorting_center { text-align:center!important; }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * 3) DataTables filter
     * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    table.datatable .h_filter { background-color:#eee; white-space: nowrap;}
    table.datatable .h_filter input, 
    table.datatable .h_filter select {padding: 3px!important; min-width:70px; width: 80px; font-size: 13px; color: #333; border: 1px solid #ccc;}
    table.datatable .h_filter .datef {width: 70px!important;}
    table.datatable .h_filter .h_text {vertical-align:bottom; margin: 3px; cursor: pointer; background: url(images/search.png) no-repeat center right; display:inline-block; width: 17px; height:18px;}
    table.datatable .nowrap {white-space: nowrap;}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 5) DataTable Context Menu
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */	
.contextMenu { position: fixed; width: 240px; z-index: 99999; border: solid 1px #CCC; background: #EEE; padding: 0px; margin: 0px; display: none; font-size: 13px;}

    .contextMenu li { list-style: none; padding: 0px; margin: 0px; }
    .contextMenu a{ color: #333; text-decoration: none; display: block; line-height: 20px; height: 20px; background-position: 6px center; background-repeat: no-repeat; outline: none; padding: 1px 5px; padding-left: 28px; font-size: 13px; }

    .contextMenu li.hover a { color: #FFF; background-color: #3399FF; }
    .contextMenu li.disabled a { color: #AAA; cursor: default; }
    .contextMenu li.hover.disabled a { background-color: transparent; }
    .contextMenu li.separator { border-top: solid 1px #CCC; }
    .contextMenu li a.selected { background-image: url(images/ok.png); }
 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 4) Paging Example 1
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */	
.pager { width:100%; display:block; margin: 10px; font-size: 13px;}
    .pager .page_size {float: left; width: 150px;}
        .pager .page_size select {font-size: 13px;}

    .pager .pagination {float: left; width: 300px; margin-left: 20px;}
        .pager .page_scroller_container .leftbtn, 
        .pager .page_scroller_container .rightbtn { height: 19px; width: 19px; float: left; cursor: pointer;}        
        .pager .page_scroller_container .leftbtn { margin-right: 8px; background-image: url(images/back_enabled.png); } 
        .pager .page_scroller_container .rightbtn { margin-left: 9px; background-image: url(images/forward_enabled.png); }
        .pager .page_scroller_container .scroller { float: left; width: 245px; margin:3px 0;}
  
        .pager .pagination a,
        .pager .pagination .active { margin: 2px; height: 20px; cursor: pointer; text-decoration:none; float:left; line-height:14px; }        
        .pager .pagination .active span { margin:0px;  font-weight: bold; }
        .pager .page_scroller_container a.first { background: url(images/first.png) no-repeat; width: 16px; } 
        .pager .page_scroller_container a.last { background: url(images/last.png) no-repeat; width: 16px; }
        .pager .page_scroller_container a.next { background: url(images/next.png) no-repeat; width: 16px; } 
        .pager .page_scroller_container a.previous { background: url(images/previous.png) no-repeat; width: 16px; } 
        
    .pager .pages {float: left; width: 150px; margin-left: 20px;}
    .pager .items {float: left; width: 200px; margin-left: 20px;}

.pager .pagination ul {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
}
.pager .pagination ul > li {
    display: inline;
}
.pager .pagination ul > li > a, .pager .pagination ul > li > span {
    float: left;
    line-height: 20px;
    padding: 0px 5px;
    text-decoration: none;
}
.pager .pagination ul > li > a:hover, .pager .pagination ul > .active > a, .pager .pagination ul > .active > span {
    
}
.pagination ul > .active > a, .pagination ul > .active > span {

    cursor: default;
}
.pager .pagination ul > .disabled > span, .pager .pagination ul > .disabled > a, .pager .pagination ul > .disabled > a:hover {

    cursor: default;
}
.pager .pagination ul > li:first-child > a, .pager .pagination ul > li:first-child > span {
    border-bottom-left-radius: 4px;
    border-left-width: 1px;
    border-top-left-radius: 4px;
}
.pager .pagination ul > li:last-child > a, .pager .pagination ul > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.frame 
{
    border: 1px solid #A8A8A8;
    background-color: #fff; 
    min-height:400px; 
    padding:10px;    
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
 }    
.search {display:block; width:100%;clear:both;}
.right {float:right}
.left {float:left}
.gridFrame {display:block;width:100%;}
.margin-left {margin-left: 30px;}

.editor-field {position:relative;}
.editor-field input {width:300px;}    
.field-validation-error {display:block; position:absolute; background: none repeat scroll 0 0 #EE0101;z-index:1000;top:20px; left:200px; min-width: 200px;
    border: 2px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 6px #000000;
    color: #FFFFFF;
    font-size: 12px;
    padding: 4px 10px;}
    
#loading {text-align:center; padding-top:30px; display:none; position:absolute; z-index:9999; top:50%;left:46%; width: 100px; height:30px; background: #ffffff url(../js/facebox/loading.gif) no-repeat top center; border: 2px solid #DDDDDD; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 6px #000000;}