/**
 *
 * '||''|.                            '||
 *  ||   ||    ....  .... ...   ....   ||    ...   ... ...  ... ..
 *  ||    || .|...||  '|.  |  .|...||  ||  .|  '|.  ||'  ||  ||' ''
 *  ||    || ||        '|.|   ||       ||  ||   ||  ||    |  ||
 * .||...|'   '|...'    '|     '|...' .||.  '|..|'  ||...'  .||.
 *                                                  ||
 * --------------- By Display:inline ------------- '''' -----------
 *
 * Colors for the whole template
 * Using a separate stylesheet allows easy customizing and upgrading
 *
 * Content:
 * 1. Generic colors
 * 2. Generic backgrounds
 * 3. Specific gradients
 * 4. Inputs & progress
 * 5. Modal window
 * 6. Generic gradients - defaults
 * 7. Generic gradients - main
 * 8. Generic gradients - active
 * 9. Generic gradients - disabled
 *
 * Hey wait! Why are the generic gradient declared several times?
 * -> to is the best way to handle inheritance issues. For instance, if all generic gradients
 *    where only declared once,
 *    because the blue styles are declared after the green ones.
 */


/********************************************************/
/*                   1. Generic colors                  */
/********************************************************/

.silver,
.silver-color .color {
	color: #cccccc !important;
	}
	.icon-silver:before {
		color: #cccccc;
	}
.black,
.black-color .color {
	color: black !important;
	}
	.icon-black:before {
		color: black;
	}
.anthracite,
.anthracite-color .color {
	color: #4c4c4c !important;
	}
	.icon-anthracite:before {
		color: #4c4c4c;
	}
.grey,
.grey-color .color {
	color: #a5a5a5 !important;
	}
	.icon-grey:before {
		color: #a5a5a5;
	}
.white,
.white-color .color {
	color: white !important;
	}
	.icon-white:before {
		color: white;
	}
.red,
.red-color .color {
	color: #e42c2a !important;
	}
	.icon-red:before {
		color: #e42c2a;
	}
.orange,
.orange-color .color {
	color: #ffae00 !important;
	}
	.icon-orange:before {
		color: #ffae00;
	}
.visum,
.visum-color .color {
	color: #7d51c4 !important;
	}
	.icon-visum:before {
		color: #7d51c4;
	}
.green,
.green-color .color {
	color: #99c624 !important;
	}
	.icon-green:before {
		color: #99c624;
	}
.koerier,
.koerier-color .color {
	color: #49a950 !important;
	}
	.icon-koerier:before {
		color: #49a950;
	}
.sprint,
.sprint-color .color {
	color: #f08b59 !important;
	}
	.icon-sprint:before {
		color: #f08b59;
	}
.visa,
.visa-color .color {
	color: #8365a5 !important;
	}
	.icon-visa:before {
		color: #8365a5;
	}
.post,
.post-color .color {
	color: #d1b923 !important;
	}
	.icon-post:before {
		color: #d1b923;
	}
.kaai,
.kaai-color .color {
	color: #066cb1 !important;
	}
	.icon-kaai:before {
		color: #066cb1;
	}
.blue,
.blue-color .color {
	color: #0059a0 !important;
	}
	.icon-blue:before {
		color: #0059a0;
	}
.lightblue,
.lightblue-color .color {
	color: #69b9f9 !important;
	}
	.icon-lightblue:before {
		color: #69b9f9;
	}

/********************************************************/
/*                2. Generic backgrounds                */
/********************************************************/

.carbon {
	color: white;
	background: #3c4044 url('http://www.asxportal.be/common/img/textures/grid.png');
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0))), #3c4044 url('http://www.asxportal.be/common/img/textures/grid.png');
	background: -webkit-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url('http://www.asxportal.be/common/img/textures/grid.png');
	background: -moz-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url('http://www.asxportal.be/common/img/textures/grid.png');
	background: -ms-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url('http://www.asxportal.be/common/img/textures/grid.png');
	background: -o-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url('http://www.asxportal.be/common/img/textures/grid.png');
	background: linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url('http://www.asxportal.be/common/img/textures/grid.png');
}
.linen {
	/* 'http://www.asxportal.be/common/img/textures/fabric.png */
	color: white;
	border-color: #929ba6;
	background: #a7b2be url('http://www.asxportal.be/images/bg.jpg');
	background: url('http://www.asxportal.be/images/bg.jpg') center top, -webkit-gradient(linear, left top, left bottom, from(#5d656e), to(#a7b2be)) repeat-x, #a7b2be;
	background: url('http://www.asxportal.be/images/bg.jpg') center top, -webkit-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be;
	background: url('http://www.asxportal.be/images/bg.jpg') center top, -moz-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be;
	background: url('http://www.asxportal.be/images/bg.jpg') center top, -ms-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be;
	background: url('http://www.asxportal.be/images/bg.jpg') center top, -o-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be;
	background: url('http://www.asxportal.be/images/bg.jpg') center top, linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be;
}
.scratch-metal {
	/* 'http://www.asxportal.be/common/img/textures/fabric.png */
	border-color: #efeeee;
	background: #efeeee;
}

/********************************************************/
/*                3. Specific gradients                 */
/********************************************************/

.input-wrapper {
	background: #585d62;
}
.big-menu {
	color: white;
	background: #6ead12;
}
.translucid,
.notification {
	color: #bdbdbd;
	background: url('http://www.asxportal.be/common/img/old-browsers/black75.png') repeat-x;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0))), rgba(0, 0, 0, 0.75);
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75);
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75);
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75);
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75);
	background: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75);
	border-color: black;
}
.field-drop,
.row-drop > th,
.row-drop > td,
.cell-drop,
.back {
	background: #3c4044;
	color: #afafaf;
	}
	.field-drop b, .field-drop strong,
	.row-drop b, .row-drop strong,
	.cell-drop b, .cell-drop strong {
		color: white;
	}

