.grid
{
    position:relative; /*Används för att sfå summraden på rätt ställe.*/
    float:left;
    overflow:hidden;
    border:1px solid #999;
    background:#fff;
}

.grid > div
{
    float:left;
    clear:left;
    display:table;
    white-space:nowrap;
}

/*JavascriptScroll*/
.grid div > .header
{
    display:table-row;
    height:21px;
    background:#99bbdd;
}

.grid div > .header span
{
    color:#fff;
}

.grid div > .header .sort
{
    float:none;
    cursor:pointer;
}

.grid div > .header .primarySort span
{
    font-weight:bold;
}

.grid div > .header .secondarySort span
{
    color:green;
}

.grid div > .header .cell
{
    border-right:1px solid #aaccee;
    height:11px;
}

.grid div > .header .cell:not(.hidden):last-of-type {
    border-right:0 !important;
    padding-right:5px !important;
}

.grid .toolbox
{
    float:right;
    clear:right;
    background:#99bbdd;
    display:block;
}


.grid .toolbox img
{
    cursor:pointer;
}

.grid .verticalScrollbar
{
    float:right;
    clear:right;
}

.grid .verticalScrollbar > *
{
    float:left;
    clear:both;
}

.grid .verticalScrollbar .slider
{
    display:block;
    float:left;
    clear:both;
}

/*Chrome CSS hack*/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .grid .toolbox
    {
        float:left;
    }
    
    .grid .verticalScrollbar
    {
        float:left;
    }
}

.grid .horizontalScrollbar
{
    float:left;
    clear:left;
}

.grid .horizontalScrollbar > *
{
    float:left;
}

.grid .horizontalScrollbar .slider
{
    display:block;
    float:left;
}

/*JavascriptScroll*/

/*No JavascriptScroll*/
.grid > div .header
{
    display:table-row;
    background:#99bbdd;
}

.grid > div .header span
{
    color:#fff;
}

.grid > div .header .cell
{
    border-right:1px solid #f0f0f0;
    padding: 0 4px; /*OBS! Om CellOffsetWidth måste också ändras!*/
}

.grid > div .header .cell:not(.hidden):last-of-type {
    border-right:0;
    padding-right:5px !important;
}

/*No JavascriptScroll*/

.grid > div .row
{
    display:table-row;
    background:#fff !important;
}

.striped > div .row:nth-child(odd)
{
    background:#ebf0f2 !important;
}

.striped > div .row:nth-child(even)
{
    background:#fff !important;
}

.striped > div .selected:nth-child(n)
{
    background:#ffe8a6 !important;
}

.striped > div .selected:nth-child(n):hover
{
    background:#e5d195 !important;
}

.striped > div .row:hover
{
    background:#c8d7e5 !important; /*Behövs eftersom bakgrunden kan sättas inline*/
    cursor:pointer;
}

.striped > div .arrowSelected:nth-child(n)
{
    background:#c8d7e5 !important;
}

.grid > div .row[onclick]
{
    cursor:pointer;
}

.grid > div .cell
{
    display:table-cell;
    color:#000;
    padding: 0 4px; /*OBS! Om CellOffsetWidth måste också ändras!*/
    border-right:1px solid transparent;
    vertical-align: bottom;
    overflow:hidden;
}

.grid > div .selected{
    background:#ffe8a6;
}

.grid > div .arrowSelected{
    background:#c8d7e5 !important;
}

.grid > div .selected > span{
    background:#ffe8a6 !important;
}

.grid > div .selected > input{
    background:#fff !important;
}

.grid > div input[readonly="readonly"]{
    border:0 !important;
}

.grid > div .cell:not(.hidden):last-of-type{
    border-right:0;
    padding-right:5px !important;
}

.grid > div .cell img
{
    margin-top: 2px; /*Tänk på vad du gör!*/ /*Tidigare var värdet 3px, men raderna med bilder i blev då 1px för stora i FF*/
}

.grid > div .cell .textBoxIcon
{
    float:left;
    width:16px;
    margin-top: 2px; /*Tänk på vad du gör!*/
}

.grid > div .cell span
{
    width:100%;
    min-height:16px;
    max-width:100%;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:2px 0 2px 0;
    float:left;
}

.grid > div .cell .textBoxIcon + span
{
    width:calc((100%) - 16px);
}

.grid > div .cell input[type="text"]
{
    width:100%;
    height:16px;
    margin:2px 0 2px 0;
    border:0;
    background-color:transparent;
}

.grid > div .cell input[type="text"]:focus
{
    background-color:#fff;
}

.grid .hidden
{
    display:table-cell !important;
    max-width:0;
    width:0;
    min-width:0;
    border:0;
    padding:0;
    margin:0;
    overflow:hidden;
    visibility:hidden;
    /*display:none är nog rätt sätt, men Chrome klarar inte av det riktigt. 2015-03-17 PLY GL*/
}

    .grid .hidden > span {
        visibility: hidden;
    }

.horizontalLines > div > div > div .row .cell
{
    border-bottom:1px solid #ccc;
}

.horizontalLines > .header .cell
{
    border-bottom:0;
}

.verticalLines > div .cell
{
    border-right:1px solid #ccc;
}

.verticalLines > div .cell:not(.hidden):last-of-type
{
    border-right:0;
    padding-right:5px !important;
}


.grid .sum .row:nth-child(n)
{
    background:#fff;
}

.grid .sum > .row:nth-child(n) .cell
{
    font-weight:bold;
    cursor:default;
    border-top:1px solid #ccc;
    border-bottom:0;
}

.grid:focus
{
    border:1px solid #c7a158;
    outline:none;
    box-shadow: 0 0 2px #f1ca7f;
}

.grid .line-through div *
{
    text-decoration:line-through;
}

.grid .paging
{
    width:100%;
    display:block;
    color:#666;
    border-top:1px solid #999;
}

.grid .paging > *
{
    float:left;
    font-size:12px;
}

.grid .paging > img
{
    margin:6px 3px 2px 3px;
    cursor:pointer;
}

.grid .paging > img:nth-of-type(1)
{
    margin-left:8px;
}

.grid .paging > img:nth-of-type(4)
{
    margin-right:12px;
}

.grid .paging span{
    margin:4px 2px 0 2px;
}

.grid .paging input
{
    height:10px;
    width:20px;
    margin:4px 2px 0 2px;
    padding:2px;
    outline:none;
}

.grid .paging > input:focus
{
    padding:3px; /*Behöver vara en px större av någon anledning???*/
}

    .grid .paging .filter {
        float:right;
    }

        .grid .paging .filter input {
            width:100px;
        }

        .grid .paging .filter button {
            margin-right: 20px;
        }

.grid .numeric input {
    text-align: right;
}