/*  MICROTHEMER STYLES  */

/*= Animations ================ */


/*= Page Index ================ */

/** Page Index >> Body **/
.home {
	background-color: rgb(255, 255, 255);
	padding-right: 16px;
	padding-left: 16px;
}

/** Page Index >> Header **/
.home #header {
	display: none;
}

/** Page Index >> Post edit link **/
.home .post-edit-link {
	display: none;
}

/** Page Index >> Entry title **/
.home .entry-title {
	font-size: 24px;
	text-align: left;
	margin-top: 16px;
	margin-bottom: 16px;
}

/** Page Index >> Entry content unordered list **/
.home .entry-content ul {
	margin-bottom: 32px;
}

/** Page Index >> Entry content list item **/
.home .entry-content li {
	list-style-type: disc;
	list-style-position: inside;
	margin-top: 4px;
	margin-bottom: 4px;
}


/*= Display =================== */

/** Display >> body **/
body {
	font-family: "Open Sans", "Microsoft JhengHei", "PingFangHK-Regular", "Heiti TC";
	margin: 0;
	overflow: hidden;
}

/** Display >> .screen16to9 **/
.screen16to9 {
	background-color: rgb(238, 238, 238);
	width: 100vw;
	height: 56.25vw;
}

/** Display >> .topbar **/
.topbar {
	background-color: rgb(255, 255, 255);
	height: 8.25vw;
	box-sizing: border-box;
	padding-top: 0.75vw;
}

/** Display >> .logo **/
.logo {
	vertical-align: top;
	height: 5vw;
	margin-left: 3vw;
	position: relative;
	top: 1.25vw;
	display: inline;
}

/** Display >> .logo img **/
.logo img {
	vertical-align: top;
	height: 5vw;
	max-height: 5vw;
}

/** Display >> .arrows **/
.arrows {
	vertical-align: top;
	width: 4vw;
	height: 6vw;
	margin-right: 1vw;
	margin-left: 2vw;
	position: relative;
	top: 0.75vw;
	display: inline-block;
}

/** Display >> .head_text **/
.head_text {
	font-size: 4vw;
	line-height: 4vw;
	font-weight: bold;
	vertical-align: top;
	position: relative;
	top: 1.5vw;
	display: inline-block;
}

/** Display >> .queue_item **/
.queue_item {
	font-size: 6.5vw;
	line-height: 8.25vw;
	font-weight: 500;
	text-align: center;
	vertical-align: text-bottom;
	width: 18.8vw;
	height: 8.4vw;
	margin-top: 1vw;
	margin-left: 1vw;
	border-radius: 1.5vw;
	float: left;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-o-transition-property: background-color, color;
	-moz-transition-property: background-color, color;
	-webkit-transition-property: background-color, color;
	transition-property: background-color, color;
	-o-transition-duration: 2s, 2s;
	-moz-transition-duration: 2s, 2s;
	-webkit-transition-duration: 2s, 2s;
	transition-duration: 2s, 2s;
	display: inline-block;
	-webkit-animation-duration: 2s !important;
	-o-transition-property: background-color, color !important;
	-moz-transition-property: background-color, color !important;
	-webkit-transition-property: background-color, color !important;
	-o-transition-duration: 2s, 2s !important;
	-moz-transition-duration: 2s, 2s !important;
	-webkit-transition-duration: 2s, 2s !important;
}

/** Display >> .new_item **/
.new_item {
	color: rgb(255, 255, 255);
	background-color: rgb(165, 69, 69);
	-webkit-animation-name: item_created;
	animation-name: item_created;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-name: item_created;
	-webkit-animation-duration: 2s;
	-webkit-animation-delay: 1s;
}

/** Display >> .expired_item **/
.expired_item {
	color: rgb(255, 255, 255);
	-o-transition-property: color;
	-moz-transition-property: color;
	-webkit-transition-property: color;
	transition-property: color;
	-o-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-webkit-transition-duration: 2s;
	transition-duration: 2s;
}

/** Display >> .input_div (Testing Only) **/
.input_div {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: -1;
}

/** Display >> body.input_panel **/
body.input_panel {
	background-color: rgb(238, 238, 238);
}

/** Display >> .attention **/
.attention {
	margin-right: 2vw;
	float: right;
	display: inline-block;
}

/** Display >> .point_right **/
.point_right {
	display: none;
}


/*= Full System =============== */

/** Full System >> .screen_full **/
.screen_full {
	background-color: rgb(238, 238, 238);
	width: 100vw;
	overflow: hidden;
}

/** Full System >> .curr_orders **/
.curr_orders {
	margin-left: 4vw;
}