/********************************************************/
/*                 4. Inputs & progress                 */
/********************************************************/

.input, .inputs, .inputcolor,
.progress, .slider,
.checkbox, .radio {
	background: #efeeee;
	border-color: #cccccc;
	color: #666666;
	}
	.inputcolor {
	background:none;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	border-color: #cccccc;
	}
	.black-inputs .input, .input.black-input,
	.black-inputs .inputs, .inputs.black-input,
	.black-inputs .progress, .progress.black-input,
	.black-inputs .slider, .slider.black-input,
	.black-inputs .checkbox, .checkbox.black-input,
	.black-inputs .radio, .radio.black-input {
		background: #323232;
		color: white;
		border-color: #777777;
	}
	.orange-inputs .input, .input.orange-input,
	.orange-inputs .inputs, .inputs.orange-input,
	.orange-inputs .progress, .progress.orange-input,
	.orange-inputs .slider, .slider.orange-input,
	.orange-inputs .checkbox, .checkbox.orange-input,
	.orange-inputs .radio, .radio.orange-input,
	.orange-inputs .file, .orange-input, .file.orange-input,
	.orange-inputs .select, .select.orange-input {
		background: #ffa700;
		border-color: #cc9707;
		color: white;
	}
	.input:disabled {
		-webkit-text-fill-color: #999999;
		}
		.black-inputs .input:disabled,
		.orange-inputs .input:disabled,
		.input.black-input:disabled,
		.input.orange-input:disabled {
			-webkit-text-fill-color: #cccccc;
		}

/********************************************************/
/*                   5. Modal window                    */
/********************************************************/

.modal {
	background: #101010;
	color: white;
	border-color: #191919;
	}
	.modal-bar {
		background: url('http://www.asxportal.be/common/img/old-browsers/colors/bg_modal-bar.png') repeat-x;
		-webkit-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		background-size: 100% 100%;
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0)));
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%);
		background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%);
		background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%);
		background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%);
		background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%);
	}

/********************************************************/
/*            6. Generic gradients - defaults           */
/********************************************************/

/* Silver */
.button, .button:visited,
.select-value, .select-arrow,
.switch-button,
.legend,
.block-title, .details > summary,
.accordion > dt,
.table > thead > tr > th,
.table > thead > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td,
.agenda-header, .agenda-event,
.tabs-back,
.blocks-list > li,
.panel-control,
.wizard-step { 
	color: #666666;
	background: #d6dadf;
	border-color: #cccccc;
	}
	a.button:hover, button.button:hover,
	a.select-value:hover, .no-touch .select-arrow:hover,
	a.agenda-event:hover {
		color: #666666;
		background: #d7dbdf;
		border-color: #cccccc;
	}
	.button.glossy,
	.glossy > .select-value, .glossy > .select-arrow {
		background: #dcdce0;
		}
		a.button.glossy:hover, button.button.glossy:hover,
		.glossy > a.select-value:hover, .glossy > .select-arrow:hover {
			background: #e8e8eb;
		}
	a.button:active, button.button:active, .button.active, .button.active:hover,
	a.button.glossy:active, button.button.glossy:active, .button.glossy.active {
		background: #dbdbdb;
	}

/* Black */
#title-bar, #access {
	background: #000000;
}

/* Anthracite */
.black-inputs .switch-button,
.black-input > .switch-button,
.wizard-steps {
	color: white; 
	background: #404040;
	border-color: #282e36;
}

/* White */
.calendar-menu > li,
li.calendar-menu,
.message-menu > li,
li.message-menu,
.message, .big-message,
.table > thead > tr > .header:hover {
	color: #666666;
	background: #e4e7eb;
	border-color: #cccccc;
	}
	.message.glossy, .big-message.glossy {
		background: #e8e8eb;
	}

/* Red */
.count, .close,
.extra-notifications,
.more-notifications {
	color: white;
	background: #e42c2a;
	border-color: #931a03;
	}
	a.count:hover, a.close:hover {
		color: white;
		background: #e32f2e;
		border-color: #931a03;
	}
	.count.glossy, .close.glossy {
		background: #d42622;
		}
		a.count.glossy:hover, a.close.glossy:hover {
			background: #e94237;
		}
	a.count:active, a.count.active, a.count.glossy:active,
	a.close:active, a.close.active, a.close.glossy:active {
		background: #e32f2e;
	}

