﻿/* tight table，相當於 cellpadding=0及cellspacing=0 */
table.tight
{
    border-collapse: collapse;
    border-spacing : 0;
}

/* 有指定圖片方框的最外層 table */
.frameBorder
{
    width : 100%;
}

/* IE11 的 bug */
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active)
{
    .frameBorder{
        table-layout:fixed;
    }
}

table.tight > tbody > tr > td {
    padding: 0;
}

/*Useful*/
table.borderless
{
    border : none 0px;
}

table.borderless > tbody > tr > td
{
    border : none 0px;
}

/* 無邊、無padding、無margin的Table */
table.noBorderNoPadding
{
    border-style: none;
    border-width: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table.noBorderNoPadding tr td
{
    padding : 0px 0px 0px 0px;
}

/* 無邊、無padding、無margin的Table */
table.noBorderNoPadding2
{
    border-style: none;
    border-width: 0px;
    border-collapse: collapse;
}

table.noBorderNoPadding2 tr td
{
    padding : 0px 0px 0px 0px;
}

/* 文字標題 */
table.textTitle_fadeUnderline
{
	font-size: 18px;
	font-weight:bold;
	border-style: none;
	border-width: 0px;
	border-collapse: collapse;
}

table.textTitle_fadeUnderline td
{
	border-bottom-style : solid;
	border-bottom-width : 2px;
	border-left-style : solid;
	border-left-width : 10px;
}

table.textTitle_fadeUnderline td.TC
{
    font-family : 標楷體;
    letter-spacing : 3px;
    padding : 5px 30px 0px 0px;
}

table.textTitle_fadeUnderline td.English
{
    font-family : Arial;
    padding : 0px 30px 0px 0px;
}

.textTitle_simpleSmallText
{
    font-size : 10pt;
    font-family: 微軟正黑體;
    font-weight: 600;
}

.textTitle_simpleMiddleText
{
    font-size : 12pt;
    font-family: 微軟正黑體;
    font-weight: 600;
}

.textTitle_simpleLargeText
{
    font-size: 14pt;
    font-family: 微軟正黑體;
    font-weight: 600;
}

table.pictureTitle
{
	border-collapse: collapse;
}

table.pictureTitle td
{
	margin : 0px;
	padding : 0px;	
}

table.pictureTitle td img
{
    border : none 0px;
}

.verticalMiddle *
{
    
    vertical-align: middle;
}

.verticalMiddle > img
{
    margin-right : 10px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.warningOnError
{
    font-size : 2rem;
    font-weight : 900;
    color : #ff0000;
}

.smallError {
    color: #ff0000;
}

/* When showing top right edit icon */
.showEditIcon {
    position: relative;
}

/* Left bottom in place toggle display of edit icon */
.stopEditButton {
    position: sticky;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    z-index: 10;
}

/* Edit icon on each block at top right */
.editIcon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(255,255,255,0.5);
    padding: 3px;
    font-size: 10px;
    border-radius: 3px;
}

.editIconInPlace {
    background-color: rgba(255,255,255,0.5);
    padding: 3px;
    font-size: 10px;
    margin: 0 0 0 2em;
}

    .editIcon::before, .editIconInPlace::before, .editContentIcon::before {
        content: '✒️';
    }

.editContentIcon {
    position: absolute;
    top: 26px;
    right: 0;
    z-index: 10000;
    background-color: rgba(255,255,255,0.5);
    padding: 3px;
    font-size: 10px;
    border-radius: 3px;
}

    .editContentIcon::before {
        content: '📝';
    }

.editCssCode {
    background-color: rgba(255,255,255,0.5);
    padding: 3px;
    font-size: 10px;
    border-radius: 3px;
}

.editBanner {
    position: absolute;
    bottom : 0;
    right: 0;
    z-index: 10000;
    background-color: #b6ff00;
    border : solid 1px #808080;
    padding: 3px;
    font-size: 10px;
    border-radius: 3px;
}

.addNewContent {
    background-color: #b6ff00;
    border: solid 1px #808080;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
}

.styleLevel {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: aliceblue;
    padding: 3px 6px;
    font-size: 10px;
    border-radius: 3px;
    z-index : 1;
}

.styleLevelFlow {
    background-color: aliceblue;
    padding: 3px 6px;
    font-size: 10px;
    border-radius: 3px;
    margin : 5px 10px;
    display : inline-block;
}

