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

html {
	display:block;
  margin: auto;
	}

body a{
	text-decoration: underline;
	color: black;
}
body {
	font-family: 'Noto Sans TC', Verdana, Geneva, sans-serif;
	background:#d1d2d3;
	background-image:url(../image/bg.png);
	background-repeat: no-repeat;
	background-position:top;
	margin: auto;
	line-height:1.8em;
}
/*for top langchange bar */
#top-menu {
	display:table;
	width:100%;
	height:auto;
	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	overflow: hidden;
	text-align:left;

	/*max-width:100%;
	height:auto;*/
}

#top-menu li {
    display:table-cell;
	text-decoration:none;
	font-style:normal;
}

#top-menu a {
	display:inline-block;
	font-size:small;
    color: black;
    text-align: left;
    padding: 10px 10px;
}

#top-menu li a:hover{
	text-decoration: underline;
}

/* Menu after article */
#menu_bar{
		display:table;
		width:100%;
		height:auto;
		list-style-type: none;
	  	margin: 0;
	  	padding: 0;
	  	verflow: hidden;
		text-align:left;
		align:left;
}

#menu_bar li {
    display:table-cell;
		text-decoration:none;
}

#menu_bar a {
		display:inline-block;
		font-size:small;
    color: black;
    text-align: left;
		align:left;
    padding: 10px 10px;
}

#menu_bar li a:hover{
	text-decoration: underline;
}


/*#menu_bar td{
	width:25%;
}*/
/* Change the link color to #111 (black) on hover */
/*li a:hover {
    background-color: #111;
}*/
/* -----  ----- */
/*
#background_box{
	width:100%;
	position:relative;
	top:0px;
	z-index:1;
	background:blue;
	height:500px;
}

*/

#mainbox{
	max-width:840px;
	height:auto;
	text-align:left;
	border-bottom:6px solid #deecef;
	border-left:6px solid #deecef;
	border-right:6px solid #deecef;
	/*padding: 3px;*/
  margin:auto;
  background:#e3e4e5;
  z-index:2;
}

#mainbox a{
	font-style:italic;
	text-decoration:none;
}

#mainbox a:hover{
	font-style:italic;
	text-decoration: underline;
}

#mainbox figcaption{
	font-size:0.8em;
}

#header_img{
	max-width:100%;
	height:auto;
}

.article_img{
	max-width:100%;
	height:auto;
}

.article_li{
	background: none;
	vertical-align: baseline;
}
.article_goals {
	padding: 5px;
}
.writer_info{
	width:840px;
	text-align:center;
	height:150px;
	margin: 10px;
	overflow: auto;

}

#Title{
	font-size:large;
	color:white;
	padding:10px;
	background:#0075d1;
	max-width=100%;
	height:auto;
	border-radius: 5px;
	align:center;
}

#Title a{
	color:white;
	font-style:italic;
	text-decoration: none;
}

#langchange{
	text-align:right;
}
.Sub_Title{
	height:20px;
	font-size:200%;
	color:navy;
	background:#06a5aa;
}
.featured {
    width: 320px;
    height: 400px;
    border: 5px solid #deecef;
		padding: 1px;
    margin: 0px;
}
.featuredtitle {
	text-align:left;
	width:300px;
	font-size:large;
	color:black;
}

.featuredtitle a:link{
	text-decoration: none;
	    color: black;

}
.featuredtitle a:hover{
	text-decoration: none;
	    color: black;

}

.featuredtitle a:visited{
	text-decoration: none;
	    color: black;

}

.featuredtitle a:active{
	text-decoration: none;
	    color: black;

}


.featuredwriter {
	text-align:right;
	width:300px;
	font-size:small;
}

.featuredsum{
	text-align:left;
	width:300px;
	font-size:small;

}
.featuredlink{
	text-align:right;
	font-size:small;
	margin:5px;
}
.selectedarticles{
	height:230px;;
	width:240px;
	border: 5px solid #0e59d1;
	padding: 1px;
    margin: 0px;
    text-align:center;
}
.selectedarticleslink{
	text-align:right;
}
.selectedarticlessum{
	text-align:left;
	margin: 3px;
}

.eventbox{
	height:200px;;
	width:200px;
	border: 5px solid #9d40e5;
	padding: 1px;
  margin: 0px;
  text-align:center;
}
.eventsum{
	text-align:left;
}
.eventlink{
	text-align:left;
	margin: 3px;
}
.main_art{
	max-width: 100%;
	height:auto;
	padding:10px;
	text-align:justify;
}

#writer_info_box{
	float:left;
	width:500px;
	z-index:2;
    text-align:left;
    background:#0075d1;
   	padding:3px;
    margin:3px;
    position: relative;
     left: 79px;
      top: 32px;
			color:white;

}
#writer_photo{
	float:right;
	padding-right:0;
	z-index:1;
	position: relative; left: -129px; top: -16px
}


#quote{
	font-size:medium;
	width:720px;
	position:relative;
	margin:0px auto;
	font-family:"Comic Sans MS", cursive, sans-serif;

}
#titlebox{
	text-align:left;
	font-size:small;
	max-width: 100%;
	height:auto;

}

.footer_h{
	width:100%;
	background:white;
	height:150px;
}
.footer_content{
	margin:auto;
	width:900px;
}
#footer_table{
	height:150px;
	text-align:left;
}
#footer_table td{
	vertical-align: top;
  	text-align: left;
  	width:300px;
}
#footer_table a{
	text-decoration: none;
	color: #0e59d1;
}
.goalandname{
	width:100%;
}

.goalandname img{
	height:50px;
}
#writer_name.writer{
	font-size:medium;
	height:auto;
	max-width:100%;
	padding-right:10px;
	text-align:right;
}

.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}