@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexhei.css);

body { margin: 0; padding: 0; background: #f9f2e0 url('../images/bg_texture.jpg') no-repeat; background-attachment: fixed; background-size: 100% 100%; font-family: '微軟正黑體', 'notosanstc', sans-serif; }
div, ul, li, ol, a { box-sizing: border-box; }
footer { padding: 15px; padding-bottom: 4em; }

#wrapper { max-width: 1000px; width: 100%; margin: 0 auto; }
#rthklogo { width: 90px; height: 35px; position: absolute; top: 38px; left: 25px; z-index: 999; }
#logo-grp { position: fixed; top: 0px; right: 0; text-align: left; z-index: 1; padding-top: 140px; max-width: 130px; width: 6.5%; min-width: 80px; background: url('../images/logo_graphics.png') top right no-repeat; background-size: contain; }
#series { padding-bottom: 1.5em; margin: 5px; width: 60%; /* margin: 0 auto; */ }
#series img { width: 100%; /*max-width: 80px; min-width: 20px;*/ height: auto; }
#logo1 { width: 60%; /* margin: 0 auto;*/ }
#logo1 img { width: 100%; /*max-width: 110px; min-width: 30px;*/ height: auto; } 
.poem-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  line-height: 6%;
  letter-spacing: 0.2em;
  padding-right: 20px;
  width: 100%;
  position: relative;
  background: url('../images/poem_layout3.png') right top no-repeat;
  background-size: 20px auto;
  border: solid 4px #a24b67;
  font-size: 1em;
  /* font-family: 'dfkai-sb', serif; */
  font-family: 'dfkai-sb', 'cwtexkai','BiauKai', serif;
  display: inline-block;
}
.device-android .poem-text { font-family: 'cwtexkai', serif; }
.device-android .poem-text span.android-offset { background: url('../images/word_wing.png') no-repeat; float: left; background-size: auto 100%; height: 0; padding-top: 1.2em; overflow: hidden; display: inline-block; /* margin-top: -0.6em; margin-bottom: 0.6em;  */ }
.poem-text .author { font-size: 0.6em; padding-top: 20px; }
.small { font-size: 0.8em; }
.dropdown .author { font-size: 0.8em; padding-left: 2em; }
.poem-text h1 { font-size: 2.2rem; padding-top: 0.5em; display: inline-block; } 
.poem-text .line { line-height: 100%; font-weight: normal; margin: 0; width: 14.3%; display: block; position: relative; white-space: nowrap; border-left: solid 1px #a24b67; }
.poem-text .line:first-child { border-right: solid 1px #a24b67; }
.poem-text .intent { padding-top: 1.7em; font-size: 2rem; padding-bottom: 1em; } 
.poem-text .intent.double { padding-top: 2.5em; }
.poem-text .intent.triple { padding-top: 4em; }
.navbar-toggle .icon-bar { background-color: #333; }
.highlight { cursor: help; line-height: inherit; display: inline-block; border-left: solid 3px #FF0000; animation: highlightDissolveLoop 1s infinite; }
.highlight~.highlight { margin-top: 3px; }
.highlight:hover { background-color: rgba(255,0,0,0.15); }
@keyframes highlightDissolveLoop {
  0%   { border-left-color: red; }
  50%  { border-left-color: transparent; }
  100% { border-left-color: red; }
}

.control { /*position: relative; */ width: 100%; }
.control a { display: inline-block; font-size: 1.4em; line-height: 50px; color: #fff; background-color: #a24b67; padding: 0 12.8px; text-decoration: none; transition: padding 0.3s ease; } 
.control .btn-prev { position: fixed; top: 60%; clear: both; left: 0px; }
.control .btn-next { position: fixed; top: 60%; clear: both; right: 0px; }
.control .btn-prev:hover { opacity: 0.9; }
.control .btn-next:hover { opacity: 0.9; }

.clear { clear: both; } 
.poem-layout { float: right; /* height: 32em; */ margin-top: 2em; width: 50%; margin-right: 3%; margin-left: 0%; margin-bottom: 3em; }
.poem-pic { float: left; width: 47%; display: table; margin-top: 2em; }
.poem-pic img { width: 100%; height: auto; }
.img-repsonsive { width: 100%; height: auto; }
.separator { position: relative; clear: both; /* border-bottom: solid 1px rgba(175,170,158,0.7); margin-bottom: 2em; */ background: url('../images/bg_separator.png') left center repeat-x; }
.media-holder { width: 90%; margin: 0 auto; }
a.btn-listen { font-family: 'Noto Serif TC', serif; display: block; line-height: 44px; text-decoration: none; transition: background-color 0.3s ease; border: solid 3px #cc0000; text-align: center; width: 160px; padding: 0px 10px; background-color: #f8f1e0; color: #d91e2a; font-weight: bold; font-size: 1.25em; margin: 0 auto; }
a.btn-listen:hover { text-decoration: none; background-color: #cc0000; color: white; }

/* Custom Bootstrap */
.affix { top: 0; position: fixed; }
.navbar-brand { display: none; color: #333; font-family: 'Noto Serif TC', serif; letter-spacing: .05em; }
.navbar { background-color: rgba(255,255,255,0.9); width: 100%; border: none; z-index: 900; border-radius: 0; }

ul.navbar-nav > li > a.nav-link { display: block; font-family: 'Noto Serif TC', serif; letter-spacing: .05em; color: #333; text-align: left; font-weight: bold; font-size: 1.2em; transition: background-color 0.3s ease; z-index: 90; line-height: 28px; padding-left: 15px; padding-right: 15px; border-radius: 3px; }
ul.navbar-nav > li a:hover { background-color: rgba(0,0,0,0.1); color: #f9351d; }
ul.navbar-nav { float: none; text-align: center; }
ul.navbar-nav li { display: inline-block; float: none; margin-left: 5px; margin-right: 5px; }
ul.dropdown-menu li { display: inline-block; font-size: 1.1em; width: 100%; }
ul.dropdown-menu li a { padding: 5px 20px; }

.main { padding-bottom: 2em; }
.container { width: 85%; padding: 0; }
.icon-diamond { background: url('../images/icon_reddiamond.svg') no-repeat left center; padding-left: 22px; background-size: 70% 70%; }
.icon-block { background: url('../images/icon_block.svg') no-repeat left center; padding-left: 50px; margin-right: 10px; background-size: 100% 100%; }
.main h3 { color: #181818; font-family: 'Noto Serif TC', serif;  font-size: 1.5em; letter-spacing: 0.2em; text-align: center; font-weight: bold; margin-top: 2em; margin-bottom: 1em; }
.main p { font-size: 1.2rem; line-height: 2em; letter-spacing: 0.05em; }
.copyright { text-align: center; opacity: 0.8; }
.voiceover { text-align: right; opacity: 0.8; margin-top: 0.75em; display: none; position: absolute; right: 5%; }

#intro h3,
#category h3,
#format h3,
#rhyme h3 { color: #7a4343; font-size: 2rem; /* font-family: 'cwtexkai', serif; */ letter-spacing: 0.1em; text-align: center; font-weight: bold; margin: 1em 0; }

#intro .container,
#category .container,
#format .container,
#rhyme .container { position: relative; max-width: 1200px; width: 80%; margin: 0 auto; padding: 4em 0; }

#intro {}
#category { position: relative; background-color: rgba(255,252,244,0.8); /* background-color: #f2ead6; background: #f2ead6 url('../images/bg_category.jpg') bottom center no-repeat; background-size: auto 80%; */ }
#format h3+p { text-align: center; }
#rhyme { background-color: rgba(255,252,244,0.8); }
#rhyme h3 { color: #7a4343; text-align: center; }
#rhyme .container { width: 75%; }

table.horizontalGrid { display: inline-block; vertical-align: middle; }
table.horizontalGrid td { padding: 8px 10px; text-align: center; border: solid 1px #000; font-size: 1.3em; } 
ul.tableGrid { list-style: none; margin: 0; padding: 0; margin-top: 1em; width:90%; margin: 0 auto; }
ul.tableGrid li { position: relative; float: left; width: 50%; padding-left: 8%; background-color: #f9f3e3; }
ul.tableGrid li:nth-child(2) { background-color: #f1e7d3; }
ul.tableGrid li:nth-child(3) { background-color: #f1e7d3; }
ul.tableGrid li p { padding: 5%; font-size: 1.1em; }

.tableGrid h4 { position: absolute; display: block; top: 0; left: 5%; margin: 0; background: url('../images/bg_start_mark.png') top center no-repeat;color: #7a4343; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 2.4em; line-height: 1em; padding-top: 0.8em; background-size: 100% auto; }
.category-text { /* background-color: #f9f3e4; padding: 4em; */ width: 48%; text-align: left; display: table; }
.category-text h3 { margin-top: 1em !important; }
.category-text { float: left; width: 60%; }
.category-pic { position: relative; float: left; width: 40%; display: table; }
.category-pic img { width: 100%; background-color: #f2ead6; border-radius: 999px; margin: 0 auto; /* position: absolute; bottom: 0;  margin-bottom: -4em; */ }
.intro-text { float: right; width: 60%; padding-left: 3em; display: table; }
.intro-text h3 { margin-top: 1em !important; }
.intro-pic { float: left; width: 40%; display: table; }
.intro-pic img { width: 100%; }
.remarks { font-size: 1.1em !important; }
.vcenter { display: table-cell; vertical-align: middle; height: inherit; /* parent block element must set to display: table */ }
.vcenter > h3 { margin-top: 0 !important; }
.tooltip {
    position: absolute;
    display: block;
	opacity: 1;
	font-size: 14px;
	z-index: 80;
	white-space: wrap;
}
.tooltip-inner {
    white-space:pre-wrap;
	text-align: left;
	padding: 10px;
	max-height: 22em;
	background-color: rgba(0,0,0,0.9);
	font-size: 16px;
	font-family: 'Noto Serif TC', serif; 
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
	width: 220px;
}
/* Tool tips
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
	opacity: 1;
	font-size: 1em;
	z-index: 0;
} */
.tooltip .tooltiptext {
	visibility: hidden;
    /*opacity: 0;*/
	background-color: #555;
	transition: opacity .3s;
    color: #fff;
	line-height: 1.6em;
	height: 16em;
    padding: 10px;
    border-radius: 6px;
	pointer-events: none;
	letter-spacing: 0.3em;

	text-align: left;
	
    /* Position the tooltip text - see examples below! */
    position: absolute;
	top: 0;
	display: inline;
	margin-right: 60px;
}
.tooltip:hover .tooltiptext {
    /*opacity: 1;*/
	visibility: visible;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 10%;
    left: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
	z-index: 80;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/* BACK TO TOP */
.back-to-top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	display: none;
	background-color: rgba(0, 0, 0, 0.20);
	background-image: url('../images/back-to-top.svg');
	background-size: 100%; 
	width: 50px;
	height: 50px;
	border-radius: 2px;
	z-index: 50;
}
.back-to-top:hover {	
	background-color: rgba(135, 135, 135, 0.50);
}

/* MUSIC PLAYER */
#musicplayer { position: absolute; top: 12px; right: 8px; display: inline-block; padding: 6px; }
#musicplayer .mute { display: inline-block; }
#musicplayer .music { }
#musicplayer .music a { display: inline-block; padding: 0px 2px; }
#musicplayer .music a.selected { color: #f17119; }
/*-------------------------------------------------------------------------------------*/
@media (min-width: 1200px) {
	.container {
	   width: auto;
	}
}
@media (max-width: 840px) {	
	/* .category-pic img { position: relative; height: 50vw; margin: 0 auto; right: 0; padding-top: 1em; */
	.container { width: 75%; }
}
@media (max-width: 825px) {
	.back-to-top { bottom: 50px; }
	.control { top: 50%; }
	.control .btn-prev { top: 50%; margin-top: -25px; }
	.control .btn-next { top: 50%; margin-top: -25px; }
}
@media (max-width: 992px) {
	
	#rthklogo { left: 3vw; top: 65px; width: 10%; min-width: 55px; z-index: 0; }
	#logo-grp { display: none; }
	#musicplayer { position: absolute; top: 8px; right: 80px; }
	.navbar-brand { display: block; }
	.navbar-nav { margin: 0px; }
	.navbar-right .lang a { margin: 0; }
	.navbar-right .lang { padding: 10px 15px; }
	ul.navbar-nav > li { display: block; }
	.navbar-collapse { padding: 0; }
	
	/* intro */
	.intro-text, .intro-pic { float: none; width: 100%; padding:0; }
	.intro-pic { padding: 2em; }
	.category-text, .category-pic { float: none; width: 100%; }
	.category-pic { width: 70vw; padding: 0em; margin: 0 auto; }
	ul.tableGrid { width: 100%; }
	ul.tableGrid li { width: 100%; float: none; padding-left: 50px; margin-bottom: 1.5em; background-color: #f1e7d3; }
	#format ul.tableGrid li:nth-child(odd) { background-color: #f9f3e3 !important; }
	
	/* Poem Layout */
	#series img { margin-left: 20%; }
	#logo1 img { margin-left: 20%; }
	.poem-layout { float: none; height: auto; width: 100%; padding: 3%; margin-bottom: 0em; }
	.poem-text { margin: 0em; }
	.poem-pic { float: none; width: 100%; padding: 5%; margin-top: 0; }
	ul.dropdown-menu li { width: 49%; }
}
@media (max-width: 640px) {
	
	.poem-layout { width: 110%; margin-left: -5%; margin-right: -5%; }
	#intro .container, #category .container, #format .container, #rhyme .container { padding: 2em 0; width: 90%; }
	.container { width: 85%; }
	#rhyme .container { width: 90%; }
	#format h3+p { text-align: left; }
	/*
	.category-text { padding: 3em; font-size: .95em; }
	.category-text p { text-align: center; }
	.category-pic { padding-top: 2em; margin: 0; }
	.category-pic img { margin-bottom: -2em; }
	*/
	table.horizontalGrid { width: 100%; }
	table.horizontalGrid td { width: auto; }
	.control a { padding: 0 5px; }
	.control a:hover { padding: 0 15px; }
}
@media (max-width: 440px) { /* iPhone 6 & 6 Plus */
	body { font-size: 1.2em; }
	.navbar-nav > li > a { line-height: 14px; }
}
@media (max-width: 340px) { /* iPhone 5 & SE */
	ul.dropdown-menu li span.author { display: none; }
	ul.dropdown-menu li { width: 32%; }
	ul.dropdown-menu li a { padding: 5px 12px !important; font-size: .9em; }
	.navbar-nav > li > a { line-height: 14px; }
}