/* default css style virtuallabs web site */
body{
font-family:Helvetica,Arial,Verdana,sans-serif;
background-color:#bbb;
text-align:center;
margin:0;
}
#content{ margin:1em auto; padding:0; width:800px;
}
html>#content{ width:800px;
} 
#background{
background-color:#fff;
text-align:left;
padding:0;
margin:0;
clear:both;
float:left;
border:solid 1px #666;
width:798px;
}
#menu{ clear:both;
}
#menu ul{
font-weight:bold;
list-style-type:none;
margin:10px 0 -1px;
padding:0;
float:right;
border-right:solid 1px #666;
width:26em;
}
#menu li{
background-color:white;
text-align:left;
margin:0;
padding:0;
float:right;
width:8.5em;
border-top:solid 1px #666;
border-left:1px solid #7a000e;
}
#menu a{
display:block;
margin:0;
padding:2px 4px 1px;
}
#bread{
position:relative;
top:2.4em;
margin:0;
padding:0;
font-size:smaller;
}
#bread ul{
margin-left:20px;
padding:0;
border:none;
} 
#bread ul li{
margin:0 0.6em 0 0;
padding:0;
border:none;
list-style:none;
display:inline;
}
.dropdownmenu{
position:absolute;
visibility:hidden;
line-height:1.4;
z-index:100;
text-align:left;
margin-left:-1px;
}
.dropdownmenu a{
display:block;
border:1px solid #999;
border-left:1px solid #7a000e;
border-top-width:0;
padding:1px 4px;
text-decoration:none;
font-weight:bold;
width:25em;
}
.dropdownmenu a:hover{ /*hover background color*/
color:black;
border-bottom:1px solid black;
}
#popupcontent{
width:540px;
margin:10px auto 10px auto;
padding:12px 0 0;
background-color:#fff;
border:1px solid #999;
text-align:left;
}
html>#popupcontent{
width: 540px;
} 
/* header */
#header{
margin:0;
padding:0;
padding-top:2em;
border:0; 
border-bottom:4px solid #444;
height:11.4em;
margin-bottom:1em;
}
#header img{
float:left;
height:160px;
padding:0;
margin:-2em 20px 0 0;
}
#header img.horizontal{
width:160px;
height:auto;
margin:auto 20px auto 0;
}
#header h2{
margin:0;
font-size:medium;
margin-bottom:0.6em;
}
#header h4{
font-style:italic;
margin-top:1em;
}
#footer{
font-size:smaller;
font-weight:normal;
padding:6px 20px 12px 20px;
border:0;
border-top:2px solid #444;
}
#footer a img{ float:right; vertical-align:bottom; border:0; margin:0; padding:0; margin-top:0em;}
.footnote, .diggers{
font-size:smaller;
font-style:italic;
font-weight:normal;
padding:0 20px;
}
.diggers img{ border:0 }
/* applets */
#virtuallab{
width:480px;
border:1px solid #999;
margin:1em auto 1em auto;
}
#popuplab{
width:480px;
border:1px solid #999;
margin:0 auto 1em auto;
}
p, h1, h2, h3, h4{
margin:0;
padding:0 20px;
}
/* avoid italics bug in IE/Win http://www.positioniseverything.net/explorer/italicbug-ie.html */
p{ overflow:visible; height:1%; }
ol, ul, dl{ margin:0 20px; padding:0 0 12px 20px;
}
h2{ padding-top:6px; line-height:1.2;
}
h3{ margin:0 0 1ex 0; line-height:1.2; text-align:left;
}
/* lists */
li{ line-height:1.3; padding-bottom:6px;
}
/* references */
ul li{ margin:1em;
}
/* parameters */
dt{ font-style:italic; font-weight:bold;
}
dd{
margin-bottom:1em;
line-height:1.3;	
text-align:justify;
}
dd li{ margin-bottom:0; padding:0;
}
/* section headings */
.section{
margin:1em 0;
padding:16px 0 8px;
border:0;
clear:both;
}
/* quotes */
.quote{
font-style:italic;
margin:0.4em 60px 1em;
line-height:1.2;	
text-align:justify;
}
/* flush right paragraph */
.flushright p{
text-align:right;
clear:both;
line-height:1.2;
padding:0 20px;
}
p{
margin:0 0 1em 0;
text-align:justify;
line-height:1.3;
}
/* this class should be removed one day... */
p.topp{ margin:0 0 1em;
}
.rem{
color:#aaa;
font-size:small;
font-style:normal;
font-weight:normal;
margin-left:1em;
}
a{ text-decoration:none;
}
a:link{ color:#7f000e;
}
a:visited, a:hover{ color:#0e007f;
}
/* math - variables and formulas */
.math{
font-family:Times,"Times New Roman",serif;
font-size:125%;
line-height:1.5;
margin:1em;
margin-left:5em;
}
tt{ font-family:Times,"Times New Roman",serif; font-size:110%;
}
/* figures */
.figure{
margin:1em auto;
padding:0;
border-left:20px solid white;
text-align:center;
table-layout:fixed;
}
.figure caption{
caption-side:top;
font-weight:bold;
margin:0;
padding:0;
border-left:20px solid white;
}
.figure td{
text-align:center;
vertical-align:top;
width:1%;
line-height:1.2;
border-right:20px solid white;
}
.figure tfoot td{ text-align:justify;
}
/* payoff matrices */
.payoff{ margin:0 auto;
}
.payoff th{
font-size:smaller; 
font-weight:bold;
font-style:italic;
}
.payoff td, .figure .payoff td{ padding:2px; padding:0;
}
/* scenarios and examples */
.scenarios{
margin:1em 0 2em 0; 
padding:0;
border-collapse:collapse;
border-spacing:0;
clear:both;
}
.scenarios th, .scenarios td{ vertical-align:top; padding:1em 0;
}
.scenarios th .figure td{ width:160px; border:0;
}
.scenarios th .figure .payoff td{ width:inherit;
}
.scenarios th .figure .payoff th{ vertical-align:middle;
}
.scenarios th{ text-align:left; width:160px;
}
.scenarios .payoff th{ width:inherit;
}
.scenarios td{ padding-left:0; text-align:justify;
}
.scenarios th ol{
padding:0;
margin:0;
text-align:right;
width:180px;
list-style:lower-roman inside none;
}
.scenarios th ol li{ margin-left:0; padding-right:0;
}
.scenarios td ol li{ list-style:lower-roman; margin-left:20px;
}
.scenarios img.natural{ border:0; width:auto;
}
.scenarios img.noframe{ border:0;
}
.scenarios th img{ width:160px; border:1px solid; margin-left:20px;
}
.scenarios .vertical, .scenarios .natural{ text-align:center;
}
.scenarios .vertical img, .scenarios .natural img{ width:auto; margin:0 auto;
}
.scenarios .vertical img{ height:160px;
}
.scenarios th ol li img{
width:124px;
margin:0;
padding:0;
border:0;
}
.scenarios .figure{ padding-right:0; margin-right:0;
}