/** Full System >> .queue_item_small **/
.queue_item_small {
	font-size: 4vw;
	line-height: 6.15vw;
	font-weight: 500;
	text-align: center;
	vertical-align: text-bottom;
	width: 11.375vw;
	height: 6.25vw;
	margin-top: 1vw;
	margin-left: 1vw;
	border-radius: 1vw;
	float: left;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-o-transition-property: background-color, color;
	-moz-transition-property: background-color, color;
	-webkit-transition-property: background-color, color;
	transition-property: background-color, color;
	-o-transition-duration: 2s, 2s;
	-moz-transition-duration: 2s, 2s;
	-webkit-transition-duration: 2s, 2s;
	transition-duration: 2s, 2s;
	display: inline-block;
	cursor: pointer;
}

/** Full System >> .sys_input_div_inner **/
.sys_input_div_inner {
	width: 48.5vw;
	padding-top: 1vw;
	margin-left: 1vw;
	float: left;
	display: inline-block;
}

/** Full System >> .prefix_input_2 **/
.prefix_input_2 {
	color: rgb(195, 23, 46);
	font-size: 3vw;
	text-align: center;
	width: 4.85vw;
	height: 4.85vw;
	box-sizing: border-box;
	float: left;
}

/** Full System >> .num_input_2 **/
.num_input_2 {
	color: rgb(195, 23, 46);
	font-size: 3vw;
	text-align: center;
	width: 19.4vw;
	height: 4.85vw;
	box-sizing: border-box;
	float: left;
}

/** Full System >> .num_btn_2 **/
.num_btn_2 {
	font-size: 2vw;
	width: 4.85vw;
	height: 4.85vw;
	padding: 0;
	float: left;
	cursor: pointer;
}

/** Full System >> .sys_input_div_inner_4 **/
.sys_input_div_inner_4 {
	padding-top: 1vw;
	margin-left: 1vw;
	float: left;
	display: inline-block;
}

/** Full System >> .prefix_input_4 **/
.prefix_input_4 {
	font-size: 3vw;
	text-align: center;
	width: 4.85vw;
	height: 4.85vw;
	box-sizing: border-box;
	float: left;
}

/** Full System >> .num_input_4 **/
.num_input_4 {
	font-size: 3vw;
	text-align: center;
	width: 18.9vw;
	height: 4.85vw;
	box-sizing: border-box;
	margin-right: 1vw;
	margin-bottom: 1vw;
	float: left;
	cursor: pointer;
}

/** Full System >> .num_btn_4 **/
.num_btn_4 {
	font-size: 2vw;
	width: 6.533333333vw;
	height: 6.533333333vw;
	padding: 0;
	float: left;
	cursor: pointer;
}

/** Full System >> .curr_prefix_input, .curr_num_input **/
.curr_prefix_input, 
.curr_num_input {
	color: rgb(195, 23, 46);
}

/** Full System >> .queue_item_4 **/
.queue_item_4 {
	font-size: 3.6vw;
	line-height: 5.65vw;
	font-weight: 500;
	text-align: center;
	vertical-align: text-bottom;
	width: 11.375vw;
	height: 5.65vw;
	margin-top: 1vw;
	margin-left: 1vw;
	border-radius: 1vw;
	float: left;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-o-transition-property: background-color, color;
	-moz-transition-property: background-color, color;
	-webkit-transition-property: background-color, color;
	transition-property: background-color, color;
	-o-transition-duration: 2s, 2s;
	-moz-transition-duration: 2s, 2s;
	-webkit-transition-duration: 2s, 2s;
	transition-duration: 2s, 2s;
	display: inline-block;
	cursor: pointer;
}


/*= Media Lower Left ========== */

/** Media Lower Left >> .config_media_lowerleft .topbar **/
.config_media_lowerleft .topbar {
	width: 83.3333vw;
	height: 9.375vw;
	box-sizing: border-box;
	padding-top: 1vw;
	position: absolute;
	top: 0;
	z-index: 999999999999;
}

/** Media Lower Left >> .config_media_lowerleft .logo img **/
.config_media_lowerleft .logo img {
	height: 5.5vw;
}

/** Media Lower Left >> .config_media_lowerleft .arrows **/
.config_media_lowerleft .arrows {
	height: 5.5vw;
}

/** Media Lower Left >> .config_media_lowerleft .head_text **/
.config_media_lowerleft .head_text {
	font-size: 3.3333vw;
	line-height: 3.75vw;
}

/** Media Lower Left >> .config_media_lowerleft .queue_items **/
.config_media_lowerleft .queue_items {
	width: 16.6667vw;
	height: 56.25vw;
	box-sizing: border-box;
	padding-top: 2vw;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 9999999999999;
}

