@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

* {

	font-family	: -apple-system, "Microsoft JhengHei", "Noto Sans TC", Arial Unicode MS, helvetica, arial, 'Open Sans', sans-serif  !important;
	font-weight: 500;
	letter-spacing:0.5px;

}

.macfont, .macfont * {

	font-family	: -apple-system, "Noto Sans TC", "Microsoft JhengHei", Arial Unicode MS, helvetica, arial, 'Open Sans', sans-serif  !important;
	font-weight: 300 !important;

}


.fa { font-family : FontAwesome !important; }


#pod_list { will-change:scroll-position; }
#message_pages { will-change:scroll-position; }


/* HYPER LINK */
A:link, A:visited, A:active, A:hover {
	font-size: 12pt;
	text-decoration: none;
	color: #2060e0;
}
A:hover {
	color: #00a0ff;
}

/* UNDERLINE HYPER LINK */
.UL:link, .UL:visited, .UL:active, .UL:hover {
	font-size: 12pt;
	text-decoration: underline;
	color: #0000FF
}
.UL:hover {
	color: #FF0000
}

/* MAIN ELEMENTS */
body {
	margin				: 0 0 0 0;
	background			: #bdbdbd; /* url(images/index_bkgnd.png) repeat-x;*/
}

body, div, span, p, button, tr, td, select, input, textarea, file, checkbox, radio, form, textarea, center, option, pre, br {
	font-size: 12pt;
	line-height: 130%;
	margin: 0 0 0 0;
}

input[type="text"], input[type="password"], textarea, select, file, checkbox, radio {
	border: 1px solid #008CD6;
	font-size: 11pt;
	background-color:white !important;
}

body {
	SCROLLBAR-HIGHLIGHT-COLOR: buttonface;
	SCROLLBAR-SHADOW-COLOR: buttonface;
	SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;
	SCROLLBAR-TRACK-COLOR: #eeeeee;
	SCROLLBAR-DARKSHADOW-COLOR: buttonshadow
}

img {
	border		: 0px;
}

input {
	PADDING-TOP: 1px;
	PADDING-BOTTOM: 1px;
	PADDING-RIGHT: 2px;
	PADDING-LEFT: 2px;
	line-height:100%;
}

form {
	margin: 0 0em 0px 0;
}



/* special fonts */
.header {
        font-size: 12pt;
        color: #c00000;
        text-decoration: underline;
}

.subheader {
        font-size: 12pt;
        color: #900000;
        text-decoration: underline;
}


.header_bar {
        background: #CADFE6; border: 1px solid #00698C; padding:10px;
        margin-left:-2px; margin-right:-2px; margin-bottom:20px;
        color: #00698C;
        font-size:12pt;
        border-radius: 6px;
    -webkit-border-radius: 6px;
        box-shadow: 0px 2px 8px #7B6B6B;
    -webkit-box-shadow: 0px 2px 8px #7B6B6B;
        -moz-box-shadow: 0px 2px 8px #7B6B6B;
        -o-box-shadow: 0px 2px 8px #7B6B6B;
}



/* TEXT & TABLE ELEMENTS */
.remark {
	color: red;
}
.footnote {
	font-size: 10pt;
	font-weight: normal;
	line-height: 100%;
	color: #808080;
}
.blur {
	color: #a0a0a0;
}
.highlight {
	color: green;
	background: yellow;
}

.table_background {
	background-color: #C09090;
}
.table_header, .table_header a {
	background-color: #fff040;
	color: #002010;
}
.table_subheader {
	background-color: #fff2b0;
	font-weight: normal;
	color: black;
}
.table_content {
	background-color: #fffef0;
	color: black;
	font-weight: normal;
}
.table_content2 {
	background-color: #fefe90;
	color: black;
	font-weight: normal;
}
.table_content3 {
	background-color: #C0eeff;
	color: black;
	font-weight: normal;
}


/* sync calling specific */

.pod_name {
	color:black;
	text-decoration: none;
}

.pod_name1 {
    color:#aa0000;
    text-decoration: none;
}

.pod_name2 {
    color:#008800;
    text-decoration: none;
}

.pod_excerpt {
	color:#888888;
	text-decoration: none;
}


#div_update_pod_button {
	padding-top:8px;
}


.top_banner {
	height	: 80px;
	width	: auto;
	background	: url(images/index_top_banner.png) no-repeat top center;
	margin-bottom	: 15px;
	cursor	: pointer;
	text-align	: center;
}

