/* CSS FCUI - Fair Code User Interface 
 *
 * v1.0 - November 2012
 * 	- First Version
 * v1.1 - Oct 2015
 *	- Added different types of exclude for tooltip colours - unavailable (grey) and required (green)
 */

.ui {  }
.ui, .ui p, .ui h1, .ui h2, .ui h3, .ui h4, .ui h5, .ui h6, .ui ul, .ui li, .ui input, .ui select, .ui textarea, .ui img { /* quick reset */
				font-size:14px; line-height:1.4em; color:#6a6a6a; font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-align:left; 
				padding:0; margin:0; border:none; list-style-type:none;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor:default;  
				}

.ui .exclude { filter:alpha(opacity=60); opacity:0.6; cursor:default !important; }
/*.ui .exclude.required { filter:alpha(opacity=70); opacity:.7; cursor:default !important; }*/

.ui .instructions { position:relative; padding:0 1em .3em 1em; font-size:.9em; opacity:.8; }

.ui .selectlist { position:relative; display:block; }
.ui .selectlist li { position:relative; padding:.5em 1em .5em 1em; background:#f1f5f5; border-bottom:solid 1px #d8d8d8; cursor:pointer; }
.ui .selectlist li:hover { background:#f8f8f8; }
.ui .selectlist li.exclude:hover { background:#f1f5f5; }

.ui .selectlist li:first-child { -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; }
.ui .selectlist li:last-child { border-bottom:none; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; }
.ui .selectlist .selected,
.ui .selectlist .selected:hover{ background:#fff; color:#333; }
.ui .selectlist .selected:after { content:"✔"; position:absolute; right:.7em; top:.5em;
			color:#444; font-weight:bold; }

.ui .checkbox { position:relative; display:inline-block; cursor:pointer; color:#555; text-shadow:rgba(255,255,255, .9) 0 1px 0; }
.ui .checkbox:before {
			content:" "; position:relative; display:inline-block; width:1em; height:1.5em; vertical-align:middle; padding:.1em .3em .05em .4em; margin:0 .5em 0 0;
			font-weight:bold; color:#cbe1df; color:rgba(0,0,0, 0); text-shadow:none;
			border:solid 1px #bbb; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
			-webkit-box-shadow: inset 0px 1px 0px 0px #e2f3f1; box-shadow: inset 0px 1px 0px 0px #e2f3f1;
			background: #cbe1df; 
			}
.ui .checkbox:hover { color:#333; }
.ui .checkbox.exclude:hover { color:#555; }
.ui .checkbox:hover:before { background:#fff; }
.ui .checkbox.selected,
.ui .checkbox.selected.exclude.required:hover { color:#333; }
.ui .checkbox.selected:before,
.ui .checkbox.selected.exclude.required:hover:before { 
			content:"✔";
			color:#444; text-shadow:#fff 0 1px 0;
			border-color:#bbb; background:#fff;
			}
.ui .checkbox span { display:inline-block; vertical-align:middle; width:7em; }

.ui input.textfield { position:relative; width:100%; padding:.5em 1em .5em 1em;
			color:#333; font-style:normal;
			background:#fff;
			border:solid 1px #bdd1cf; border-top-color:#a2aead; border-bottom-color:#fff; 
			-moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
			}
.ui input.textfield.empty { color:#666; font-style:italic; background:#f1f5f5; }

.ui .cardlist { position:absolute; left:0; right:-2px; top:-2px; bottom:4em; overflow:hidden; -webkit-overflow-scrolling:touch;
			background:#d9efec; background:rgba(217,239,236, .3);
			border:solid 1px #d9eae8; border-top-color:#b5ccc9; border-bottom-color:#d9eae8; border-left-color:#c3dedb;
			-moz-border-radius:7px; -khtml-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;
			}
.ui .cardlist li { position:relative; padding:.5em 1em .5em 0; margin:1px 1px 2px 1px; background:#f1f5f5; cursor:pointer;
			-moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.ui .cardlist li:last-child { border-bottom:none; }	
.ui .cardlist li:hover{ background:#f8f8f8; } 
.ui .cardlist li .col_amount { position:relative; float:left; width:28px; padding:.12em 0 0 0; text-align:right; vertical-align:top;
			color:#333; font-size:1.3em; line-height:.8em; font-weight:bold; cursor:pointer; }
.ui .cardlist li .col_amount span { display:block; color:#444; font-size:10px; font-weight:normal; cursor:pointer; }
.ui .cardlist li .col_text { position:relative; float:left; width:80px; padding:0 0 0 0; margin:0 0 0 9px; vertical-align:top; cursor:pointer;
			font-size:.7em; line-height:1.4em; }
.ui .cardlist li .empty { position:relative; display:table; width:100%; height:1.2em; margin:0 0 0 1em; cursor:pointer;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ui .cardlist li .empty p { position:relative; display:table-cell; text-align:left; vertical-align:middle; font-size:10px; color:#bdd1cf; cursor:pointer; }
.ui .cardlist .selected,
.ui .cardlist .selected:hover { background:#fff; }

.ui .roundbutton { position:relative; display:block; width:.8em; height:.8em; margin:0 auto; cursor:pointer; 
			color:#1a1a1a; font-size:3.4em; font-weight:bold; text-align:center; text-shadow:rgba(255,255,255, 1) 0 1px 0;
			-webkit-box-shadow: 0px -1px 0px 0px #fff; box-shadow: 0px -1px 0px 0px #fff;
			-moz-border-radius:50%; -khtml-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; }
.ui .roundbutton:after { content:""; position:absolute; left:0; right:0; top:0; bottom:0;
			-webkit-box-shadow: 0px 1px 0px 0px #9aafad; box-shadow: 0px 1px 0px 0px #9aafad;
			-moz-border-radius:50%; -khtml-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; }
.ui .roundbutton .label { position:absolute; width:100%; bottom:-50%; margin-bottom:-.8em; text-align:center; 
			color:#333; font-size:.2em; font-weight:bold;  }
.ui .roundbutton .plus_sign { position:absolute; left:50%; top:50%; margin:-.21em 0 0 -.29em; }
.ui .roundbutton .minus_sign { position:absolute; width:.44em; height:.12em; left:50%; top:50%; margin:-.085em 0 0 -.22em;
			background:#1a1a1a; border-bottom:solid 1px #fff; }

.ui .counter { position:relative; display:block; height:1em; margin:.2em auto .22em auto; overflow:hidden; cursor:default;
			color:#111; /*font-size:3.6em;*/font-size:50px; line-height:1em; text-align:center; text-shadow:rgba(255,255,255, .7) 0 1px 0;
			font-family:'CenturyGothicBold', Arial, Helvetica, sans-serif; }
/*.ui .units { position:relative; display:block; color:#333; font-size:10px; text-transform:uppercase; margin:0 auto 1em auto;
			font-family:'CenturyGothicBold', Arial, Helvetica, sans-serif; }*/

/* UI GRADIENTS */

/* unselected */

.ui .roundbutton {
			background: #d8ebe8;
			background: -moz-linear-gradient(top,  #d8ebe8 30%, #b9ccc9 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#d8ebe8), color-stop(100%,#b9ccc9));
			background: -webkit-linear-gradient(top,  #d8ebe8 30%,#b9ccc9 100%);
			background: -o-linear-gradient(top,  #d8ebe8 30%,#b9ccc9 100%);
			background: -ms-linear-gradient(top,  #d8ebe8 30%,#b9ccc9 100%);
			background: linear-gradient(to bottom,  #d8ebe8 30%,#b9ccc9 100%);
}

.ui .roundbutton:hover {
			background: #fff;
			background -moz-linear-gradient(top, #ffffff 50%, #dbdbdb 100%);
			background:-webkit-gradient(linear, left top, left bottom, color-stop(50%,#ffffff), color-stop(100%,#dbdbdb));
			background:-webkit-linear-gradient(top, #ffffff 50%,#dbdbdb 100%);
			background:-o-linear-gradient(top, #ffffff 50%,#dbdbdb 100%);
			background:-ms-linear-gradient(top, #ffffff 50%,#dbdbdb 100%);
			background:linear-gradient(to bottom, #ffffff 50%,#dbdbdb 100%);
			}

.ui .checkbox:before,
.ui .checkbox.exclude:hover:before {
			background: #cbe1df;
			background: -moz-linear-gradient(top,  #cbe1df 30%, #bbcfce 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#cbe1df), color-stop(100%,#bbcfce));
			background: -webkit-linear-gradient(top,  #cbe1df 30%,#bbcfce 100%);
			background: -o-linear-gradient(top,  #cbe1df 30%,#bbcfce 100%);
			background: -ms-linear-gradient(top,  #cbe1df 30%,#bbcfce 100%);
			background: linear-gradient(to bottom,  #cbe1df 30%,#bbcfce 100%);
			}

/* hover */
.ui .checkbox:hover:before { 
			background: #d7ecea;
			background: -moz-linear-gradient(top,  #d7ecea 30%, #c6d9d8 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#d7ecea), color-stop(100%,#c6d9d8));
			background: -webkit-linear-gradient(top,  #d7ecea 30%,#c6d9d8 100%);
			background: -o-linear-gradient(top,  #d7ecea 30%,#c6d9d8 100%);
			background: -ms-linear-gradient(top,  #d7ecea 30%,#c6d9d8 100%);
			background: linear-gradient(to bottom,  #d7ecea 30%,#c6d9d8 100%);
			}

/* selected */
.ui .checkbox.selected:before,
.ui .checkbox.selected.exclude.required:hover:before {
			background -moz-linear-gradient(top, #ffffff 50%, #dbdbdb 100%);
			background:-webkit-gradient(linear, left top, left bottom, color-stop(50%,#ffffff), color-stop(100%,#dbdbdb));
			background:-webkit-linear-gradient(top, #ffffff 50%,#dbdbdb 100%);
			background:-o-linear-gradient(top, #ffffff 50%,#dbdbdb 100%);
			background:-ms-linear-gradient(top, #ffffff 50%,#dbdbdb 100%);
			background:linear-gradient(to bottom, #ffffff 50%,#dbdbdb 100%);
			}


/*tooltip*/
.ui.fcui_tooltip { position:absolute; left:0; top:0; width:125px; height:auto; min-height:1em; margin:0; padding:.8em 1em .8em 1em; z-index:20;
			color:#fff; font-size:12px; line-height:1.3em; text-align:center; font-style:normal; font-weight:normal; letter-spacing:0;
			font-family:'CenturyGothicRegular', Arial, Helvetica, sans-serif; text-shadow:none; cursor:pointer;
			background:#444; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
			-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
			}
.ui.fcui_tooltip .small { font-size:10px; line-height:1.3em; }
.ui.fcui_tooltip:before { content:" "; position:absolute; display:block; width:0; height:0; left:50%; bottom:-30px; margin-left:-18px;
			border:18px solid transparent; border-top-color:#444; }
/* tooltip: unavailable */
.ui.fcui_tooltip.unavailable { color:#fff; background:#444; }
.ui.fcui_tooltip.unavailable:before { border-top-color:#444; }
/* tooltip: required */
.ui.fcui_tooltip.required { color:#fff; background:#090; }
.ui.fcui_tooltip.required:before { border-top-color:#090; }