/* CSS for rounded corners in the tutorials */

/************************* adjustments for Windows are at the end *************************/

/************************* browser hacks *************************/
button::-moz-focus-inner { border: 0; } /* remove ugly dotted rect around the clicked button's text */
a::-moz-focus-inner { border: 0; } /* remove ugly dotted rect around the clicked button's text */

/************************* everything else is for all platforms and browsers *************************/

/* Could segregate all fonts and sizes */
/*
	font-family:Verdana, Geneva, sans-serif; --wide
	font-family:Tahoma, Arial, Helvetica, sans-serif; --narrow
	font-family:Georgia, Utopia, Palatino, 'Palatino Linotype', serif; --wide
	font-family:'Times New Roman', Times, serif; --narrow
	font-family:'Courier New', Courier, monospace; --monospace
*/
body, section, footer, aside { font-family:DroidSerifRegular, Georgia, Utopia, Palatino, 'Palatino Linotype', serif; font-size:13px; }
div.fn, div.fn * { font-size:11px; }
aside, ol.fn, ol.fn *, .caption { font-size:12px; }
p.navhead { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:12px; }
ul.navlist, label.prog { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:11px; }
table.game, table.asymm { font-family:Helvetica, Arial, Tahoma, sans-serif; /*font-size:13px;*/ }
.quiz { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:13px; }
*.quiz textarea { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:12px; }
.ans { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:11px; }


/* Color designations are found in brown.css, blue.css, et al. */

/************************** general settings for the entire document */
* { /* border-box sizing for everything */
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}

body { margin:0px; border:none; padding:0px; }
body a { text-decoration:none; } 
body a:hover { text-decoration:underline; }
form { margin:0; } 

/* this SHOULD center the body horizontally, but doesn't (although px or % values for margin-left work */
#mainbody { margin-left:auto; margin-right:auto; }

/*#fnpop:after { font-weight:600; content:" (Click to go to the footnotes.)"; }*/

sub, sup { /* prevent from changing line spacing; doesn't quite work, sup still changes it */
	line-height:0em; 
	position:relative;
	vertical-align:baseline;
}
sub { top:0.35em; }
sup { top:-0.5em; }
sub.low { top:0.5em; }

/* fractions in the text body, which is Georgia font */
sup.frac { top:-0.45em; font-size:80%; }
sub.frac { top:0.0em; font-size:80%; }
/* fractions in a quiz, which is Arial font */
.quiz sup.frac { top:-0.35em; font-size:80%; }
.quiz sub.frac { top:0.2em; font-size:80%; }

ul { padding-left:2em; }

h1, h2 { font-size:larger; font-weight:600; }
h1 { text-align:center; }
h2, h3 { text-align:left; margin-bottom:0px; font-weight:600; }
h3 { font-style:italic; font-weight:300; }
h3 { font-size:1em; }
h3+p, h2+h3 { margin-top:3px; }
h2+p { margin-top:6px; }
h2 { margin-top:18px; }

input[type="text"] { height:22px; }
input[type="radio"], input[type="checkbox"] { margin-right:3px; padding:0px; }  /* no space char after these controls */

p { clear:left; } /* or it is messed up after .quiz.half */

/************************* main document section, which contains divs for each part of the text */
section {	
	position:relative; display:block;
	left:132px; width:746px;
	margin:4px; padding:0px 8px 0px 8px;
	line-height:20px; /* 1.5625 accommodate super- and subscripts by slightly wider spacing */
	-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;
	border-radius:6px;
	border:1px solid;
}
footer {
	position:relative; display:block;
	left:132px; width:746px;
	margin:4px; padding:4px 8px 4px 8px;
	-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;
	border-radius:6px;
	border:1px solid;
}
#browserwarning {
	position:relative; display:block;
	top:0px; left:132px; width:746px;
	margin:4px; padding:4px 8px 4px 8px;
	-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;
	border-radius:6px;
	border:2px solid #f66;
	z-index:2;
	background:#fff;
}
#browserwarning h2 { margin-top:2px; } 
#browserwarning ul, #browserwarning p { margin-bottom:2px;margin-top:2px; }
#browserwarning.hidden { display:none; }
#browserwarning.shown { display:block; }

