/* button row */
div#storyviewbtnrow, div#storyeditbtnrow {
	display:none;
}
section#story[mode=edit] div#storyeditbtnrow {
	display:block;
}
section#story[mode=view] div#storyviewbtnrow {
	display:block
}

table#buttonrow {
	width:100%;
	xmargin:0 1rem;
}
table#buttonrow td:nth-of-type(1) {
	text-align:left;
}
table#buttonrow td:nth-of-type(2) {
	text-align:center;
}
table#buttonrow td:nth-of-type(3) {
	text-align:right;
}

story icon {
	margin-left:.3rem;
	xfont-size:1rem;
}
icon[type=char][name=pencil ]:before {
	top:0;
}

/* view */
story {
	display:table;
	width:100%;
	xborder:1px solid green;
	border-collapse:collapse;
	xmargin:0 1rem;
}
line {
	display:table-row;
	width:100%;
	border:1px solid gray;
}
thai, eng {
	display:table-cell;
	xborder:1px solid yellow;
	vertical-align:top;
}
eng {
	xtext-align:right;
}
story[view=th] eng {
	display:none;
}
story[view=en] thai{
	display:none;
}
story[view=sbs] {
}
story thaibtns {
	display:block;
}
story[view=en] thaibtns {
	display:none;
}

/* tview */
row word {
	display:inline;
	cursor:pointer;
}
box word {
	border:1px solid lightgray;
	text-align:center;
	vertical-align:top;
	display:inline-block;
	cursor:pointer;
}
e, tl {
	font-size:.7rem;
}
eng {
	font-size:.8rem;
}
story[tview=e] eng {
	font-size:1rem;
}

row, box, orig {
	display:none;
}
box t, box e, box tl {
	display:block;
}
orig textarea {
	width:100%;
	height:100%;
	box-sizing:border-box;
}

story[tview=n] line thai row, story[tview=s] line thai row {
	display:inline-block;
}
story[tview=s] line thai row word {
	margin-right:.3rem;
}
story[tview=b] line thai box {
	display:inline-block;
}

/* edit mode */
story[tview=e] line thai orig, story[tview=e] line eng orig {
	display:block;
}

line eng e {
	display:block;
}
story[tview=e] line eng e {
	display:none;
}

textarea#storyraw {
	width:100%;
	height:10rem;
}

/* word coloring */
story[tview=b] word[error] t {
	color:red;
}
story[tview=b] word[newvocab] t {
	color:green;
}
story[tview=b] word[multimean] t {
	color:cyan;
}
story[tview=b] word[chosen] t {
	color:purple;
}

/* syllable tones, not implemented */
sylcont {
	position:relative;
	margin-right: .5rem;
}
sylspc {
	opacity:0.0;
}
syllable {
	position:absolute;
}
syllable[tone=M] {
	color:blue;
}
syllable[tone=H] {
	transform: translate(0,-.5rem);
	color:blue;
}
syllable[tone=M] {
	color:green;
}
syllable[tone=L] {
	transform: translate(0,.5rem);
	color:brown;
}
syllable[tone=R] {
	transform: rotate(-30deg);
	color:red;
}
syllable[tone=F] {
	transform: rotate(30deg);
	color:orange;
}