Color elements for juci controls and elements

body{
	color: rgb(80, 73, 60);
	background-color: #92C5E9;
	background: url(../img/cream.jpg);
}

Panels and dialog

.juci_dialog_container{
	color: black;
}
.juci_dialog{
	background: #FAFAFA;
	border-color: #DDD;
}
.juci_panel_title{
	background: -webkit-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(90%,#F7f7f7));
	background: -moz-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: -o-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: -ms-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: linear-gradient(top, #FFFFFF, #F7F7F7);
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F7F7F7',GradientType=0 );*/
	background-color: #FFF;
	border-bottom-color: #BBB;
	color: #313131;
}
.juci_panel_title .actionbutton{
	text-shadow: #DDD 0px 0px;
}
.juci_panel_title .actionbutton.touch{}

Basecontrol

.juci_basecontrol{
	background: -webkit-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(90%,#F7f7f7));
	background: -moz-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: -o-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: -ms-linear-gradient(top, #FFFFFF, #F7F7F7);
	background: linear-gradient(top, #FFFFFF, #F7F7F7);
	background: #FFF;
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F7F7F7',GradientType=0 );*/
	border-color: rgb(231, 231, 231);
	box-shadow: 0px 2px rgb(214, 213, 202);
	/* border-bottom: none; TODO CHeck perf and remove*/
	border-bottom-color: rgb(214, 213, 202);
}
.juci_ctrl_label{
	color: #6D6D6D;
}
.juci_basecontrol.touch .juci_ctrl_label{
	color: #FAFAFA;
}
.juci_basecontrol.touch .juci_ctrl_box{
	color: #FAFAFA;
}
.juci_basecontrol[disabled]{
	opacity: 0.7;
}

Text

Text related controls

.juci_text_delete{
	background-image: url('../img/delete-L.png');
	background-repeat: no-repeat;
	background-position: right;
}
.juci_text_delete.touch{
	background-image: url('../img/delete-L-touch.png');
}
.juci_forgotpassword{
	background: none !important;
}
.juci_forgotpassword_password{
	border-right-color: #D7D7D7;
}
.juci_text.touch, .juci_text.focussed, .juci_forgotpassword_password.focussed{
	-webkit-box-shadow: inset 0px 0px 5px rgb(187, 187, 187);
	box-shadow: inset 0px 0px 5px rgb(187, 187, 187);
	border-color: rgb(209, 209, 209);
	background-image: -webkit-linear-gradient(top, #FFFFFF, #F7F7F7);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(90%,#F7f7f7));
	background-image: -moz-linear-gradient(top, #FFFFFF, #F7F7F7);
	background-image: -o-linear-gradient(top, #FFFFFF, #F7F7F7);
	background-image: -ms-linear-gradient(top, #FFFFFF, #F7F7F7);
	background-image: linear-gradient(top, #FFFFFF, #F7F7F7);
	background: #FFF;
}
.juci_text.touch .juci_ctrl_label, .juci_text.focussed .juci_ctrl_label{
	color: #A8A8A8;
}
.juci_text.touch .juci_ctrl_box{
	color: #2e2e2e;
}

Option

.juci_option{
	border-bottom-color: #e2e2e2;
}
.juci_check_box{
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("../img/tick-black.png");
	opacity: 0.2;
}
.juci_check.selected .juci_check_box{
	opacity: 1;
	background-image: url("../img/tick.png");
}
.juci_check.touch{
	background-image: -webkit-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60b7f5), color-stop(90%,#56a5dd));
	background-image: -moz-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: -o-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: -ms-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: linear-gradient(top, #60b7f5, #56a5dd);
	background: rgb(37, 178, 245);
	color: #FAFAFA;
	box-shadow: none;
}
.juci_check.touch .juci_check_box{
	background-image: url("../img/tick-touch.png");
}
.juci_option.selected{
	background-image: url("../img/tick.png");
	background-position: 98% center;
	background-repeat: no-repeat;
}
.juci_option.touch{
	background-image: url("../img/tick-touch.png");
	background-color: rgb(37, 178, 245);
	box-shadow: none;
	background-position: 98% center;
	background-repeat: no-repeat;
	color: #FAFAFA;
}
.juci_switch_scroller > *{
	color: #FAFAFA;
	text-shadow: 0px 1px #AAA;
	border-color: rgb(214, 214, 214);
}
.juci_switch_thumb{
	background: -webkit-linear-gradient(top, #FFF, #F7f7f7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(90%,#F7f7f7));
	background: -moz-linear-gradient(top, #FFF, #F7f7f7);
	background: -o-linear-gradient(top, #FFF, #F7f7f7);
	background: -ms-linear-gradient(top, #FFF, #F7f7f7);
	background: linear-gradient(top, #FFF, #F7f7f7);
	background-color: #fff;
}
.juci_switch_bar.selected{}

Button

.juci_button{
	background: -webkit-linear-gradient(top, #FFF, #F7F7F7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(90%,#F7F7F7));
	background: -moz-linear-gradient(top, #FFF, #F7F7F7);
	background: -o-linear-gradient(top, #FFF, #F7F7F7);
	background: -ms-linear-gradient(top, #FFF, #F7F7F7);
	background: linear-gradient(top, #FFF, #F7F7F7);
	background-color: #FFF;
	color: #595959;
	border-color: rgb(235, 235, 235);
}
.juci_button[disabled]{
	opacity: 0.6;
}
.juci_button.touch, .juci_togglebar .juci_button.toggled{
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.75,#F7F7F7), color-stop(0.1,#FFFFFF));
	background-image: -moz-linear-gradient(top, #F7F7F7 75%, #FFFFFF 10%);
	background-image: -o-linear-gradient(top, #F7F7F7 75%, #FFFFFF 10%);
	background-image: -ms-linear-gradient(top, #F7F7F7 75%, #FFFFFF 10%);
	background-image: linear-gradient(top, #F7F7F7 75%, #FFFFFF 10%);
	background-color: #F7F7F7;
	-webkit-box-shadow: inset 0px 0px 2px #DDD;
	box-shadow: inset 0px 0px 1px rgba(0,0,0,0.2);
	color: rgb(0, 141, 252);
	text-shadow: 0px 1px #F7f7f7;
}

List

.juci_xlist_pane{
	border-color: #EEE;
	background: transparent;
	box-shadow: 0px 2px #DDD;
	/* border-bottom: none; TODO Check and remove*/
	border-bottom-color: #DDD;
}
.juci_options:empty, .juci_xlist_pane:empty{
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}
.juci_xlist_item{
	border-bottom-color: #e7e7e7;
}
.juci_subtitle{
	color: rgb(128, 117, 97);
}
.touch .juci_subtitle{
	color: inherit;
}
.juci_actionable_button.touch{}
.juci_imagelist_image{
	border-color: #F1F1F1;
	box-shadow: inset 0px 1px 1px #EEE;
	background: #FDFDFD;
}
.juci_flag{
	background: #555555;
	color: #FAFAFA;
}
.juci_flag.touch{
	background: #DDD;
	color: #313131;
}
.juci_statlist_stat{
	background: -webkit-linear-gradient(top, rgb(136, 206, 255), rgb(69, 222, 235));
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(136, 206, 255)), color-stop(90%,rgb(69, 222, 235)));
	background: -moz-linear-gradient(top, rgb(136, 206, 255), rgb(69, 222, 235));
	background: -o-linear-gradient(top, rgb(136, 206, 255), rgb(69, 222, 235));
	background: -ms-linear-gradient(top, rgb(136, 206, 255), rgb(69, 222, 235));
	background: linear-gradient(top, rgb(136, 206, 255), rgb(69, 222, 235));
	background-color: rgb(136, 206, 255);
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(136, 206, 255)', endColorstr='rgb(69, 222, 235)',GradientType=0 );*/
	border-color: rgb(125, 130, 134);
	color: #FFF;
	background: grey;
	box-shadow: 0px 1px 2px #999;
}
.juci_statlist_stat.touch{
	background: rgb(92, 93, 94);
	border-color: rgb(102, 102, 102);
}
.juci_imageboard_container{
	background: -webkit-linear-gradient(top, #FFF, #F7f7f7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(90%,#F7f7f7));
	background: -moz-linear-gradient(top, #FFF, #F7f7f7);
	background: -o-linear-gradient(top, #FFF, #F7f7f7);
	background: -ms-linear-gradient(top, #FFF, #F7f7f7);
	background: linear-gradient(top, #FFF, #F7f7f7);
	background-color: #fff;
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F7f7f7',GradientType=0 );*/
	border-color: #CCC;
	background: #FFF;
	box-shadow: 0px 2px 1px #DDD;
	/*border-bottom: none; TODO Check and remove*/
	border-bottom-color: #DDD;
}
.juci_imageboard_image{
	border-color: #F1F1F1;
	background: #FDFDFD;
	box-shadow: 1px 1px 1px #EEE;
}

Catalog

.juci_catalog_listPane{
	background: transparent;
	border: none;
	box-shadow: none;
}
.juci_catalog_item{
	background: -webkit-linear-gradient(top, #FFF, #F7f7f7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(90%,#F7f7f7));
	background: -moz-linear-gradient(top, #FFF, #F7f7f7);
	background: -o-linear-gradient(top, #FFF, #F7f7f7);
	background: -ms-linear-gradient(top, #FFF, #F7f7f7);
	background: linear-gradient(top, #FFF, #F7f7f7);
	background-color: #fff;
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F7f7f7',GradientType=0 );*/
	background: #FFF;
	box-shadow: 0px 2px rgb(201, 201, 201);
	border-top-color: transparent
}
.juci_catalog_item.touch{
	background-image: -webkit-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60b7f5), color-stop(90%,#56a5dd));
	background-image: -moz-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: -o-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: -ms-linear-gradient(top, #60b7f5, #56a5dd);
	background-image: linear-gradient(top, #60b7f5, #56a5dd);
	background-color: #60b7f5;
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60b7f5', endColorstr='#56a5dd',GradientType=0 );*/
	color: #FAFAFA;
	background: rgb(69, 194, 243);
}

.juci_searchbox .juci_searchbox_close{
	background: url('../img/delete-L.png') no-repeat center 5px;
}
.juci_searchbox .juci_searchbox_glass{
	background: url('../img/search.png') no-repeat right 5px;
}
.juci_searchbox .juci_text .juci_ctrl_box{
	background: transparent;
}
.juci_searchbox_close.touch{
	background-image: url('../img/delete-L-touch.png');
}
.juci_searchbox.focussed .juci_searchbox_glass{
	background-image: url('../img/search-touch.png');
}

Timepicker

.juci_time_button{
	background: white;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.65,#FFFFFF), color-stop(0.15,#f1f1f1));
	border-color: #ececec;
	color: #2e2e2e;
}
.juci_time_button.touch{
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.15,#FFFFFF), color-stop(0.65,#f1f1f1));
}
.juci_computed_time{
	color: #0096FF;
}
.juci_time_hour, .juci_time_minute{
	border-color: transparent;
	background: none;
}

Photo and Attachments

.juci_photo_overlay{
	border-color: #F7F7F7;
	box-shadow: 1px 1px 2px #EEE;
}
.touch .juci_photo_overlay{
	background: rgba(0, 141, 252, 0.36);
	color: #FAFAFA;
	box-shadow: none;
}
.juci_attachment_listPane{
	background: transparent;
	box-shadow: none;
}
.juci_attachment_thumb > img{
	border-color: #EEE;
}

Calendar

.juci_calendar{
	color: #495A6D;
	text-shadow: 1px 1px white;
	background: none;
}
.juci_calendar .juci_ctrl_box{
	border-color: #DBD9DA;
}
.juci_calendar_middle, .juci_calendar_nav{
	border-bottom-color: #DBD9DA;
	background: #F7F7F7;
	background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#F1F1F1));
}
.juci_calendar_middle{
	border-color: #DBD9DA;
}
.juci_calendar_middle.touch{
	background: #69CCF0;
}
.juci_calendar_nav{
	background-position: center;
	background-repeat: no-repeat;
	background-color: #F7F7F7;
}
.juci_calendar_nav.touch{
	background-color: #69CCF0;
}
.juci_calendar_nav.left{
	background-image: url("../img/larrow.png");
}
.juci_calendar_nav.right{
	background-image: url("../img/arrow.png");
	border-right-color: #DBD9DA;
}
.juci_calendar_nav.left.touch{
	background-image: url("../img/larrow-hover.png");
}
.juci_calendar_nav.right.touch{
	background-image: url("../img/arrow-hover.png");
}
.juci_days.touch > .juci_day{
	background: #69CCF0;
	border-color: transparent;
}
.juci_day, .juci_date{
	background: #F7F7F7;
	background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#F1F1F1));
	border-right-color: #D1D1D1;
	border-top-color: #D1D1D1;
	border-left-color: #DBD9DA;
	border-bottom-color: #DBD9DA;
}
.juci_date.touch {
	background: rgb(105, 204, 240);
	color: #FAFAFA;
	text-shadow: 1px 1px rgba(73, 90, 109, 0.5);
	box-shadow: inset 0px 0px 1px 0px #999;
	-webkit-box-shadow: inset 0px 0px 1px 0px #999;
}
.juci_date.today {
	background: #7389A5;
	color: #FAFAFA;
	text-shadow: 1px 1px #999;
	box-shadow: inset 0px 0px 7px 1px #666;
	-webkit-box-shadow: inset 0px 0px 7px 1px #666;
}
.juci_date.selected{
	color: #FAFAFA;
	text-shadow: 1px 1px #495A6D;
	box-shadow: inset 0px 0px 1px 0px #555;
	-webkit-box-shadow: inset 0px 0px 1px 0px #555;
	background: #69CCF0;
}

Flags and linkers

.juci_catalog_item .juci_flag{
	border-color: transparent;
	-webkit-box-shadow: -1px 1px 1px rgba(70, 70, 70, 0.4), 1px 0px 0px rgba(70, 70, 70, 0.3);
	box-shadow: -1px 1px 1px rgba(70, 70, 70, 0.4), 1px 0px 0px rgba(70, 70, 70, 0.3);
}
.juci_linker{
	background-image: url('../img/arrow.png');
	background-repeat: no-repeat;
	background-position: bottom center;
}
.touch .juci_linker{
	background-image: url('../img/arrow-hover.png');
}
.juci_linker.juci_pencil{
	background-image: url('../img/pencil.png');
	background-position: left;
}
.touch .juci_pencil, .focussed .juci_pencil{
	background-image: none !important;
}
.juci_delete_icon{
	background-image: url('../img/delete-L.png');
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 25px 25px;
}
.juci_delete_icon.touch{
	background-image: url('../img/delete-L-touch.png');
}
.juci_delete.touch img{
	-webkit-box-shadow: 0px 0px 7px 3px #d23030;
	box-shadow: 0px 0px 7px 3px #d23030;
}
.juci_ctrl_separator{
	border-color: #D7D7D7;
}

Generic colors

.juci_positive, .juci_green{
	border-color: rgb(1, 202, 1);
	color: #FFF;
	background: rgb(126, 216, 38);
}
.juci_grey{
	background: #CCC;
	color: #555;
	border-color: #AAA;
}
.juci_grey.touch{
	background: #AAA;
	border-color: #CCC;
	color: #111;
}
.juci_positive.touch, .juci_green.touch{
	border-color: rgb(1, 202, 1);
	box-shadow: none;
	color: #FAFAFA;
	text-shadow: none;
	background: rgb(93, 184, 5);
}
.juci_negative, .juci_error, .juci_red{
	background: #F34A4A;
	border-color: #d23030;
	color: #FFF;
	border-color: rgb(197,44,0);
}
.juci_negative.touch, .juci_error.touch, .juci_red.touch{
	border-color: rgb(190, 134, 134);
	color: #FAFAFA;
	text-shadow: none;
	background: rgb(201,45,0);
}
.juci_yellow, .juci_orange{
	color: #FFF;
	background: rgb(243, 180, 20);
	border-color: rgb(217,156,0);
}
.juci_orange.touch, .juci_yellow.touch{
	color: #FFF;
	box-shadow: none;
	border-color: rgb(218,163,0);
	background: rgb(218, 163, 22);
}
.juci_blue{
	border-color: rgb(141, 184, 224);
	color: #FFF;
	background: rgb(105, 213, 255);
}
.juci_blue.touch{
	box-shadow: none;
	color: #FAFAFA;
	background: rgb(79, 142, 201);
}
.juci_no_border_background{
	border: none;
	background: none;
}
.juci_forgot_password{
	background: none;
}
.juci_forgot_password_container.touch{
	box-shadow: inset 0px 0px 10px 2px #CCC;
	background-image: -webkit-linear-gradient(top, #F7f7f7, #FFF);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7f7f7), color-stop(90%,#FFF));
	background-image: -moz-linear-gradient(top, #F7f7f7, #FFF);
	background-image: -o-linear-gradient(top, #F7f7f7, #FFF);
	background-image: -ms-linear-gradient(top, #F7f7f7, #FFF);
	background-image: linear-gradient(top, #F7f7f7, #FFF);
	background-color: #f7f7f7;
}
.juci_login{
	background: none;
}

Actionbar

Element with a child - list item, selectbox, datepicker

.juci_actionbar{
	border-top-color: #D7d7d7;
	background: -webkit-linear-gradient(top, #FFFFFF,#E7E7E7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(90%,#E7E7E7));
	background: -moz-linear-gradient(top, #FFF, #E7E7E7);
	background: -o-linear-gradient(top, #FFF, #E7E7E7);
	background: -ms-linear-gradient(top, #FFF, #E7E7E7);
	background: linear-gradient(top, #FFF, #E7E7E7);
	background-color: #fff;
}
.juci_actionbar_button{
	background: none;
}
.juci_actionbar_button[disabled]{
	opacity: 0.45;
}
.juci_actionbar_button.touch{
	-webkit-box-shadow: inset 0px 0px 5px 20px #ddd, 0px 0px 6px #CCC !important;
	box-shadow: inset 0px 0px 5px 20px #ddd, 0px 0px 6px #CCC !important;
}

.juci_parent{
	background: #fff;
}
.juci_parent.touch{
	background: rgb(37, 178, 245);
	color: #FAFAFA;
	box-shadow: 0px 1px #DDD;
}
.juci_parent[disabled], .juci_xlist_item[disabled]{
	opacity: 0.6;
}
.juci_thinbar{
	background: -webkit-linear-gradient(top, #FFF, #F7f7f7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(90%,#F7f7f7));
	background: -moz-linear-gradient(top, #FFF, #F7f7f7);
	background: -o-linear-gradient(top, #FFF, #F7f7f7);
	background: -ms-linear-gradient(top, #FFF, #F7f7f7);
	background: linear-gradient(top, #FFF, #F7f7f7);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F7f7f7',GradientType=0 );
	background-color: #fff;
	border-bottom-color: #DDD;
	box-shadow: none;
	-webkit-box-shadow: none;
}
.juci_image_container.touch .juci_image_overlay{
	background: rgba(0,0,0,0.1);
}
.juci_dialog_indicator{
	background: url("../img/dialog.png") no-repeat;
}
.juci_alert_dialog .juci_dialog_indicator{ background-position: 0 40%;}
.juci_info_dialog .juci_dialog_indicator{ background-position: -256px 40%;}
.juci_error_dialog .juci_dialog_indicator{ background-position: -320px 40%;}
.juci_warning_dialog .juci_dialog_indicator{ background-position: -448px 40%;}

Panels and dialog

Basecontrol

Text

Option

Button

List

Catalog

Searchbox

Timepicker

Photo and Attachments

Calendar

Flags and linkers

Generic colors

Actionbar