/*
 * mop.css - CSS for presentation
 *
 * $Id: mop.css,v 1.5 2006/06/11 22:04:52 yuuji Exp $
 * Last modified Thu Apr  2 08:56:59 2009 on firestorm
 *
 */

@media screen {
  body {
	font-size: 250%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* margin-left: 0.5ex; */
	margin: 0; 
}
}
table {
	font-size: 100%;
	margin-left: auto; margin-right: auto;
}
table.border, table.border tr, table.border td, table.border th {
  border: 1px solid; border-collapse: collapse;
}

.s1>p, .emerge>* {margin: 0; padding: 0.1ex;}
h1 {
	text-align: center;
	margin: 0; padding: 0; border: 0;
	font-family: sans-serif;
	font-weight: 500;
	border-bottom: 8px navy double;
}
.titlepage h1 {
	text-align: center; color: orange;
	background: none; padding: 0px;
	margin: 0.5em 0;
	font-size: 150%;
	border: 5px double; border-left: 0px; border-right: none;
	height: auto; padding: 1ex;
}
body.titlepage  {
	margin: 0; border: 20px solid #a2c9d3; background-image: none;
}
.titlepage .where {font-size: 70%; text-align: center;}
.titlepage .who {font-size: 66%; text-align: center;}
h2 {
	border-left: 1em navy solid;
	font-size: 120%;
	padding: 0.1ex; padding-bottom: 0.2ex;
	/* border-bottom: 2px purple solid; */
}
h2:first-child {margin: 0.1ex 0;}
div.s1 {
	margin: 0; height: 14em; position: relative;
}

.titlepage div.s1 {height: auto; }
/* #afac6d #e5e490 */
.c {text-align: center;}
.r {text-align: right;}
.shout {text-align: center; font-size: 200%;}
div p {text-align: left;}
.pre {white-space: pre;}
pre {margin: 1ex 0.5ex; background: #a8a8a8; color: navy; font-size: 80%;}
.small {font-size: 60%;}
.large {font-size: 120%;}
/* dt:before {content: "【";}
dt:after {content: "】";} */
dt {text-decoration: underline;}
/* ul {margin: 0.1ex 1ex;} */
ol {padding-left: 1.8em;}
li {margin: 0 0; margin-top: 0.4ex; margin-bottom: 0.4ex;}
li p {margin: 0.1ex 1;}

/*
 *	[[Smaller fonts for nested listing]]
 */
ul ul, dl ul {font-size: 80%; color: brown;}
dl dt {margin-left: 1ex;}


/* li p {font-size: 90%; margin-left: 1em; color: brown;} */

img {vertical-align: middle;}

/*
 *	[[Cutin animation from right]]
 */
.rcutin {
	/* position: relative; */
	position: relative;
	padding-left: 1000px; width: 1280;
	/* margin-left: 2px; */
}
.rcutinp {margin-left: 2px; border-left: 2px dotted;}

/*
 *	[[Emerging and Opaque moving up]]
 */
div.s0 .emerge, div.s0 .opaque {
	visibility: hidden;
	/* position: absolute; */
}
.emergep {border: 1px dotted;}
.opaquep {border: 1px dashed;}
.emerge>*,.emerge {margin: 0;}

/*
 *	[[Dialog layout]]
 */

.dialog {
	position: absolute; width: 100%; height: 95%;
}
.dialog .a {
	margin: 0;
	position: absolute; width: 45%; height: 45%; left: 1ex;
	background: yellow; top: 1ex;
}
.dialog .b {
	margin: 0;
	position: absolute; width: 45%; height: 45%; right: 1ex; bottom: 0;
	background: magenta;
}
.dialog .taro {
	position: absolute; width: 40%; height: 48%; left: 1ex; top: 50%;
}
.dialog .hanako {
	position: absolute; width: 40%; height: 45 %; right: 1ex; bottom: 40%;
}
.dialog .hanako p {
	position: absolute; text-align: right; right: 0; bottom: 0;
}
.dialog blockquote {
	display: none;
}
.dialog * {margin: 0.2ex;}
 .dialog .a p {position: absolute; bottom: 0;}

/*
 * Q and A layout
 */

.qanda {
	position: absolute; width: 100%; height: 95%;
}

.qanda .a {
	/* position: absolute; */
	width: 80%; height: 3em;
	margin: 0.3ex auto;
	background: yellow url(q.png); border: 1px solid;
	font-weight: 450;
}
.qanda .b {
	/* position: absolute; bottom: 0; */
	width: 65%; height: 60%; margin-right: 1ex; margin-top: 1em;
	background: cyan url(ans.png); border: 3px double;
	float: right;
}
.qanda .c {
	/* position: absolute; width: 30%; height: 6em; left: 0; bottom: 0; */
	margin: 1ex 0; 
	color: brown;
}
.qanda blockquote {
	display: none;
}
.qanda p {margin: 0.2ex;}

/*
 *	[[Two column and Stacking layout]]
 */

div.twocolumn, div.stack {
	position: absolute; width: 100%; height: 99%;
}
div.twocolumn .left, div.twocolumn .one {
	margin: 0; margin-top: 0.5ex;
	position: absolute; width: 48%; height: 98%; left: 0.1ex; top: 0;
	border-right: 2px dotted navy;
}
div.twocolumn .right, div.twocolumn .two {
	margin: 0;
	position: absolute; width: 48%; height: 98%; left: 51%; top: 0;
}

div.stack .upper, div.stack .one {
	margin: 0;
	position: absolute; width: 100%; height: 49%; left: 0.1ex; top: 0;
	border-bottom: 2px solid green;
}
div.stack .lower, div.stack .two {
	margin: 0;
	position: absolute; width: 100%; height: 49%; top: 50%;
}
div.twocolumn p, div.stack p {margin: 0.4ex 0.2ex;}