/* STEPS */

.withError > .wizard-step { /* is de ERROR step */  
	color: white; 
	background: #ff9e00;
	border-color: #df9010;
}
.ribbon-inner,
.active > .wizard-step { /* is de actieve VISUM step */
	color: white; 
	background: #8b65c3;
	border-color: #6840a4;
}

/* Blue */
.tag {
	background: #0059a0;
	color: white;
	border-color: #004795;
}
.button-icon,
.progress-bar,
.slider-bar,
.table-header,
.table-footer {
	color: white;
	background: #00438d;
	border-color: #004795;
	}
	.no-touch .drop-down > span:hover, .no-touch .drop-down > a:hover, .drop-down > .selected,
	:hover > .button-icon {
		color: white;
		background: #003d86;
		border-color: #004795;
	}
	.button-icon.glossy, .glossy > .button-icon,
	.progress-bar, .slider-bar {
		background: #0a5db8;
		}
		:hover > .button-icon.glossy, .glossy:hover > .button-icon {
			background: #056fc9;
		}
	.button:active > .button-icon, .active > .button-icon {
		background: #005fb4;
	}

/********************************************************/
/*              7. Generic gradients - main             */
/********************************************************/


/* SILVER BACKGROUND */
.silver-bg,
.drop-down,
.wrapped, .boxed {
	background: #e3e5ea;
	color: #666666;
	border-color: #cccccc;
	}
	a.silver-bg:hover {
		color: #666666;
		background: #e8e9ee;
	}
.silver-gradient, .silver-gradient:visited,
.silver-gradient > .select-value, .silver-gradient > .select-arrow {
	color: #666666;
	background: #d6dadf;
	border-color: #cccccc;
	}
	a.silver-gradient:hover, button.silver-gradient:hover,
	:hover > .button-icon.silver-gradient,
	.silver-gradient > a.select-value:hover, .silver-gradient > .select-arrow:hover {
		color: #666666;
		background: #d7dbdf;
		border-color: #cccccc;
	}
	.silver-gradient.glossy,
	.glossy > .button-icon.silver-gradient, .button-icon.glossy.silver-gradient,
	.silver-gradient.glossy > .select-value, .silver-gradient.glossy > .select-arrow {
		background: #dcdce0;
		}
		a.silver-gradient.glossy:hover, button.silver-gradient.glossy:hover,
		.glossy:hover > .button-icon.silver-gradient, :hover > .button-icon.glossy.silver-gradient,
		.silver-gradient.glossy > a.select-value:hover, .silver-gradient.glossy > .select-arrow:hover {
			background: #e8e8eb;
		}
	a.silver-gradient:active, button.silver-gradient:active, .button.silver-gradient:active, .silver-gradient.active,
	:active > .button-icon.silver-gradient, .active > .button-icon.silver-gradient {
		background: #dbdbdb;
	}

/* BLACK BACKGROUND */
.black-bg,
.black-gradient > .drop-down {
	background: #101010;
	color: white;
	border-color: black;
	}
	a.black-bg:hover {
		color: white;
		background: #383838;
	}
.black-gradient, .black-gradient:visited,
.black-gradient > .select-value, .black-gradient > .select-arrow {
	color: white;
	background: #000000;
	border-color: black;
	}
	a.black-gradient:hover, button.black-gradient:hover,
	:hover > .button-icon.black-gradient,
	.black-gradient > a.select-value:hover, .black-gradient > .select-arrow:hover {
		color: white;
		background: #1b1b1b;
		border-color: black;
	}
	.black-gradient.glossy,
	.glossy > .button-icon.black-gradient, .button-icon.glossy.black-gradient,
	.black-gradient.glossy > .select-value, .black-gradient.glossy > .select-arrow {
		background: #000000;
		}
		a.black-gradient.glossy:hover, button.black-gradient.glossy:hover,
		.glossy:hover > .button-icon.black-gradient, :hover > .button-icon.glossy.black-gradient,
		.black-gradient.glossy > a.select-value:hover, .black-gradient.glossy > .select-arrow:hover {
			background: #080808;
		}
	a.black-gradient:active, button.black-gradient:active, .button.black-gradient:active, .black-gradient.active,
	:active > .button-icon.black-gradient, .active > .button-icon.black-gradient {
		background: #262626;
	}

/* ANTHRACITE BACKGROUND */
.anthracite-bg,
.anthracite-gradient > .drop-down {
	background: #4c4c4c;
	color: white;
	border-color: #282e36;
	}
	a.anthracite-bg:hover {
		color: white;
		background: #6a6a6a;
	}
