#leftcontainer {position: absolute; top: 0px; left: 0px; width: 0px; bottom: 0px; background-color: #dddddd; color: #666666; overflow: hidden; box-shadow: 2px 0px 2px #999999; z-index: 5;}
#midcontainer {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}

#envelope.leftContainerCollapsed > #midcontainer {left: 15px;}
#envelope.leftContainerCollapsed > #leftcontainer {width: 15px; cursor: pointer;}
#envelope.leftContainerCollapsed > #leftcontainer > .closer {display: none;}
#envelope.leftContainerCollapsed > #leftcontainer:hover {background-color: #d6d6d6;}
#envelope.leftContainerCollapsed > #leftcontainer > #leftbox {display: none;}

#envelope.leftContainerExpanded > #midcontainer {left: 17%;}
#envelope.leftContainerExpanded > #leftcontainer {width: 17%; }
#envelope.leftContainerExpanded > #leftcontainer > .closer {color: #8e0404; font-weight: bold; position: absolute; top: 12px; right: 12px; box-sizing: border-box; height: 30px; width: 30px; text-align: center; padding-top: 5px; border-radius: 2px; cursor: pointer;}
#envelope.leftContainerExpanded > #leftcontainer > .closer:hover {background-color: #eeeeee;}
#envelope.leftContainerExpanded > #leftcontainer > #leftbox {display: block;}

#navlistcontainer { position: absolute; top: 0px; left: 0px; width: 30%; font-size: 0;}
#innernavlistcontainer { display: inline-block; width: calc(100% - 5px); font-size: initial; vertical-align: top;}
#resizenavlistcontainer { display: inline-block; height: 100vh; width: 5px; background-color: var(--border-light, #aaaaaa); cursor: ew-resize;}
#navbox { height: 100px; box-shadow: -2px 2px 2px #999999; z-index: 5;}
#listbox { height: calc(100vh - 178px - 1.8rem); overflow-y: scroll; overflow-x: hidden;}
#navbox.hasSearchModifiers {height: 80px;}
#listbox.hasSearchModifiers {top: 80px;}
#editbox { position: absolute; top: 1px; left: 30%; right: 0px; bottom: 0px;}
#editbox iframe { width: 100%; height: 100%; border: 0px; }
#editbox #editoverlay { position: absolute; width: 100%; height: 100%; border: 0px; z-index: 100;}
#critbox { position: absolute; top: 70px; left: 15px; bottom: 30px; max-height: 600px; width: 60%; background-color: #ffffff; box-shadow: 0px 0px 5px #666666; border-radius: 4px; z-index: 10;}

input#searchbox {font: inherit; border: 1px inset #cccccc; border-radius: 4px; background-color: #ffffff; color: #333333; padding: 6px 35px 6px 10px; margin: 10px 5px 10px 5px; min-height: 1.3em; display: inline-block; width: 40%; vertical-align: middle; box-sizing: border-box;}
input#searchbox.hasSearchModifiers {padding-left: 80px; width: 30%;}

button#butCritOpen {background-image: url(./furniture/find.png);}
button#butCritOpen.on { background-color: rgb(198, 231, 255); }
button#butCritRemove {background-image: url(./furniture/cross.png);}
button#butReload {background-image: url(./furniture/arrow_refresh.png); padding-top: 5px !important; padding-bottom: 5px !important; position: relative; top: -2px; margin-left: -2px; }
button#butReverse {background-image: url(./furniture/reverse.png); background-size: auto 2ex; padding-top: 5px !important; padding-bottom: 5px !important; position: relative; top: -2px; margin-left: -2px; }
button#butShowNumbers {background-image: url(./furniture/numbers.png); background-size: auto 2ex; padding-top: 5px !important; padding-bottom: 5px !important; position: relative; top: -2px; margin-left: -2px; }
button#butGoLast {background-image: url(./furniture/arrow_left.png); background-size: auto 2ex; padding-top: 5px !important; padding-bottom: 5px !important; position: relative; top: -2px; margin-left: -2px; }
button#butListMenu {background-image: url(./furniture/listmenu.png); background-size: auto 2ex;}
button#butCritCancel {background-image: url(./furniture/arrow_left.png);}
button#butCritGo {background-image: url(./furniture/find.png);}
button.iconOnly#butSearch {background-image: url(./furniture/magnifier.png);}

