html, body {

font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;

}

html, body, main, main, nav {

height: 100%;

}

h1 {

background-color: #fafafa;
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
font-size: 1.3rem;
font-weight: normal;
margin: 0;
padding: .75rem 1rem;
position: fixed;
width: 100%;

}

main {

display: flex;

}

.active {

background-color: #ddd;
padding: calc(3.8rem + 5px) 1rem 1rem;
flex-basis: 75%;

}

nav {

background-color: #fff;
border-left: #aaa solid 1px;
box-sizing: border-box;
flex-basis: 33%;
padding-top: calc(2.8rem + 5px);

}

.query {

appearance: none;
background: inherit;
border: 0;
border-bottom: #ddd solid 1px;
cursor: pointer;
display: block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
padding: 1rem;
position: relative;
text-align: left;
width: 100%;

}

.query p {

color: #666;
font-size: .8em;
margin: .5em 0 0;

}

.query:hover {

background-color: #eee;

}

.query:focus {

outline: 1px dotted #8b3333;
outline-offset: 1px;
z-index: 1

}

.query {

background-color: #8b3333;
color: #fff;

}

.query p {

color: #fff;

}

.query:before {

border-bottom: 12px solid transparent;
border-right: 12px solid #8b3333;
border-top: 12px solid transparent;
content: ' ';
left: -12px;
position: absolute;

}

.query:hover {

background-color: #8b3333;

}

.opt {

display: block;
margin-bottom: 1rem;

}

.opt select {

font-size: 1rem;
margin-left: 1rem;
vertical-align: middle;

}

.opt textarea {

height: 20em;
width: 50em;

}

.run {

border-radius: 4px;
background: #8b3333;
color: #fff;
cursor: pointer;
display: block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
padding: .5rem 1rem;
transition: background .5s;

}

.run:focus {

outline: 1px dotted #8b3333;
outline-offset: 1px;

}

.run:disabled {

cursor: not-allowed;
opacity: .5;

}

.results {

margin: 1rem 0;

}

table {

background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
box-sizing: border-box;
max-width: 100%;
width: 100%;

}

th {

padding: 8px;
text-align: left;
vertical-align: bottom;

}

td {

border-top: 1px solid #aaa;
padding: 8px;
vertical-align: top;

}