/**
 * Checks if a list contains a certain value.
 * 
 * @param {list} $list - the list to check
 * @param {value} $var - the value to search for
 * @param {bool} $recursive (false) - should any contained lists be checked for the value
 * 
 * @return {bool} true if the value is found from the list, false otherwise
 * 
 * @group lists
 */

/**
 * Cross-browser opacity.
 *
 * @param {number} $value - opacity value from 0 to 1
 * @param {bool} $important (false) - should the property value be declared with !important
 *
 * @group util
 */

@-webkit-keyframes valo-animate-in-fade {
		0% {
		opacity: 0;
	}
	}

@-moz-keyframes valo-animate-in-fade {
		0% {
		opacity: 0;
	}
	}

@keyframes valo-animate-in-fade {
		0% {
		opacity: 0;
	}
	}

@-webkit-keyframes valo-animate-out-fade {
		100% {
		opacity: 0;
	}
	}

@-moz-keyframes valo-animate-out-fade {
		100% {
		opacity: 0;
	}
	}

@keyframes valo-animate-out-fade {
		100% {
		opacity: 0;
	}
	}

@-webkit-keyframes valo-animate-in-slide-down {
		0% {
		-webkit-transform: translateY(-100%);
	}
	}

@-moz-keyframes valo-animate-in-slide-down {
		0% {
		-moz-transform: translateY(-100%);
	}
	}

