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

  #pageHeader {border-bottom:1px solid #CCC;border-radius:0;padding:0 0.5em;height:4.5em;background:#DDD;color:#333;z-index:250;}
   #branding {font-size:1.75em;margin-left:1.5em;}
   #brandLink {color: #FFF;margin-left:-0.75em;}

  #mobileview {display:flex;}

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

   #left  {flex:0 0 auto;width:12em;max-height:100%;padding:calc(2em + 1rem) 0 0 0.25rem;transition:margin 300ms ease,max-height 300ms ease;}

    #social {margin-bottom:0.5rem;}

   main {margin: 0 -16.125em 0 0; border: 0 none; border-radius: 0; padding: 0.5em 1.75em 0 0;overflow:hidden;transition:margin 300ms ease;}
   #content.filterMode main {margin:0 -21em 0 0;}

   #right {flex:0 0 auto;width:16em;max-height:100%;border-left:1px solid #CCC;padding:0.5em 0.25em;background:#EEE;color:#333;transition:margin 300ms ease, box-shadow 300ms ease; box-shadow: 0 0 100px #000;z-index:100;}
   #content.filterMode #right {width:21em;}
   #calmap {margin-top:0.5rem;}

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

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

  #masks {background: rgba(255,0,0,0.1); width: 100%; height: 100%;}

   #leftmask {display:block;position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: linear-gradient(to left, rgba(248,248,255,0.42) 0%,rgba(248,248,255,1) 100%); z-index: 200; transition: width 300ms ease;}
   #leftmask:before {content:"\2212"; position:absolute;top:5rem;left:0.25em;width:5.625em;height:1em;margin:0;border:1px solid #BBB;border-radius:4px;padding:0 0.25rem;background:#DDD;text-align:center;font-size:2em;color:#CCC;text-shadow:0 0 1px #222;cursor:default;line-height:1;transform-origin:0.5em 0% 0;transition:transform 300ms ease,width 300ms ease,left 300ms ease,top 300ms ease;}

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

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

 /* left col collapsed */
 body.left-offscreen #left {margin-left:-9.5em;}
 body.left-offscreen #leftmask {position:fixed;width:2.25em;left:0;}
 body.left-offscreen #leftmask:before {content:"+";width:4.375em;top:calc(0.5em + 5rem);left:0.625em;transform:rotate(90deg);}

 /* right col collapsed */
 body.right-offscreen main {margin:0;}
 body.right-offscreen #content.filterMode main {margin:0;}
 body.right-offscreen #right {margin-right:-16.125em;border-radius: 0;box-shadow: none;}
 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; top:0.5em; right:0.5em;border-color:#FA8; transition: top 300ms ease, right 300ms ease, width 300ms ease, height 300ms ease, z-index 10ms linear 290ms;}



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

 #mobileview .compactItem .crewList {font-size: calc((100vw - 8rem - 450px) / 120 + 9px);}
 body:not(.left-offscreen) #mobileview .compactItem .crewList {font-size: calc((100vw - 8rem - 25em) / 60 + 5px);}
 .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:14px;}