 body  {position:relative; max-width:100%; margin:0;font-size:18px;} /* 516-846 */

  #pageHeader{height:5.5em;}
  #pageHeader {border:0 none;padding:0.25em 0.5em;background:none;color:initial;}
   #branding {font-size:2em;margin-left: 2.9em;}
   #brandLink {color:#CCC;margin-left:-0.75em;}

  #content {flex:1;overflow-x:hidden;transition:margin 300ms ease;}

   #left{flex:0 0 auto;width:12em;padding:2.75rem 0 0 0.25rem;}

    #social {margin-bottom:0.5rem;}

   main {}

   #right{flex:0 0 auto;width:14em;padding:2.75rem 0.25rem 0 0;}
   #content.filterMode #right {width:18em;}
   #calmap {margin-top:0.5rem;width:15.5em;}

  #user {position:absolute; top:25px; width:400px; right:25px; overflow: hidden;border:1px solid #BBB;transition: top 300ms ease, right 300ms ease, width 300ms ease, height 300ms ease;}

   #userlogin h3.pageHeader {margin: 0.5em 0em 1em 1.5em;}

  #pageFooter {margin:0.5em 0.25em;border:1px solid #CCC;border-radius:6px;padding:0 0 0 0.5em;height:2em;line-height:2;background:#EEE;color:#333;z-index:250;}

  #masks {background: rgba(255,0,0,0.1); width: 100%; height: 100%;}

   #leftmask,
   #rightmask {position:absolute;top:0;bottom:0;width:0;z-index:200;transition: width 300ms ease, top 300ms ease;}

   #leftmask:before,
   #rightmask:before {content:"\2212";position:absolute;top:6.2rem;height:1em;margin:0;border:1px solid #BBB;border-radius:4px;padding:0 0.125em;font-size:2em;line-height:1;text-align:center;text-shadow:0 0 1px #222;color:#CCC;background:#DDD;cursor:default;}

   #leftmask {left:0;background:linear-gradient(to left, rgba(248,248,255,0.42) 0%,rgba(248,248,255,1) 50px);}
   #leftmask:before {left:0.25em;width:5.625em;transform-origin:0.5em 0% 0;transition:transform 300ms ease,left 300ms ease,top 300ms ease;}

   #rightmask {right:0;background:linear-gradient(to right, rgba(248,248,255,0.42) 0%,rgba(248,248,255,1) 50px);}
   #rightmask:before {right:0.25em;width:6.625em;transform-origin:calc(100% - 0.5em) 50% 0;transition:transform 300ms ease,right 300ms ease,top 300ms ease,width 300ms ease;}
   #rightmask.filterMode:before {width: 8.625em;}


 #left,
 #right {max-height:100%;transition:max-height 300ms ease;}
 body.left-offscreen #left,
 body.right-offscreen #right {max-height:calc(100vh - 8.5em);overflow:hidden;}

 /* left col collapsed */
 body.left-offscreen #content {margin-left:-9.5em;}
 body.left-offscreen #left {margin-left:0;}
 body.left-offscreen #leftmask {position:fixed;width:2.25em;left:0;}
 body.left-offscreen #leftmask:before {content:"+";top:7.3rem;left:0.625em;width:3.625em;transform:rotate(90deg);}

 /* right col collapsed */
 body.right-offscreen #content {margin-right:-11.5em;}
 body.right-offscreen #content.filterMode {margin-right:-15.5em;}
 body.right-offscreen #right {margin-right:0;background:none;}
 body.right-offscreen #rightmask {position:fixed;width:2.25em;}
 body.right-offscreen #rightmask:before {content:"+";width:3.625em;right:0.125em;transform:rotate(-90deg);}

 /* usermenu hidden */
 body.user-offscreen #user {width:7em;height:3em;top:1.25em;right:3.25em;border-color:#FA8;}




 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 - 8rem - 450px) / 120 + 9px);}
 body:not(.right-offscreen) #mobileview .compactItem .crewList {font-size: calc((100vw - 8rem - 17rem - 450px) / 120 + 9px);}
 body:not(.right-offscreen):not(.left-offscreen) #mobileview .compactItem .crewList {font-size: calc((100vw - 8rem - 26rem - 450px) / 120 + 10px);}

 body:not(.right-offscreen):not(.left-offscreen) .tabHolder.resultsTabs {overflow:visible;}
 body:not(.right-offscreen):not(.left-offscreen) .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}
 body:not(.right-offscreen):not(.left-offscreen) .resultCrew > .crewItem:not(.compactItem) .crewList { line-height: 1.5;}
 body:not(.right-offscreen):not(.left-offscreen) .resultCrew > .crewItem:not(.compactItem) .itemExpand { visibility: visible;}


  .scrolltable table {font-size:15px;}
