/*
   Searchable and filterable datagrids appearing from the {% resultset %} tag.
*/

.datagrid {
    position:relative;
    xdisplay:inline-block;
    xbackground-color:yellow;
}

.datagrid .header { 
    position:relative; 
    height:24px; min-height:24px;  /* need enough space for search icon */
    margin-bottom:4px;             /* spacing between header and filter/data */
}

.datagrid .header form { 
    background-color:white; 
    border:0px solid green; 
    -moz-border-radius:0 12px 12px 0;
    -webkit-border-radius: 0 12px 12px 0;
    border-radius: 0 12px 12px 0;
}
.datagrid .header form { margin:1px; padding:0; }
.datagrid .header form { position:absolute; bottom:0px; top:0px; left:0px; }


/*--- SEARCH ----------------------------------------------------------------*/

.datagrid .header form .searchicon {
    vertical-align:text-bottom; 
    margin-right:8px; 
    cursor:pointer;
}
.datagrid .header form .clear-icon { margin:0; }

.datagrid .header form input.input { 
    height:100%; width:250px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border:none; 
    padding-left:2px; xborder:1px solid green;
}
.datagrid .header .empty-search { /* this is not themeing... */
    color:#999;
    font-weight:normal;
}
.datagrid .header .search-result { /* this is not themeing either */
    color:black;
    font-weight:normal;
}
.datagrid .searchicon { cursor:pointer; }
.datagrid .searchicon:hover {}
.datagrid .seek-icon { right:7px; top:0px; }



/*--- COUNTERS --------------------------------------------------------------*/
.datagrid .counters {
    font-size:11px;
    position:absolute; right:4px; bottom:0px; 
}

.datagrid .content { 
    border:none;   /* inhibit jqueryui widget-content border */
}

/*--- FILTER ----------------------------------------------------------------*/
.datagrid .filter { float:left; margin-right:4px; *width:200px; }

/* where it says "FILTER" */
.datagrid .filter .filter-header { font-size:105%; padding:4px 8px 4px; } 


.datagrid .filter .filter-item {  /* each individual filter */
    position:relative;
}

/* the header box of a filter, containing
   
     - filter-name    (the name of the filter)
         - includes the open/closed triangle
     - reset the icon to turn off the filter.
*/
.datagrid .filter-item-header {
    position:relative; 
    padding:4px; padding-right:7px;
    cursor:pointer;
}
.datagrid .filter .filter-name {  /* the filter name */  }

/* the open/closed triangles */
.datagrid .filter-item-header img { vertical-align:text-top; }
.datagrid .filter-item-header img.open {}
.datagrid .filter-item-header img.closed {}

.datagrid .filter-item .reset {   /* the icon to turn off the filter */
    float:right;
    margin-right:2px; margin-left:5px;
    cursor:pointer;
}
.datagrid .reset-hover {}

/*--- FILTER CONTENT --------------------------------------------------------*/

.datagrid .filter .filter-item-content { border-top:none; }
.datagrid .filter .filter-option { 
    border-bottom:1px solid #eee;
    padding:2px 7px;
    min-height:13px;
    height:auto;
}
.datagrid .filter .filter-option input { vertical-align:middle }
.datagrid .filter .filter-option label { vertical-align:middle }


/*--- LINKS ------------------------------------------------------------------*/
.datagrid a { text-decoration:none; }
.datagrid a:hover { text-decoration:underline; }




/*---  CONTENT --------------------------------------------------------------*/


.datagrid .content { 
    background:inherit; xbackground:blue; 
/*
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    
    display: box;
    box-orient: horizontal;
    box-align: stretch;
*/
}

/*--- DATA ------------------------------------------------------------------*/

.datagrid .result { /* This contains: results, pager. */ 
    xbackground:red; 
    xfloat:left;
}

.datagrid .data-overflow {  /* This is the box that the data table is enclosed in. */
    overflow:auto; 
}

.datagrid .result .data {  /* this is the data table */
    border-collapse:collapse;
    white-space:nowrap; 
    margin:0px 0px 0px 0px;
}
.datagrid .result .data th,
.datagrid .result .data td { 
    border:1px solid #aaa;
}
.datagrid .result .data th {
    font-weight:bold;
    padding:4px 5px; 
    background-color:#ddd;
}
.datagrid .result .data td { padding:2px 5px; }

.datagrid .data tbody a { font-weight:bold; }

.datagrid .up, .datagrid .down {
    vertical-align:middle; float:right;
    background-color:transparent;
    padding-right:24px;
    background-repeat:no-repeat;
    background-position:center right;
}
.datagrid .up { 
    background-image:url(http://static.datakortet.no/ikn/ui-icons/000000/ui-icon-carat-1-s.png);
}
.datagrid .down {
    background-image:url(http://static.datakortet.no/ikn/ui-icons/000000/ui-icon-carat-1-n.png);
}

.datagrid .result .data .odd { background-color:#EDF3FE }

/*--- PAGER -----------------------------------------------------------------*/
.datagrid .result .pager { margin:4px; xbackground:pink; }
.datagrid .pager .pagenum {
    font: bold 11px/11px "Lucida Grande", Verdana, Arial, sans-serif;
    display:inline-block; 
    min-width:1em; 
    border:1px solid #ccc;
    padding:1px 3px 1px 3px;
    text-align:center; 
    margin-right:3px; margin-top:3px;
    text-decoration:none; xbackground-color:yellow;
    cursor:default;
}
.datagrid .pager div.dots { 
    border:none; vertical-align:top;
    font-weight:bold; line-height:7px; position:reltive; top:-8px;
    cursor:default;
    xmargin-top:1px; 
}
.datagrid .pager div.current { 
    margin-top:1px; 
    pointer:default;
    border:3px solid white; border-color:orange;
}
.datagrid .pager div.title { margin-right:7px; margin-top:3px; border:none; }
.datagrid .pager a.pagenum:hover { }