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

.#{$primaryStyleName} {
	background: transparent;
}
.#{$primaryStyleName}-wrap {
	border: 1px solid #808386;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.v-sa & .#{$primaryStyleName}-wrap,
.v-op & .#{$primaryStyleName}-wrap {
	border-color: rgba(0,0,0,.2);
}
.#{$primaryStyleName}-outerheader {
	padding: 12px 52px 0 14px;
	height: 37px;
	background: black repeat-x;
	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
}
.#{$primaryStyleName}-header {
	font-weight: bold;
	font-size: 12px;
	line-height: normal;
	color: #fff;
	text-shadow: #000 0 -1px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}
.#{$primaryStyleName}-error .#{$primaryStyleName}-header {
	padding-left: 13px;
	background: transparent url(../common/icons/error.png) no-repeat 0 50%;
}
.#{$primaryStyleName}-resizebox {
	width: 15px;
	height: 15px;
	cursor: se-resize;
	background: transparent;
	background-image: url(img/resize.png); /** sprite-ref: verticals */
}
.#{$primaryStyleName}-footer {
	background-color:white;
	background-repeat: repeat-x;
	background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
	height: 15px;
}
.#{$primaryStyleName}-closebox {
	top: 12px;
	right: 10px;
	width: 15px;
	height: 16px;
	background: transparent;
	background-image: url(img/close.png); /** sprite-ref: verticals */
}
.#{$primaryStyleName}-closebox:hover {
	background-image: url(img/close-hover.png); /** sprite-ref: verticals */
}
.#{$primaryStyleName}-closebox:active {
	background-image: url(img/close-pressed.png); /** sprite-ref: verticals */
}
.#{$primaryStyleName}-maximizebox,
.#{$primaryStyleName}-restorebox {
	top: 12px;
	right: 28px;
	width: 15px;
	height: 16px;
	background: transparent;
}
.#{$primaryStyleName}-maximizebox {
	&, &:hover,&:active {
		background-image: url(img/maximize.png); /** sprite-ref: verticals */
	}
}
.#{$primaryStyleName}-restorebox {
	&, &:hover,&:active {
		background-image: url(img/restore.png); /** sprite-ref: verticals */
	}
}
.#{$primaryStyleName}-contents {
	background: #fff;
}
.#{$primaryStyleName}-modalitycurtain {
	background: #56595b;
}






/**
 Light style window -----------------------------
**/

.#{$primaryStyleName}-light {
	.#{$primaryStyleName}-outerheader {
		background: transparent;
		padding: 15px 52px 0 18px;
	}
	.#{$primaryStyleName}-header {
		font-size: 16px;
		color: #292e34;
		text-shadow: none;
	}
	.#{$primaryStyleName}-resizebox {
		width: 12px;
		height: 12px;
		background-image: url(img/light/resize.png); /** sprite-ref: verticals */
	}
	.#{$primaryStyleName}-footer {
		background: transparent;
		height: 12px;
	}
	.#{$primaryStyleName}-closebox {
		right: 1px;
		top: 17px;
		width: 19px;
		height: 15px;
		
		background-image: url(img/light/close.png); /** sprite-ref: verticals */
		&:hover {
			background-image: url(img/light/close-hover.png); /** sprite-ref: verticals */
		}
		&:active {
			background-image: url(img/light/close-pressed.png); /** sprite-ref: verticals */
		}
	}
	
	.#{$primaryStyleName}-maximizebox {
		top: 17px;
		
		background-image: url(img/light/maximize.png); /** sprite-ref: verticals */
		&:hover {
			background-image: url(img/light/maximize-hover.png); /** sprite-ref: verticals */
		}
		&:active {
			background-image: url(img/light/maximize-active.png); /** sprite-ref: verticals */
		}
	}
	.#{$primaryStyleName}-restorebox {
		top: 17px;
	
		background-image: url(img/light/restore.png); /** sprite-ref: verticals */
		&:hover {
			background-image: url(img/light/restore-hover.png); /** sprite-ref: verticals */
		}
		&:active {
			background-image: url(img/light/restore-active.png); /** sprite-ref: verticals */
		}
	}
	
	.#{$primaryStyleName}-contents {
		background: transparent;
	}
	/* This must be the last sprite added to the verticals-sprite image */
	.#{$primaryStyleName}-wrap {
		background: #f7f7f8 repeat-x;
		background-image: url(img/light/content-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
	}
}


/**
 Black style window -----------------------------
**/

.#{$primaryStyleName}-black {
	.#{$primaryStyleName}-wrap {
		border-color: #2e3030;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		overflow: hidden;
	}
	.v-sa & .#{$primaryStyleName}-wrap,
	.v-op & .#{$primaryStyleName}-wrap {
		border-color: rgba(0,0,0,.8);
	}
	
	.#{$primaryStyleName}-wrap {
		background-color: #1d2021;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
	}
	.v-sa & .#{$primaryStyleName}-wrap,
	.v-op & .#{$primaryStyleName}-wrap {
		background-color: rgba(29,32,33,.9);
	}
	.#{$primaryStyleName}-outerheader {
		height: 29px;
		padding: 7px 14px;
		background: transparent repeat-x;
		background-image: url(img/black/header-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
		text-align: center;
		-moz-border-radius-topright: 7px;
		-moz-border-radius-topleft: 7px;
		-webkit-border-top-right-radius: 7px;
		-webkit-border-top-left-radius: 7px;
		overflow: hidden;
		border: none;
	}
	.#{$primaryStyleName}-header {
		font-size: 12px;
		font-weight: normal;
		color: #dddfe1;
	}
 	.#{$primaryStyleName}-closebox {
		top: 8px;
		
		background-image: url(img/black/close.png); /** sprite-ref: black-verticals */
		&:hover {
			background-image: url(img/black/close-hover.png); /** sprite-ref: black-verticals */
		}
		&:active {
			background-image: url(img/black/close-pressed.png); /** sprite-ref: black-verticals */
		}
	}
	.#{$primaryStyleName}-footer {
		background: transparent;
		border: none;
		height: 14px;
	}
	.#{$primaryStyleName}-resizebox {
		background: transparent no-repeat;
		background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */
		width: 14px;
		height: 14px;
	}
	.#{$primaryStyleName}-maximizebox {
		top: 8px;
		
		background-image: url(img/black/maximize.png); /** sprite-ref: black-verticals */
		&:hover {
			background-image: url(img/black/maximize-hover.png); /** sprite-ref: black-verticals */
		}
		&:active {
			background-image: url(img/black/maximize-active.png); /** sprite-ref: black-verticals */
		}
	}
	.#{$primaryStyleName}-restorebox {
		top: 8px;
	
		background-image: url(img/black/restore.png); /** sprite-ref: black-verticals */
		&:hover {
			background-image: url(img/black/restore-hover.png); /** sprite-ref: black-verticals */
		}
		&:active {
			background-image: url(img/black/restore-active.png); /** sprite-ref: black-verticals */
		}
	}
	
	/* Must be last to make this image last in the sprites */
	.#{$primaryStyleName}-contents {
		border: none;
		background: transparent repeat-x;
		background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
	}
}

}