#navbox .line1 { padding-left: 10px; white-space: nowrap; border-bottom: 1px solid #eeeeee;}
#navbox.hasSearchModifiers .line1 {border-bottom: 0px;}
#navbox .lineModifiers { display: none; padding-left: 15px; overflow-x: hidden; white-space: nowrap; padding-bottom: 5px; margin-top: -5px; font-size: 0.9em;}
#navbox .lineModifiersLeft.hasCrits {padding-left: 62px;}
#navbox.hasSearchModifiers .lineModifiers {display: block;}
#navbox .line2 { padding-left: 10px; margin: 0px 0px 0px 0px; overflow-x: hidden; white-space: nowrap; }
#navbox .line2 button {padding-top: 0px; padding-bottom: 0px;}
#navbox #countcaption {color: #666666; padding: 14px 20px 0px 10px;}

#navbox .modifiers span.clickable { color: #999999; cursor: pointer;}
#navbox .modifiers span.clickable:hover {color: var(--link); }
#navbox .modifiers span.clickable span.arrow {color: #999999; font-size: 85%; position: relative; top: -2px; margin-left: 5px; }
#navbox .modifiers span.clickable:hover span.arrow {color: #09587e; }

#navbox .modifiers span.clickable span.current span.caption {display: none;}
#navbox .modifiers span.clickable span.current span.abbr {display: inline-block; width: 3em; overflow: hidden; text-align: center; box-sizing: border-box; padding: 4px 4px; margin: 0px 0px -10px 0px; position: relative; top: -4px; line-height: 1em; background-color: #cccccc; border-radius: 2px; text-shadow: 1px 1px 0px #ffffff; color: #333333;}

div.menu {z-index: 2;}
#navbox .modifiers div.menu {border: 1px solid var(--border); background-color: #ffffff; border-radius: 4px; box-shadow: 0px 0px 4px #666666; position: absolute; margin-top: 5px; white-space: nowrap;}
#navbox .modifiers div.menu a {display: block; padding: 10px 20px; text-decoration: none; color: #333333; border-top: 1px solid #dddddd;}
#navbox .modifiers div.menu a span.abbr {display: inline-block; width: 3em; overflow: hidden; text-align: center; box-sizing: border-box; padding: 4px 4px; margin: 0px 10px -10px -10px; position: relative; top: -3px; line-height: 1em; background-color: #cccccc; border-radius: 2px; text-shadow: 1px 1px 0px #ffffff;}
#navbox .modifiers div.menu a:first-child {border-top-left-radius: 4px; border-top-right-radius: 4px; border-top: 0px;}
#navbox .modifiers div.menu a:last-child {border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
#navbox .modifiers div.menu a:hover {background-color: #f7f9ea; }

#navbox .lineModifiersLeft div.menu {left: 10px;}
#navbox .lineModifiersLeft.hasCrits div.menu {left: 55px;}
#navbox .lineModifiersRight { float: right; padding-right: 20px;}
#navbox .lineModifiersRight div.menu {right: 10px;}

#navbox .boxModifiers {font-size: 0.9em; border-radius: 4px 0px 0px 4px; background-color: #eeeeee; color:   #666666; text-shadow: 1px 1px 0px #ffffff; padding: 7px 5px 6px 5px; margin: 0px 9px; min-height: 1.3em; display: inline-block; width: 60px; vertical-align: middle; z-index: 1; position: relative; margin-right: -76px;}
#navbox .boxModifiers span.clickable {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; padding-top: 5px;}
#navbox .boxModifiers span.clickable span.arrow {position: absolute; top: 0px; right: 12px; bottom: 0px; padding-top: 4px; font-size: 0.7em;}
#navbox .boxModifiers span.current span.abbr {background-color: transparent !important;}
#navbox .boxModifiers div.menu {left: -5px; top: 35px;}

#critbox #editor { position: absolute; top: 15px; left: 15px; right: 10px; bottom: 4em; overflow-y: scroll; overflow-x: hidden; padding-right: 20px;}
#critbox .buttons { position: absolute; left: 15px; right: 10px; bottom: 0px; text-align: right; }
#critbox .buttons *:last-child {margin-right: 0px;}

#listbox div.suggs {padding: 5px 15px; font-size: 0.9em; line-height: 2em;}
#listbox span.sugg {color: var(--link); cursor: pointer; margin-right: 0.75em; white-space: nowrap;}
#listbox span.sugg:hover {color: var(--link-hover);}

#listbox div.intertitle {padding: 5px 10px; margin: 10px 10px 5px 10px; background-color: var(--contrast); color: #ffffff; border-radius: 2px;}
#listbox div.intertitle:first-child {margin-top: 0px;}