.anthracite-gradient, .anthracite-gradient:visited,
.anthracite-gradient > .select-value, .anthracite-gradient > .select-arrow,
.black-inputs .number-up, .black-input > .number-up,
.black-inputs .number-down, .black-input > .number-down {
	color: white;
	background: #404040;
	border-color: #282e36;
	}
	a.anthracite-gradient:hover, button.anthracite-gradient:hover,
	:hover > .button-icon.anthracite-gradient,
	.no-touch .red-gradient > .drop-down > span:hover, .no-touch .red-gradient > .drop-down > a:hover, .red-gradient > .drop-down > .selected,
	.no-touch .orange-gradient > .drop-down > span:hover, 
	.no-touch .orange-gradient > .drop-down > a:hover, 
	.orange-gradient > .drop-down > .selected,
	.no-touch .yellow-gradient > .drop-down > span:hover, 
	.no-touch .yellow-gradient > .drop-down > a:hover, 
	.yellow-gradient > .drop-down > .selected,
	.no-touch .green-gradient > .drop-down > span:hover, .no-touch .green-gradient > .drop-down > a:hover, .green-gradient > .drop-down > .selected,
	.no-touch .blue-gradient > .drop-down > span:hover, .no-touch .blue-gradient > .drop-down > a:hover, .blue-gradient > .drop-down > .selected,
	.anthracite-gradient > a.select-value:hover, .anthracite-gradient > .select-arrow:hover,
	.black-inputs .number-up:hover, .black-input > .number-up:hover,
	.black-inputs .number-down:hover, .black-input > .number-down:hover {
		color: white;
		background: #000;
		border-color: #282e36;
	}
	.anthracite-gradient.glossy,
	.glossy > .button-icon.anthracite-gradient, .button-icon.glossy.anthracite-gradient,
	.anthracite-gradient.glossy > .select-value, .anthracite-gradient.glossy > .select-arrow {
		background: #505050;
		}
		a.anthracite-gradient.glossy:hover, button.anthracite-gradient.glossy:hover,
		.glossy:hover > .button-icon.anthracite-gradient, :hover > .button-icon.glossy.anthracite-gradient,
		.anthracite-gradient.glossy > a.select-value:hover, .anthracite-gradient.glossy > .select-arrow:hover {
			background: #656565;
		}
	a.anthracite-gradient:active, button.anthracite-gradient:active, .button.anthracite-gradient:active, .anthracite-gradient.active,
	:active > .button-icon.anthracite-gradient, .active > .button-icon.anthracite-gradient,
	.black-inputs .number-up:active, .black-input > .number-up:active,
	.black-inputs .number-down:active, .black-input > .number-down:active {
		background: #474747;
	}

/* GREY BACKGROUND */
.grey-bg,
.grey-gradient > .drop-down {
	background: #a5a5a5;
	color: white;
	border-color: #666666;
	}
	a.grey-bg:hover {
		color: white;
		background: #b4b4b4;
	}
.grey-gradient, .grey-gradient:visited,
.grey-gradient > .select-value, .grey-gradient > .select-arrow,
.title-menu > li, li.title-menu {
	color: white;
	background: #939393;
	border-color: #666666;
	}
	a.grey-gradient:hover, button.grey-gradient:hover,
	:hover > .button-icon.grey-gradient,
	.grey-gradient > a.select-value:hover, .grey-gradient > .select-arrow:hover {
		color: white;
		background: #8b8b8b;
		border-color: #666666;
	}
	.grey-gradient.glossy,
	.glossy > .button-icon.grey-gradient, .button-icon.glossy.grey-gradient,
	.grey-gradient.glossy > .select-value, .grey-gradient.glossy > .select-arrow {
		background: #9c9c9c;
		}
		a.grey-gradient.glossy:hover, button.grey-gradient.glossy:hover,
		.glossy:hover > .button-icon.grey-gradient, :hover > .button-icon.glossy.grey-gradient,
		.grey-gradient.glossy > a.select-value:hover, .grey-gradient.glossy > .select-arrow:hover {
			background: #ababab;
		}
	a.grey-gradient:active, button.grey-gradient:active, .button.grey-gradient:active, .grey-gradient.active,
	:active > .button-icon.grey-gradient, .active > .button-icon.grey-gradient,
	.black-inputs .switch-off, .black-input > .switch-off {
		background: #b7b7b7;
	}

/* WHITE BACKGROUND */
.white-bg,
.white-gradient > .drop-down {
	background: #f1f3f4;
	color: #666666;
	border-color: #cccccc;
	}
	a.white-bg:hover {
		color: #666666;
		background: #f3f5f6;
	}