@keyframes valo-animate-in-slide-down {
		0% {
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	}

@-webkit-keyframes valo-animate-in-slide-up {
		0% {
		-webkit-transform: translateY(100%);
	}
	}

@-moz-keyframes valo-animate-in-slide-up {
		0% {
		-moz-transform: translateY(100%);
	}
	}

@keyframes valo-animate-in-slide-up {
		0% {
		-webkit-transform: translateY(100%);
		-moz-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
	}
	}

@-webkit-keyframes valo-animate-in-slide-left {
		0% {
		-webkit-transform: translateX(100%);
	}
	}

@-moz-keyframes valo-animate-in-slide-left {
		0% {
		-moz-transform: translateX(100%);
	}
	}

@keyframes valo-animate-in-slide-left {
		0% {
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
	}

@-webkit-keyframes valo-animate-in-slide-right {
		0% {
		-webkit-transform: translateX(-100%);
	}
	}

@-moz-keyframes valo-animate-in-slide-right {
		0% {
		-moz-transform: translateX(-100%);
	}
	}

@keyframes valo-animate-in-slide-right {
		0% {
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	}

@-webkit-keyframes valo-animate-out-slide-down {
		100% {
		-webkit-transform: translateY(100%);
	}
	}

@-moz-keyframes valo-animate-out-slide-down {
		100% {
		-moz-transform: translateY(100%);
	}
	}

@keyframes valo-animate-out-slide-down {
		100% {
		-webkit-transform: translateY(100%);
		-moz-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
	}
	}

@-webkit-keyframes valo-animate-out-slide-up {
		100% {
		-webkit-transform: translateY(-100%);
	}
	}

@-moz-keyframes valo-animate-out-slide-up {
		100% {
		-moz-transform: translateY(-100%);
	}
	}

@keyframes valo-animate-out-slide-up {
		100% {
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	}

@-webkit-keyframes valo-animate-out-slide-left {
		100% {
		-webkit-transform: translateX(-100%);
	}
	}

@-moz-keyframes valo-animate-out-slide-left {
		100% {
		-moz-transform: translateX(-100%);
	}
	}

@keyframes valo-animate-out-slide-left {
		100% {
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	}

@-webkit-keyframes valo-animate-out-slide-right {
		100% {
		-webkit-transform: translateX(100%);
	}
	}

@-moz-keyframes valo-animate-out-slide-right {
		100% {
		-moz-transform: translateX(100%);
	}
	}

@keyframes valo-animate-out-slide-right {
		100% {
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
	}

@-webkit-keyframes valo-overlay-animate-in {
		0% {
		-webkit-transform: translatey(-4px);
		opacity: 0;
	}
	}

@-moz-keyframes valo-overlay-animate-in {
		0% {
		-moz-transform: translatey(-4px);
		opacity: 0;
	}
	}

@keyframes valo-overlay-animate-in {
		0% {
		-webkit-transform: translatey(-4px);
		-moz-transform: translatey(-4px);
		-ms-transform: translatey(-4px);
		-o-transform: translatey(-4px);
		transform: translatey(-4px);
		opacity: 0;
	}
	}

@-webkit-keyframes valo-animate-out-slide-down-fade {
		100% {
		opacity: 0;
		-webkit-transform: translatey(30%);
	}
	}

@-moz-keyframes valo-animate-out-slide-down-fade {
		100% {
		opacity: 0;
		-moz-transform: translatey(30%);
	}
	}

@keyframes valo-animate-out-slide-down-fade {
		100% {
		opacity: 0;
		-webkit-transform: translatey(30%);
		-moz-transform: translatey(30%);
		-ms-transform: translatey(30%);
		-o-transform: translatey(30%);
		transform: translatey(30%);
	}
	}

/**
 * Outputs cross-browser Valo-specific linear gradient background-image declarations.
 * 
 * @group style
 * 
 * @param {color} $color ($v-background-color) - The base color for the gradient color stops
 * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
 * @param {color} $fallback (null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular). If null, the base $color is used instead.
 * @param {string} $direction (to bottom) - the direction of the linear gradient. The color stops are by default so that a lighter shade is at the start and a darker shade is at the end.
 */

/**
 * Computes a CSS border property value for the given base color.
 *
 * @group style
 *
 * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords
 * @param {color} $color ($v-background-color) - the base color to which the color keywords are applied to
 * @param {color} $context (null) - context/surrounding color where the border is expected to appear. The color of the final border is the darker of the two parameters passed to this function.
 * @param {number} $strength (1) - adjustment for the border contrast
 *
 * @return {list} The input $border value with any color keyword replaced with the corresponding actual color
 */

/**
 * Ouput selectors and properties to vertically center elements inside their parent.
 * 
 * @param {string} $to-align (()) - The selector to match the elements which you wish to align vertically. The targeted elements should be inline or inline-block elements.
 * @param {string} $align (middle) - The vertical-align value, e.g. top, middle, bottom
 * @param {string} $pseudo-element (after) - Which pseudo element to use for the vertical align guide
 * 
 * @group util
 */

@font-face {
	font-family: ThemeIcons;
	font-weight: normal;
	font-style: normal;
	src: url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.eot);
	src: url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.eot?#iefix) format("embedded-opentype"), url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.woff) format("woff"), url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.ttf) format("truetype"), url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/themeicons-webfont.svg#ThemeIcons) format("svg");
}

.ThemeIcons {
	font-family: ThemeIcons;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	text-align: center;
}

@font-face {
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	src: url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.eot);
	src: url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.eot?#iefix) format("embedded-opentype"), url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.woff) format("woff"), url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.ttf) format("truetype"), url(/VAADIN/themes/valo/util/bourbon/css3/../../../../base/fonts/fontawesome-webfont.svg#FontAwesome) format("svg");
}

.FontAwesome {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	text-align: center;
}

@font-face {
	font-family: "Open Sans";
	src: url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.eot);
	src: url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.eot?#iefix) format("embedded-opentype"), url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.woff) format("woff"), url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.ttf) format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Open Sans";
	src: url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.eot);
	src: url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.woff) format("woff"), url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Open Sans";
	src: url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.eot);
	src: url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.eot?#iefix) format("embedded-opentype"), url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.woff) format("woff"), url(/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.ttf) format("truetype");
	font-weight: 600;
	font-style: normal;
}

@-webkit-keyframes v-rotate-360 {
		to {
		-webkit-transform: rotate(360deg);
	}
	}

@-moz-keyframes v-rotate-360 {
		to {
		-moz-transform: rotate(360deg);
	}
	}

@-o-keyframes v-rotate-360 {
		to {
		-o-transform: rotate(360deg);
	}
	}

@keyframes v-rotate-360 {
		to {
		transform: rotate(360deg);
	}
	}

@-webkit-keyframes v-progress-start {
		0% {
		width: 0%;
	}
		100% {
		width: 50%;
	}
	}

@-moz-keyframes v-progress-start {
		0% {
		width: 0%;
	}
		100% {
		width: 50%;
	}
	}

@keyframes v-progress-start {
		0% {
		width: 0%;
	}
		100% {
		width: 50%;
	}
	}

@-webkit-keyframes v-progress-delay {
		0% {
		width: 50%;
	}
		100% {
		width: 90%;
	}
	}

@-moz-keyframes v-progress-delay {
		0% {
		width: 50%;
	}
		100% {
		width: 90%;
	}
	}

