/*------------------------------
--------------------------------
         css for tag
--------------------------------
------------------------------*/
h1 {
	color: #00B0F0 ;
	font-size: 4rem ;
}
h2 {
	color: #00B0F0 ;
	font-size: 1.5rem ;
}
h3, h4, h5 {
	color: #00B0F0 ;
	font-size: 1rem ;
}
img {
	width: 400px ;
	height: auto ;
}
hr {
	border: 1px solid #00B0FF ;
	margin: 30px 0;
}

/*
ul {
	list-style-type: "- " ;
	margin-left: -16px ;
}
*/

/*------------------------------
--------------------------------
         css for class
--------------------------------
------------------------------*/

/*----- common contents -----*/
.contentbox_wrapper {
	<!--
		- no definition in this class
		- apply styles directly in HTML source
		- class used in following source:
			- main_1_top.html
			- menu.html
	-->
}
.contentbox_title {
	border: 2px solid #00B0F0 ;
	color: #FFFFFF ;
	background: #00B0F0 ;
	margin-bottom: 0 ;
}
.contentbox_list {
	border: 2px solid #00B0F0 ;
	line-height: 1.5 ;
	margin-bottom: 20px ;
	padding-left: 20px ;
	padding-right: -20px ;
}
.content2col_base {
	display: flex ;
}
.content2col_left {
	width : 200px ;
}
.content2col_left_img {
	width : 200px ;
	<!--
		- must be defined by px (%, rem, em and other do not work)
		- must be same size as content2col_left
	-->
}
.content2col_right {
	flex-grow 1 ;
	margin-left: 20px ;
	line-height: 1.5 ;
}
.content_wrapper {
	<!--
		- no definition in this class
		- apply styles directly in HTML source
		- class used in following source:
			- main_2_dolls.html
			- main_3_eventinfo.html
			- main_4_publication.html
			- main_5_blog.html
			- main_6_contact.html
	-->
}
.hilight {
	color : red ;
	text-decoration: underline ;
	font-weight: bold ;
}
/*----- entrance.html -----*/
.outer_area {
	background : #000000 ;
}
.gate {
	width: 620px ;
	font-size: 1rem ;
	text-align: center ;
	margin: auto ;
}
.entrance_common {
	width: 100vw ;
	height: 100vh ;
	text-align: center ;
	color: #00B0F0 ;
}
.button_1 {
	font-size: 3rem ;
	text-decoration: none ;
	color: #00B0FF ;
	background: #333333 ;
	box-shadow: 0px 0px 20px #DDDDDD ;
	border: 2px solid #00B0FF ;
	border-radius: 10px ;
	transition: 1s ;
}
.button_1:hover {
	color: #FFB000 ;
	background: #555555 ;
	box-shadow: 0px 0px 20px #DDDDDD inset ;
}
.button_3 {
	text-decoration: none ;
	color: #00B0FF ;
	transition: 1s ;
}
.button_3:hover {
	text-decoration: none ;
	color: #FFB000 ;
}
.button_4 {
	text-decoration: none ;
	color: #00B0FF ;
	background: #333333 ;
	box-shadow: 0px 0px 20px #DDDDDD ;
	border: 2px solid #00B0FF ;
	border-radius: 10px ;
	transition: 1s ;
	padding: 0 10px ; 
}
.button_4:hover {
	color: #FFB000 ;
	background: #555555 ;
	box-shadow: 0px 0px 20px #DDDDDD inset ;
}

/*----- index.html -----*/
.foyer_menu {
	width: 280px ;
}
.foyer_main {
	flex-grow: 1 ;
}
.foyer_common {
	width: 90vw ;
	height: 85vh ;
	display: flex ;
}
.foyer_footer_left {
	width: 280px ;
}
.foyer_footer_right {
	flex-grow: 1 ;
	text-align: right ;
}
.foyer_footer {
	width: 90vw ;
	display: flex ;
}
/*----- main_x_xxx.html -----*/
.main_top_header {
	text-align: center ;
	color: #00B0F0 ;
}
.eventinfo_newest {
	width: 100% ;
	display: flex ;
}
.eventinfo_newest_left {
	width: 50% ;
	text-align: center ;
}
.eventinfo_newest_right {
	width: 50% ;
	text-align: center ;
}
/*--- whatsnew.html ---*/
.whatsnew {
	<!-- no def -->
	<!-- just for bulk manage -->
}

/*--- each blog articles---*/
.blog_articles {
	width: 90vw ;
}
.blog_title {
	width: 100% ;
	border: 2px solid #00B0F0 ;
	color: #FFFFFF ;
	font-size: 2rem ;
	background: #00B0F0 ;
	margin-bottom: 0 ;
	padding-left: 10px ;
}
.blog_header {
	width: 100% ;
	border: 2px solid #00B0F0 ;
	color: #00B0F0 ;
	line-height: 1.5 ;
	margin-bottom: 20px ;
	padding-left: 10px ;
}
.blog_hilight {
	color: #00B0F0 ;
	font-style: italic ;
	font-weight: bold ;
}

/*------------------------------
--------------------------------
         css for id
--------------------------------
------------------------------*/
	<!-- no def -->