.white-gradient, .white-gradient:visited,
.white-gradient > .select-value, .white-gradient > .select-arrow {
	color: #666666;
	background: #e4e7eb;
	border-color: #cccccc;
	}
	a.white-gradient:hover, button.white-gradient:hover,
	:hover > .button-icon.white-gradient,
	.white-gradient > a.select-value:hover, .white-gradient > .select-arrow:hover {
		color: #666666;
		background: #edf0f2;
		border-color: #cccccc;
	}
	.white-gradient.glossy,
	.glossy > .button-icon.white-gradient, .button-icon.glossy.white-gradient,
	.white-gradient.glossy > .select-value, .white-gradient.glossy > .select-arrow {
		background: #e8e8eb;
		}
		a.white-gradient.glossy:hover, button.white-gradient.glossy:hover,
		.glossy:hover > .button-icon.white-gradient, :hover > .button-icon.glossy.white-gradient,
		.white-gradient.glossy > a.select-value:hover, .white-gradient.glossy > .select-arrow:hover {
			background: #f5f5f7;
		}
	a.white-gradient:active, button.white-gradient:active, .button.white-gradient:active, .white-gradient.active,
	:active > .button-icon.white-gradient, .active > .button-icon.white-gradient,
	.switch-off {
		background: #f0f0f0;
		border-color: #cccccc;
	}

/* RED BACKGROUND */
.red-bg,
.red-gradient > .drop-down {
	background: #e42c2a;
	color: white;
	border-color: #931a03;
	}
	a.red-bg:hover {
		color: white;
		background: #e35a36;
	}
.red-gradient, .red-gradient:visited,
.red-gradient > .select-value, .red-gradient > .select-arrow {
	color: white;
	background: #e42c2a;
	border-color: #931a03;
	}
	a.red-gradient:hover, button.red-gradient:hover,
	:hover > .button-icon.red-gradient,
	.red-gradient > a.select-value:hover, .red-gradient > .select-arrow:hover {
		color: white;
		background: #e32f2e;
		border-color: #931a03;
	}
	.red-gradient.glossy,
	.glossy > .button-icon.red-gradient, .button-icon.glossy.red-gradient,
	.red-gradient.glossy > .select-value, .red-gradient.glossy > .select-arrow {
		background: #d42622;
		}
		a.red-gradient.glossy:hover, button.red-gradient.glossy:hover,
		.glossy:hover > .button-icon.red-gradient, :hover > .button-icon.glossy.red-gradient,
		.red-gradient.glossy > a.select-value:hover, .red-gradient.glossy > .select-arrow:hover {
			background: #e94237;
		}
	a.red-gradient:active, button.red-gradient:active, .button.red-gradient:active, .red-gradient.active,
	:active > .button-icon.red-gradient, .active > .button-icon.red-gradient {
		background: #e32f2e;
	}

/* ORANGE BACKGROUND */
.orange-bg,
.orange-gradient > .drop-down {
	background: #ffae00;
	color: black;
	border-color: #cc9707;
	}
	a.orange-bg:hover {
		color: black;
		background: #ffbb2b;
	}
.orange-gradient, .orange-gradient:visited,
.orange-gradient > .select-value, .orange-gradient > .select-arrow {
	color: black;
	background: #ff9e00;
	border-color: #cc9707;
	}
	a.orange-gradient:hover, button.orange-gradient:hover,
	:hover > .button-icon.orange-gradient,
	.orange-gradient > a.select-value:hover, .orange-gradient > .select-arrow:hover {
		color: black;
		background: #ff9700;
		border-color: #cc9707;
	}
	.orange-gradient.glossy,
	.glossy > .button-icon.orange-gradient, .button-icon.glossy.orange-gradient,
	.orange-gradient.glossy > .select-value, .orange-gradient.glossy > .select-arrow {
		background: #d38800;
		}
		a.orange-gradient.glossy:hover, button.orange-gradient.glossy:hover,
		.glossy:hover > .button-icon.orange-gradient, :hover > .button-icon.glossy.orange-gradient,
		.orange-gradient.glossy > a.select-value:hover, .orange-gradient.glossy > .select-arrow:hover {
			background: #e8a400;
		}
	a.orange-gradient:active, button.orange-gradient:active, .button.orange-gradient:active, 
	.orange-gradient.active,.tabsmenu > li.active,
	:active > .button-icon.orange-gradient, .active > .button-icon.orange-gradient {
		background: #ffbf00;
	}

/* YELLOW BACKGROUND */
.yellow-bg,
.yellow-gradient > .drop-down {
	background: #b3cc07;
	color: white;
	border-color: #a5ba11;
	}
	a.yellow-bg:hover {
		color: white;
		background: #cee71f;
	}
.yellow-gradient, .yellow-gradient:visited,
.yellow-gradient > .select-value, .yellow-gradient > .select-arrow {
	color: white;
	background: #bfd61a;
	border-color: #a4b71b;
	}

/* GREEN BACKGROUND */
.green-bg,
.green-gradient > .drop-down {
	background: #99c624;
	color: white;
	border-color: #6d960c;
	}
	a.green-bg:hover {
		color: white;
		background: #aad049;
	}