@keyframes v-progress-delay {
		0% {
		width: 50%;
	}
		100% {
		width: 90%;
	}
	}

@-webkit-keyframes v-progress-wait {
		0% {
		width: 90%;
		height: 4px;
	}
		3% {
		width: 91%;
		height: 7px;
	}
		100% {
		width: 96%;
		height: 7px;
	}
	}

@-moz-keyframes v-progress-wait {
		0% {
		width: 90%;
		height: 4px;
	}
		3% {
		width: 91%;
		height: 7px;
	}
		100% {
		width: 96%;
		height: 7px;
	}
	}

@keyframes v-progress-wait {
		0% {
		width: 90%;
		height: 4px;
	}
		3% {
		width: 91%;
		height: 7px;
	}
		100% {
		width: 96%;
		height: 7px;
	}
	}

@-webkit-keyframes v-progress-wait-pulse {
		0% {
		opacity: 1;
	}
		50% {
		opacity: 0.1;
	}
		100% {
		opacity: 1;
	}
	}

@-moz-keyframes v-progress-wait-pulse {
		0% {
		opacity: 1;
	}
		50% {
		opacity: 0.1;
	}
		100% {
		opacity: 1;
	}
	}

@keyframes v-progress-wait-pulse {
		0% {
		opacity: 1;
	}
		50% {
		opacity: 0.1;
	}
		100% {
		opacity: 1;
	}
	}

/**
 * Outputs the context menu selectors and styles, which is used by Table and Tree for instance.
 * 
 * @requires {mixin} valo-selection-item-style
 * @requires {mixin} valo-selection-item-selected-style
 */

/**
 * The background color for overlay elements.
 *
 * @type color
 * @group overlay
 */

.v-shadow, .v-shadow-window {
	display: none;
}

.v-ie8 .v-shadow, .v-ie8 .v-shadow-window {
	display: block;
}

.v-ie8 .v-shadow .top, .v-ie8 .v-shadow-window .top {
	position: absolute;
	top: -6px;
	right: 10px;
	bottom: 6px;
	left: -10px;
	background: black;
	filter: alpha(opacity=5) progid:DXImageTransform.Microsoft.blur(pixelradius=10, makeShadow=false);
}

.v-ie8 .v-shadow .top-left, .v-ie8 .v-shadow-window .top-left {
	position: absolute;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	background: black;
	filter: alpha(opacity=9) progid:DXImageTransform.Microsoft.blur(pixelradius=0, makeShadow=false);
}

/**
 * The backgound color for tooltips.
 *
 * @type color
 * @group tooltip
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-absolutelayout) - 
 *
 * @group absolutelayout
 */

/**
 * Outputs the selectors and properties for the Accordion component.
 *
 * @param {string} $primary-stylename (v-accordion) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 * @group accordion
 */

/**
 * Outputs the selectors and properties for the Button component.
 *
 * @param {string} $primary-stylename (v-button) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group button
 */

/**
 * A list of colors for custom event colors. Can be an empty list of you don't 
 * need any custom event colors.
 * 
 * @example javascript
 * // Java code
 * // 'event' is an instance of EditableCalendarEvent
 * event.setStyleName("color1"); // 1st color in the list
 * event.setStyleName("color2"); // 2nd color in the list
 * // etc.
 * 
 * @group calendar
 */

/**
 * Outputs the selectors and properties for the CheckBox component.
 *
 * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group checkbox
 */

/**
 * Outputs the global selectors and properties for the ColorPicker component - styles which are 
 * considered mandatory for the component to work properly.
 *
 * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors
 *
 * @group colorpicker
 */

/**
 * Outputs the selectors and properties for the ComboBox component.
 *
 * @param {string} $primary-stylename (v-filterselect) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group combobox
 */

/**
 * The amount of spacing between different widgets in a component group.
 * If null, a computed value is used ($v-border size * -1, or 1px if $v-border size is 0)
 * 
 * @group csslayout
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-customcomponent) - 
 *
 * @group customcomponent
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-customlayout) - 
 *
 * @group customlayout
 */

/**
 * Outputs the selectors and properties for the DateField component.
 *
 * @param {string} $primary-stylename (v-datefield) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group datefield
 */

/**
 * Outputs the styles and selectors for the DragAndDropWrapper component.
 * 
 * @param {string} $primary-stylename (v-ddwrapper) - the primary style name for the selectors
 * 
 * @group drag-n-drop
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-form) - 
 *
 * @group form
 */

