@mixin reindeer-table($name : v-table) {

/* Table on blue background */
.blue .#{$name}-header-wrap {
	border-color: #92a2aa;
}
.blue .#{$name}-body {
	border-color: #92a2aa;
	border-top-color: #c2c3c4;
}

/* Default & white style */
.#{$name}-header-wrap,
.white .#{$name}-header-wrap,
.#{$name}-footer-wrap,
.white .#{$name}-footer-wrap,
.#{$name}-header-drag {
	border-color: #c2c3c4;
	background: transparent repeat-x;
	background-image: url(img/header-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
	height: 20px;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	color: #222;
	text-shadow: #f3f5f8 0 1px 0;
	line-height: normal;
}

.#{$name}-footer-wrap,
.white .#{$name}-footer-wrap {
	text-transform: none;
	font-size: 12px;
	font-weight: normal;
}

.#{$name}-footer td,
.white .#{$name}-footer td {
	border-color: #c2c3c4;
}

.#{$name}-footer-container {
	padding-right: 7px;
}


.#{$name}-header,
.#{$name}-footer,
.#{$name}-footer table {
	height: 20px;
}

.#{$name}-caption-container,
.#{$name}-header-drag {
	padding-top: 4px;
	padding-right: 4px;
}
.#{$name}-caption-container .v-icon,
.#{$name}-header-drag .v-icon {
	height: 16px;
	margin: -4px 3px 0 0;
	vertical-align: middle;
}
.v-ie .#{$name}-caption-container .v-icon,
.v-ie .#{$name}-header-drag .v-icon {
	margin-top: -3px;
}
.#{$name}-resizer {
	height: 20px;
	width: 2px;
	background: transparent;
	border-right: 1px solid #c2c3c4;
}

.#{$name}-sort-indicator {
	background: transparent;
	width: 0px;
	height: 20px;
}

.#{$name}-header-cell-asc .#{$name}-sort-indicator {
	background: transparent no-repeat right 7px;
	background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
	width: 16px;
}
.#{$name}-header-cell-desc .#{$name}-sort-indicator {
	background: transparent no-repeat right 7px;
	background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
	width: 16px;
}
.#{$name}-body,
.white .#{$name}-body {
	border-color: #c2c3c4;
	background: #fff;
}
.#{$name}-cell-content {
	padding-top: 0;
	border-right-color: #d3d4d5;
	vertical-align: top;
}
.#{$name}-cell-wrapper {
	padding-top: 3px;
	padding-bottom: 3px;
}
.#{$name}-row-odd {
	background: #eff0f1;
}
.#{$name}-generated-row {
    background: #dcdee0;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    color: #222;
    text-shadow: #f3f5f8 0 1px 0;
    line-height: normal;
}
.#{$name}-generated-row .#{$name}-cell-wrapper {
    padding-top: 4px;
    padding-bottom: 5px;
}
.#{$name}-cell-content:last-child {
	border-right-color: transparent;
}
.#{$name} .v-selected,
.black .#{$name} .v-selected {
	background: #4d749f url(../common/img/sel-bg.png) repeat-x; /* We can't include this in the sprite, since we don't know the row height */
	color: #fff;
	text-shadow: #3b5a7a 0 1px 0;
}
.#{$name} .v-selected .#{$name}-cell-content {
	border-right-color: #466c90;
}
.#{$name}-column-selector {
	width: 16px;
	height: 20px;
	margin-top: -20px;
	background: transparent no-repeat;
	background-image: url(img/col-sel-light.png); /** sprite-ref: verticals */
}
.#{$name}-column-selector:active {
	background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */
}
.#{$name}-focus-slot-left {
	border-left: 1px solid #222;
	margin-bottom: -20px;
	width: auto;
}
.#{$name}-focus-slot-right {
	border-right-color: #222;
	margin-right: 0;
}
.#{$name}-header-drag {
	padding-left: 6px;
	height: 16px;
}
.#{$name}-header-drag img {
	height: 16px;
	margin: -3px 3px 0 0;
}
.#{$name}-scrollposition {
	width: auto;
	background: transparent;
	border: none;
}
.#{$name}-scrollposition span {
	background: transparent repeat-x;
	background-image: url(img/scroll-indic-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
	border: 1px solid #939494;
	border: none;
	border-radius-bottomleft: 4px;
	border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	height: 13px;
	padding: 4px 30px;
	white-space: nowrap;
	color: #222;
	text-shadow: #fff 0 1px 0;
	position: relative;
	top: 1px;
	-webkit-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
}
.#{$name}-borderless .#{$name}-scrollposition span {
	top: 0;
}
/* row in column selector */
.v-contextmenu .v-on,
.v-contextmenu .v-off {
	display: inline-block;
	zoom: 1;
	background: transparent no-repeat 0 4px;
	background-image: url(../common/icons/bullet.png); /** sprite-ref: verticals; sprite-margin-top: 4px; sprite-margin-bottom: 4px */
	padding-left: 12px;
	padding-right: 4px;
}
.v-contextmenu .v-off {
	background-image: none;
	color: #666;
}
.v-contextmenu .gwt-MenuItem-selected .v-on {
	background-image: url(../common/icons/bullet-white.png); /** sprite-ref: verticals; sprite-margin-top: 4px; sprite-margin-bottom: 5px */
}


