/**
 * Modern UI Library v1.0
----------------------------------------------------------------------------------------------------
 * Use wrap class
 * - [select] .select > select
 * - [input file] .file > input[type="file]
 * 
 * Unimplemented
 * - input file disabled style
 * 
 * Extended Class
 * - [Button List] .buttonlist
 * - [Block Button List] .blockbuttonlist
 * - [Drop Down Button] .dropdown
----------------------------------------------------------------------------------------------------
 * Settings
----------------------------------------------------------------------------------------------------*/
/* Setting Margin */
fieldset,input,button,textarea,.select,.file{ margin:4px; }

/* Setting Text Color */
button,
[type="button"],
[type="reset"],
[type="submit"],
.select > select,
.file{
	color:white;
}

/* Setting Main Color */
button,
[type="button"],
[type="reset"],
[type="submit"],
.select,
.file,
[type="radio"]:checked + *::after{
	background-color:#337ab7;
}

/* Setting Hover Color */
button:hover,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover,
.select:hover,
.file:hover{
	background-color:#286090;
}

/* Setting Active Color */
button:active,
[type="button"]:active,
[type="reset"]:active,
[type="submit"]:active,
.file:active{
	background-color:#204d70;
}

/* Setting Effective Color */
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):hover,
textarea:hover{
	border-color:#66afe9;
}
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
[type="checkbox"]:not(:disabled):hover + *::before,
[type="radio"]:not(:disabled):hover + *::before{
	border-color:#66afe9;
	box-shadow:0 0 8px #66afe9;
}

/* Setting Border Color */
fieldset{
	border:1px solid #ccc;
}
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
textarea{
	background-color:white;
	border:1px solid #ccc;
}
[type="checkbox"] + *::before,
[type="radio"] + *::before{
	background-color:white;
	border:2px solid #ccc;
}

/**
 * Standard Interfaces
----------------------------------------------------------------------------------------------------*/
/* common */
input,button,textarea,select,option{
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	box-sizing:border-box;
}

/* fieldset */
fieldset{
	margin-left:0;
	margin-right:0;
	padding:6px 12px;
	border-radius:4px;
}