/**
 * Outputs the selectors and properties for the FormLayout component.
 *
 * @param {string} $primary-stylename (v-formlayout) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group formlayout
 */

/**
 *
 * @group table
 */

@-webkit-keyframes valo-grid-editor-footer-animate-in {
		0% {
		margin-top: -37px;
	}
	}

@-moz-keyframes valo-grid-editor-footer-animate-in {
		0% {
		margin-top: -37px;
	}
	}

@keyframes valo-grid-editor-footer-animate-in {
		0% {
		margin-top: -37px;
	}
	}

@-webkit-keyframes valo-grid-editor-footer-animate-in-alt {
		0% {
		margin-bottom: -38px;
	}
		100% {
		margin-bottom: -1px;
	}
	}

@-moz-keyframes valo-grid-editor-footer-animate-in-alt {
		0% {
		margin-bottom: -38px;
	}
		100% {
		margin-bottom: -1px;
	}
	}

@keyframes valo-grid-editor-footer-animate-in-alt {
		0% {
		margin-bottom: -38px;
	}
		100% {
		margin-bottom: -1px;
	}
	}

/**
 *
 *
 * @param {string} $primary-stylename (v-gridlayout) - 
 *
 * @group gridlayout
 */

/**
 * The font weight for headers.
 * 
 * @group label
 */

/**
 *
 * @group link
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-loginform) - 
 *
 * @group loginform
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-menubar) - 
 * @param {bool} $include-additional-styles - 
 *
 * @group menubar
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-nativebutton) - 
 *
 * @group nativebutton
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-select) - 
 *
 * @group nativeselect
 */

/**
 *
 * @group notification
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-select-optiongroup) - 
 * @param {bool} $include-additional-styles - 
 *
 * @group optiongroup
 */

/**
 *
 *
 *
 * @group orderedlayout
 */

/**
 *
 * @group panel
 */

@-webkit-keyframes v-popupview-animate-in {
		0% {
		-webkit-transform: scale(0);
	}
	}

@-moz-keyframes v-popupview-animate-in {
		0% {
		-moz-transform: scale(0);
	}
	}

