@import "jquery/jquery-ui.css";

/* layout */
body { color:#000000; background-color:#ffffff; padding:0; margin: 0;  font-family: Helvetica,sans-serif; }
a { color: #037; border: none; text-decoration: none }
a:hover{  text-decoration: underline }

div#header { position:fixed; top:0; left:0; right:0; background-color: #f5f5f5; z-index:2; height: 5.2em; overflow: clip; }
div#header+hr {position:fixed; top:5.2em; left:0; right:0; z-index:2}
div#header input {-webkit-appearance:searchfield;-moz-appearance:searchfield;appearance:searchfield;}
div#content { margin-top: 5.3em; }

/* Fixme: We could experiment around with max-height: 90 vh? */
#allSideBoxes {
position:fixed; margin-top:1ex; top:5.2em; right:10px; z-index:1;
max-height:30em;
}
.sideBox {
padding:1ex; border-radius:0.5ex; overflow:hide; font-size:smaller; margin-bottom:1em;
max-height:100%;
}
.sideBox h3 { text-align:center; width:100%; cursor: pointer; cursor: hand; margin: 0;}
.sideBox ul {
display:block; overflow:auto; max-width:20em; max-height:20em; list-style:none; margin: 0; padding: 1em;
}
.sideBox li {
list-style-type: none; padding: 0; margin-right: 1ex;
}

.code { border-collapse:collapse; width:100%; padding:0 }
.code { font-family: monospace; }
table.code{ table-layout:fixed; width: 100% } /* This improves performence.  The idea is that the second column just overflows */
.code th { width:6.5ex; padding-right:1ex; background-color:#eeeeee ;
            text-align:right; color:black; font-weight:normal;
            -moz-user-select: none; }
.code td { padding-left: 1ex; white-space: pre }

#footer { font-size: smaller; margin:1ex; color: #333; text-align: right }
#footer img { vertical-align: middle; }
img { border: none; }
input#searchline { margin: 1ex;  width: 30em; max-width: 50%; }
#breadcrumb { padding:0; margin: 0 1ex 2ex 1ex; font-size:inherit; font-weight: normal }
hr { margin: 0; border-collapse:collapse; background-color: #e5e5e5; height:1px;border:none; }
p#options { font-size: small; position: absolute; right:1ex; top:48px; margin: 0 1ex 0 0  }
a.logo { float:right }
#breadcrumb_symbol a { color:inherit }

#tooltip {
    position:absolute;
    display:none;
    padding:1em;
    padding-top:1ex;
    border: 1px solid gray;
    background-color: white;
    font-size: smaller;
    opacity: 0.9;
    border-radius: 4px;
    max-width: 80%;
    box-shadow:1px 1px 7px gray;
    z-index:2;
}
#tooltip ul { margin:0; padding-left: 1em }
#tooltip a.showuse {color:inherit; text-decoration:underline}
#tooltip b a { color:inherit }
#tooltip abbr  { cursor: help; border-bottom: 1px dashed #000; }
/*#tooltip li { border: 1px solid blue; margin:0 }*/

p.warnmsg { color: #a00; padding: 0 1ex; margin: 0.3ex 0; }

.code a { text-decoration:none; color:inherit }
.code a:hover {  text-decoration: none }

.error { border-bottom: 1px dashed red }
.warning { border-bottom: 1px dotted #c90; }

#tooltip i { color: #888; white-space: pre-wrap; font-family: monospace }
#tooltip .ppcond { color: #063; white-space: pre-wrap; font-family: monospace; font-weight:bold  }
#tooltip .ppcond a { font-weight: normal; color:inherit  }

/* disable the keywords in strings  (macro have that)  */
.code .string em, .code .string b, .code .string var { color:inherit; font-style:inherit; font-weight:inherit; }

/* Old Macro expansions.*/
.expansion { display: none;  }

.fake { display: inline-block; position:relative; bottom: 0.7em; opacity: 0.8; font-size:small }
.fake::before { content: "\2380"; }
.refarg::before { display: inline-block; position:relative; bottom: 0.7em;
    opacity: 0.8; font-size:x-small; color: gray; content: "&"; }

@media only screen and (max-width: 30em) {
    .code {font-size: smaller;}
    p#options {display:none;}
    #breadcrumb span { display:none; }
    /* This makes sure that there is no horizontal scrollbar on mobile.
       Mobile users can use tab to scroll, and google does not consider we are mobile-ready otherwise */
    div#content { overflow-x:auto; }
}
@media only screen and (max-width: 60em) {
#allSideBoxes { display: none;}
}