/* text */
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
textarea{
	vertical-align:middle;
	border-radius:4px;
	padding:6px 12px;
	transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input:disabled:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
textarea:disabled{
	cursor:not-allowed;
	opacity:0.5;
}
textarea{
	display:block;
	width:100%;
	min-height:10em;
}

/* button */
button,
[type="button"],
[type="reset"],
[type="submit"],
.file{
	cursor:pointer;
	vertical-align:middle;
	border:none;
	border-radius:4px;
	padding:6px 12px;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled{
	cursor:not-allowed;
	opacity:0.5;
}

/* file only */
.file{
	position:relative;
	display:inline-block;
}
.file > [type="file"]{
	opacity:0;
	position:absolute;
	right:0;
	top:0;
	margin:0;
	font-size:0;
}

/* image */
[type="image"]{ vertical-align:middle; }
[type="image"]:disabled{
	opacity:.5;
	cursor:not-allowed;
}

/* checkbox radio */
[type="checkbox"],
[type="radio"]{
	opacity:0;
	padding:6px 12px;
	vertical-align:middle;
}
[type="checkbox"] + *,
[type="radio"] + *{
	vertical-align:middle;
	padding:6px 12px;
	position:relative;
}
[type="checkbox"] + *::before,
[type="checkbox"] + *::after,
[type="radio"] + *::before,
[type="radio"] + *::after{
	content:'';
	displayt:block;
	position:absolute;
	top:50%;
	left:0;
}
[type="checkbox"] + *::before,
[type="radio"] + *::before{
	width:12px;
	height:12px;
	margin-top:-8px;
	margin-left:-8px;
	transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="radio"] + *::before{ border-radius:50%; }
[type="checkbox"] + *::after{
	height:24px;
	width:24px;
	margin-top:-16px;
	margin-left:-8px;
}
[type="radio"] + *::after{
	width:8px;
	height:8px;
	margin-top:-4px;
	margin-left:-4px;
	border-radius:50%;
}
[type="checkbox"]:checked + *::after{
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMJJREFUeNpiYBgFwwoYV22fD8LIYkzUNBxIJYAwkN1PVQuQDIeBi1SzAGh4AprhiWfbPBfAOIxUMHw+LsMpsoAYw8m2AGi4AZDaD8QC+AwnywJSDCc5krEYXojPcJJ8ADQcZOh5IFaACi0AGp5ISB8LmutAkTYR3VVQw/eTaji2IAIZMB+aQtANNyDVcBQLgJougMIUykW2ZD65hmONA7T0/YCcYCEYyVjKFrIMx5uKkCwh23CUVIQFFKLRo4A2ACDAAKYDWd9b3WhVAAAAAElFTkSuQmCC'); /* 24x24 checked icon */
	background-repeat:no-repeat;
	background-position:left center;
}
[type="checkbox"]:disabled + *,
[type="radio"]:disabled + *{
	opacity:.5;
	cursor:not-allowed;
}

/* select */
.select{
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGZJREFUeNpiYqAxYBq1YNSCUQvwW/D////z/wmD82TbDtQsAMTv8RgOkhMg2weMjIwfgJQjEH/AIg2Wg6qhDABdmYDF9QlUjSyggQ1IhjfQJEUADZ4PwgyDCYzm5FELRi1gYAAIMADZw36V9Rv1AAAAAABJRU5ErkJggg=='); /* 24x24 white arrow */
	background-repeat:no-repeat;
	background-position:right center;
	overflow: hidden;
	display:inline-block;
	vertical-align:middle;
	border-radius:4px;
	padding-right:24px;
}
.select > select{
	cursor:pointer;
	vertical-align:middle;
	background:transparent;
	border:none;
	padding:6px 12px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
@-moz-document url-prefix(){
	.select{ padding-right:0; } /* icon size */
	.select > select{ padding:0 12px; } /* Firefox padding bug */
}
.select > select > option{
	padding:6px 12px;
	display:block;
}
.select > select:disabled{
	cursor:not-allowed;
	opacity:0.5;
}
/* if IE(not support CSS3 appearance)
.select > select{
	width:150%\9;
	height:100%\9;
}
.select > select > option{ width:66.6%\9; }
*/


/**
 * Extended Interfaces
----------------------------------------------------------------------------------------------------*/
/* Horizontal UI List */
.huilist{
	display:-moz-box;
	display:-webkit-box;
	display:box;
	margin:4px;
	padding:0;
	border:0;
}
.huilist > *{
	margin:0;
	border-radius:0;
	position:relative;
}
.huilist > *:hover{ z-index:1; }
.huilist > *:first-child{ border-radius:4px 0 0 4px; }
.huilist > *:last-child{ border-radius:0 4px 4px 0; }
.huilist > *:not(:first-child){ border-left:1px solid #ccc; }
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + *{
	border-left-width:0;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-right-width:0;
	border-left-width:0;
	border-radius:0;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):first-child{
	border-left-width:1px;
	border-radius:4px 0 0 4px;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-left-width:1px;
}
.huilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):last-child{
	border-right-width:1px;
	border-radius:0 4px 4px 0;
}

/* Vertical UI List */
.vuilist{
	display:block;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	margin:4px;
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	padding:0;
	border:0;
}
.vuilist > *{
	margin:0;
	border-radius:0;
	position:relative;
}
.vuilist > *:hover{ z-index:1; }
.vuilist > *:first-child{ border-radius:4px 4px 0 0; }
.vuilist > *:last-child{ border-radius:0 0 4px 4px; }
.vuilist > *:not(:first-child){ border-top:1px solid #ccc; }
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + *{
	border-top-width:0;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-bottom-width:0;
	border-top-width:0;
	border-radius:0;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):first-child{
	border-top-width:1px;
	border-radius:4px 4px 0 0;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) + input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]){
	border-top-width:1px;
}
.vuilist > input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):last-child{
	border-bottom-width:1px;
	border-radius:0 0 4px 4px;
}