/** Media Lower Left >> .config_media_lowerleft .queue_item **/
.config_media_lowerleft .queue_item {
	font-size: 5vw;
	line-height: 6.875vw;
	width: 13.6667vw;
	height: 7.0416vw;
	margin: 0 1.5vw 2vw 1.5vw;
}

/** Media Lower Left >> .config_media_lowerleft .media_player **/
.config_media_lowerleft .media_player {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 83.3333vw;
	height: 46.875vw;
	box-sizing: border-box;
	position: absolute;
	top: 9.375vw;
}

/** Media Lower Left >> .config_media_lowerleft **/
.config_media_lowerleft {
	width: 100vw;
	height: 56.25vw;
	box-sizing: border-box;
}

/** Media Lower Left >> .config_media_lowerleft .point_down **/
.config_media_lowerleft .point_down {
	display: none;
}

/** Media Lower Left >> .config_media_lowerleft .point_right **/
.config_media_lowerleft .point_right {
	display: inline-block;
}


/*= Media Portrait ============ */

/** Media Portrait >> .config_media_portrait **/
.config_media_portrait {
	width: 100vw;
	height: 177.777vw;
	box-sizing: border-box;
}

/** Media Portrait >> .config_media_portrait .topbar **/
.config_media_portrait .topbar {
	width: 100vw;
	height: 23vw;
	box-sizing: border-box;
	padding-top: 1vw;
	z-index: 999999999999;
}

/** Media Portrait >> .config_media_portrait .logo **/
.config_media_portrait .logo {
	text-align: center;
	width: 100vw;
	height: auto;
	margin: 0;
	display: block;
}

/** Media Portrait >> .config_media_portrait .logo img **/
.config_media_portrait .logo img {
	height: 12vw;
	max-height: none;
	margin-bottom: 1.5vw;
}

/** Media Portrait >> .config_media_portrait .arrows **/
.config_media_portrait .arrows {
	width: 6vw;
	height: 9vw;
	margin-left: 7.5vw;
}

/** Media Portrait >> .config_media_portrait .head_text **/
.config_media_portrait .head_text {
	font-size: 5.5vw;
	line-height: 3.75vw;
}

/** Media Portrait >> .config_media_portrait .queue_items **/
.config_media_portrait .queue_items {
	width: 100vw;
	height: 98.527vw;
	box-sizing: border-box;
	padding-top: 2vw;
	right: 0;
	z-index: 9999999999999;
}

/** Media Portrait >> .config_media_portrait .queue_item **/
.config_media_portrait .queue_item {
	font-size: 10vw;
	line-height: 13.6vw;
	width: 30.3333vw;
	height: 13.95vw;
	margin: 0 1.5vw 2vw 1.5vw;
}

/** Media Portrait >> .config_media_portrait .media_player **/
.config_media_portrait .media_player {
	background-color: rgb(133, 25, 25);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	height: 56.25vw;
	box-sizing: border-box;
	position: relative;
	display: block;
}

/** Media Portrait >> .config_media_portrait .screenback **/
.config_media_portrait .screenback {
	width: 100vw;
	height: 177.777vw;
	box-sizing: border-box;
	position: absolute;
	top: 0;
}

/** Media Portrait >> .config_media_portrait .point_down **/
.config_media_portrait .point_down {
	margin-top: -2vw;
}

/** Media Portrait >> .config_media_portrait  .attention **/
.config_media_portrait  .attention {
	width: 100vw;
	display: block;
}

/** Media Portrait >> #wpadminbar **/
#wpadminbar {
	display: none;
}


/*= One Line ================== */

/** One Line >> .config_nomedia_1875vw **/
.config_nomedia_1875vw {
	background-color: rgb(128, 149, 25);
	width: 100vw;
	height: 18.75vw;
	box-sizing: border-box;
}

/** One Line >> .config_nomedia_1875vw .screenback **/
.config_nomedia_1875vw .screenback {
	background-color: rgb(255, 255, 255);
	background-image: url("/html-site/logo-cbt.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 12vw;
	height: 18.75vw;
	position: absolute;
	top: 0;
}

/** One Line >> .config_nomedia_1875vw .topbar **/
.config_nomedia_1875vw .topbar {
	width: 100vw;
	height: 8vw;
	padding-top: .5px;
	position: absolute;
	top: 0;
	z-index: 999999999999;
	display: none;
}

/** One Line >> .config_nomedia_1875vw .queue_item **/
.config_nomedia_1875vw .queue_item {
	height: 8.25vw;
	margin-top: 0.75vw;
}

/** One Line >> .config_nomedia_1875vw .queue_items **/
.config_nomedia_1875vw .queue_items {
	background-color: rgba(255, 255, 255, 0.8);
	height: 18.75vw;
}