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

$popupdatefield-button-width: 25px;
$negative-popupdatefield-button-width: -25px;

$popupdatefield-height: 1.7em; 
$popupdatefield-small-height: 1.6em; 
$popupdatefield-big-height: 1.9em; 

.#{$primaryStyleName}-button {
	background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
	border: 1px solid gray;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	width: $popupdatefield-button-width;
	margin-right: $negative-popupdatefield-button-width;
	height: $popupdatefield-height; 
	padding: .2em 0;
	}


input.#{$primaryStyleName}-textfield[type="text"] {
	border-right: none;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	height: $popupdatefield-height;
	}

/*******************************************************************************
 * Big
 ******************************************************************************/
.#{$primaryStyleName}-big {
	.#{$primaryStyleName}-button {
		padding: .3em 0;
		height: $popupdatefield-big-height;
		width: 32px;
		background-image: url(../../img/date-btn-big.png);
		font-size: $chameleon-font-size-big;
	}
	input.#{$primaryStyleName}-textfield[type="text"] {
		height: $popupdatefield-big-height;
		font-size: $chameleon-font-size-big;
	}
}


/*******************************************************************************
 * Small
 ******************************************************************************/
.#{$primaryStyleName}-small {
	.#{$primaryStyleName}-button {
		height: $popupdatefield-small-height;
		width: 19px;
		background-position: 50% -2px;
		font-size: $chameleon-font-size-small;
	}
	input.#{$primaryStyleName}-textfield[type="text"] {
		height: $popupdatefield-small-height;
		font-size: $chameleon-font-size-small;
	}
	
}

/*******************************************************************************
 * Calendar panel
 ******************************************************************************/
.#{$primaryStyleName}-calendarpanel {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	height: auto !important;
	font-size: 11.7px;
	}

.#{$primaryStyleName}-month .#{$primaryStyleName}-textfield {
	width: 6.4em;
	}

.#{$primaryStyleName}-year .#{$primaryStyleName}-textfield {
	width: 4.4em;
	}

.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth,
.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextmonth {
	display: none;
	}

.#{$primaryStyleName}-calendarpanel-header td {
	border-bottom: 1px solid #666;
	}

.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-header td,
.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-header td {
	border-bottom: none;
	}

td.#{$primaryStyleName}-calendarpanel-month {
	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -1px;
	text-shadow: 0 1px 0 rgba(255,255,255,.7);
	}

span.#{$primaryStyleName}-calendarpanel-month {
	display: block;
	text-align: center;
	overflow: hidden;
	line-height: 2em;
	height: 1.8em;
	}

.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
	width: 5.4em;
	}

.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
	width: 9.4em;
	}

.#{$primaryStyleName}-popupcalendar {
	min-width: 0;
	padding-right: $popupdatefield-button-width;
}

.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
	width: 8.4em;
	}

td.#{$primaryStyleName}-calendarpanel-prevyear {
	text-align: right;
	}

td.#{$primaryStyleName}-calendarpanel-nextyear {
	text-align: left;
	}

.#{$primaryStyleName}-calendarpanel-header button {
	font-size: 13px;
	line-height: normal;
	width: 100%;
	padding: 0 .8em;
	height: 1.8em;
	border: none;
	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -1px;
	overflow: hidden;
	outline: none;
	cursor: pointer;
	}

.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel-month,
.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel-header button {
	background-position: 0 0;
	}

.#{$primaryStyleName}-calendarpanel-header button:active {
	background-image: url(../../img/grad-dark-top2.png);
	}

.#{$primaryStyleName}-calendarpanel-prevyear button {
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	}

.#{$primaryStyleName}-calendarpanel-nextyear button {
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	}

.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevyear button,
.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-prevyear button {
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	}

.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextyear button,
.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-nextyear button {
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	}

.#{$primaryStyleName}-calendarpanel-body,
.#{$primaryStyleName}-calendarpanel-time {
	text-align: center;
	vertical-align: top;
	}

.#{$primaryStyleName}-calendarpanel-body table {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	margin: 0 auto;
	}

.#{$primaryStyleName}-calendarpanel-weekdays td {
	width: 14.2%;
	overflow: hidden;
	line-height: normal;
	text-transform: uppercase;
	vertical-align: top;
	}
	
.#{$primaryStyleName}-calendarpanel-weeknumbers td {
	width: 12.5%;
	}

.#{$primaryStyleName}-calendarpanel-weekdays strong {
	display: block;
	text-align: right;
	font-size: 10.4px;
	padding: .3em .5em .35em 0;
	height: 1.1em;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	background: #c9c9c9 url(../../img/grad-dark-top2.png) repeat-x;
	margin-bottom: 2px;
	}

.#{$primaryStyleName}-calendarpanel .v-first strong {
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	}

.#{$primaryStyleName}-calendarpanel .v-last strong {
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	}

.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel .v-first strong,
.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel .v-last strong {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	}

.#{$primaryStyleName}-calendarpanel-body td {
	text-align: right;
	height: 1.6em;
	}

.#{$primaryStyleName}-calendarpanel-weeknumber {
	padding: .5em .5em .35em 0;
	font-size: 11.7px;
	}

.#{$primaryStyleName}-calendarpanel-day,
.#{$primaryStyleName}-calendarpanel-day-today {
	padding: .15em .5em .15em 0;
	display: block;
	margin: 1px 1px 1px .3em;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	}

.#{$primaryStyleName}-calendarpanel-day-focused,
.#{$primaryStyleName}-calendarpanel-day:hover {
	margin: 0 0 0 .2em;
	border: 1px solid #b3b3b3;
	outline: none;
	}

.#{$primaryStyleName}-calendarpanel-day-today {
	border: none;
	background: transparent url(../../img/grad-dark-top2.png) repeat-x;
	margin: 0 0 0 .2em;
	font-weight: bold;
	border: 1px solid #c9c9c9;
	}

.#{$primaryStyleName}-calendarpanel-day-selected,
.#{$primaryStyleName}-calendarpanel-day-selected:hover {
	margin: 0 0 0 .3em;
	border: none;
	}

.#{$primaryStyleName}-calendarpanel-time select {
	padding: 0;
	font-size: 11.7px;
	margin: 0;
	}

}