/** Common Styles */

body {
	margin: 30px 0 20px 0;
	padding: 0;
	background: #D7D7BD url(../images/img01.png) repeat;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #000000;
}

input, select, textarea, button {
    border: 1px solid #BBBBBB;
    background: #fff;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
	padding: 10px;
	margin: 5px;
	font-size: 12pt;
}

h1, h2, h3 {
	padding: 0;
	margin: 0;
	color: #000000;
}

strong {
	color: #000000;
}

ul {
	margin: 0px;
	padding: 0;
}

a {
	color: #308AC0;
}

a:hover {
	text-decoration: none;
	color: #005880;
}


.center{
	text-align: center;
}

.width-20{
	width: 20px;
}
.width-36{
	width: 36px;
}
td.hover-background-red:hover{
	background: red;
	cursor: pointer;
}
td.hover-background-red:active{
	background: darkred !important;
}
td.hover-background-red:hover i{
	color: white;
}
td.hover-background-red:active i{
	position: relative;
	top: 1px;
}
td.hover-background-green:hover{
	background: green;
	cursor: pointer;
}
td.hover-background-green:active{
	background: darkgreen !important;
}
td.hover-background-green:hover i{
	color: white;
}
td.hover-background-green:hover i{
	color: white;
}
td.hover-background-green:active i{
	position: relative;
	top: 1px;
}



/*  media query */

@media screen and (min-width: 1680px){
.fb-like-box {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 30px;
  width: 970px !important;
  height: 220px !important;
  position: relative;
  z-index: 1002;
}

.fb-like > span {
  vertical-align: top !important;
  min-width: 190px !important;
  min-height: 22px !important;
  max-width: 175px !important;
  height: 22px !important;
}

.fb-like-box > span {
  vertical-align: top !important;
  min-width: 970px !important;
  min-height: 220px !important;
  max-width: 970px !important;
  height: 220px !important;
}

.fb-like > span > iframe {
  min-width: 190px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  max-width: 190px !important;
}

.fb-like-box > span > iframe {
  min-width: 970px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  max-width: 970px !important;
}
#wrapper {
	width: 1010px !important;
}
#fe_text{
  width: 70% !important;
}
.div-w{
	width: 970px !important;
}
#left {
	width: 570px !important;
}
#leftover{
	padding: 14px !important;
}
#right,#noadright{
	padding: 20px !important;
}
}


.div-w{
	width: 728px;
}
#left {
	width: 438px;
}
@media(min-width: 1200px), (min-height: 750px){
#left {
	width: 350px;
}
}
#leftover{
	padding: 14px;
	
}
#right,#noadright{
	padding: 14px;
}

.leftXXXL{
  left: -448px;
  width: 400px;
  height: 800px;
}
.leftXXL{
  left: -277px;
  width: 214px;
  height: 800px;
}
.leftXL{
  left: -348px;
  width: 300px;
  height: 600px;
}
.leftLL{
  left: -248px;
  width: 200px;
  height: 750px;
}
.leftL{
  left: -208px;
  width: 160px;
  height: 600px;
}
.leftM{
  left: -168px;
  width: 120px;
  height: 600px;
}
.leftS{
  display:none
}




/** Style for header starts here */

#header {
	height: 100px;
	margin: 0px auto;
	background: #FFAC16 url(../images/img03.jpg) ;
	position: relative;
}

#header h1, #header h2 {
	margin: 0px;
	padding: 0;
	/*text-transform: uppercase;*/
	font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
#header h1 a, #header h2 a {
  color: #FFFFFF;
}

#header h1 {
	float: left;
	margin: 35px 10px 10px 20px;
	font-size: 24pt;
}

#language{
	position:absolute;
	top:10px; right:10px;
}

#language_new{
	position: absolute;
	top: 102px; right:10px;
}
#language_new select{
	padding: 8px;
}

#addthis_toolbox{
	position:absolute;
	top:60px; right:6px;
}

#social_icon{
	position:absolute;
	top:20px; right:15px;
}

#social_icon img{
	border: 0px;
}

/** Style for menu starts here */

#menu {
	height: 50px;
	margin: 0px auto;
	background: #000000;
}

#menu ul {
	margin: 0px;
	padding: 0 0 0 20px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	border: none;
	background: url(../images/img05.jpg) no-repeat left 55%;
	padding: 14px 20px 10px 12px;
	text-decoration: none;
	color: #FFFFFF;
}

#menu a:hover {
	color: #D7D7BD;
}

#GoogleADRight{
	/*width: 336px;
	height: 280px;*/
}