iframe[name="cgiResults"] { 
	display:none; 
	position:fixed;
	width:128px;
	overflow:hidden; /* FF obeys, Safari ignores, esp in Windows */
	margin:4px; padding:2px 0px 0px 4px;
	border:none;
	background:transparent;
	color:#eef;
	font-size:9px;
	top:376px;
}
iframe[name="cgiResults"] * { color:#eef; font-size:9px; }

/* can I float the body/nav/prog group in the center as the window resizes? probably impossible with vertically fixed sidebar */

/************************* navigation and progress-tracking areas */

iframe.sidebar { /* in a box that stays at the left */
	position:fixed;
	width:128px;
	overflow:hidden; /* FF obeys, Safari ignores, esp in Windows */
	margin:4px; padding:2px 0px 0px 4px;
	-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;
	border-radius:6px;
	border:1px solid;
}
iframe.nav { /* in a box that stays at the left */
	top:0px; height:352px; /* height:auto would be convenient but instead makes it about half the needed size */
}
iframe.prog { /* area with checkbox to save progress */
	top:356px; height:28px;
	padding-top:3px;
}
ul.navlist { /* items in the navigation list */
	list-style-type:none;
	margin-top:2px;
	padding-left:6px;
	line-height:16px;
}
p.navhead { /* category headings in the navigation list */
	font-weight:600;
	margin:2px 0px 4px 0px;
}
body.nav {background-color:transparent; } /* not clear why this isn't required for prog */

/************************* footnotes and references */

a.fn:before { content: " ["; } a.fn:after { content: "]"; } /* footnote in brackets; see below for superscript alternative */
/*a.fn:before { content:"\2009"; } a.fn { vertical-align:super; font-size:10px; } *//* superscript alternative */
a.fn:hover { text-decoration:none; } /* because hover already makes a popup */
h2.fn:before { content:"Footnotes"; } /* for the section at the end of the text */
div.fn { /* popup for footnote mouseover */
	display:block; position:absolute;
	padding:4px;
	z-index:2;
	max-width:420px;
	-moz-border-radius:4px;-webkit-border-radius:4px;-o-border-radius:4px;
	border-radius:4px;
	border:1px solid;
	line-height:16px;
}
div.fn.hidden { display:none; }
ol.fn { padding-left:2em; list-style-type:decimal; line-height:17px; } /* number is 1px too low in FF (OK in Safari) */
ol.fn li { margin-bottom:4px; }

/************************* inline game simulations */
.gbg {
	width:730px;
	overflow:hidden;
	border:0px;
}
.gbg.min { height:31px; }
.gbg.max { height:509px; }
/* overcome IE9 bug that does't apply css to the last iframe on the page; put a .gbg.dummy iframe at the end of each page. */
.gbg.dummy {
	border:0px;
	background:none;
	height:1px;
	width:1px;
	margin:0px;
	padding:0px;
}
/* overcome Safari bug that shows iframes in a hidden div; when div is unhidden, .gbg.min or .gbg.max is shown */
div.hidden .gbg {
	border:0px;
	background:none;
	height:1px;
	width:1px;
	margin:0px;
	padding:0px;
}

/* overcome Safari bug that shows videos in a hidden div; when div is unhidden, the video is shown */
div.hidden video, div.hidden .vid {
	border:0px;
	background:none;
	height:1px;
	width:1px;
	margin:0px;
	padding:0px;
}


/************************* asides */

aside {
	display:block;
	position:relative;
	float:right;
	width:40%;
	margin:0px -2px 4px 6px; padding:0px 4px 0px 6px;
	-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;
	border-radius:6px;
	border:1px solid;
	line-height:16px;
}

aside p { margin-top:3px; margin-bottom:3px; }
aside.full { width:100%; float:none; margin:4px -2px 0px 0px; }
aside.half { width:50%; }

/************************* figure captions */

p.caption { line-height:1.4em; clear:none; padding:0px; margin:6px; }
p.caption.full { padding-left:30px; padding-right:30px; }
p.caption.half { width:50%; margin-top:4px; } /* fill out the area to the right of a div.half */
p.caption.third { width:66%; margin-top:4px; } /* fill out the area to the right of a div.third */
p.caption.right, p.caption.left { display:block; position:relative; padding:0px; }
p.caption.right, span.right { float:right; }
p.caption.left { float:left; }

.half { width:50%; }
.third { width:33%; }

/************************* payoff matrix tables */

table.game {
	width:345px;
	table-layout:fixed; /* all columns divide the space equally */
	text-align:center;
	border-collapse:collapse;
	display:table;
}
table.game.wide { width:640px; }
table.game.third { width:230px; }
table.game.quarter { width:175px; }
table.game th { font-weight:600; } /* bold strategy labels (top row and left column) */
table.game td,th { padding-top:3px; padding-bottom:2px; } /* all cells*/
table.game td { border:1px solid gray; } /* payoff cell borders */
table.game th:first-child { /* left column of strategy labels */
	text-align:right;
	padding:4px 4px 2px 0px;  /* adjust for an unexplained 1-pixel difference between left labels and table contents */
}
table.game td:first-child { /* Game name, the upper-left cell, which must be <td> */
	border:none;
	text-align:left;
}
td.grayed, th.grayed, tr.grayed { color:#ccc; }
td.hide { visibility:hidden; }
table.game caption { font-weight:600; text-align:left; }

/* for side-by-side tables, table with text, or side-by-side quiz questions */
.floatright, .floatleft { display:block; position:relative; /*width:50%;*/ }
.floatright { float:right; }
.floatleft { float:left; }
.floatright.right { float:right; text-align:right; }
div.third { float:left; width:33%; }

.group { display:table; width:100%; } /* keep a set of tables or quizzes together as a block */

/* for asymmetric games; just use class="asymm" or "asymm wide" possibly with s2 or s3 */
table.asymm {
	width:345px;
	table-layout:fixed; /* all columns divide the space equally */
	text-align:center;
	border-collapse:collapse;
}
table.asymm.wide { width:640px; }
table.asymm.third { width:230px; }
table.asymm.quarter { width:175px; }
table.asymm th { font-weight:600; } /* bold strategy labels (top row and left column) */
table.asymm td,th { padding-top:3px; padding-bottom:2px; } /* all cells*/
table.asymm td { border:1px solid gray; } /* payoff cell borders */

table.asymm .top { text-align:center; }
table.asymm .strategy.left { text-align:right; padding:4px 4px 2px 0px; }
table.asymm .label { text-align:left; }

table.asymm.s2 .strategy.left { width:15%; height:24px; } /* this is ugly; only the absolute pixel value seems to work */
table.asymm.s2 .strategy.top { width:40%; }
table.asymm.s2 .role.left { width:5%; }

table.asymm.s3 .strategy.left { width:14%; }
table.asymm.s3 .strategy.top { width:27%; }
table.asymm.s3 .role.left { width:5%; }

table.asymm.s2, table.asymm.s3 { table-layout:auto; } /* I don't recall why this was necessary */

table.asymm .role.left { 
	vertical-align:middle;
/* ugly antialiasing in ie9, wk and ff size the cell on the unrotated text; overall decided to go with an image instead, since Safari & Opera don't support svg yet. */
	/*font-weight: 300;*/ /* this looks slightly better in ie9 */
/*	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	-o-transform: rotate(270deg);
	/* ie9 doesn't support transform. None of the below are fully saisfactory, but the flip version is best */
	/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/* for ie9 */
/*	writing-mode: tb-rl; filter: flipv fliph; /* alternative to the above for ie9*/
	/*transform: rotate(270deg); /* supposedly works in ie9 but doesn't  */
}
table.fill { border:none; border:0px; padding:0px; margin:0px; text-align:center; table-layout:auto; width:100%; height:100%; }
table.fill { margin-top:4px; } /* not sure why this is necessary; should be 7px for Safari, 8px for FF */
table.fill td { border:0px; padding:0px; margin:0px; }
table.fill td:first-child { text-align:right; width:47%; } /* left payoff */
table.fill td:second-child { text-align:center; width:6%; } /* comma */
table.fill td:nth-child(3) { text-align:left; width:47%; } /* left payoff */
table.qfill td, table.fill td { height:100%; }/**/

table.game.shrink, table.asymm.shrink { font-size:12px; }

/************************* quiz parts */

.quiz { /* box to contain question and answer, spans page if not modified */
	width:730px;
	padding:6px;
	margin:4px 0px 0px 0px;
	line-height:inherit;
	border:1px solid;
	-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;
	border-radius:6px;
}	
.quiz.half { /* half-page box */
	width:362px;
	/*display:inline-block;*/
	float:left;
	clear:left;
	margin-right:-2px;
}
.quiz.half.rt { float:right; clear:none; } /* half quiz on right */
.ans { /* answer box */
	line-height:1.2em;
	display:block;
	margin:6px 0px 0px 0px;
	padding:3px;
	-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;
	border-radius:6px;
	border:1px solid;
	color:transparent; /* until .shown is added and the default color is taken on */
}
form.quiz input[type="text"] { width:60px; }
form.quiz input[type="text"].wide { width:100px; }
*.quiz textarea {
	width:100%; max-width:100%; /* set width by quiz box and quiz box padding, don't allow user to widen it */
	height:4em;
	padding:0px 2px 0px 2px;
	margin:6px 0px -4px 0px; /* there's a 3px difference between MZ and WK at the bottom! this compromises and looks fine on MZ but too much on WK */
}
*.quiz table { margin-bottom:6px; } /* table inside a quiz needs bottom space */
/* put quiz gametable in a tr to push answers to bottom; see ess.html; no longer need quiz.m2x2 et al*/
*.quiz div.m3 { display:table-row; height:114px; } 
*.quiz div.m4 { display:table-row; height:140px; }

/* slightly change spacing for blocks of quiz questions */
.quiz.set { margin-bottom:8px; width:728px; }
/* fill-in matrix should center the entries */
.quiz.matrix input[type="text"] { text-align:center; }
.quiz.sub {
	width:712px;
	border:none;
	border-radius:0px;
	border-top:1px solid #aaa;
	background:transparent;
	padding-top:12px;
	margin-top:8px;
}

/************************* variable lists, math derivations */
.math { /* algebraic series */
	list-style-type:none;
	text-align:center;
	margin-right:350px; /* keep text centered, but closer to the left */
}
.math.wide { margin-right:10px; }
.var { /* list of variables */
	list-style-type:none;
	text-align:left;
	margin-left:50px;
}
/* center on the = sign */
ul.mathequal { list-style-type:none; padding:0px } 
.mathleft { float:left; text-align:right; width:233px; } 
.mathleft.narrow { width:118px; }
.mathleft.medium { width:233px; }
.mathleft.wide { width:348px; }
/* Example of use:
<ul class="mathequal">
<li><span class="mathleft">1&minus;p =</span>&nbsp;p
</ul>
*/

/************************* click-to-continue pseudo-links and section parts */
/* Pseudo-link should look and act like a regular link */
.link { cursor:pointer; } 
.link:hover { text-decoration:underline }

/* Pseudo-link to reveal the next section or part after a quiz question */
.link.continue:before { content:"Click to continue (~"; font-variant:small-caps; }
.link.continue:after { content:"% done)"; }
.removed { display:none; } /* for the 'Click to continue' link */
.link.continue { margin-top:12px; }
/* 
	This set of styles leaves blank space for content that isn't yet shown.
	Thus the scroll bar accurately reflects how far through the tutorial one has gotten.
	Another possibility is to make hidden = display:none and revealed display:block
	Then the scrolling changes as new content is revealed.
*/
.hidden { display:block; visibility:hidden; } /* default state of hidden content, keeps the space but makes it invisible USE visibility:hidden normally! */
.revealed { display:block; visibility:visible; margin-top:8px; border-top:1px dotted; } /* reveal new content and put a marker above it */
.underconstruction { display:none; }
.none { display:none; }

/* attempting to hide video in invisible divs for Mac Safari, but this doesn't work */
div.hidden div.vid { visibility:hidden; }
div.revealed div.vid { visibility:visible; }

/************************* images, videos, and definitions */

img.block { /* images shown as blocks, centered */
	display:block;
	margin-left:auto; margin-right:auto; 
	border:1px solid #666;
}
img.block.noborder { border:none; }
img.block+img.block { margin-top:4px; }
img.inline.top { vertical-align:text-top; }

.vid { text-align:center; }

/* definition paragraphs */
p.def { font-style:italic; }
p.def:before { content:"Definition: "; font-weight:600; font-variant:small-caps; }
p.def+p.def { margin-top:-10px; }
dfn { font-style:italic; }


/************************* check-answer button for quizzes */
/* <button name="check" disabled;"></button> */
/*button[name="check"] {
	width:20px; height:20px; 
	color:#333;
	text-shadow:#fff 1px 1px 0px;
	margin:0px;
	padding:1px 2px 1px 3px;
	vertical-align:top; margin-top:1px; /* OK button placement for Mac and Win, text still a bit low in Win, see .win adjustment */
/*	border:1px solid #666;
	-moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; 
	background:#eee; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc)); background:-moz-linear-gradient(0% 90% 90deg, #ccc, #fff);
	border-radius:4px;
	background:linear-gradient(top,#fff,#ccc);
}
button[name="check"]:before { content:"\2713"; }
button[name="check"]:active { 
	padding-left:4px; padding-right:1px;
	background:#ddd;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#eee)); background:-moz-linear-gradient(0% 90% 90deg, #eee, #ddd);
	background:linear-gradient(top,#ddd,#eee);
}
button[name="check"]:hover { border:1px solid #555; color:#222; }
button[name="check"][disabled], button[name="check"][disabled]:hover, button[name="check"][disabled]:active { color:#999; border:1px solid #ccc; background:#eee; }
*/
button[name="check"] {
	width:20px; height:20px; 
	margin:0px;
	vertical-align:top; margin-top:1px; /* OK button placement for Mac and Win, text still a bit low in Win, see .win adjustment */
	border:none;
}
button[name="check"] { background: transparent url("check.gif") no-repeat center top; }
button[name="check"]:active { background: transparent url("checkP.gif") no-repeat center top; }
button[name="check"][disabled] { background: transparent url("checkI.gif") no-repeat center top; }

/************************* adjustments for Windows *************************/
input[type="radio"].win { vertical-align:-1px; } /* -2px in XP, -1px in Windows 7 */
input[type="checkbox"].win { vertical-align:-2px; } /* -2px in XP, -1px in Windows 7 */
/*button[name="check"].win { padding-top:0px; padding-bottom:2px; } /* raise the text as far as possible */

.txtR { color: #E00; }
.txtG { color: #0C0; }
.txtB { color: #00F; }
.txtC { color: #0EE; }
.txtM { color: #F0F; }
.txtY { color: #CC0; }