.green-gradient, .green-gradient:visited,
.green-gradient > .select-value, .green-gradient > .select-arrow {
	color: white;
	background: #87ba17;
	border-color: #6d960c;
	}
	a.green-gradient:hover, button.green-gradient:hover,
	:hover > .button-icon.green-gradient,
	.green-gradient > a.select-value:hover, .green-gradient > .select-arrow:hover {
		color: white;
		background: #80b514;
		border-color: #6d960c;
	}
	.green-gradient.glossy,
	.glossy > .button-icon.green-gradient, .button-icon.glossy.green-gradient,
	.green-gradient.glossy > .select-value, .green-gradient.glossy > .select-arrow {
		background: #5eb80a;
		}
		a.green-gradient.glossy:hover, button.green-gradient.glossy:hover,
		.glossy:hover > .button-icon.green-gradient, :hover > .button-icon.glossy.green-gradient,
		.green-gradient.glossy > a.select-value:hover, .green-gradient.glossy > .select-arrow:hover {
			background: #6ac905;
		}
	a.green-gradient:active, button.green-gradient:active, .button.green-gradient:active, .green-gradient.active,
	:active > .button-icon.green-gradient, .active > .button-icon.green-gradient,
	.switch-on {
		background: #b0d222;
		border-color: #6d960c;
	}

/* BLUE BACKGROUND */
.blue-bg,
.blue-gradient > .drop-down {
	background: #0059a0;
	color: white;
	border-color: #004795;
	}
	a.blue-bg:hover {
		background: #2b75b0;
		color: white;
	}
.blue-gradient, .blue-gradient:visited,
.blue-gradient > .select-value, .blue-gradient > .select-arrow {
	color: white;
	background: #005f9f;
	border-color: #004795;
	}
	a.blue-gradient:hover, button.blue-gradient:hover,
	.blue-gradient > a.select-value:hover, .blue-gradient > .select-arrow:hover {
		color: white;
		background: #003d86;
		border-color: #004795;
	}
	.blue-gradient.glossy,
	.blue-gradient.glossy > .select-value, .blue-gradient.glossy > .select-arrow {
		background: #0a5db8;
		}
		a.blue-gradient.glossy:hover, button.blue-gradient.glossy:hover,
		.blue-gradient.glossy > a.select-value:hover, .blue-gradient.glossy > .select-arrow:hover {
			background: #056fc9;
		}
	a.blue-gradient:active, button.blue-gradient:active, .button.blue-gradient:active, .blue-gradient.active {
		background: #005fb4;
	}
	
	
/* KAAI BACKGROUND */
.kaai-bg,
.kaai-gradient > .drop-down {
	background: #196db6;
	color: white;
	border-color: #15568f;
	}
	a.kaai-bg:hover {
		background: #2b75b0;
		color: white;
	}
.kaai-gradient, .kaai-gradient:visited,
.kaai-gradient > .select-value, .kaai-gradient > .select-arrow {
	color: white;
	background: #196db6;
	border-color: #15568f;
	}
	a.kaai-gradient:hover, button.kaai-gradient:hover,
	.kaai-gradient > a.select-value:hover, .kaai-gradient > .select-arrow:hover {
		color: white;
		background: #003d86;
		border-color: #15568f;
	}
	.kaai-gradient.glossy,
	.kaai-gradient.glossy > .select-value, .kaai-gradient.glossy > .select-arrow {
		background: #0a5db8;
		}
		a.kaai-gradient.glossy:hover, button.kaai-gradient.glossy:hover,
		.kaai-gradient.glossy > a.select-value:hover, .kaai-gradient.glossy > .select-arrow:hover {
			background: #196db6;
		}
	a.kaai-gradient:active, button.kaai-gradient:active, .button.kaai-gradient:active, .kaai-gradient.active {
		background: #005fb4;
	}
.kaai-active:active, .kaai-active.active,
.kaai-active > .switch-on {
	background: #196db6;
	color: white !important;
	border-color: #15568f;
}

	
	
/* ORDER BACKGROUND */
.order-bg,
.order-gradient > .drop-down {
	background: #4aa84e;
	color: white;
	border-color: #3a833d;
	}
	a.order-bg:hover {
		background: #2b75b0;
		color: white;
	}
.order-gradient, .order-gradient:visited,
.order-gradient > .select-value, .order-gradient > .select-arrow {
	color: white;
	background: #4aa84e;
	border-color: #3a833d;
	}
	a.order-gradient:hover, button.order-gradient:hover,
	.order-gradient > a.select-value:hover, .order-gradient > .select-arrow:hover {
		color: white;
		background: #003d86;
		border-color: #3a833d;
	}
	.order-gradient.glossy,
	.order-gradient.glossy > .select-value, .order-gradient.glossy > .select-arrow {
		background: #0a5db8;
		}
		a.order-gradient.glossy:hover, button.order-gradient.glossy:hover,
		.order-gradient.glossy > a.select-value:hover, .order-gradient.glossy > .select-arrow:hover {
			background: #4aa84e;
		}
	a.order-gradient:active, button.order-gradient:active, .button.order-gradient:active, .order-gradient.active {
		background: #005fb4;
	}
.order-active:active, .order-active.active,
.order-active > .switch-on {
	background: #4aa84e;
	color: white !important;
	border-color: #3a833d;
}
	
	
/* POST BACKGROUND */
.post-bg,
.post-gradient > .drop-down {
	background: #cfb821;
	color: white;
	border-color: #ad9a1d;
	}
	a.post-bg:hover {
		background: #2b75b0;
		color: white;
	}