/** Style for wrapper starts here */

#wrapper {
	width: 768px;
	margin: 0px auto;
	padding: 20px 0;
	background: #FFFFFF  repeat-y left top;
}

#fe_text{
  text-align:center;
  width: 85%;
  font-size: 1.8em;
}

#d_clip_button{
  text-align:center;
  padding-bottom: 10px;
}

.div-w{
	clear: both;
}
.div-m-t-20{
	margin: auto;
	margin-top: 20px;
}
.div-m-t-10{
	margin: auto;
	margin-top: 10px;
}
.div-m-10-0{
	margin: 10px 0;
}
.div-m-5-auto{
	margin: 5px auto;
}
.div-m-10-auto{
	margin: 10px auto;
}
.div-p-t-20{
	padding: 20px 0 0 0;
}
.div-p-t-10{
	padding: 10px 0 0 0;
}
.div-m-20-auto{
	margin: 20px auto;
}
.div-m-20-0{
	margin: 20px 0;
}
.div-m-0{
	margin: 0 auto;
}
.m-r-8{
	margin-right: 8px;
}
.none{
	display: none;
}
.ads-lh{
	line-height: 0px;
	overflow: hidden;
}
.text-c{
	text-align:center;
}
.toolbar{
	padding: 10px 0;
	font-size: 8pt;
	clear: both;
}
.dialog-big-icon{
	float:left;
	margin: 0.2em;
}

.h-line{
	/*text-transform: uppercase;*/
	font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 10px ;
	margin-top: 20px ;
	/*border-bottom: 1px #CCCCCC dashed;*/
}

/** Style for content starts here */

#content {
	position:relative;
}

#readmail {
	position: relative;
}

#duetime{
  text-align:center;
}

#left {
	float: left;
	margin-bottom:10px;
	min-height:320px;
}

#left ul {
	margin: 1em 1em;
	list-style: none;
}

#left li {
	padding-left: 15px;
	background: url(../images/img06.jpg) no-repeat 0 10px;
	line-height: 25px;
}

#leftover{
  position: fixed;
  background: #EDEDED;
}


#right {
	float: right;
	/*width: 336px;
	height: 280px;*/
	background: #EDEDED;
	text-align: center;
}

#right, #GoogleADRight{ width: 250px; height: 250px; }
#noadright { width: 250px; min-height:250px}
@media(min-width: 1200px), (min-height: 750px) {#right, #GoogleADRight{ width: 336px; height: 280px; } #noadright { width: 338px; min-height:280px}}


#noadright {
	float: right;
	text-align: center;
	background: #EDEDED;
	vertical-align: middle;
	position:relative;
}

#tabs {
	font-size: 12px;
	line-height: 20px;
}

#lang-table{
	background: #555555;
	font-size: 12px;
	color: #ffffff;
	padding: 20px 0;
}

#lang-table p{
	margin: 0px 20px;
	font-size: 12px;
}
#lang-table p a{
	color: #ffffff;
}
#lang-table p a.lang-selected{
	color: red;
}

#support-table{
	background: #cccccc;
	color: #111111;
	padding: 20px 0;
	text-align: center;
}
#support-table p{
	margin: 0px 20px;
}
#support-table p a{
	color: red;
}
/** Style for footer starts here */

#footer {
	clear: both;
	height: 38px;
	padding-top: 18px;
	border-top: 1px solid #444444;
	background: #000000;
	/*text-transform: uppercase;*/
	font-size: 12px;
	color: #E5E5CC;
}

#footer .copyright {
	float: left;
	margin: 0px;
	padding-left: 20px;
	text-align: center;
}

#footer a {
	border-bottom: 1px #E5E5CC dashed;
	text-decoration: none;
	color: #E5E5CC;
}

@media screen and (max-width: 1679px){
        #maillist { font-size: 12px; }
}

table {
  border-collapse: collapse;
}

#maillist ,#maillist td{
	border: 1px solid #CCC;
	border-collapse: collapse;
	table-layout:fixed;
	word-wrap: break-word; word-break: normal;
}
#maillist {
	border:none;
	border:1px solid #CCC;

	width: 100%;
}
#maillist thead th,
#maillist tbody th
{
	background: #FFF url(../images/th_bck.gif) repeat-x;
	color: #666;  
	padding: 10px;
	border-left: 1px solid #CCC;
}
#maillist tbody th
{
	background: #fafafb;
	border-top: 1px solid #CCC;
	text-align: left;
	/*font-weight: normal;*/
}
#maillist tbody tr td
{
	color: #666;
}
#maillist td > a:first-child:focus {
  outline: 0;
}
#maillist td > a:first-child {
  display: -webkit-box;
  display: flex;
  padding: 16px 10px;
  text-decoration: none;
  color: inherit;
  z-index: 0;
}
#maillist tr:hover,
#maillist tr:focus-within {
  outline: none;
}
#maillist td {
  position: relative;
  border-collapse:collapse;
}
#maillist tbody tr:hover
{
  background: #FFF url(../images/tr_bck.gif) repeat;
}

