html, body{
   height: 100%;
}

body{
   padding: 0;
   margin: 0;
   font-family: sans-serif;
   font-size: medium;
   overscroll-behavior: contain;
}

.dagitty{
	font-family: inherit;
	font-size: inherit;
}

main{
	height: 100%;
	display: flex;
	flex-flow: column;
}

#canvas{
   background-color: #eee;
   outline: none;
   flex: 1 1 auto;
   overflow: hidden;
}

#llegend{
   background-color: white;
}

#rlegend{
   background-color: white;
}

#legend{
   padding: .5em;
}

#summary{
}


#menu{
   margin: 0em;
   list-style-type:none;
   padding: .5em;
   display: block;
   flex: 0 1 auto;
   background: #ccf;
}
#menu li {
    margin: 0; padding: 0em .5em 0em .5em;
    float: left; 
    position: relative; top: 0px; left: 0px; 
    border-right: 1px solid #666;
}

#menu li ul{
    position: absolute;
    display: none;
    left: 0em; top: 1.4em;
    list-style-type:none;
    margin: 0;
    padding: 0;
    width: 12em;
    background-color: black;
    font-weight: normal;
}

#menu li ul li{ 
    float: none;
    font-weight: normal;
    border-right: none;
    margin: 1px;
    background-color: #eee; 
    padding: .2em .5em .2em .5em;
	position: relative;
}

#menu a{
	color: black;
    text-decoration: none;
}
#menu:after {
    content: '';
    display: block;
    clear: both;
}

.legend{
   font-style: italic;
   margin-bottom: 1em;
   margin-top: -.5em;
}

h3{
   margin: 1px 0 0 0;
   font-size: 100%;
   background-color: #eef;
   padding: .5em;
   font-weight: normal;
}

p{
   margin: 0 0 .5em 0;
}

select, input, button, textarea{
   background-color: white;
   border: none;
}

select, button{
   border: 1px solid #700;  
}

textarea{
   font-family: monospace;
   width: 100%;
   box-sizing: border-box;
}

form{
   margin: 0; padding: 0;
}

#rlegend p, #summary p, #summary table, #llegend form{
   margin: .2em .5em .2em .5em;
}

/*
#rlegend p, #summary p, #summary table{
   font-style: italic;
}*/

.info{
   font-weight: bold;
}

#adjustmentsets ul, #testable_implications ul{
   padding: 0 0 0 1em; margin: .5em;
}
#adjustmentsets li, #testable_implications li{
   padding: 0; margin: 0;
}

.dialogwin{
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #bbb;
	text-align: center;
	top: 0px;
	left: 0px;
	opacity: .9;
}

.dialogwin form{
	margin-top: 10%;
}

.dialogwin input, .dialogwin button{
	border: 1px solid black; background-color: white; padding: 1em;
}

.dialogwin .err{
	color: #a00;
}

.dialogwin p{
	margin: 2em;
}

p.warning {
	color: #a00;
	font-weight: bold;
}
p.assurance {
	color: #0a0;
	font-weight: bold;
}


@media screen and (max-width: 40em) {
	main{
		height: 90%;
	}
}


@media screen and (min-width: 40em) and (max-width: 60em) {
	aside {
		position: absolute; top: 0; left: 0; width: 15em;
	}
	main{
		margin-left: 15.1em;
	}
}


@media screen and (min-width:60em) {
	#llegend {
		position: absolute; top: 0; left: 0; width: 15em;
	}
	#rlegend {
		position: absolute; top: 0; right: 0; width: 15em;

	}
	main{
		margin-left: 15.1em;
		margin-right: 15.1em;
	}
}