#listbox .entry { padding: 5px 15px; margin: 0px; border-bottom: 1px solid #eeeeee; cursor: pointer; position: relative;}
#listbox .entry > div.inside { display: inline; }
#listbox .entry:first-child { border-top: 1px solid #eeeeee; }
#listbox .entry:last-child {margin-bottom: 10px;}
#listbox .entry:hover {background-color: #f7f9ea; text-shadow: 1px 1px 0px #ffffff;}
#listbox .entry:focus {background-color: #f7f9ea; text-shadow: 1px 1px 0px #ffffff; outline: 0px;}
#listbox .entry.current {background-color: var(--highlight); text-shadow: 1px 1px 0px #dddddd;}
#listbox .entry span.searchtext { background-color: #ffecb3; text-shadow: 0px 0px 0px transparent; border: 1px solid #ffffff; margin: 0px -1px; }

#listbox .entry a.entryMenuLink {float: right; color: #999999; font-weight: bold; position: relative; z-index: 1;}
#listbox .entry a.entryMenuLink:hover {color: #002c6f;}

#listbox .entry a.entryFlagLink {float: left; background-color: #ffffff; border: 1px solid #999999; border-radius: 20px; box-sizing: border-box; width: 1em; height: 1em; margin-right: 0.5em; position: relative; top: 2px; z-index: 1;}
#listbox .entry a.entryFlagLink.undecided {border-color: transparent; background-image: url(./furniture/loader-round-tiny.gif); background-position: center center; background-repeat: no-repeat;}
#listbox .entry a.entryFlagLink:hover {border-color: #002c6f;}

#listbox .entry span.entryLineNumber {float: left; margin-right: 0.5em; top: 2px; z-index: 1; display: none}

#listbox .entry div.entrymenu {border: 1px solid var(--border); background-color: #ffffff; border-radius: 4px; box-shadow: 0px 0px 4px #666666; position: absolute; right: 0px; top: 35px; white-space: nowrap;}
#listbox .entry div.entrymenu a {display: block; padding: 8px 20px; text-decoration: none; color: #333333; border-top: 1px solid #dddddd;}
#listbox .entry div.entrymenu a span.keyCaption {float: right; margin-left: 2em; margin-right: -0.5em; color: #999999; font-size: 80%; padding-top: 1px;}
#listbox .entry div.entrymenu a:first-child {border-top-left-radius: 4px; border-top-right-radius: 4px; border-top: 0px;}
#listbox .entry div.entrymenu a:last-child {border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
#listbox .entry div.entrymenu a:hover {background-color: #f7f9ea; }

#listbox .entry div.flagmenu {border: 1px solid var(--border); background-color: #ffffff; border-radius: 4px; box-shadow: 0px 0px 4px #666666; position: absolute; left: 10px; top: 35px; white-space: nowrap; max-height: 300px; overflow-y: auto;}
#listbox .entry div.flagmenu a {display: block; padding: 8px 20px 8px 10px; text-decoration: none; color: #333333; border-top: 1px solid #dddddd;}
#listbox .entry div.flagmenu a span.spot {float: left; background-color: #ffffff; border: 1px solid #999999; border-radius: 20px; box-sizing: border-box; width: 1em; height: 1em; margin-right: 0.5em; position: relative; top: 2px;}
#listbox .entry div.flagmenu a span.keyCaption {float: right; margin-left: 2em; margin-right: -0.5em; color: #999999; font-size: 80%; padding-top: 1px;}
#listbox .entry div.flagmenu a:first-child {border-top-left-radius: 4px; border-top-right-radius: 4px; border-top: 0px;}
#listbox .entry div.flagmenu a:last-child {border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
#listbox .entry div.flagmenu a:hover {background-color: #f7f9ea; }


#listbox #divMore { text-align: center; padding: 30px 0px; }
#listbox #divMore button#butMore {background-image: url(./furniture/resultset_down.png); margin-bottom: 15%;}

#listMenuWrapper {display: inline-block; position: absolute; right: 0; margin-top: 5px; margin-right: 20px;}
#listMenu { display: none; border: 1px solid var(--border); background-color: #ffffff; border-radius: 4px; box-shadow: 0px 0px 4px #666666; position: absolute; white-space: nowrap; max-height: 300px; overflow-y: auto;}
#listMenu a {text-align: left; display: block; padding: 8px 20px 8px 10px; text-decoration: none; color: #333333; border-top: 1px solid #dddddd;}
#listMenu a button {margin: 0}
#listMenu a:hover {background-color: #f7f9ea; }