@keyframes v-popupview-animate-in {
		0% {
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	}

/**
 *
 * @group progressbar
 */

/**
 *
 * @group richtextarea
 */

/**
 *
 * @group slider
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-splitpanel) - 
 * @param {bool} $include-additional-styles - 
 *
 * @group splitpanel
 */

/**
 *
 * @group table
 */

/**
 * Should the tabsheet content changes be animated.
 * 
 * @group tabsheet
 */

/**
 * The background color for text fields.
 * @group textfield
 */

/**
 * Outputs the selectors and properties for the TextArea component.
 *
 * @param {string} $primary-stylename (v-textarea) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group textarea
 */

/**
 *
 * @group tree
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-treetable) - 
 *
 * @group treetable
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-select-twincol) - 
 *
 * @group twin-column-select
 */

/**
 *
 *
 * @param {string} $primary-stylename (v-upload) -
 *
 * @group upload
 */

/**
 *
 */

/**
 * @group window
 */

@-webkit-keyframes valo-modal-window-indication {
		0% {
		opacity: 0;
	}
		100% {
		opacity: 1;
	}
	}

@-moz-keyframes valo-modal-window-indication {
		0% {
		opacity: 0;
	}
		100% {
		opacity: 1;
	}
	}

@keyframes valo-modal-window-indication {
		0% {
		opacity: 0;
	}
		100% {
		opacity: 1;
	}
	}

@-webkit-keyframes valo-animate-out-scale-down-fade {
		100% {
		-webkit-transform: scale(0.8);
		opacity: 0;
	}
	}

@-moz-keyframes valo-animate-out-scale-down-fade {
		100% {
		-moz-transform: scale(0.8);
		opacity: 0;
	}
	}

@keyframes valo-animate-out-scale-down-fade {
		100% {
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 0;
	}
	}

/**
 * @group valo-menu
 */

.small-button-gray {
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	height: 19px;
	padding: 0 9px;
	color: white;
	
	font-size: 8pt;
	
	border-radius: 4px;
	border: 1px solid #303030;
	border-top-color: #343434;
	border-bottom-color: #282828;
	background-color: #3d3d3d;
	background-image: -webkit-linear-gradient(top, #434343 2%, #333333 98%);
	background-image: linear-gradient(to bottom,#434343 2%, #333333 98%);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.small-button-gray:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.small-button-gray > div {
	vertical-align: middle;
}

.v-sa .small-button-gray:before {
	height: 110%;
}

.v-ff .small-button-gray:before {
	height: 107%;
}

.v-ie .small-button-gray:before {
	margin-top: 4px;
}

.small-button-gray:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.small-button-gray.v-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50) ;
}

.small-button-gray.v-disabled:after {
	display: none;
}

.small-button-gray:after {
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.small-button-gray:hover:after {
	background-color: rgba(99, 99, 99, 0.1);
}

.small-button-gray:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
	box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}

.small-button-gray:active:after {
	background-color: rgba(30, 30, 30, 0.2);
}

.small-button-blue {
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	height: 19px;
	padding: 0 9px;
	color: white;
	
	font-size: 8pt;
	
	border-radius: 4px;
	border: 1px solid #14335a;
	border-top-color: #163862;
	border-bottom-color: #102b4b;
	background-color: #1a4172;
	background-image: -webkit-linear-gradient(top, #1c477d 2%, #153760 98%);
	background-image: linear-gradient(to bottom,#1c477d 2%, #153760 98%);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.small-button-blue:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.small-button-blue > div {
	vertical-align: middle;
}

.v-sa .small-button-blue:before {
	height: 110%;
}

.v-ff .small-button-blue:before {
	height: 107%;
}

.v-ie .small-button-blue:before {
	margin-top: 4px;
}

.small-button-blue:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.small-button-blue.v-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50) ;
}

.small-button-blue.v-disabled:after {
	display: none;
}

.small-button-blue:after {
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.small-button-blue:hover:after {
	background-color: rgba(40, 101, 176, 0.1);
}

.small-button-blue:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
	box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}

.small-button-blue:active:after {
	background-color: rgba(5, 32, 65, 0.2);
}

.small-button-orange {
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	height: 19px;
	padding: 0 9px;
	color: white;
	
	font-size: 8pt;
	
	border-radius: 4px;
	border: 1px solid #753f00;
	border-top-color: #7d4500;
	border-bottom-color: #673500;
	background-color: #955000;
	background-image: -webkit-linear-gradient(top, #9f5800 2%, #834400 98%);
	background-image: linear-gradient(to bottom,#9f5800 2%, #834400 98%);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.small-button-orange:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.small-button-orange > div {
	vertical-align: middle;
}

.v-sa .small-button-orange:before {
	height: 110%;
}

.v-ff .small-button-orange:before {
	height: 107%;
}

.v-ie .small-button-orange:before {
	margin-top: 4px;
}

.small-button-orange:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.small-button-orange.v-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50) ;
}

.small-button-orange.v-disabled:after {
	display: none;
}

.small-button-orange:after {
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.small-button-orange:hover:after {
	background-color: rgba(226, 121, 0, 0.1);
}

.small-button-orange:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
	box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}

.small-button-orange:active:after {
	background-color: rgba(75, 40, 0, 0.2);
}

.small-button-red {
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	height: 19px;
	padding: 0 9px;
	color: white;
	
	font-size: 8pt;
	
	border-radius: 4px;
	border: 1px solid #730300;
	border-top-color: #7b0300;
	border-bottom-color: #650200;
	background-color: #920500;
	background-image: -webkit-linear-gradient(top, #9c0500 2%, #800300 98%);
	background-image: linear-gradient(to bottom,#9c0500 2%, #800300 98%);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.small-button-red:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.small-button-red > div {
	vertical-align: middle;
}

.v-sa .small-button-red:before {
	height: 110%;
}

.v-ff .small-button-red:before {
	height: 107%;
}

.v-ie .small-button-red:before {
	margin-top: 4px;
}

.small-button-red:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.small-button-red.v-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50) ;
}

.small-button-red.v-disabled:after {
	display: none;
}

.small-button-red:after {
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.small-button-red:hover:after {
	background-color: rgba(223, 8, 0, 0.1);
}

.small-button-red:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
	box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}

.small-button-red:active:after {
	background-color: rgba(73, 3, 0, 0.2);
}

.small-button-green {
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	height: 19px;
	padding: 0 9px;
	color: white;
	
	font-size: 8pt;
	
	border-radius: 4px;
	border: 1px solid #1e3d00;
	border-top-color: #204300;
	border-bottom-color: #193400;
	background-color: #264e00;
	background-image: -webkit-linear-gradient(top, #295500 2%, #204200 98%);
	background-image: linear-gradient(to bottom,#295500 2%, #204200 98%);
	-webkit-box-shadow: none;
	box-shadow: none;
}

.small-button-green:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.small-button-green > div {
	vertical-align: middle;
}

.v-sa .small-button-green:before {
	height: 110%;
}

.v-ff .small-button-green:before {
	height: 107%;
}

.v-ie .small-button-green:before {
	margin-top: 4px;
}

.small-button-green:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.small-button-green.v-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50) ;
}

.small-button-green.v-disabled:after {
	display: none;
}

.small-button-green:after {
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.small-button-green:hover:after {
	background-color: rgba(75, 155, 0, 0.1);
}

.small-button-green:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
	box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}

.small-button-green:active:after {
	background-color: rgba(19, 39, 0, 0.2);
}

.main-button-tiny {
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	height: 28px;
	padding: 0 13px;
	color: white;
	
	font-size: 12px;
	
	border-radius: 4px;
	border: 1px solid #a1160e;
	border-top-color: #b42115;
	border-bottom-color: #690704;
	background-color: #cc1d12;
	background-image: -webkit-linear-gradient(top, #e52b1b 2%, #850a06 98%);
	background-image: linear-gradient(to bottom,#e52b1b 2%, #850a06 98%);
	
	
	height: 20px;
	min-width: 105px;
	line-height: 16px;
}

.main-button-tiny:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.main-button-tiny > div {
	vertical-align: middle;
}

.v-sa .main-button-tiny:before {
	height: 110%;
}

.v-ff .main-button-tiny:before {
	height: 107%;
}

.v-ie .main-button-tiny:before {
	margin-top: 4px;
}

.main-button-tiny:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.main-button-tiny.v-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50) ;
}

.main-button-tiny.v-disabled:after {
	display: none;
}

.main-button-tiny:after {
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.main-button-tiny:hover:after {
	background-color: rgba(238, 71, 61, 0.1);
}

.main-button-tiny:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
	box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}

.main-button-tiny:active:after {
	background-color: rgba(110, 8, 1, 0.2);
}

.main-button-tiny.passive {
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	height: 28px;
	padding: 0 13px;
	color: white;
	
	font-size: 12px;
	
	border-radius: 4px;
	border: 1px solid #5e5e5e;
	border-top-color: #8c8c8c;
	border-bottom-color: #222222;
	background-color: #777777;
	background-image: -webkit-linear-gradient(top, #b2b2b2 2%, #2c2c2c 98%);
	background-image: linear-gradient(to bottom,#b2b2b2 2%, #2c2c2c 98%);
	
	
	height: 20px;
	min-width: 105px;
	line-height: 16px;
}

.main-button-tiny.passive:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.main-button-tiny.passive > div {
	vertical-align: middle;
}

.v-sa .main-button-tiny.passive:before {
	height: 110%;
}

.v-ff .main-button-tiny.passive:before {
	height: 107%;
}

.v-ie .main-button-tiny.passive:before {
	margin-top: 4px;
}

.main-button-tiny.passive:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
}

.main-button-tiny.passive.v-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50) ;
}