.post-gradient, .post-gradient:visited,
.post-gradient > .select-value, .post-gradient > .select-arrow {
	color: white;
	background: #cfb821;
	border-color: #ad9a1d;
	}
	a.post-gradient:hover, button.post-gradient:hover,
	.post-gradient > a.select-value:hover, .post-gradient > .select-arrow:hover {
		color: white;
		background: #003d86;
		border-color: #ad9a1d;
	}
	.post-gradient.glossy,
	.post-gradient.glossy > .select-value, .post-gradient.glossy > .select-arrow {
		background: #0a5db8;
		}
		a.post-gradient.glossy:hover, button.post-gradient.glossy:hover,
		.post-gradient.glossy > a.select-value:hover, .post-gradient.glossy > .select-arrow:hover {
			background: #cfb821;
		}
	a.post-gradient:active, button.post-gradient:active, .button.post-gradient:active, .post-gradient.active {
		background: #005fb4;
	}
.post-active:active, .post-active.active,
.post-active > .switch-on {
	background: #cfb821;
	color: white !important;
	border-color: #ad9a1d;
}
	
	
/* VISUM BACKGROUND */
.visum-bg,
.visum-gradient > .drop-down {
	background: #8b65c3;
	color: white;
	border-color: #634393;
	}
	a.visum-bg:hover {
		background: #2b75b0;
		color: white;
	}
.visum-gradient, .visum-gradient:visited,
.visum-gradient > .select-value, .visum-gradient > .select-arrow {
	color: white;
	background: #8b65c3;
	border-color: #634393;
	}
	a.visum-gradient:hover, button.visum-gradient:hover,
	.visum-gradient > a.select-value:hover, .visum-gradient > .select-arrow:hover {
		color: white;
		background: #003d86;
		border-color: #634393;
	}
	.visum-gradient.glossy,
	.visum-gradient.glossy > .select-value, .visum-gradient.glossy > .select-arrow {
		background: #0a5db8;
		}
		a.visum-gradient.glossy:hover, button.visum-gradient.glossy:hover,
		.visum-gradient.glossy > a.select-value:hover, .visum-gradient.glossy > .select-arrow:hover {
			background: #8b65c3;
		}
	a.visum-gradient:active, button.visum-gradient:active, .button.visum-gradient:active, .visum-gradient.active {
		background: #005fb4;
	}
.post-active:active, .post-active.active,
.post-active > .switch-on {
	background: #8b65c3;
	color: white !important;
	border-color: #005fb4;
}



/********************************************************/
/*             8. Generic gradients - active            */
/********************************************************/

.silver-active:active, .silver-active.active,
.silver-active > .switch-on {
	background: #dbdbdb;
	color: #666666 !important;
	border-color: #cccccc;
}
.black-active:active, .black-active.active,
.black-active > .switch-on {
	background: #262626;
	color: white !important;
	border-color: black;
}
.anthracite-active:active, .anthracite-active.active,
.anthracite-active > .switch-on {
	background: #474747;
	color: white !important;
	border-color: #282e36;
}
.grey-active:active, .grey-active.active,
.grey-active > .switch-on {
	background: #b7b7b7;
	color: white !important;
	border-color: #666666;
}
.white-active:active, .white-active.active,
.white-active > .switch-on {
	background: #f0f0f0;
	color: #666666 !important;
	border-color: #cccccc;
}
.red-active:active, .red-active.active,
.red-active > .switch-on {
	background: #e32f2e;
	color: white !important;
	border-color: #931a03;
}
.orange-active:active, .orange-active.active,
.orange-active > .switch-on {
	background: #ffbf00;
	color: white !important;
	border-color: #cc9707;
}
.green-active:active, .green-active.active,
.green-active > .switch-on {
	background: #b0d222;
	color: white !important;
	border-color: #6d960c;
}
.blue-active:active, .blue-active.active,
.blue-active > .switch-on {
	background: #005fb4;
	color: white !important;
	border-color: #004795;
}

/********************************************************/
/*            9. Generic gradients - disabled           */
/********************************************************/

/* Silver */
.button:disabled, .button.disabled, .disabled .button,
.disabled .select-value, .disabled .select-arrow,
.disabled .switch-button,
.disabled .switch-off {
	color: #666666 !important;
	border-color: #d0d0d0 !important;
	background: #f8f8f8;
}

/* Green */
.disabled .switch-on {
	color: white !important;
	border-color: #b2b9ab !important;
	background: #b3d36b;
}

/* Blue */
:disabled > .button-icon, .disabled .button-icon {
	color: white !important;
	border-color: #858c94 !important;
	background: #84a4c8;
}

