@mixin reindeer-datefield($primaryStyleName : v-datefield) {

.#{$primaryStyleName} {
	overflow: hidden;
}
input.v-textfield-readonly:focus{
	background-color: transparent;	
}
.#{$primaryStyleName}-calendarpanel {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	height: auto !important;
}
.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth,
.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextmonth {
	display: none;
}
.#{$primaryStyleName}-calendarpanel td {
	vertical-align: top;
}
td.#{$primaryStyleName}-calendarpanel-month {
	height: 23px;
	background-repeat: repeat-x;
	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
span.#{$primaryStyleName}-calendarpanel-month {
	display: block;
	text-align: center;
	height: 16px;
	padding: 3px 10px 0 10px;
	border-left: 1px solid #efefef;
	border-right: 1px solid #d8d8d8;
	text-shadow: #fff 0 1px 0;
	overflow: hidden;
	margin-top: 1px;
}
.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
	width: 35px;
}
.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
	width: 124px;
}
.#{$primaryStyleName}-month,
.#{$primaryStyleName}-day,
.#{$primaryStyleName}-full {
	min-width: 240px;
}
.#{$primaryStyleName}-popupcalendar {
	min-width: 0;
	padding-right: 24px;
}
.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
	width: 100px;
}
td.#{$primaryStyleName}-calendarpanel-prevyear {
	text-align: right;
}
td.#{$primaryStyleName}-calendarpanel-nextyear {
	text-align: left;
}
.#{$primaryStyleName}-calendarpanel-prevyear button,
.#{$primaryStyleName}-calendarpanel-nextyear button,
.#{$primaryStyleName}-calendarpanel-prevmonth button,
.#{$primaryStyleName}-calendarpanel-nextmonth button {
	width: 24px;
	height: 23px;
	border: none;
	background: transparent;
	background-repeat: no-repeat;
	background-image: url(img/year-prev.png); /** sprite-ref: verticals */
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	outline: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.v-ie & .#{$primaryStyleName}-calendarpanel-prevyear button,
.v-ie & .#{$primaryStyleName}-calendarpanel-nextyear button,
.v-ie & .#{$primaryStyleName}-calendarpanel-prevmonth button,
.v-ie & .#{$primaryStyleName}-calendarpanel-nextmonth button {
	text-indent: 0;
	font-size: 1px;
}
.#{$primaryStyleName}-calendarpanel-nextyear button {
	background-position: left top;
	background-image: url(img/year-next.png); /** sprite-ref: verticals */
}
.#{$primaryStyleName}-calendarpanel-prevyear button:active,
.v-ie & .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
	background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */
}
.#{$primaryStyleName}-calendarpanel-nextyear button:active,
.v-ie & .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
	background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */
}
.#{$primaryStyleName}-calendarpanel-prevmonth,
.#{$primaryStyleName}-calendarpanel-nextmonth {
	width: 24px;
	background-repeat: repeat-x;
	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
.#{$primaryStyleName}-calendarpanel-prevmonth button,
.#{$primaryStyleName}-calendarpanel-nextmonth button {
	width: 100%;
	height: 21px;
	border-left: 1px solid #efefef;
	border-right: 1px solid #d8d8d8;
	background: transparent;
	background-position: center top;
	background-image: url(img/month-prev.png); /** sprite-ref: verticals; sprite-alignment: center */
	min-width: 24px;
	margin-top: 1px;
}
.v-ie & .#{$primaryStyleName}-calendarpanel-prevmonth button,
.v-ie & .#{$primaryStyleName}-calendarpanel-nextmonth button {
	border: none;
}
.#{$primaryStyleName}-calendarpanel-nextmonth button {
	background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */
}
.#{$primaryStyleName}-calendarpanel-prevmonth button:active,
.v-ie & .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
	background-position: center top;
	background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
}
.#{$primaryStyleName}-calendarpanel-nextmonth button:active,
.v-ie & .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
	background-position: center top;
	background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
}
.#{$primaryStyleName}-calendarpanel-body,
.#{$primaryStyleName}-calendarpanel-time {
	text-align: center;
	vertical-align: top;
}
.#{$primaryStyleName}-calendarpanel-body table {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 220px;
	margin: 0 auto;
}
.#{$primaryStyleName}-calendarpanel-weekdays td {
	width: 14.2%;
	overflow: hidden;
	background-repeat: repeat-x;
	background-image: url(img/weekday-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 3px */
	font-size: 10px;
	line-height: normal;
	text-transform: uppercase;
	color: #eaeff1;
	text-shadow: #3b4651 0 -1px 0;
	vertical-align: top;
	padding:0;
}
.#{$primaryStyleName}-calendarpanel-weeknumbers td {
	width: 12.4%;
}
.#{$primaryStyleName}-calendarpanel-weekdays strong {
	display: block;
	text-align: right;
	padding: 1px 5px 0 0;
	height: 14px;
	border-top: 1px solid #596775;
}
.#{$primaryStyleName}-calendarpanel-weekdays .v-first {
	background-repeat: no-repeat;
	background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */
}
.#{$primaryStyleName}-calendarpanel-weekdays .v-last {
	background-repeat: no-repeat;
	background-position: right top;
	background-image: url(img/weekday-last.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-bottom: 3px */
}
/* IE fails to position backgrounds inside table element */
.v-ie & .#{$primaryStyleName}-calendarpanel-weekdays td {
	background: url(img/weekday-bg.png) repeat-x;
	background-position: left top;
}
.v-ie & .#{$primaryStyleName}-calendarpanel .v-first {
	background: url(img/weekday-first.png) no-repeat;
}
.v-ie & .#{$primaryStyleName}-calendarpanel .v-last {
	background: url(img/weekday-last.png) no-repeat right top;
}
.#{$primaryStyleName}-calendarpanel-body td {
	text-align: right;
	height: 19px;
}
.#{$primaryStyleName}-calendarpanel-day,
.#{$primaryStyleName}-calendarpanel-weeknumber,
.#{$primaryStyleName}-calendarpanel-day-today {
	padding: 2px 5px 2px 0;
	display: block;
	margin: 1px 0 0 5px;
}
.#{$primaryStyleName}-calendarpanel-weeknumber {
	margin: 0;
	padding-top: 4px;
	padding-bottom: 3px;
	font-size: 10.8px;
}
.#{$primaryStyleName}-calendarpanel-day-today {
	color: #4095d1;
	border: none;
}
.#{$primaryStyleName}-calendarpanel-day-selected {
	background: #507ba3;
	color: #fff;
	text-shadow: #3b5b79 0 1px 0;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}
