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;
}