.floatpane{ border:1px solid #333; display:none; z-index:100; float:left; position:absolute; background-color:white; width:798px; padding:0; }
.floatpane img{ width:44%; margin:0; padding:10px 20px; border:none; float:left; }
.floatpane h3{ margin-top:10px; }
.floatpane ol{ list-style:lower-roman; list-style-position:inside; }
.floatpane p{ padding-left:0; }
.floatbar { background-color:#999; color:#fff; width:100%; padding-top:4px; padding-bottom:2px; text-align:center; }
.floatbar img{ width:auto; margin:0; padding:0; float:right; }
.zoomout { color:#aaa; font-size:small; font-style:normal; font-weight:normal; margin:10px 20px; }
.zoomout img { width:auto; padding:0 5px 0 0; }
#overlay { position:absolute; top:0; left:0; z-index:90; display:none; width:100%; background-color:black; opacity:.6; }
/* non-standard additions for mozilla and ie */
#overlay { filter:alpha(opacity=60); -moz-opacity:.6; }

/* covers modifies scenarios */
#covers{ padding-top:0; margin:2em 0 0;
}
#covers td, #covers th{ padding:1em 0; border-bottom:1em solid #fff;
}
#covers th{ padding:0;
}
#covers th img{ padding:0; margin:0;
}
.News th{ font-style:italic; padding-top:1em;
}
/* applet features */
.controls{ margin:1em 20px;
}
.controls thead td{ font-size:120%; font-weight:bold;
}
.controls td, .controls th{
text-align:left;
vertical-align:top;
line-height:1.3;
padding:0.4em 0.6em;
margin:0;
}
.controls th{ text-align:right;
}
#simulation, #dataview{
border-collapse:collapse;
margin-bottom:1em;
width:49%;
}
#simulation th, #dataview th{ width:25%;
}
#simulation{ float:left;
}
#dataview{ float:right;
}
/* legends */
.scenarios .legend{ width:600px; /* 800-2*20-160 */
}
.legend{
font-weight:bold;
font-style:italic;
font-size:smaller;
width:780px;
padding:0.6em 0;
margin:0;
}
.legend td{ 
text-align:center;
padding:2px 0;
vertical-align:middle;
}
.legend th{
text-align:right;
padding:2px 10px 2px 0;
width:20%;
vertical-align:middle;
}
.twocol td{ width:40%;
}
.threecol td{ width:26%;
}
.fourcol td{ width:20%;
}
.tencol td{ width:6%;
}
.tencol td.label{ width:18%;
}
/* legend colors */
.newscissor, .newasocial, .newdeflight{ background-color:#ffa0a0;	/* light red */
}
.newpaper, .newsocial, .newcooplight{ background-color:#a0a0ff;	/* light blue */
}
.newrock, .newbully, .newloner{ background-color:#ffffa0;	/* light yellow */
}
.newmild, .newpun{ background-color:#a0ffa0;	/* light green */
}
.coop, .paper, .social, .res, .max{ background-color:blue; color:white
}
.defect, .scissor, .asocial, .mut, .min{ background-color:red;
}
.newcoop, .newres, .mild, .punish{ background-color:#0f0;
}
.loner, .newdef, .rock, .bully, .newmut{ background-color:yellow;
}
.mean, .minbw{ background-color:black; color:white;
}
.maxbw, .empty, .newempty{ background-color:white; border:1px solid;
}
.gray1{ background-color:#e9e9e9;
}
.gray2{ background-color:#ccc;
}
.gray3{ background-color:#aaa;
}
.gray4{ background-color:#888;
}
.gray5{ background-color:#666;
}
.gray6{ background-color:#444;
}
.gray7{ background-color:#222;
}
/* colors for different tutorials */
.Index{ background-color:#fff; border-bottom:2px solid black; }
.News{ background-color:#999; }
.Intro{ background-color:#f66; }			/* salmon */
/*.Intro{ background-color:#f7d; }			/* carnation */
/*.Ecology{ background-color:#fa6; }			/* cantaloupe */
.VolPun{ background-color:#f85; }			/* salmon */
.Ecology{ background-color:#fc6; }			/* cantaloupe - g+2 */
.Discount{ background-color:#ff6; }			/* banana */
.Branching{ background-color:#cf6; }		/* honeydew */
.Moran{ background-color:#6f6; }			/* flora */
.Snowdrift{ background-color:#6fc; }		/* spindrift */
.Volunteering{ background-color:#6ff; }		/* ice */
.PublicGoods{ background-color:#6cf; }		/* sky */
.RewardPunish{ background-color:#28f; }		/* aqua - b-2 */
.TwoByTwo{ background-color:#88f; }			/* orchid - r+2g+2 */
.Research{ background-color:#999; }

.Continuous{ background-color:#f9c; }