#maillist tbody tr:hover td
{
	color: #454545;
}
#maillist tfoot td,
#maillist tfoot th
{
	border-left: none;
	border-top: 1px solid #CCC;
	padding: 4px;
	background: #FFF url(../images/foot_bck.gif) repeat;
	color: #666;
}
#maillist caption
{
	text-align: left;
	font-size: 120%;
	padding: 10px 0;
	color: #666;
}
#maillist  a:link
{
	color: #666;
}
#maillist  a:visited
{
	color: #666;
}
#maillist  a:hover
{
	color: #003366;
	/*text-decoration: none;*/
}
#maillist  a:active
{
	color: #003366;
}


#message td,
#message 
{
	border: 1px solid #CCC;
	border-collapse: collapse;
	table-layout:fixed;
	word-wrap: break-word; word-break: normal;
}

#message
{
	border:none;
	border:1px solid #CCC;
	font-size:12px;
	width: 100%;
}

#message tbody th
{
	background: #fafafb;
	border-top: 1px solid #CCC;
	text-align: left;
	/*font-weight: normal;*/
}
#message tbody tr td.title
{
	text-align: right;
	padding: 10px;
	width:15%;
}
#message tbody tr td
{
	padding: 10px;
	color: #333;
}
#message caption
{
	text-align: left;
	font-size: 120%;
	padding: 10px 0;
	color: #666;
}
#message a:link
{
	color: #666;
}
#message a:visited
{
	color: #666;
}
#message a:hover
{
	color: #003366;
	/*text-decoration: none;*/
}
#message a:active
{
	color: #003366;
}

#tabs{
word-wrap: break-word; word-break: normal; 
}


.fb-like {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 30px;
  width: 190px !important;
  height: 22px !important;
  position: relative;
  z-index: 1002;
}


.layout-featured{
	width: 32.3333%;
	float: left;
	margin: 0 1% 0 0;
	padding: 0;
	min-height: 1px;
}
.layout-featured > h3{
	margin: 1em 0;
}
.layout-featured:nth-child(3n+1){
	clear: both;
}
.layout-featured:nth-child(3n+3){
	width: 33.3333%;
	margin: 0 0 0 0;
}
.no1{
	clear: both;
}
.no3{
	width: 33.3333%;
	margin: 0 0 0 0;
}

.featured-image{
	float: left;
	margin: 16px 5px 0 0;
}

@media screen and (max-width: 1679px){
.fb-like-box {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 30px;
  width: 728px !important;
  height: 220px !important;
  position: relative;
  z-index: 1002;
}

.fb-like > span {
  vertical-align: top !important;
  min-width: 190px !important;
  min-height: 22px !important;
  max-width: 175px !important;
  height: 22px !important;
}

.fb-like-box > span {
  vertical-align: top !important;
  min-width: 728px !important;
  min-height: 220px !important;
  max-width: 970px !important;
  height: 220px !important;
}

.fb-like > span > iframe {
  min-width: 190px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  max-width: 190px !important;
}

.fb-like-box > span > iframe {
  min-width: 728px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  max-width: 728px !important;
}
}

.daveA{
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -ms-transition-origin: bottom;
  -moz-transition-origin: bottom;
  -o-transition-origin: bottom;
  -webkit-transform:rotateX(-15deg);
  -webkit-transition: all .2s ease-in-out;    
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: transform .2s ease-in-out;
  -moz-transform: rotateX(-15deg);
  -o-transform: rotateX(-15deg);
  -ms-transform: rotateX(-15deg);
  transform: rotateX(-15deg);   
}
.daveB{
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -ms-transition-origin: bottom;
  -moz-transition-origin: bottom;
  -o-transition-origin: bottom;
  -webkit-transform:rotateX(-25deg);
  -webkit-transition: all .5s ease-in-out;    
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: transform .5s ease-in-out;
  -moz-transform: rotateX(-25deg);
  -o-transform: rotateX(-25deg);
  -ms-transform: rotateX(-25deg);
  transform: rotateX(-25deg);    
}
.dave{
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -ms-transition-origin: bottom;
  -moz-transition-origin: bottom;
  -o-transition-origin: bottom;
  -webkit-transform:rotateX(-5deg);
  -webkit-transition: all .3s ease-in-out;    
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: transform .3s ease-in-out;
  -moz-transform: rotateX(-5deg);
  -o-transform: rotateX(-5deg);
  -ms-transform: rotateX(-5deg);
  transform: rotateX(-5deg);
}