.pod_top {
	height	: 40px;
	width	: 100%;
	background	: #006f80;
	text-align	: center;
	color		: #ffffff;
	font-size	: 22px;
	padding		: 10px 0px 8px 0px;
	line-height	: 40px;
}

.pod_top > div {
	width		: 98%;
	margin		: 0 auto;
	font-size	: 22px;
	line-height	: 40px;
}

.pod_top > div > a {
	vertical-align : middle;
	display : table-cell;
}

.online_time {
	width		: 550px;
	min-height	: 20px;
	font-weight	: normal;
	text-align	: center;
	color		: darkgrey;
	padding		: 2px 0px 2px 8px;
	overflow	: auto;
	background	: #ffffff;
	border		: solid 1px #cccccc;
	margin-bottom	: 12px;
}

.pod_notice {
	width		: 398px;
	min-height	: 40px;
	text-align	: left;
	color		: black;
	padding		: 6px 0px 10px 60px;
	overflow	: auto;
	word-wrap	: break-word;
	border		: solid 1px #cccccc;
	margin-bottom	: 12px;
}

.pod_middle {
	width	: 100%;
	padding		: 5px 0px 0px 0px;
}

.pod_bottom {
	height	: 10px;
	width	: 100%;
}

.pod_message {
	min-height	: 80px;
	text-align	: center;
	padding		: 20px 10px 20px 10px;
}






.podlist_top {
	height	: 30px;
	width	: 100%;
	background	: url(images/pod_top.png) no-repeat;
	text-align	: center;
	text-shadow	: #333333 1px 1px 2px;
	color		: #ffffff;
	font-size	: 22px;
	padding		: 10px 0px 8px 0px;
	line-height	: 30px;
}

.podlist_top > div {
	width		: 98%;
	margin		: 0 auto;
	font-size	: 22px;
}

.podlist_top > div > a {
	vertical-align : middle;
	display : table-cell;
}

.podlist_middle {
	width	: 100%;
	background	: url(images/pod_bkgnd.png) repeat-y;
	padding		: 5px 0px 0px 0px;
}

.podlist_bottom {
	height	: 10px;
	width	: 100%;
	background	: url(images/pod_bottom.png) no-repeat;
}

.podlist_message {
	min-height	: 80px;
	text-align	: center;
	padding		: 20px 10px 20px 10px;
	background	: url(images/pod_bkgnd.png) repeat-y;
}








.pod_system_message {
	background-color : #EFF3FF;
	border-bottom: 1px solid #ccccdd;
}

.pod_normal_message {
	border-bottom: 1px solid #ccccdd;
}

.pod_my_new_message {
	background-color : #ffffcc;
}

.pod_top a {
	color		: #ffffff;
}


#pod_title {
	margin		: 0 auto;
	width		: 280px;
	font-size	: 22px;
}


.shadow {
	text-shadow	: #333333 1px 1px 2px;
}

.login_input_div {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("images/index_login_bkgnd.png");
    background-position: 0 0;
    background-repeat: repeat;
    height: 225px;
    width: 470px;
    margin-top:50px;
}
.login_input_name {
	color: #ffffff;
    font-size: 20px;
    font-weight: normal;
    padding-bottom: 0;
    padding-left: 30px;
    padding-right: 0;
    padding-top: 20px;
}
#login_status {
    padding-right: 30px;
}
.login_input {
	color: #ffffff;
    margin-top: 35px;
}
.login_input span {
    color: #ffffff;
    display: inline-block;
    font-size: 15px;
    padding-right: 5px;
    text-align: right;
    width: 190px;
}
.login_input label {
    display: block;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
}
.login_input_text {
    height: 24px;
    line-height: 20px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    width: 180px;
}


.emoji_widget {
	width:440px;
	min-height:80px;
	padding:8px;
	text-align:left;
	line-height:33px;
	word-wrap: break-all;
	position:absolute;
	display:none;
}
.emoji_button {
	padding:3px 5px;
    margin-right:-4px;
	word-wrap:normal;
	white-space:nowrap;
}
.emoji_button img {
	border:0px;
	vertical-align:text-top;
}
.emoji_button:link, .emoji_button:visited {
	border:solid 1px #aaaaaa;
	color		: #333333;
}
.emoji_button:hover, .emoji_button:active {
	border:solid 1px #77aacc;
	color		: #333333;
}

.SI-FILES-STYLIZED label.cabinet
{
    width: 72px;
    height: 38px;
    background: url(images/camera_inactive.png) 0 0 no-repeat;

	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}