.silver-gradient:disabled, .silver-gradient.disabled, .disabled .button.silver-gradient,
.silver-gradient.disabled > .select-value, .silver-gradient.disabled > .select-arrow,
.disabled .silver-gradient > .select-value, .disabled .silver-gradient > .select-arrow {
	color: #666666 !important;
	border-color: #d0d0d0 !important;
	background: #f8f8f8;
}
.black-gradient:disabled, .black-gradient.disabled, .disabled .black-gradient,
.black-gradient.disabled > .select-value, .black-gradient.disabled > .select-arrow,
.disabled .black-gradient > .select-value, .disabled .black-gradient > .select-arrow {
	color: white !important;
	border-color: #595959 !important;
	background: #636363;
}
.button.anthracite-gradient:disabled, .button.anthracite-gradient.disabled, .disabled .button.anthracite-gradient,
.button.glossy.anthracite-gradient:disabled, .button.glossy.anthracite-gradient.disabled, .disabled .button.glossy.anthracite-gradient,
.anthracite-gradient.disabled > .select-value, .anthracite-gradient.disabled > .select-arrow,
.disabled .anthracite-gradient > .select-value, .disabled .anthracite-gradient > .select-arrow,
.black-inputs .disabled .switch-off, .black-inputs.disabled .switch-off, .disabled .black-inputs .switch-off,
.black-input.disabled > .switch-off, .disabled .black-input > .switch-off,
.black-inputs .disabled .switch-button, .black-inputs.disabled .switch-button, .disabled .black-inputs .switch-button,
.black-input.disabled > .switch-button, .disabled .black-input > .switch-button,
.black-inputs .checkbox.disabled, .black-inputs .disabled .checkbox, .black-inputs.disabled .checkbox,
.disabled .black-inputs .checkbox, .black-input.checkbox,
.black-inputs .radio.disabled, .black-inputs .disabled .radio, .black-inputs.disabled .radio,
.disabled .black-inputs .radio, .black-input.radio {
	color: white !important;
	border-color: #777777 !important;
	background: #848484;
}
.button.grey-gradient:disabled, .button.grey-gradient.disabled, .disabled .button.grey-gradient,
.button.glossy.grey-gradient:disabled, .button.glossy.grey-gradient.disabled, .disabled .button.glossy.grey-gradient,
.grey-gradient.disabled > .select-value, .grey-gradient.disabled > .select-arrow,
.disabled .grey-gradient > .select-value, .disabled .grey-gradient > .select-arrow,
.checkbox.disabled, .disabled .checkbox,
.radio.disabled, .disabled .radio {
	color: white !important;
	border-color: #9c9c9c !important;
	background: #b9b9b9;
}
.button.white-gradient:disabled, .button.white-gradient.disabled, .disabled .button.white-gradient,
.button.glossy.white-gradient:disabled, .button.glossy.white-gradient.disabled, .disabled .button.glossy.white-gradient,
.white-gradient.disabled > .select-value, .white-gradient.disabled > .select-arrow,
.disabled .white-gradient > .select-value, .disabled .white-gradient > .select-arrow {
	color: #666666 !important;
	border-color: #e0e0e0 !important;
	background: #fafafa;
}
.button.red-gradient:disabled, .button.red-gradient.disabled, .disabled .button.red-gradient,
.button.glossy.red-gradient:disabled, .button.glossy.red-gradient.disabled, .disabled .button.glossy.red-gradient,
.red-gradient.disabled > .select-value, .red-gradient.disabled > .select-arrow,
.disabled .red-gradient > .select-value, .disabled .red-gradient > .select-arrow {
	color: white !important;
	border-color: #a99e9c !important;
	background: #e98b7a;
}
.button.orange-gradient:disabled, .button.orange-gradient.disabled, .disabled .button.orange-gradient,
.button.glossy.orange-gradient:disabled, .button.glossy.orange-gradient.disabled, .disabled .button.glossy.orange-gradient,
.orange-gradient.disabled > .select-value, .orange-gradient.disabled > .select-arrow,
.disabled .orange-gradient > .select-value, .disabled .orange-gradient > .select-arrow {
	color: white !important;
	border-color: #d0ccc3 !important;
	background: #ffc15d;
}
.button.green-gradient:disabled, .button.green-gradient.disabled, .disabled .button.green-gradient,
.button.glossy.green-gradient:disabled, .button.glossy.green-gradient.disabled, .disabled .button.glossy.green-gradient,
.green-gradient.disabled > .select-value, .green-gradient.disabled > .select-arrow,
.disabled .green-gradient > .select-value, .disabled .green-gradient > .select-arrow {
	color: white !important;
	border-color: #b2b9ab !important;
	background: #b3d36b;
}
.button.blue-gradient:disabled, .button.blue-gradient.disabled, .disabled .button.blue-gradient,
.button.glossy.blue-gradient:disabled, .button.glossy.blue-gradient.disabled, .disabled .button.glossy.blue-gradient,
.blue-gradient.disabled > .select-value, .blue-gradient.disabled > .select-arrow,
.disabled .blue-gradient > .select-value, .disabled .blue-gradient > .select-arrow {
	color: white !important;
	border-color: #858c94 !important;
	background: #84a4c8;
}