body  {position:relative; max-width:100%; margin:0;font-size:14px;} /*  */

 #pageHeader{height:4.5em;border-bottom:1px solid #CCC;border-radius:0;padding:0 0.5em;background:#DDD;color:#333;}
  #branding {font-size:1.75em;margin:0 4em 0 3.5em;text-align:center;}
   #brandLink {margin-left:0;color: #FFF;}
    #brand:after {content:" ";}
    #brandAsURL {margin-left:-0.25em;}

 #mobileview {display:flex;}

  #content {flex:1;overflow-x:hidden;}

   #left {flex:0 0 auto;width:12em;border-right:1px solid #CCC;padding:0.5em 0.25em;background:#EEE;color:#333;transition:margin 300ms ease;box-shadow: -4px 0 20px #000;z-index:101;}

   main {width:100%;margin: 0 -18em 0 -12em; padding: 0.5em 1.75em 0 0.5em;transition:margin 300ms ease;}
   #content.filterMode main {margin: 0 -21em 0 -12em;}

   #right {flex: 0 0 auto;width: 18em;margin:0;border:0 none;border-left:1px solid #CCC;border-radius:0;padding:0.5em 0.25em;background:#EEE;color:#333;transition:margin 300ms ease, box-shadow 300ms ease; box-shadow: 4px 0 20px #000;z-index:100; }
   #content.filterMode #right {width:21em;}

  #user  {position:absolute; top:0.5em; right:0.5em; width:400px;border:1px solid #BBB; overflow: hidden; transition: top 300ms ease, right 300ms ease, width 300ms ease, height 300ms ease;}

  #pageFooter {height:2.75em;margin:0;border-top:1px solid #CCC;border-radius:0;padding:0 0.5em;background:#DDD;color:#333;line-height:2.7;}

  #masks {}

   #leftmask,
   #rightmask {display: block; position: absolute; top: 4.5em;bottom: 2.75em; width: 1.5em;z-index: 200; }

   #leftmask {left: 12em;  transition: left 300ms ease;}
   #leftmask:before {content:"menu"; position:absolute;top:-3.75em;left:-11.35em;width:5.625em;height:3em;margin:0;border:1px solid #b8b8b8;border-radius:4px;padding:0 0.25rem;background:#DDD;text-align:center;color:#333;text-shadow:0px 1px 0px #eee;cursor:default;line-height:2.9;user-select:none;transition:left 300ms ease;}
   #leftmask:hover:before {background:#E5E5E5;color:#000;}
   #leftmask:active:before {background:#D5D5D5;}

   #rightmask {right: 18em; transition: right 300ms ease;}
   #rightmask.filterMode {right: 21em;}
   #rightmask:before {content:"\2193";position:fixed;top:6em;right:18em;width:6.5em;height:1.5em;border:1px solid #AAA;border-radius:4px 4px 0 0;background:#CCC;line-height:1.4;text-align:center;transition:right 300ms ease;transform:rotate(-90deg);transform-origin:right bottom 0;}
   #rightmask.filterMode:before {right:21em;}

 #left,
 #right {max-height:100%;}
 body.left-offscreen #left,
 body.right-offscreen #right {max-height:calc(100vh - 7.25em);overflow:hidden;}


 /* left col collapsed */
 body.left-offscreen main {margin-left:0;}
 body.left-offscreen #content.filterMode main {margin-left: 0;}
 body.left-offscreen #left {margin-left:-12em; box-shadow: none;}
 body.left-offscreen #leftmask {left:-1em;}
 body.left-offscreen #leftmask:before {left:1.625em;}

 /* right col collapsed */
 body.right-offscreen main {margin-right:0;}
 body.right-offscreen #content.filterMode main {margin-right: 0;}
 body.right-offscreen #right {margin-right:-18em;box-shadow: none;background:#EEE;}
 body.right-offscreen #content.filterMode #right {margin-right:-21em;}
 body.right-offscreen #rightmask {right:0;}
 body.right-offscreen #rightmask:before {content:"\2191" " " attr(title) " " "\2191";right:0;}
 body.right-offscreen #rightmask.filterMode:before {border-color: #9B9; background: #CEC; color: #008000;}

 /* usermenu hidden */
 body.user-offscreen #user {width:6em; height:3em;z-index:0;border-color:#FA8;}

 main header, nav, section, aside {margin:0.25rem 0.25em;border:1px solid #DDD;border-radius:4px;padding:0.25em;background:#FFF;color:#333;}
 article {display: flex; flex-wrap: wrap;}

 #mobileview .compactItem .crewList {font-size: calc((100vw - 8rem - 450px) / 120 + 9px);}
 .tabHolder.resultsTabs {overflow:visible;}
 .resultCrew > .crewItem:not(.compactItem) {position: absolute; left: 0.25rem; right: 0.375rem; z-index: 5; box-shadow: 1px 1px 3px #333; margin: -4.25em auto 0; max-width:34em}
 .resultCrew > .crewItem:not(.compactItem) .crewList { line-height: 1.5;}
 .resultCrew > .crewItem:not(.compactItem) .itemExpand { visibility: visible;}

  .scrolltable table {font-size:13px;}

 #nav h3 {display:none;}