#noadimg {
  margin: 1em;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all .5s ease-in-out;
  -webkit-perspective: 2000;
  -ms-transform-style: preserve-3d;
  -ms-transition: all .5s ease-in-out;
  -ms-perspective: 2000px;
  -o-transform-style: preserve-3d;
  -o-transition: all .5s ease-in-out;
  -o-perspective: 2000;
  -moz-transform-style: preserve-3d;
  -moz-transition: all .5s ease-in-out;
  -moz-perspective: 2000;
  transform-style: preserve-3d;
  transition: all .5s ease-in-out;
  perspective: 2000;
  position:relative;
}

span.stretch {
    display:inline-block;
    -webkit-transform:scale(0.5,1); /* Safari and Chrome */
    -moz-transform:scale(0.5,1); /* Firefox */
    -ms-transform:scale(0.5,1); /* IE 9 */
    -o-transform:scale(0.5,1); /* Opera */
    transform:scale(0.5,1); /* W3C */
}

.li_dot{
	word-break:break-all;
	background: url(../images/img06.jpg) no-repeat left 55%;
	padding-left: 12px;
}

.break-all{
	word-break:break-all;	
}


.abgne_tab {
	clear: left;
	width: 100%;
	margin: 10px 0;
}
ul.tabs {
	width: 100%;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
}
ul.tabs li {
	float: left;
	height: 31px;
	line-height: 31px;
	overflow: hidden;
	position: relative;
	margin-bottom: -1px;
	border: 1px solid #999;
	border-left: none;
	background: #e1e1e1;
}
ul.tabs li a {
	display: inline-flex;
	padding: 0 10px;
	color: #000;
	border: 1px solid #fff;
	text-decoration: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
ul.tabs li.active  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
ul.tabs li.active a:hover {
	background: #fff;
}
div.tab_container {
	clear: left;
	width: 100%;
	border: 1px solid #999;
	border-top: none;
	background: #fff;
}
div.tab_container .tab_content {
	padding: 20px 15px 40px 15px;
	overflow: auto; 
}
.mail_header{
	padding: 20px 20px 0 20px;
}
.mail_gravatar{
	float: left;
	margin-right: 10px;
}
.mail_from{
	font-size: 120%;
}
.mail_headerinfo{
	padding: 5px;
}
div.tab_container .tab_content h2 {
	margin: 0 0 20px;
}
.sec_tab {
	width: 600px;
}
.att_file{
	float: left;
	width: 104px;
	height: 120px;
	margin: 10px 10px 10px 0;
	text-align: center;
}

.att_file p{
	font-size: 10pt;
	margin-top: 5px;
	overflow: hidden;
	white-space: nowrap;
}

.att_box{
	width: 104px;
	height: 104px;
	border-color:#999;
	border-style:solid;
	border-width:1px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.att_file .att_box img{
	max-width: 80px;
	max-height: 80px;
	min-width: 48px;
	min-height: 48px;
	margin: 5px auto;
}
.emoji{
	margin: 0 1px;
	max-width: 24px;
	max-height: 24px;
}

.ui-button .ui-button-text {
	line-height: 2em !important;
}

.table-padding-5 td {
	padding: 5px;
}

#sendmail li {
	padding-left: 15px;
	background: url(../images/img06.jpg) no-repeat 0 10px;
	line-height: 25px;
}
#sendmail ul {
    margin: 1em 1em;
	list-style: none;
}

#sendmail {
	width: 100%;
}

.shadow-1-1-1-ccc {
	text-shadow: 1px 1px 1px #ccc;
}

.margin-1em {
	margin: 1em;
}

.margin-075em {
	margin: 0.75em;
}

.articles {
	list-style-type: none;
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;
}

.row {
	margin-bottom: 20px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
	background-color: #fff;
}

.row:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.row a {
	display: flex;
	text-decoration: none;
	color: inherit;
}

.thumb {
	width: 200px;
	object-fit: cover;
}

.content {
	padding: 15px;
	flex-grow: 1;
}

.content h3 {
	font-size: 18px;
	margin: 10px 0;
	color: #333;
}

.content p {
	font-size: 14px;
	color: #666;
	line-height: 1.4;
}