.Grid
{
	color: #000;
	background-color: #ddd;
	border: none;

	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;

	/* http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ */
	/*
	-moz-box-shadow: 4px 4px 6px #000;
	-webkit-box-shadow: 4px 4px 6px #000;
	box-shadow: 4px 4px 6px #000;
	*/
	/* For IE 8 */
	/* -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000')"; */
	/* For IE 5.5 - 7 */
	/* filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000'); */

	border-collapse: collapse!important;	/* Without that the shaddow will never show up */
	margin-bottom: 4px;
}

.Saving
{
	opacity: 0.5;
	filter:Alpha(opacity=50);
}

.Grid TH, .Grid TD
{
	padding: 0px 3px 0px 3px;

	border: 1px solid #333;

	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
.Grid TABLE TH, .Grid TABLE TD
{
	border: none;
}

.Grid TR:hover
{
	background: #fd0!important;
	color: black;
}
.Grid TR.Selected:hover
{
	background: #ff8;
}
.Grid TR.Header:hover, .Grid thead:hover tr.Header th
{
	background: #0000a7!important;
	color: White!important;
}

.Grid .Header
{
	font-weight: bold;
	color: White;
	background: #000084;
}
.Grid .Header2
{
	color: #eee;
	background: #000063;
}
.Grid TR.Header2:hover TH
{
	background: #0000a7;
}
.Grid .Header, .Grid .Header TD, .Grid .Header TH, .Grid .Header2 TH
{
	border: 1px solid #eee;
	height: 15px;
}
.Grid TH.Header
{
	text-align: left;
}
.Grid .Alt TH.Header
{
	background: #000075;
}
.Grid TR:hover TH.Header
{
	background: #0000aa;
}

.Grid .Header .Rotated
{
	display: inline-block;
	/* http://stackoverflow.com/questions/4540885/how-can-i-control-the-width-of-a-table-header-cell-that-contains-rotated-text */
    -moz-transform: rotate(90deg) translate(0, 100%);
	-moz-transform-origin: 0% 100%;
	-o-transofrm: rotate(90deg) translate(0, 100%);
	-o-transofrm-origin: 0% 100%;
	-webkit-transform: rotate(90deg) translate(0, 100%);
	-webkit-transform-origin: 0% 100%;
	-webkit-backface-visibility: hidden;
	transform: rotate(90deg) translate(0, 100%);
	transform: translate3d(0,0,0);	/* Add antialiasing */
	transform-origin: 0% 100%;
	writing-mode: tb-rl;
	filter: flipV flipH;
	text-align: left;
	font-size: 11px;
	font-weight: normal;
	padding: 4px;
/*	filter: fliph flipv; */
}
.Grid .Header .MultiColumn
{
	border: 1px solid #eee;
	font-weight: normal;
	padding-bottom: 2px;
	padding-top: 2px;
	/* http://stackoverflow.com/questions/4540885/how-can-i-control-the-width-of-a-table-header-cell-that-contains-rotated-text */
	/*
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
	*/
	writing-mode: tb-rl;
	text-align: left;
	height: 150px;
/*	filter: fliph flipv; */
}

.Grid .Header A
{
	color: #ff0;
	text-decoration: none;
}

.Grid .RowNr
{
	color: White;
	background: #666;
	text-align: right;
	vertical-align: top;
	border: 1px solid #eee;
}
.Grid .Header .RowNr
{
	text-align: center;
}
.Grid .Default
{
	color: #00a;
	font-weight: bold;
}
.Grid .Alternating, .Grid .Alt
{
	background: #ccc;
}
.Grid .Selected
{
	/* font-weight: bold;
	color: White;
	background: #008a8c; */
	background: #cfc;
}
.Grid .Selected .RowNr
{
	background: #494;
}
.Grid TR:hover .RowNr
{
	background: #a80;
}
.Grid .Edit
{
	background: #fc9;
}
.Grid .Edit .RowNr
{
	background: #a52;
}
.Grid .Insert
{
	background: #9cf;
}
.Grid .Insert .RowNr
{
	background: #25a;
}

.Grid .Action
{
	background: #99a;
	font-family: Arial;
	text-align: center;
	white-space: nowrap;
	padding-left: 0;
	padding-right: 0;
}
.Grid .Header .Action
{
	background: #226;
}
.Grid .Alternating .Action, .Grid .Alt .Action
{
	background: #778;
}
.Grid .Insert .Action
{
	background: #47b;
}
.Grid .Edit .Action
{
	background: #da6;
}
.Grid .Selected .Action
{
	background: #aea;
}
.Grid .Action img
{
	cursor: pointer;	/* it's most likely an action button */
}
.Grid .Check TD, .Grid TD.Check
{
	padding: 0px;
}
.Grid .Check INPUT, .Grid TD.RightBox INPUT
{
	margin: 0px;
}
.Grid TD.RightBox, .Grid .RightBox TD
{
	padding: 0 4px 0 0;	/* edit boxes have border and Chrome pushes them too far to the right */
	text-align: right;
}
.Grid TD.RightBox INPUT, .Grid .RightBox TD INPUT
{
	text-align: right;
}
#EditorSaving
{
	position: absolute;
	top: 145px;
	left: 230px;
	display: inline-block;
	padding: 0 3px 0 0;
	background: yellow;
	border: 1px solid gray;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}
#EditorSaving IMG
{
	margin: -2px 0 -2px -2px;
}


.Grid .Pager TD
{
	border: 1px solid #aaa;
	background: #555;
	color: #fff;
}
.Grid .Pager A
{
	color: #ff0;
	text-decoration: none;
	font-weight: bold;
}
.Grid TR.Pager:hover TD
{
	background: #444;
}
.Grid .Pager input.Pos
{
	width: 20px;
	text-align: center;
	vertical-align: -2px;
	margin: -2px 0;
}
.Grid INPUT
{
	width: 100%;
}
.Grid .Group
{
	background: #04a;
	color: #fffff0;
	text-align: left;
	font-weight: normal;
}
.Grid .Group td
{
	font-size: 120%!important;
	padding: 2px 4px;
}
.Grid .Sub
{
	color: White;
	background: #666;
	border: 1px solid #eee;
	text-align: left;
	font-weight: normal;
}
.Grid .Sub td
{
	font-size: 110%!important;
	padding: 0 3px 1px 3px;
}
.Grid .Total
{
	border: 1px solid #eee;
	color: White;
	background: #04b;
	text-align: right;
	font-weight: bold;
}
.Grid .Pager .Total
{
	text-align: right!important;
}
.Grid .Alternating .Total, .Grid .Alt .Total
{
	background: #03a;
}
.Grid .Header .Total, .Grid .Pager .Total
{
	background: #007;
	text-align: center;
}

.Grid .SmallINPUT INPUT, .Grid .SmallINPUT SELECT
{
	font-size: 10px;
	line-height: 12px;
	height: 16px;
}

.Grid .red
{
	background: red;
}

img.Disabled, span.Disabled, div.Disabled
{
	opacity: 0.5;
	filter:alpha(opacity=50);	/* for IE8 and earlier */
}

/* knockout.validation */
.Invalid
{
	color: Red;
}
INPUT.Invalid, .Invalid INPUT
{
	background: #fcc;
}

TH.Sortable
{
	color: Yellow;
}
.Sortable .sortIcon
{
	display: block;
	margin: 0 auto;
	padding: 1px;
}
TH.rot
{
	padding-top:5px;
}

.Grid .SepH TD, .Grid TD.SepV
{
	font-size: 3px;
	line-height: 3px;
	background: #fff!important;
	padding: 0;
	border-top: 1px solid #fff!important;
	border-bottom: 1px solid #fff!important;
}
.Grid TD.SepV
{
	width: 2px;
}
.Grid .Header .SepV
{
	border: 1px solid #000084;
}

.Grid TR.SepH:hover TD, .Grid TR:hover TD.SepV
{
	background: #fff;
}

.Grid tr.First td {
	border-bottom: none;
}
.Grid tr.NotFirst td {
	border-top: none;
	border-bottom: none;
}
.Grid td.NoLeft {
	border-left: none;
}
.Grid td.NoRight {
	border-right: none;
}
.Grid .NoWrap {
	white-space: nowrap;
}
.Grid .Bold {
	font-weight: bold;
}
.Grid .L {
	text-align: left;
}
.Grid .C {
	text-align: center;
}
.Grid .R {
	text-align: right;
}
.Grid .T {
	vertical-align: top;
}
.Grid .M {
	vertical-align: middle;
}
.Grid .B {
	vertical-align: bottom;
}
.Grid tr td.Comments {
	background: #ff8;
	padding: 2px 5px;
	-moz-box-shadow: rgba(0,0,0,0.4) 1px 2px 4px inset;
	-webkit-box-shadow: rgba(0,0,0,0.4) 1px 2px 4px inset;
	box-shadow: rgba(0,0,0,0.4) 1px 2px 4px inset;
}
.Grid tr.Alt td.Comments {
	background: #ee6;
}
.Grid textarea.Comments {
	background: #ff8;
	padding: 2px;
	-moz-box-shadow: rgba(0,0,0,0.4) 1px 2px 4px inset;
	-webkit-box-shadow: rgba(0,0,0,0.4) 1px 2px 4px inset;
	box-shadow: rgba(0,0,0,0.4) 1px 2px 4px inset;
	width: 100%;
	margin: 0 0 -2px -3px;
}


@media print
{
	.Grid *
	{
		background: none!important;
		color: black!important;
	}

	.Grid, .Grid td, .Grid th
	{
		border: 1px solid #333!important;
	}

		.Grid .SepH TD, .Grid TD.SepV
		{
			background: #fff!important;
			border-bottom: 1px solid #333!important;
		}
		.Grid .Action img
		{
			display: none;
		}
}