.main-button-tiny.passive.v-disabled:after {
	display: none;
}

.main-button-tiny.passive:after {
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.main-button-tiny.passive:hover:after {
	background-color: rgba(157, 157, 157, 0.1);
}

.main-button-tiny.passive:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
	box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}

.main-button-tiny.passive:active:after {
	background-color: rgba(59, 59, 59, 0.2);
}

.v-widget.main-button-tiny {
	height: 22px;
	vertical-align: baseline;
}

.v-separateddatefield .v-textfield.year-2, .v-separateddatefield .v-textfield.month, .v-separateddatefield .v-textfield.day {
	width: 3em;
}

.v-separateddatefield .separator {
	vertical-align: bottom;
}

.v-separateddatefield .v-textfield.year-4 {
	width: 4em;
}

.v-separateddatefield.error .v-textfield {
	border-color: #ed473b !important;
	background: #fffbfb;
	color: #6c2621;
}

.v-select-error .v-select-select {
	border-color: #ed473b !important;
	background: #fffbfb;
	color: #6c2621;
}

.v-datefield.v-datefield-day {
	width: 10em;
}

a.main-button-tiny {
	text-decoration: none;
	color: white;
	display: inline;
	display: inline-block;
}

a.main-button-tiny:hover {
	color: white;
}

.main-button-tiny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 20px;
}

input.main-button-tiny {
	height: 22px;
}