/* Strong style */
.#{$name}-strong .#{$name}-header-wrap,
.#{$name}-strong .#{$name}-header-drag {
	border-color: #2b3033;
	border-top-color: #2b3033;
	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
	color: #e7e9ea;
	text-shadow: #000 0 -1px 0;
}
.#{$name}-strong .#{$name}-body {
	border-top-color: #2b3033;
}
.#{$name}-strong .#{$name}-resizer {
	border-right-color: #1c1f21;
}
.#{$name}-strong .#{$name}-header-cell-asc .#{$name}-sort-indicator {
	background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
.#{$name}-strong .#{$name}-header-cell-desc .#{$name}-sort-indicator {
	background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
.#{$name}-strong .#{$name}-column-selector {
	background-image: url(img/col-sel.png); /** sprite-ref: verticals */
}
.#{$name}-strong .#{$name}-column-selector:active {
	background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */
}
.#{$name}-strong .#{$name}-focus-slot-left,
.#{$name}-strong .#{$name}-focus-slot-right {
	border-color: #9ca1a5;
}


/* Table on black background (normal style) */
.black .#{$name}-header-wrap,
.black .#{$name}-header-drag {
	border-color: #252729;
	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
	color: #e7eaee;
	text-shadow: #000 0 -1px 0;
}
.black .#{$name}-resizer {
	border-right-color: #252729;
}
.black .#{$name}-header-cell-asc .#{$name}-sort-indicator {
	background-image: url(img/asc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
.black .#{$name}-header-cell-desc .#{$name}-sort-indicator {
	background-image: url(img/desc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
}
.black .#{$name}-column-selector {
	background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */
}
.black .#{$name}-column-selector:active {
	background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */
}
.black .#{$name}-focus-slot-left,
.black .#{$name}-focus-slot-right {
	border-color: #9ca1a5;
}
.black .#{$name}-body {
	border-color: #252729;
	background: transparent;
}
.black .#{$name}-cell-content {
	border-right-color: #252729;
	border-bottom: 1px solid #252729;
}
.black .#{$name}-cell-wrapper {
	padding-bottom: 2px;
}
.black .#{$name}-row-odd {
	background: transparent;
}
/* Selection background-color combined with the default (white) style selector, so we don't have to duplicate the sprite image in the final sprite collection */
.black .#{$name} .v-selected .#{$name}-cell-content {
	border-bottom: 1px solid #4d749f;
}

/* Borderless style */
.#{$name}-borderless .#{$name}-header-wrap,
.#{$name}-borderless .#{$name}-body {
	border: none;
}

}