.#{$primaryStyleName}-calendarpanel-time select {
	padding: 0;
	font-size: 11px;
	margin: 2px;
}
.#{$primaryStyleName}-popup {
	background: #f8f8f9;
	padding: 8px 4px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.v-sa & .#{$primaryStyleName}-popup,
.v-op & .#{$primaryStyleName}-popup {
	background: rgba(255,255,255,.95);
}
.#{$primaryStyleName}-year > .#{$primaryStyleName}-textfield {
	width: 4.5em;
}
.#{$primaryStyleName}-month > .#{$primaryStyleName}-textfield {
	width: 5.5em;
}
.#{$primaryStyleName}-day > .#{$primaryStyleName}-textfield {
	width: 6em;
}
.#{$primaryStyleName}-full >.#{$primaryStyleName}-textfield {
	width: 12.5em;
}
.#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield {
	border-right-width: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	height: 23px;
}
.#{$primaryStyleName}.v-readonly input.#{$primaryStyleName}-textfield {
	border-right-width: 1px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
	color: #999;
	font-style: normal;
}
.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button {
	width: 24px;
	margin-right: -24px;
	height: 23px;
	background: transparent;
	border: none;
	padding: 0;
	background-image: url(img/popup-btn.png); /** sprite-ref: verticals */
	cursor: pointer;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active {
	background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */
}

/* over black background */
.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button {
	background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */
}
.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active {
	background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */
}


/*------------
* on black background
*/

.black td.#{$primaryStyleName}-calendarpanel-month {
	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
	height: 21px;
}
.black span.#{$primaryStyleName}-calendarpanel-month {
	border-left: 1px solid #333638;
	border-right: 1px solid #232527;
	color: #c9ccce;
	text-shadow: #000 0 -1px 0;
	padding: 4px 10px 1px 10px;
	margin-top: 0;
}
.black .#{$primaryStyleName}-calendarpanel-prevyear button,
.black .#{$primaryStyleName}-calendarpanel-nextyear button,
.black .#{$primaryStyleName}-calendarpanel-prevmonth button,
.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
	background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */
	height: 21px;
}
.black .#{$primaryStyleName}-calendarpanel-nextyear button {
	background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */
}
.black .#{$primaryStyleName}-calendarpanel-prevyear button:active,
.v-ie & .black .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
	background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */
}
.black .#{$primaryStyleName}-calendarpanel-nextyear button:active,
.v-ie & .black .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
	background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */
}
.black .#{$primaryStyleName}-calendarpanel-prevmonth,
.black .#{$primaryStyleName}-calendarpanel-nextmonth {
	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
}
.black .#{$primaryStyleName}-calendarpanel-prevmonth button,
.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
	border-left: 1px solid #333638;
	border-right: 1px solid #232527;
	background-image: url(img/month-prev-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
	margin-top: 0;
}
.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
	background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
.black .#{$primaryStyleName}-calendarpanel-prevmonth button:active,
.v-ie & .black .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
	background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
.black .#{$primaryStyleName}-calendarpanel-nextmonth button:active,
.v-ie & .black .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
	background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
}
.v-ie & .black .#{$primaryStyleName}-calendarpanel-prevmonth button,
.v-ie & .black .#{$primaryStyleName}-calendarpanel-nextmonth button {
	border: none;
}
.black .#{$primaryStyleName}-calendarpanel-weekdays td {
	background-image: url(img/weekday-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 3px */
	color: #0a0b0b;
	text-shadow: #5a5c5e 0 1px 0;
}
.black .#{$primaryStyleName}-calendarpanel-weekdays strong {
	border-top-color: #1b1c1d;
}
.black .#{$primaryStyleName}-calendarpanel .v-first {
	background-image: url(img/weekday-first-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 3px */
}
.black .#{$primaryStyleName}-calendarpanel .v-last {
	background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */
}
.black .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
	color: #5f6366;
}

}