.left {
	float	: left;
}

.right {
	float	: right;
}

.center {
	margin	: 0 auto;
}

.clear {
	clear	: both;
}



.ios_button {
	width		: 33px;
	height		: 30px;
	margin		: 0px 4px;
	background	: URL(images/icon_bkgnd.png);
}

.ios_button_space {
	width		: 33px;
	height		: 30px;
	margin		: 0px 4px;
}

.main_content_margin {
	width		: 490px;
}

.main_content {
	width		: 480px;
}


/* Search Box */
.searchBox
{
	border: 0px solid #ffffff !important;
	float: left;
	margin: 0 0 0 10px;
	width: 190px;
	height: 23px;
	padding: 0 5px;
	background: url(./images/searchBox.gif) no-repeat 0 0
}
.btnSearch
{
	border: 0px;
	margin-right: 10px;
	float: left;
	width: 29px;
	height: 23px;
	cursor: pointer;
	background: url(./images/btnSearch.gif) no-repeat 0 0
}

.btnSearchClear
{
	border: 0px;
	margin-right: 0px;
	float: left;
	width: 24px;
	height: 23px;
	cursor: pointer;
	background: url(./images/search_clear_btn.gif) no-repeat 0 0
}




/* Corner radius */
.corner4px { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.corner6px { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -khtml-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; -khtml-border-top-right-radius: 6px; border-top-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; -khtml-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; -khtml-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.corner8px { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -khtml-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -khtml-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; -khtml-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; }
.corner10px { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -khtml-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-top-right-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; }
.corner12px { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; -khtml-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; -khtml-border-top-right-radius: 12px; border-top-right-radius: 12px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; -khtml-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; -khtml-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px; }
.corner16px { -moz-border-radius-topleft: 16px; -webkit-border-top-left-radius: 16px; -khtml-border-top-left-radius: 16px; border-top-left-radius: 16px; -moz-border-radius-topright: 16px; -webkit-border-top-right-radius: 16px; -khtml-border-top-right-radius: 16px; border-top-right-radius: 16px; -moz-border-radius-bottomleft: 16px; -webkit-border-bottom-left-radius: 16px; -khtml-border-bottom-left-radius: 16px; border-bottom-left-radius: 16px; -moz-border-radius-bottomright: 16px; -webkit-border-bottom-right-radius: 16px; -khtml-border-bottom-right-radius: 16px; border-bottom-right-radius: 16px; }


.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 16px; -webkit-border-top-left-radius: 16px; -khtml-border-top-left-radius: 16px; border-top-left-radius: 16px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 16px; -webkit-border-top-right-radius: 16px; -khtml-border-top-right-radius: 16px; border-top-right-radius: 16px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 16px; -webkit-border-bottom-left-radius: 16px; -khtml-border-bottom-left-radius: 16px; border-bottom-left-radius: 16px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 16px; -webkit-border-bottom-right-radius: 16px; -khtml-border-bottom-right-radius: 16px; border-bottom-right-radius: 16px; }





/********************************************************************************/
/*	Flex Class																	*/
/********************************************************************************/
.flex-row {
	display: -webkit-flex;
	-webkit-flex-direction: row;

	display:flex;
	flex-direction:row;

	-webkit-justify-content:flex-start;
	justify-content:flex-start;
}

.flex-column {
	display: -webkit-flex;
	-webkit-flex-direction: column;

	display:flex;
	flex-direction:column;

	-webkit-justify-content:flex-start;
	justify-content:flex-start;
}

.space-between {
	-webkit-justify-content: space-between; /* Safari 6.1+ */
	justify-content: space-between;
}

.space-around {
	-webkit-justify-content: space-around; /* Safari 6.1+ */
	justify-content: space-around;
}

.flex-justify-center {
	-webkit-justify-content: center;
	justify-content: center;
}

.flex-align-start {
	-webkit-align-self: flex-start; /* Safari 7.0+ */
	align-self: flex-start;
}

.flex-align-end {
	-webkit-align-self: flex-end; /* Safari 7.0+ */
	align-self: flex-end;
}

.flex-align-center {
	-webkit-align-self: center; /* Safari 7.0+ */
	align-self: center;
}


.flex-fill {
	-webkit-flex: 1 1 0; /* Safari 6.1+ */
	flex:1 1 0;
}

.accel3d {
	-webkit-transform:translateZ(0);
}